misc

2023-06-24 12:54:21 -04:00
parent 48516e468e
commit 3ba7ef8ca9
14 changed files with 355 additions and 62 deletions
@@ -0,0 +1,75 @@
+<div class="grid">
+    <ng-container *ngIf="workerInfo$ | async as workerInfo">
+        <div class="col-12 lg:col-6 xl:col-3">
+            <div class="card mb-0">
+                <div class="flex justify-content-between mb-3">
+                    <div>
+                        <span class="block text-500 font-medium mb-3">ID</span>
+                        <div class="text-900 font-medium text-xl">{{workerInfo.name}}</div>
+                    </div>
+                    <div class="flex align-items-center justify-content-center bg-blue-100 border-round"
+                        [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
+                        <i class="pi pi-id-card text-blue-500 text-xl"></i>
+                    </div>
+                </div>
+                <!-- <span class="text-green-500 font-medium">24 new </span> -->
+                <span class="text-500">{{workerInfo.sessionId}}</span>
+            </div>
+        </div>
+        <div class="col-12 lg:col-6 xl:col-3">
+            <div class="card mb-0">
+                <div class="flex justify-content-between mb-3">
+                    <div>
+                        <span class="block text-500 font-medium mb-3">Best Difficulty</span>
+                        <div class="text-900 font-medium text-xl">{{workerInfo.bestDifficulty | numberSuffix}}
+                        </div>
+                    </div>
+                    <div class="flex align-items-center justify-content-center bg-orange-100 border-round"
+                        [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
+                        <i class="pi pi-star text-orange-500 text-xl"></i>
+                    </div>
+                </div>
+                <span class="text-green-500 font-medium">{{workerInfo.bestDifficulty | number}}</span>
+            </div>
+        </div>
+        <div class="col-12 lg:col-6 xl:col-3">
+            <div class="card mb-0">
+                <div class="flex justify-content-between mb-3">
+                    <div>
+                        <span class="block text-500 font-medium mb-3">Uptime</span>
+                        <div class="text-900 font-medium text-xl">{{workerInfo.startTime | dateAgo}}</div>
+                    </div>
+                    <div class="flex align-items-center justify-content-center bg-cyan-100 border-round"
+                        [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
+                        <i class="pi pi-clock text-cyan-500 text-xl"></i>
+                    </div>
+                </div>
+                <!-- <span class="text-green-500 font-medium">520 </span>-->
+                <span class="text-500">Since {{workerInfo.startTime | date : 'short'}}</span>
+            </div>
+        </div>
+        <!-- <div class="col-12 lg:col-6 xl:col-3">
+        <div class="card mb-0">
+            <div class="flex justify-content-between mb-3">
+                <div>
+                    <span class="block text-500 font-medium mb-3">Comments</span>
+                    <div class="text-900 font-medium text-xl">152 Unread</div>
+                </div>
+                <div class="flex align-items-center justify-content-center bg-purple-100 border-round"
+                    [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
+                    <i class="pi pi-comment text-purple-500 text-xl"></i>
+                </div>
+            </div>
+            <span class="text-green-500 font-medium">85 </span>
+            <span class="text-500">responded</span>
+        </div>
+    </div> -->
+    </ng-container>
+
+
+    <div class="col-12" *ngIf="chartData$ | async as chartData">
+        <div class="card">
+            <p-chart type="line" [data]="chartData" [options]="chartOptions"></p-chart>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WorkerGroupComponent } from './worker-group.component';
+
+describe('WorkerGroupComponent', () => {
+  let component: WorkerGroupComponent;
+  let fixture: ComponentFixture<WorkerGroupComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ WorkerGroupComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(WorkerGroupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,92 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { map, Observable, shareReplay } from 'rxjs';
+
+import { WorkerService } from '../../services/worker.service';
+
+@Component({
+  selector: 'app-worker-group',
+  templateUrl: './worker-group.component.html',
+  styleUrls: ['./worker-group.component.scss']
+})
+export class WorkerGroupComponent {
+
+  public workerInfo$: Observable<any>;
+
+  public chartData$: Observable<any>;
+
+  public chartOptions: any;
+
+  constructor(private workerService: WorkerService, private route: ActivatedRoute) {
+    const documentStyle = getComputedStyle(document.documentElement);
+    const textColor = documentStyle.getPropertyValue('--text-color');
+    const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+    const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+
+    this.workerInfo$ = this.workerService.getWorkerInfo(this.route.snapshot.params['address'], this.route.snapshot.params['workerName'], this.route.snapshot.params['workerId']).pipe(
+      shareReplay({ bufferSize: 1, refCount: true })
+    )
+
+    this.chartData$ = this.workerInfo$.pipe(
+      map((workerInfo: any) => {
+
+        return {
+          labels: workerInfo.chartData.map((d: any) => d.label),
+          datasets: [
+            {
+              label: workerInfo.name,
+              data: workerInfo.chartData.map((d: any) => d.data),
+              fill: false,
+              backgroundColor: documentStyle.getPropertyValue('--bluegray-700'),
+              borderColor: documentStyle.getPropertyValue('--bluegray-700'),
+              tension: .4
+            }
+          ]
+        }
+      })
+    );
+
+
+
+    this.chartOptions = {
+      plugins: {
+        legend: {
+          labels: {
+            color: textColor
+          }
+        }
+      },
+      scales: {
+        x: {
+          type: 'time',
+          time: {
+            unit: 'minute', // Set the unit to 'minute'
+            stepSize: 10, // Set the desired interval between labels in minutes
+
+          },
+          ticks: {
+            color: textColorSecondary
+          },
+          grid: {
+            color: surfaceBorder,
+            drawBorder: false
+          }
+        },
+        y: {
+          ticks: {
+            color: textColorSecondary,
+            callback: (value: number) => value + ' GH/s',
+          },
+          grid: {
+            color: surfaceBorder,
+            drawBorder: false
+          }
+        }
+      }
+    };
+  }
+
+
+
+
+}