@c8y/tutorial 1019.0.3

package/src/grids/client-grid-example/data.ts

@@ -0,0 +1,427 @@
+/** Just a sample set of data. */
+export function getData() {
+  return [
+    {
+      id: '10215',
+      name: 'Simulated gateway',
+      type: 'c8y_Linux',
+      lastUpdated: '2017-09-15T15:38:33.192+02:00'
+    },
+    {
+      id: '128138',
+      name: 'ternary simulator #1',
+      type: 'c8y_MQTTDevice',
+      creationTime: '2017-04-21T21:30:02.288+02:00',
+      lastUpdated: '2019-07-07T16:12:31.919Z',
+      c8y_ActiveAlarmsStatus: { minor: 1 },
+      owner: 'service_device-simulator'
+    },
+    {
+      id: '145075',
+      name: 'temperature simulator #1',
+      type: 'c8y_MQTTDevice',
+      creationTime: '2017-04-23T18:24:27.330+02:00',
+      lastUpdated: '2019-08-01T13:34:57.757Z',
+      c8y_ActiveAlarmsStatus: { minor: 1, critical: 0, major: 1 },
+      owner: 'service_device-simulator'
+    },
+    {
+      id: '145891',
+      name: 'parent',
+      creationTime: '2017-04-26T22:06:42.899+02:00',
+      lastUpdated: '2017-10-14T12:48:18.650+02:00',
+      c8y_ActiveAlarmsStatus: { critical: 0, minor: 1 },
+      owner: 'admin'
+    },
+    {
+      id: '147224',
+      name: 'gd_11',
+      type: 'ControllerModel_11',
+      creationTime: '2017-05-12T11:47:53.913Z',
+      lastUpdated: '2018-04-17T16:12:16.574Z',
+      owner: 'admin'
+    },
+    {
+      id: '147225',
+      name: 'gd_12',
+      type: 'ControllerModel_12',
+      creationTime: '2017-05-12T11:48:00.807Z',
+      lastUpdated: '2017-05-12T11:48:00.807Z',
+      owner: 'admin'
+    },
+    {
+      id: '147226',
+      name: 'gd_13',
+      type: 'ControllerModel_13',
+      creationTime: '2017-05-12T11:48:06.452Z',
+      lastUpdated: '2017-05-12T11:48:06.452Z',
+      owner: 'admin'
+    },
+    {
+      id: '147227',
+      name: 'gd_4',
+      type: 'ControllerModel_4',
+      creationTime: '2017-05-12T11:48:14.590Z',
+      lastUpdated: '2017-05-12T21:18:12.192Z',
+      owner: 'admin'
+    },
+    {
+      id: '147228',
+      name: 'gd_5',
+      type: 'ControllerModel_5',
+      creationTime: '2017-05-12T11:48:21.023Z',
+      lastUpdated: '2017-05-12T21:18:26.017Z',
+      owner: 'admin'
+    },
+    {
+      id: '147290',
+      name: 'gd_0',
+      type: 'ControllerModel_0',
+      creationTime: '2017-05-15T08:59:26.767Z',
+      lastUpdated: '2017-05-15T08:59:26.767Z',
+      owner: 'admin'
+    },
+    {
+      id: '147428',
+      name: 'i_want_to_ride_my_bicycle',
+      creationTime: '2017-05-22T13:11:58.011Z',
+      lastUpdated: '2017-06-01T11:11:35.951+02:00',
+      c8y_ActiveAlarmsStatus: { minor: 0, major: 0 },
+      owner: 'admin'
+    },
+    {
+      id: '148802',
+      name: 'testMeasurementDevice',
+      type: 'ControllerModel_Universal',
+      creationTime: '2017-06-14T12:00:06.874+02:00',
+      lastUpdated: '2019-01-02T13:32:03.621Z',
+      owner: 'service_device-simulator'
+    },
+    {
+      id: '1561670',
+      name: 'AtCo machine 1 #1',
+      type: 'c8y_MQTTDevice',
+      creationTime: '2017-11-13T18:08:23.793+01:00',
+      lastUpdated: '2018-03-26T15:17:05.265Z',
+      c8y_ActiveAlarmsStatus: { major: 0 },
+      owner: 'service_device-simulator'
+    },
+    {
+      id: '1561671',
+      name: 'AtCo machine 2 #1',
+      type: 'c8y_MQTTDevice',
+      creationTime: '2017-11-13T18:08:24.602+01:00',
+      lastUpdated: '2018-03-26T15:24:37.613Z',
+      c8y_ActiveAlarmsStatus: { major: 0 },
+      owner: 'service_device-simulator'
+    },
+    {
+      id: '158361',
+      name: 'c8y_EnergyDevice device',
+      type: 'c8y_EnergyDevice',
+      creationTime: '2017-10-10T19:10:17.146+02:00',
+      lastUpdated: '2017-10-10T22:37:06.856+02:00',
+      owner: 'admin'
+    },
+    {
+      id: '18790138',
+      name: 'temperature simulator mirror #1',
+      type: 'c8y_MQTTDevice',
+      creationTime: '2018-06-26T10:24:08.534Z',
+      lastUpdated: '2019-08-01T13:35:00.703Z',
+      owner: 'service_device-simulator'
+    },
+    {
+      id: '2248747',
+      name: 'trackingDevice',
+      creationTime: '2017-12-12T22:09:06.881+01:00',
+      lastUpdated: '2018-07-19T12:01:50.731Z',
+      c8y_Availability: { lastMessage: '2019-03-08T11:16:10.630Z', status: 'UNAVAILABLE' },
+      c8y_RequiredAvailability: { responseInterval: 42 },
+      c8y_Connection: { status: 'DISCONNECTED' },
+      c8y_ActiveAlarmsStatus: { major: 1 },
+      owner: 'admin'
+    },
+    {
+      id: '2300564',
+      name: 'the simulator #1',
+      type: 'c8y_MQTTDevice',
+      creationTime: '2018-01-22T18:25:37.046+01:00',
+      lastUpdated: '2019-08-01T13:35:20.641Z',
+      owner: 'service_device-simulator'
+    },
+    {
+      id: '2300743',
+      name: 'steam simulator #1',
+      type: 'c8y_MQTTDevice',
+      creationTime: '2018-01-22T18:34:32.144+01:00',
+      lastUpdated: '2018-04-27T16:02:16.109Z',
+      owner: 'service_device-simulator'
+    },
+    {
+      id: '2441189',
+      name: 'Steam generator',
+      type: 'c8y_ModbusDevice',
+      creationTime: '2018-01-24T17:14:12.080+01:00',
+      lastUpdated: '2019-08-01T13:35:33.007Z',
+      c8y_ActiveAlarmsStatus: { minor: 0 },
+      owner: 'service_device-simulator'
+    },
+    {
+      id: '25834000',
+      name: 'IO-Key X',
+      creationTime: '2018-08-08T10:44:48.023Z',
+      lastUpdated: '2018-08-08T10:44:48.023Z',
+      owner: 'admin'
+    },
+    {
+      id: '25834001',
+      name: 'IO-Key Y',
+      creationTime: '2018-08-08T10:45:56.704Z',
+      lastUpdated: '2018-08-08T10:45:56.704Z',
+      owner: 'admin'
+    },
+    {
+      id: '28366',
+      name: 'testMobileDevice',
+      type: '',
+      creationTime: '2016-12-11T23:52:58.557+01:00',
+      lastUpdated: '2018-07-20T19:09:15.394Z',
+      owner: 'admin'
+    },
+    {
+      id: '4445536',
+      name: 'testtest',
+      creationTime: '2018-02-21T01:31:01.317+01:00',
+      lastUpdated: '2018-02-21T01:31:01.317+01:00',
+      owner: 'admin'
+    },
+    {
+      id: '49118163',
+      name: '525722',
+      type: 'bkh_Machine',
+      creationTime: '2019-01-15T22:44:06.614Z',
+      lastUpdated: '2019-01-15T22:44:06.614Z',
+      owner: 'admin'
+    },
+    {
+      id: '49118164',
+      name: '522727',
+      type: 'bkh_Machine',
+      creationTime: '2019-01-15T22:44:06.664Z',
+      lastUpdated: '2019-01-15T22:44:06.664Z',
+      owner: 'admin'
+    },
+    {
+      id: '4930446',
+      name: 'A SMARTBOX',
+      type: 'SmartBoxDeviceType',
+      creationTime: '2018-02-27T18:02:03.430+01:00',
+      lastUpdated: '2018-02-28T15:46:19.329+01:00',
+      owner: 'admin'
+    },
+    {
+      id: '4932771',
+      name: 'A Modbus agent',
+      type: 'POSIX Agent',
+      creationTime: '2018-02-26T00:34:17.489+01:00',
+      lastUpdated: '2018-03-22T09:10:29.585Z',
+      owner: 'admin'
+    },
+    {
+      id: '50805783',
+      name: '522661',
+      type: 'bkh_Machine',
+      creationTime: '2019-01-15T22:44:06.533Z',
+      lastUpdated: '2019-01-15T22:44:06.533Z',
+      owner: 'admin'
+    },
+    {
+      id: '50805784',
+      name: '523535',
+      type: 'bkh_Machine',
+      creationTime: '2019-01-15T22:44:06.571Z',
+      lastUpdated: '2019-01-15T22:44:06.571Z',
+      owner: 'admin'
+    },
+    {
+      id: '50805785',
+      name: '522203',
+      type: 'bkh_Machine',
+      creationTime: '2019-01-15T22:44:07.171Z',
+      lastUpdated: '2019-04-02T11:12:33.791Z',
+      c8y_ActiveAlarmsStatus: { critical: 1 },
+      owner: 'admin'
+    },
+    {
+      id: '50939310',
+      name: '524502',
+      type: 'bkh_Machine',
+      creationTime: '2019-01-15T22:44:06.574Z',
+      lastUpdated: '2019-01-15T22:44:06.574Z',
+      owner: 'admin'
+    },
+    {
+      id: '50939311',
+      name: '524505',
+      type: 'bkh_Machine',
+      creationTime: '2019-01-15T22:44:06.582Z',
+      lastUpdated: '2019-01-15T22:44:06.582Z',
+      owner: 'admin'
+    },
+    {
+      id: '50939312',
+      name: '523804',
+      type: 'bkh_Machine',
+      creationTime: '2019-01-15T22:44:06.630Z',
+      lastUpdated: '2019-01-15T22:44:06.630Z',
+      owner: 'admin'
+    },
+    {
+      id: '50939313',
+      name: '522419',
+      type: 'bkh_Machine',
+      creationTime: '2019-01-15T22:44:06.742Z',
+      lastUpdated: '2019-01-15T22:44:06.742Z',
+      owner: 'admin'
+    },
+    {
+      id: '50939314',
+      name: '522623',
+      type: 'bkh_Machine',
+      creationTime: '2019-01-15T22:44:06.927Z',
+      lastUpdated: '2019-01-15T22:44:06.927Z',
+      owner: 'admin'
+    },
+    {
+      id: '53924',
+      name: 'binary simulator #1',
+      type: 'c8y_MQTTDevice',
+      creationTime: '2017-03-15T15:19:34.316+01:00',
+      lastUpdated: '2017-12-06T13:19:05.415+01:00',
+      owner: 'service_device-simulator'
+    },
+    {
+      id: '620780',
+      name: 'lamp 1',
+      type: 'c8y_LampDevice',
+      creationTime: '2017-10-30T14:41:27.587+01:00',
+      lastUpdated: '2017-10-30T14:41:27.587+01:00',
+      owner: 'admin'
+    },
+    {
+      id: '6377056',
+      name: 'marker_5',
+      creationTime: '2018-03-20T14:26:35.552Z',
+      lastUpdated: '2018-03-20T14:26:35.552Z',
+      c8y_ActiveAlarmsStatus: { warning: 0 },
+      owner: 'admin'
+    },
+    {
+      id: '6377057',
+      name: 'marker_6',
+      creationTime: '2018-03-20T14:26:38.718Z',
+      lastUpdated: '2018-03-20T14:26:38.718Z',
+      c8y_ActiveAlarmsStatus: { minor: 0 },
+      owner: 'admin'
+    },
+    {
+      id: '6669506',
+      name: 'marker_1',
+      creationTime: '2018-03-20T14:23:32.051Z',
+      lastUpdated: '2018-03-20T14:23:32.051Z',
+      owner: 'admin'
+    },
+    {
+      id: '6669507',
+      name: 'marker_3',
+      creationTime: '2018-03-20T14:23:55.399Z',
+      lastUpdated: '2018-03-20T14:23:55.399Z',
+      c8y_ActiveAlarmsStatus: { minor: 0 },
+      owner: 'admin'
+    },
+    {
+      id: '6669508',
+      name: 'marker_4',
+      creationTime: '2018-03-20T14:23:58.586Z',
+      lastUpdated: '2018-03-20T14:23:58.586Z',
+      c8y_ActiveAlarmsStatus: { major: 0 },
+      owner: 'admin'
+    },
+    {
+      id: '6669995',
+      name: 'marker_2',
+      creationTime: '2018-03-20T14:23:51.937Z',
+      lastUpdated: '2018-03-20T14:23:51.937Z',
+      owner: 'admin'
+    },
+    {
+      id: '738765',
+      name: 'lamp 2',
+      type: 'c8y_LampDevice',
+      creationTime: '2017-10-30T14:41:32.477+01:00',
+      lastUpdated: '2017-10-30T14:41:32.477+01:00',
+      owner: 'admin'
+    },
+    {
+      id: '738768',
+      name: 'lamp 3',
+      type: 'c8y_LampDevice',
+      creationTime: '2017-10-30T14:41:37.476+01:00',
+      lastUpdated: '2017-10-30T14:41:37.476+01:00',
+      owner: 'admin'
+    },
+    {
+      id: '739007',
+      name: 'lamp 4',
+      type: 'c8y_LampDevice',
+      creationTime: '2017-10-30T14:49:43.832+01:00',
+      lastUpdated: '2017-10-30T14:59:35.412+01:00',
+      owner: 'admin'
+    },
+    {
+      id: '739309',
+      name: 'lamp 5',
+      type: 'c8y_LampDevice',
+      creationTime: '2017-10-30T15:00:03.899+01:00',
+      lastUpdated: '2017-10-30T15:00:03.899+01:00',
+      owner: 'admin'
+    },
+    {
+      id: '79265648',
+      name: 'Latitude  (CFPPNV2)',
+      type: 'c8y_cumulocity_agent',
+      creationTime: '2019-07-10T14:30:51.616Z',
+      lastUpdated: '2019-07-26T08:22:46.591Z',
+      c8y_Availability: { lastMessage: '2019-07-26T08:22:56.253Z', status: 'UNAVAILABLE' },
+      c8y_RequiredAvailability: { responseInterval: 20 },
+      c8y_Connection: { status: 'DISCONNECTED' },
+      c8y_ActiveAlarmsStatus: { major: 1 },
+      owner: 'device_CFPPNV2'
+    },
+    {
+      id: '79387749',
+      name: 'Latitude  (eaa3aa91f1bf41f79f72838721fcef6e)',
+      type: 'c8y_cumulocity_agent',
+      creationTime: '2019-07-11T13:05:52.005Z',
+      lastUpdated: '2019-08-08T08:36:23.207Z',
+      c8y_Availability: { lastMessage: '2019-08-08T08:36:32.896Z', status: 'UNAVAILABLE' },
+      c8y_RequiredAvailability: { responseInterval: 20 },
+      c8y_Connection: { status: 'DISCONNECTED' },
+      c8y_ActiveAlarmsStatus: { major: 1 },
+      owner: 'device_CFPPNV2'
+    },
+    {
+      id: '82495860',
+      name: 'NTC-221 (S/N 191611192800580)',
+      type: 'POSIX Agent',
+      creationTime: '2019-07-31T12:56:31.161Z',
+      lastUpdated: '2019-08-02T11:53:34.110Z',
+      c8y_Availability: { lastMessage: '2019-07-31T12:56:31.162Z', status: 'UNAVAILABLE' },
+      c8y_RequiredAvailability: { responseInterval: 20 },
+      c8y_Connection: { status: 'DISCONNECTED' },
+      c8y_ActiveAlarmsStatus: { major: 1 },
+      owner: 'device_191611192800580'
+    }
+  ];
+}

