issue #40

CenturyLinkCloud · Sep 13, 2018 · 31e44e7 · 31e44e7
1 parent a5fa914
commit 31e44e7
Show file tree

Hide file tree

Showing 7 changed files with 169 additions and 46 deletions.
diff --git a/mdw-hub/jshint.json b/mdw-hub/jshint.json
@@ -9,6 +9,7 @@
     "navigator": false,
     "setTimeout": false,
     "clearTimeout": false,
+    "sessionStorage": false,
     "angular": false,
     "require": false,
     "confirm": false,

diff --git a/mdw-hub/web/css/mdw-admin.css b/mdw-hub/web/css/mdw-admin.css
@@ -615,6 +615,21 @@
 .mdw-value-name {
   font-style: italic;
 }
+.mdw-value-item {
+  display: flex;
+  margin: 5px 10px;
+}
+.mdw-glyph-equals {
+  transform: rotate(90deg);
+  font-size: 12px;
+  margin-left: -3px;  
+}
+.mdw-glyph-asterisk {
+  color: #337ab7;
+  font-size: 12px;
+  margin-left: 5px;
+  margin-top: 3px;
+}
 .mdw-code {
   white-space: pre;
 }
@@ -693,6 +708,10 @@
   vertical-align: top;
   font-size: 18px;
 }
+.mdw-asterisk {
+  color: #f44336;
+  vertical-align: top;
+}
 .mdw-message {
   float: left;
   color: #a94442;

diff --git a/mdw-hub/web/js/ui/list.js b/mdw-hub/web/js/ui/list.js
@@ -102,10 +102,13 @@ listMod.controller('MdwListController', ['$scope', '$http', '$location', 'mdw',
       if ($scope.listFilter.hasOwnProperty(key)) {
         var val = $scope.listFilter[key];
         if (val !== null && typeof(val) != 'undefined') {
-          if (val instanceof Date) 
+          if (val instanceof Date) {
             val = util.serviceDate(val);
-          else if (typeof(val) === 'string')
+          }
+          else if (typeof(val) === 'string') {
             val = val.replace(/\[/g, "%5B").replace(/]/g, "%5D");
+            val = val.replace(/\{/g, "%7B").replace(/}/g, "%7D");
+          }
           query += '&' + key + '=' + val;
         }
       }

diff --git a/mdw-hub/web/js/util.js b/mdw-hub/web/js/util.js
@@ -224,6 +224,45 @@ utilMod.factory('util', ['$http', '$parse', 'mdw', function($http, $parse, mdw)
         }
       }
       return except;
+    },
+    toParamString: function(valuesObject) {
+      if (valuesObject) {
+        var str = '';
+        this.getProperties(valuesObject).forEach(function(prop) {
+          var val = valuesObject[prop];
+          if (val || val === '') {
+            if (str) {
+              str += ',';
+            }
+            str += prop + '=' + (val === '' ? "''" : val);
+          }
+        });
+        if (str) {
+          return '{' + str + '}';
+        }
+      }
+    },
+    toValuesObject: function(paramString) {
+      if (paramString) {
+        var values = {};
+        if (paramString.startsWith('{') && paramString.endsWith('}')) {
+          paramString.substring(1, paramString.length - 1).split(",").forEach(function(entry) {
+            var eq = entry.indexOf('=');
+            if (eq > 0 && eq < entry.length - 1) {
+                var key = entry.substring(0, eq).trim();
+                var val = entry.substring(eq + 1);
+                if (val.startsWith("'") && val.endsWith("'") && val.length > 1) {
+                    val = val.substring(1, val.length - 1);
+                }
+                else {
+                    val = val.trim();
+                }
+                values[key] = val;
+            }            
+          });     
+        }
+        return values;
+      }
     }
   };
 }]);
