fix(ui/dashboard): improve ergo

ovh · Feb 17, 2020 · 75f7905 · 75f7905
1 parent e2e4c7a
commit 75f7905
Show file tree

Hide file tree

Showing 18 changed files with 156 additions and 402 deletions.
diff --git a/ui/dashboard/Makefile b/ui/dashboard/Makefile
@@ -30,16 +30,16 @@ install:
 
 dev:
 	$(NODE) scripts/prebuild-env-dev.js
-	$(NG) serve --open --port $(PORT) --base-href $(BASEHREF)
+	$(NG) serve --open --port $(PORT) --base-href $(BASEHREF) --verbose=true
 
 build: install
 	$(NODE) scripts/prebuild-env-dev.js
-	$(NG) build --base-href $(BASEHREF)
+	$(NG) build --base-href $(BASEHREF) --verbose=true
 	# $(TAR) $(DIST_TAR) $(DIST_DIR)
 
 build-prod: install
 	$(NODE) scripts/prebuild-env-prod.js
-	$(NG) build --prod --base-href $(BASEHREF)
+	$(NG) build --prod --base-href $(BASEHREF) --verbose=true
 	# $(TAR) $(DIST_TAR) $(DIST_DIR)
 
 prod:
@@ -50,4 +50,4 @@ package:
 	$(UNTAR) $(DIST_TAR)
 
 test:
-	$(ECHO) "No Test for the moment"
+	$(NG) test
diff --git a/ui/dashboard/package-lock.json b/ui/dashboard/package-lock.json
diff --git a/ui/dashboard/package.json b/ui/dashboard/package.json
@@ -23,6 +23,7 @@
     "@fortawesome/fontawesome-free-solid": "^5.0.13",
     "@ng-bootstrap/ng-bootstrap": "^5.1.4",
     "ace": "^1.3.0",
+    "active-interval": "0.0.1",
     "bootstrap": "^4.4.1",
     "brace": "^0.11.1",
     "chart.js": "^2.9.3",