package/src/grids/device-grid-example/device-grid-example.component.html

@@ -0,0 +1,58 @@
+<c8y-title>Data grid examples</c8y-title>
+
+<div class="card">
+  <div class="card-header separator">
+    <h4 class="card-title">Device grid</h4>
+  </div>
+  <div class="card-block">
+    <p>
+      The following example features
+      <code>DeviceGridComponent</code>
+      and:
+    </p>
+    <ul>
+      <li>displaying a filterable and sortable list of devices</li>
+      <li>loading grid configuration from presets (columns, stored filtering and sorting)</li>
+      <li>event handlers for: columns config changes, device query string changes</li>
+      <li>
+        custom validators for filters (based on
+        <a
+          href="https://formly.dev/docs/guide/validation/#3-declaring-validation-function-and-message-within-field-definition"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Formly documentation
+        </a>
+        )
+      </li>
+    </ul>
+
+    <div class="form-group">
+      <label for="exampleSelect">Select a preset example</label>
+      <div class="c8y-select-wrapper">
+        <select
+          class="form-control"
+          id="exampleSelect"
+          [ngModel]="selectedExample"
+          (ngModelChange)="selectExample($event)"
+        >
+          <option
+            *ngFor="let example of examples"
+            [ngValue]="example"
+          >
+            {{ example.label }}
+          </option>
+        </select>
+        <span></span>
+      </div>
+    </div>
+
+    <c8y-device-grid
+      [title]="'Devices'"
+      [columns]="columnsInput"
+      [actionControls]="[]"
+      (onColumnsChange)="onColumnsChange($event)"
+      (onDeviceQueryStringChange)="onDeviceQueryStringChange($event)"
+    ></c8y-device-grid>
+  </div>
+</div>

