Udmi web app updates

udmif/api/build.yml

@@ -6,7 +6,7 @@ cache:
 include:
   - project: 'buildings-iot/templates/cicd_pipelines'
     ref: main
-    file: node.yml
+    file: node16.yml
 
 stages:
   - build

udmif/api/src/__tests__/device/MockDeviceDataSource.ts

@@ -1,5 +1,5 @@
 import { GraphQLDataSource } from 'apollo-datasource-graphql/dist/GraphQLDataSource';
-import { sum } from 'lodash';
+import { DeviceError } from '../../common/model';
 import { Device, DevicesResponse, Point } from '../../device/model';
 import { createDevices } from './data';
 
@@ -58,11 +58,11 @@ export default class MockDeviceDataSource extends GraphQLDataSource<object> {
     };
   }
 
-  async getDeviceErrorsCountBySite(siteName: string): Promise<number> {
+  async getDeviceErrorsBySite(siteName: string): Promise<DeviceError[]> {
     const { devices } = await this.getDevicesBySite(siteName);
 
-    return devices.reduce((n: number, device: Device) => {
-      return sum([n, device.validation?.errors.length]);
-    }, 0);
+    return devices.reduce((errors: DeviceError[], device: Device) => {
+      return errors.concat(device.validation?.errors ?? []);
+    }, []);
   }
 }

udmif/api/src/__tests__/site/__snapshots__/resolve.spec.ts.snap

