Skip to content

Commit 77a1606

Browse files
sguiheuxsguiheux
authored
refactor(ui): remove semantic from workflow/env/admin/favorite (#6311)
1 parent ce989ac commit 77a1606

33 files changed

+434
-355
lines changed

‎ui/src/app/shared/project-breadcrumb/project-breadcrumb.scss

+4
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,7 @@
1717
border-right: none;
1818
}
1919
}
20+
21+
nz-breadcrumb {
22+
display: inline;
23+
}

‎ui/src/app/shared/shared.module.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
114114
import { en_US, NZ_I18N } from 'ng-zorro-antd/i18n';
115115
import { NzIconModule } from 'ng-zorro-antd/icon';
116116
import { IconDefinition } from '@ant-design/icons-angular';
117-
import { AimOutline, ArrowDownOutline, ArrowRightOutline, AudioOutline, AudioMutedOutline, BellFill, BookOutline, CalendarOutline, CaretDownFill, CaretRightFill, CaretUpFill, CheckOutline, CodeOutline, CopyOutline, CrownOutline, DeleteOutline, DragOutline, EyeInvisibleOutline, EyeOutline, FieldTimeOutline, FileTextOutline, KeyOutline,
117+
import { AimOutline, ArrowDownOutline, ArrowRightOutline, AudioOutline, AudioMutedOutline, BellFill, BookOutline, CalendarOutline, CaretDownFill, CaretRightFill, CaretUpFill, CheckOutline, CodeOutline, CopyOutline, CrownOutline, DeleteOutline, DragOutline, EyeInvisibleOutline, EyeOutline, FieldTimeOutline, FileTextOutline, FilterOutline, KeyOutline,
118118
HighlightFill, HistoryOutline, InfoCircleOutline, LockOutline, PhoneFill, PlayCircleOutline, PlusOutline, PlusSquareOutline, QuestionOutline, QuestionCircleOutline, RestOutline, SafetyCertificateOutline, SaveOutline, SettingFill, ShareAltOutline, StarOutline, StarFill, StopOutline, SyncOutline,
119119
TableOutline, TagsOutline, ToolFill, UndoOutline, UnlockFill, UnorderedListOutline, UploadOutline, UserOutline, WarningOutline, WarningFill } from '@ant-design/icons-angular/icons'
120120
import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
@@ -148,7 +148,7 @@ const ngZorroConfig: NzConfig = {
148148
};
149149

150150
const icons: IconDefinition[] = [ AimOutline, ArrowDownOutline, ArrowRightOutline, AudioOutline, AudioMutedOutline, BellFill, BookOutline, CalendarOutline, CaretDownFill, CaretRightFill, CaretUpFill, CheckOutline, CodeOutline, CopyOutline, CrownOutline, DeleteOutline, DragOutline,
151-
EyeInvisibleOutline, EyeOutline, FileTextOutline, FieldTimeOutline, KeyOutline, HighlightFill, HistoryOutline, InfoCircleOutline, LockOutline, PhoneFill, PlayCircleOutline, PlusOutline, PlusSquareOutline, QuestionOutline, QuestionCircleOutline,
151+
EyeInvisibleOutline, EyeOutline, FileTextOutline, FieldTimeOutline, FilterOutline, KeyOutline, HighlightFill, HistoryOutline, InfoCircleOutline, LockOutline, PhoneFill, PlayCircleOutline, PlusOutline, PlusSquareOutline, QuestionOutline, QuestionCircleOutline,
152152
RestOutline, SafetyCertificateOutline, SaveOutline, SettingFill, ShareAltOutline, StarOutline, StarFill, StopOutline, SyncOutline, TableOutline, TagsOutline, ToolFill, UndoOutline, UnlockFill, UnorderedListOutline, UploadOutline, UserOutline, WarningOutline, WarningFill ];
153153

154154
@NgModule({

‎ui/src/app/views/admin/hook-task/show/hook-task.show.html

+53-46
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,60 @@
11
<div class="wrapper">
22
<app-breadcrumb [path]="path"></app-breadcrumb>
33
<app-scrollview class="scrollview">
4-
<div class="ui form">
5-
<div class="ui grid">
6-
<div class="ui row">
7-
<div class="wide column">
8-
<h3>{{ 'workflow_node_hook_form_config' | translate }}</h3>
9-
<br />
4+
<form nz-form>
5+
6+
<nz-row>
7+
<nz-col [nzSpan]="24">
8+
<h2>Hook configuration</h2>
109
<ng-container *ngIf="task && task.config">
11-
<div class="inline fields" *ngFor="let k of task.config | keys">
12-
<div class="four wide field"><label>{{k}}</label></div>
13-
<input type="text" [ngModel]="task.config[k].value" [readonly]="true" *ngIf="k !== 'payload'">
14-
<ng-container *ngIf="k === 'payload'">
15-
<codemirror class="code" [ngModel]="task.config[k].value" [config]="codeMirrorConfig"
16-
#textareaCodeMirror>
17-
</codemirror>
18-
</ng-container>
19-
</div>
10+
<nz-form-item *ngFor="let k of task.config | keys">
11+
<nz-form-label [nzSpan]="2">{{k}}</nz-form-label>
12+
<nz-form-control>
13+
<input nz-input type="text" name="value-{{k}}" [ngModel]="task.config[k].value" [readonly]="true" *ngIf="k !== 'payload'">
14+
<ng-container *ngIf="k === 'payload'">
15+
<codemirror class="code"name="value-{{k}}" [ngModel]="task.config[k].value" [config]="codeMirrorConfig"
16+
#textareaCodeMirror>
17+
</codemirror>
18+
</ng-container>
19+
</nz-form-control>
20+
</nz-form-item>
2021
</ng-container>
21-
</div>
22-
</div>
23-
<div class="ui row">
24-
<div [ngClass]="{sixteen: !selectedExecution, eight: selectedExecution, wide: true, column: true}">
25-
<h3>{{ 'hook_task_execs' | translate }}</h3>
22+
</nz-col>
23+
</nz-row>
24+
<nz-row>
25+
<nz-col [nzSpan]="selectedExecution?11:24">
26+
<h2>Executions</h2>
2627
<app-data-table [withPagination]="10" [columns]="columns" [data]="executions" [loading]="loading"></app-data-table>
27-
</div>
28-
<div class="eight wide column" *ngIf="selectedExecution">
29-
<h3>{{'workflow_hook_log_title' | translate}}</h3>
30-
<br />
31-
<div class="inline fields" *ngIf="selectedExecution.workflow_run">
32-
<div class="four wide field"><label>{{'workflow_hook_log_workflow_run' | translate}}</label></div>
33-
<input type="text" [value]="selectedExecution.workflow_run" [readonly]="true">
34-
</div>
35-
<div class="inline fields">
36-
<div class="four wide field"><label>{{'worker_model_status' | translate}}</label></div>
37-
<input type="text" [value]="selectedExecution.status" [readonly]="true">
38-
</div>
39-
<div class="inline fields" *ngIf="selectedExecution.last_error">
40-
<div class="four wide field"><label>{{'common_error' | translate}}</label></div>
41-
<input type="text" [value]="selectedExecution.last_error" [readonly]="true">
42-
</div>
43-
<div class="inline fields" *ngIf="selectedExecutionBody">
44-
<div class="four wide field"><label>Body</label></div>
45-
<codemirror class="code" [ngModel]="selectedExecutionBody" [config]="codeMirrorConfig">
46-
</codemirror>
47-
</div>
48-
</div>
49-
</div>
50-
</div>
51-
</div>
28+
</nz-col>
29+
<nz-col [nzSpan]="12" [nzOffset]="1" *ngIf="selectedExecution">
30+
<h2>{{'workflow_hook_log_title' | translate}}</h2>
31+
<nz-form-item *ngIf="selectedExecution.workflow_run">
32+
<nz-form-label [nzSpan]="3">{{'workflow_hook_log_workflow_run' | translate}}</nz-form-label>
33+
<nz-form-control>
34+
<input nz-input type="text" name="hook_log" [value]="selectedExecution?.workflow_run" [readonly]="true">
35+
</nz-form-control>
36+
</nz-form-item>
37+
<nz-form-item>
38+
<nz-form-label [nzSpan]="3">Status</nz-form-label>
39+
<nz-form-control>
40+
<input nz-input type="text" name="hook_status" [value]="selectedExecution.status" [readonly]="true">
41+
</nz-form-control>
42+
</nz-form-item>
43+
<nz-form-item *ngIf="selectedExecution.last_error">
44+
<nz-form-label [nzSpan]="3">{{'common_error' | translate}}</nz-form-label>
45+
<nz-form-control>
46+
<input nz-input type="text" name="hook_error" [value]="selectedExecution?.last_error" [readonly]="true">
47+
</nz-form-control>
48+
</nz-form-item>
49+
<nz-form-item *ngIf="selectedExecutionBody">
50+
<nz-form-label [nzSpan]="3">Body</nz-form-label>
51+
<nz-form-control>
52+
<codemirror class="code" name="hook_body" [ngModel]="selectedExecutionBody" [config]="codeMirrorConfig"></codemirror>
53+
</nz-form-control>
54+
</nz-form-item>
55+
</nz-col>
56+
</nz-row>
57+
58+
</form>
5259
</app-scrollview>
53-
</div>
60+
</div>

‎ui/src/app/views/admin/service/list/service.list.html

+37-44
Original file line numberDiff line numberDiff line change
@@ -5,61 +5,54 @@
55
<ng-template #globalsPart>
66
<div class="paddingContent">
77
<div class="viewContent">
8-
<div class="ui grid">
9-
<div class="wide column">
8+
<nz-row>
9+
<nz-col [nzSpan]="24">
1010
<h1>
11-
{{'services_list' | translate}}
12-
<div class="right floated">
13-
<div class="ui pointer label" [ngClass]="{'red': globalStatus.status==='AL', 'orange': globalStatus.status==='WARN', 'green': globalStatus.status==='OK'}"
14-
(click)="filter=globalStatus.status">
11+
CDS Services
12+
<div class="floatRight">
13+
<nz-tag class="pointer" [nzColor]="globalStatus.status==='AL'?'error':(globalStatus.status==='WARN'?'warning': 'success')" (click)="filter=globalStatus.status">
1514
{{globalStatus.name}} {{globalStatus.status}} - {{globalStatus.value}}
16-
</div>
17-
18-
<div class="ui pointer label" [ngClass]="{'red': globalVersion.status==='AL', 'orange': globalVersion.status==='WARN', 'green': globalVersion.status==='OK'}"
19-
(click)="filter='/Version'">
15+
</nz-tag>
16+
<nz-tag class="pointer" (click)="filter='/Version'" [ngClass]="{'red': globalVersion.status==='AL', 'orange': globalVersion.status==='WARN', 'green': globalVersion.status==='OK'}">
2017
{{globalVersion.name}} {{globalVersion.status}} - {{globalVersion.value}}
21-
</div>
18+
</nz-tag>
2219
</div>
2320
</h1>
24-
</div>
25-
</div>
26-
27-
<div class="ui stackable four cards">
28-
<div class="ui card" *ngFor="let g of globals">
29-
<div class="content pointer" nz-tooltip nzTooltipTitle="Click to filter list"
30-
(click)="filter=g.name">
31-
<div class="ui horizontal label right floated" [ngClass]="{'red': g.status==='AL', 'orange': g.status==='WARN', 'green': g.status==='OK'}">
32-
{{g.status}}
21+
</nz-col>
22+
</nz-row>
23+
<nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32 }">
24+
<nz-col class="cardContainer" (click)="filter=g.name" *ngFor="let g of globals" [nzSpan]="6">
25+
<div class="entity-card">
26+
<div class="title">
27+
<nz-tag class="floatRight" [nzColor]="g.status==='AL'?'error':(g.status==='WARN'?'warning': 'success')">
28+
{{g.status}}
29+
</nz-tag>
30+
{{ g.name }}
3331
</div>
34-
<div class="header" [innerText]="g.name"></div>
35-
</div>
36-
<div class="extra content">
37-
<div class="meta" *ngIf="g.value === '0'">
38-
n/a
39-
</div>
40-
<div class="ui middle aligned divided list" *ngFor="let srv of g.services; index as idx; first as isFirst">
41-
<div class="item">
42-
<div class="right floated content">
43-
<i class="filter icon pointer" nz-tooltip nzTooltipTitle="Click for filter list"
44-
popupPlacement="top left" (click)="filter=srv.name"></i>
45-
</div>
46-
<div class="content">
47-
<a class="ui basic" [routerLink]="[srv.name]" nz-tooltip nzTooltipTitle="See details">
32+
<div class="description">
33+
<div *ngIf="g.value === '0'">
34+
n/a
35+
</div>
36+
<ul>
37+
<li *ngFor="let srv of g.services; index as idx; first as isFirst">
38+
<div class="floatRight">
39+
<span class="pointer" nz-icon nzType="filter" nzTheme="outline" nz-tooltip nzTooltipTitle="Click for filter list"
40+
popupPlacement="top left" (click)="filter=srv.name"></span>
41+
</div>
42+
<a [routerLink]="[srv.name]" nz-tooltip nzTooltipTitle="See details">
4843
<ng-container [ngSwitch]="srv.status">
49-
<i class="check green icon" *ngSwitchCase="'OK'" title="{{srv.status}}"></i>
50-
<i class="remove red icon" *ngSwitchCase="'AL'" title="{{srv.status}}"></i>
51-
<i class="warning sign icon orange" *ngSwitchCase="'WARN'"
52-
title="{{srv.status}}"></i>
44+
<span nz-icon nzType="check" nzTheme="outline" *ngSwitchCase="'OK'" class="green" title="{{srv.status}}"></span>
45+
<span nz-icon nzType="close" nzTheme="outline" *ngSwitchCase="'AL'" class="red" title="{{srv.status}}"></span>
46+
<span nz-icon nzType="warning" nzTheme="outline" *ngSwitchCase="'WARN'" class="orange" title="{{srv.status}}"></span>
5347
</ng-container>
5448
{{srv.name}}
5549
</a>
56-
</div>
57-
</div>
50+
</li>
51+
</ul>
5852
</div>
5953
</div>
60-
</div>
61-
</div>
62-
54+
</nz-col>
55+
</nz-row>
6356
<app-data-table [filter]="filter" [withFilter]="filteredStatusLines" [withPagination]="25" [columns]="columns" [data]="status.lines" [loading]="loading">
6457
</app-data-table>
6558

@@ -84,7 +77,7 @@ <h1>API Debug</h1>
8477
</div>
8578
</ng-template>
8679
<ng-template #loadingPart>
87-
<div class="ui text active loader">{{ 'common_loading' | translate }}</div>
80+
<nz-spin nzTip="Loading..."></nz-spin>
8881
</ng-template>
8982
</app-scrollview>
9083
</div>

‎ui/src/app/views/admin/service/list/service.list.scss

+41
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,44 @@
88
margin-bottom: 50px;
99
}
1010
}
11+
12+
.floatRight {
13+
float: right;
14+
}
15+
16+
.pointer {
17+
cursor: pointer;
18+
}
19+
20+
.red {
21+
color: $cds_color_red;
22+
}
23+
.green {
24+
color: $cds_color_green;
25+
}
26+
.orange {
27+
color: $cds_color_orange;
28+
}
29+
30+
.title {
31+
word-wrap: break-word;
32+
font-weight: 700;
33+
font-size: 1.2em;
34+
line-height: 1.2em;
35+
margin-bottom: 20px;
36+
}
37+
38+
nz-col {
39+
margin-bottom: 30px;
40+
}
41+
42+
ul {
43+
padding-left: 10px;
44+
li {
45+
list-style: none;
46+
}
47+
}
48+
49+
nz-spin {
50+
margin-top: 30px;
51+
}

