feat(#3135): Extend asset view with labels and type

ui/cypress/tests/assetManagement/createAsset.spec.ts

@@ -42,20 +42,13 @@ describe('Creates a new adapter, add to assets and export assets', () => {
         cy.dataCy('asset-name').type('Test asset');
         cy.dataCy('save-data-view').click();
         cy.dataCy('edit-asset-button').click();
+        cy.get('.mdc-tab__text-label').contains('Asset Links').parent().click();
+        cy.dataCy('assets-manage-links-button', { timeout: 5000 }).should(
+            'be.enabled',
+        );
         cy.dataCy('assets-manage-links-button').click();
-
-        // Added twice, because cypress wouldn't accept single click
-        cy.wait(1000).dataCy('manage-assets-select-adapters-checkbox').click();
-        cy.wait(1000)
-            .dataCy('manage-assets-select-data-sources-checkbox')
-            .click();
-        cy.dataCy('assets-update-links-button').click();
-
-        cy.dataCy('assets-manage-links-button').click();
-        cy.wait(1000).dataCy('manage-assets-select-adapters-checkbox').click();
-        cy.wait(1000)
-            .dataCy('manage-assets-select-data-sources-checkbox')
-            .click();
+        cy.dataCy('manage-assets-select-adapters-checkbox').click();
+        cy.dataCy('manage-assets-select-data-sources-checkbox').click();
         cy.dataCy('assets-update-links-button').click();
 
         cy.dataCy('linked-resources-list').children().should('have.length', 2);

ui/projects/streampipes/platform-services/src/lib/model/assets/asset.model.ts

@@ -31,6 +31,7 @@ export interface AssetType {
     assetIconColor: string;
     assetTypeCategory: string;
     assetTypeLabel: string;
+    isa95AssetType?: Isa95Type;
 }
 
 export interface AssetLink {
@@ -42,12 +43,18 @@ export interface AssetLink {
     navigationActive: boolean;
 }
 
+export interface Isa95TypeDesc {
+    label: string;
+    type: Isa95Type;
+}
+
 export interface SpAsset {
     assetId: string;
     assetName: string;
     assetDescription: string;
 
     assetType: AssetType;
+    labelIds?: string[];
     assetLinks: AssetLink[];
 
     assets: SpAsset[];
@@ -61,3 +68,13 @@ export interface SpAssetModel extends SpAsset {
 
     removable: boolean;
 }
+
+export type Isa95Type =
+    | 'PROCESS_CELL'
+    | 'PRODUCTION_UNIT'
+    | 'PRODUCTION_LINE'
+    | 'STORAGE_ZONE'
+    | 'UNIT'
+    | 'WORK_CELL'
+    | 'STORAGE_UNIT'
+    | 'OTHER';

ui/projects/streampipes/platform-services/src/lib/services/isa95-type.service.ts

@@ -0,0 +1,50 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { Injectable } from '@angular/core';
+import { Isa95Type, Isa95TypeDesc } from '../model/assets/asset.model';
+
+@Injectable({ providedIn: 'root' })
+export class Isa95TypeService {
+    isa95Types: Isa95Type[] = [
+        'PROCESS_CELL',
+        'PRODUCTION_UNIT',
+        'PRODUCTION_LINE',
+        'STORAGE_ZONE',
+        'UNIT',
+        'WORK_CELL',
+        'STORAGE_UNIT',
+        'OTHER',
+    ];
+
+    getTypeDescriptions(): Isa95TypeDesc[] {
+        return this.isa95Types.map(type => {
+            return {
+                type,
+                label: this.toLabel(type),
+            };
+        });
+    }
+
+    toLabel(type: Isa95Type): string {
+        return type
+            .toLocaleLowerCase()
+            .replace(/_/g, ' ')
+            .replace(/\b\w/g, char => char.toUpperCase());
+    }
+}

ui/projects/streampipes/platform-services/src/public-api.ts

@@ -71,3 +71,5 @@ export * from './lib/model/labels/labels.model';
 
 export * from './lib/model/types/data-type';
 export * from './lib/model/types/semantic-type';
+
+export * from './lib/services/isa95-type.service';

ui/projects/streampipes/shared-ui/src/lib/components/basic-field-description/basic-field-description.component.html

@@ -0,0 +1,32 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one or more
+  ~ contributor license agreements.  See the NOTICE file distributed with
+  ~ this work for additional information regarding copyright ownership.
+  ~ The ASF licenses this file to You under the Apache License, Version 2.0
+  ~ (the "License"); you may not use this file except in compliance with
+  ~ the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  ~
+  -->
+
+<div
+    fxFlex="100"
+    fxLayout="row"
+    fxLayoutAlign="start center"
+    class="field-description-outer"
+>
+    <div [fxFlex]="descriptionPanelWidth" fxLayout="column">
+        <div class="field-description-label">{{ label }}</div>
+        <div class="field-description">{{ description }}</div>
+    </div>
+    <div fxFlex fxLayoutAlign="start center">
+        <ng-content></ng-content>
+    </div>
+</div>

ui/projects/streampipes/shared-ui/src/lib/components/basic-field-description/basic-field-description.component.scss

@@ -0,0 +1,29 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+.field-description-label {
+    font-weight: bold;
+}
+
+.field-description {
+    font-size: smaller;
+}
+
+.field-description-outer {
+    margin-bottom: 10px;
+}

ui/projects/streampipes/shared-ui/src/lib/components/basic-field-description/basic-field-description.component.ts

@@ -0,0 +1,35 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'sp-basic-field-description',
+    templateUrl: './basic-field-description.component.html',
+    styleUrls: ['./basic-field-description.component.scss'],
+})
+export class SpBasicFieldDescriptionComponent {
+    @Input()
+    label: string;
+
+    @Input()
+    description: string;
+
+    @Input()
+    descriptionPanelWidth: string = '30';
+}

ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.ts

@@ -16,14 +16,15 @@
  *
  */
 
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { SpColorizationService } from '../../services/colorization.service';
 
 @Component({
     selector: 'sp-label',
     templateUrl: './sp-label.component.html',
     styleUrls: ['./sp-label.component.scss'],
 })
-export class SpLabelComponent implements OnInit {
+export class SpLabelComponent {
     @Input()
     labelText: string;
 
@@ -34,24 +35,16 @@ export class SpLabelComponent implements OnInit {
 
     labelTextColor = '';
 
-    ngOnInit(): void {}
+    constructor(private colorizationService: SpColorizationService) {}
 
     @Input()
     set labelBackground(labelBackground: string) {
         this._labelBackground = labelBackground;
-        this.labelTextColor = this.generateContrastColor(labelBackground);
+        this.labelTextColor =
+            this.colorizationService.generateContrastColor(labelBackground);
     }
 
     get labelBackground(): string {
         return this._labelBackground;
     }
-
-    generateContrastColor(bgColor) {
-        const color =
-            bgColor.charAt(0) === '#' ? bgColor.substring(1, 7) : bgColor;
-        const r = parseInt(color.substring(0, 2), 16);
-        const g = parseInt(color.substring(2, 4), 16);
-        const b = parseInt(color.substring(4, 6), 16);
-        return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? '#000' : '#FFF';
-    }
 }

ui/projects/streampipes/shared-ui/src/lib/services/colorization.service.ts

@@ -0,0 +1,31 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class SpColorizationService {
+    generateContrastColor(bgColor: string) {
+        const color =
+            bgColor.charAt(0) === '#' ? bgColor.substring(1, 7) : bgColor;
+        const r = parseInt(color.substring(0, 2), 16);
+        const g = parseInt(color.substring(2, 4), 16);
+        const b = parseInt(color.substring(4, 6), 16);
+        return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? '#000' : '#FFF';
+    }
+}

ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts

@@ -44,12 +44,14 @@ import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { SpExceptionDetailsComponent } from './components/sp-exception-message/exception-details/exception-details.component';
 import { SpWarningBoxComponent } from './components/warning-box/warning-box.component';
+import { SpBasicFieldDescriptionComponent } from './components/basic-field-description/basic-field-description.component';
 
 @NgModule({
     declarations: [
         ConfirmDialogComponent,
         PanelDialogComponent,
         StandardDialogComponent,
+        SpBasicFieldDescriptionComponent,
         SpBasicInnerPanelComponent,
         SpBasicHeaderTitleComponent,
         SpBasicViewComponent,
@@ -81,6 +83,7 @@ import { SpWarningBoxComponent } from './components/warning-box/warning-box.comp
         ConfirmDialogComponent,
         PanelDialogComponent,
         StandardDialogComponent,
+        SpBasicFieldDescriptionComponent,
         SpBasicInnerPanelComponent,
         SpBasicHeaderTitleComponent,
         SpBasicViewComponent,

ui/projects/streampipes/shared-ui/src/public-api.ts

@@ -28,6 +28,7 @@ export * from './lib/dialog/standard-dialog/standard-dialog.component';
 
 export * from './lib/components/basic-header-title/header-title.component';
 export * from './lib/components/basic-inner-panel/basic-inner-panel.component';
+export * from './lib/components/basic-field-description/basic-field-description.component';
 export * from './lib/components/basic-view/basic-view.component';
 export * from './lib/components/basic-nav-tabs/basic-nav-tabs.component';
 export * from './lib/components/split-section/split-section.component';
@@ -44,3 +45,4 @@ export * from './lib/services/breadcrumb.service';
 export * from './lib/services/jwt-token-storage.service';
 export * from './lib/services/current-user.service';
 export * from './lib/services/echarts-toolbox.service';
+export * from './lib/services/colorization.service';