Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(ui): refact keys, variables and run sidebar #6221

Merged
merged 2 commits into from
Jun 29, 2022
Merged

refactor(ui): refact keys, variables and run sidebar #6221

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
26579f6
refactor(ui): refact keys, variables and run sidebar
sguiheux Jun 29, 2022
7bc12f8
fix(ui): unit test + remove translate
sguiheux Jun 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 46 additions & 36 deletions ui/src/app/shared/keys/form/keys.form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,46 @@
<div class="KeyForm">
<div class="ui form">
<div class="ui info message" *ngIf="newKey.type === 'ssh'">
{{ 'keys_ssh_key_help' | translate }} <a href="#" [routerLink]="['/docs', 'docs', 'components', 'worker', 'key', 'install']">Worker Install Key</a>
</div>
<div class="ui info message" *ngIf="newKey.type === 'pgp'">
{{ 'keys_pgp_key_help' | translate }} <a href="#" [routerLink]="['/docs', 'docs', 'components', 'worker', 'key', 'install']">Worker Install Key</a>
</div>
<div class="fields">
<div class="seven wide field">
<label>{{ 'keys_name' | translate}}</label>
<div class="ui labeled input">
<div class="ui label">{{prefix}}</div>
<input type="text" name="name" [(ngModel)]="newKey.name">
</div>
</div>
<div class="seven wide field">
<label>{{ 'keys_type' | translate }}</label>
<ng-container *ngIf="keyTypes">
<sui-select class="selection"
name="type"
[(ngModel)]="newKey.type"
[options]="keyTypes"
[isSearchable]="true"
#selectKeyType>
<sui-select-option *ngFor="let t of selectKeyType.filteredOptions" [value]="t">
</sui-select-option>
</sui-select>
</ng-container>
</div>
<div class="two wide right aligned field">
<button class="ui green button" type="button" [class.loading]="loading" [disabled]="loading || newKey.name === ''" (click)="addKey()">{{ 'btn_add' | translate }}</button>
</div>
</div>
</div>
</div>
<form nz-form>
<nz-alert nzType="info" *ngIf="newKey.type === 'ssh'" [nzMessage]="sshHelp"></nz-alert>
<ng-template #sshHelp>
{{ 'keys_ssh_key_help' | translate }} <a href="#"
[routerLink]="['/docs', 'docs', 'components', 'worker', 'key', 'install']">Worker
Install Key</a>
</ng-template>
<nz-alert nzType="info" *ngIf="newKey.type === 'pgp'" [nzMessage]="pgpHelp"></nz-alert>
<ng-template #pgpHelp>
{{ 'keys_pgp_key_help' | translate }} <a href="#"
[routerLink]="['/docs', 'docs', 'components', 'worker', 'key', 'install']">Worker
Install Key</a>
</ng-template>
<nz-row>
<nz-col [nzSpan]="8">
<nz-form-item>
<nz-form-label>Key name</nz-form-label>
<nz-form-control>
<nz-input-group nzAddOnBefore="{{prefix}}">
<input type="text" nz-input [(ngModel)]="newKey.name" name="keyname"/>
</nz-input-group>
</nz-form-control>
</nz-form-item>
</nz-col>
<nz-col [nzSpan]="7" [nzOffset]="1">
<nz-form-item>
<nz-form-label>Key type</nz-form-label>
<nz-form-control>
<nz-select nzShowSearch [(ngModel)]="newKey.type" name="type">
<nz-option *ngFor="let t of keyTypes" [nzValue]="t" [nzLabel]="t"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
</nz-col>
<nz-col [nzSpan]="2" [nzOffset]="1">
<nz-form-item>
<nz-form-control>
<button nz-button nzType="primary" [nzLoading]="loading" [disabled]="loading || newKey.name === ''"
(click)="addKey()">Add
</button>
</nz-form-control>
</nz-form-item>
</nz-col>
</nz-row>
</form>

