Skip to content

Commit

Permalink
refactor(ui): remove semantic from workflow/env/admin/favorite (#6311)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sguiheux
sguiheux committed Sep 30, 2022
1 parent ce989ac commit 77a1606
Show file tree
Hide file tree
Showing 33 changed files with 434 additions and 355 deletions.
4 changes: 4 additions & 0 deletions ui/src/app/shared/project-breadcrumb/project-breadcrumb.scss
View file
Expand Up @@ -17,3 +17,7 @@
border-right: none;
}
}

nz-breadcrumb {
display: inline;
}
4 changes: 2 additions & 2 deletions ui/src/app/shared/shared.module.ts
View file
Expand Up @@ -114,7 +114,7 @@ import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
import { en_US, NZ_I18N } from 'ng-zorro-antd/i18n';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { IconDefinition } from '@ant-design/icons-angular';
import { AimOutline, ArrowDownOutline, ArrowRightOutline, AudioOutline, AudioMutedOutline, BellFill, BookOutline, CalendarOutline, CaretDownFill, CaretRightFill, CaretUpFill, CheckOutline, CodeOutline, CopyOutline, CrownOutline, DeleteOutline, DragOutline, EyeInvisibleOutline, EyeOutline, FieldTimeOutline, FileTextOutline, KeyOutline,
import { AimOutline, ArrowDownOutline, ArrowRightOutline, AudioOutline, AudioMutedOutline, BellFill, BookOutline, CalendarOutline, CaretDownFill, CaretRightFill, CaretUpFill, CheckOutline, CodeOutline, CopyOutline, CrownOutline, DeleteOutline, DragOutline, EyeInvisibleOutline, EyeOutline, FieldTimeOutline, FileTextOutline, FilterOutline, KeyOutline,
HighlightFill, HistoryOutline, InfoCircleOutline, LockOutline, PhoneFill, PlayCircleOutline, PlusOutline, PlusSquareOutline, QuestionOutline, QuestionCircleOutline, RestOutline, SafetyCertificateOutline, SaveOutline, SettingFill, ShareAltOutline, StarOutline, StarFill, StopOutline, SyncOutline,
TableOutline, TagsOutline, ToolFill, UndoOutline, UnlockFill, UnorderedListOutline, UploadOutline, UserOutline, WarningOutline, WarningFill } from '@ant-design/icons-angular/icons'
import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
Expand Down Expand Up @@ -148,7 +148,7 @@ const ngZorroConfig: NzConfig = {
};

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

@NgModule({
Expand Down
99 changes: 53 additions & 46 deletions ui/src/app/views/admin/hook-task/show/hook-task.show.html
View file
@@ -1,53 +1,60 @@
<div class="wrapper">
<app-breadcrumb [path]="path"></app-breadcrumb>
<app-scrollview class="scrollview">
<div class="ui form">
<div class="ui grid">
<div class="ui row">
<div class="wide column">
<h3>{{ 'workflow_node_hook_form_config' | translate }}</h3>
<br />
<form nz-form>

<nz-row>
<nz-col [nzSpan]="24">
<h2>Hook configuration</h2>
<ng-container *ngIf="task && task.config">
<div class="inline fields" *ngFor="let k of task.config | keys">
<div class="four wide field"><label>{{k}}</label></div>
<input type="text" [ngModel]="task.config[k].value" [readonly]="true" *ngIf="k !== 'payload'">
<ng-container *ngIf="k === 'payload'">
<codemirror class="code" [ngModel]="task.config[k].value" [config]="codeMirrorConfig"
#textareaCodeMirror>
</codemirror>
</ng-container>
</div>
<nz-form-item *ngFor="let k of task.config | keys">
<nz-form-label [nzSpan]="2">{{k}}</nz-form-label>
<nz-form-control>
<input nz-input type="text" name="value-{{k}}" [ngModel]="task.config[k].value" [readonly]="true" *ngIf="k !== 'payload'">
<ng-container *ngIf="k === 'payload'">
<codemirror class="code"name="value-{{k}}" [ngModel]="task.config[k].value" [config]="codeMirrorConfig"
#textareaCodeMirror>
</codemirror>
</ng-container>
</nz-form-control>
</nz-form-item>
</ng-container>
</div>
</div>
<div class="ui row">
<div [ngClass]="{sixteen: !selectedExecution, eight: selectedExecution, wide: true, column: true}">
<h3>{{ 'hook_task_execs' | translate }}</h3>
</nz-col>
</nz-row>
<nz-row>
<nz-col [nzSpan]="selectedExecution?11:24">
<h2>Executions</h2>
<app-data-table [withPagination]="10" [columns]="columns" [data]="executions" [loading]="loading"></app-data-table>
</div>
<div class="eight wide column" *ngIf="selectedExecution">
<h3>{{'workflow_hook_log_title' | translate}}</h3>
<br />
<div class="inline fields" *ngIf="selectedExecution.workflow_run">
<div class="four wide field"><label>{{'workflow_hook_log_workflow_run' | translate}}</label></div>
<input type="text" [value]="selectedExecution.workflow_run" [readonly]="true">
</div>
<div class="inline fields">
<div class="four wide field"><label>{{'worker_model_status' | translate}}</label></div>
<input type="text" [value]="selectedExecution.status" [readonly]="true">
</div>
<div class="inline fields" *ngIf="selectedExecution.last_error">
<div class="four wide field"><label>{{'common_error' | translate}}</label></div>
<input type="text" [value]="selectedExecution.last_error" [readonly]="true">
</div>
<div class="inline fields" *ngIf="selectedExecutionBody">
<div class="four wide field"><label>Body</label></div>
<codemirror class="code" [ngModel]="selectedExecutionBody" [config]="codeMirrorConfig">
</codemirror>
</div>
</div>
</div>
</div>
</div>
</nz-col>
<nz-col [nzSpan]="12" [nzOffset]="1" *ngIf="selectedExecution">
<h2>{{'workflow_hook_log_title' | translate}}</h2>
<nz-form-item *ngIf="selectedExecution.workflow_run">
<nz-form-label [nzSpan]="3">{{'workflow_hook_log_workflow_run' | translate}}</nz-form-label>
<nz-form-control>
<input nz-input type="text" name="hook_log" [value]="selectedExecution?.workflow_run" [readonly]="true">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3">Status</nz-form-label>
<nz-form-control>
<input nz-input type="text" name="hook_status" [value]="selectedExecution.status" [readonly]="true">
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="selectedExecution.last_error">
<nz-form-label [nzSpan]="3">{{'common_error' | translate}}</nz-form-label>
<nz-form-control>
<input nz-input type="text" name="hook_error" [value]="selectedExecution?.last_error" [readonly]="true">
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="selectedExecutionBody">
<nz-form-label [nzSpan]="3">Body</nz-form-label>
<nz-form-control>
<codemirror class="code" name="hook_body" [ngModel]="selectedExecutionBody" [config]="codeMirrorConfig"></codemirror>
</nz-form-control>
</nz-form-item>
</nz-col>
</nz-row>

</form>
</app-scrollview>
</div>
</div>
81 changes: 37 additions & 44 deletions ui/src/app/views/admin/service/list/service.list.html
View file
Expand Up @@ -5,61 +5,54 @@
<ng-template #globalsPart>
<div class="paddingContent">
<div class="viewContent">
<div class="ui grid">
<div class="wide column">
<nz-row>
<nz-col [nzSpan]="24">
<h1>
{{'services_list' | translate}}
<div class="right floated">
<div class="ui pointer label" [ngClass]="{'red': globalStatus.status==='AL', 'orange': globalStatus.status==='WARN', 'green': globalStatus.status==='OK'}"
(click)="filter=globalStatus.status">
CDS Services
<div class="floatRight">
<nz-tag class="pointer" [nzColor]="globalStatus.status==='AL'?'error':(globalStatus.status==='WARN'?'warning': 'success')" (click)="filter=globalStatus.status">
{{globalStatus.name}} {{globalStatus.status}} - {{globalStatus.value}}
</div>

<div class="ui pointer label" [ngClass]="{'red': globalVersion.status==='AL', 'orange': globalVersion.status==='WARN', 'green': globalVersion.status==='OK'}"
(click)="filter='/Version'">
</nz-tag>
<nz-tag class="pointer" (click)="filter='/Version'" [ngClass]="{'red': globalVersion.status==='AL', 'orange': globalVersion.status==='WARN', 'green': globalVersion.status==='OK'}">
{{globalVersion.name}} {{globalVersion.status}} - {{globalVersion.value}}
</div>
</nz-tag>
</div>
</h1>
</div>
</div>

<div class="ui stackable four cards">
<div class="ui card" *ngFor="let g of globals">
<div class="content pointer" nz-tooltip nzTooltipTitle="Click to filter list"
(click)="filter=g.name">
<div class="ui horizontal label right floated" [ngClass]="{'red': g.status==='AL', 'orange': g.status==='WARN', 'green': g.status==='OK'}">
{{g.status}}
</nz-col>
</nz-row>
<nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32 }">
<nz-col class="cardContainer" (click)="filter=g.name" *ngFor="let g of globals" [nzSpan]="6">
<div class="entity-card">
<div class="title">
<nz-tag class="floatRight" [nzColor]="g.status==='AL'?'error':(g.status==='WARN'?'warning': 'success')">
{{g.status}}
</nz-tag>
{{ g.name }}
</div>
<div class="header" [innerText]="g.name"></div>
</div>
<div class="extra content">
<div class="meta" *ngIf="g.value === '0'">
n/a
</div>
<div class="ui middle aligned divided list" *ngFor="let srv of g.services; index as idx; first as isFirst">
<div class="item">
<div class="right floated content">
<i class="filter icon pointer" nz-tooltip nzTooltipTitle="Click for filter list"
popupPlacement="top left" (click)="filter=srv.name"></i>
</div>
<div class="content">
<a class="ui basic" [routerLink]="[srv.name]" nz-tooltip nzTooltipTitle="See details">
<div class="description">
<div *ngIf="g.value === '0'">
n/a
</div>
<ul>
<li *ngFor="let srv of g.services; index as idx; first as isFirst">
<div class="floatRight">
<span class="pointer" nz-icon nzType="filter" nzTheme="outline" nz-tooltip nzTooltipTitle="Click for filter list"
popupPlacement="top left" (click)="filter=srv.name"></span>
</div>
<a [routerLink]="[srv.name]" nz-tooltip nzTooltipTitle="See details">
<ng-container [ngSwitch]="srv.status">
<i class="check green icon" *ngSwitchCase="'OK'" title="{{srv.status}}"></i>
<i class="remove red icon" *ngSwitchCase="'AL'" title="{{srv.status}}"></i>
<i class="warning sign icon orange" *ngSwitchCase="'WARN'"
title="{{srv.status}}"></i>
<span nz-icon nzType="check" nzTheme="outline" *ngSwitchCase="'OK'" class="green" title="{{srv.status}}"></span>
<span nz-icon nzType="close" nzTheme="outline" *ngSwitchCase="'AL'" class="red" title="{{srv.status}}"></span>
<span nz-icon nzType="warning" nzTheme="outline" *ngSwitchCase="'WARN'" class="orange" title="{{srv.status}}"></span>
</ng-container>
{{srv.name}}
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>

</nz-col>
</nz-row>
<app-data-table [filter]="filter" [withFilter]="filteredStatusLines" [withPagination]="25" [columns]="columns" [data]="status.lines" [loading]="loading">
</app-data-table>

Expand All @@ -84,7 +77,7 @@ <h1>API Debug</h1>
</div>
</ng-template>
<ng-template #loadingPart>
<div class="ui text active loader">{{ 'common_loading' | translate }}</div>
<nz-spin nzTip="Loading..."></nz-spin>
</ng-template>
</app-scrollview>
</div>
41 changes: 41 additions & 0 deletions ui/src/app/views/admin/service/list/service.list.scss
View file
Expand Up @@ -8,3 +8,44 @@
margin-bottom: 50px;
}
}

