Minor explorer tuning (#430)

* Update year in Explorer footer * Add hideFooter-property to config.js * Add htmlTitle-property to config.js * Add nflowLogoFile-property to config.js * Put workflow instance properties in a table (behind config.js workflowInfoTable-property) * Change layout for workflow instance properties and graph, and fix Grunt warnings * Fix review findings * Replace nflow_logo.svg reference (now inside layout.js) to cache-busted (created by filerev) version * Add CHANGELOG.md entries
NitorCreations · Feb 8, 2021 · 3c5c587 · 3c5c587
1 parent 78a48a3
commit 3c5c587
Show file tree

Hide file tree

Showing 10 changed files with 134 additions and 55 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,8 @@
 **Highlights**
 - Support updating workflow instance business key.
 - Support for searching workflow instances by state variable key and value.
+- Added optional properties for tuning parts of nFlow Explorer
+- Facelift for workflow instance properties in nFlow Explorer
 
 **Details**
 - `nflow-engine`
@@ -12,6 +14,8 @@
   - `UpdateWorkflowInstanceRequest.businessKey` field was added to support updating workflow instance business key via REST API.
   - Added support for new query parameters `stateVariableKey` and `stateVariableValue` to `GET /v1/workflow-instance` to limit search query by state variable name and key. Only the latest value of the state variable of the workflow instance is used.
 - `nflow-explorer`
+  - Added optional `config.js` properties (`htmlTitle`, `nflowLogoFile`, `hideFooter`)
+  - Facelift for workflow instance properties
   - Dependency updates:
     - urijs 1.19.5
     - socket.io 2.4.1

diff --git a/nflow-explorer/Gruntfile.js b/nflow-explorer/Gruntfile.js
@@ -236,8 +236,14 @@ module.exports = function (grunt) {
     usemin: {
       html: ['<%= yeoman.dist %>/**/*.html'],
       css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
+      js: ['<%= yeoman.dist %>/**/*.js'],
       options: {
-        assetsDirs: ['<%= yeoman.dist %>','<%= yeoman.dist %>/images']
+        assetsDirs: ['<%= yeoman.dist %>','<%= yeoman.dist %>/images'],
+        patterns: {
+          js: [
+            [/(nflow_logo\.svg)/, 'Replacing reference to nflow_logo.svg']
+          ]
+        }
       }
     },
 

diff --git a/nflow-explorer/src/app/app.js b/nflow-explorer/src/app/app.js
@@ -26,7 +26,10 @@
     'toastr'
   ]);
 