@@ -5,6 +5,7 @@ Object {
   "data": Object {
     "site": Object {
       "correctDevicesCount": 1,
+      "deviceErrors": Array [],
       "errorDevicesCount": 1,
       "extraDevicesCount": 0,
       "lastValidated": "2022-07-16T18:27:19Z",

udmif/api/src/__tests__/site/resolve.spec.ts

@@ -40,6 +40,10 @@ const QUERY_SITE = gql`
       extraDevicesCount
       lastValidated
       percentValidated
+      deviceErrors {
+        timestamp
+        message
+      }
       totalDeviceErrorsCount
       validation
     }

udmif/api/src/common/model.ts

@@ -43,3 +43,11 @@ export interface Filter {
   operator: string;
   value: string;
 }
+
+export interface DeviceError {
+  message: string;
+  detail?: string;
+  category: string;
+  timestamp: string;
+  level: number;
+}

udmif/api/src/device/DeviceDataSource.ts

@@ -7,8 +7,8 @@ import {
   DistinctSearchOptions,
   ValidatedSearchOptions,
   SearchOptions,
+  DeviceError,
 } from '../common/model';
-import { sum } from 'lodash';
 
 export class DeviceDataSource extends GraphQLDataSource {
   constructor(private deviceDAO: DAO<Device>) {
@@ -70,11 +70,11 @@ export class DeviceDataSource extends GraphQLDataSource {
     });
   }
 
-  async getDeviceErrorsCountBySite(siteName: string): Promise<number> {
+  async getDeviceErrorsBySite(siteName: string): Promise<DeviceError[]> {
     const { devices } = await this.getDevicesBySite(siteName);
 
-    return devices.reduce((n: number, device: Device) => {
-      return sum([n, device.validation?.errors.length]);
-    }, 0);
+    return devices.reduce((errors: DeviceError[], device: Device) => {
+      return errors.concat(device.validation?.errors ?? []);
+    }, []);
   }
 }

udmif/api/src/site/resolvers.ts

@@ -47,8 +47,11 @@ export const resolvers = {
         ]) / ((await deviceDS.getDevicesBySite(site.name)).totalFilteredCount || 1)
       );
     },
-    totalDeviceErrorsCount: (site: Site, _args, { dataSources: { deviceDS } }: ApolloContext) => {
-      return deviceDS.getDeviceErrorsCountBySite(site.name);
+    deviceErrors: (site: Site, _args, { dataSources: { deviceDS } }: ApolloContext) => {
+      return deviceDS.getDeviceErrorsBySite(site.name);
+    },
+    totalDeviceErrorsCount: async (site: Site, _args, { dataSources: { deviceDS } }: ApolloContext) => {
+      return (await deviceDS.getDeviceErrorsBySite(site.name)).length;
     },
     validation: (site: Site) => {
       return JSON.stringify(site.validation);

udmif/api/src/site/schema.graphql

@@ -7,6 +7,18 @@ type SitesResponse {
   totalFilteredCount: Int!
 }
 
+type DeviceError {
+  # A human-readable one-line description of the entry
+  message: String!
+  # An optional extensive entry which can include more detail, e.g. a complete program stack-trace
+  detail: String
+  category: String!
+  # Timestamp the condition was triggered, or most recently updated
+  timestamp: String!
+  # The status level should conform to the numerical Stackdriver LogEntry levels. The DEFAULT value of 0 is not allowed (lowest value is 100, maximum 800).
+  level: Int!
+}
+
 type Site {
   # Name of the site
   name: String!
@@ -25,6 +37,8 @@ type Site {
   # Percent of devices validated i.e. 0.97
   percentValidated: Float!
   # Total number of errors across all devices
+  deviceErrors: [DeviceError!]!
+  # Total number of errors across all devices
   totalDeviceErrorsCount: Int!
   # JSON validation message
   validation: String

udmif/event-handler/build.yml

@@ -7,7 +7,7 @@ cache:
 include:
   - project: 'buildings-iot/templates/cicd_pipelines'
     ref: main
-    file: node.yml
+    file: node16.yml
 
 stages:
   - build

udmif/web/build.yml

@@ -7,7 +7,7 @@ cache:
 include:
   - project: 'buildings-iot/templates/cicd_pipelines'
     ref: main
-    file: node.yml
+    file: node16.yml
 
 stages:
   - build

udmif/web/src/app/auth/auth.guard.spec.ts

@@ -2,6 +2,7 @@ import { TestBed } from '@angular/core/testing';
 import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { BehaviorSubject } from 'rxjs';
+import { LoginComponent } from '../login/login.component';
 import { AuthGuard } from './auth.guard';
 import { AuthService } from './auth.service';
 
@@ -16,7 +17,7 @@ describe('AuthGuard', () => {
     mockAuthService.isLoggedIn$ = new BehaviorSubject<boolean | null>(null);
 
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule],
+      imports: [RouterTestingModule.withRoutes([{ path: 'login', component: LoginComponent }])],
       providers: [{ provide: AuthService, useValue: mockAuthService }],
     });
     guard = TestBed.inject(AuthGuard);

udmif/web/src/app/breadcrumb/breadcrumb.component.scss

@@ -4,10 +4,6 @@
   display: flex;
   align-items: center;
 
-  a {
-    color: $primary;
-  }
-
   .mat-icon {
     color: $icon-default;
   }

udmif/web/src/app/common/pipes/order-by.pipe.spec.ts

@@ -0,0 +1,44 @@
+import { OrderByPipe } from './order-by.pipe';
+
+describe('OrderByPipe', () => {
+  const pipe = new OrderByPipe();
+
+  const testCases = [
+    { expected: [] },
+    { value: null, sortBy: null, order: null, expected: [] },
+    {
+      value: [{ name: 'device-1' }, { name: 'device-3' }, { name: 'device-2' }],
+      sortBy: 'name',
+      expected: [{ name: 'device-1' }, { name: 'device-2' }, { name: 'device-3' }],
+    },
+    {
+      value: [{ name: 'device-1' }, { name: 'device-3' }, { name: 'device-2' }],
+      sortBy: 'name',
+      order: 'asc',
+      expected: [{ name: 'device-1' }, { name: 'device-2' }, { name: 'device-3' }],
+    },
+    {
+      value: [{ name: 'device-1' }, { name: 'device-3' }, { name: 'device-2' }],
+      sortBy: 'name',
+      order: 'desc',
+      expected: [{ name: 'device-3' }, { name: 'device-2' }, { name: 'device-1' }],
+    },
+    {
+      value: [{ name: 'device-1' }, { name: 'device-3' }, { name: 'device-2' }],
+      sortBy: 'bogus',
+      expected: [{ name: 'device-1' }, { name: 'device-3' }, { name: 'device-2' }],
+    },
+    {
+      value: [{ name: 'device-1' }, { name: 'device-3' }, { name: 'device-2' }],
+      sortBy: 'name',
+      order: 'bogus',
+      expected: [{ name: 'device-1' }, { name: 'device-2' }, { name: 'device-3' }],
+    },
+  ];
+
+  testCases.forEach((test) => {
+    it(`should transform ${test.value} to ${test.expected}`, () => {
+      expect(pipe.transform(test.value, test.sortBy, test.order as 'asc' | 'desc')).toEqual(test.expected);
+    });
+  });
+});

udmif/web/src/app/common/pipes/order-by.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { orderBy } from 'lodash-es';
+
+@Pipe({
+  name: 'orderBy',
+})
+export class OrderByPipe implements PipeTransform {
+  transform(value?: any[] | null, sortBy?: string | null, order?: 'asc' | 'desc' | null): any[] {
+    const sortOrder = order ? order : 'asc'; // setting default ascending order
+
+    return orderBy(value, [sortBy], [sortOrder]);
+  }
+}

udmif/web/src/app/common/pipes/pipes.module.ts

@@ -1,10 +1,11 @@
 import { NgModule } from '@angular/core';
 import { CapitalizePipe } from './capitalize.pipe';
+import { OrderByPipe } from './order-by.pipe';
 import { ParsePipe } from './parse.pipe';
 
 @NgModule({
-  declarations: [CapitalizePipe, ParsePipe],
-  exports: [CapitalizePipe, ParsePipe],
-  providers: [CapitalizePipe, ParsePipe],
+  declarations: [CapitalizePipe, ParsePipe, OrderByPipe],
+  exports: [CapitalizePipe, ParsePipe, OrderByPipe],
+  providers: [CapitalizePipe, ParsePipe, OrderByPipe],
 })
 export class PipesModule {}

udmif/web/src/app/device-errors/device-errors.component.scss

@@ -1,5 +0,0 @@
-.mat-table {
-  width: 100%;
-  border: solid thin rgba(0, 0, 0, 0.12);
-  border-bottom: none;
-}

udmif/web/src/app/device/device.component.html

@@ -2,11 +2,24 @@
 
 <mat-card class="summary">
   <div class="item" *ngFor="let field of fields">
-    <span class="mat-body-2">{{ field | capitalize }}</span>
-    <p *ngIf="field === 'lastPayload'; else elseBlock">{{ device?.lastPayload | date: 'MM/dd/yy h:mm a' }}</p>
-    <ng-template #elseBlock
-      ><p>{{ device?.[field] }}</p></ng-template
-    >
+    <span class="mat-body-2">{{ field.label }}</span>
+    <ng-container [ngSwitch]="field.value">
+      <ng-container *ngSwitchCase="'lastPayload'">
+        <p>{{ device?.lastPayload | date: 'MM/dd/yy h:mm a' }}</p>
+      </ng-container>
+      <ng-container *ngSwitchCase="'lastSeen'">
+        <p>{{ device?.lastSeen | date: 'MM/dd/yy h:mm a' }}</p>
+      </ng-container>
+      <ng-container *ngSwitchCase="'operational'">
+        <p>
+          <ng-container *ngIf="device?.operational === true">Yes</ng-container>
+          <ng-container *ngIf="device?.operational === false">No</ng-container>
+        </p>
+      </ng-container>
+      <ng-container *ngSwitchDefault>
+        <p>{{ device?.[field.value] }}</p>
+      </ng-container>
+    </ng-container>
   </div>
 </mat-card>
 

udmif/web/src/app/device/device.component.ts

@@ -2,32 +2,25 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { NavigationService } from '../navigation/navigation.service';
-import { Device, DeviceModel } from './device';
+import { Device, DeviceDetail } from './device';
 import { DeviceService } from './device.service';
+import { DeviceConstants } from './device.constants';
 
 @Component({
   templateUrl: './device.component.html',
   styleUrls: ['./device.component.scss'],
 })
 export class DeviceComponent implements OnInit, OnDestroy {
   deviceSubscription!: Subscription;
-  fields: (keyof DeviceModel)[] = [
-    'make',
-    'model',
-    'site',
-    'section',
-    'operational',
-    'serialNumber',
-    'firmware',
-    'lastPayload',
-  ];
+  fields: DeviceDetail[] = this.deviceConstants.deviceDetails;
   device?: Device;
   loading: boolean = true;
 
   constructor(
     private route: ActivatedRoute,
     private deviceService: DeviceService,
-    private navigationService: NavigationService
+    private navigationService: NavigationService,
+    private deviceConstants: DeviceConstants
   ) {}
 
   ngOnInit(): void {

udmif/web/src/app/device/device.constants.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { intersectionBy } from 'lodash-es';
+import { DevicesConstants } from '../devices/devices.constants';
+import { DeviceDetail, DeviceModel } from './device';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DeviceConstants {
+  public deviceDetails: DeviceDetail[] = intersectionBy(
+    this.devicesConstants.deviceColumns,
+    (<(keyof DeviceModel)[]>[
+      'make',
+      'model',
+      'site',
+      'section',
+      'lastPayload',
+      'operational',
+      'serialNumber',
+      'firmware',
+      'state',
+      'lastSeen',
+      'errorsCount',
+    ]).map((value) => ({ value })),
+    'value'
+  );
+
+  constructor(private devicesConstants: DevicesConstants) {}
+}

udmif/web/src/app/device/device.d.ts

@@ -28,3 +28,8 @@ export type DeviceQueryResponse = {
 export type DeviceQueryVariables = {
   id: string;
 };
+
+export type DeviceDetail = {
+  value: keyof DeviceModel;
+  label: string;
+};

udmif/web/src/app/device/device.gql.ts

@@ -13,6 +13,10 @@ export const GET_DEVICE = gql`
       operational
       firmware
       serialNumber
+      level
+      lastSeen
+      state
+      errorsCount
       validation
     }
   }

udmif/web/src/app/device/device.service.spec.ts

@@ -37,6 +37,10 @@ describe('DeviceService', () => {
         operational: false,
         serialNumber: 's123',
         firmware: 'V3',
+        level: 400,
+        lastSeen: '2022-01-03',
+        state: 'CORRECT',
+        errorsCount: 2,
         validation: '',
       },
     };

udmif/web/src/app/devices/devices-routing.module.ts

@@ -23,6 +23,7 @@ const routes: Routes = [
         'section',
         'lastPayload',
         'operational',
+        'errorsCount',
       ],
     },
   },