.floatRight {
float: right;
}

.pointer {
cursor: pointer;
}

.red {
color: $cds_color_red;
}
.green {
color: $cds_color_green;
}
.orange {
color: $cds_color_orange;
}

.title {
word-wrap: break-word;
font-weight: 700;
font-size: 1.2em;
line-height: 1.2em;
margin-bottom: 20px;
}

nz-col {
margin-bottom: 30px;
}

ul {
padding-left: 10px;
li {
list-style: none;
}
}

nz-spin {
margin-top: 30px;
}
25 changes: 8 additions & 17 deletions ui/src/app/views/admin/service/show/service.show.html
View file
Expand Up @@ -3,47 +3,38 @@
<app-scrollview class="scrollview">
<div *ngIf="!loading; then servicePart;else loadingPart"></div>
<ng-template #servicePart>
<div class="ui red message" *ngIf="service.status==='AL'">
{{'service_alert' | translate}}
</div>

<div class="ui orange message" *ngIf="service.status==='WARN'">
{{'service_warning' | translate}}
</div>

<div class="ui green message" *ngIf="service.status==='OK'">
{{'service_ok' | translate}}
</div>

<nz-alert nzType="error" *ngIf="service.status==='AL'" nzMessage="{{'service_alert' | translate}}"></nz-alert>
<nz-alert nzType="warning" *ngIf="service.status==='WARN'" nzMessage="{{'service_warning' | translate}}"></nz-alert>
<nz-alert nzType="success" *ngIf="service.status==='OK'" nzMessage="{{'service_ok' | translate}}"></nz-alert>
<div *ngIf="service.group">
<h4>Group</h4>
<p><a href="#" [routerLink]="['/settings', 'group', service.group.name]">{{service.group.name}}</a></p>
</div>

