This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new 9de1159151 refactor: Migrate assets to control flow syntax (#3993)
9de1159151 is described below
commit 9de1159151d8f48527b20817c809f8d9a9b7e494
Author: Philipp Zehnder <[email protected]>
AuthorDate: Fri Nov 28 15:27:45 2025 +0100
refactor: Migrate assets to control flow syntax (#3993)
---
.../asset-details-basics.component.html | 74 +-
.../asset-details-labels.component.html | 192 ++---
.../asset-details-site.component.html | 80 ++-
.../asset-location/asset-location.component.html | 64 +-
.../asset-details-links.component.html | 106 +--
.../asset-link-item/asset-link-item.component.html | 71 +-
.../asset-link-section.component.html | 71 +-
.../edit-asset/asset-details.component.html | 175 ++---
.../asset-selection-panel.component.html | 265 +++----
.../view-asset-basics.component.html | 87 +--
.../view-asset/view-asset.component.html | 132 ++--
.../asset-overview/asset-overview.component.html | 99 +--
.../edit-asset-link-dialog.component.html | 455 ++++++------
.../manage-asset-links-dialog.component.html | 778 +++++++++++----------
14 files changed, 1375 insertions(+), 1274 deletions(-)
diff --git
a/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-basics/asset-details-basics.component.html
b/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-basics/asset-details-basics.component.html
index 6315e08ed2..07f6574559 100644
---
a/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-basics/asset-details-basics.component.html
+++
b/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-basics/asset-details-basics.component.html
@@ -1,20 +1,20 @@
<!--
- ~ 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.
- ~
- -->
+~ 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
@@ -90,12 +90,13 @@
[(ngModel)]="asset.assetType.isa95AssetType"
aria-label="Asset Type"
>
- <mat-option
- *ngFor="let isaType of isa95Types"
- [value]="isaType.type"
- [attr.data-cy]="'option-' + isaType.type"
- >{{ isaType.label }}
- </mat-option>
+ @for (isaType of isa95Types; track isaType) {
+ <mat-option
+ [value]="isaType.type"
+ [attr.data-cy]="'option-' + isaType.type"
+ >{{ isaType.label }}
+ </mat-option>
+ }
</mat-select>
</mat-form-field>
</sp-basic-field-description>
@@ -112,21 +113,22 @@
>
</sp-asset-details-labels>
</sp-basic-field-description>
- <sp-basic-field-description
- *ngIf="rootNode"
- fxFlex="100"
- descriptionPanelWidth="30"
- label="Sites"
- description="Assign a location (site and area) to this asset"
- >
- <sp-asset-details-site
- class="w-100"
- [asset]="asset"
- [sites]="sites"
- [editMode]="editMode"
+ @if (rootNode) {
+ <sp-basic-field-description
+ fxFlex="100"
+ descriptionPanelWidth="30"
+ label="Sites"
+ description="Assign a location (site and area) to this
asset"
>
- </sp-asset-details-site>
- </sp-basic-field-description>
+ <sp-asset-details-site
+ class="w-100"
+ [asset]="asset"
+ [sites]="sites"
+ [editMode]="editMode"
+ >
+ </sp-asset-details-site>
+ </sp-basic-field-description>
+ }
</div>
</div>
</div>
diff --git
a/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-basics/asset-details-labels/asset-details-labels.component.html
b/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-basics/asset-details-labels/asset-details-labels.component.html
index 0566e1a7a4..04953ed65b 100644
---
a/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-basics/asset-details-labels/asset-details-labels.component.html
+++
b/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-basics/asset-details-labels/asset-details-labels.component.html
@@ -1,98 +1,108 @@
<!--
- ~ 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.
- ~
- -->
+~ 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">
- <div fxLayout="row" fxLayoutGap="15px" fxLayoutAlign="start center">
- <div fxFlex fxLayoutAlign="start center">
- <mat-form-field
- class="w-100"
- *ngIf="labelsAvailable"
- color="accent"
- subscriptSizing="dynamic"
- [disabled]="allLabels.length === 0"
- >
- <mat-chip-grid #chipGrid aria-label="Labels">
- <mat-chip-row
- (removed)="remove(label)"
- *ngFor="let label of labels"
- [ngStyle]="{ background: label.color }"
+@if (editMode) {
+ <div>
+ <div fxLayout="row" fxLayoutGap="15px" fxLayoutAlign="start center">
+ <div fxFlex fxLayoutAlign="start center">
+ @if (labelsAvailable) {
+ <mat-form-field
+ class="w-100"
+ color="accent"
+ subscriptSizing="dynamic"
+ [disabled]="allLabels.length === 0"
>
- <span
- [ngStyle]="{ color: labelTextColors[label._id] }"
- >{{ label.label }}</span
+ <mat-chip-grid #chipGrid aria-label="Labels">
+ @for (label of labels; track label) {
+ <mat-chip-row
+ (removed)="remove(label)"
+ [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]="
+ allLabels.length === 0
+ ? 'No labels available - Click \'Manage
Labels\''
+ : 'Click to add label'
+ "
+ data-cy="asset-label-input"
+ #labelInput
+ [formControl]="labelCtrl"
+ [matChipInputFor]="chipGrid"
+ [matAutocomplete]="auto"
+
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+ (matChipInputTokenEnd)="add($event)"
+ [disabled]="allLabels.length === 0"
+ />
+ <mat-autocomplete
+ #auto="matAutocomplete"
+ (optionSelected)="selected($event)"
>
- <button
- matChipRemove
- [ngStyle]="{ color: labelTextColors[label._id] }"
- >
- <mat-icon>cancel</mat-icon>
- </button>
- </mat-chip-row>
- </mat-chip-grid>
- <input
- [placeholder]="
- allLabels.length === 0
- ? 'No labels available - Click \'Manage Labels\''
- : 'Click to add label'
- "
- data-cy="asset-label-input"
- #labelInput
- [formControl]="labelCtrl"
- [matChipInputFor]="chipGrid"
- [matAutocomplete]="auto"
- [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
- (matChipInputTokenEnd)="add($event)"
- [disabled]="allLabels.length === 0"
- />
- <mat-autocomplete
- #auto="matAutocomplete"
- (optionSelected)="selected($event)"
+ @for (
+ label of filteredLabels | async;
+ track label
+ ) {
+ <mat-option
+ [value]="label._id"
+ [attr.data-cy]="'option-' + label.label"
+ >{{ label.label }}</mat-option
+ >
+ }
+ </mat-autocomplete>
+ </mat-form-field>
+ }
+ </div>
+ <div fxLayoutAlign="start center">
+ <button
+ mat-flat-button
+ color="accent"
+ [routerLink]="['/configuration/labels']"
>
- @for (label of filteredLabels | async; track label) {
- <mat-option
- [value]="label._id"
- [attr.data-cy]="'option-' + label.label"
- >{{ label.label }}</mat-option
- >
- }
- </mat-autocomplete>
- </mat-form-field>
- </div>
- <div fxLayoutAlign="start center">
- <button
- mat-flat-button
- color="accent"
- [routerLink]="['/configuration/labels']"
- >
- Manage Labels
- </button>
+ Manage Labels
+ </button>
+ </div>
</div>
</div>
-</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>
+}
+@if (!editMode && labelsAvailable) {
+ <div fxLayout="row wrap" fxLayoutGap="10px">
+ @for (label of labels; track label) {
+ <sp-label
+ [labelText]="label.label"
+ [small]="true"
+ [labelBackground]="label.color"
+ ></sp-label>
+ }
+ </div>
+}
diff --git
a/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-basics/asset-details-site/asset-details-site.component.html
b/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-basics/asset-details-site/asset-details-site.component.html
index 5b3f328cc1..dfd9be0f39 100644
---
a/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-basics/asset-details-site/asset-details-site.component.html
+++
b/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-basics/asset-details-site/asset-details-site.component.html
@@ -1,20 +1,20 @@
<!--
- ~ 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.
- ~
- -->
+~ 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 fxLayout="column">
<div fxLayout="row" fxLayoutGap="15px" fxLayoutAlign="start center">
@@ -30,13 +30,14 @@
[(ngModel)]="asset.assetSite.siteId"
(selectionChange)="handleLocationChange($event)"
>
- <mat-option
- *ngFor="let site of sites"
- [attr.data-cy]="'option-' + site.label"
- [value]="site._id"
- >
- {{ site.label }}
- </mat-option>
+ @for (site of sites; track site) {
+ <mat-option
+ [attr.data-cy]="'option-' + site.label"
+ [value]="site._id"
+ >
+ {{ site.label }}
+ </mat-option>
+ }
</mat-select>
</mat-form-field>
</div>
@@ -51,18 +52,23 @@
</div>
</div>
- <mat-form-field color="accent" class="mt-10 w-100" *ngIf="currentSite">
- <mat-label>Area</mat-label>
- <mat-select [disabled]="!editMode" [(ngModel)]="asset.assetSite.area">
- <mat-option *ngFor="let area of currentSite.areas" [value]="area">
- {{ area }}
- </mat-option>
- </mat-select>
- </mat-form-field>
- <sp-asset-location
- [asset]="asset"
- [editMode]="editMode"
- *ngIf="asset.assetSite?.siteId"
- >
- </sp-asset-location>
+ @if (currentSite) {
+ <mat-form-field color="accent" class="mt-10 w-100">
+ <mat-label>Area</mat-label>
+ <mat-select
+ [disabled]="!editMode"
+ [(ngModel)]="asset.assetSite.area"
+ >
+ @for (area of currentSite.areas; track area) {
+ <mat-option [value]="area">
+ {{ area }}
+ </mat-option>
+ }
+ </mat-select>
+ </mat-form-field>
+ }
+ @if (asset.assetSite?.siteId) {
+ <sp-asset-location [asset]="asset" [editMode]="editMode">
+ </sp-asset-location>
+ }
</div>
diff --git
a/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-basics/asset-details-site/asset-location/asset-location.component.html
b/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-basics/asset-details-site/asset-location/asset-location.component.html
index 64443f8483..277a628790 100644
---
a/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-basics/asset-details-site/asset-location/asset-location.component.html
+++
b/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-basics/asset-details-site/asset-location/asset-location.component.html
@@ -1,34 +1,38 @@
<!--
- ~ 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.
- ~
- -->
+~ 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" *ngIf="locationConfig && locationConfig.locationEnabled">
- <mat-checkbox
- [disabled]="!editMode"
- [(ngModel)]="asset.assetSite.hasExactLocation"
- >
- Add exact location
- </mat-checkbox>
- <div *ngIf="asset.assetSite.hasExactLocation">
- <sp-single-marker-map
- [readonly]="!editMode"
- [assetLocation]="asset.assetSite.location"
- [locationConfig]="locationConfig"
+@if (locationConfig && locationConfig.locationEnabled) {
+ <div fxFlex="100">
+ <mat-checkbox
+ [disabled]="!editMode"
+ [(ngModel)]="asset.assetSite.hasExactLocation"
>
- </sp-single-marker-map>
+ Add exact location
+ </mat-checkbox>
+ @if (asset.assetSite.hasExactLocation) {
+ <div>
+ <sp-single-marker-map
+ [readonly]="!editMode"
+ [assetLocation]="asset.assetSite.location"
+ [locationConfig]="locationConfig"
+ >
+ </sp-single-marker-map>
+ </div>
+ }
</div>
-</div>
+}
diff --git
a/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-links/asset-details-links.component.html
b/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-links/asset-details-links.component.html
index 491fa21b02..2e531ca0dd 100644
---
a/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-links/asset-details-links.component.html
+++
b/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-links/asset-details-links.component.html
@@ -1,20 +1,20 @@
<!--
- ~ 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.
- ~
- -->
+~ 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
@@ -28,43 +28,45 @@
fxFlex="100"
fxLayoutGap="10px"
>
- <button
- [disabled]="!assetLinksLoaded"
- mat-flat-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-flat-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
- [assetLinkType]="assetLinkType"
- [asset]="asset"
- [editMode]="editMode"
- (openEditAssetLinkEmitter)="
- openEditAssetLinkDialog($event, false)
- "
+ @if (editMode) {
+ <button
+ [disabled]="!assetLinksLoaded"
+ mat-flat-button
+ color="accent"
+ (click)="openManageAssetLinksDialog()"
+ data-cy="assets-manage-links-button"
>
- </sp-asset-link-section>
- </div>
+ <i class="material-icons">add</i
+ ><span> Manage links</span>
+ </button>
+ }
+ @if (editMode) {
+ <button
+ [disabled]="!assetLinksLoaded"
+ mat-flat-button
+ color="accent"
+ (click)="openCreateAssetLinkDialog()"
+ >
+ <i class="material-icons">add</i><span> Add
link</span>
+ </button>
+ }
</div>
+ @if (assetLinkTypes) {
+ <div fxLayout="column" fxFlex="100" class="mt-10">
+ @for (assetLinkType of assetLinkTypes; track assetLinkType) {
+ <div>
+ <sp-asset-link-section
+ [assetLinkType]="assetLinkType"
+ [asset]="asset"
+ [editMode]="editMode"
+ (openEditAssetLinkEmitter)="
+ openEditAssetLinkDialog($event, false)
+ "
+ >
+ </sp-asset-link-section>
+ </div>
+ }
+ </div>
+ }
</div>
</div>
diff --git
a/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-links/asset-link-section/asset-link-item/asset-link-item.component.html
b/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-links/asset-link-section/asset-link-item/asset-link-item.component.html
index 5f5249522e..b6e257c5ab 100644
---
a/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-links/asset-link-section/asset-link-item/asset-link-item.component.html
+++
b/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-links/asset-link-section/asset-link-item/asset-link-item.component.html
@@ -1,20 +1,20 @@
<!--
- ~ 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.
- ~
- -->
+~ 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="column">
<div fxLayout="row" fxLayoutGap="10px">
@@ -32,30 +32,21 @@
</div>
<div fxFlex></div>
<div fxLayoutAlign="end center">
- <button
- mat-icon-button
- color="accent"
- (click)="openLink()"
- *ngIf="assetLink.navigationActive"
- >
- <i class="material-icons">link</i>
- </button>
- <button
- mat-icon-button
- color="accent"
- (click)="editLink()"
- *ngIf="editMode"
- >
- <i class="material-icons">edit</i>
- </button>
- <button
- mat-icon-button
- color="accent"
- (click)="deleteLink()"
- *ngIf="editMode"
- >
- <i class="material-icons">delete</i>
- </button>
+ @if (assetLink.navigationActive) {
+ <button mat-icon-button color="accent" (click)="openLink()">
+ <i class="material-icons">link</i>
+ </button>
+ }
+ @if (editMode) {
+ <button mat-icon-button color="accent" (click)="editLink()">
+ <i class="material-icons">edit</i>
+ </button>
+ }
+ @if (editMode) {
+ <button mat-icon-button color="accent" (click)="deleteLink()">
+ <i class="material-icons">delete</i>
+ </button>
+ }
</div>
</div>
</div>
diff --git
a/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-links/asset-link-section/asset-link-section.component.html
b/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-links/asset-link-section/asset-link-section.component.html
index 8d936f3f62..0c9715cb86 100644
---
a/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-links/asset-link-section/asset-link-section.component.html
+++
b/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-links/asset-link-section/asset-link-section.component.html
@@ -1,40 +1,43 @@
<!--
- ~ 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.
- ~
- -->
+~ 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
- [assetLink]="link"
- [assetLinkType]="assetLinkType"
- [editMode]="editMode"
- (openEditAssetLinkEmitter)="openEditAssetLinkEmitter.emit($event)"
- (deleteAssetLinkEmitter)="deleteAssetLink($event)"
- class="asset-link-item"
+ @for (
+ link of asset.assetLinks | assetTypeFilter: assetLinkType.linkType;
+ track link
+ ) {
+ <div
+ fxLayout="column"
+ class="asset-section-entry"
+ data-cy="linked-resources-list"
>
- </sp-asset-link-item>
- </div>
+ <sp-asset-link-item
+ [assetLink]="link"
+ [assetLinkType]="assetLinkType"
+ [editMode]="editMode"
+ (openEditAssetLinkEmitter)="
+ openEditAssetLinkEmitter.emit($event)
+ "
+ (deleteAssetLinkEmitter)="deleteAssetLink($event)"
+ class="asset-link-item"
+ >
+ </sp-asset-link-item>
+ </div>
+ }
</div>
diff --git
a/ui/src/app/assets/components/asset-details/edit-asset/asset-details.component.html
b/ui/src/app/assets/components/asset-details/edit-asset/asset-details.component.html
index d78ee9bbf4..b0eac60d26 100644
---
a/ui/src/app/assets/components/asset-details/edit-asset/asset-details.component.html
+++
b/ui/src/app/assets/components/asset-details/edit-asset/asset-details.component.html
@@ -1,94 +1,99 @@
<!--
- ~ 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.
- ~
- -->
+~ 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.
+~
+-->
-<sp-asset-selection-panel
- *ngIf="asset"
- [editMode]="true"
- [assetModel]="asset"
- [selectedAsset]="selectedAsset"
- (selectedAssetEmitter)="applySelectedAsset($event)"
->
- <sp-basic-view
- [showBackLink]="true"
- [backLinkTarget]="['assets']"
- [padding]="false"
+@if (asset) {
+ <sp-asset-selection-panel
+ [editMode]="true"
+ [assetModel]="asset"
+ [selectedAsset]="selectedAsset"
+ (selectedAssetEmitter)="applySelectedAsset($event)"
>
- <div
- nav
- fxFlex="100"
- fxLayoutAlign="start center"
- fxLayout="row"
- class="pl-10"
+ <sp-basic-view
+ [showBackLink]="true"
+ [backLinkTarget]="['assets']"
+ [padding]="false"
>
- <div fxLayout="row" fxLayoutAlign="start center">
- <div fxFlex>
- <button
- mat-button
- mat-flat-button
- data-cy="save-asset"
- color="accent"
- (click)="saveAsset()"
+ <div
+ nav
+ fxFlex="100"
+ fxLayoutAlign="start center"
+ fxLayout="row"
+ class="pl-10"
+ >
+ <div fxLayout="row" fxLayoutAlign="start center">
+ <div fxFlex>
+ <button
+ mat-button
+ mat-flat-button
+ data-cy="save-asset"
+ color="accent"
+ (click)="saveAsset()"
+ >
+ <i class="material-icons">save</i
+ ><span> Save</span>
+ </button>
+ </div>
+ <div
+ fxLayout="row"
+ class="navbar-margin"
+ fxLayoutAlign="end center"
>
- <i class="material-icons">save</i
- ><span> Save</span>
- </button>
+ <nav mat-tab-nav-bar color="accent">
+ <a
+ mat-tab-link
+ data-cy="basic-tab"
+ [active]="activeTab === 'basic'"
+ (click)="activeTab = 'basic'"
+ >Basics</a
+ >
+ <a
+ mat-tab-link
+ data-cy="asset-links-tab"
+ [active]="activeTab === 'asset-links'"
+ (click)="activeTab = 'asset-links'"
+ >Asset Links</a
+ >
+ </nav>
+ </div>
</div>
- <div
- fxLayout="row"
- class="navbar-margin"
- fxLayoutAlign="end center"
- >
- <nav mat-tab-nav-bar color="accent">
- <a
- mat-tab-link
- data-cy="basic-tab"
- [active]="activeTab === 'basic'"
- (click)="activeTab = 'basic'"
- >Basics</a
+ <div fxFlex fxLayout="row" fxLayoutAlign="end center"></div>
+ </div>
+ @if (asset) {
+ <div fxFlex="100" fxLayout="column">
+ @if (activeTab === 'basic') {
+ <sp-asset-details-basics
+ [asset]="selectedAsset"
+ [sites]="sites"
+ [rootNode]="rootNode"
+ [editMode]="true"
>
- <a
- mat-tab-link
- data-cy="asset-links-tab"
- [active]="activeTab === 'asset-links'"
- (click)="activeTab = 'asset-links'"
- >Asset Links</a
+ </sp-asset-details-basics>
+ }
+ @if (activeTab === 'asset-links') {
+ <sp-asset-details-links
+ [asset]="selectedAsset"
+ [editMode]="true"
+ (updateAssetEmitter)="updateSelected()"
>
- </nav>
+ </sp-asset-details-links>
+ }
</div>
- </div>
- <div fxFlex fxLayout="row" fxLayoutAlign="end center"></div>
- </div>
- <div fxFlex="100" fxLayout="column" *ngIf="asset">
- <sp-asset-details-basics
- *ngIf="activeTab === 'basic'"
- [asset]="selectedAsset"
- [sites]="sites"
- [rootNode]="rootNode"
- [editMode]="true"
- >
- </sp-asset-details-basics>
- <sp-asset-details-links
- *ngIf="activeTab === 'asset-links'"
- [asset]="selectedAsset"
- [editMode]="true"
- (updateAssetEmitter)="updateSelected()"
- >
- </sp-asset-details-links>
- </div>
- </sp-basic-view>
-</sp-asset-selection-panel>
+ }
+ </sp-basic-view>
+ </sp-asset-selection-panel>
+}
diff --git
a/ui/src/app/assets/components/asset-details/edit-asset/asset-selection-panel/asset-selection-panel.component.html
b/ui/src/app/assets/components/asset-details/edit-asset/asset-selection-panel/asset-selection-panel.component.html
index 781b430c60..4d6058e7ca 100644
---
a/ui/src/app/assets/components/asset-details/edit-asset/asset-selection-panel/asset-selection-panel.component.html
+++
b/ui/src/app/assets/components/asset-details/edit-asset/asset-selection-panel/asset-selection-panel.component.html
@@ -1,150 +1,161 @@
<!--
- ~ 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.
- ~
- -->
+~ 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 fxLayout="row">
- <div
- fxFlex="20"
- fxLayout="column"
- class="designer-panel-content"
- *ngIf="assetModel"
- >
- <sp-basic-view [showBackLink]="false">
- <div nav fxLayout="row">
- <h4 class="ml-5">Asset Hierarchy</h4>
- </div>
- <div fxFlex="100" fxLayout="column">
- <div fxFlex fxLayout="column" class="designer-panel-config">
- <mat-tree
- [dataSource]="dataSource"
- [treeControl]="treeControl"
- class="sp-tree"
- #tree
- >
- <mat-tree-node
- *matTreeNodeDef="let node"
- matTreeNodeToggle
+ @if (assetModel) {
+ <div fxFlex="20" fxLayout="column" class="designer-panel-content">
+ <sp-basic-view [showBackLink]="false">
+ <div nav fxLayout="row">
+ <h4 class="ml-5">Asset Hierarchy</h4>
+ </div>
+ <div fxFlex="100" fxLayout="column">
+ <div fxFlex fxLayout="column"
class="designer-panel-config">
+ <mat-tree
+ [dataSource]="dataSource"
+ [treeControl]="treeControl"
+ class="sp-tree"
+ #tree
>
- <div
- [ngClass]="
- node.assetId === selectedAsset.assetId
- ? 'asset-node selected-node'
- : 'asset-node'
- "
- fxLayout="row"
- fxFlex="100"
- [attr.data-cy]="
- 'select-asset-' + node.assetName
- "
- (click)="selectNode(node, false)"
+ <mat-tree-node
+ *matTreeNodeDef="let node"
+ matTreeNodeToggle
>
- <span fxLayoutAlign="end center"
class="ml-5">{{
- node.assetName
- }}</span>
<div
- fxLayoutAlign="end center"
- fxFlex
- *ngIf="editMode"
+ [ngClass]="
+ node.assetId === selectedAsset.assetId
+ ? 'asset-node selected-node'
+ : 'asset-node'
+ "
+ fxLayout="row"
+ fxFlex="100"
+ [attr.data-cy]="
+ 'select-asset-' + node.assetName
+ "
+ (click)="selectNode(node, false)"
>
+ <span
+ fxLayoutAlign="end center"
+ class="ml-5"
+ >{{ node.assetName }}</span
+ >
+ @if (editMode) {
+ <div fxLayoutAlign="end center" fxFlex>
+ <button
+ mat-icon-button
+ [attr.data-cy]="
+ 'add-asset-' +
+ node.assetName
+ "
+ (click)="addAsset(node)"
+ color="accent"
+ >
+ <i class="material-icons"
+ >add</i
+ >
+ </button>
+ <button
+ mat-icon-button
+ (click)="deleteAsset(node)"
+ color="accent"
+ >
+ <i class="material-icons"
+ >delete</i
+ >
+ </button>
+ </div>
+ }
+ </div>
+ </mat-tree-node>
+ <mat-nested-tree-node
+ *matTreeNodeDef="let node; when: hasChild"
+ >
+ <div class="mat-tree-node">
<button
mat-icon-button
+ matTreeNodeToggle
[attr.data-cy]="
- 'add-asset-' + node.assetName
+ 'button-' + node.nodeName
+ "
+ [attr.aria-label]="
+ 'Toggle ' + node.nodeName
"
- (click)="addAsset(node)"
- color="accent"
>
- <i class="material-icons">add</i>
+ <mat-icon class="mat-icon-rtl-mirror">
+ {{
+ treeControl.isExpanded(node)
+ ? 'expand_more'
+ : 'chevron_right'
+ }}
+ </mat-icon>
</button>
- <button
- mat-icon-button
- (click)="deleteAsset(node)"
- color="accent"
+ <div
+ [ngClass]="
+ node.assetId ===
+ selectedAsset.assetId
+ ? 'asset-node selected-node'
+ : 'asset-node'
+ "
+ fxLayout="row"
+ fxFlex="100"
+ (click)="selectNode(node, true)"
>
- <i class="material-icons">delete</i>
- </button>
+ <span fxLayoutAlign="start center">{{
+ node.assetName
+ }}</span>
+ @if (editMode) {
+ <div
+ fxLayoutAlign="end center"
+ fxFlex
+ >
+ <button
+ mat-icon-button
+ (click)="addAsset(node)"
+ [attr.data-cy]="
+ 'add-asset-' +
+ node.assetName
+ "
+ color="accent"
+ >
+ <i class="material-icons"
+ >add</i
+ >
+ </button>
+ </div>
+ }
+ </div>
</div>
- </div>
- </mat-tree-node>
- <mat-nested-tree-node
- *matTreeNodeDef="let node; when: hasChild"
- >
- <div class="mat-tree-node">
- <button
- mat-icon-button
- matTreeNodeToggle
- [attr.data-cy]="'button-' + node.nodeName"
- [attr.aria-label]="
- 'Toggle ' + node.nodeName
- "
- >
- <mat-icon class="mat-icon-rtl-mirror">
- {{
- treeControl.isExpanded(node)
- ? 'expand_more'
- : 'chevron_right'
- }}
- </mat-icon>
- </button>
<div
- [ngClass]="
- node.assetId === selectedAsset.assetId
- ? 'asset-node selected-node'
- : 'asset-node'
+ [class.sp-tree-invisible]="
+ !treeControl.isExpanded(node)
"
- fxLayout="row"
- fxFlex="100"
- (click)="selectNode(node, true)"
+ role="group"
>
- <span fxLayoutAlign="start center">{{
- node.assetName
- }}</span>
- <div
- fxLayoutAlign="end center"
- fxFlex
- *ngIf="editMode"
- >
- <button
- mat-icon-button
- (click)="addAsset(node)"
- [attr.data-cy]="
- 'add-asset-' + node.assetName
- "
- color="accent"
- >
- <i class="material-icons">add</i>
- </button>
- </div>
+ <ng-container
+ matTreeNodeOutlet
+ ></ng-container>
</div>
- </div>
- <div
- [class.sp-tree-invisible]="
- !treeControl.isExpanded(node)
- "
- role="group"
- >
- <ng-container matTreeNodeOutlet></ng-container>
- </div>
- </mat-nested-tree-node>
- </mat-tree>
+ </mat-nested-tree-node>
+ </mat-tree>
+ </div>
</div>
- </div>
- </sp-basic-view>
- </div>
+ </sp-basic-view>
+ </div>
+ }
<div fxFlex>
<ng-content></ng-content>
</div>
diff --git
a/ui/src/app/assets/components/asset-details/view-asset/view-asset-basics/view-asset-basics.component.html
b/ui/src/app/assets/components/asset-details/view-asset/view-asset-basics/view-asset-basics.component.html
index d61f3112f8..916c7139bc 100644
---
a/ui/src/app/assets/components/asset-details/view-asset/view-asset-basics/view-asset-basics.component.html
+++
b/ui/src/app/assets/components/asset-details/view-asset/view-asset-basics/view-asset-basics.component.html
@@ -1,20 +1,20 @@
<!--
- ~ 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.
- ~
- -->
+~ 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 fxLayout="column">
<div class="asset-title">{{ rootAsset.assetName }}</div>
@@ -37,32 +37,37 @@
</div>
</div>
- <div
- fxLayout="column"
- *ngIf="selectedAsset.assetId !== rootAsset.assetId"
- class="selected-asset-metadata mt-20"
- >
- <div class="selected-asset-title">{{ selectedAsset.assetName }}</div>
- <div class="selected-asset-description">
- {{ selectedAsset.assetDescription }}
- </div>
- <div fxLayout="column" class="asset-metadata mt-20">
- <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start
center">
- <mat-icon color="primary">precision_manufacturing</mat-icon>
- <div class="asset-description">{{ selectedAssetType }}</div>
+ @if (selectedAsset.assetId !== rootAsset.assetId) {
+ <div fxLayout="column" class="selected-asset-metadata mt-20">
+ <div class="selected-asset-title">
+ {{ selectedAsset.assetName }}
+ </div>
+ <div class="selected-asset-description">
+ {{ selectedAsset.assetDescription }}
</div>
- <div
- fxLayout="row"
- fxLayoutGap="10px"
- fxLayoutAlign="start center"
- *ngIf="selectedAsset.labelIds?.length > 0"
- >
- <mat-icon color="primary">sell</mat-icon>
- <sp-view-asset-labels
- [asset]="selectedAsset"
- size="small"
- ></sp-view-asset-labels>
+ <div fxLayout="column" class="asset-metadata mt-20">
+ <div
+ fxLayout="row"
+ fxLayoutGap="10px"
+ fxLayoutAlign="start center"
+ >
+ <mat-icon
color="primary">precision_manufacturing</mat-icon>
+ <div class="asset-description">{{ selectedAssetType
}}</div>
+ </div>
+ @if (selectedAsset.labelIds?.length > 0) {
+ <div
+ fxLayout="row"
+ fxLayoutGap="10px"
+ fxLayoutAlign="start center"
+ >
+ <mat-icon color="primary">sell</mat-icon>
+ <sp-view-asset-labels
+ [asset]="selectedAsset"
+ size="small"
+ ></sp-view-asset-labels>
+ </div>
+ }
</div>
</div>
- </div>
+ }
</div>
diff --git
a/ui/src/app/assets/components/asset-details/view-asset/view-asset.component.html
b/ui/src/app/assets/components/asset-details/view-asset/view-asset.component.html
index 1379adc92c..35474eca7f 100644
---
a/ui/src/app/assets/components/asset-details/view-asset/view-asset.component.html
+++
b/ui/src/app/assets/components/asset-details/view-asset/view-asset.component.html
@@ -1,71 +1,75 @@
<!--
- ~ 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.
- ~
- -->
+~ 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.
+~
+-->
-<sp-asset-selection-panel
- *ngIf="asset"
- [editMode]="false"
- [assetModel]="asset"
- [selectedAsset]="selectedAsset"
- (selectedAssetEmitter)="applySelectedAsset($event)"
->
- <sp-basic-view
- [showBackLink]="true"
- [backLinkTarget]="['assets']"
- [padding]="false"
- fxFlex="100"
+@if (asset) {
+ <sp-asset-selection-panel
+ [editMode]="false"
+ [assetModel]="asset"
+ [selectedAsset]="selectedAsset"
+ (selectedAssetEmitter)="applySelectedAsset($event)"
>
- @if (selectedAsset) {
- <div fxLayout="row" fxFlex="100">
- <div fxFlex="66" fxLayoutAlign="start start"
class="asset-info">
- <div fxLayout="column" class="w-100 ml-20">
- <div fxLayout="row" fxFlex="100">
- <sp-view-asset-basics
- [rootAsset]="asset"
- [sites]="sites"
+ <sp-basic-view
+ [showBackLink]="true"
+ [backLinkTarget]="['assets']"
+ [padding]="false"
+ fxFlex="100"
+ >
+ @if (selectedAsset) {
+ <div fxLayout="row" fxFlex="100">
+ <div
+ fxFlex="66"
+ fxLayoutAlign="start start"
+ class="asset-info"
+ >
+ <div fxLayout="column" class="w-100 ml-20">
+ <div fxLayout="row" fxFlex="100">
+ <sp-view-asset-basics
+ [rootAsset]="asset"
+ [sites]="sites"
+ [selectedAsset]="selectedAsset"
+ fxFlex="100"
+ ></sp-view-asset-basics>
+ @if (asset.labelIds?.length > 0) {
+ <sp-view-asset-labels
+ [asset]="asset"
+ fxFlex
+ ></sp-view-asset-labels>
+ }
+ </div>
+ <sp-view-asset-links
[selectedAsset]="selectedAsset"
- fxFlex="100"
- ></sp-view-asset-basics>
-
- @if (asset.labelIds?.length > 0) {
- <sp-view-asset-labels
- [asset]="asset"
- fxFlex
- ></sp-view-asset-labels>
- }
+ class="mt-20"
+ >
+ </sp-view-asset-links>
</div>
- <sp-view-asset-links
- [selectedAsset]="selectedAsset"
- class="mt-20"
- >
- </sp-view-asset-links>
+ </div>
+ <div fxFlex="33">
+ @if (locationConfig && asset.assetSite?.location) {
+ <sp-single-marker-map
+ [mapHeight]="'100%'"
+ [locationConfig]="locationConfig"
+ [readonly]="true"
+ [assetLocation]="asset.assetSite.location"
+ ></sp-single-marker-map>
+ }
</div>
</div>
- <div fxFlex="33">
- @if (locationConfig && asset.assetSite?.location) {
- <sp-single-marker-map
- [mapHeight]="'100%'"
- [locationConfig]="locationConfig"
- [readonly]="true"
- [assetLocation]="asset.assetSite.location"
- ></sp-single-marker-map>
- }
- </div>
- </div>
- }
- </sp-basic-view>
-</sp-asset-selection-panel>
+ }
+ </sp-basic-view>
+ </sp-asset-selection-panel>
+}
diff --git
a/ui/src/app/assets/components/asset-overview/asset-overview.component.html
b/ui/src/app/assets/components/asset-overview/asset-overview.component.html
index 06711cff8e..e335f02302 100644
--- a/ui/src/app/assets/components/asset-overview/asset-overview.component.html
+++ b/ui/src/app/assets/components/asset-overview/asset-overview.component.html
@@ -1,20 +1,20 @@
<!--
- ~ 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.
- ~
- -->
+~ 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.
+~
+-->
<sp-basic-view [showBackLink]="false" [padding]="true">
<div
nav
@@ -23,16 +23,17 @@
fxLayout="row"
class="pl-10"
>
- <button
- *ngIf="hasWritePrivilege"
- mat-button
- mat-flat-button
- color="accent"
- data-cy="create-new-asset-button"
- (click)="createNewAsset()"
- >
- <i class="material-icons">add</i> New asset
- </button>
+ @if (hasWritePrivilege) {
+ <button
+ mat-button
+ mat-flat-button
+ color="accent"
+ data-cy="create-new-asset-button"
+ (click)="createNewAsset()"
+ >
+ <i class="material-icons">add</i> New asset
+ </button>
+ }
<div fxFlex fxLayout="row" fxLayoutAlign="end center">
<button
mat-icon-button
@@ -95,16 +96,19 @@
<mat-icon>visibility</mat-icon>
<span>{{ 'Show' | translate }}</span>
</button>
- <button
- *ngIf="hasWritePrivilege"
- mat-menu-item
- data-cy="edit-asset-button"
- [attr.data-cy]="'edit-asset-' + element.assetName"
- (click)="goToDetailsView(element, true)"
- >
- <mat-icon>edit</mat-icon>
- <span>{{ 'Edit' | translate }}</span>
- </button>
+ @if (hasWritePrivilege) {
+ <button
+ mat-menu-item
+ data-cy="edit-asset-button"
+ [attr.data-cy]="
+ 'edit-asset-' + element.assetName
+ "
+ (click)="goToDetailsView(element, true)"
+ >
+ <mat-icon>edit</mat-icon>
+ <span>{{ 'Edit' | translate }}</span>
+ </button>
+ }
<button
mat-menu-item
data-cy="open-manage-permissions"
@@ -114,16 +118,19 @@
<span>{{ 'Manage permissions' | translate }}</span>
</button>
- <button
- *ngIf="hasWritePrivilege"
- mat-menu-item
- data-cy="delete"
- [attr.data-cy]="'delete-asset-' +
element.assetName"
- (click)="deleteAsset(element)"
- >
- <mat-icon>delete</mat-icon>
- <span>{{ 'Delete' | translate }}</span>
- </button>
+ @if (hasWritePrivilege) {
+ <button
+ mat-menu-item
+ data-cy="delete"
+ [attr.data-cy]="
+ 'delete-asset-' + element.assetName
+ "
+ (click)="deleteAsset(element)"
+ >
+ <mat-icon>delete</mat-icon>
+ <span>{{ 'Delete' | translate }}</span>
+ </button>
+ }
</ng-template>
</sp-table>
</div>
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 ddad39ce6e..520090df3f 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
@@ -18,237 +18,234 @@
<div class="sp-dialog-container">
<div class="sp-dialog-content p-15 mt-10">
- <div fxFlex="100" fxLayout="column" *ngIf="clonedAssetLink">
- <div fxLayout="column" class="link-configuration">
- <mat-form-field color="accent">
- <mat-label>Link Type</mat-label>
- <mat-select
- fxFlex
- [(value)]="selectedLinkType"
- required
- (selectionChange)="onLinkTypeChanged($event)"
- >
- <mat-option
- *ngFor="let assetLinkType of assetLinkTypes"
- [value]="assetLinkType"
- >{{ assetLinkType.linkLabel }}</mat-option
+ @if (clonedAssetLink) {
+ <div fxFlex="100" fxLayout="column">
+ <div fxLayout="column" class="link-configuration">
+ <mat-form-field color="accent">
+ <mat-label>Link Type</mat-label>
+ <mat-select
+ fxFlex
+ [(value)]="selectedLinkType"
+ required
+ (selectionChange)="onLinkTypeChanged($event)"
>
- </mat-select>
- </mat-form-field>
+ @for (
+ assetLinkType of assetLinkTypes;
+ track assetLinkType
+ ) {
+ <mat-option [value]="assetLinkType">{{
+ assetLinkType.linkLabel
+ }}</mat-option>
+ }
+ </mat-select>
+ </mat-form-field>
+ </div>
+ @if (selectedLinkType.linkQueryHint === 'pipeline') {
+ <div fxLayout="column" class="link-configuration">
+ <mat-form-field color="accent" fxFlex="100">
+ <mat-label>Pipelines</mat-label>
+ <mat-select
+ [(ngModel)]="currentResource"
+ fxFlex
+ (selectionChange)="
+ changeLabel(
+ $event.value.elementId,
+ $event.value.name,
+ $event.value
+ )
+ "
+ required
+ >
+ @for (pipeline of pipelines; track pipeline) {
+ <mat-option [value]="pipeline">{{
+ pipeline.name
+ }}</mat-option>
+ }
+ </mat-select>
+ </mat-form-field>
+ </div>
+ }
+ @if (selectedLinkType.linkQueryHint === 'data-source') {
+ <div fxLayout="column" class="link-configuration">
+ <mat-form-field color="accent" fxFlex="100">
+ <mat-label>Data Stream</mat-label>
+ <mat-select
+ (selectionChange)="
+ changeLabel(
+ $event.value.elementId,
+ $event.value.name,
+ $event.value
+ )
+ "
+ [(value)]="currentResource"
+ fxFlex
+ required
+ >
+ @for (source of dataSources; track source) {
+ <mat-option [value]="source">{{
+ source.name
+ }}</mat-option>
+ }
+ </mat-select>
+ </mat-form-field>
+ </div>
+ }
+ @if (selectedLinkType.linkQueryHint === 'dashboard') {
+ <div fxLayout="column" class="link-configuration">
+ <mat-form-field color="accent" fxFlex="100">
+ <mat-label>Dashboards</mat-label>
+ <mat-select
+ (selectionChange)="
+ changeLabel(
+ $event.value.elementId,
+ $event.value.name,
+ $event.value
+ )
+ "
+ [(value)]="currentResource"
+ fxFlex
+ required
+ >
+ @for (
+ dashboard of dashboards;
+ track dashboard
+ ) {
+ <mat-option [value]="dashboard">{{
+ dashboard.name
+ }}</mat-option>
+ }
+ </mat-select>
+ </mat-form-field>
+ </div>
+ }
+ @if (selectedLinkType.linkQueryHint === 'chart') {
+ <div fxLayout="column" class="link-configuration">
+ <mat-form-field color="accent" fxFlex="100">
+ <mat-label>Chart</mat-label>
+ <mat-select
+ (selectionChange)="
+ changeLabel(
+ $event.value.elementId,
+ $event.value.name,
+ $event.value
+ )
+ "
+ [(value)]="currentResource"
+ fxFlex
+ required
+ >
+ @for (chart of charts; track chart) {
+ <mat-option [value]="chart">{{
+ chart.baseAppearanceConfig.widgetTitle
+ }}</mat-option>
+ }
+ </mat-select>
+ </mat-form-field>
+ </div>
+ }
+ @if (selectedLinkType.linkQueryHint === 'adapter') {
+ <div fxLayout="column" class="link-configuration">
+ <mat-form-field color="accent" fxFlex="100">
+ <mat-label>Adapter</mat-label>
+ <mat-select
+ (selectionChange)="
+ changeLabel(
+ $event.value.elementId,
+ $event.value.name,
+ $event.value
+ )
+ "
+ [(value)]="currentResource"
+ fxFlex
+ required
+ >
+ @for (adapter of adapters; track adapter) {
+ <mat-option [value]="adapter">{{
+ adapter.name
+ }}</mat-option>
+ }
+ </mat-select>
+ </mat-form-field>
+ </div>
+ }
+ @if (selectedLinkType.linkQueryHint === 'measurement') {
+ <div fxLayout="column" class="link-configuration">
+ <mat-form-field color="accent" fxFlex="100">
+ <mat-label>Data Lake Storage</mat-label>
+ <mat-select
+ (selectionChange)="
+ changeLabel(
+ $event.value.elementId,
+ $event.value.measureName,
+ $event.value
+ )
+ "
+ [(value)]="currentResource"
+ fxFlex
+ required
+ >
+ @for (
+ measure of dataLakeMeasures;
+ track measure
+ ) {
+ <mat-option [value]="measure">{{
+ measure.measureName
+ }}</mat-option>
+ }
+ </mat-select>
+ </mat-form-field>
+ </div>
+ }
+ @if (selectedLinkType.linkQueryHint === 'file') {
+ <div fxLayout="column" class="link-configuration">
+ <mat-form-field color="accent" fxFlex="100">
+ <mat-label>Files</mat-label>
+ <mat-select
+ (selectionChange)="
+ changeLabel(
+ $event.value.fileId,
+ $event.value.originalFilename,
+ $event.value
+ )
+ "
+ [(value)]="currentResource"
+ fxFlex
+ required
+ >
+ @for (file of files; track file) {
+ <mat-option [value]="file">{{
+ file.filename
+ }}</mat-option>
+ }
+ </mat-select>
+ </mat-form-field>
+ </div>
+ }
+ <div fxLayout="column" class="link-configuration">
+ <mat-form-field color="accent">
+ <mat-label>Label</mat-label>
+ <input
+ matInput
+ [(ngModel)]="clonedAssetLink.linkLabel"
+ [disabled]="true"
+ required
+ />
+ </mat-form-field>
+ </div>
+ <div fxLayout="column" class="link-configuration">
+ <mat-form-field color="accent">
+ <mat-label>Resource ID</mat-label>
+ <input
+ matInput
+ [(ngModel)]="clonedAssetLink.resourceId"
+ required
+ [disabled]="true"
+ />
+ </mat-form-field>
+ </div>
+ <div fxFlex="100"></div>
</div>
- <div
- *ngIf="selectedLinkType.linkQueryHint === 'pipeline'"
- fxLayout="column"
- class="link-configuration"
- >
- <mat-form-field color="accent" fxFlex="100">
- <mat-label>Pipelines</mat-label>
- <mat-select
- [(ngModel)]="currentResource"
- fxFlex
- (selectionChange)="
- changeLabel(
- $event.value.elementId,
- $event.value.name,
- $event.value
- )
- "
- required
- >
- <mat-option
- *ngFor="let pipeline of pipelines"
- [value]="pipeline"
- >{{ pipeline.name }}</mat-option
- >
- </mat-select>
- </mat-form-field>
- </div>
- <div
- *ngIf="selectedLinkType.linkQueryHint === 'data-source'"
- fxLayout="column"
- class="link-configuration"
- >
- <mat-form-field color="accent" fxFlex="100">
- <mat-label>Data Stream</mat-label>
- <mat-select
- (selectionChange)="
- changeLabel(
- $event.value.elementId,
- $event.value.name,
- $event.value
- )
- "
- [(value)]="currentResource"
- fxFlex
- required
- >
- <mat-option
- *ngFor="let source of dataSources"
- [value]="source"
- >{{ source.name }}</mat-option
- >
- </mat-select>
- </mat-form-field>
- </div>
- <div
- *ngIf="selectedLinkType.linkQueryHint === 'dashboard'"
- fxLayout="column"
- class="link-configuration"
- >
- <mat-form-field color="accent" fxFlex="100">
- <mat-label>Dashboards</mat-label>
- <mat-select
- (selectionChange)="
- changeLabel(
- $event.value.elementId,
- $event.value.name,
- $event.value
- )
- "
- [(value)]="currentResource"
- fxFlex
- required
- >
- <mat-option
- *ngFor="let dashboard of dashboards"
- [value]="dashboard"
- >{{ dashboard.name }}</mat-option
- >
- </mat-select>
- </mat-form-field>
- </div>
- <div
- *ngIf="selectedLinkType.linkQueryHint === 'chart'"
- fxLayout="column"
- class="link-configuration"
- >
- <mat-form-field color="accent" fxFlex="100">
- <mat-label>Chart</mat-label>
- <mat-select
- (selectionChange)="
- changeLabel(
- $event.value.elementId,
- $event.value.name,
- $event.value
- )
- "
- [(value)]="currentResource"
- fxFlex
- required
- >
- <mat-option
- *ngFor="let chart of charts"
- [value]="chart"
- >{{
- chart.baseAppearanceConfig.widgetTitle
- }}</mat-option
- >
- </mat-select>
- </mat-form-field>
- </div>
- <div
- *ngIf="selectedLinkType.linkQueryHint === 'adapter'"
- fxLayout="column"
- class="link-configuration"
- >
- <mat-form-field color="accent" fxFlex="100">
- <mat-label>Adapter</mat-label>
- <mat-select
- (selectionChange)="
- changeLabel(
- $event.value.elementId,
- $event.value.name,
- $event.value
- )
- "
- [(value)]="currentResource"
- fxFlex
- required
- >
- <mat-option
- *ngFor="let adapter of adapters"
- [value]="adapter"
- >{{ adapter.name }}</mat-option
- >
- </mat-select>
- </mat-form-field>
- </div>
- <div
- *ngIf="selectedLinkType.linkQueryHint === 'measurement'"
- fxLayout="column"
- class="link-configuration"
- >
- <mat-form-field color="accent" fxFlex="100">
- <mat-label>Data Lake Storage</mat-label>
- <mat-select
- (selectionChange)="
- changeLabel(
- $event.value.elementId,
- $event.value.measureName,
- $event.value
- )
- "
- [(value)]="currentResource"
- fxFlex
- required
- >
- <mat-option
- *ngFor="let measure of dataLakeMeasures"
- [value]="measure"
- >{{ measure.measureName }}</mat-option
- >
- </mat-select>
- </mat-form-field>
- </div>
- <div
- *ngIf="selectedLinkType.linkQueryHint === 'file'"
- fxLayout="column"
- class="link-configuration"
- >
- <mat-form-field color="accent" fxFlex="100">
- <mat-label>Files</mat-label>
- <mat-select
- (selectionChange)="
- changeLabel(
- $event.value.fileId,
- $event.value.originalFilename,
- $event.value
- )
- "
- [(value)]="currentResource"
- fxFlex
- required
- >
- <mat-option *ngFor="let file of files"
[value]="file">{{
- file.filename
- }}</mat-option>
- </mat-select>
- </mat-form-field>
- </div>
- <div fxLayout="column" class="link-configuration">
- <mat-form-field color="accent">
- <mat-label>Label</mat-label>
- <input
- matInput
- [(ngModel)]="clonedAssetLink.linkLabel"
- [disabled]="true"
- required
- />
- </mat-form-field>
- </div>
- <div fxLayout="column" class="link-configuration">
- <mat-form-field color="accent">
- <mat-label>Resource ID</mat-label>
- <input
- matInput
- [(ngModel)]="clonedAssetLink.resourceId"
- required
- [disabled]="true"
- />
- </mat-form-field>
- </div>
- <div fxFlex="100"></div>
- </div>
+ }
</div>
<mat-divider></mat-divider>
<div class="sp-dialog-actions">
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 0bb63f260c..b5730d1ebd 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
@@ -18,389 +18,443 @@
<div class="sp-dialog-container">
<div class="sp-dialog-content p-15">
- <div fxFlex="100" fxLayout="column" *ngIf="clonedAssetLinks">
- <div fxLayout="column" class="link-configuration">
- <div
- fxLayout="row"
- fxLayoutAlign="start center"
- class="mb-10"
- fxFlex="100"
- >
- <div fxLayout="row" fxLayoutAlign="start center">
- <span class="general-options-header mb-0"
- >Adapters</span
- >
- </div>
- <div fxLayout="row" fxLayoutAlign="end center" fxFlex>
- <button
- mat-button
- mat-flat-button
- color="accent"
- class="small-button"
- (click)="
- selectAll(
- adapters,
- elementIdFunction,
- nameFunction,
- 'adapter'
- )
- "
- style="margin-right: 5px; margin-left: 15px"
- >
- <span>Select All</span>
- </button>
- <button
- mat-button
- mat-flat-button
- class="mat-basic small-button"
- (click)="deselectAll(adapters, elementIdFunction)"
- style="margin-right: 10px; margin-left: 5px"
- >
- <span>Deselect All</span>
- </button>
+ @if (clonedAssetLinks) {
+ <div fxFlex="100" fxLayout="column">
+ <div fxLayout="column" class="link-configuration">
+ <div
+ fxLayout="row"
+ fxLayoutAlign="start center"
+ class="mb-10"
+ fxFlex="100"
+ >
+ <div fxLayout="row" fxLayoutAlign="start center">
+ <span class="general-options-header mb-0"
+ >Adapters</span
+ >
+ </div>
+ <div fxLayout="row" fxLayoutAlign="end center" fxFlex>
+ <button
+ mat-button
+ mat-flat-button
+ color="accent"
+ class="small-button"
+ (click)="
+ selectAll(
+ adapters,
+ elementIdFunction,
+ nameFunction,
+ 'adapter'
+ )
+ "
+ style="margin-right: 5px; margin-left: 15px"
+ >
+ <span>Select All</span>
+ </button>
+ <button
+ mat-button
+ mat-flat-button
+ class="mat-basic small-button"
+ (click)="
+ deselectAll(adapters, elementIdFunction)
+ "
+ style="margin-right: 10px; margin-left: 5px"
+ >
+ <span>Deselect All</span>
+ </button>
+ </div>
</div>
+ @for (element of adapters; track element) {
+ <div fxLayout="row">
+ <mat-checkbox
+ color="accent"
+ [checked]="linkSelected(element.elementId)"
+ [attr.data-cy]="
+ 'select-adapters-checkbox-' + element.name
+ "
+ (change)="
+ selectLink(
+ $event.checked,
+ element.elementId,
+ element.name,
+ 'adapter'
+ )
+ "
+ >
+ {{ element.name }}
+ </mat-checkbox>
+ </div>
+ }
</div>
- <div *ngFor="let element of adapters" fxLayout="row">
- <mat-checkbox
- color="accent"
- [checked]="linkSelected(element.elementId)"
- [attr.data-cy]="
- 'select-adapters-checkbox-' + element.name
- "
- (change)="
- selectLink(
- $event.checked,
- element.elementId,
- element.name,
- 'adapter'
- )
- "
+ <div fxLayout="column" class="link-configuration">
+ <div
+ fxLayout="row"
+ fxLayoutAlign="start center"
+ class="mb-10"
>
- {{ element.name }}
- </mat-checkbox>
- </div>
- </div>
- <div fxLayout="column" class="link-configuration">
- <div fxLayout="row" fxLayoutAlign="start center" class="mb-10">
- <div fxLayout="row" fxLayoutAlign="start center">
- <span class="general-options-header mb-0">Charts</span>
- </div>
- <div fxLayout="row" fxLayoutAlign="end center" fxFlex>
- <button
- mat-button
- mat-flat-button
- color="accent"
- class="small-button"
- (click)="
- selectAll(
- charts,
- elementIdFunction,
- widgetNameFunction,
- 'chart'
- )
- "
- style="margin-right: 5px; margin-left: 15px"
- >
- <span>Select All</span>
- </button>
- <button
- mat-button
- mat-flat-button
- class="mat-basic small-button"
- (click)="deselectAll(charts, elementIdFunction)"
- style="margin-right: 10px; margin-left: 5px"
- >
- <span>Deselect All</span>
- </button>
+ <div fxLayout="row" fxLayoutAlign="start center">
+ <span class="general-options-header mb-0"
+ >Charts</span
+ >
+ </div>
+ <div fxLayout="row" fxLayoutAlign="end center" fxFlex>
+ <button
+ mat-button
+ mat-flat-button
+ color="accent"
+ class="small-button"
+ (click)="
+ selectAll(
+ charts,
+ elementIdFunction,
+ widgetNameFunction,
+ 'chart'
+ )
+ "
+ style="margin-right: 5px; margin-left: 15px"
+ >
+ <span>Select All</span>
+ </button>
+ <button
+ mat-button
+ mat-flat-button
+ class="mat-basic small-button"
+ (click)="deselectAll(charts,
elementIdFunction)"
+ style="margin-right: 10px; margin-left: 5px"
+ >
+ <span>Deselect All</span>
+ </button>
+ </div>
</div>
+ @for (element of charts; track element) {
+ <div fxLayout="row">
+ <mat-checkbox
+ color="accent"
+ [checked]="linkSelected(element.elementId)"
+ (change)="
+ selectLink(
+ $event.checked,
+ element.elementId,
+ element.baseAppearanceConfig
+ .widgetTitle,
+ 'chart'
+ )
+ "
+ >
+ {{ element.baseAppearanceConfig.widgetTitle }}
+ </mat-checkbox>
+ </div>
+ }
</div>
- <div *ngFor="let element of charts" fxLayout="row">
- <mat-checkbox
- color="accent"
- [checked]="linkSelected(element.elementId)"
- (change)="
- selectLink(
- $event.checked,
- element.elementId,
- element.baseAppearanceConfig.widgetTitle,
- 'chart'
- )
- "
+ <div fxLayout="column" class="link-configuration">
+ <div
+ fxLayout="row"
+ fxLayoutAlign="start center"
+ class="mb-10"
>
- {{ element.baseAppearanceConfig.widgetTitle }}
- </mat-checkbox>
- </div>
- </div>
- <div fxLayout="column" class="link-configuration">
- <div fxLayout="row" fxLayoutAlign="start center" class="mb-10">
- <div fxLayout="row" fxLayoutAlign="start center">
- <span class="general-options-header mb-0"
- >Dashboards</span
- >
- </div>
- <div fxLayout="row" fxLayoutAlign="end center" fxFlex>
- <button
- mat-button
- mat-flat-button
- color="accent"
- class="small-button"
- (click)="
- selectAll(
- dashboards,
- elementIdFunction,
- nameFunction,
- 'dashboard'
- )
- "
- style="margin-right: 5px; margin-left: 15px"
- >
- <span>Select All</span>
- </button>
- <button
- mat-button
- mat-flat-button
- class="mat-basic small-button"
- (click)="deselectAll(dashboards,
elementIdFunction)"
- style="margin-right: 10px; margin-left: 5px"
- >
- <span>Deselect All</span>
- </button>
+ <div fxLayout="row" fxLayoutAlign="start center">
+ <span class="general-options-header mb-0"
+ >Dashboards</span
+ >
+ </div>
+ <div fxLayout="row" fxLayoutAlign="end center" fxFlex>
+ <button
+ mat-button
+ mat-flat-button
+ color="accent"
+ class="small-button"
+ (click)="
+ selectAll(
+ dashboards,
+ elementIdFunction,
+ nameFunction,
+ 'dashboard'
+ )
+ "
+ style="margin-right: 5px; margin-left: 15px"
+ >
+ <span>Select All</span>
+ </button>
+ <button
+ mat-button
+ mat-flat-button
+ class="mat-basic small-button"
+ (click)="
+ deselectAll(dashboards, elementIdFunction)
+ "
+ style="margin-right: 10px; margin-left: 5px"
+ >
+ <span>Deselect All</span>
+ </button>
+ </div>
</div>
+ @for (element of dashboards; track element) {
+ <div fxLayout="row">
+ <mat-checkbox
+ color="accent"
+ [checked]="linkSelected(element.elementId)"
+ (change)="
+ selectLink(
+ $event.checked,
+ element.elementId,
+ element.name,
+ 'dashboard'
+ )
+ "
+ >
+ {{ element.name }}
+ </mat-checkbox>
+ </div>
+ }
</div>
- <div *ngFor="let element of dashboards" fxLayout="row">
- <mat-checkbox
- color="accent"
- [checked]="linkSelected(element.elementId)"
- (change)="
- selectLink(
- $event.checked,
- element.elementId,
- element.name,
- 'dashboard'
- )
- "
+ <div fxLayout="column" class="link-configuration">
+ <div
+ fxLayout="row"
+ fxLayoutAlign="start center"
+ class="mb-10"
>
- {{ element.name }}
- </mat-checkbox>
- </div>
- </div>
- <div fxLayout="column" class="link-configuration">
- <div fxLayout="row" fxLayoutAlign="start center" class="mb-10">
- <div fxLayout="row" fxLayoutAlign="start center">
- <span class="general-options-header mb-0"
- >Data Lake Storage</span
- >
- </div>
- <div fxLayout="row" fxLayoutAlign="end center" fxFlex>
- <button
- mat-button
- mat-flat-button
- color="accent"
- class="small-button"
- (click)="
- selectAll(
- dataLakeMeasures,
- elementIdFunction,
- measureNameFunction,
- 'measurement'
- )
- "
- style="margin-right: 5px; margin-left: 15px"
- >
- <span>Select All</span>
- </button>
- <button
- mat-button
- mat-flat-button
- class="mat-basic small-button"
- (click)="
- deselectAll(dataLakeMeasures,
elementIdFunction)
- "
- style="margin-right: 10px; margin-left: 5px"
- >
- <span>Deselect All</span>
- </button>
+ <div fxLayout="row" fxLayoutAlign="start center">
+ <span class="general-options-header mb-0"
+ >Data Lake Storage</span
+ >
+ </div>
+ <div fxLayout="row" fxLayoutAlign="end center" fxFlex>
+ <button
+ mat-button
+ mat-flat-button
+ color="accent"
+ class="small-button"
+ (click)="
+ selectAll(
+ dataLakeMeasures,
+ elementIdFunction,
+ measureNameFunction,
+ 'measurement'
+ )
+ "
+ style="margin-right: 5px; margin-left: 15px"
+ >
+ <span>Select All</span>
+ </button>
+ <button
+ mat-button
+ mat-flat-button
+ class="mat-basic small-button"
+ (click)="
+ deselectAll(
+ dataLakeMeasures,
+ elementIdFunction
+ )
+ "
+ style="margin-right: 10px; margin-left: 5px"
+ >
+ <span>Deselect All</span>
+ </button>
+ </div>
</div>
+ @for (element of dataLakeMeasures; track element) {
+ <div fxLayout="row">
+ <mat-checkbox
+ color="accent"
+ [checked]="linkSelected(element.elementId)"
+ (change)="
+ selectLink(
+ $event.checked,
+ element.elementId,
+ element.measureName,
+ 'measurement'
+ )
+ "
+ >
+ {{ element.measureName }}
+ </mat-checkbox>
+ </div>
+ }
</div>
- <div *ngFor="let element of dataLakeMeasures" fxLayout="row">
- <mat-checkbox
- color="accent"
- [checked]="linkSelected(element.elementId)"
- (change)="
- selectLink(
- $event.checked,
- element.elementId,
- element.measureName,
- 'measurement'
- )
- "
+ <div fxLayout="column" class="link-configuration">
+ <div
+ fxLayout="row"
+ fxLayoutAlign="start center"
+ class="mb-10"
>
- {{ element.measureName }}
- </mat-checkbox>
- </div>
- </div>
- <div fxLayout="column" class="link-configuration">
- <div fxLayout="row" fxLayoutAlign="start center" class="mb-10">
- <div fxLayout="row" fxLayoutAlign="start center">
- <span class="general-options-header mb-0"
- >Data Streams</span
- >
- </div>
- <div fxLayout="row" fxLayoutAlign="end center" fxFlex>
- <button
- mat-button
- mat-flat-button
- color="accent"
- class="small-button"
- (click)="
- selectAll(
- dataSources,
- elementIdFunction,
- nameFunction,
- 'data-source'
- )
- "
- style="margin-right: 5px; margin-left: 15px"
- >
- <span>Select All</span>
- </button>
- <button
- mat-button
- mat-flat-button
- class="mat-basic small-button"
- (click)="
- deselectAll(dataSources, elementIdFunction)
- "
- style="margin-right: 10px; margin-left: 5px"
- >
- <span>Deselect All</span>
- </button>
+ <div fxLayout="row" fxLayoutAlign="start center">
+ <span class="general-options-header mb-0"
+ >Data Streams</span
+ >
+ </div>
+ <div fxLayout="row" fxLayoutAlign="end center" fxFlex>
+ <button
+ mat-button
+ mat-flat-button
+ color="accent"
+ class="small-button"
+ (click)="
+ selectAll(
+ dataSources,
+ elementIdFunction,
+ nameFunction,
+ 'data-source'
+ )
+ "
+ style="margin-right: 5px; margin-left: 15px"
+ >
+ <span>Select All</span>
+ </button>
+ <button
+ mat-button
+ mat-flat-button
+ class="mat-basic small-button"
+ (click)="
+ deselectAll(dataSources, elementIdFunction)
+ "
+ style="margin-right: 10px; margin-left: 5px"
+ >
+ <span>Deselect All</span>
+ </button>
+ </div>
</div>
+ @for (source of dataSources; track source) {
+ <div fxLayout="row">
+ <mat-checkbox
+ color="accent"
+ [checked]="linkSelected(source.elementId)"
+ [attr.data-cy]="
+ 'select-data-stream-checkbox-' +
source.name
+ "
+ (change)="
+ selectLink(
+ $event.checked,
+ source.elementId,
+ source.name,
+ 'data-source'
+ )
+ "
+ >
+ {{ source.name }}
+ </mat-checkbox>
+ </div>
+ }
</div>
- <div *ngFor="let source of dataSources" fxLayout="row">
- <mat-checkbox
- color="accent"
- [checked]="linkSelected(source.elementId)"
- [attr.data-cy]="
- 'select-data-stream-checkbox-' + source.name
- "
- (change)="
- selectLink(
- $event.checked,
- source.elementId,
- source.name,
- 'data-source'
- )
- "
+ <div fxLayout="column" class="link-configuration">
+ <div
+ fxLayout="row"
+ fxLayoutAlign="start center"
+ class="mb-10"
>
- {{ source.name }}
- </mat-checkbox>
- </div>
- </div>
- <div fxLayout="column" class="link-configuration">
- <div fxLayout="row" fxLayoutAlign="start center" class="mb-10">
- <div fxLayout="row" fxLayoutAlign="start center">
- <span class="general-options-header mb-0">Files</span>
- </div>
- <div fxLayout="row" fxLayoutAlign="end center" fxFlex>
- <button
- mat-button
- mat-flat-button
- color="accent"
- class="small-button"
- (click)="
- selectAll(
- files,
- fileIdFunction,
- filenameFunction,
- 'file'
- )
- "
- style="margin-right: 5px; margin-left: 15px"
- >
- <span>Select All</span>
- </button>
- <button
- mat-button
- mat-flat-button
- class="mat-basic small-button"
- (click)="deselectAll(files, fileIdFunction)"
- style="margin-right: 10px; margin-left: 5px"
- >
- <span>Deselect All</span>
- </button>
+ <div fxLayout="row" fxLayoutAlign="start center">
+ <span class="general-options-header mb-0"
+ >Files</span
+ >
+ </div>
+ <div fxLayout="row" fxLayoutAlign="end center" fxFlex>
+ <button
+ mat-button
+ mat-flat-button
+ color="accent"
+ class="small-button"
+ (click)="
+ selectAll(
+ files,
+ fileIdFunction,
+ filenameFunction,
+ 'file'
+ )
+ "
+ style="margin-right: 5px; margin-left: 15px"
+ >
+ <span>Select All</span>
+ </button>
+ <button
+ mat-button
+ mat-flat-button
+ class="mat-basic small-button"
+ (click)="deselectAll(files, fileIdFunction)"
+ style="margin-right: 10px; margin-left: 5px"
+ >
+ <span>Deselect All</span>
+ </button>
+ </div>
</div>
+ @for (element of files; track element) {
+ <div fxLayout="row">
+ <mat-checkbox
+ color="accent"
+ [checked]="linkSelected(element.fileId)"
+ (change)="
+ selectLink(
+ $event.checked,
+ element.fileId,
+ element.filename,
+ 'file'
+ )
+ "
+ >
+ {{ element.filename }}
+ </mat-checkbox>
+ </div>
+ }
</div>
- <div *ngFor="let element of files" fxLayout="row">
- <mat-checkbox
- color="accent"
- [checked]="linkSelected(element.fileId)"
- (change)="
- selectLink(
- $event.checked,
- element.fileId,
- element.filename,
- 'file'
- )
- "
+ <div fxLayout="column" class="link-configuration">
+ <div
+ fxLayout="row"
+ fxLayoutAlign="start center"
+ class="mb-10"
>
- {{ element.filename }}
- </mat-checkbox>
- </div>
- </div>
- <div fxLayout="column" class="link-configuration">
- <div fxLayout="row" fxLayoutAlign="start center" class="mb-10">
- <div fxLayout="row" fxLayoutAlign="start center">
- <span class="general-options-header mb-0"
- >Pipelines</span
- >
+ <div fxLayout="row" fxLayoutAlign="start center">
+ <span class="general-options-header mb-0"
+ >Pipelines</span
+ >
+ </div>
+ <div fxLayout="row" fxLayoutAlign="end center" fxFlex>
+ <button
+ mat-button
+ mat-flat-button
+ color="accent"
+ class="small-button"
+ (click)="
+ selectAll(
+ pipelines,
+ elementIdFunction,
+ nameFunction,
+ 'pipeline'
+ )
+ "
+ style="margin-right: 5px; margin-left: 15px"
+ >
+ <span>Select All</span>
+ </button>
+ <button
+ mat-button
+ mat-flat-button
+ class="mat-basic small-button"
+ (click)="
+ deselectAll(pipelines, elementIdFunction)
+ "
+ style="margin-right: 10px; margin-left: 5px"
+ >
+ <span>Deselect All</span>
+ </button>
+ </div>
</div>
- <div fxLayout="row" fxLayoutAlign="end center" fxFlex>
- <button
- mat-button
- mat-flat-button
- color="accent"
- class="small-button"
- (click)="
- selectAll(
- pipelines,
- elementIdFunction,
- nameFunction,
- 'pipeline'
- )
- "
- style="margin-right: 5px; margin-left: 15px"
- >
- <span>Select All</span>
- </button>
- <button
- mat-button
- mat-flat-button
- class="mat-basic small-button"
- (click)="deselectAll(pipelines, elementIdFunction)"
- style="margin-right: 10px; margin-left: 5px"
- >
- <span>Deselect All</span>
- </button>
- </div>
- </div>
- <div *ngFor="let pipeline of pipelines" fxLayout="row">
- <mat-checkbox
- color="accent"
- [checked]="linkSelected(pipeline.elementId)"
- (change)="
- selectLink(
- $event.checked,
- pipeline.elementId,
- pipeline.name,
- 'pipeline'
- )
- "
- >{{ pipeline.name }}
- </mat-checkbox>
+ @for (pipeline of pipelines; track pipeline) {
+ <div fxLayout="row">
+ <mat-checkbox
+ color="accent"
+ [checked]="linkSelected(pipeline.elementId)"
+ (change)="
+ selectLink(
+ $event.checked,
+ pipeline.elementId,
+ pipeline.name,
+ 'pipeline'
+ )
+ "
+ >{{ pipeline.name }}
+ </mat-checkbox>
+ </div>
+ }
</div>
</div>
- </div>
+ }
</div>
<mat-divider></mat-divider>
<div class="sp-dialog-actions">