12 changes: 3 additions & 9 deletions ui/src/app/shared/keys/form/keys.form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,3 @@
.KeyForm {
.fields {
.field {
button {
margin-top: 23px;
}
}
}
}
nz-row {
margin-top: 20px;
}
80 changes: 36 additions & 44 deletions ui/src/app/shared/keys/list/keys.list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,36 @@
<div class="keys" *ngIf="keys">
<table class="ui fixed celled table" *ngIf="getDataForCurrentPage().length > 0">
<thead>
<tr>
<th class="two wide">{{ 'keys_name' | translate }}</th>
<th class="two wide">{{ 'keys_type' | translate }}</th>
<th class="ten wide">{{ 'keys_public' | translate }}</th>
<th class="two wide" *ngIf="edit"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let k of getDataForCurrentPage()">
<td>
{{ k.name }}
</td>
<td>
{{ k.type }}
</td>
<td>
<pre>{{ k.public }}</pre>
</td>
<td *ngIf="edit">
<app-delete-button [loading]="loading" (event)="deleteKey(k)"></app-delete-button>
</td>
</tr>
</tbody>
<tfoot *ngIf="getNbOfPages() > 1">
<tr>
<th colspan="4">
<div class="ui right floated pagination menu">
<a class="icon item" (click)="downPage()">
<i class="left chevron icon"></i>
</a>
<a class="item" *ngFor="let page of getNbOfPages() | ngForNumber" (click)="goTopage(page)"
[class.active]="currentPage === page">{{page}}</a>
<a class="icon item" (click)="upPage()">
<i class="right chevron icon"></i>
</a>
</div>
</th>
</tr>
</tfoot>
</table>
</div>
<nz-table [nzData]="keys" [nzNoResult]="nokeys" #keylist>
<thead>
<tr>
<th nzWidth="50px">Key name</th>
<th nzWidth="50px">Key type</th>
<th nzWidth="400px">Public key</th>
<th nzWidth="25px" *ngIf="edit"></th>
</tr>
</thead>
<tbody *ngFor="let k of keylist.data">
<tr>
<td>
{{ k.name }}
</td>
<td>
{{ k.type }}
</td>
<td nzBreakWord>
<ng-container *ngIf="k.type === 'ssh'">
<input nz-input readonly [ngModel]="k.public">
</ng-container>
<ng-container *ngIf="k.type === 'pgp'">
<textarea nz-input [ngModel]="k.public" readonly rows="29"></textarea>
</ng-container>

</td>
<td *ngIf="edit">
<button nz-button nzDanger nzType="primary" [nzLoading]="loading" nz-popconfirm nzPopconfirmTitle="Are you sure you want to delete this key ?"
(nzOnConfirm)="deleteKey(k)">Delete</button>
</td>
</tr>
</tbody>
</nz-table>
<ng-template #nokeys>
<nz-alert nzType="info" nzMessage="There is no key"></nz-alert>
</ng-template>
2 changes: 0 additions & 2 deletions ui/src/app/shared/keys/list/keys.list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@import '../../../../common';