-  m.run(function (EndpointService, ExecutorService) {
+  m.run(function (EndpointService, ExecutorService, $window, config) {
+    if (config.htmlTitle) {
+      $window.document.title = config.htmlTitle;
+    }
     EndpointService.init();
     ExecutorService.start();
   });

diff --git a/nflow-explorer/src/app/layout/footer.html b/nflow-explorer/src/app/layout/footer.html
@@ -2,7 +2,7 @@
   <div class="container-fluid">
     <div class="row footer">
       <div class="col-md-12">
-        <p>&copy; 2014-2020 Nitor</p>
+        <p>&copy; 2014-2021 Nitor</p>
       </div>
     </div>
   </div>

diff --git a/nflow-explorer/src/app/layout/header.html b/nflow-explorer/src/app/layout/header.html
@@ -7,7 +7,7 @@
   <div class="container-fluid">
     <div class="row vertical-align">
       <div class="col-md-2">
-        <a ui-sref="frontPage" class="pull-left"><img src="images/nflow_logo.svg" alt="nFlow"></a>
+        <a ui-sref="frontPage" class="pull-left"><img src="{{ctrl.nflowLogoFile}}" alt="nFlow"></a>
       </div>
       <div class="col-md-1">
         <endpoint-selection class="pull-left"></endpoint-selection>

diff --git a/nflow-explorer/src/app/layout/layout.js b/nflow-explorer/src/app/layout/layout.js
@@ -1,7 +1,7 @@
 (function () {
   'use strict';
 
-  var m = angular.module('nflowExplorer.layout', []);
+  var m = angular.module('nflowExplorer.layout', ['nflowExplorer.config']);
 
   m.directive('layout', function() {
     return {
@@ -20,15 +20,18 @@
     };
   });
 
-  m.directive('pageFooter', function() {
+  m.directive('pageFooter', function(config) {
+    if (config.hideFooter) {
+      return {};
+    }
     return {
       restrict: 'E',
       replace: 'true',
       templateUrl: 'app/layout/footer.html'
     };
-  });
+});
 
-  m.controller('PageHeaderCtrl', function($location, $state, $window) {
+  m.controller('PageHeaderCtrl', function($location, $state, $window, config) {
     var self = this;
     // nope, $stateParams.radiator wont work here
     self.radiator = !!$location.search().radiator;
@@ -38,6 +41,7 @@
     self.isAboutTabActive = function() { return $state.includes('aboutTab'); };
     self.returnUrl = getServerParamFromUrl('returnUrl', $window);
     self.returnUrlLabel = getServerParamFromUrl('returnUrlLabel', $window) || 'Back';
+    self.nflowLogoFile = config.nflowLogoFile || 'images/nflow_logo.svg';
 
     function getServerParamFromUrl(paramName, $window) {
       var searchStr = $window.location.search.substring(1);

diff --git a/nflow-explorer/src/app/workflow/workflow.html b/nflow-explorer/src/app/workflow/workflow.html
@@ -1,17 +1,31 @@
 <section class="wd-workflow">
   <div class="row">
     <div class="col-md-6">
-      <h2>{{ctrl.definition.type}} ({{ctrl.workflow.id}})</h2>
+      <h2>
+        <a ui-sref="workflow-definition({type: ctrl.workflow.type})">
+          {{ctrl.definition.type}}
+        </a>
+        ({{ctrl.workflow.id}})
+      </h2>
       <blockquote ng-show="ctrl.definition.description">{{ctrl.definition.description}}</blockquote>
-      <ul class="listing">
-        <li><a ui-sref="workflow-definition({type: ctrl.workflow.type})">Go to workflow definition</a></li>
-      </ul>
-
-      <workflow-info workflow="ctrl.workflow"
-                     parent-workflow="ctrl.parentWorkflow"
-                     child-workflows="ctrl.childWorkflows"
-                     definition="ctrl.definition"></workflow-info>
-      <workflow-graph definition="ctrl.definition" workflow="ctrl.workflow"></workflow-graph>
+      <div ng-if="ctrl.definition.states.length > 15">
+        <workflow-info workflow="ctrl.workflow"
+            parent-workflow="ctrl.parentWorkflow"
+            child-workflows="ctrl.childWorkflows"
+            definition="ctrl.definition"></workflow-info>
+          <workflow-graph definition="ctrl.definition" workflow="ctrl.workflow"></workflow-graph>
+      </div>
+      <div class="row" ng-if="ctrl.definition.states.length <= 15">
+        <div class="col-lg-6">
+          <workflow-info workflow="ctrl.workflow"
+                        parent-workflow="ctrl.parentWorkflow"
+                        child-workflows="ctrl.childWorkflows"
+                        definition="ctrl.definition"></workflow-info>
+        </div>
+        <div class="col-lg-6">
+          <workflow-graph definition="ctrl.definition" workflow="ctrl.workflow"></workflow-graph>
+        </div>
+      </div>
     </div>
     <div class="col-md-6">
       <workflow-tabs definition="ctrl.definition" workflow="ctrl.workflow"

diff --git a/nflow-explorer/src/app/workflow/workflowInfo.html b/nflow-explorer/src/app/workflow/workflowInfo.html
@@ -1,23 +1,55 @@
 <section class="wd-workflow-info">
-  <div ng-show="ctrl.parentWorkflow">Parent workflow:
-    <a ui-sref="workflow({id: ctrl.parentWorkflow.id})">{{ctrl.parentWorkflow.type}} ({{ctrl.parentWorkflow.id}})</a>
-  </div>
-  <div ng-show="ctrl.childWorkflows.length">Child workflows:
-    <strong><a ui-sref="search({parentWorkflowId: ctrl.workflow.id})">{{ctrl.childWorkflows.length}}</a></strong>
-  </div>
-  Created: <strong title="{{ctrl.workflow.created | fromNow}}">{{ctrl.workflow.created | date:'yyyy-MM-dd HH:mm:ss' }}</strong><br/>
-  Started: <strong title="{{ctrl.workflow.started | fromNow}}">{{ctrl.workflow.started | date:'yyyy-MM-dd HH:mm:ss' }}</strong><br/>
-  Modified: <strong title="{{ctrl.workflow.modified | fromNow}}">{{ctrl.workflow.modified | date:'yyyy-MM-dd HH:mm:ss' }}</strong><br/>
-  Current state: <strong class="wd-active-state clickable" ng-click="ctrl.selectAction(ctrl.workflow.state)">{{ctrl.workflow.state}}</strong>
-  <span ng-show="ctrl.workflow.stateText">({{ctrl.workflow.stateText}})</span><br/>
-  Current status: <strong>{{ctrl.workflow.status}}</strong><br/>
-  <div ng-show="ctrl.workflow.signal">
-    Current signal: <strong title="See supported signals tab in workflow definition">{{ctrl.workflow.signal}}</strong><br/>
-  </div>
-  Next activation: <strong title={{ctrl.workflow.nextActivation}}>{{ctrl.workflow.nextActivation | fromNowOrNever}}</strong>
-  <div>Workflow id: <strong>{{ctrl.workflow.id}}</strong></div>
-  <div>Priority: <strong>{{ctrl.workflow.priority}}</strong><br/>
-  <div ng-show="ctrl.workflow.businessKey">Business key: <code>{{ctrl.workflow.businessKey}}</code></div>
-  <div ng-show="ctrl.workflow.externalId">External id: <code>{{ctrl.workflow.externalId}}</code></div>
+  <table class="workflow-properties">
+    <tr ng-if="ctrl.parentWorkflow">
+      <td>Parent workflow</td>
+      <td><a ui-sref="workflow({id: ctrl.parentWorkflow.id})">{{ctrl.parentWorkflow.type}} ({{ctrl.parentWorkflow.id}})</a></td>
+    </tr>
+    <tr ng-if="ctrl.childWorkflows.length">
+      <td>Child workflows</td>
+      <td><a ui-sref="search({parentWorkflowId: ctrl.workflow.id})">{{ctrl.childWorkflows.length}}</a></td>
+    </tr>
+    <tr title="{{ctrl.workflow.stateText}}">
+      <td>Current state</td>
+      <td>
+        <a class="wd-active-state clickable" ng-click="ctrl.selectAction(ctrl.workflow.state)">{{ctrl.workflow.state}}</a>
+      </td>
+    </tr>
+    <tr>
+      <td>Current status</td>
+      <td>{{ctrl.workflow.status}}<br/>
+    </tr>
+    <tr title={{ctrl.workflow.nextActivation}}>
+      <td>Next activation</td>
+      <td>{{ctrl.workflow.nextActivation | fromNowOrNever}}</td>
+    </tr>
+    <tr ng-if="ctrl.workflow.businessKey">
+      <td>Business key</td>
+      <td><code>{{ctrl.workflow.businessKey}}</code></td>
+    </tr>
+    <tr ng-if="ctrl.workflow.externalId">
+      <td>External id</td>
+      <td><code>{{ctrl.workflow.externalId}}</code></td>
+    </tr>
+    <tr ng-if="ctrl.workflow.signal" title="See supported signals tab in workflow definition">
+      <td>Current signal</td>
+      <td>{{ctrl.workflow.signal}}</td>
+    </tr>
+    <tr ng-if="!!ctrl.workflow.priority" title="High value means high priority">
+      <td>Priority</td>
+      <td>{{ctrl.workflow.priority}}</td>
+    </tr>
+    <tr title="{{ctrl.workflow.created | fromNow}}">
+      <td>Created</td>
+      <td>{{ctrl.workflow.created | date:'yyyy-MM-dd HH:mm:ss'}}</td>
+    </tr>
+    <tr ng-if="ctrl.workflow.started" title="{{ctrl.workflow.started | fromNow}}">
+      <td>Started</td>
+      <td>{{ctrl.workflow.started | date:'yyyy-MM-dd HH:mm:ss'}}</td>
+    </tr>
+    <tr title="{{ctrl.workflow.modified | fromNow}}">
+      <td>Modified</td>
+      <td>{{ctrl.workflow.modified | date:'yyyy-MM-dd HH:mm:ss'}}</td>
+    </tr>
+  </table>
   <custom-content func="ctrl.contentGenerator(ctrl.definition, ctrl.workflow, ctrl.parentWorkflow, ctrl.childWorkflows)"></custom-content>
 </section>
diff --git a/nflow-explorer/src/config.js b/nflow-explorer/src/config.js
@@ -71,4 +71,12 @@ var Config = function() {
     return null;
   };
 
+  // Replaces HTML page title by given string
+  this.htmlTitle = undefined;
+
+  // Replaces nFlow logo in header by image in given location
+  this.nflowLogoFile = undefined;
+
+  // When true, hides the sticky footer with copyright
+  this.hideFooter = false;
 };
diff --git a/nflow-explorer/src/styles/main.scss b/nflow-explorer/src/styles/main.scss
@@ -111,22 +111,15 @@ a {
 
 /* for making svg images responsive */
 .svg-container {
-  display: inline-block;
-  position: relative;
-  width: 100%;
-  vertical-align: middle;
-  overflow: hidden;
+  margin: 10px;
 }
 
-.svg-content {
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  left: 0;
+.svg-content-responsive {
+  width: 100%;
 }
 
 .highlight {
-   font-weight: bold;
+  font-weight: bold;
 }
 
 .vertical-align {
@@ -266,13 +259,28 @@ ul.listing {
   cursor: pointer;
 }
 
-.svg-container {
-  width: 100%;
-  padding-top: 10px;
-  padding-bottom: 10px;
+.workflow-properties tr:nth-child(even) {
+  background-color: #f2f2f2;
 }
 
-.svg-content-responsive {
-  width: 100%;
+.workflow-properties tr:hover {
+  background-color: #ddd;
 }
 
+.workflow-properties td:first-child {
+  font-weight: bold;
+}
+
+.workflow-properties th {
+  background-color: #d9d9d9;
+}
+
+.workflow-properties td, .workflow-properties th {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+
+.workflow-properties code {
+  color: black;
+  background-color: transparent;
+}