‎ui/src/app/views/admin/service/show/service.show.html

+8-17
Original file line numberDiff line numberDiff line change
@@ -3,47 +3,38 @@
33
<app-scrollview class="scrollview">
44
<div *ngIf="!loading; then servicePart;else loadingPart"></div>
55
<ng-template #servicePart>
6-
<div class="ui red message" *ngIf="service.status==='AL'">
7-
{{'service_alert' | translate}}
8-
</div>
9-
10-
<div class="ui orange message" *ngIf="service.status==='WARN'">
11-
{{'service_warning' | translate}}
12-
</div>
13-
14-
<div class="ui green message" *ngIf="service.status==='OK'">
15-
{{'service_ok' | translate}}
16-
</div>
17-
6+
<nz-alert nzType="error" *ngIf="service.status==='AL'" nzMessage="{{'service_alert' | translate}}"></nz-alert>
7+
<nz-alert nzType="warning" *ngIf="service.status==='WARN'" nzMessage="{{'service_warning' | translate}}"></nz-alert>
8+
<nz-alert nzType="success" *ngIf="service.status==='OK'" nzMessage="{{'service_ok' | translate}}"></nz-alert>
189
<div *ngIf="service.group">
1910
<h4>Group</h4>
2011
<p><a href="#" [routerLink]="['/settings', 'group', service.group.name]">{{service.group.name}}</a></p>
2112
</div>
2213

