From aea863ec18daebc46a24c73ed50c969bd4ac2f44 Mon Sep 17 00:00:00 2001 From: Dominik Riemer Date: Wed, 14 Aug 2024 10:57:36 +0200 Subject: [PATCH] feat(#3135): Extend asset view with labels and type (#3136) * feat(#3135): Extend asset view with labels and type * Remove stylesheet * Fix dependency issue * Remove comment --- .../tests/assetManagement/createAsset.spec.ts | 19 +-- .../src/lib/model/assets/asset.model.ts | 17 ++ .../src/lib/services/isa95-type.service.ts | 50 ++++++ .../platform-services/src/public-api.ts | 2 + .../basic-field-description.component.html | 32 ++++ .../basic-field-description.component.scss | 29 ++++ .../basic-field-description.component.ts | 35 +++++ .../components/sp-label/sp-label.component.ts | 19 +-- .../src/lib/services/colorization.service.ts | 31 ++++ .../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 | 27 ++++ .../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.ts | 126 +++++++++++++++ .../asset-link-item.component.html | 6 +- .../asset-link-item.component.scss | 1 - .../asset-link-item.component.ts | 35 ++--- .../asset-link-section.component.html | 40 +++++ .../asset-link-section.component.scss | 35 +++++ .../asset-link-section.component.ts | 50 ++++++ .../asset-details-panel.component.html | 102 ++---------- .../asset-details-panel.component.ts | 101 +----------- .../asset-details.component.html | 7 +- .../asset-details.component.scss | 7 +- .../asset-selection-panel.component.scss | 2 +- .../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 - .../assets/pipes/asset-type-filter.pipe.ts | 32 ++++ ...adapter-deployment-settings.component.html | 2 +- 37 files changed, 1047 insertions(+), 275 deletions(-) create mode 100644 ui/projects/streampipes/platform-services/src/lib/services/isa95-type.service.ts create mode 100644 ui/projects/streampipes/shared-ui/src/lib/components/basic-field-description/basic-field-description.component.html create mode 100644 ui/projects/streampipes/shared-ui/src/lib/components/basic-field-description/basic-field-description.component.scss create mode 100644 ui/projects/streampipes/shared-ui/src/lib/components/basic-field-description/basic-field-description.component.ts create mode 100644 ui/projects/streampipes/shared-ui/src/lib/services/colorization.service.ts create mode 100644 ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-basics/asset-details-basics.component.html create mode 100644 ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-basics/asset-details-basics.component.scss create mode 100644 ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-basics/asset-details-basics.component.ts create mode 100644 ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-basics/asset-details-labels/asset-details-labels.component.html create mode 100644 ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-basics/asset-details-labels/asset-details-labels.component.ts create mode 100644 ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-details-links.component.html create mode 100644 ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-details-links.component.ts rename ui/src/app/assets/components/asset-details/asset-details-panel/{ => asset-details-links/asset-link-section}/asset-link-item/asset-link-item.component.html (91%) rename ui/src/app/assets/components/asset-details/asset-details-panel/{ => asset-details-links/asset-link-section}/asset-link-item/asset-link-item.component.scss (98%) rename ui/src/app/assets/components/asset-details/asset-details-panel/{ => asset-details-links/asset-link-section}/asset-link-item/asset-link-item.component.ts (60%) create mode 100644 ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-section.component.html create mode 100644 ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-section.component.scss create mode 100644 ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-section.component.ts create mode 100644 ui/src/app/assets/pipes/asset-type-filter.pipe.ts diff --git a/ui/cypress/tests/assetManagement/createAsset.spec.ts b/ui/cypress/tests/assetManagement/createAsset.spec.ts index ad131c2631..e52d7b500c 100644 --- a/ui/cypress/tests/assetManagement/createAsset.spec.ts +++ b/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); 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/projects/streampipes/platform-services/src/lib/services/isa95-type.service.ts b/ui/projects/streampipes/platform-services/src/lib/services/isa95-type.service.ts new file mode 100644 index 0000000000..c291aa8f69 --- /dev/null +++ b/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()); + } +} 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 @@ + + +
+
+
{{ label }}
+
{{ description }}
+
+
+ +
+
diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/basic-field-description/basic-field-description.component.scss b/ui/projects/streampipes/shared-ui/src/lib/components/basic-field-description/basic-field-description.component.scss new file mode 100644 index 0000000000..d6d1ca303b --- /dev/null +++ b/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; +} diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/basic-field-description/basic-field-description.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/basic-field-description/basic-field-description.component.ts new file mode 100644 index 0000000000..51c95bb2e4 --- /dev/null +++ b/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'; +} 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..9176ea7ee1 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 @@ -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'; - } } diff --git a/ui/projects/streampipes/shared-ui/src/lib/services/colorization.service.ts b/ui/projects/streampipes/shared-ui/src/lib/services/colorization.service.ts new file mode 100644 index 0000000000..6e1c82d258 --- /dev/null +++ b/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'; + } +} 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 @@ + + +
+ +
+
+ + + + + + + + + + + + + + + + + + {{ isaType.label }} + + + + + + + +
+
+
diff --git a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-basics/asset-details-basics.component.scss b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-basics/asset-details-basics.component.scss new file mode 100644 index 0000000000..4492f86b7c --- /dev/null +++ b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-basics/asset-details-basics.component.scss @@ -0,0 +1,27 @@ +/*! + * 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. + * + */ + +.mat-button-toggle-group { + flex-wrap: wrap; + border: none; +} + +.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 @@ + + +
+ + + + {{ + label.label + }} + + + + + + @for (label of filteredLabels | async; track label) { + {{ label }} + } + + +
+
+ +
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 = {}; + + separatorKeysCodes: number[] = [ENTER, COMMA]; + labelCtrl = new FormControl(''); + filteredLabels: Observable; + allLabels: SpLabel[] = []; + labelsAvailable = false; + + @ViewChild('labelInput') labelInput: ElementRef; + + 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 @@ + + +
+ + +
+
+ + +
+
+
+ + +
+
+
+
diff --git a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-details-links.component.ts b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-details-links.component.ts new file mode 100644 index 0000000000..c56cf74786 --- /dev/null +++ b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-details-links.component.ts @@ -0,0 +1,126 @@ +/* + * 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, OnInit, Output } from '@angular/core'; +import { + AssetLink, + AssetLinkType, + GenericStorageService, + SpAsset, +} from '@streampipes/platform-services'; +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 { AssetConstants } from '../../../../constants/asset.constants'; + +@Component({ + selector: 'sp-asset-details-links-component', + templateUrl: './asset-details-links.component.html', +}) +export class AssetDetailsLinksComponent implements OnInit { + @Input() + asset: SpAsset; + + @Input() + editMode: boolean; + + @Output() + updateAssetEmitter: EventEmitter = new EventEmitter(); + + assetLinkTypes: AssetLinkType[] = []; + assetLinksLoaded = false; + + 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), + ); + this.assetLinksLoaded = true; + }); + } + + 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, createMode: boolean): void { + const index = !createMode + ? this.asset.assetLinks.indexOf(assetLink) + : -1; + 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.asset.assetLinks = [...this.asset.assetLinks]; + } + }); + } + + openCreateAssetLinkDialog(): void { + const assetLink: AssetLink = { + linkLabel: '', + linkType: 'data-view', + editingDisabled: false, + resourceId: '', + navigationActive: true, + queryHint: 'data-view', + }; + 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 @@
- {{ - currentAssetLinkType.linkIcon - }} + {{ assetLinkType.linkIcon }}
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 = + new EventEmitter(); @Output() - deleteAssetLinkEmitter: EventEmitter = new EventEmitter(); - - currentAssetLinkType: AssetLinkType; + deleteAssetLinkEmitter: EventEmitter = + new EventEmitter(); 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 @@ + + +
+
{{ assetLinkType.linkLabel }}
+
+ + +
+
diff --git a/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-section.component.scss b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-section.component.scss new file mode 100644 index 0000000000..6c7baa919a --- /dev/null +++ b/ui/src/app/assets/components/asset-details/asset-details-panel/asset-details-links/asset-link-section/asset-link-section.component.scss @@ -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. + * + */ + +.section-header { + font-weight: bold; + margin-bottom: 10px; + color: var(--color-default-text); +} + +.asset-section { + margin-bottom: 10px; + margin-top: 10px; + padding: 10px; + border: 1px solid var(--color-bg-2); +} + +.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 = + new EventEmitter(); + + 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 @@ ~ --> -
- - - -
- - Name - - - - Description - - - - ID - - -
- - - -
- - -
-
-
+ + + - - -
-
- + + +
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 = new EventEmitter(); - - 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 @@
- + ; + dataSource: MatTableDataSource = + new MatTableDataSource(); 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( - 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 @@ {{ - file.originalFilename + file.filename }} 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" > Deselect All @@ -117,11 +117,11 @@
Deselect All @@ -281,11 +281,11 @@
- {{ element.originalFilename }} + {{ element.filename }}
@@ -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" > Deselect All @@ -385,11 +385,11 @@
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 @@ > Service Tags - +