diff --git a/ui/dashboard/src/app/@components/stepsviewer/stepsviewer.component.ts b/ui/dashboard/src/app/@components/stepsviewer/stepsviewer.component.ts
@@ -1,18 +1,13 @@
-import { Component, OnInit, Input, Output, OnChanges, SimpleChanges, EventEmitter, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, Input, Output, OnChanges, SimpleChanges, EventEmitter, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
 import * as _ from 'lodash';
-import $ from 'jquery';
 
-
-
-const d3 = require('d3');
-import dagreD3 from 'dagre-d3';
 import { GraphService } from 'src/app/@services/graph.service';
 
 @Component({
     selector: 'steps-viewer',
     templateUrl: 'stepsviewer.html',
 })
-export class StepsViewerComponent implements OnChanges, AfterViewInit/*, OnInit*/ {
+export class StepsViewerComponent implements OnChanges, AfterViewInit{
     @ViewChild('svg', { static: false }) svg: ElementRef;
     @Input() item: any;
     // TODO: RENAME DONE OU DELETE IT
@@ -22,7 +17,6 @@ export class StepsViewerComponent implements OnChanges, AfterViewInit/*, OnInit*
     error: any = null;
     selectedNode: any;
     loaded = false;
-    // steps: any[];
 
     constructor(private graphService: GraphService) {
     }

diff --git a/ui/dashboard/src/app/@routes/home/home.html b/ui/dashboard/src/app/@routes/home/home.html
@@ -78,7 +78,7 @@ <h1>
                     <div class="btn-group" ngbDropdown placement="bottom-right" role="group">
                       <button class="btn btn-sm btn-secondary btn-outline-primary" ngbDropdownToggle>Actions</button>
                       <div class="dropdown-menu" ngbDropdownMenu>
-                        <strong *ngIf="item.resolution" class="px-3 py-3" style="font-size:18px;">Resolution</strong>
+                        <strong *ngIf="item.resolution" class="px-3 py-3" style="font-size:18px;">Execution</strong>
                         <button *ngIf="item.resolution" ngbDropdownItem
                           (click)="runResolution(item.resolution, item.id); $event.stopPropagation();">
                           Run

diff --git a/ui/dashboard/src/app/@routes/new/new.component.ts b/ui/dashboard/src/app/@routes/new/new.component.ts
@@ -21,7 +21,7 @@ export class NewComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.templates = this.route.parent.snapshot.data.templates;
+    this.templates = _.orderBy(this.route.parent.snapshot.data.templates, (t: any) => t.description.toLowerCase(), ['asc']);
   }
 
   submit() {

diff --git a/ui/dashboard/src/app/@routes/new/new.html b/ui/dashboard/src/app/@routes/new/new.html
@@ -17,7 +17,7 @@ <h1>New task</h1>
             [(ngModel)]="selectedTemplate" (change)="newTask(selectedTemplate)">
             <option *ngIf="!selectedTemplate">-- Template --</option>
             <ng-template ngFor let-template [ngForOf]="templates">
-              <option *ngIf="!template.blocked" [ngValue]="template">{{template.name}}</option>
+              <option *ngIf="!template.blocked" [ngValue]="template">{{template.description}}</option>
             </ng-template>
 
           </select>

diff --git a/ui/dashboard/src/app/@routes/task/task.component.ts b/ui/dashboard/src/app/@routes/task/task.component.ts
@@ -11,7 +11,7 @@ import { RequestService } from 'src/app/@services/request.service';
 import MetaUtask from 'src/app/@models/meta-utask.model';
 import Task from '../../@models/task.model';
 import { TaskService } from 'src/app/@services/task.service';
-import { ActiveIntervalService } from 'src/app/@services/active-interval.service';
+import { ActiveInterval } from 'active-interval';
 
 @Component({
   templateUrl: './task.html'
@@ -70,7 +70,7 @@ export class TaskComponent implements OnInit, OnDestroy {
       });
     });
 
-    this.refreshes.tasks = new ActiveIntervalService();
+    this.refreshes.tasks = new ActiveInterval();
     this.refreshes.tasks.setInterval(() => {
       if (!this.loaders.tasks && this.autorefresh) {
         this.loadTask().then(() => {

diff --git a/ui/dashboard/src/app/@routes/task/task.html b/ui/dashboard/src/app/@routes/task/task.html
@@ -62,10 +62,10 @@ <h2>
             <button class="btn btn-sm btn-primary" ngbDropdownToggle>Actions</button>
             <div class="dropdown-menu" ngbDropdownMenu>
               <button ngbDropdownItem (click)="previewDetails(task, 'Request preview'); $event.stopPropagation();">
-                View details
+                View as code
               </button>
               <button ngbDropdownItem (click)="editRequest(task); $event.stopPropagation();">
-                Edit request
+                Edit
               </button>
               <button ngbDropdownItem (click)="deleteTask(task.id); $event.stopPropagation();">
                 Delete
@@ -124,18 +124,12 @@ <h3>Inputs</h3>
           <div class="btn-group utask_bloc_header_dropdown" ngbDropdown role="group">
             <button class="btn btn-sm btn-primary" ngbDropdownToggle>Actions</button>
             <div class="dropdown-menu" ngbDropdownMenu>
-              <button ngbDropdownItem (click)="previewDetails(resolution, 'Resolution preview');">View
-                details</button>
-              <button ngbDropdownItem (click)="runResolution(resolution);">Run
-                resolution</button>
-              <button ngbDropdownItem (click)="pauseResolution(resolution);">Pause
-                resolution</button>
-              <button ngbDropdownItem (click)="extendResolution(resolution);">Extend
-                resolution</button>
-              <button ngbDropdownItem (click)="cancelResolution(resolution);">Cancel
-                resolution</button>
-              <button ngbDropdownItem (click)="editResolution(resolution);">Edit
-                resolution</button>
+              <button ngbDropdownItem (click)="previewDetails(resolution, 'Resolution preview');">View as code</button>
+              <button ngbDropdownItem (click)="runResolution(resolution);">Run</button>
+              <button ngbDropdownItem (click)="pauseResolution(resolution);">Pause</button>
+              <button ngbDropdownItem (click)="extendResolution(resolution);">Extend</button>
+              <button ngbDropdownItem (click)="cancelResolution(resolution);">Cancel</button>
+              <button ngbDropdownItem (click)="editResolution(resolution);">Edit</button>
             </div>
           </div>
         </header>

diff --git a/ui/dashboard/src/app/@services/active-interval.service.ts b/ui/dashboard/src/app/@services/active-interval.service.ts
diff --git a/ui/dashboard/src/app/@services/graph.service.ts b/ui/dashboard/src/app/@services/graph.service.ts
@@ -12,9 +12,9 @@ export class GraphService {
     constructor() {
     }
 
-    initZoom(dagreGraphWidth: number, svgWidth: number, dagreGraphHeight: number, svgHeight: number, d3Zoom: any, d3Svg: any) {
-        const scaleWidth = svgWidth / dagreGraphWidth * 0.9;
-        const scaleHeight = svgHeight / dagreGraphHeight * 0.9;
+    initZoom(dagreGraphWidth: number, svgWidth: number, dagreGraphHeight: number, svgHeight: number, d3Zoom: any, d3Svg: any, ratioZoom: number) {
+        const scaleWidth = svgWidth / dagreGraphWidth * ratioZoom;
+        const scaleHeight = svgHeight / dagreGraphHeight * ratioZoom;
         const scale = _.min([scaleWidth, scaleHeight]);
         const w = scale * dagreGraphWidth;
         const h = scale * dagreGraphHeight;
@@ -39,13 +39,20 @@ export class GraphService {
             innerSVG.attr('transform', d3.event.transform);
         });
         d3Svg.call(d3Zoom);
+        let radioZoom = 0.9;
+        if (steps.length < 5) {
+            radioZoom = 0.3;
+        } else if (steps.length < 10) {
+            radioZoom = 0.6;
+        }
         this.initZoom(
             dagreGraph.graph().width,
             svgNativeElement.width.animVal.value,
             dagreGraph.graph().height,
             svgNativeElement.height.animVal.value,
             d3Zoom,
-            d3Svg
+            d3Svg,
+            radioZoom
         );
         innerSVG.selectAll('g.node')
             .attr('title', (stepName: string) => dagreGraph.node(stepName).tooltip)

diff --git a/ui/editor/package-lock.json b/ui/editor/package-lock.json
diff --git a/ui/editor/package.json b/ui/editor/package.json
@@ -23,6 +23,7 @@
     "ace": "^1.3.0",
     "bootstrap": "^4.4.1",
     "brace": "^0.11.1",
+    "convert-yaml": "^1.0.0",
     "d3": "^5.14.0",
     "dagre-d3": "^0.6.4",
     "jquery": "^3.4.1",

diff --git a/ui/editor/src/app/app.module.ts b/ui/editor/src/app/app.module.ts
@@ -12,7 +12,7 @@ import {StepsViewerComponent} from './components/stepsviewer.component';
 
 import {FullHeightDirective} from './directives/fullheight.directive';
 
-import {JSON2YAML} from './services/json2yaml.service';
+import JSToYaml from 'convert-yaml';
 import {TemplateYamlHelper} from './services/templateyamlhelper.service';
 import {WorkflowHelper} from './services/workflowhelper.service';
 
@@ -29,7 +29,6 @@ import {WorkflowHelper} from './services/workflowhelper.service';
     AppRoutingModule,
   ],
   providers: [
-    JSON2YAML,
     TemplateYamlHelper,
     WorkflowHelper,
   ],