23-
<h4>Heartbeat</h4>
14+
<h2>Heartbeat</h2>
2415
<p>
2516
<span nz-tooltip [nzTooltipTitle]="service.last_heartbeat| date:'short'" nzTooltipPlacement="topLeft">{{service.last_heartbeat
2617
| amTimeAgo}}</span>
2718
</p>
2819

29-
<h4 *ngIf="service.version">Version</h4>
20+
<h2 *ngIf="service.version">Version</h2>
3021
<p *ngIf="service.version">
3122
{{service.version}}
3223
</p>
3324

3425

35-
<h4>Status</h4>
26+
<h2>Status</h2>
3627

3728
<app-data-table [filter]="filter" [withFilter]="filteredStatusLines" [withPagination]="25" [columns]="columns" [data]="service.monitoring_status.lines" [loading]="loading">
3829
</app-data-table>
3930

40-
<h4>Configuration</h4>
31+
<h2>Configuration</h2>
4132
<codemirror [(ngModel)]="config" [config]="codeMirrorConfig" #textareaCodeMirror>
4233
</codemirror>
4334

4435
</ng-template>
4536
<ng-template #loadingPart>
46-
<div class="ui text active loader">{{ 'common_loading' | translate }}</div>
37+
<nz-spin nzTip="Loading..."></nz-spin>
4738
</ng-template>
4839
</app-scrollview>
4940
</div>

‎ui/src/app/views/admin/service/show/service.show.scss

+8
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,11 @@
22
.code {
33
width: 100%;
44
}
5+
6+
nz-alert {
7+
margin-bottom: 15px;
8+
}
9+
10+
nz-spin {
11+
margin-top: 30px;
12+
}

‎ui/src/app/views/admin/worker-model-pattern/list/worker-model-pattern.list.html

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<div class="wrapper">
22
<app-breadcrumb [path]="path">
3-
<a class="ui right floated green button small buttonBreadcrumb" [routerLink]="['add']">{{ 'btn_add' | translate
4-
}}</a></app-breadcrumb>
3+
<button nz-button nzType="primary" class="buttonBreadcrumb"
4+
[routerLink]="['add']">Add</button>
5+
</app-breadcrumb>
56
<app-scrollview class="scrollview">
67
<app-data-table [withFilter]="filter" [columns]="columns" [data]="workerModelPatterns" [loading]="loading">
78
</app-data-table>
89
</app-scrollview>
9-
</div>
10+
</div>

0 commit comments

Comments
 (0)