This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch 3135-add-labels-and-asset-type-to-asset-view
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to
refs/heads/3135-add-labels-and-asset-type-to-asset-view by this push:
new 17deb1a7ed feat(#3135): Extend asset view with labels and type
17deb1a7ed is described below
commit 17deb1a7ed2fc586b5e3611e285f333cb1388150
Author: Dominik Riemer <[email protected]>
AuthorDate: Tue Aug 13 09:05:56 2024 +0200
feat(#3135): Extend asset view with labels and type
---
.../tests/assetManagement/createAsset.spec.ts | 17 +--
.../src/lib/model/assets/asset.model.ts | 17 +++
.../src/lib/services/isa95-type.service.ts} | 40 ++++--
.../platform-services/src/public-api.ts | 2 +
.../basic-field-description.component.html | 32 +++++
.../basic-field-description.component.scss} | 17 +--
.../basic-field-description.component.ts} | 25 ++--
.../lib/components/sp-label/sp-label.component.ts | 17 +--
.../colorization.service.ts} | 34 +----
.../shared-ui/src/lib/shared-ui.module.ts | 3 +
.../streampipes/shared-ui/src/public-api.ts | 2 +
ui/src/app/assets/assets.module.ts | 21 ++-
.../asset-details-basics.component.html | 112 ++++++++++++++++
.../asset-details-basics.component.scss} | 19 +--
.../asset-details-basics.component.ts | 52 ++++++++
.../asset-details-labels.component.html | 68 ++++++++++
.../asset-details-labels.component.ts | 146 +++++++++++++++++++++
.../asset-details-links.component.html | 65 +++++++++
.../asset-details-links.component.scss | 0
.../asset-details-links.component.ts} | 36 +++--
.../asset-link-item/asset-link-item.component.html | 6 +-
.../asset-link-item/asset-link-item.component.scss | 1 -
.../asset-link-item/asset-link-item.component.ts | 35 ++---
.../asset-link-section.component.html | 40 ++++++
.../asset-link-section.component.scss} | 21 +--
.../asset-link-section.component.ts | 50 +++++++
.../asset-details-panel.component.html | 102 +++-----------
.../asset-details-panel.component.ts | 101 +-------------
.../asset-details/asset-details.component.html | 7 +-
.../asset-details/asset-details.component.scss | 7 +-
.../asset-selection-panel.component.scss | 2 +-
.../asset-overview/asset-overview.component.ts | 7 +-
.../edit-asset-link-dialog.component.html | 8 +-
.../edit-asset-link-dialog.component.ts | 4 +-
.../manage-asset-links-dialog.component.html | 26 ++--
.../manage-asset-links-dialog.component.ts | 1 -
.../asset-type-filter.pipe.ts} | 24 ++--
.../adapter-deployment-settings.component.html | 2 +-
38 files changed, 782 insertions(+), 387 deletions(-)
diff --git a/ui/cypress/tests/assetManagement/createAsset.spec.ts
b/ui/cypress/tests/assetManagement/createAsset.spec.ts
index ad131c2631..df01825da1 100644
--- a/ui/cypress/tests/assetManagement/createAsset.spec.ts
+++ b/ui/cypress/tests/assetManagement/createAsset.spec.ts
@@ -42,20 +42,15 @@ 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);
diff --git
a/ui/projects/streampipes/platform-services/src/lib/model/assets/asset.model.ts
b/ui/projects/streampipes/platform-services/src/lib/model/assets/asset.model.ts
index 67a34745cd..c1872f5f31 100644
---
a/ui/projects/streampipes/platform-services/src/lib/model/assets/asset.model.ts
+++
b/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';
diff --git
a/ui/src/app/assets/components/asset-details/asset-details.component.scss
b/ui/projects/streampipes/platform-services/src/lib/services/isa95-type.service.ts
similarity index 50%
copy from
ui/src/app/assets/components/asset-details/asset-details.component.scss
copy to
ui/projects/streampipes/platform-services/src/lib/services/isa95-type.service.ts
index 8c6b11994d..f2981128da 100644
--- a/ui/src/app/assets/components/asset-details/asset-details.component.scss
+++
b/ui/projects/streampipes/platform-services/src/lib/services/isa95-type.service.ts
@@ -16,17 +16,35 @@
*
*/
-.dashboard-grid {
- display: flex;
- flex-direction: column;
- flex: 1 1 100%;
-}
+import { Injectable } from '@angular/core';
+import { Isa95Type, Isa95TypeDesc } from '@streampipes/platform-services';
-.designer-panel-container {
- width: 100%;
- height: 100%;
-}
+@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),
+ };
+ });
+ }
-.designer-panel {
- width: 400px;
+ toLabel(type: Isa95Type): string {
+ return type
+ .toLocaleLowerCase()
+ .replace(/_/g, ' ')
+ .replace(/\b\w/g, char => char.toUpperCase());
+ }
}
diff --git a/ui/projects/streampipes/platform-services/src/public-api.ts
b/ui/projects/streampipes/platform-services/src/public-api.ts
index f1ae0c6015..ce377827b3 100644
--- a/ui/projects/streampipes/platform-services/src/public-api.ts
+++ b/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';
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-field-description/basic-field-description.component.html
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-field-description/basic-field-description.component.html
new file mode 100644
index 0000000000..83115501f2
--- /dev/null
+++
b/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>
diff --git
a/ui/src/app/assets/components/asset-details/asset-details.component.scss
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-field-description/basic-field-description.component.scss
similarity index 81%
copy from
ui/src/app/assets/components/asset-details/asset-details.component.scss
copy to
ui/projects/streampipes/shared-ui/src/lib/components/basic-field-description/basic-field-description.component.scss
index 8c6b11994d..d6d1ca303b 100644
--- a/ui/src/app/assets/components/asset-details/asset-details.component.scss
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-field-description/basic-field-description.component.scss
@@ -1,4 +1,4 @@
-/*
+/*!
* 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.
@@ -16,17 +16,14 @@
*
*/
-.dashboard-grid {
- display: flex;
- flex-direction: column;
- flex: 1 1 100%;
+.field-description-label {
+ font-weight: bold;
}
-.designer-panel-container {
- width: 100%;
- height: 100%;
+.field-description {
+ font-size: smaller;
}
-.designer-panel {
- width: 400px;
+.field-description-outer {
+ margin-bottom: 10px;
}
diff --git
a/ui/src/app/assets/components/asset-details/asset-details.component.scss
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-field-description/basic-field-description.component.ts
similarity index 66%
copy from
ui/src/app/assets/components/asset-details/asset-details.component.scss
copy to
ui/projects/streampipes/shared-ui/src/lib/components/basic-field-description/basic-field-description.component.ts
index 8c6b11994d..51c95bb2e4 100644
--- a/ui/src/app/assets/components/asset-details/asset-details.component.scss
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-field-description/basic-field-description.component.ts
@@ -16,17 +16,20 @@
*
*/
-.dashboard-grid {
- display: flex;
- flex-direction: column;
- flex: 1 1 100%;
-}
+import { Component, Input, OnInit } from '@angular/core';
-.designer-panel-container {
- width: 100%;
- height: 100%;
-}
+@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;
-.designer-panel {
- width: 400px;
+ @Input()
+ descriptionPanelWidth: string = '30';
}
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.ts
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.ts
index 4c4cc78e60..8b590c92b7 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.ts
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.ts
@@ -17,13 +17,14 @@
*/
import { Component, Input, OnInit } 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';
- }
}
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.ts
b/ui/projects/streampipes/shared-ui/src/lib/services/colorization.service.ts
similarity index 61%
copy from
ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.ts
copy to
ui/projects/streampipes/shared-ui/src/lib/services/colorization.service.ts
index 4c4cc78e60..6e1c82d258 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.ts
+++ b/ui/projects/streampipes/shared-ui/src/lib/services/colorization.service.ts
@@ -16,37 +16,11 @@
*
*/
-import { Component, Input, OnInit } from '@angular/core';
+import { Injectable } from '@angular/core';
-@Component({
- selector: 'sp-label',
- templateUrl: './sp-label.component.html',
- styleUrls: ['./sp-label.component.scss'],
-})
-export class SpLabelComponent implements OnInit {
- @Input()
- labelText: string;
-
- @Input()
- small = false;
-
- _labelBackground: string;
-
- labelTextColor = '';
-
- ngOnInit(): void {}
-
- @Input()
- set labelBackground(labelBackground: string) {
- this._labelBackground = labelBackground;
- this.labelTextColor = this.generateContrastColor(labelBackground);
- }
-
- get labelBackground(): string {
- return this._labelBackground;
- }
-
- generateContrastColor(bgColor) {
+@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);
diff --git a/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts
b/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts
index e2e7555e1c..20143d92f7 100644
--- a/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts
+++ b/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,
diff --git a/ui/projects/streampipes/shared-ui/src/public-api.ts
b/ui/projects/streampipes/shared-ui/src/public-api.ts
index 93bd254712..0e30f53d46 100644
--- a/ui/projects/streampipes/shared-ui/src/public-api.ts
+++ b/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';
diff --git a/ui/src/app/assets/assets.module.ts
b/ui/src/app/assets/assets.module.ts
index 13ab8cd223..c8adc3fa06 100644
--- a/ui/src/app/assets/assets.module.ts
+++ b/ui/src/app/assets/assets.module.ts
@@ -39,7 +39,7 @@ import { SpAssetDetailsComponent } from
'./components/asset-details/asset-detail
import { SpAssetSelectionPanelComponent } from
'./components/asset-details/asset-selection-panel/asset-selection-panel.component';
import { SpAssetDetailsPanelComponent } from
'./components/asset-details/asset-details-panel/asset-details-panel.component';
import { MatTreeModule } from '@angular/material/tree';
-import { SpAssetLinkItemComponent } from
'./components/asset-details/asset-details-panel/asset-link-item/asset-link-item.component';
+import { SpAssetLinkItemComponent } from
'./components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-item/asset-link-item.component';
import { EditAssetLinkDialogComponent } from
'./dialog/edit-asset-link/edit-asset-link-dialog.component';
import { SpCreateAssetDialogComponent } from
'./dialog/create-asset/create-asset-dialog.component';
import { SpManageAssetLinksDialogComponent } from
'./dialog/manage-asset-links/manage-asset-links-dialog.component';
@@ -48,13 +48,26 @@ import { MatFormFieldModule } from
'@angular/material/form-field';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSelectModule } from '@angular/material/select';
import { MatSortModule } from '@angular/material/sort';
+import { AssetDetailsLinksComponent } from
'./components/asset-details/asset-details-panel/asset-details-links/asset-details-links.component';
+import { AssetDetailsBasicsComponent } from
'./components/asset-details/asset-details-panel/asset-details-basics/asset-details-basics.component';
+import { MatTabsModule } from '@angular/material/tabs';
+import { AssetLinkSectionComponent } from
'./components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-section.component';
+import { AssetTypeFilterPipe } from './pipes/asset-type-filter.pipe';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { AssetDetailsLabelsComponent } from
'./components/asset-details/asset-details-panel/asset-details-basics/asset-details-labels/asset-details-labels.component';
+import { MatChipGrid, MatChipsModule } from '@angular/material/chips';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
@NgModule({
imports: [
CommonModule,
FlexLayoutModule,
MatGridListModule,
+ MatAutocompleteModule,
MatButtonModule,
+ MatButtonToggleModule,
+ MatChipsModule,
+ MatChipGrid,
MatProgressSpinnerModule,
MatIconModule,
MatInputModule,
@@ -64,6 +77,7 @@ import { MatSortModule } from '@angular/material/sort';
MatDividerModule,
MatSidenavModule,
MatSelectModule,
+ MatTabsModule,
MatTooltipModule,
FormsModule,
DragDropModule,
@@ -95,6 +109,10 @@ import { MatSortModule } from '@angular/material/sort';
MatSortModule,
],
declarations: [
+ AssetDetailsBasicsComponent,
+ AssetDetailsLabelsComponent,
+ AssetDetailsLinksComponent,
+ AssetLinkSectionComponent,
AssetUploadDialogComponent,
EditAssetLinkDialogComponent,
SpAssetDetailsComponent,
@@ -104,6 +122,7 @@ import { MatSortModule } from '@angular/material/sort';
SpAssetSelectionPanelComponent,
SpCreateAssetDialogComponent,
SpManageAssetLinksDialogComponent,
+ AssetTypeFilterPipe,
],
providers: [],
})
diff --git
a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-basics/asset-details-basics.component.html
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-basics/asset-details-basics.component.html
new file mode 100644
index 0000000000..71f9b00b9c
--- /dev/null
+++
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-basics/asset-details-basics.component.html
@@ -0,0 +1,112 @@
+<!--
+ ~ 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 class="page-container-padding-inner">
+ <sp-basic-header-title-component
+ title="{{ 'Basics: ' + asset.assetName }}"
+ ></sp-basic-header-title-component>
+ <div class="p-10">
+ <div fxLayout="column" fxFlex="100">
+ <sp-basic-field-description
+ fxFlex="100"
+ descriptionPanelWidth="30"
+ label="Name"
+ description="A short name of the asset"
+ >
+ <mat-form-field
+ color="accent"
+ class="w-100"
+ subscriptSizing="dynamic"
+ >
+ <input
+ matInput
+ [(ngModel)]="asset.assetName"
+ [disabled]="!editMode"
+ />
+ </mat-form-field>
+ </sp-basic-field-description>
+ <sp-basic-field-description
+ fxFlex="100"
+ descriptionPanelWidth="30"
+ label="Description"
+ description="A longer description of this asset"
+ >
+ <mat-form-field
+ color="accent"
+ class="w-100"
+ subscriptSizing="dynamic"
+ >
+ <input
+ matInput
+ [(ngModel)]="asset.assetDescription"
+ [disabled]="!editMode"
+ />
+ </mat-form-field>
+ </sp-basic-field-description>
+ <sp-basic-field-description
+ fxFlex="100"
+ descriptionPanelWidth="30"
+ label="Asset ID"
+ description="A unique id for this asset in one word"
+ >
+ <mat-form-field
+ color="accent"
+ class="w-100"
+ subscriptSizing="dynamic"
+ >
+ <input
+ matInput
+ [(ngModel)]="asset.assetId"
+ [disabled]="!editMode"
+ />
+ </mat-form-field>
+ </sp-basic-field-description>
+ <sp-basic-field-description
+ fxFlex="100"
+ descriptionPanelWidth="30"
+ label="Asset Type"
+ description="The ISA95 type of this asset"
+ >
+ <mat-button-toggle-group
+ [disabled]="!editMode"
+ [(ngModel)]="asset.assetType.isa95AssetType"
+ aria-label="Asset Type"
+ >
+ <mat-button-toggle
+ *ngFor="let isaType of isa95Types"
+ [value]="isaType.type"
+ >{{ isaType.label }}
+ </mat-button-toggle>
+ </mat-button-toggle-group>
+ </sp-basic-field-description>
+ <sp-basic-field-description
+ fxFlex="100"
+ descriptionPanelWidth="30"
+ label="Labels"
+ description="Assign additional labels to better discover your
assets"
+ >
+ <sp-asset-details-labels-component
+ [asset]="asset"
+ [editMode]="editMode"
+ class="w-100"
+ >
+ </sp-asset-details-labels-component>
+ </sp-basic-field-description>
+ </div>
+ </div>
+</div>
diff --git
a/ui/src/app/assets/components/asset-details/asset-details.component.scss
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-basics/asset-details-basics.component.scss
similarity index 80%
copy from
ui/src/app/assets/components/asset-details/asset-details.component.scss
copy to
ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-basics/asset-details-basics.component.scss
index 8c6b11994d..4492f86b7c 100644
--- a/ui/src/app/assets/components/asset-details/asset-details.component.scss
+++
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-basics/asset-details-basics.component.scss
@@ -1,4 +1,4 @@
-/*
+/*!
* 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.
@@ -16,17 +16,12 @@
*
*/
-.dashboard-grid {
- display: flex;
- flex-direction: column;
- flex: 1 1 100%;
+.mat-button-toggle-group {
+ flex-wrap: wrap;
+ border: none;
}
-.designer-panel-container {
- width: 100%;
- height: 100%;
-}
-
-.designer-panel {
- width: 400px;
+.mat-button-toggle {
+ border: 1px solid var(--mat-standard-button-toggle-divider-color);
+ margin-bottom: 5px;
}
diff --git
a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-basics/asset-details-basics.component.ts
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-basics/asset-details-basics.component.ts
new file mode 100644
index 0000000000..f84ef1fd3b
--- /dev/null
+++
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-basics/asset-details-basics.component.ts
@@ -0,0 +1,52 @@
+/*
+ * 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';
+import {
+ Isa95TypeDesc,
+ Isa95TypeService,
+ SpAsset,
+} from '@streampipes/platform-services';
+
+@Component({
+ selector: 'sp-asset-details-basics-component',
+ templateUrl: './asset-details-basics.component.html',
+ styleUrls: ['./asset-details-basics.component.scss'],
+})
+export class AssetDetailsBasicsComponent implements OnInit {
+ @Input()
+ asset: SpAsset;
+
+ @Input()
+ editMode: boolean;
+
+ isa95Types: Isa95TypeDesc[] = [];
+
+ constructor(private isa95TypeService: Isa95TypeService) {}
+
+ ngOnInit() {
+ this.asset.assetType ??= {
+ assetIcon: undefined,
+ assetIconColor: undefined,
+ assetTypeCategory: undefined,
+ assetTypeLabel: undefined,
+ isa95AssetType: 'OTHER',
+ };
+ this.isa95Types = this.isa95TypeService.getTypeDescriptions();
+ }
+}
diff --git
a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-basics/asset-details-labels/asset-details-labels.component.html
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-basics/asset-details-labels/asset-details-labels.component.html
new file mode 100644
index 0000000000..acbf7daf51
--- /dev/null
+++
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-basics/asset-details-labels/asset-details-labels.component.html
@@ -0,0 +1,68 @@
+<!--
+ ~ 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 *ngIf="editMode">
+ <mat-form-field class="w-100" *ngIf="labelsAvailable" color="accent">
+ <mat-chip-grid #chipGrid aria-label="Labels">
+ <mat-chip-row
+ (removed)="remove(label)"
+ *ngFor="let label of labels"
+ [ngStyle]="{ background: label.color }"
+ >
+ <span [ngStyle]="{ color: labelTextColors[label._id] }">{{
+ label.label
+ }}</span>
+ <button
+ matChipRemove
+ [ngStyle]="{ color: labelTextColors[label._id] }"
+ >
+ <mat-icon>cancel</mat-icon>
+ </button>
+ </mat-chip-row>
+ </mat-chip-grid>
+ <input
+ placeholder="Click to add label"
+ #labelInput
+ [formControl]="labelCtrl"
+ [matChipInputFor]="chipGrid"
+ [matAutocomplete]="auto"
+ [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+ (matChipInputTokenEnd)="add($event)"
+ />
+ <mat-autocomplete
+ #auto="matAutocomplete"
+ (optionSelected)="selected($event)"
+ >
+ @for (label of filteredLabels | async; track label) {
+ <mat-option [value]="label">{{ label }}</mat-option>
+ }
+ </mat-autocomplete>
+ </mat-form-field>
+</div>
+<div
+ *ngIf="!editMode && labelsAvailable"
+ fxLayout="row wrap"
+ fxLayoutGap="10px"
+>
+ <sp-label
+ *ngFor="let label of labels"
+ [labelText]="label.label"
+ [small]="true"
+ [labelBackground]="label.color"
+ ></sp-label>
+</div>
diff --git
a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-basics/asset-details-labels/asset-details-labels.component.ts
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-basics/asset-details-labels/asset-details-labels.component.ts
new file mode 100644
index 0000000000..445072cf5d
--- /dev/null
+++
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-basics/asset-details-labels/asset-details-labels.component.ts
@@ -0,0 +1,146 @@
+/*
+ * 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,
+ ElementRef,
+ Input,
+ OnChanges,
+ OnInit,
+ SimpleChanges,
+ ViewChild,
+} from '@angular/core';
+import {
+ LabelsService,
+ SpAsset,
+ SpLabel,
+} from '@streampipes/platform-services';
+import { MatChipInputEvent } from '@angular/material/chips';
+import { FormControl } from '@angular/forms';
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
+import { Observable } from 'rxjs';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { map, startWith } from 'rxjs/operators';
+import { SpColorizationService } from '@streampipes/shared-ui';
+
+@Component({
+ selector: 'sp-asset-details-labels-component',
+ templateUrl: './asset-details-labels.component.html',
+})
+export class AssetDetailsLabelsComponent implements OnInit, OnChanges {
+ @Input()
+ asset: SpAsset;
+
+ @Input()
+ editMode: boolean;
+
+ labels: SpLabel[] = [];
+ labelTextColors: Record<string, string> = {};
+
+ separatorKeysCodes: number[] = [ENTER, COMMA];
+ labelCtrl = new FormControl('');
+ filteredLabels: Observable<string[]>;
+ allLabels: SpLabel[] = [];
+ labelsAvailable = false;
+
+ @ViewChild('labelInput') labelInput: ElementRef<HTMLInputElement>;
+
+ constructor(
+ private labelsService: LabelsService,
+ private colorizationService: SpColorizationService,
+ ) {}
+
+ ngOnInit(): void {
+ this.labelsService.getAllLabels().subscribe(labels => {
+ this.allLabels = labels;
+ labels.forEach(
+ label =>
+ (this.labelTextColors[label._id] =
+ this.colorizationService.generateContrastColor(
+ label.color,
+ )),
+ );
+ this.refreshCurrentLabels();
+ this.labelsAvailable = true;
+ });
+ this.filteredLabels = this.labelCtrl.valueChanges.pipe(
+ startWith(null),
+ map((labelName: string | null) =>
+ labelName
+ ? this._filter(labelName)
+ : this.allLabels.map(label => label.label).slice(),
+ ),
+ );
+ }
+
+ refreshCurrentLabels(): void {
+ this.asset.labelIds ??= [];
+ this.labels =
+ this.asset.labelIds?.map(id =>
+ this.allLabels.find(l => l._id === id),
+ ) || [];
+ }
+
+ ngOnChanges(changes: SimpleChanges) {
+ if (changes['asset']) {
+ this.refreshCurrentLabels();
+ }
+ }
+
+ add(event: MatChipInputEvent): void {
+ const value = (event.value || '').trim();
+ if (value) {
+ this.addLabelToSelection(value);
+ }
+ event.chipInput?.clear();
+ this.labelCtrl.setValue(null);
+ }
+
+ findLabel(value: string): SpLabel {
+ return this.allLabels.find(l => l.label === value);
+ }
+
+ remove(label: SpLabel): void {
+ const index = this.asset.labelIds.indexOf(label._id);
+ const labelsIndex = this.labels.findIndex(l => l._id === label._id);
+ if (index >= 0) {
+ this.labels.splice(labelsIndex, 1);
+ this.asset.labelIds.splice(index, 1);
+ }
+ }
+
+ selected(event: MatAutocompleteSelectedEvent): void {
+ this.addLabelToSelection(event.option.viewValue);
+ this.labelInput.nativeElement.value = '';
+ this.labelCtrl.setValue(null);
+ }
+
+ addLabelToSelection(textLabel: string): void {
+ const label = this.findLabel(textLabel);
+ this.labels.push(label);
+ this.asset.labelIds.push(label._id);
+ }
+
+ private _filter(value: string): string[] {
+ const filterValue = value.toLowerCase();
+
+ return this.allLabels
+ .filter(label => label.label.toLowerCase().includes(filterValue))
+ .map(label => label.label);
+ }
+}
diff --git
a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-details-links.component.html
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-details-links.component.html
new file mode 100644
index 0000000000..10795c7ac6
--- /dev/null
+++
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-details-links.component.html
@@ -0,0 +1,65 @@
+<!--
+ ~ 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 class="page-container-padding-inner">
+ <sp-basic-header-title-component
+ title="{{ 'Asset Links: ' + asset.assetName }}"
+ ></sp-basic-header-title-component>
+
+ <div class="p-10" fxLayout="column">
+ <div fxLayoutAlign="end center" fxLayout="row" fxFlex="100">
+ <button
+ [disabled]="!assetLinksLoaded"
+ mat-raised-button
+ color="accent"
+ *ngIf="editMode"
+ (click)="openManageAssetLinksDialog()"
+ data-cy="assets-manage-links-button"
+ >
+ <i class="material-icons">add</i><span> Manage
links</span>
+ </button>
+ <button
+ [disabled]="!assetLinksLoaded"
+ mat-raised-button
+ color="accent"
+ *ngIf="editMode"
+ (click)="openCreateAssetLinkDialog()"
+ >
+ <i class="material-icons">add</i><span> Add link</span>
+ </button>
+ </div>
+ <div
+ fxLayout="column"
+ fxFlex="100"
+ *ngIf="assetLinkTypes"
+ class="mt-10"
+ >
+ <div *ngFor="let assetLinkType of assetLinkTypes">
+ <sp-asset-link-section-component
+ [assetLinkType]="assetLinkType"
+ [asset]="asset"
+ [editMode]="editMode"
+ (openEditAssetLinkEmitter)="
+ openEditAssetLinkDialog($event, false)
+ "
+ >
+ </sp-asset-link-section-component>
+ </div>
+ </div>
+ </div>
+</div>
diff --git
a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-details-links.component.scss
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-details-links.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git
a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-panel.component.ts
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-details-links.component.ts
similarity index 78%
copy from
ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-panel.component.ts
copy to
ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-details-links.component.ts
index 10147760c5..b5d34a0d9f 100644
---
a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-panel.component.ts
+++
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-details-links.component.ts
@@ -23,17 +23,17 @@ import {
GenericStorageService,
SpAsset,
} from '@streampipes/platform-services';
-import { AssetConstants } from '../../../constants/asset.constants';
+import { SpManageAssetLinksDialogComponent } from
'../../../../dialog/manage-asset-links/manage-asset-links-dialog.component';
import { DialogService, PanelType } from '@streampipes/shared-ui';
-import { EditAssetLinkDialogComponent } from
'../../../dialog/edit-asset-link/edit-asset-link-dialog.component';
-import { SpManageAssetLinksDialogComponent } from
'../../../dialog/manage-asset-links/manage-asset-links-dialog.component';
+import { EditAssetLinkDialogComponent } from
'../../../../dialog/edit-asset-link/edit-asset-link-dialog.component';
+import { AssetConstants } from '../../../../constants/asset.constants';
@Component({
- selector: 'sp-asset-details-panel-component',
- templateUrl: './asset-details-panel.component.html',
- styleUrls: ['./asset-details-panel.component.scss'],
+ selector: 'sp-asset-details-links-component',
+ templateUrl: './asset-details-links.component.html',
+ styleUrls: ['./asset-details-links.component.scss'],
})
-export class SpAssetDetailsPanelComponent implements OnInit {
+export class AssetDetailsLinksComponent implements OnInit {
@Input()
asset: SpAsset;
@@ -43,7 +43,8 @@ export class SpAssetDetailsPanelComponent implements OnInit {
@Output()
updateAssetEmitter: EventEmitter<SpAsset> = new EventEmitter<SpAsset>();
- assetLinkTypes: AssetLinkType[];
+ assetLinkTypes: AssetLinkType[] = [];
+ assetLinksLoaded = false;
constructor(
private genericStorageService: GenericStorageService,
@@ -57,6 +58,7 @@ export class SpAssetDetailsPanelComponent implements OnInit {
this.assetLinkTypes = assetLinkTypes.sort((a, b) =>
a.linkLabel.localeCompare(b.linkLabel),
);
+ this.assetLinksLoaded = true;
});
}
@@ -81,11 +83,10 @@ export class SpAssetDetailsPanelComponent implements OnInit
{
});
}
- openEditAssetLinkDialog(
- assetLink: AssetLink,
- index: number,
- createMode: boolean,
- ): void {
+ openEditAssetLinkDialog(assetLink: AssetLink, createMode: boolean): void {
+ const index = !createMode
+ ? this.asset.assetLinks.indexOf(assetLink)
+ : -1;
const dialogRef = this.dialogService.open(
EditAssetLinkDialogComponent,
{
@@ -107,7 +108,7 @@ export class SpAssetDetailsPanelComponent implements OnInit
{
} else {
this.asset.assetLinks.push(storedLink);
}
- this.updateAssetEmitter.emit(this.asset);
+ this.asset.assetLinks = [...this.asset.assetLinks];
}
});
}
@@ -121,11 +122,6 @@ export class SpAssetDetailsPanelComponent implements
OnInit {
navigationActive: true,
queryHint: 'data-view',
};
- this.openEditAssetLinkDialog(assetLink, -1, true);
- }
-
- deleteAssetLink(index: number): void {
- this.asset.assetLinks.splice(index, 1);
- this.updateAssetEmitter.emit(this.asset);
+ this.openEditAssetLinkDialog(assetLink, true);
}
}
diff --git
a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-link-item/asset-link-item.component.html
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-item/asset-link-item.component.html
similarity index 91%
rename from
ui/src/app/assets/components/asset-details/asset-details-panel/asset-link-item/asset-link-item.component.html
rename to
ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-item/asset-link-item.component.html
index a86f034320..5f5249522e 100644
---
a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-link-item/asset-link-item.component.html
+++
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-item/asset-link-item.component.html
@@ -22,11 +22,9 @@
<div
fxLayoutAlign="center center"
class="link-icon"
- [ngStyle]="{ background: currentAssetLinkType.linkColor }"
+ [ngStyle]="{ background: assetLinkType.linkColor }"
>
- <i class="material-icons">{{
- currentAssetLinkType.linkIcon
- }}</i>
+ <i class="material-icons">{{ assetLinkType.linkIcon }}</i>
</div>
</div>
<div fxLayoutAlign="start center">
diff --git
a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-link-item/asset-link-item.component.scss
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-item/asset-link-item.component.scss
similarity index 98%
rename from
ui/src/app/assets/components/asset-details/asset-details-panel/asset-link-item/asset-link-item.component.scss
rename to
ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-item/asset-link-item.component.scss
index 6dd25c96fe..b0038ea3c0 100644
---
a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-link-item/asset-link-item.component.scss
+++
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-item/asset-link-item.component.scss
@@ -24,7 +24,6 @@
.link-label {
margin-right: 15px;
- font-weight: 500;
}
.link-icon {
diff --git
a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-link-item/asset-link-item.component.ts
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-item/asset-link-item.component.ts
similarity index 60%
rename from
ui/src/app/assets/components/asset-details/asset-details-panel/asset-link-item/asset-link-item.component.ts
rename to
ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-item/asset-link-item.component.ts
index f747bf1588..34825aba31 100644
---
a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-link-item/asset-link-item.component.ts
+++
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-item/asset-link-item.component.ts
@@ -16,7 +16,7 @@
*
*/
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
import { AssetLink, AssetLinkType } from '@streampipes/platform-services';
import { Router } from '@angular/router';
@@ -25,53 +25,38 @@ import { Router } from '@angular/router';
templateUrl: './asset-link-item.component.html',
styleUrls: ['./asset-link-item.component.scss'],
})
-export class SpAssetLinkItemComponent implements OnInit {
+export class SpAssetLinkItemComponent {
@Input()
assetLink: AssetLink;
@Input()
- assetLinkIndex: number;
-
- @Input()
- assetLinkTypes: AssetLinkType[];
+ assetLinkType: AssetLinkType;
@Input()
editMode: boolean;
@Output()
- openEditAssetLinkEmitter: EventEmitter<{
- assetLink: AssetLink;
- index: number;
- }> = new EventEmitter<{ assetLink: AssetLink; index: number }>();
+ openEditAssetLinkEmitter: EventEmitter<AssetLink> =
+ new EventEmitter<AssetLink>();
@Output()
- deleteAssetLinkEmitter: EventEmitter<number> = new EventEmitter<number>();
-
- currentAssetLinkType: AssetLinkType;
+ deleteAssetLinkEmitter: EventEmitter<AssetLink> =
+ new EventEmitter<AssetLink>();
constructor(private router: Router) {}
- ngOnInit(): void {
- this.currentAssetLinkType = this.assetLinkTypes.find(
- t => t.linkType === this.assetLink.linkType,
- );
- }
-
openLink(): void {
this.router.navigate([
- ...this.currentAssetLinkType.navPaths,
+ ...this.assetLinkType.navPaths,
this.assetLink.resourceId,
]);
}
editLink(): void {
- this.openEditAssetLinkEmitter.emit({
- assetLink: this.assetLink,
- index: this.assetLinkIndex,
- });
+ this.openEditAssetLinkEmitter.emit(this.assetLink);
}
deleteLink(): void {
- this.deleteAssetLinkEmitter.emit(this.assetLinkIndex);
+ this.deleteAssetLinkEmitter.emit(this.assetLink);
}
}
diff --git
a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-section.component.html
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-section.component.html
new file mode 100644
index 0000000000..d5e20ef909
--- /dev/null
+++
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-section.component.html
@@ -0,0 +1,40 @@
+<!--
+ ~ 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 class="asset-section">
+ <div class="section-header">{{ assetLinkType.linkLabel }}</div>
+ <div
+ fxLayout="column"
+ class="asset-section-entry"
+ data-cy="linked-resources-list"
+ *ngFor="
+ let link of asset.assetLinks
+ | assetTypeFilter: assetLinkType.linkType
+ "
+ >
+ <sp-asset-link-item-component
+ [assetLink]="link"
+ [assetLinkType]="assetLinkType"
+ [editMode]="editMode"
+ (openEditAssetLinkEmitter)="openEditAssetLinkEmitter.emit($event)"
+ (deleteAssetLinkEmitter)="deleteAssetLink($event)"
+ class="asset-link-item"
+ >
+ </sp-asset-link-item-component>
+ </div>
+</div>
diff --git
a/ui/src/app/assets/components/asset-details/asset-details.component.scss
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-section.component.scss
similarity index 73%
copy from
ui/src/app/assets/components/asset-details/asset-details.component.scss
copy to
ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-section.component.scss
index 8c6b11994d..6c7baa919a 100644
--- a/ui/src/app/assets/components/asset-details/asset-details.component.scss
+++
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-section.component.scss
@@ -16,17 +16,20 @@
*
*/
-.dashboard-grid {
- display: flex;
- flex-direction: column;
- flex: 1 1 100%;
+.section-header {
+ font-weight: bold;
+ margin-bottom: 10px;
+ color: var(--color-default-text);
}
-.designer-panel-container {
- width: 100%;
- height: 100%;
+.asset-section {
+ margin-bottom: 10px;
+ margin-top: 10px;
+ padding: 10px;
+ border: 1px solid var(--color-bg-2);
}
-.designer-panel {
- width: 400px;
+.asset-section-entry {
+ margin-top: 5px;
+ margin-bottom: 5px;
}
diff --git
a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-section.component.ts
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-section.component.ts
new file mode 100644
index 0000000000..ebfe1055ff
--- /dev/null
+++
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-section.component.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 { Component, EventEmitter, Input, Output } from '@angular/core';
+import {
+ AssetLink,
+ AssetLinkType,
+ SpAsset,
+} from '@streampipes/platform-services';
+
+@Component({
+ selector: 'sp-asset-link-section-component',
+ templateUrl: './asset-link-section.component.html',
+ styleUrls: ['./asset-link-section.component.scss'],
+})
+export class AssetLinkSectionComponent {
+ @Input()
+ assetLinkType: AssetLinkType;
+
+ @Input()
+ asset: SpAsset;
+
+ @Input()
+ editMode: boolean;
+
+ @Output()
+ openEditAssetLinkEmitter: EventEmitter<AssetLink> =
+ new EventEmitter<AssetLink>();
+
+ deleteAssetLink(assetLink: AssetLink): void {
+ const index = this.asset.assetLinks.indexOf(assetLink);
+ this.asset.assetLinks.splice(index, 1);
+ this.asset.assetLinks = [...this.asset.assetLinks];
+ }
+}
diff --git
a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-panel.component.html
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-panel.component.html
index dbf0f1e8dc..9b9157f43c 100644
---
a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-panel.component.html
+++
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-panel.component.html
@@ -16,92 +16,22 @@
~
-->
-<div
- fxFlex="100"
- fxLayout="column"
- class="page-container-padding-inner"
- *ngIf="asset"
->
- <sp-basic-header-title-component
- [title]="asset.assetName"
- ></sp-basic-header-title-component>
-
- <sp-basic-inner-panel panelTitle="Basics" outerMargin="20px 0px">
- <div fxLayout="column" fxFlex="100">
- <mat-form-field color="accent">
- <mat-label>Name</mat-label>
- <input
- matInput
- [(ngModel)]="asset.assetName"
- [disabled]="!editMode"
- />
- </mat-form-field>
- <mat-form-field color="accent">
- <mat-label>Description</mat-label>
- <input
- matInput
- [(ngModel)]="asset.assetDescription"
- [disabled]="!editMode"
- />
- </mat-form-field>
- <mat-form-field color="accent">
- <mat-label>ID</mat-label>
- <input
- matInput
- [(ngModel)]="asset.assetId"
- [disabled]="!editMode"
- />
- </mat-form-field>
- </div>
- </sp-basic-inner-panel>
-
- <sp-basic-inner-panel panelTitle="Linked Resources" outerMargin="0px 0px">
- <div header fxLayoutAlign="end center" fxLayout="row" fxFlex="100">
- <button
- mat-button
- color="accent"
- *ngIf="editMode"
- (click)="openManageAssetLinksDialog()"
- data-cy="assets-manage-links-button"
- >
- <i class="material-icons">add</i><span> Manage
links</span>
- </button>
- <button
- mat-button
- color="accent"
- *ngIf="editMode"
- (click)="openCreateAssetLinkDialog()"
+<div fxFlex="100" fxLayout="column" *ngIf="asset">
+ <mat-tab-group color="accent" [mat-stretch-tabs]="false">
+ <mat-tab label="Basics" data-cy="asset-tab-basic">
+ <sp-asset-details-basics-component
+ [asset]="asset"
+ [editMode]="editMode"
>
- <i class="material-icons">add</i><span> Add link</span>
- </button>
- </div>
- <div
- fxLayout="column"
- fxFlex="100"
- *ngIf="assetLinkTypes"
- data-cy="linked-resources-list"
- >
- <div
- fxLayout="column"
- *ngFor="let link of asset.assetLinks; let i = index"
+ </sp-asset-details-basics-component>
+ </mat-tab>
+ <mat-tab label="Asset Links" data-cy="asset-tab-asset-links">
+ <sp-asset-details-links-component
+ [asset]="asset"
+ [editMode]="editMode"
+ (updateAssetEmitter)="updateAssetEmitter.emit($event)"
>
- <sp-asset-link-item-component
- [assetLink]="link"
- [assetLinkIndex]="i"
- [assetLinkTypes]="assetLinkTypes"
- [editMode]="editMode"
- (openEditAssetLinkEmitter)="
- openEditAssetLinkDialog(
- $event.assetLink,
- $event.index,
- false
- )
- "
- (deleteAssetLinkEmitter)="deleteAssetLink($event)"
- class="asset-link-item"
- >
- </sp-asset-link-item-component>
- </div>
- </div>
- </sp-basic-inner-panel>
+ </sp-asset-details-links-component>
+ </mat-tab>
+ </mat-tab-group>
</div>
diff --git
a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-panel.component.ts
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-panel.component.ts
index 10147760c5..e61b6d379b 100644
---
a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-panel.component.ts
+++
b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-panel.component.ts
@@ -16,24 +16,15 @@
*
*/
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import {
- AssetLink,
- AssetLinkType,
- GenericStorageService,
- SpAsset,
-} from '@streampipes/platform-services';
-import { AssetConstants } from '../../../constants/asset.constants';
-import { DialogService, PanelType } from '@streampipes/shared-ui';
-import { EditAssetLinkDialogComponent } from
'../../../dialog/edit-asset-link/edit-asset-link-dialog.component';
-import { SpManageAssetLinksDialogComponent } from
'../../../dialog/manage-asset-links/manage-asset-links-dialog.component';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { SpAsset } from '@streampipes/platform-services';
@Component({
selector: 'sp-asset-details-panel-component',
templateUrl: './asset-details-panel.component.html',
styleUrls: ['./asset-details-panel.component.scss'],
})
-export class SpAssetDetailsPanelComponent implements OnInit {
+export class SpAssetDetailsPanelComponent {
@Input()
asset: SpAsset;
@@ -42,90 +33,4 @@ export class SpAssetDetailsPanelComponent implements OnInit {
@Output()
updateAssetEmitter: EventEmitter<SpAsset> = new EventEmitter<SpAsset>();
-
- assetLinkTypes: AssetLinkType[];
-
- constructor(
- private genericStorageService: GenericStorageService,
- private dialogService: DialogService,
- ) {}
-
- ngOnInit(): void {
- this.genericStorageService
- .getAllDocuments(AssetConstants.ASSET_LINK_TYPES_DOC_NAME)
- .subscribe(assetLinkTypes => {
- this.assetLinkTypes = assetLinkTypes.sort((a, b) =>
- a.linkLabel.localeCompare(b.linkLabel),
- );
- });
- }
-
- openManageAssetLinksDialog(): void {
- const dialogRef = this.dialogService.open(
- SpManageAssetLinksDialogComponent,
- {
- panelType: PanelType.SLIDE_IN_PANEL,
- title: 'Manage asset links',
- width: '50vw',
- data: {
- assetLinks: this.asset.assetLinks,
- assetLinkTypes: this.assetLinkTypes,
- },
- },
- );
-
- dialogRef.afterClosed().subscribe(assetLinks => {
- if (assetLinks) {
- this.asset.assetLinks = assetLinks;
- }
- });
- }
-
- openEditAssetLinkDialog(
- assetLink: AssetLink,
- index: number,
- createMode: boolean,
- ): void {
- const dialogRef = this.dialogService.open(
- EditAssetLinkDialogComponent,
- {
- panelType: PanelType.SLIDE_IN_PANEL,
- title: createMode ? 'Create ' : 'Update ' + 'asset model',
- width: '50vw',
- data: {
- assetLink: assetLink,
- assetLinkTypes: this.assetLinkTypes,
- createMode: createMode,
- },
- },
- );
-
- dialogRef.afterClosed().subscribe(storedLink => {
- if (storedLink) {
- if (index > -1) {
- this.asset.assetLinks[index] = storedLink;
- } else {
- this.asset.assetLinks.push(storedLink);
- }
- this.updateAssetEmitter.emit(this.asset);
- }
- });
- }
-
- openCreateAssetLinkDialog(): void {
- const assetLink: AssetLink = {
- linkLabel: '',
- linkType: 'data-view',
- editingDisabled: false,
- resourceId: '',
- navigationActive: true,
- queryHint: 'data-view',
- };
- this.openEditAssetLinkDialog(assetLink, -1, true);
- }
-
- deleteAssetLink(index: number): void {
- this.asset.assetLinks.splice(index, 1);
- this.updateAssetEmitter.emit(this.asset);
- }
}
diff --git
a/ui/src/app/assets/components/asset-details/asset-details.component.html
b/ui/src/app/assets/components/asset-details/asset-details.component.html
index 8f9b29bcf2..e99f362281 100644
--- a/ui/src/app/assets/components/asset-details/asset-details.component.html
+++ b/ui/src/app/assets/components/asset-details/asset-details.component.html
@@ -42,14 +42,13 @@
</div>
<div fxFlex="100" fxLayout="column" *ngIf="asset">
<mat-drawer-container
- class="designer-panel-container h-100 dashboard-grid"
+ class="asset-details-container h-100 asset-details-panel"
>
<mat-drawer
- #designerDrawer
[opened]="true"
mode="side"
position="start"
- class="designer-panel"
+ class="asset-tree-panel"
>
<div fxLayout="column" fxFlex="100">
<sp-asset-selection-panel-component
@@ -61,7 +60,7 @@
</sp-asset-selection-panel-component>
</div>
</mat-drawer>
- <mat-drawer-content class="h-100 dashboard-grid">
+ <mat-drawer-content class="h-100 asset-details-panel">
<sp-asset-details-panel-component
*ngIf="selectedAsset"
[asset]="selectedAsset"
diff --git
a/ui/src/app/assets/components/asset-details/asset-details.component.scss
b/ui/src/app/assets/components/asset-details/asset-details.component.scss
index 8c6b11994d..38a5f35042 100644
--- a/ui/src/app/assets/components/asset-details/asset-details.component.scss
+++ b/ui/src/app/assets/components/asset-details/asset-details.component.scss
@@ -16,17 +16,18 @@
*
*/
-.dashboard-grid {
+.asset-details-panel {
display: flex;
flex-direction: column;
flex: 1 1 100%;
}
-.designer-panel-container {
+.asset-details-container {
width: 100%;
height: 100%;
+ background: var(--color-bg-0);
}
-.designer-panel {
+.asset-tree-panel {
width: 400px;
}
diff --git
a/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.scss
b/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.scss
index 65eddd57b9..2a454ffe3a 100644
---
a/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.scss
+++
b/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.scss
@@ -57,7 +57,7 @@
cursor: pointer;
font-size: 13pt;
width: 100%;
- margin-right: 10px;
+ padding-right: 10px;
padding-left: 5px;
height: 50px;
}
diff --git
a/ui/src/app/assets/components/asset-overview/asset-overview.component.ts
b/ui/src/app/assets/components/asset-overview/asset-overview.component.ts
index 3b9e688b76..ba13abcf04 100644
--- a/ui/src/app/assets/components/asset-overview/asset-overview.component.ts
+++ b/ui/src/app/assets/components/asset-overview/asset-overview.component.ts
@@ -47,7 +47,8 @@ export class SpAssetOverviewComponent implements OnInit {
displayedColumns: string[] = ['name', 'action'];
- dataSource: MatTableDataSource<SpAssetModel>;
+ dataSource: MatTableDataSource<SpAssetModel> =
+ new MatTableDataSource<SpAssetModel>();
constructor(
private genericStorageService: GenericStorageService,
@@ -70,9 +71,7 @@ export class SpAssetOverviewComponent implements OnInit {
.getAllDocuments(AssetConstants.ASSET_APP_DOC_NAME)
.subscribe(result => {
this.existingAssets = result as SpAssetModel[];
- this.dataSource = new MatTableDataSource<SpAssetModel>(
- this.existingAssets,
- );
+ this.dataSource.data = this.existingAssets;
});
}
diff --git
a/ui/src/app/assets/dialog/edit-asset-link/edit-asset-link-dialog.component.html
b/ui/src/app/assets/dialog/edit-asset-link/edit-asset-link-dialog.component.html
index 5e7a3246f8..5a702b96e7 100644
---
a/ui/src/app/assets/dialog/edit-asset-link/edit-asset-link-dialog.component.html
+++
b/ui/src/app/assets/dialog/edit-asset-link/edit-asset-link-dialog.component.html
@@ -51,7 +51,7 @@
fxFlex
(selectionChange)="
changeLabel(
- $event.value._id,
+ $event.value.elementId,
$event.value.name,
$event.value
)
@@ -103,7 +103,7 @@
<mat-select
(selectionChange)="
changeLabel(
- $event.value._id,
+ $event.value.elementId,
$event.value.name,
$event.value
)
@@ -130,7 +130,7 @@
<mat-select
(selectionChange)="
changeLabel(
- $event.value._id,
+ $event.value.elementId,
$event.value.name,
$event.value
)
@@ -221,7 +221,7 @@
required
>
<mat-option *ngFor="let file of files"
[value]="file">{{
- file.originalFilename
+ file.filename
}}</mat-option>
</mat-select>
</mat-form-field>
diff --git
a/ui/src/app/assets/dialog/edit-asset-link/edit-asset-link-dialog.component.ts
b/ui/src/app/assets/dialog/edit-asset-link/edit-asset-link-dialog.component.ts
index b1e98dea0f..080b67bcd4 100644
---
a/ui/src/app/assets/dialog/edit-asset-link/edit-asset-link-dialog.component.ts
+++
b/ui/src/app/assets/dialog/edit-asset-link/edit-asset-link-dialog.component.ts
@@ -124,9 +124,7 @@ export class EditAssetLinkDialogComponent
afterResourcesLoaded(): void {
if (!this.createMode) {
this.currentResource = this.allResources.find(
- r =>
- r._id === this.clonedAssetLink.resourceId ||
- r.elementId === this.clonedAssetLink.resourceId,
+ r => r.elementId === this.clonedAssetLink.resourceId,
);
}
}
diff --git
a/ui/src/app/assets/dialog/manage-asset-links/manage-asset-links-dialog.component.html
b/ui/src/app/assets/dialog/manage-asset-links/manage-asset-links-dialog.component.html
index 1b48663ffd..c7af829a91 100644
---
a/ui/src/app/assets/dialog/manage-asset-links/manage-asset-links-dialog.component.html
+++
b/ui/src/app/assets/dialog/manage-asset-links/manage-asset-links-dialog.component.html
@@ -94,7 +94,7 @@
(click)="
selectAll(
dashboards,
- idFunction,
+ elementIdFunction,
nameFunction,
'dashboard'
)
@@ -107,7 +107,7 @@
mat-button
mat-raised-button
class="mat-basic small-button"
- (click)="deselectAll(dashboards, idFunction)"
+ (click)="deselectAll(dashboards,
elementIdFunction)"
style="margin-right: 10px; margin-left: 5px"
>
<span>Deselect All</span>
@@ -117,11 +117,11 @@
<div *ngFor="let element of dashboards" fxLayout="row">
<mat-checkbox
color="accent"
- [checked]="linkSelected(element._id)"
+ [checked]="linkSelected(element.elementId)"
(change)="
selectLink(
$event.checked,
- element._id,
+ element.elementId,
element.name,
'dashboard'
)
@@ -258,7 +258,7 @@
(click)="
selectAll(
dataViews,
- idFunction,
+ elementIdFunction,
nameFunction,
'data-view'
)
@@ -271,7 +271,7 @@
mat-button
mat-raised-button
class="mat-basic small-button"
- (click)="deselectAll(dataViews, idFunction)"
+ (click)="deselectAll(dataViews, elementIdFunction)"
style="margin-right: 10px; margin-left: 5px"
>
<span>Deselect All</span>
@@ -281,11 +281,11 @@
<div *ngFor="let element of dataViews" fxLayout="row">
<mat-checkbox
color="accent"
- [checked]="linkSelected(element._id)"
+ [checked]="linkSelected(element.elementId)"
(change)="
selectLink(
$event.checked,
- element._id,
+ element.elementId,
element.name,
'data-view'
)
@@ -342,7 +342,7 @@
)
"
>
- {{ element.originalFilename }}
+ {{ element.filename }}
</mat-checkbox>
</div>
</div>
@@ -362,7 +362,7 @@
(click)="
selectAll(
pipelines,
- idFunction,
+ elementIdFunction,
nameFunction,
'pipeline'
)
@@ -375,7 +375,7 @@
mat-button
mat-raised-button
class="mat-basic small-button"
- (click)="deselectAll(pipelines, idFunction)"
+ (click)="deselectAll(pipelines, elementIdFunction)"
style="margin-right: 10px; margin-left: 5px"
>
<span>Deselect All</span>
@@ -385,11 +385,11 @@
<div *ngFor="let pipeline of pipelines" fxLayout="row">
<mat-checkbox
color="accent"
- [checked]="linkSelected(pipeline._id)"
+ [checked]="linkSelected(pipeline.elementId)"
(change)="
selectLink(
$event.checked,
- pipeline._id,
+ pipeline.elementId,
pipeline.name,
'pipeline'
)
diff --git
a/ui/src/app/assets/dialog/manage-asset-links/manage-asset-links-dialog.component.ts
b/ui/src/app/assets/dialog/manage-asset-links/manage-asset-links-dialog.component.ts
index 356acde8fd..7963c3ad38 100644
---
a/ui/src/app/assets/dialog/manage-asset-links/manage-asset-links-dialog.component.ts
+++
b/ui/src/app/assets/dialog/manage-asset-links/manage-asset-links-dialog.component.ts
@@ -49,7 +49,6 @@ export class SpManageAssetLinksDialogComponent
clonedAssetLinks: AssetLink[] = [];
- idFunction = el => el._id;
elementIdFunction = el => el.elementId;
fileIdFunction = el => el.fileId;
nameFunction = el => el.name;
diff --git
a/ui/src/app/assets/components/asset-details/asset-details.component.scss
b/ui/src/app/assets/pipes/asset-type-filter.pipe.ts
similarity index 64%
copy from
ui/src/app/assets/components/asset-details/asset-details.component.scss
copy to ui/src/app/assets/pipes/asset-type-filter.pipe.ts
index 8c6b11994d..47ae7df86f 100644
--- a/ui/src/app/assets/components/asset-details/asset-details.component.scss
+++ b/ui/src/app/assets/pipes/asset-type-filter.pipe.ts
@@ -16,17 +16,17 @@
*
*/
-.dashboard-grid {
- display: flex;
- flex-direction: column;
- flex: 1 1 100%;
-}
-
-.designer-panel-container {
- width: 100%;
- height: 100%;
-}
+import { Injectable, Pipe, PipeTransform } from '@angular/core';
+import { AssetLink } from '@streampipes/platform-services';
-.designer-panel {
- width: 400px;
+@Pipe({
+ name: 'assetTypeFilter',
+})
+@Injectable({ providedIn: 'root' })
+export class AssetTypeFilterPipe implements PipeTransform {
+ transform(assetLinks: AssetLink[], assetLinkType: string): AssetLink[] {
+ return assetLinks.filter(
+ assetLink => assetLink.linkType === assetLinkType,
+ );
+ }
}
diff --git
a/ui/src/app/connect/components/adapter-configuration/adapter-settings/adapter-deployment-settings/adapter-deployment-settings.component.html
b/ui/src/app/connect/components/adapter-configuration/adapter-settings/adapter-deployment-settings/adapter-deployment-settings.component.html
index 64d30f5980..45e0cdcc87 100644
---
a/ui/src/app/connect/components/adapter-configuration/adapter-settings/adapter-deployment-settings/adapter-deployment-settings.component.html
+++
b/ui/src/app/connect/components/adapter-configuration/adapter-settings/adapter-deployment-settings/adapter-deployment-settings.component.html
@@ -40,7 +40,7 @@
>
<mat-form-field color="accent">
<mat-label>Service Tags</mat-label>
- <mat-chip-grid #chipGrid aria-label="Fruit selection">
+ <mat-chip-grid #chipGrid>
<mat-chip-row
*ngFor="
let serviceTag of
deploymentConfiguration.desiredServiceTags
