feat(ui): modify workflow style (#3870)

ovh · Jan 28, 2019 · 6ee76e3 · 6ee76e3
1 parent a5bb1ac
commit 6ee76e3
Show file tree

Hide file tree

Showing 56 changed files with 1,546 additions and 1,966 deletions.
diff --git a/cli/cdsctl/project_platform.go b/cli/cdsctl/project_platform.go
@@ -80,7 +80,7 @@ func ProjectIntegrationImportFunc(v cli.Values) error {
 var ProjectIntegrationExportCmd = cli.Command{
 	Name:    "export",
 	Short:   "Export a integration configuration from a project to stdout",
-	Example: "cdsctl integration export MY-PROJECT MY-PLATFORM-NAME > file.yaml",
+	Example: "cdsctl integration export MY-PROJECT MY-INTEGRATION-NAME > file.yaml",
 	Ctx: []cli.Arg{
 		{Name: _ProjectKey},
 	},

diff --git a/ui/package.json b/ui/package.json
@@ -34,88 +34,89 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "7.0.2",
-    "@angular/common": "7.0.2",
-    "@angular/compiler": "7.0.2",
-    "@angular/core": "7.0.2",
-    "@angular/forms": "7.0.2",
-    "@angular/http": "7.0.2",
-    "@angular/platform-browser": "7.0.2",
-    "@angular/platform-browser-dynamic": "7.0.2",
-    "@angular/router": "7.0.2",
-    "@ngui/auto-complete": "^0.16.1",
-    "@ngx-translate/core": "^9.0.1",
-    "@ngx-translate/http-loader": "^2.0.0",
-    "@swimlane/ngx-charts": "^9.0.0",
-    "@types/dagre-d3": "^0.4.36",
-    "angular2-moment": "^1.0.0",
-    "angular2-prettyjson": "2.0.5",
-    "angular2-toaster": "6.1.0",
-    "animate.css": "^3.5.2",
-    "ansi_up": "^3.0.0",
-    "codemirror": "^5.22.0",
-    "core-js": "^2.4.1",
-    "d3": "^4.12.2",
-    "dagre-d3": "^0.6.1",
-    "diff": "^3.4.0",
-    "dragula": "^3.7.2",
-    "duration-js": "^3.9.2",
-    "enhanced-resolve": "3.3.0",
-    "fast-json-patch": "^2.0.5",
-    "font-awesome": "^4.6.3",
-    "immutable": "^3.8.1",
-    "js-beautify": "1.6.14",
-    "lodash": "~4.17.2",
-    "moment": "^2.17.1",
-    "ng-event-source": "^1.0.9",
+    "@angular/animations": "7.2.2",
+    "@angular/common": "7.2.2",
+    "@angular/compiler": "7.2.2",
+    "@angular/core": "7.2.2",
+    "@angular/forms": "7.2.2",
+    "@angular/http": "7.2.2",
+    "@angular/platform-browser": "7.2.2",
+    "@angular/platform-browser-dynamic": "7.2.2",
+    "@angular/router": "7.2.2",
+    "@ngui/auto-complete": "2.0.0",
+    "@ngx-translate/core": "11.0.1",
+    "@ngx-translate/http-loader": "4.0.0",
+    "@swimlane/ngx-charts": "10.0.0",
+    "@types/dagre-d3": "0.4.38",
+    "angular2-moment": "1.9.0",
+    "angular2-prettyjson": "3.0.1",
+    "angular2-toaster": "7.0.0",
+    "animate.css": "3.7.0",
+    "ansi_up": "3.0.0",
+    "codemirror": "5.43.0",
+    "core-js": "2.6.3",
+    "d3": "5.7.0",
+    "d3-zoom": "1.7.3",
+    "dagre-d3": "0.6.3",
+    "diff": "4.0.1",
+    "dragula": "3.7.2",
+    "duration-js": "4.0.0",
+    "enhanced-resolve": "4.1.0",
+    "fast-json-patch": "2.0.7",
+    "font-awesome": "4.7.0",
+    "immutable": "4.0.0-rc.12",
+    "js-beautify": "1.8.9",
+    "lodash": "4.17.11",
+    "moment": "2.24.0",
+    "ng-event-source": "1.0.14",
     "ng-semantic": "https://github.com/sguiheux/ngSemantic/tarball/sgu-master",
-    "ng2-codemirror-typescript": "^1.1.1",
-    "ng2-completer": "^1.4.0",
-    "ng2-dragula": "^1.2.1",
+    "ng2-codemirror-typescript": "1.1.2",
+    "ng2-completer": "2.0.8",
+    "ng2-dragula": "2.1.1",
     "ng2-semantic-ui": "git+https://[email protected]/bnjjj/ng2-semantic-ui.git#dist",
     "ngx-auto-scroll": "1.1.0",
-    "ngx-clipboard": "^10.0.0",
-    "ngx-infinite-scroll": "^6.0.1",
-    "ngx-markdown": "6.1.0",
-    "prismjs": "^1.15.0",
-    "raven-js": "^3.27.0",
+    "ngx-clipboard": "11.1.9",
+    "ngx-infinite-scroll": "7.0.1",
+    "ngx-markdown": "7.1.2",
+    "prismjs": "1.15.0",
+    "raven-js": "3.27.0",
     "rxjs": "6.3.3",
     "rxjs-compat": "6.3.3",
-    "sanitize-html": "^1.19.1",
+    "sanitize-html": "1.20.0",
     "semantic-ui": "2.2.13",
-    "string-format-obj": "^1.1.1",
-    "ts-helpers": "^1.1.1",
-    "zone.js": "^0.8.26"
+    "string-format-obj": "1.1.1",
+    "ts-helpers": "1.1.2",
+    "zone.js": "0.8.29"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.10.3",
-    "@angular/cli": "7.0.2",
-    "@angular/compiler-cli": "7.0.2",
-    "@compodoc/compodoc": "^1.0.0-beta.8",
-    "@sentry/cli": "^1.36.4",
-    "@types/d3": "4.11.0",
-    "@types/dagre": "^0.7.35",
-    "@types/jasmine": "2.8.6",
-    "@types/jasminewd2": "~2.0.3",
-    "@types/lodash": "^4.14.64",
-    "@types/node": "~8.9.4",
-    "codelyzer": "~4.2.1",
-    "copy-webpack-plugin": "^4.2.3",
-    "husky": "^0.14.3",
-    "jasmine-core": "2.99.1",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "1.7.1",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "2.0.0",
-    "karma-jasmine": "~1.1.1",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "karma-junit-reporter": "^1.1.0",
+    "@angular-devkit/build-angular": "0.12.3",
+    "@angular/cli": "7.2.3",
+    "@angular/compiler-cli": "7.2.2",
+    "@compodoc/compodoc": "1.1.7",
+    "@sentry/cli": "1.37.4",
+    "@types/d3": "5.7.0",
+    "@types/dagre": "0.7.40",
+    "@types/jasmine": "3.3.8",
+    "@types/jasminewd2": "2.0.6",
+    "@types/lodash": "4.14.120",
+    "@types/node": "10.12.18",
+    "codelyzer": "4.5.0",
+    "copy-webpack-plugin": "4.6.0",
+    "husky": "1.3.1",
+    "jasmine-core": "3.3.0",
+    "jasmine-spec-reporter": "4.2.1",
+    "karma": "4.0.0",
+    "karma-chrome-launcher": "2.2.0",
+    "karma-coverage-istanbul-reporter": "2.0.4",
+    "karma-jasmine": "2.0.1",
+    "karma-jasmine-html-reporter": "1.4.0",
+    "karma-junit-reporter": "1.2.0",
     "lint-staged": "git+https://github.com/bnjjj/lint-staged.git#master",
     "node-sass": "4.11.0",
-    "ts-node": "~4.1.0",
-    "tslint": "~5.9.1",
-    "typescript": "3.1.6",
-    "webdriver-manager": "10.2.5",
+    "ts-node": "8.0.2",
+    "tslint": "5.12.1",
+    "typescript": "3.2.4",
+    "webdriver-manager": "12.1.1",
     "wrench-sui": "0.0.3"
   }
 }
diff --git a/ui/src/app/service/workflow/workflow.sidebar.store.ts b/ui/src/app/service/workflow/workflow.sidebar.store.ts
@@ -12,11 +12,9 @@ export class WorkflowSidebarMode {
 
 @Injectable()
 export class WorkflowSidebarStore {
+    private _sidebarMode: BehaviorSubject<string> = new BehaviorSubject(WorkflowSidebarMode.RUNS);
 
-    private _sidebarMode: BehaviorSubject<string> = new BehaviorSubject(null);
-
-    constructor() {
-    }
+    constructor() { }
 
     sidebarMode(): Observable<string> {
         return new Observable<string>(fn => this._sidebarMode.subscribe(fn));

diff --git a/ui/src/app/shared/action/action.component.ts b/ui/src/app/shared/action/action.component.ts
@@ -1,20 +1,20 @@
-import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
-import {cloneDeep} from 'lodash';
-import {DragulaService} from 'ng2-dragula/components/dragula.provider';
-import {Subscription} from 'rxjs/Subscription';
-import {Action} from '../../model/action.model';
-import {AllKeys} from '../../model/keys.model';
-import {Parameter} from '../../model/parameter.model';
-import {Pipeline} from '../../model/pipeline.model';
-import {Project} from '../../model/project.model';
-import {Requirement} from '../../model/requirement.model';
-import {ActionStore} from '../../service/action/action.store';
-import {AutoUnsubscribe} from '../decorator/autoUnsubscribe';
-import {ParameterEvent} from '../parameter/parameter.event.model';
-import {RequirementEvent} from '../requirements/requirement.event.model';
-import {SharedService} from '../shared.service';
-import {ActionEvent} from './action.event.model';
-import {StepEvent} from './step/step.event';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { cloneDeep } from 'lodash';
+import { DragulaService } from 'ng2-dragula';
+import { Subscription } from 'rxjs/Subscription';
+import { Action } from '../../model/action.model';
+import { AllKeys } from '../../model/keys.model';
+import { Parameter } from '../../model/parameter.model';
+import { Pipeline } from '../../model/pipeline.model';
+import { Project } from '../../model/project.model';
+import { Requirement } from '../../model/requirement.model';
+import { ActionStore } from '../../service/action/action.store';
+import { AutoUnsubscribe } from '../decorator/autoUnsubscribe';
+import { ParameterEvent } from '../parameter/parameter.event.model';
+import { RequirementEvent } from '../requirements/requirement.event.model';
+import { SharedService } from '../shared.service';
+import { ActionEvent } from './action.event.model';
+import { StepEvent } from './step/step.event';
 
 @Component({
     selector: 'app-action',
@@ -51,37 +51,41 @@ export class ActionComponent implements OnDestroy, OnInit {
     @Output() actionEvent = new EventEmitter<ActionEvent>();
 
     collapsed = true;
-    configRequirements: {disableModel?: boolean, disableHostname?: boolean} = {};
+    configRequirements: { disableModel?: boolean, disableHostname?: boolean } = {};
 
     actionSub: Subscription;
 
-    constructor(private sharedService: SharedService, private _actionStore: ActionStore, private dragulaService: DragulaService) {
-        dragulaService.setOptions('bag-nonfinal', {
+    constructor(
+        private sharedService: SharedService,
+        private _actionStore: ActionStore,
+        private dragulaService: DragulaService
+    ) {
+        dragulaService.createGroup('bag-nonfinal', {
             moves: function (el, source, handle) {
                 return handle.classList.contains('move');
             },
         });
-        dragulaService.setOptions('bag-final', {
+        dragulaService.createGroup('bag-final', {
             moves: function (el, source, handle) {
                 return handle.classList.contains('move');
             },
             direction: 'vertical'
         });
-        this.dragulaService.drop.subscribe( () => {
+        this.dragulaService.drop().subscribe(() => {
             this.editableAction.hasChanged = true;
         });
     }
 
     keyEvent(event: KeyboardEvent) {
-      if (event.key === 's' && (event.ctrlKey || event.metaKey)) {
-          event.preventDefault();
-          setTimeout(() => this.sendActionEvent('update'));
-      }
+        if (event.key === 's' && (event.ctrlKey || event.metaKey)) {
+            event.preventDefault();
+            setTimeout(() => this.sendActionEvent('update'));
+        }
     }
 
     ngOnInit() {
         this.actionSub = this._actionStore.getActions().subscribe(mapActions => {
-            this.publicActions = mapActions.toArray().filter((action) => action.name !== this.editableAction.name);
+            this.publicActions = mapActions.valueSeq().toArray().filter((action) => action.name !== this.editableAction.name);
         });
     }
 
@@ -213,7 +217,7 @@ export class ActionComponent implements OnDestroy, OnInit {
                 break;
             case 'delete':
                 let index = this.steps.indexOf(event.step);
-                if (index >= 0 ) {
+                if (index >= 0) {
                     this.steps.splice(index, 1);
                 }
                 break;

diff --git a/ui/src/app/shared/action/action.html b/ui/src/app/shared/action/action.html
@@ -92,7 +92,7 @@ <h3 class="inline">{{ 'action_step_title' | translate }}</h3>
         </div>
     </div>
     <div class="ui segment" *ngIf="steps.length > 0 && publicActions" [class.off]="!editableAction.enabled">
-        <div class="dragula-container" [dragula]="'bag-nonfinal'" [dragulaModel]="steps" *ngIf="steps">
+        <div class="dragula-container" [dragula]="'bag-nonfinal'" [(dragulaModel)]="steps" *ngIf="steps">
             <div *ngFor="let step of steps; let idxStep = index" class="step" [class.off]="!step.enabled">
                 <app-action-step
                     [action]="editableAction"

diff --git a/ui/src/app/shared/shared.module.ts b/ui/src/app/shared/shared.module.ts
@@ -8,7 +8,7 @@ import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { MomentModule } from 'angular2-moment';
 import { NgSemanticModule } from 'ng-semantic/ng-semantic';
 import { CodemirrorModule } from 'ng2-codemirror-typescript/Codemirror';
-import { DragulaModule } from 'ng2-dragula/ng2-dragula';
+import { DragulaModule } from 'ng2-dragula';
 import { SuiModule } from 'ng2-semantic-ui';
 import { NgxAutoScroll, NgxAutoScrollModule } from 'ngx-auto-scroll';
 import { ClipboardModule } from 'ngx-clipboard';
@@ -115,7 +115,7 @@ import { ZoneContentComponent } from './zone/zone-content/content.component';
 import { ZoneComponent } from './zone/zone.component';
 
 @NgModule({
-    imports: [CommonModule, ClipboardModule, NgSemanticModule, FormsModule, TranslateModule, DragulaModule, MomentModule,
+    imports: [CommonModule, ClipboardModule, NgSemanticModule, FormsModule, TranslateModule, DragulaModule.forRoot(), MomentModule,
         CodemirrorModule, ReactiveFormsModule, MarkdownModule.forRoot(), NguiAutoCompleteModule, RouterModule,
         SuiModule, NgxAutoScrollModule, InfiniteScrollModule, NgxChartsModule],
     declarations: [

diff --git a/ui/src/app/shared/status/status.component.ts b/ui/src/app/shared/status/status.component.ts
@@ -7,7 +7,6 @@ import {PipelineStatus} from '../../model/pipeline.model';
     styleUrls: ['./status.icon.scss']
 })
 export class StatusIconComponent {
-
     @Input() status: string;
     @Input() value: string;
     @Input() optional: boolean;

diff --git a/ui/src/app/shared/status/status.icon.scss b/ui/src/app/shared/status/status.icon.scss
@@ -1,4 +1 @@
-.ui.loader {
-  padding-top: 3px;
-  margin-right: 5px;
-}
+@import '../../../common';
diff --git a/ui/src/app/shared/tabs/tabs.component.ts b/ui/src/app/shared/tabs/tabs.component.ts
@@ -25,6 +25,7 @@ export class Tab {
 @AutoUnsubscribe()
 export class TabsComponent implements OnInit, OnChanges {
     @Input() tabs: Array<Tab>;
+    @Input() warnings: { [key: string]: Array<Tab> };
     @Output() onSelect = new EventEmitter<Tab>();
     selected: Tab;
     queryParamsSub: Subscription;

diff --git a/ui/src/app/shared/tabs/tabs.html b/ui/src/app/shared/tabs/tabs.html
@@ -1,6 +1,7 @@
-<sm-menu class="pointing secondary">
+<sm-menu class="pointing secondary stackable">
     <a *ngFor="let t of tabs" sm-item [class.active]="selected.key === t.key" (click)="clickSelect(t)">
         <i *ngIf="t.icon" [ngClass]="[t.icon, 'icon']"></i>
         {{t.translate | translate}}
+        <app-warning-tab *ngIf="warnings && warnings[t.key]" [warnings]="warnings[t.key]"></app-warning-tab>
     </a>
-</sm-menu>
+</sm-menu>