pre {
white-space: pre;
word-break: break-all;
Expand Down
4 changes: 2 additions & 2 deletions ui/src/app/shared/shared.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,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 { BellFill, BookOutline, CaretDownFill, CaretRightFill, CaretUpFill, CheckOutline, CopyOutline, DeleteOutline, DragOutline, EyeInvisibleOutline, EyeOutline, KeyOutline, HistoryOutline, InfoCircleOutline, PhoneFill, PlusOutline, PlusSquareOutline, QuestionOutline, QuestionCircleOutline, RestOutline, SaveOutline, SettingFill, ShareAltOutline, StarOutline, TableOutline, TagsOutline, ToolFill, UnlockFill, UnorderedListOutline, UploadOutline, WarningOutline } from '@ant-design/icons-angular/icons'
import { BellFill, BookOutline, CalendarOutline, CaretDownFill, CaretRightFill, CaretUpFill, CheckOutline, CopyOutline, DeleteOutline, DragOutline, EyeInvisibleOutline, EyeOutline, KeyOutline, HistoryOutline, InfoCircleOutline, PhoneFill, PlusOutline, PlusSquareOutline, QuestionOutline, QuestionCircleOutline, RestOutline, SaveOutline, SettingFill, ShareAltOutline, StarOutline, TableOutline, TagsOutline, ToolFill, UnlockFill, UnorderedListOutline, UploadOutline, WarningOutline } from '@ant-design/icons-angular/icons'
import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
import { NzTagModule } from 'ng-zorro-antd/tag';
import { NzPopoverModule } from 'ng-zorro-antd/popover';
Expand Down Expand Up @@ -154,7 +154,7 @@ const ngZorroConfig: NzConfig = {
icon: {nzTheme: "outline"}
};

const icons: IconDefinition[] = [ BellFill, BookOutline, CaretDownFill, CaretRightFill, CaretUpFill, CheckOutline, CopyOutline, DeleteOutline, DragOutline, EyeInvisibleOutline, EyeOutline, KeyOutline, HistoryOutline, InfoCircleOutline, PhoneFill, PlusOutline, PlusSquareOutline, QuestionOutline, QuestionCircleOutline, RestOutline, SaveOutline, SettingFill, ShareAltOutline, StarOutline, TableOutline, TagsOutline, ToolFill, UnlockFill, UnorderedListOutline, UploadOutline, WarningOutline ];
const icons: IconDefinition[] = [ BellFill, BookOutline, CalendarOutline, CaretDownFill, CaretRightFill, CaretUpFill, CheckOutline, CopyOutline, DeleteOutline, DragOutline, EyeInvisibleOutline, EyeOutline, KeyOutline, HistoryOutline, InfoCircleOutline, PhoneFill, PlusOutline, PlusSquareOutline, QuestionOutline, QuestionCircleOutline, RestOutline, SaveOutline, SettingFill, ShareAltOutline, StarOutline, TableOutline, TagsOutline, ToolFill, UnlockFill, UnorderedListOutline, UploadOutline, WarningOutline ];

@NgModule({
imports: [
Expand Down
19 changes: 8 additions & 11 deletions ui/src/app/shared/variable/list/variable.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { ApplicationAuditService } from 'app/service/application/application.aud
import { EnvironmentAuditService } from 'app/service/environment/environment.audit.service';
import { ProjectAuditService } from 'app/service/project/project.audit.service';
import { VariableService } from 'app/service/variable/variable.service';
import { Table } from 'app/shared/table/table';
import { VariableEvent } from 'app/shared/variable/variable.event.model';
import { finalize } from 'rxjs/operators';
import { NzModalService } from 'ng-zorro-antd/modal';
Expand All @@ -24,20 +23,17 @@ import { VariableAuditComponent } from 'app/shared/variable/audit/audit.componen
styleUrls: ['./variable.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class VariableComponent extends Table<Variable> {
export class VariableComponent {

@Input()
set variables(data: Variable[]) {
this._variables = data;
this.goTopage(1);
this.filterVariables();
}
get variables() {
return this._variables;
}
@Input()
set maxPerPage(data: number) {
this.nbElementsByPage = data;
}

// display mode: edit (edit all field) / launcher (only type value) /ro (display field, no edit)
@Input() mode = 'edit';

Expand All @@ -52,11 +48,11 @@ export class VariableComponent extends Table<Variable> {
public ready = false;
public variableTypes: string[];
private _variables: Variable[];
filteredVariables: Variable[] = [];
filter: string;

constructor(private _variableService: VariableService, private _projAudit: ProjectAuditService, private _modalService: NzModalService,
private _envAudit: EnvironmentAuditService, private _appAudit: ApplicationAuditService, public _cd: ChangeDetectorRef) {
super();
this.variableTypes = this._variableService.getTypesFromCache();
if (!this.variableTypes) {
this._variableService.getTypesFromAPI().pipe(finalize(() => {
Expand All @@ -70,12 +66,13 @@ export class VariableComponent extends Table<Variable> {
}
}

getData(): Array<Variable> {
filterVariables(): void {
if (!this.filter || this.filter === '') {
return this.variables;
this.filteredVariables = Object.assign([], this.variables);
} else {
return this.variables.filter(v => v.name.toLowerCase().indexOf(this.filter.toLowerCase()) !== -1);
this.filteredVariables = Object.assign([], this.variables.filter(v => v.name.toLowerCase().indexOf(this.filter.toLowerCase()) !== -1));
}
this._cd.markForCheck();
}

/**
Expand Down
Loading