diff --git a/mdw-hub/web/js/workflow/processes.js b/mdw-hub/web/js/workflow/processes.js
@@ -3,26 +3,29 @@
 var processMod = angular.module('processes', ['mdw']);
 
 processMod.controller('ProcessesController', 
-    ['$scope', '$http', '$cookieStore', 'mdw', 'util', 'PROCESS_STATUSES',
-    function($scope, $http, $cookieStore, mdw, util, PROCESS_STATUSES) {
+    ['$scope', '$http', 'mdw', 'util', 'PROCESS_STATUSES',
+    function($scope, $http, mdw, util, PROCESS_STATUSES) {
 
   // definitionId and processSpec passed in query params
   // (from mdw-studio, for example)
   var definitionIdParam = util.urlParams().definitionId;
   var processSpecParam = util.urlParams().processSpec;
   if (definitionIdParam && processSpecParam) {
-    var procFilter = $cookieStore.get('processFilter');
-    if (!procFilter)
+    var procFilter = sessionStorage.getItem('processFilter');
+    if (procFilter)
+      procFilter = JSON.parse(procFilter);
+    else
       procFilter = {};
     procFilter.processId = definitionIdParam;
     procFilter.master = false;
     procFilter.status = '[Any]';
     procFilter.sort = 'startDate';
     procFilter.descending = true;
-    $cookieStore.put('processFilter', procFilter);
+    procFilter.values = null;
+    sessionStorage.setItem('processFilter', JSON.stringify(procFilter));
     if (processSpecParam.endsWith('.proc'))
       processSpecParam = processSpecParam.substring(0, processSpecParam.length - 5);
-    $cookieStore.put('processSpec', processSpecParam);
+    sessionStorage.setItem('processSpec', processSpecParam);
     window.location = mdw.roots.hub + '#/workflow/processes';
     return;
   }
@@ -32,53 +35,71 @@ processMod.controller('ProcessesController',
         master: true,
         status: '[Active]',
         sort: 'startDate',
-        descending: true
+        descending: true,
+        values: null
     };
   };
 
   // two-way bound to/from directive
   $scope.processList = {};
 
-  $scope.selectedChart=$cookieStore.get('selectedChart');
-
-  $scope.processFilter = $cookieStore.get('processFilter');
-  if (!$scope.processFilter) {
+  var processFilter = sessionStorage.getItem('processFilter');
+  if (!processFilter) {
     $scope.resetFilter();
   }
   else {
+    $scope.processFilter = JSON.parse(processFilter);
     // don't remember these
     $scope.processFilter.instanceId = null;
     $scope.processFilter.masterRequestId = null;
     // fix date format stored in cookieStore
     if ($scope.processFilter.startDate)
       $scope.processFilter.startDate = util.serviceDate(new Date($scope.processFilter.startDate));
-    $cookieStore.remove('selectedChart');
   }
 
   // pseudo-status [Active] means non-final
   $scope.allStatuses = ['[Active]','[Any]'].concat(PROCESS_STATUSES);
 
-  $scope.setSelectedChart=function(selChart) {
-    $scope.selectedChart= selChart;
-    $cookieStore.put('selectedChart',$scope.selectedChart);
-    if (selChart ==='List') {
-      window.location.href='#/workflow/processes';
-    }
-    else {     
-      window.location.href='#/dashboard/processes?chart='+selChart;
-    }    
-  };
-
   // preselected procDef
   if ($scope.processFilter.processId) {
-    $scope.typeaheadMatchSelection = $cookieStore.get('processSpec');
+    $scope.typeaheadMatchSelection = sessionStorage.getItem('processSpec');
   }
   else {
-    $cookieStore.remove('processSpec'); 
+    sessionStorage.removeItem('processSpec'); 
   }
 
+  $scope.getValueFilters = function() {
+    if ($scope.processFilter.values) {
+      // translate param string to object
+      return util.toValuesObject($scope.processFilter.values);
+    }
+  };
+
+  $scope.setValueFilter = function(name, value) {
+    if (name) {
+      if (value || value === '') {
+        var valuesObject = util.toValuesObject($scope.processFilter.values);
+        if (!valuesObject) {
+          valuesObject = {};
+        }
+        valuesObject[name] = value;
+        $scope.processFilter.values = util.toParamString(valuesObject);
+      }
+      else {
+        $scope.removeValueFilter(name);
+      }
+    }
+  };
+
+  $scope.removeValueFilter = function(name) {
+    if ($scope.processFilter.values) {
+      var valuesObject = util.toValuesObject($scope.processFilter.values);
+      delete valuesObject[name];
+      $scope.processFilter.values = util.toParamString(valuesObject);
+    }
+  };
+
   $scope.$on('page-retrieved', function(event, processList) {
-    $cookieStore.remove('selectedChart');
     // start date and end date, adjusted for db offset
     var dbDate = new Date(processList.retrieveDate);
     processList.processInstances.forEach(function(processInstance) {
@@ -91,20 +112,20 @@ processMod.controller('ProcessesController',
         let procSpec = processList.processInstances[0].processName;
         if (processList.processInstances[0].processVersion)
           procSpec += ' v' + processList.processInstances[0].processVersion;
-        $cookieStore.put('processSpec', procSpec);
+        sessionStorage.setItem('processSpec', procSpec);
       }
       else {
         $http.get(mdw.roots.services + '/services/Workflow?id=' + $scope.processFilter.processId + '&summary=true&app=mdw-admin')
           .then(function(response) {
-            $cookieStore.put('processSpec', response.data.name + ' v' + response.data.version);
+            sessionStorage.setItem('processSpec', response.data.name + ' v' + response.data.version);
           }
         );
       }
     }
     else {
-      $cookieStore.remove('processSpec');
+      sessionStorage.removeItem('processSpec');
     }
-    $cookieStore.put('processFilter', $scope.processFilter);
+    sessionStorage.setItem('processFilter', JSON.stringify($scope.processFilter));
   });
 
   // instanceId, masterRequestId, processName, packageName
@@ -178,7 +199,11 @@ processMod.controller('ProcessesController',
   $scope.clearTypeahead = function() {
     $scope.typeaheadMatchSelection = null;
     $scope.clearTypeaheadFilters();
-    $cookieStore.remove('processSpec'); 
+    sessionStorage.removeItem('processSpec'); 
+  };
+
+  $scope.goChart = function() {
+    window.location = '#/dashboard/processes?chart=list';
   };
 }]);
 
@@ -292,8 +317,8 @@ processMod.factory('Process', ['$resource', 'mdw', function($resource, mdw) {
   });
 }]);
 
-processMod.controller('ProcessDefsController', ['$scope', '$cookieStore', 'mdw', 'util', 'ProcessDef',
-                                               function($scope, $cookieStore, mdw, util, ProcessDef) {
+processMod.controller('ProcessDefsController', ['$scope', 'mdw', 'util', 'ProcessDef',
+                                               function($scope, mdw, util, ProcessDef) {
   $scope.definitionList = ProcessDef.retrieve({}, function success() {
     var pkgs = $scope.definitionList.packages;
     pkgs.forEach(function(pkg) {
@@ -331,11 +356,12 @@ processMod.controller('ProcessDefsController', ['$scope', '$cookieStore', 'mdw',
       if (pkg.collapsed)
         st[pkg.name] = true;
     });
-    $cookieStore.put('procsPkgCollapsedState', st);
+    sessionStorage.setItem('procsPkgCollapsedState', JSON.stringify(st));
   };
   $scope.applyPkgCollapsedState = function() {
-    var st = $cookieStore.get('procsPkgCollapsedState');
+    var st = sessionStorage.getItem('procsPkgCollapsedState');
     if (st) {
+      st = JSON.parse(st);
       util.getProperties(st).forEach(function(pkgName) {
         var col = st[pkgName];
         if (col === true) {
@@ -352,8 +378,8 @@ processMod.controller('ProcessDefsController', ['$scope', '$cookieStore', 'mdw',
 }]);
 
 processMod.controller('ProcessDefController', 
-    ['$scope', '$routeParams', '$route', '$location', '$filter', '$cookieStore', 'mdw', 'util', 'ProcessDef', 'ProcessSummary',
-    function($scope, $routeParams, $route, $location, $filter, $cookieStore, mdw, util, ProcessDef, ProcessSummary) {
+    ['$scope', '$routeParams', '$route', '$location', '$filter', 'mdw', 'util', 'ProcessDef', 'ProcessSummary',
+    function($scope, $routeParams, $route, $location, $filter, mdw, util, ProcessDef, ProcessSummary) {
 
   $scope.activity = util.urlParams().activity; // (will be highlighted in rendering)
 
@@ -365,8 +391,10 @@ processMod.controller('ProcessDefController',
   $scope.definitionId = null;  // stored at scope level due to vagaries in $scope.process 
 
   $scope.setProcessFilter = function() {
-    var procFilter = $cookieStore.get('processFilter');
-    if (!procFilter)
+    var procFilter = sessionStorage.getItem('processFilter');
+    if (procFilter)
+      procFilter = JSON.parse(procFilter);
+    else
       procFilter = {};
     procFilter.processId = $scope.definitionId;
     if (procFilter.processId) {
@@ -377,8 +405,8 @@ processMod.controller('ProcessDefController',
         procSpec += ' v' + $routeParams.version;
       procFilter.master = false;
       procFilter.status = null;
-      $cookieStore.put('processFilter', procFilter);
-      $cookieStore.put('processSpec', procSpec);
+      sessionStorage.setItem('processFilter', JSON.stringify(procFilter));
+      sessionStorage.setItem('processSpec', procSpec);
     }
   };
 
@@ -399,7 +427,7 @@ processMod.controller('ProcessDefController',
         $scope.definitionId = $scope.process.definitionId;
         $scope.template = $scope.process.template;
     });
-  }
+  }  
 }]);
 
 // retains state for nav

diff --git a/mdw-hub/web/workflow/processFilters.html b/mdw-hub/web/workflow/processFilters.html
@@ -25,6 +25,40 @@
       </ul>
     </div>
   </div>
+  <div class="mdw-vsm-indent" style="width:180px;margin-top:17px;">
+    <div class="mdw-flex-item">
+      <div class="mdw-inner-addon mdw-right-addon" uib-dropdown dropdown-append-to-body="true" auto-close="disabled">
+        <i class="glyphicon glyphicon-chevron-down"></i>
+        <input type="text" class="form-control mdw-dropfilter" placeholder="Values..." 
+          uib-dropdown-toggle readonly>
+        <ul class="dropdown-menu mdw-dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown" style="width:500px;">
+          <li class="mdw-value-item" ng-repeat="(varName, varValue) in getValueFilters()">
+            <input type="text" class="form-control" style="width:120px;" placeholder="Name" readonly popover-stay-open
+              ng-model="varName">
+            <div class="glyphicon glyphicon-pause mdw-glyph-equals"></div>
+            <input type="text" class="form-control" style="width:300px;margin-left:20px;" placeholder="Value" popover-stay-open
+              ng-model="varValue" ng-change="setValueFilter(varName,varValue)">
+            <button type="button" class="btn mdw-btn" style="background-color:transparent;margin-left:5px;" popover-stay-open title="Remove"
+              ng-click="removeValueFilter(varName)">
+              <span class="glyphicon glyphicon-remove" style="color:#337ab7;" popover-stay-open></span>
+            </button>
+          </li>
+          <li class="mdw-value-item">
+            <input type="text" class="form-control" style="width:120px;" placeholder="Name" popover-stay-open
+              ng-model="varName">
+            <div class="glyphicon glyphicon-pause mdw-glyph-equals"></div>
+            <input type="text" class="form-control" style="width:300px;margin-left:20px;" placeholder="Value" popover-stay-open
+              ng-model="varValue">
+            <button type="button" class="btn mdw-btn" style="background-color:transparent;margin-left:5px;" popover-stay-open title="Add"
+              ng-click="setValueFilter(varName,varValue);varName=null;varValue=null;">
+                <span class="glyphicon glyphicon-plus" style="color:#337ab7;" popover-stay-open></span>
+            </button>
+          </li>
+        </ul>
+      </div>
+      <div class="glyphicon glyphicon-asterisk mdw-glyph-asterisk" ng-if="processFilter.values"></div>
+    </div>
+  </div>
   <div class="mdw-vmed-indent">
     <button type="button" class="btn btn-primary mdw-btn" ng-click="resetFilter();clearTypeahead();">Reset</button>
   </div>

diff --git a/mdw-hub/web/workflow/processes.html b/mdw-hub/web/workflow/processes.html
@@ -41,8 +41,7 @@
           <button type="button" class="btn btn-primary mdw-btn" ng-click="processList.downloadExcel()">
             <span class="glyphicon glyphicon-download-alt"></span> Export
           </button>        
-          <button type="button" class="btn btn-primary mdw-btn" mdw-action-pop-button
-            uib-popover-template="'workflow/chartTypes.html'">   
+          <button type="button" class="btn btn-primary mdw-btn" ng-click="goChart()">   
             <span class="glyphicon glyphicon-stats"></span> Chart
           </button>         
         </mdw-actions>