From 9a16d718fb9cef7d217f85f69ed115f8d471d236 Mon Sep 17 00:00:00 2001 From: Tobias Messner Date: Thu, 12 Sep 2024 15:06:29 +0200 Subject: [PATCH] chore: More migration to new Angular control flow --- .../create-project.component.css | 4 - .../create-project.component.html | 99 ++-- .../create-project.component.ts | 4 +- .../create-project/create-project.stories.ts | 18 + .../init-model/init-model.component.css | 4 - .../init-model/init-model.component.html | 99 ++-- .../models/init-model/init-model.component.ts | 4 +- .../edit-project-metadata.component.css | 4 - .../edit-project-metadata.component.html | 27 +- .../edit-project-metadata.component.ts | 4 +- .../project-details.component.css | 12 - .../project-details.component.ts | 3 - .../project-audit-log.component.html | 7 +- .../project-audit-log.component.ts | 4 +- .../project-audit-log.stories.ts | 31 ++ .../create-readonly-session.component.html | 2 +- .../pipelines-overview.component.html | 459 ++++++++++-------- .../pipelines-overview.component.ts | 3 +- 18 files changed, 424 insertions(+), 364 deletions(-) delete mode 100644 frontend/src/app/projects/create-project/create-project.component.css create mode 100644 frontend/src/app/projects/create-project/create-project.stories.ts delete mode 100644 frontend/src/app/projects/models/init-model/init-model.component.css delete mode 100644 frontend/src/app/projects/project-detail/edit-project-metadata/edit-project-metadata.component.css delete mode 100644 frontend/src/app/projects/project-detail/project-details.component.css create mode 100644 frontend/src/app/projects/project-detail/project-users/project-audit-log/project-audit-log.stories.ts diff --git a/frontend/src/app/projects/create-project/create-project.component.css b/frontend/src/app/projects/create-project/create-project.component.css deleted file mode 100644 index 8535c6938a..0000000000 --- a/frontend/src/app/projects/create-project/create-project.component.css +++ /dev/null @@ -1,4 +0,0 @@ -/* - * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors - * SPDX-License-Identifier: Apache-2.0 - */ diff --git a/frontend/src/app/projects/create-project/create-project.component.html b/frontend/src/app/projects/create-project/create-project.component.html index 2f9a82c0cc..05353ed622 100644 --- a/frontend/src/app/projects/create-project/create-project.component.html +++ b/frontend/src/app/projects/create-project/create-project.component.html @@ -25,14 +25,16 @@

Create new project

formControlName="name" data-testId="input-name" /> - - A project with a name similar to “{{ - form.controls.name.errors!.uniqueSlug.value - }}” already exists. - - - A project name is required. - + @if (form.controls.name.errors?.uniqueSlug) { + + A project with a name similar to “{{ + form.controls.name.errors!.uniqueSlug.value + }}” already exists. + + } + @if (form.controls.name.errors?.required) { + A project name is required. + }
@@ -93,39 +95,40 @@

Create new project

(Optional) Add team members

-
- -
-
-
-
-
-
- - - {{ - !users || users.length === 0 ? "Skip for now" : "Continue" - }} - - navigate_next + +
+
+
+
+
+
+ - + @if ( + projectUserService.nonAdminProjectUsers$ | async; + as users + ) { + {{ + !users || users.length === 0 ? "Skip for now" : "Continue" + }} + } + navigate_next + +
+
-
-
+ } @@ -156,20 +159,14 @@

