Merge pull request #104 from pengz1/Update-framework-changes

Update framework changes

Author: pengz1

config/build-utils.js

@@ -5,7 +5,7 @@ const helpers = require('./helpers');
 
 const DEFAULT_METADATA = {
   title: 'RackHD Web UI 2.0',
-  baseUrl: '/',
+  baseUrl: './',
   isDevServer: helpers.isWebpackDevServer(),
   HMR: helpers.hasProcessFlag('hot'),
   AOT: process.env.BUILD_AOT || helpers.hasNpmFlag('aot'),

config/webpack.dev.js

@@ -46,7 +46,7 @@ module.exports = function (options) {
        *
        * See: http://webpack.github.io/docs/configuration.html#output-path
        */
-      publicPath: './',
+      // publicPath: './',
       path: helpers.root('dist'),
 
       /**

config/webpack.prod.js

@@ -73,7 +73,7 @@ module.exports = function (env) {
        *
        * See: http://webpack.github.io/docs/configuration.html#output-path
        */
-      publicPath: './',
+      // publicPath: './',
       path: helpers.root('dist'),
 
       /**

src/app/app-routing.module.ts

@@ -10,7 +10,8 @@ import { ROUTES } from './app.routes';
 @NgModule({
   imports: [
     RouterModule.forRoot(ROUTES, {
-      useHash: Boolean(history.pushState) === false,
+      //If we don't want to use hash mode, we need to change RackHD
+      useHash: Boolean(history.pushState) === true,
       preloadingStrategy: PreloadAllModules
       // enableTracing: true
     })

src/app/app.routes.ts

@@ -8,28 +8,19 @@ import { NoContentComponent } from './no-content/no-content.component';
  * route after '' will be denied. Cause angular will regard all routes as '' children
  */
 export const ROUTES: Routes = [
-  /**
-   * @description Four first-level routings
-   * @date 2018-02-07 18:52:36
-   * @author [email protected]
-   */
-  {path: '', redirectTo: 'ui/managementCenter', pathMatch: 'full'},
+  {path: '', redirectTo: '/managementCenter/nodes', pathMatch: 'full'},
   {
-    path: 'ui/managementCenter',
+    path: 'managementCenter',
     loadChildren: 'app/management-center/management-center.module#ManagementCenterModule',
   },
   {
-    path: 'ui/operationsCenter',
-    loadChildren: 'app/operations-center/operations-center.module#OperationsCenterModule',
+    path: 'workflowCenter',
+    loadChildren: 'app/workflow-center/workflow-center.module#WorkflowCenterModule',
   },
   {
-    path: 'ui/solutionCenter',
+    path: 'solutionCenter',
     loadChildren: 'app/solution-center/solution-center.module#SolutionCenterModule',
   },
-  {
-    path: 'ui/workflowEditor',
-    loadChildren: 'app/workflow-editor/workflow-editor.module#WorkflowEditorModule',
-  },
   // 404 page, page with ** can not be lazily loaded.
   {path: '**', component: NoContentComponent},
 ];

src/app/header/header.component.html

@@ -6,10 +6,9 @@
     </a>
   </div>
   <div class="header-nav">
-    <a routerLink="/ui/managementCenter" routerLinkActive="active" class="nav-link"><span class="nav-text">Management Center</span></a>
-    <a routerLink="/ui/operationsCenter" routerLinkActive="active" class=" nav-link"><span class="nav-text">Operations Center</span></a>
-    <a routerLink="/ui/workflowEditor" routerLinkActive="active" class=" nav-link"><span class="nav-text">Workflow Editor</span></a>
-    <a routerLink="/ui/solutionCenter" routerLinkActive="active" class="nav-link"><span class="nav-text">Solution Center</span></a>
+    <a routerLink="managementCenter" routerLinkActive="active" class="nav-link"><span class="nav-text">Management Center</span></a>
+    <a routerLink="workflowCenter" routerLinkActive="active" class=" nav-link"><span class="nav-text">Workflow Center</span></a>
+    <a routerLink="solutionCenter" routerLinkActive="active" class="nav-link"><span class="nav-text">Solution Center</span></a>
   </div>
   <div class="header-actions">
     <div class="active nav-link nav-icon" (click)="openSetting=true" style="cursor:pointer" >

src/app/management-center/workflows/workflows.component.ts

@@ -188,7 +188,7 @@ export class WorkflowsComponent implements OnInit {
 
   gotoCanvas(workflow){
     let graphName = workflow.injectableName;
-    let url = "/operationsCenter/workflowViewer?graphName=" + graphName;
+    let url = "/workflowCenter/workflowViewer?graphName=" + graphName;
     this.router.navigateByUrl(url);
   }
 

src/app/operations-center/operations-center.component.spec.ts

@@ -180,7 +180,7 @@ export class ActiveWorkflowComponent implements OnInit {
 
   gotoCanvas(workflow){
     let graphId = workflow.instanceId;
-    let url = "/operationsCenter/workflowViewer?graphId=" + graphId;
+    let url = "/workflowCenter/workflowViewer?graphId=" + graphId;
     this.router.navigateByUrl(url);
   }
 }

src/app/operations-center/operations-center.component.ts

@@ -223,7 +223,7 @@ export class HistoryWorkflowComponent implements OnInit {
 
   gotoCanvas(workflow){
     let graphId = workflow.instanceId;
-    let url = "/operationsCenter/workflowViewer?graphId=" + graphId;
+    let url = "/workflowCenter/workflowViewer?graphId=" + graphId;
     this.router.navigateByUrl(url);
   }
 

src/app/operations-center/active-workflow/active-workflow.component.html renamed to src/app/workflow-center/active-workflow/active-workflow.component.html

@@ -214,7 +214,7 @@ export class RunWorkflowComponent implements OnInit, AfterViewInit {
   goToViewer() {
     this.resetModalInfo();
     this.showModal = false;
-    this.router.navigate(['operationsCenter/workflowViewer'], {
+    this.router.navigate(['workflowCenter/workflowViewer'], {
       queryParams: {graphId: this.graphId}
     });
   }
@@ -228,7 +228,7 @@ export class RunWorkflowComponent implements OnInit, AfterViewInit {
     this.selectedGraph = null;
     this.graphStore = _.cloneDeep(this.allGraphs);
     this.updateEditor({});
-    this.router.navigateByUrl('operationsCenter/runWorkflow');
+    this.router.navigateByUrl('workflowCenter/runWorkflow');
   }
 
   onFilterSelect(node){

src/app/operations-center/active-workflow/active-workflow.component.scss renamed to src/app/workflow-center/active-workflow/active-workflow.component.scss

@@ -1,33 +1,35 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { OperationsCenterComponent } from './operations-center.component';
+import { WorkflowCenterComponent } from './workflow-center.component';
 import { ActiveWorkflowComponent } from './active-workflow/active-workflow.component';
 import { HistoryWorkflowComponent } from  './history-workflow/history-workflow.component';
 import { WorkflowViewerComponent } from './workflow-viewer/workflow-viewer.component';
 import { RunWorkflowComponent } from './run-workflow/run-workflow.component';
+import { WorkflowEditorComponent } from './workflow-editor/workflow-editor.component';
 
-const OperationsCenterRoutes: Routes = [
+const WorkflowCenterRoutes: Routes = [
   {
     path: '',
-    component: OperationsCenterComponent,
+    component: WorkflowCenterComponent,
     children: [
       {path: '', redirectTo: 'activeWorkflow'},
       {path: 'activeWorkflow', component: ActiveWorkflowComponent},
       {path: 'historyWorkflow', component: HistoryWorkflowComponent},
       {path: 'workflowViewer', component: WorkflowViewerComponent},
       {path: 'runWorkflow', component: RunWorkflowComponent},
+      {path: 'workflowEditor', component: WorkflowEditorComponent},
     ]
   }
 ];
 
 @NgModule({
   imports: [
-    RouterModule.forChild(OperationsCenterRoutes)
+    RouterModule.forChild(WorkflowCenterRoutes)
   ],
   exports: [
     RouterModule
   ]
 })
-export class OperationsCenterRoutingModule {
+export class WorkflowCenterRoutingModule {
 }

src/app/operations-center/active-workflow/active-workflow.component.spec.ts renamed to src/app/workflow-center/active-workflow/active-workflow.component.spec.ts

@@ -9,14 +9,19 @@
       <clr-icon clrVerticalNavIcon shape="history"></clr-icon>
       History Workflow
     </a>
-    <a clrVerticalNavLink routerLink="./workflowViewer" routerLinkActive="active">
-      <clr-icon clrVerticalNavIcon shape="view-cards"></clr-icon>
-      Workflow Viewer
-    </a>
     <a clrVerticalNavLink routerLink="./runWorkflow" routerLinkActive="active">
       <clr-icon clrVerticalNavIcon shape="play"></clr-icon>
       Run Workflow
     </a>
+    <a clrVerticalNavLink routerLink="./workflowEditor" routerLinkActive="active">
+      <clr-icon clrVerticalNavIcon shape="note"></clr-icon>
+      Workflow Editor
+    </a>
+    <a clrVerticalNavLink routerLink="./workflowViewer" routerLinkActive="active">
+      <clr-icon clrVerticalNavIcon shape="view-cards"></clr-icon>
+      Workflow Viewer
+    </a>
+
 
   </clr-vertical-nav>
   <div class="content-area">

src/app/operations-center/active-workflow/active-workflow.component.ts renamed to src/app/workflow-center/active-workflow/active-workflow.component.ts

@@ -0,0 +1,22 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WorkflowCenterComponent } from './workflow-center.component';
+
+describe('WorkflowCenterComponent', () => {
+  let component: WorkflowCenterComponent;
+  let fixture: ComponentFixture<WorkflowCenterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WorkflowCenterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WorkflowCenterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+});

src/app/operations-center/history-workflow/history-workflow.component.html renamed to src/app/workflow-center/history-workflow/history-workflow.component.html

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-workflow-center',
+  templateUrl: './workflow-center.component.html',
+  styleUrls: ['./workflow-center.component.scss']
+})
+export class WorkflowCenterComponent implements OnInit {
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/operations-center/history-workflow/history-workflow.component.scss renamed to src/app/workflow-center/history-workflow/history-workflow.component.scss

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ClarityModule } from '@clr/angular';
+import { NodeExtensionService } from '../canvas-graph/node-extension.service';
 
 import { ManagementCenterServicesModule } from '../management-center/services/management-center-service.module';
 
@@ -10,31 +11,33 @@ import { HistoryWorkflowComponent } from './history-workflow/history-workflow.co
 import { WorkflowViewerComponent } from './workflow-viewer/workflow-viewer.component';
 import { RunWorkflowComponent } from './run-workflow/run-workflow.component';
 
-import { OperationsCenterComponent } from './operations-center.component';
-import { OperationsCenterRoutingModule } from './operations-center-routing.module';
+import { WorkflowCenterComponent } from './workflow-center.component';
+import { WorkflowCenterRoutingModule } from './workflow-center-routing.module';
 
 import { CanvasGraphModule } from 'app/canvas-graph/canvas-graph.module';
 import { InventoryModule } from 'app/inventory/inventory.module';
+import { WorkflowEditorComponent } from './workflow-editor/workflow-editor.component';
 
 @NgModule({
   imports: [
     ClarityModule.forChild(),
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
-    OperationsCenterRoutingModule,
+    WorkflowCenterRoutingModule,
     ManagementCenterServicesModule,
     CanvasGraphModule,
     InventoryModule,
   ],
   declarations: [
-    OperationsCenterComponent,
+    WorkflowCenterComponent,
     ActiveWorkflowComponent,
     HistoryWorkflowComponent,
     WorkflowViewerComponent,
     RunWorkflowComponent,
+    WorkflowEditorComponent,
   ],
-  providers: []
+  providers: [NodeExtensionService ]
 })
 
-export class OperationsCenterModule {}
+export class WorkflowCenterModule {}

src/app/operations-center/history-workflow/history-workflow.component.spec.ts renamed to src/app/workflow-center/history-workflow/history-workflow.component.spec.ts

@@ -1,4 +1,4 @@
-<div class="app-workflow-canvas">
+<div class="workflow-editor">
   <div class="workflow-json-operation clear">
     <div class="workflow-editor">
       <button class="btn btn-icon" (click)="saveConfirm()" title="Save">
@@ -21,8 +21,9 @@
           <clr-icon shape="arrow left"></clr-icon>
         </button>
         <div class="editor-dropdown">
-          <dropdown-group [data]="workflowStore" [columns]="columns" [placeholders]="placeholders" [fields]="fields" needSearchIcon=true
-            (selected)="onSelected($event)" (cleared)="onRefresh()">
+          <dropdown-group [data]="workflowStore" [columns]="columns" [placeholders]="placeholders" [fields]="fields"
+                          needSearchIcon=true
+                          (selected)="onSelected($event)" (cleared)="onRefresh()">
           </dropdown-group>
         </div>
       </div>
@@ -68,4 +69,4 @@ <h3 class="modal-title">Error Match Task Lable Waiton</h3>
       <button type="button" class="btn btn-primary btn-danger" (click)="isWaitOnMismatch = false;">OK</button>
     </div>
   </clr-modal>
-</div>
+</div>

src/app/operations-center/history-workflow/history-workflow.component.ts renamed to src/app/workflow-center/history-workflow/history-workflow.component.ts

@@ -1,17 +1,18 @@
-.app-workflow-canvas {
-  margin: 15px;
+.workflow-editor {
   .float-right {
     float: right;
   }
   .workflow-json-operation {
     padding-bottom: 45px;
     display: inline-flex;
     width: 100%;
+
+    p {
+      float: right;
+    }
+
     .workflow-editor {
       flex: 3;
-      p {
-        float: right;
-      }
     }
     .editor {
       margin-left: 15px;
@@ -20,10 +21,11 @@
       height: 100vh;
       border: none;
       #jsoneditor {
-        height: 100vh !important;
+        height: 100vh;
       }
       .filter-line {
         margin-left: 0px;
+        display: -webkit-inline-box;
         .editor-dropdown {
           margin-top: 18px;
           width: 85%;
@@ -32,4 +34,3 @@
     }
   }
 }
-

src/app/operations-center/run-workflow/run-workflow.component.html renamed to src/app/workflow-center/run-workflow/run-workflow.component.html

@@ -18,5 +18,4 @@ describe('WorkflowEditorComponent', () => {
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
-
 });