package/src/grids/device-grid-example/device-grid-example.component.ts

@@ -0,0 +1,134 @@
+import { Component } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { Column, CoreModule, CustomColumn, gettext } from '@c8y/ngx-components';
+import { DeviceGridModule, DeviceGridService } from '@c8y/ngx-components/device-grid';
+import { FormlyFieldConfig } from '@ngx-formly/core';
+import { find } from 'lodash-es';
+
+@Component({
+  selector: 'c8y-device-grid-example',
+  templateUrl: './device-grid-example.component.html',
+  standalone: true,
+  imports: [CoreModule, DeviceGridModule, RouterModule],
+  providers: [DeviceGridService]
+})
+export class DeviceGridExampleComponent {
+  examples: Array<{ label: string; columns: Column[] }>;
+  selectedExample;
+  columnsInput: Column[];
+
+  constructor(protected deviceGridService: DeviceGridService) {
+    this.examples = [
+      this.getExampleWithStandardColumns(),
+      this.getExampleWithStandardColumnsAndSavedFilteringSorting(),
+      this.getExampleWithCustomColumnAndPredefinedFiltering(),
+      this.getExampleWithCustomColumnAndCustomValidator()
+    ];
+    this.selectExample(this.examples[0]);
+  }
+
+  getExampleWithStandardColumns() {
+    const columns = this.deviceGridService.getDefaultColumns();
+    return {
+      label: 'Standard columns',
+      columns
+    };
+  }
+
+  getExampleWithStandardColumnsAndSavedFilteringSorting() {
+    const columns = this.deviceGridService.getDefaultColumns();
+    const nameColumn = find(columns, { name: 'name' });
+    nameColumn.externalFilterQuery = {
+      names: ['*Temp*']
+    };
+    nameColumn.sortOrder = 'desc';
+    return {
+      label: 'Standard columns with saved filtering/sorting',
+      columns
+    };
+  }
+
+  getExampleWithCustomColumnAndPredefinedFiltering() {
+    const columns = this.deviceGridService.getDefaultColumns();
+    const typeColumn = new CustomColumn();
+    typeColumn.name = 'type';
+    typeColumn.path = 'type';
+    typeColumn.header = gettext('Type');
+    typeColumn.externalFilterQuery = {
+      equals: ['c8y_MQTTDevice']
+    };
+    columns.splice(2, 0, typeColumn);
+    return {
+      label: 'Standard columns with custom one with predefined filtering',
+      columns
+    };
+  }
+
+  getExampleWithCustomColumnAndCustomValidator() {
+    const columns = this.deviceGridService.getDefaultColumns();
+    const nameColumn = columns.find(column => column.name === 'name');
+
+    nameColumn.filteringConfig.fields = [
+      {
+        key: 'name',
+        type: 'array',
+        defaultValue: [''],
+        templateOptions: {
+          required: true,
+          addText: 'Add next`name`'
+        },
+        fieldArray: {
+          type: 'string',
+          templateOptions: {
+            required: true,
+            label: 'Show items with name',
+            tooltip: 'Use * as a wildcard character',
+            placeholder: 'My device`DEVICE_NAME`'
+          },
+          validators: {
+            minLength: {
+              expression: (c: AbstractControl) => c.value.length >= 3,
+              message: (error: any, field: FormlyFieldConfig) =>
+                `value "${field.formControl.value}" is too short. min length is 3 characters`
+            },
+            maxLength: {
+              expression: (c: AbstractControl) => c.value.length <= 6,
+              message: (error: any, field: FormlyFieldConfig) =>
+                `value "${field.formControl.value}" is too long. max length is 6 characters `
+            },
+            regexExampleValidator: {
+              expression: (c: AbstractControl) => /foo/.test(c.value),
+              message: (error: any, field: FormlyFieldConfig) =>
+                `value "${field.formControl.value}" must contain "foo"`
+            }
+          }
+        }
+      }
+    ];
+
+    return {
+      label: 'Standard columns with custom validators for "Name" column\'s filter',
+      columns
+    };
+  }
+
+  selectExample(example) {
+    this.selectedExample = example;
+    this.columnsInput = example.columns;
+  }
+
+  onColumnsChange(columns: Column[]): void {
+    // the columns list contains the current setup of the columns in the grid:
+
+    // eslint-disable-next-line no-console
+    console.log({ columns });
+  }
+
+  onDeviceQueryStringChange(deviceQueryString: string): void {
+    // the query string is based on currently selected filters and sorting in columns:
+
+    // eslint-disable-next-line no-console
+    console.log({ deviceQueryString });
+  }
+}