[color]="getColorByModelCreationStep()" data-testId="a-skipModelAndFinishProjectCreation" > - - Abort model creation and finish - - - Abort model creation and finish - - - Finish project creation - + @if (modelCreationStep === "create-model") { + Abort model creation and finish + } @else if (modelCreationStep === "complete") { + Finish project creation + } @else { + Abort model creation and finish + } + check diff --git a/frontend/src/app/projects/create-project/create-project.component.ts b/frontend/src/app/projects/create-project/create-project.component.ts index bd64c45583..422c3b409e 100644 --- a/frontend/src/app/projects/create-project/create-project.component.ts +++ b/frontend/src/app/projects/create-project/create-project.component.ts @@ -2,7 +2,7 @@ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors * SPDX-License-Identifier: Apache-2.0 */ -import { NgIf, NgFor, AsyncPipe } from '@angular/common'; +import { NgFor, AsyncPipe } from '@angular/common'; import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { FormControl, @@ -32,7 +32,6 @@ import { ProjectWrapperService } from '../service/project.service'; @Component({ selector: 'app-create-project', templateUrl: './create-project.component.html', - styleUrls: ['./create-project.component.css'], standalone: true, imports: [ MatStepper, @@ -43,7 +42,6 @@ import { ProjectWrapperService } from '../service/project.service'; MatFormField, MatLabel, MatInput, - NgIf, MatError, MatRadioGroup, NgFor, diff --git a/frontend/src/app/projects/create-project/create-project.stories.ts b/frontend/src/app/projects/create-project/create-project.stories.ts new file mode 100644 index 0000000000..1228591435 --- /dev/null +++ b/frontend/src/app/projects/create-project/create-project.stories.ts @@ -0,0 +1,18 @@ +/* + * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors + * SPDX-License-Identifier: Apache-2.0 + */ +import { Meta, StoryObj } from '@storybook/angular'; +import { CreateProjectComponent } from './create-project.component'; + +const meta: Meta = { + title: 'Project Components / Create Project', + component: CreateProjectComponent, +}; + +export default meta; +type Story = StoryObj; + +export const General: Story = { + args: {}, +}; diff --git a/frontend/src/app/projects/models/init-model/init-model.component.css b/frontend/src/app/projects/models/init-model/init-model.component.css deleted file mode 100644 index 8535c6938a..0000000000 --- a/frontend/src/app/projects/models/init-model/init-model.component.css +++ /dev/null @@ -1,4 +0,0 @@ -/* - * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors - * SPDX-License-Identifier: Apache-2.0 - */ diff --git a/frontend/src/app/projects/models/init-model/init-model.component.html b/frontend/src/app/projects/models/init-model/init-model.component.html index 71d81b9be2..a50efb9bfa 100644 --- a/frontend/src/app/projects/models/init-model/init-model.component.html +++ b/frontend/src/app/projects/models/init-model/init-model.component.html @@ -4,53 +4,56 @@ -->
-
-
- - Modelling tool - - - - Version - - - {{ version.name }} - (recommended) - (deprecated) - - - - - Model nature - - - {{ nature.name }} - - - -
-
- + @if (modelService.model$ | async) { +
+
+ + Modelling tool + + + + Version + + + {{ version.name }} + @if (version.config.is_recommended) { + (recommended) + } + @if (version.config.is_deprecated) { + (deprecated) + } + + + + + Model nature + + + {{ nature.name }} + + + +
+
+ +
-
+ }
diff --git a/frontend/src/app/projects/models/init-model/init-model.component.ts b/frontend/src/app/projects/models/init-model/init-model.component.ts index 2552e98043..037992b472 100644 --- a/frontend/src/app/projects/models/init-model/init-model.component.ts +++ b/frontend/src/app/projects/models/init-model/init-model.component.ts @@ -2,7 +2,7 @@ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors * SPDX-License-Identifier: Apache-2.0 */ -import { NgIf, NgFor, AsyncPipe } from '@angular/common'; +import { NgFor, AsyncPipe } from '@angular/common'; import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { FormControl, @@ -34,10 +34,8 @@ import { ProjectWrapperService } from '../../service/project.service'; @Component({ selector: 'app-init-model', templateUrl: './init-model.component.html', - styleUrls: ['./init-model.component.css'], standalone: true, imports: [ - NgIf, FormsModule, ReactiveFormsModule, MatFormField, diff --git a/frontend/src/app/projects/project-detail/edit-project-metadata/edit-project-metadata.component.css b/frontend/src/app/projects/project-detail/edit-project-metadata/edit-project-metadata.component.css deleted file mode 100644 index 8535c6938a..0000000000 --- a/frontend/src/app/projects/project-detail/edit-project-metadata/edit-project-metadata.component.css +++ /dev/null @@ -1,4 +0,0 @@ -/* - * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors - * SPDX-License-Identifier: Apache-2.0 - */ diff --git a/frontend/src/app/projects/project-detail/edit-project-metadata/edit-project-metadata.component.html b/frontend/src/app/projects/project-detail/edit-project-metadata/edit-project-metadata.component.html index c6cdc9ca28..c922ba0fcf 100644 --- a/frontend/src/app/projects/project-detail/edit-project-metadata/edit-project-metadata.component.html +++ b/frontend/src/app/projects/project-detail/edit-project-metadata/edit-project-metadata.component.html @@ -9,18 +9,21 @@ Name - The project name is required. - A project with a similar name already exists. - If you proceed, the project slug will be changed to - {{ newSlug }} - Please make sure to update all - references. + @if (form.controls.name.errors?.required) { + The project name is required. + } + + @if (form.controls.name.errors?.uniqueSlug) { + A project with a similar name already exists. + } + + @if (project?.slug !== newSlug && form.controls.name.valid) { + If you proceed, the project slug will be changed to + {{ newSlug }} - Please make sure to update all + references. + }
diff --git a/frontend/src/app/projects/project-detail/edit-project-metadata/edit-project-metadata.component.ts b/frontend/src/app/projects/project-detail/edit-project-metadata/edit-project-metadata.component.ts index fa2afa34a8..cb9993ea4b 100644 --- a/frontend/src/app/projects/project-detail/edit-project-metadata/edit-project-metadata.component.ts +++ b/frontend/src/app/projects/project-detail/edit-project-metadata/edit-project-metadata.component.ts @@ -2,7 +2,7 @@ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors * SPDX-License-Identifier: Apache-2.0 */ -import { NgIf, NgFor } from '@angular/common'; +import { NgFor } from '@angular/common'; import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core'; import { FormControl, @@ -34,7 +34,6 @@ import { ProjectWrapperService } from '../../service/project.service'; @Component({ selector: 'app-edit-project-metadata', templateUrl: './edit-project-metadata.component.html', - styleUrls: ['./edit-project-metadata.component.css'], standalone: true, imports: [ FormsModule, @@ -42,7 +41,6 @@ import { ProjectWrapperService } from '../../service/project.service'; MatFormField, MatLabel, MatInput, - NgIf, MatError, MatHint, MatRadioGroup, diff --git a/frontend/src/app/projects/project-detail/project-details.component.css b/frontend/src/app/projects/project-detail/project-details.component.css deleted file mode 100644 index c355968ae2..0000000000 --- a/frontend/src/app/projects/project-detail/project-details.component.css +++ /dev/null @@ -1,12 +0,0 @@ -/* - * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -#title { - margin-left: 10px; -} - -.metadata-item { - flex-basis: 50%; -} diff --git a/frontend/src/app/projects/project-detail/project-details.component.ts b/frontend/src/app/projects/project-detail/project-details.component.ts index fc0ce26c00..e2c74ac5a6 100644 --- a/frontend/src/app/projects/project-detail/project-details.component.ts +++ b/frontend/src/app/projects/project-detail/project-details.component.ts @@ -2,7 +2,6 @@ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors * SPDX-License-Identifier: Apache-2.0 */ -import { NgIf } from '@angular/common'; import { Component } from '@angular/core'; import { ProjectUserService } from 'src/app/projects/project-detail/project-users/service/project-user.service'; import { CreateReadonlySessionComponent } from '../../sessions/user-sessions-wrapper/create-session/create-readonly-session/create-readonly-session.component'; @@ -14,13 +13,11 @@ import { ProjectUserSettingsComponent } from './project-users/project-user-setti @Component({ selector: 'app-project-details', templateUrl: './project-details.component.html', - styleUrls: ['./project-details.component.css'], standalone: true, imports: [ ProjectMetadataComponent, CreateReadonlySessionComponent, ModelOverviewComponent, - NgIf, ProjectUserSettingsComponent, ], }) diff --git a/frontend/src/app/projects/project-detail/project-users/project-audit-log/project-audit-log.component.html b/frontend/src/app/projects/project-detail/project-users/project-audit-log/project-audit-log.component.html index 23b74a327e..126038949c 100644 --- a/frontend/src/app/projects/project-detail/project-users/project-audit-log/project-audit-log.component.html +++ b/frontend/src/app/projects/project-detail/project-users/project-audit-log/project-audit-log.component.html @@ -25,7 +25,7 @@ let idx = index " > - + @if (event === undefined || event === "loading") { - - + } @else { @@ -57,7 +56,7 @@ - + }
diff --git a/frontend/src/app/projects/project-detail/project-users/project-audit-log/project-audit-log.component.ts b/frontend/src/app/projects/project-detail/project-users/project-audit-log/project-audit-log.component.ts index e59c9c20b6..a2cb7dc8c3 100644 --- a/frontend/src/app/projects/project-detail/project-users/project-audit-log/project-audit-log.component.ts +++ b/frontend/src/app/projects/project-detail/project-users/project-audit-log/project-audit-log.component.ts @@ -2,7 +2,7 @@ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors * SPDX-License-Identifier: Apache-2.0 */ -import { NgFor, NgIf, AsyncPipe, DatePipe } from '@angular/common'; +import { NgFor, AsyncPipe, DatePipe } from '@angular/common'; import { AfterViewInit, Component, @@ -22,7 +22,7 @@ import { TextLineSkeletonLoaderComponent } from '../../../../helpers/skeleton-lo templateUrl: './project-audit-log.component.html', styleUrls: ['./project-audit-log.component.css'], standalone: true, - imports: [NgFor, NgIf, TextLineSkeletonLoaderComponent, AsyncPipe, DatePipe], + imports: [NgFor, TextLineSkeletonLoaderComponent, AsyncPipe, DatePipe], }) @UntilDestroy() export class ProjectAuditLogComponent implements OnInit, AfterViewInit { diff --git a/frontend/src/app/projects/project-detail/project-users/project-audit-log/project-audit-log.stories.ts b/frontend/src/app/projects/project-detail/project-users/project-audit-log/project-audit-log.stories.ts new file mode 100644 index 0000000000..fd1cba0e0a --- /dev/null +++ b/frontend/src/app/projects/project-detail/project-users/project-audit-log/project-audit-log.stories.ts @@ -0,0 +1,31 @@ +/* + * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors + * SPDX-License-Identifier: Apache-2.0 + */ +import { MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; +import { dialogWrapper } from '../../../../../storybook/decorators'; +import { ProjectAuditLogComponent } from './project-audit-log.component'; + +const meta: Meta = { + title: 'Project Components / Audit Log', + component: ProjectAuditLogComponent, +}; + +export default meta; +type Story = StoryObj; + +export const General: Story = { + args: {}, + decorators: [ + moduleMetadata({ + providers: [ + { + provide: MAT_DIALOG_DATA, + useValue: [], + }, + ], + }), + dialogWrapper, + ], +}; diff --git a/frontend/src/app/sessions/user-sessions-wrapper/create-session/create-readonly-session/create-readonly-session.component.html b/frontend/src/app/sessions/user-sessions-wrapper/create-session/create-readonly-session/create-readonly-session.component.html index 6b26967451..4b1e0b6269 100644 --- a/frontend/src/app/sessions/user-sessions-wrapper/create-session/create-readonly-session/create-readonly-session.component.html +++ b/frontend/src/app/sessions/user-sessions-wrapper/create-session/create-readonly-session/create-readonly-session.component.html @@ -3,7 +3,7 @@ ~ SPDX-License-Identifier: Apache-2.0 -->
-

Read-only Sessions

+

Read-only Sessions

diff --git a/frontend/src/app/settings/core/pipelines-overview/pipelines-overview.component.html b/frontend/src/app/settings/core/pipelines-overview/pipelines-overview.component.html index 56ebfc9c1c..2c5d73d17d 100644 --- a/frontend/src/app/settings/core/pipelines-overview/pipelines-overview.component.html +++ b/frontend/src/app/settings/core/pipelines-overview/pipelines-overview.component.html @@ -5,234 +5,277 @@

General monitoring

- -
-
- check Guacamole is - alive -
-
- error Guacamole is not - alive -
-
- check The database is - alive -
-
- error The database is - not alive -
-
- check The Kubernetes - operator is alive -
-
- error The Kubernetes - operator is not alive -
-
-
- -

Projects Monitoring

-
- -
-
- Project
- {{ projectStatus.project_slug }} - open_in_new -
- warning - {{ warning }} -
-
- check - All checks were successful. -
-
-
-
- -

Models monitoring

- -
-
- Loading the monitoring overview can take up to one minute. -
+ @if (!generalHealth) { -
-
-
- Project
- {{ modelStatus.project_slug }} - open_in_new - Model
- {{ modelStatus.model_slug }} open_in_new -
- -
- check The primary - linked Git repository is accessible -
-
- settings No Git - repository is linked to this model -
-
- error The primary - linked Git repository is not accessible -
-
-
- -
- check Last backup - has status '{{ modelStatus.pipeline_status }}'' -
-
- sync Last backup - has status '{{ modelStatus.pipeline_status }}'' -
-
- error Last backup - has status '{{ modelStatus.pipeline_status }}'' + } @else { +
+ @if (generalHealth.guacamole) { +
+ check Guacamole is + alive
-
- settings No last - backup pipeline run has been found. + } @else { +
+ error Guacamole is + not alive
-
-
- -
- check The last - model badge update was successful + } + + @if (generalHealth.database) { +
+ check The database + is alive
-
- error The last - model badge update or fetching has failed + } @else { +
+ error The database + is not alive
-
- settings - No model badge configured + } + + @if (generalHealth.operator) { +
+ check The + Kubernetes operator is alive
-
- settings - The model badge is currently not supported for the linked Git - instance. + } @else { +
+ error The + Kubernetes operator is not alive
-
+ } +
+ } +
+ +

Projects Monitoring

+
+ @if (!projectStatuses) { + + } @else { + @for (projectStatus of projectStatuses; track projectStatus.project_slug) {
- -
- check Last diagram - cache update was successful -
- error Last diagram - cache update or fetching has failed -
-
- settings - No diagram cache configured -
-
- settings - The diagram cache is currently not supported for the linked Git server - instance + Project
+ {{ projectStatus.project_slug }} + open_in_new + @for (warning of projectStatus.warnings; track warning) { +
+ warning + {{ warning }} +
+ } + + @if (!projectStatus.warnings.length) { +
+ check + All checks were successful. +
+ }
+ } + } +
+ +

Models monitoring

+
+ @if (!toolmodelStatuses) { +
+ Loading the monitoring overview can take up to one minute. +
+ +
+ } @else { + @for (modelStatus of toolmodelStatuses; track $index) {
- -
- warning - {{ warning }} +
+ Project
+ {{ modelStatus.project_slug }} + open_in_new + Model
+ {{ modelStatus.model_slug }} + open_in_new +
+ + @switch (modelStatus.primary_git_repository_status) { + @case ("accessible") { +
+ check The + primary linked Git repository is accessible +
+ } + @case ("unset") { +
+ settings No + Git repository is linked to this model +
+ } + @case ("inaccessible") { +
+ error The + primary linked Git repository is not accessible +
+ } + } +
+
+ + @if (modelStatus.pipeline_status === "success") { +
+ check Last + backup has status '{{ modelStatus.pipeline_status }}'' +
+ } @else if ( + modelStatus.pipeline_status === "pending" || + modelStatus.pipeline_status === "scheduled" || + modelStatus.pipeline_status === "running" + ) { +
+ sync Last + backup has status '{{ modelStatus.pipeline_status }}'' +
+ } @else if ( + modelStatus.pipeline_status === "timeout" || + modelStatus.pipeline_status === "failure" || + modelStatus.pipeline_status === "unknown" + ) { +
+ error Last + backup has status '{{ modelStatus.pipeline_status }}'' +
+ } @else if (modelStatus.pipeline_status === null) { +
+ settings No + last backup pipeline run has been found. +
+ } +
+
+ + @switch (modelStatus.model_badge_status) { + @case ("success") { +
+ check The + last model badge update was successful +
+ } + @case ("failure") { +
+ error The + last model badge update or fetching has failed +
+ } + @case ("unconfigured") { +
+ settings + No model badge configured +
+ } + @case ("unsupported") { +
+ settings + The model badge is currently not supported for the linked Git + instance. +
+ } + } +
+
+ + @switch (modelStatus.diagram_cache_status) { + @case ("success") { +
+ check Last + diagram cache update was successful +
+ } + @case ("failure") { +
+ error Last + diagram cache update or fetching has failed +
+ } + @case ("unconfigured") { +
+ settings + No diagram cache configured +
+ } + @case ("unsupported") { +
+ settings + The diagram cache is currently not supported for the linked + Git server instance +
+ } + } +
+ +
+ + @for (warning of modelStatus.warnings; track $index) { +
+ warning + {{ warning }} +
+ } +
-
-
+ } + }
diff --git a/frontend/src/app/settings/core/pipelines-overview/pipelines-overview.component.ts b/frontend/src/app/settings/core/pipelines-overview/pipelines-overview.component.ts index d2916d6ba1..cde639c7eb 100644 --- a/frontend/src/app/settings/core/pipelines-overview/pipelines-overview.component.ts +++ b/frontend/src/app/settings/core/pipelines-overview/pipelines-overview.component.ts @@ -2,7 +2,6 @@ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors * SPDX-License-Identifier: Apache-2.0 */ -import { NgIf, NgFor } from '@angular/common'; import { Component, OnInit } from '@angular/core'; import { MatIcon } from '@angular/material/icon'; import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; @@ -18,7 +17,7 @@ import { templateUrl: './pipelines-overview.component.html', styleUrls: ['./pipelines-overview.component.css'], standalone: true, - imports: [NgIf, NgxSkeletonLoaderModule, MatIcon, NgFor], + imports: [NgxSkeletonLoaderModule, MatIcon], }) export class PipelinesOverviewComponent implements OnInit { constructor(private monitoringService: MonitoringService) {}