<h4>Heartbeat</h4>
<h2>Heartbeat</h2>
<p>
<span nz-tooltip [nzTooltipTitle]="service.last_heartbeat| date:'short'" nzTooltipPlacement="topLeft">{{service.last_heartbeat
| amTimeAgo}}</span>
</p>

<h4 *ngIf="service.version">Version</h4>
<h2 *ngIf="service.version">Version</h2>
<p *ngIf="service.version">
{{service.version}}
</p>


<h4>Status</h4>
<h2>Status</h2>

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

<h4>Configuration</h4>
<h2>Configuration</h2>
<codemirror [(ngModel)]="config" [config]="codeMirrorConfig" #textareaCodeMirror>
</codemirror>

</ng-template>
<ng-template #loadingPart>
<div class="ui text active loader">{{ 'common_loading' | translate }}</div>
<nz-spin nzTip="Loading..."></nz-spin>
</ng-template>
</app-scrollview>
</div>
8 changes: 8 additions & 0 deletions ui/src/app/views/admin/service/show/service.show.scss
View file
Expand Up @@ -2,3 +2,11 @@
.code {
width: 100%;
}

nz-alert {
margin-bottom: 15px;
}

nz-spin {
margin-top: 30px;
}
7 changes: 4 additions & 3 deletions ui/src/app/views/admin/worker-model-pattern/list/worker-model-pattern.list.html
View file
@@ -1,9 +1,10 @@
<div class="wrapper">
<app-breadcrumb [path]="path">
<a class="ui right floated green button small buttonBreadcrumb" [routerLink]="['add']">{{ 'btn_add' | translate
}}</a></app-breadcrumb>
<button nz-button nzType="primary" class="buttonBreadcrumb"
[routerLink]="['add']">Add</button>
</app-breadcrumb>
<app-scrollview class="scrollview">
<app-data-table [withFilter]="filter" [columns]="columns" [data]="workerModelPatterns" [loading]="loading">
</app-data-table>
</app-scrollview>
</div>
</div>

0 comments on commit 77a1606

Please sign in to comment.