Fill out remaining dashboard desktop detail info (#4058)

This commit replaces the remaining hardcoded data in the dashboard desktop detail view with real data fetched from the cfgmgmt API. Signed-off-by: Scott Christopherson <scott@chef.io>
chef · Jul 13, 2020 · 24868b1 · 24868b1
1 parent d07a4e4
commit 24868b1
Show file tree

Hide file tree

Showing 12 changed files with 169 additions and 28 deletions.
diff --git a/components/automate-ui/src/app/entities/desktop/desktop.actions.ts b/components/automate-ui/src/app/entities/desktop/desktop.actions.ts
@@ -1,6 +1,7 @@
 import { Action } from '@ngrx/store';
 import { HttpErrorResponse } from '@angular/common/http';
 
+import { NodeRun } from 'app/types/types';
 import { DailyCheckInCountCollection, NodeRunsDailyStatusCollection,
   TopErrorsCollection, CountedDurationCollection, Desktop, TermFilter,
   PageSizeChangeEvent, NodeMetadataCount } from './desktop.model';
@@ -50,6 +51,12 @@ export enum DesktopActionTypes {
     'DESKTOP::GET::DESKTOPS_TOTAL::SUCCESS',
   GET_DESKTOPS_TOTAL_FAILURE =
     'DESKTOP::GET::DESKTOPS_TOTAL::FAILURE',
+  GET_DESKTOP =
+    'DESKTOP::GET::DESKTOP',
+  GET_DESKTOP_SUCCESS =
+    'DESKTOP::GET::DESKTOP::SUCCESS',
+  GET_DESKTOP_FAILURE =
+    'DESKTOP::GET::DESKTOP::FAILURE',
   SET_SELECTED_DESKTOP =
     'DESKTOP::SET::DESKTOP',
   SET_SELECTED_DAYS_AGO =
@@ -170,6 +177,21 @@ export class GetDesktopsFailure implements Action {
   constructor(public payload: HttpErrorResponse) { }
 }
 
+export class GetDesktop implements Action {
+  readonly type = DesktopActionTypes.GET_DESKTOP;
+  constructor(public payload: { nodeId: string, runId: string }) { }
+}
+
+export class GetDesktopSuccess implements Action {
+  readonly type = DesktopActionTypes.GET_DESKTOP_SUCCESS;
+  constructor(public payload: NodeRun) { }
+}
+
+export class GetDesktopFailure implements Action {
+  readonly type = DesktopActionTypes.GET_DESKTOP_FAILURE;
+  constructor(public payload: HttpErrorResponse) { }
+}
+
 export class GetDesktopsTotal implements Action {
   readonly type = DesktopActionTypes.GET_DESKTOPS_TOTAL;
 }
@@ -241,6 +263,9 @@ export type DesktopActions =
   | GetDesktops
   | GetDesktopsSuccess
   | GetDesktopsFailure
+  | GetDesktop
+  | GetDesktopSuccess
+  | GetDesktopFailure
   | GetDesktopsTotal
   | GetDesktopsTotalSuccess
   | GetDesktopsTotalFailure

diff --git a/components/automate-ui/src/app/entities/desktop/desktop.effects.ts b/components/automate-ui/src/app/entities/desktop/desktop.effects.ts
@@ -1,9 +1,11 @@
 import { catchError, mergeMap, map, withLatestFrom, switchMap } from 'rxjs/operators';
 import { Injectable } from '@angular/core';
 import { Actions, Effect, ofType } from '@ngrx/effects';
-import { of, combineLatest } from 'rxjs';
+import { of, combineLatest, from } from 'rxjs';
 import { NgrxStateAtom } from 'app/ngrx.reducers';
 import { Store } from '@ngrx/store';
+import { NodeRunsService } from 'app/services/node-details/node-runs.service';
+import { NodeRun } from 'app/types/types';
 
 import {
   GetDailyCheckInTimeSeries,
@@ -25,6 +27,9 @@ import {
   GetDesktops,
   GetDesktopsSuccess,
   GetDesktopsFailure,
+  GetDesktop,
+  GetDesktopSuccess,
+  GetDesktopFailure,
   GetDesktopsTotal,
   GetDesktopsTotalSuccess,
   GetDesktopsTotalFailure
@@ -39,7 +44,8 @@ export class DesktopEffects {
   constructor(
     private actions$: Actions,
     private requests: DesktopRequests,
-    private store$: Store<NgrxStateAtom>
+    private store$: Store<NgrxStateAtom>,
+    private nodeRunsService: NodeRunsService
   ) { }
 
   @Effect()
@@ -168,6 +174,26 @@ export class DesktopEffects {
       });
     }));
 
+  @Effect()
+  getDesktop$ = this.actions$.pipe(
+    ofType(DesktopActionTypes.GET_DESKTOP),
+    switchMap((action: GetDesktop) =>
+      from(this.nodeRunsService.getNodeRun(action.payload.nodeId, action.payload.runId)).pipe(
+        map((nodeRun: NodeRun) => new GetDesktopSuccess(nodeRun)),
+        catchError((error) => of(new GetDesktopFailure(error))))
+    ));
+
+  @Effect()
+  getDesktopFailure$ = this.actions$.pipe(
+    ofType(DesktopActionTypes.GET_DESKTOP_FAILURE),
+    map(({ payload: { error } }: GetDesktopFailure) => {
+      const msg = error.error;
+      return new CreateNotification({
+        type: Type.error,
+        message: `Could not get desktop errors: ${msg || error}`
+      });
+    }));
+
   @Effect()
   getDesktopsTotal$ = this.actions$.pipe(
     ofType(DesktopActionTypes.GET_DESKTOPS_TOTAL),

diff --git a/components/automate-ui/src/app/entities/desktop/desktop.model.ts b/components/automate-ui/src/app/entities/desktop/desktop.model.ts
@@ -1,3 +1,5 @@
+import { NodeRun } from 'app/types/types';
+
 export enum Terms {
   DesktopName = 'name',
   Platform = 'platform',
@@ -16,6 +18,7 @@ export enum SortOrder {
 export interface Selected {
   desktop: Desktop;
   daysAgo: number;
+  nodeRun: NodeRun;
 }
 
 export interface DailyCheckInCountCollection {
@@ -87,6 +90,7 @@ export interface Desktop {
   platformVersion: string;
   chefVersion: string;
   domain: string;
+  latestRunId: string;
 }
 
 export interface Filter {

diff --git a/components/automate-ui/src/app/entities/desktop/desktop.reducer.ts b/components/automate-ui/src/app/entities/desktop/desktop.reducer.ts
@@ -31,6 +31,7 @@ export interface DesktopEntityState {
   desktopListTitle: string;
   desktops: Desktop[];
   getDesktopsStatus: EntityStatus;
+  getDesktopStatus: EntityStatus;
   desktopsTotal: number;
   getDesktopsTotalStatus: EntityStatus;
   getDesktopsFilter: Filter;
@@ -41,7 +42,8 @@ export const desktopEntityInitialState: DesktopEntityState = {
   getDailyCheckInTimeSeriesStatus: EntityStatus.notLoaded,
   selected: {
     desktop: undefined,
-    daysAgo: 3
+    daysAgo: 3,
+    nodeRun: undefined
   },
   topErrorCollection: {items: [], updated: new Date(0)},
   getTopErrorCollectionStatus: EntityStatus.notLoaded,
@@ -52,6 +54,7 @@ export const desktopEntityInitialState: DesktopEntityState = {
   desktopListTitle: 'Desktops',
   desktops: [],
   getDesktopsStatus: EntityStatus.notLoaded,
+  getDesktopStatus: EntityStatus.notLoaded,
   desktopsTotal: 0,
   getDesktopsTotalStatus: EntityStatus.notLoaded,
   dailyNodeRuns: {
@@ -152,6 +155,17 @@ export function desktopEntityReducer(state: DesktopEntityState = desktopEntityIn
     case DesktopActionTypes.GET_DESKTOPS_FAILURE:
       return set('getDesktopsStatus', EntityStatus.loadingFailure, state);
 
+    case DesktopActionTypes.GET_DESKTOP:
+      return set('getDesktopStatus', EntityStatus.loading, state);
+
+    case DesktopActionTypes.GET_DESKTOP_SUCCESS:
+      return pipe(
+        set('getDesktopStatus', EntityStatus.loadingSuccess),
+        set('selected.nodeRun', action.payload))(state) as DesktopEntityState;
+
+    case DesktopActionTypes.GET_DESKTOP_FAILURE:
+      return set('getDesktopStatus', EntityStatus.loadingFailure, state);
+
     case DesktopActionTypes.GET_DESKTOPS_TOTAL:
       return set('getDesktopsTotalStatus', EntityStatus.loading, state);
 

diff --git a/components/automate-ui/src/app/entities/desktop/desktop.requests.ts b/components/automate-ui/src/app/entities/desktop/desktop.requests.ts
@@ -159,7 +159,8 @@ export class DesktopRequests {
       platformFamily: respDesktop.platform_family,
       platformVersion: respDesktop.platform_version,
       chefVersion: respDesktop.chef_version,
-      domain: respDesktop.domain
+      domain: respDesktop.domain,
+      latestRunId: respDesktop.latest_run_id
     };
   }
 

diff --git a/components/automate-ui/src/app/entities/desktop/desktop.selectors.ts b/components/automate-ui/src/app/entities/desktop/desktop.selectors.ts
@@ -29,6 +29,11 @@ export const getSelectedDesktop = createSelector(
   (state) => state.selected.desktop
 );
 
+export const getSelectedNodeRun = createSelector(
+  desktopState,
+  (state) => state.selected.nodeRun
+);
+
 export const getDailyNodeRuns = createSelector(
   desktopState,
   (state) => state.dailyNodeRuns

diff --git a/components/automate-ui/src/app/modules/desktop/dashboard/dashboard.component.html b/components/automate-ui/src/app/modules/desktop/dashboard/dashboard.component.html
@@ -90,6 +90,7 @@ <h1>
         class="dashboard-detail-column">
         <app-desktop-detail
           [desktop]="selectedDesktop"
+          [nodeRun]="selectedNodeRun$ | async"
           [fullscreened]="desktopDetailFullscreened"
           [checkInHistory]="checkInHistory$ | async"
           [checkInNumDays]="checkInNumDays"

diff --git a/components/automate-ui/src/app/modules/desktop/dashboard/dashboard.component.ts b/components/automate-ui/src/app/modules/desktop/dashboard/dashboard.component.ts
@@ -6,10 +6,12 @@ import { map, filter } from 'rxjs/operators';
 import { last, reverse } from 'lodash/fp';
 import * as moment from 'moment/moment';
 import { LayoutFacadeService } from 'app/entities/layout/layout.facade';
+import { NodeRun } from 'app/types/types';
 
 import {
   GetDailyCheckInTimeSeries,
   SetSelectedDesktop,
+  GetDesktop,
   SetSelectedDaysAgo,
   GetTopErrorsCollection,
   GetUnknownDesktopDurationCounts,
@@ -38,7 +40,8 @@ import {
   desktopsTotal,
   desktopsCurrentPage,
   desktopsPageSize,
-  desktopsFilterTerms
+  desktopsFilterTerms,
+  getSelectedNodeRun
 } from 'app/entities/desktop/desktop.selectors';
 import {
   DailyCheckInCount, DailyCheckInCountCollection, DayPercentage,
@@ -75,6 +78,7 @@ export class DashboardComponent implements OnInit {
   public currentPage$: Observable<number>;
   public pageSize$: Observable<number>;
   public termFilters$: Observable<TermFilter[]>;
+  public selectedNodeRun$: Observable<NodeRun>;
   public checkInNumDays = 15;
   public desktopListVisible = false;
   public desktopListFullscreened = false;
@@ -110,6 +114,8 @@ export class DashboardComponent implements OnInit {
     this.desktopListTitle$ = this.store.select(desktopListTitle);
     this.desktops$ = this.store.select(desktops);
 
+    this.selectedNodeRun$ = this.store.select(getSelectedNodeRun);
+
     this.totalDesktopCount$ = this.store.select(desktopsTotal);
 
     this.checkInCountCollection$ = this.store.select(dailyCheckInCountCollection).pipe(
@@ -309,6 +315,7 @@ export class DashboardComponent implements OnInit {
   public onDesktopSelected(desktop: Desktop) {
     this.selectedDesktop = desktop;
     this.store.dispatch(new SetSelectedDesktop({desktop}));
+    this.store.dispatch(new GetDesktop({ nodeId: desktop.id, runId: desktop.latestRunId }));
     this.store.dispatch(
       new GetDailyNodeRunsStatusTimeSeries(this.selectedDesktop.id, this.checkInNumDays));
     this.desktopDetailVisible = true;

diff --git a/components/automate-ui/src/app/modules/desktop/desktop-detail/desktop-detail.component.html b/components/automate-ui/src/app/modules/desktop/desktop-detail/desktop-detail.component.html
@@ -76,53 +76,53 @@ <h3>Check-in History</h3>
     </chef-table>
   </div>
 
-  <div class="detail-info">
+  <div class="detail-info" *ngIf="nodeRun">
     <h3>Overview</h3>
     <chef-table>
       <chef-tbody>
         <chef-tr>
           <chef-th>Host Name</chef-th>
-          <chef-td>{{ desktop.name }}</chef-td>
+          <chef-td>{{ nodeRun.nodeName }}</chef-td>
         </chef-tr>
         <chef-tr>
           <chef-th>Chef Infra Server</chef-th>
           <chef-td>fakechefserver.eastus.cloudapp.azure.com</chef-td>
         </chef-tr>
         <chef-tr>
           <chef-th>Node ID</chef-th>
-          <chef-td>{{ desktop.id }}</chef-td>
+          <chef-td>{{ nodeRun.nodeId }}</chef-td>
         </chef-tr>
         <chef-tr>
-          <chef-th>Platform Version</chef-th>
-          <chef-td>{{ desktop.platform }}</chef-td>
+          <chef-th>Platform</chef-th>
+          <chef-td>{{ nodeRun.platform }}</chef-td>
         </chef-tr>
         <chef-tr>
           <chef-th>Total Memory</chef-th>
-          <chef-td>16.64GB</chef-td>
+          <chef-td>{{ nodeRun.memoryTotal }}</chef-td>
         </chef-tr>
         <chef-tr>
           <chef-th>Domain</chef-th>
-          <chef-td>chef.io</chef-td>
+          <chef-td>{{ nodeRun.domain }}</chef-td>
         </chef-tr>
         <chef-tr>
           <chef-th>IP Address</chef-th>
-          <chef-td>192.168.5.30</chef-td>
+          <chef-td>{{ nodeRun.ipaddress }}</chef-td>
         </chef-tr>
         <chef-tr>
           <chef-th>IPV6 Address</chef-th>
-          <chef-td>fe80:20c:29ff:fe2a:76e5</chef-td>
+          <chef-td>{{ nodeRun.ip6address }}</chef-td>
         </chef-tr>
         <chef-tr>
           <chef-th>MAC Address</chef-th>
-          <chef-td>00:0C:29:2A:76:E5</chef-td>
+          <chef-td>{{ nodeRun.macaddress }}</chef-td>
         </chef-tr>
         <chef-tr>
           <chef-th>Uptime</chef-th>
-          <chef-td>{{ desktop.uptimeSeconds }}</chef-td>
+          <chef-td>{{ nodeRun.uptimeSeconds }}</chef-td>
         </chef-tr>
         <chef-tr>
           <chef-th>Time Zone</chef-th>
-          <chef-td>GMT</chef-td>
+          <chef-td>{{ nodeRun.timezone }}</chef-td>
         </chef-tr>
       </chef-tbody>
     </chef-table>
@@ -132,11 +132,11 @@ <h3>Chef Infra Client</h3>
       <chef-tbody>
         <chef-tr>
           <chef-th>Version</chef-th>
-          <chef-td>{{ desktop.chefVersion }}</chef-td>
+          <chef-td>{{ nodeRun.chefVersion }}</chef-td>
         </chef-tr>
         <chef-tr>
           <chef-th>Last Run End Time</chef-th>
-          <chef-td>{{ desktop.checkin }}</chef-td>
+          <chef-td>{{ nodeRun.endTime }}</chef-td>
         </chef-tr>
       </chef-tbody>
     </chef-table>
@@ -146,11 +146,11 @@ <h3>System</h3>
       <chef-tbody>
         <chef-tr>
           <chef-th>Manufacturer</chef-th>
-          <chef-td>LENOVO</chef-td>
+          <chef-td>{{ nodeRun.dmiSystemManufacturer }}</chef-td>
         </chef-tr>
         <chef-tr>
           <chef-th>Serial Number</chef-th>
-          <chef-td>R90QS96N</chef-td>
+          <chef-td>{{ nodeRun.dmiSystemSerialNumber }}</chef-td>
         </chef-tr>
       </chef-tbody>
     </chef-table>
@@ -160,11 +160,11 @@ <h3>Virtualization</h3>
       <chef-tbody>
         <chef-tr>
           <chef-th>System</chef-th>
-          <chef-td>vmware</chef-td>
+          <chef-td>{{ nodeRun.virtualizationSystem }}</chef-td>
         </chef-tr>
         <chef-tr>
           <chef-th>Role</chef-th>
-          <chef-td>guest</chef-td>
+          <chef-td>{{ nodeRun.virtualizationRole }}</chef-td>
         </chef-tr>
       </chef-tbody>
     </chef-table>
@@ -174,11 +174,11 @@ <h3>Kernel</h3>
       <chef-tbody>
         <chef-tr>
           <chef-th>Version</chef-th>
-          <chef-td>10.0.18362</chef-td>
+          <chef-td>{{ nodeRun.kernelVersion }}</chef-td>
         </chef-tr>
         <chef-tr>
           <chef-th>Release</chef-th>
-          <chef-td>10.0.18362</chef-td>
+          <chef-td>{{ nodeRun.kernelRelease }}</chef-td>
         </chef-tr>
       </chef-tbody>
     </chef-table>

diff --git a/components/automate-ui/src/app/modules/desktop/desktop-detail/desktop-detail.component.ts b/components/automate-ui/src/app/modules/desktop/desktop-detail/desktop-detail.component.ts
@@ -6,6 +6,7 @@ import { saveAs } from 'file-saver';
 import { DateTime } from 'app/helpers/datetime/datetime';
 import { NodeRunsService } from 'app/services/node-details/node-runs.service';
 import { RunHistoryStore } from 'app/services/run-history-store/run-history.store';
+import { NodeRun } from 'app/types/types';
 
 @Component({
   selector: 'app-desktop-detail',
@@ -15,6 +16,7 @@ import { RunHistoryStore } from 'app/services/run-history-store/run-history.stor
 export class DesktopDetailComponent {
 
   @Input() desktop: Desktop;
+  @Input() nodeRun: NodeRun;
   @Input() fullscreened = false;
   @Input() checkInHistory: DailyNodeRuns;
   @Input() checkInNumDays = 15;