package/src/grids/device-grid-example/device-grid-example.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'grids/device-grid-example',
+      loadComponent: () =>
+        import('./device-grid-example.component').then(m => m.DeviceGridExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        priority: 10,
+        path: 'grids/device-grid-example',
+        icon: 'table',
+        label: 'Device grid',
+        parent: 'Data grid examples'
+      })
+    )
+  ]
+})
+export class DeviceGridExampleModule {}

package/src/grids/grids-tabs.ts

@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+import { TabFactory, Tab } from '@c8y/ngx-components';
+import { Router } from '@angular/router';
+
+@Injectable()
+export class GridsTabs implements TabFactory {
+  constructor(public router: Router) {}
+
+  get() {
+    const tabs: Tab[] = [];
+
+    if (this.router.url.match(/data-grid/g)) {
+      tabs.push({
+        icon: 'resume-website',
+        priority: 1000,
+        label: 'Client-side data grid',
+        path: 'data-grid/client-grid-example'
+      } as Tab);
+
+      tabs.push({
+        icon: 'server',
+        priority: 900,
+        label: 'Server-side data grid',
+        path: 'data-grid/server-grid-example'
+      } as Tab);
+
+      tabs.push({
+        icon: 'c8y-device-management',
+        priority: 800,
+        label: 'Device grid',
+        path: 'data-grid/device-grid-example'
+      } as Tab);
+    }
+
+    return tabs;
+  }
+}

package/src/grids/grids.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { hookNavigator, NavigatorNode } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [],
+  declarations: [],
+  providers: [
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Data grid examples',
+        icon: 'table',
+        priority: 30
+      })
+    )
+  ]
+})
+export class GridsModule {}

package/src/grids/index.ts

@@ -0,0 +1 @@
+export * from './grids.module';