You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@helix.apache.org by jx...@apache.org on 2022/12/14 23:30:45 UTC

[helix] branch master updated: add example and comment for using customized login (#2323)

This is an automated email from the ASF dual-hosted git repository.

jxue pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/helix.git


The following commit(s) were added to refs/heads/master by this push:
     new 07b84ef2b add example and comment for using customized login (#2323)
07b84ef2b is described below

commit 07b84ef2bf9a5069b2ff7da6e03d19ff2751537c
Author: Vivo <hi...@users.noreply.github.com>
AuthorDate: Wed Dec 14 15:30:40 2022 -0800

    add example and comment for using customized login (#2323)
---
 helix-front/docs/classes/HelixCtrl.html            |  41 +-
 helix-front/docs/classes/Node.html                 |  88 ++-
 helix-front/docs/classes/UserCtrl.html             | 257 +++----
 .../docs/components/AlertDialogComponent.html      |   2 +-
 helix-front/docs/components/AppComponent.html      |   9 +-
 helix-front/docs/components/ClusterComponent.html  |   2 +-
 .../docs/components/ClusterDetailComponent.html    |  12 +-
 .../docs/components/ClusterListComponent.html      |  69 +-
 .../docs/components/ConfigDetailComponent.html     |   2 +-
 .../docs/components/ConfirmDialogComponent.html    |  54 +-
 ...ponent.html => ConfirmDialogTestComponent.html} | 193 +++--
 .../docs/components/ControllerDetailComponent.html |   2 +-
 .../docs/components/DashboardComponent.html        |   2 +-
 .../docs/components/DataTableComponent.html        |   2 +-
 .../docs/components/DetailHeaderComponent.html     |   2 +-
 .../docs/components/DisabledLabelComponent.html    |   2 +-
 .../docs/components/HelixListComponent.html        |   2 +-
 .../docs/components/HistoryListComponent.html      |   2 +-
 .../docs/components/InputDialogComponent.html      |   2 +-
 .../docs/components/InputInlineComponent.html      |   2 +-
 .../docs/components/InstanceDetailComponent.html   |  40 +-
 .../docs/components/InstanceListComponent.html     |   2 +-
 .../docs/components/JobDetailComponent.html        |   2 +-
 helix-front/docs/components/JobListComponent.html  |  37 +-
 .../docs/components/JsonViewerComponent.html       |   2 +-
 .../docs/components/KeyValuePairsComponent.html    |   2 +-
 .../docs/components/NodeViewerComponent.html       |  22 +-
 .../docs/components/PartitionDetailComponent.html  |   2 +-
 .../docs/components/PartitionListComponent.html    |  49 +-
 .../docs/components/ResourceDetailComponent.html   |   2 +-
 .../ResourceDetailForInstanceComponent.html        |   2 +-
 .../docs/components/ResourceListComponent.html     |  43 +-
 .../components/ResourceNodeViewerComponent.html    |   2 +-
 .../docs/components/StateLabelComponent.html       |   2 +-
 .../docs/components/WorkflowDagComponent.html      |   2 +-
 .../docs/components/WorkflowDetailComponent.html   |   2 +-
 .../docs/components/WorkflowListComponent.html     |  35 +-
 helix-front/docs/coverage.html                     | 330 +++++++-
 helix-front/docs/dependencies.html                 |  11 +-
 .../docs/images/coverage-badge-documentation.svg   |   2 +-
 helix-front/docs/injectables/ClusterService.html   |  13 +-
 .../docs/injectables/ConfigurationService.html     |  12 +-
 helix-front/docs/injectables/HelperService.html    | 148 +++-
 helix-front/docs/injectables/InstanceService.html  |   2 +-
 helix-front/docs/injectables/ResourceService.html  |   6 +-
 helix-front/docs/injectables/UserService.html      |  20 +-
 .../{HelixSession.html => HelixRequest.html}       |  81 +-
 helix-front/docs/interfaces/HelixSession.html      |  59 +-
 helix-front/docs/interfaces/ListFieldObject.html   |  62 +-
 helix-front/docs/interfaces/MapFieldObject.html    |  62 +-
 .../{SimpleFieldObject.html => Payload.html}       | 188 ++++-
 helix-front/docs/interfaces/SimpleFieldObject.html |  62 +-
 helix-front/docs/js/menu-wc.js                     |  20 +-
 helix-front/docs/js/menu-wc_es5.js                 |  22 +-
 helix-front/docs/js/search/search_index.js         |   4 +-
 helix-front/docs/miscellaneous/typealiases.html    |  42 +-
 helix-front/docs/miscellaneous/variables.html      | 828 ++++++++++++++++++++-
 helix-front/docs/overview.html                     |   4 +-
 helix-front/docs/properties.html                   |   4 +-
 helix-front/documentation.json                     | 433 ++++++-----
 helix-front/package.json                           |   2 +-
 helix-front/server/controllers/user.ts             |  25 +-
 62 files changed, 2553 insertions(+), 884 deletions(-)

diff --git a/helix-front/docs/classes/HelixCtrl.html b/helix-front/docs/classes/HelixCtrl.html
index e82d01c22..1ab4af633 100644
--- a/helix-front/docs/classes/HelixCtrl.html
+++ b/helix-front/docs/classes/HelixCtrl.html
@@ -235,8 +235,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="65"
-                            class="link-to-prism">server/controllers/helix.ts:65</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="82"
+                            class="link-to-prism">server/controllers/helix.ts:82</a></div>
                 </td>
             </tr>
 
@@ -311,7 +311,7 @@
             <tr>
                 <td class="col-md-4">
                     <span class="modifier-icon icon ion-ios-reset"></span>
-                    <code>proxy(req: <a href="../interfaces/HelixUserRequest.html" target="_self">HelixUserRequest</a>, res: Response)</code>
+                    <code>proxy(req: <a href="../interfaces/HelixRequest.html" target="_self">HelixRequest</a>, res: Response)</code>
                 </td>
             </tr>
 
@@ -342,7 +342,7 @@
                                 <tr>
                                     <td>req</td>
                                     <td>
-                                                <code><a href="../interfaces/HelixUserRequest.html" target="_self" >HelixUserRequest</a></code>
+                                                <code><a href="../interfaces/HelixRequest.html" target="_self" >HelixRequest</a></code>
                                     </td>
 
                                     <td>
@@ -390,11 +390,11 @@
 
     <div class="tab-pane fade  tab-source-code" id="c-source">
         <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { Request, Response, Router } from &#x27;express&#x27;;
-
 import * as request from &#x27;request&#x27;;
+import { readFileSync } from &#x27;fs&#x27;;
 
-import { HELIX_ENDPOINTS } from &#x27;../config&#x27;;
-import { HelixUserRequest } from &#x27;./d&#x27;;
+import { HELIX_ENDPOINTS, IDENTITY_TOKEN_SOURCE, SSL } from &#x27;../config&#x27;;
+import { HelixRequest, HelixRequestOptions } from &#x27;./d&#x27;;
 
 export class HelixCtrl {
   static readonly ROUTE_PREFIX &#x3D; &#x27;/api/helix&#x27;;
@@ -404,7 +404,7 @@ export class HelixCtrl {
     router.route(&#x27;/helix/*&#x27;).all(this.proxy);
   }
 
-  protected proxy(req: HelixUserRequest, res: Response) {
+  protected proxy(req: HelixRequest, res: Response) {
     const url &#x3D; req.originalUrl.replace(HelixCtrl.ROUTE_PREFIX, &#x27;&#x27;);
     const helixKey &#x3D; url.split(&#x27;/&#x27;)[1];
 
@@ -432,20 +432,37 @@ export class HelixCtrl {
 
     if (apiPrefix) {
       const realUrl &#x3D; apiPrefix + url.replace(&#x60;/${helixKey}&#x60;, &#x27;&#x27;);
-      const options &#x3D; {
+      console.log(&#x60;helix-rest request url ${realUrl}&#x60;);
+
+      const options: HelixRequestOptions &#x3D; {
         url: realUrl,
         json: req.body,
         headers: {
           &#x27;Helix-User&#x27;: user,
         },
+        agentOptions: {
+          rejectUnauthorized: false,
+        },
       };
+
+      if (SSL.cafiles.length &gt; 0) {
+        options.agentOptions.ca &#x3D; readFileSync(SSL.cafiles[0], {
+          encoding: &#x27;utf-8&#x27;,
+        });
+      }
+
+      if (IDENTITY_TOKEN_SOURCE) {
+        options.headers[&#x27;Identity-Token&#x27;] &#x3D;
+          res.locals.cookie[&#x27;helixui_identity.token&#x27;];
+      }
+
       request[method](options, (error, response, body) &#x3D;&gt; {
         if (error) {
-          res.status(500).send(error);
+          res.status(response?.statusCode || 500).send(error);
         } else if (body?.error) {
-          res.status(500).send(body?.error);
+          res.status(response?.statusCode || 500).send(body?.error);
         } else {
-          res.status(response.statusCode).send(body);
+          res.status(response?.statusCode).send(body);
         }
       });
     } else {
diff --git a/helix-front/docs/classes/Node.html b/helix-front/docs/classes/Node.html
index 21dd2953b..e9c438fff 100644
--- a/helix-front/docs/classes/Node.html
+++ b/helix-front/docs/classes/Node.html
@@ -145,7 +145,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="23" class="link-to-prism">src/app/shared/models/node.model.ts:23</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="30" class="link-to-prism">src/app/shared/models/node.model.ts:30</a></div>
                             </td>
                         </tr>
 
@@ -207,7 +207,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="20" class="link-to-prism">src/app/shared/models/node.model.ts:20</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="27" class="link-to-prism">src/app/shared/models/node.model.ts:27</a></div>
                         </td>
                     </tr>
 
@@ -238,7 +238,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="22" class="link-to-prism">src/app/shared/models/node.model.ts:22</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="29" class="link-to-prism">src/app/shared/models/node.model.ts:29</a></div>
                         </td>
                     </tr>
 
@@ -269,7 +269,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="23" class="link-to-prism">src/app/shared/models/node.model.ts:23</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="30" class="link-to-prism">src/app/shared/models/node.model.ts:30</a></div>
                         </td>
                     </tr>
 
@@ -300,7 +300,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="21" class="link-to-prism">src/app/shared/models/node.model.ts:21</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="28" class="link-to-prism">src/app/shared/models/node.model.ts:28</a></div>
                         </td>
                     </tr>
 
@@ -336,8 +336,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="59"
-                            class="link-to-prism">src/app/shared/models/node.model.ts:59</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="66"
+                            class="link-to-prism">src/app/shared/models/node.model.ts:66</a></div>
                 </td>
             </tr>
 
@@ -431,8 +431,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="52"
-                            class="link-to-prism">src/app/shared/models/node.model.ts:52</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="59"
+                            class="link-to-prism">src/app/shared/models/node.model.ts:59</a></div>
                 </td>
             </tr>
 
@@ -514,8 +514,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="79"
-                            class="link-to-prism">src/app/shared/models/node.model.ts:79</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="86"
+                            class="link-to-prism">src/app/shared/models/node.model.ts:86</a></div>
                 </td>
             </tr>
 
@@ -585,8 +585,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="109"
-                            class="link-to-prism">src/app/shared/models/node.model.ts:109</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="131"
+                            class="link-to-prism">src/app/shared/models/node.model.ts:131</a></div>
                 </td>
             </tr>
 
@@ -661,6 +661,13 @@ interface MapFieldObject {
   value: SimpleFieldObject[];
 }
 
+interface Payload {
+  id: string;
+  simpleFields?: any;
+  listFields?: any;
+  mapFields?: any;
+}
+
 // This is a typical Helix Node definition
 export class Node {
   id: string;
@@ -688,7 +695,7 @@ export class Node {
 
       _.forOwn(obj[&#x27;mapFields&#x27;], (v, k) &#x3D;&gt; {
         this.mapFields.push(&lt;MapFieldObject&gt;{
-          name: k,
+          name: k.trim(),
           value: this.keyValueToArray(v),
         });
       });
@@ -706,7 +713,7 @@ export class Node {
     const index &#x3D; _.findIndex(this.mapFields, { name: key });
     if (index &gt;&#x3D; 0) {
       this.mapFields[index].value.push(&lt;SimpleFieldObject&gt;{
-        name,
+        name: name.trim(),
         value,
       });
     } else {
@@ -714,7 +721,7 @@ export class Node {
         name: key,
         value: [
           &lt;SimpleFieldObject&gt;{
-            name,
+            name: name.trim(),
             value,
           },
         ],
@@ -723,30 +730,45 @@ export class Node {
   }
 
   public json(id: string): string {
-    const obj &#x3D; {
+    const obj: Payload &#x3D; {
       id,
-      simpleFields: {},
-      listFields: {},
-      mapFields: {},
     };
 
-    _.forEach(this.simpleFields, (item: SimpleFieldObject) &#x3D;&gt; {
-      obj.simpleFields[item.name] &#x3D; item.value;
-    });
+    if (this?.simpleFields.length &gt; 0) {
+      obj.simpleFields &#x3D; {};
+      _.forEach(this.simpleFields, (item: SimpleFieldObject) &#x3D;&gt; {
+        obj.simpleFields[item.name] &#x3D; item.value;
+      });
+    }
 
-    _.forEach(this.listFields, (item: ListFieldObject) &#x3D;&gt; {
-      obj.listFields[item.name] &#x3D; [];
-      _.forEach(item.value, (subItem: SimpleFieldObject) &#x3D;&gt; {
-        obj.listFields[item.name].push(subItem.value);
+    if (this?.listFields.length &gt; 0) {
+      obj.listFields &#x3D; {};
+      _.forEach(this.listFields, (item: ListFieldObject) &#x3D;&gt; {
+        obj.listFields[item.name] &#x3D; [];
+        _.forEach(item.value, (subItem: SimpleFieldObject) &#x3D;&gt; {
+          obj.listFields[item.name].push(subItem.value);
+        });
       });
-    });
+    }
 
-    _.forEach(this.mapFields, (item: MapFieldObject) &#x3D;&gt; {
-      obj.mapFields[item.name] &#x3D; item.value ? {} : null;
-      _.forEach(item.value, (subItem: SimpleFieldObject) &#x3D;&gt; {
-        obj.mapFields[item.name][subItem.name] &#x3D; subItem.value;
+    if (this?.mapFields.length &gt; 0) {
+      obj.mapFields &#x3D; {};
+      _.forEach(this.mapFields, (item: MapFieldObject) &#x3D;&gt; {
+        obj.mapFields[item.name.trim()] &#x3D; item.value ? {} : null;
+        _.forEach(item.value, (subItem: SimpleFieldObject) &#x3D;&gt; {
+          // if the value is a string that contains all digits, parse it to a number
+          let parsedValue: string | number &#x3D; subItem.value;
+          if (
+            typeof subItem.value &#x3D;&#x3D;&#x3D; &#x27;string&#x27; &amp;&amp;
+            /^\d+$/.test(subItem.value)
+          ) {
+            parsedValue &#x3D; Number(subItem.value);
+          }
+
+          obj.mapFields[item.name.trim()][subItem.name] &#x3D; parsedValue;
+        });
       });
-    });
+    }
 
     return JSON.stringify(obj);
   }
diff --git a/helix-front/docs/classes/UserCtrl.html b/helix-front/docs/classes/UserCtrl.html
index 5e5113fd3..31ef1453d 100644
--- a/helix-front/docs/classes/UserCtrl.html
+++ b/helix-front/docs/classes/UserCtrl.html
@@ -83,10 +83,6 @@
                 <tr>
                     <td class="col-md-4">
                         <ul class="index-list">
-                            <li>
-                                    <span class="modifier">Protected</span>
-                                <a href="#authorize" >authorize</a>
-                            </li>
                             <li>
                                     <span class="modifier">Protected</span>
                                 <a href="#can" >can</a>
@@ -122,7 +118,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="7" class="link-to-prism">server/controllers/user.ts:7</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="15" class="link-to-prism">server/controllers/user.ts:15</a></div>
                             </td>
                         </tr>
 
@@ -166,89 +162,6 @@
     <h3 id="methods">
         Methods
     </h3>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="authorize"></a>
-                    <span class="name">
-                        <span class="modifier">Protected</span>
-                        <span ><b>authorize</b></span>
-                        <a href="#authorize"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-            <tr>
-                <td class="col-md-4">
-                    <span class="modifier-icon icon ion-ios-reset"></span>
-                    <code>authorize(req: <a href="../interfaces/HelixUserRequest.html" target="_self">HelixUserRequest</a>, res: Response)</code>
-                </td>
-            </tr>
-
-
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="15"
-                            class="link-to-prism">server/controllers/user.ts:15</a></div>
-                </td>
-            </tr>
-
-
-            <tr>
-                <td class="col-md-4">
-
-                    <div class="io-description">
-                        <b>Parameters :</b>
-                        
-                        <table class="params">
-                            <thead>
-                                <tr>
-                                    <td>Name</td>
-                                    <td>Type</td>
-                                    <td>Optional</td>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>req</td>
-                                    <td>
-                                                <code><a href="../interfaces/HelixUserRequest.html" target="_self" >HelixUserRequest</a></code>
-                                    </td>
-
-                                    <td>
-                                        No
-                                    </td>
-
-
-                                </tr>
-                                <tr>
-                                    <td>res</td>
-                                    <td>
-                                            <code>Response</code>
-                                    </td>
-
-                                    <td>
-                                        No
-                                    </td>
-
-
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    <div>
-                    </div>
-                    <div class="io-description">
-                        <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
-
-                    </div>
-                    <div class="io-description">
-                        
-                    </div>
-                </td>
-            </tr>
-        </tbody>
-    </table>
     <table class="table table-sm table-bordered">
         <tbody>
             <tr>
@@ -264,15 +177,15 @@
             <tr>
                 <td class="col-md-4">
                     <span class="modifier-icon icon ion-ios-reset"></span>
-                    <code>can(req: <a href="../interfaces/HelixUserRequest.html" target="_self">HelixUserRequest</a>, res: Response)</code>
+                    <code>can(req: <a href="../interfaces/HelixRequest.html" target="_self">HelixRequest</a>, res: Response)</code>
                 </td>
             </tr>
 
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="29"
-                            class="link-to-prism">server/controllers/user.ts:29</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="48"
+                            class="link-to-prism">server/controllers/user.ts:48</a></div>
                 </td>
             </tr>
 
@@ -295,7 +208,7 @@
                                 <tr>
                                     <td>req</td>
                                     <td>
-                                                <code><a href="../interfaces/HelixUserRequest.html" target="_self" >HelixUserRequest</a></code>
+                                                <code><a href="../interfaces/HelixRequest.html" target="_self" >HelixRequest</a></code>
                                     </td>
 
                                     <td>
@@ -347,15 +260,15 @@
             <tr>
                 <td class="col-md-4">
                     <span class="modifier-icon icon ion-ios-reset"></span>
-                    <code>current(req: <a href="../interfaces/HelixUserRequest.html" target="_self">HelixUserRequest</a>, res: Response)</code>
+                    <code>current(req: <a href="../interfaces/HelixRequest.html" target="_self">HelixRequest</a>, res: Response)</code>
                 </td>
             </tr>
 
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="25"
-                            class="link-to-prism">server/controllers/user.ts:25</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="39"
+                            class="link-to-prism">server/controllers/user.ts:39</a></div>
                 </td>
             </tr>
 
@@ -378,7 +291,7 @@
                                 <tr>
                                     <td>req</td>
                                     <td>
-                                                <code><a href="../interfaces/HelixUserRequest.html" target="_self" >HelixUserRequest</a></code>
+                                                <code><a href="../interfaces/HelixRequest.html" target="_self" >HelixRequest</a></code>
                                     </td>
 
                                     <td>
@@ -430,15 +343,15 @@
             <tr>
                 <td class="col-md-4">
                     <span class="modifier-icon icon ion-ios-reset"></span>
-                    <code>login(request: <a href="../interfaces/HelixUserRequest.html" target="_self">HelixUserRequest</a>, response: Response)</code>
+                    <code>login(req: <a href="../interfaces/HelixRequest.html" target="_self">HelixRequest</a>, res: Response)</code>
                 </td>
             </tr>
 
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="38"
-                            class="link-to-prism">server/controllers/user.ts:38</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="59"
+                            class="link-to-prism">server/controllers/user.ts:59</a></div>
                 </td>
             </tr>
 
@@ -459,9 +372,9 @@
                             </thead>
                             <tbody>
                                 <tr>
-                                    <td>request</td>
+                                    <td>req</td>
                                     <td>
-                                                <code><a href="../interfaces/HelixUserRequest.html" target="_self" >HelixUserRequest</a></code>
+                                                <code><a href="../interfaces/HelixRequest.html" target="_self" >HelixRequest</a></code>
                                     </td>
 
                                     <td>
@@ -471,7 +384,7 @@
 
                                 </tr>
                                 <tr>
-                                    <td>response</td>
+                                    <td>res</td>
                                     <td>
                                             <code>Response</code>
                                     </td>
@@ -508,47 +421,68 @@
 
 
     <div class="tab-pane fade  tab-source-code" id="c-source">
-        <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { Request, Response, Router } from &#x27;express&#x27;;
+        <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { Response, Router } from &#x27;express&#x27;;
 import * as LdapClient from &#x27;ldapjs&#x27;;
-
-import { LDAP } from &#x27;../config&#x27;;
-import { HelixUserRequest } from &#x27;./d&#x27;;
+import * as request from &#x27;request&#x27;;
+import { readFileSync } from &#x27;fs&#x27;;
+
+import {
+  LDAP,
+  IDENTITY_TOKEN_SOURCE,
+  CUSTOM_IDENTITY_TOKEN_REQUEST_BODY,
+  SSL,
+} from &#x27;../config&#x27;;
+import { HelixRequest, HelixRequestOptions } from &#x27;./d&#x27;;
+import { TOKEN_EXPIRATION_KEY, TOKEN_RESPONSE_KEY } from &#x27;../config&#x27;;
 
 export class UserCtrl {
   constructor(router: Router) {
-    router.route(&#x27;/user/authorize&#x27;).get(this.authorize);
+    // uncomment the following line to use customized login
+    // router.route(&#x27;/user/authorize&#x27;).get(this.authorize);
     router.route(&#x27;/user/login&#x27;).post(this.login.bind(this));
     router.route(&#x27;/user/current&#x27;).get(this.current);
     router.route(&#x27;/user/can&#x27;).get(this.can);
   }
 
-  protected authorize(req: HelixUserRequest, res: Response) {
-    // you can rewrite this function to support your own authorization logic
-    // by default, doing nothing but redirection
-    if (req.query.url) {
-      res.redirect(req.query.url as string);
-    } else {
-      res.redirect(&#x27;/&#x27;);
-    }
+  //
+  // You may rewrite this function to support your own authorization logic.
+  // Usually it would be helpful to integrate with 3rd party login.
+  // For example:
+  //
+  /*
+  protected authorize(req: HelixRequest, res: Response) {
+    const { isAdmin, username, token } &#x3D; get_auth_state();
+    req.session.isAdmin &#x3D; isAdmin;
+    req.session.username &#x3D; username;
+    req.session.identityToken &#x3D; token;
+    res.redirect(&#x27;/&#x27;);
   }
+  */
 
-  protected current(req: HelixUserRequest, res: Response) {
+  protected current(req: HelixRequest, res: Response) {
     res.json(req.session.username || &#x27;Sign In&#x27;);
   }
 
-  protected can(req: HelixUserRequest, res: Response) {
+  //
+  // Check the server-side session store,
+  // see if this helix-front ExpressJS server
+  // already knows that the current user is an admin.
+  //
+  protected can(req: HelixRequest, res: Response) {
     try {
       return res.json(req.session.isAdmin ? true : false);
     } catch (err) {
-      // console.log(&#x27;error from can&#x27;, err)
+      throw new Error(
+        &#x60;Error from /can logged in admin user session status endpoint: ${err}&#x60;
+      );
       return false;
     }
   }
 
-  protected login(request: HelixUserRequest, response: Response) {
-    const credential &#x3D; request.body;
+  protected login(req: HelixRequest, res: Response) {
+    const credential &#x3D; req.body;
     if (!credential.username || !credential.password) {
-      response.status(401).json(false);
+      res.status(401).json(false);
       return;
     }
 
@@ -559,9 +493,9 @@ export class UserCtrl {
       credential.password,
       (err) &#x3D;&gt; {
         if (err) {
-          response.status(401).json(false);
+          res.status(401).json(false);
         } else {
-          // login success
+          // LDAP login success
           const opts &#x3D; {
             filter:
               &#x27;(&amp;(sAMAccountName&#x3D;&#x27; +
@@ -570,6 +504,9 @@ export class UserCtrl {
             scope: &#x27;sub&#x27;,
           };
 
+          req.session.username &#x3D; credential.username;
+          res.set(&#x27;Username&#x27;, credential.username);
+
           ldap.search(LDAP.base, opts, function (err, result) {
             let isInAdminGroup &#x3D; false;
             result.on(&#x27;searchEntry&#x27;, function (entry) {
@@ -579,14 +516,78 @@ export class UserCtrl {
                   const groupName &#x3D; group.split(&#x27;,&#x27;, 1)[0].split(&#x27;&#x3D;&#x27;)[1];
                   if (groupName &#x3D;&#x3D; LDAP.adminGroup) {
                     isInAdminGroup &#x3D; true;
-                    break;
+
+                    //
+                    // Get an Identity-Token
+                    // if an IDENTITY_TOKEN_SOURCE
+                    // is specified in the config
+                    //
+                    if (IDENTITY_TOKEN_SOURCE) {
+                      const body &#x3D; JSON.stringify({
+                        username: credential.username,
+                        password: credential.password,
+                        ...CUSTOM_IDENTITY_TOKEN_REQUEST_BODY,
+                      });
+
+                      const options: HelixRequestOptions &#x3D; {
+                        url: IDENTITY_TOKEN_SOURCE,
+                        json: &#x27;&#x27;,
+                        body,
+                        headers: {
+                          &#x27;Content-Type&#x27;: &#x27;application/json&#x27;,
+                        },
+                        agentOptions: {
+                          rejectUnauthorized: false,
+                        },
+                      };
+
+                      if (SSL.cafiles.length &gt; 0) {
+                        options.agentOptions.ca &#x3D; readFileSync(SSL.cafiles[0], {
+                          encoding: &#x27;utf-8&#x27;,
+                        });
+                      }
+
+                      function callback(error, _res, body) {
+                        if (error) {
+                          throw new Error(
+                            &#x60;Failed to get ${IDENTITY_TOKEN_SOURCE} Token: ${error}&#x60;
+                          );
+                        } else if (body?.error) {
+                          throw new Error(body?.error);
+                        } else {
+                          const parsedBody &#x3D; JSON.parse(body);
+                          req.session.isAdmin &#x3D; isInAdminGroup;
+                          req.session.identityToken &#x3D; parsedBody;
+
+                          const cookieName &#x3D; &#x27;helixui_identity.token&#x27;;
+                          const cookieValue &#x3D;
+                            parsedBody.value[TOKEN_RESPONSE_KEY];
+                          const cookieExpiresDate &#x3D; new Date(
+                            parsedBody.value[TOKEN_EXPIRATION_KEY]
+                          );
+                          const cookieOptions &#x3D; {
+                            expires: cookieExpiresDate,
+                          };
+                          res.cookie(cookieName, cookieValue, cookieOptions);
+                          res.json(isInAdminGroup);
+
+                          return parsedBody;
+                        }
+                      }
+                      request.post(options, callback);
+                    } else {
+                      req.session.isAdmin &#x3D; isInAdminGroup;
+                      res.json(isInAdminGroup);
+                    }
+                    //
+                    // END Get an Identity-Token
+                    //
                   }
                 }
+              } else {
+                req.session.isAdmin &#x3D; isInAdminGroup;
+                res.json(isInAdminGroup);
               }
-
-              request.session.username &#x3D; credential.username;
-              request.session.isAdmin &#x3D; isInAdminGroup;
-              response.json(isInAdminGroup);
             });
           });
         }
diff --git a/helix-front/docs/components/AlertDialogComponent.html b/helix-front/docs/components/AlertDialogComponent.html
index 7d178f28e..81b4920cb 100644
--- a/helix-front/docs/components/AlertDialogComponent.html
+++ b/helix-front/docs/components/AlertDialogComponent.html
@@ -405,7 +405,7 @@ export class AlertDialogComponent implements OnInit {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'AlertDialogComponent'};
 </script>
diff --git a/helix-front/docs/components/AppComponent.html b/helix-front/docs/components/AppComponent.html
index 6af014e2f..a49018f5f 100644
--- a/helix-front/docs/components/AppComponent.html
+++ b/helix-front/docs/components/AppComponent.html
@@ -562,12 +562,13 @@ export class AppComponent implements OnInit {
             this.service
               .login(result.username.value, result.password.value)
               .subscribe(
-                (isAuthorized) &#x3D;&gt; {
-                  if (!isAuthorized) {
+                (loginResponse) &#x3D;&gt; {
+                  if (!loginResponse) {
                     this.helper.showError(
-                      &quot;You&#x27;re not part of helix-admin group or password incorrect&quot;
+                      &#x60;${loginResponse.status}: Either You are not part of helix-admin LDAP group or your password is incorrect.&#x60;
                     );
                   }
+
                   this.currentUser &#x3D; this.service.getCurrentUser();
                 },
                 (error) &#x3D;&gt; {
@@ -729,7 +730,7 @@ export class AppComponent implements OnInit {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'AppComponent'};
 </script>
diff --git a/helix-front/docs/components/ClusterComponent.html b/helix-front/docs/components/ClusterComponent.html
index 6c1fc1758..5ee054368 100644
--- a/helix-front/docs/components/ClusterComponent.html
+++ b/helix-front/docs/components/ClusterComponent.html
@@ -499,7 +499,7 @@ export class ClusterComponent implements OnInit {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'ClusterComponent'};
 </script>
diff --git a/helix-front/docs/components/ClusterDetailComponent.html b/helix-front/docs/components/ClusterDetailComponent.html
index f1866c077..02c2ff949 100644
--- a/helix-front/docs/components/ClusterDetailComponent.html
+++ b/helix-front/docs/components/ClusterDetailComponent.html
@@ -1010,11 +1010,17 @@ export class ClusterDetailComponent implements OnInit {
 
   deleteCluster() {
     this.helperService
-      .showConfirmation(&#x27;Are you sure you want to delete this cluster?&#x27;)
+      .showConfirmation(
+        &#x27;Are you sure you want to delete this cluster? This cannot be undone.&#x27;,
+        &#x27;Confirm Cluster Deletion&#x27;,
+        &#x60;Delete Cluster ${this.clusterName}&#x60;
+      )
       .then((result) &#x3D;&gt; {
         if (result) {
           this.clusterService.remove(this.cluster.name).subscribe((data) &#x3D;&gt; {
-            this.helperService.showSnackBar(&#x27;Cluster deleted!&#x27;);
+            this.helperService.showSnackBar(
+              &#x60;Cluster ${this.clusterName} deleted&#x60;
+            );
             // FIXME: should reload cluster list as well
             this.router.navigate([&#x27;..&#x27;], { relativeTo: this.route });
           });
@@ -1185,7 +1191,7 @@ export class ClusterDetailComponent implements OnInit {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'ClusterDetailComponent'};
 </script>
diff --git a/helix-front/docs/components/ClusterListComponent.html b/helix-front/docs/components/ClusterListComponent.html
index e4dcec722..de7cace47 100644
--- a/helix-front/docs/components/ClusterListComponent.html
+++ b/helix-front/docs/components/ClusterListComponent.html
@@ -195,7 +195,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="21" class="link-to-prism">src/app/cluster/cluster-list/cluster-list.component.ts:21</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="22" class="link-to-prism">src/app/cluster/cluster-list/cluster-list.component.ts:22</a></div>
                             </td>
                         </tr>
 
@@ -298,8 +298,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="55"
-                            class="link-to-prism">src/app/cluster/cluster-list/cluster-list.component.ts:55</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="59"
+                            class="link-to-prism">src/app/cluster/cluster-list/cluster-list.component.ts:59</a></div>
                 </td>
             </tr>
 
@@ -335,8 +335,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="36"
-                            class="link-to-prism">src/app/cluster/cluster-list/cluster-list.component.ts:36</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="38"
+                            class="link-to-prism">src/app/cluster/cluster-list/cluster-list.component.ts:38</a></div>
                 </td>
             </tr>
 
@@ -372,8 +372,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="30"
-                            class="link-to-prism">src/app/cluster/cluster-list/cluster-list.component.ts:30</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="31"
+                            class="link-to-prism">src/app/cluster/cluster-list/cluster-list.component.ts:31</a></div>
                 </td>
             </tr>
 
@@ -409,8 +409,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="44"
-                            class="link-to-prism">src/app/cluster/cluster-list/cluster-list.component.ts:44</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="48"
+                            class="link-to-prism">src/app/cluster/cluster-list/cluster-list.component.ts:48</a></div>
                 </td>
             </tr>
 
@@ -482,7 +482,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="20" class="link-to-prism">src/app/cluster/cluster-list/cluster-list.component.ts:20</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="21" class="link-to-prism">src/app/cluster/cluster-list/cluster-list.component.ts:21</a></div>
                         </td>
                     </tr>
 
@@ -600,7 +600,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="21" class="link-to-prism">src/app/cluster/cluster-list/cluster-list.component.ts:21</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="22" class="link-to-prism">src/app/cluster/cluster-list/cluster-list.component.ts:22</a></div>
                         </td>
                     </tr>
 
@@ -632,6 +632,7 @@ export class ClusterListComponent implements OnInit {
   clusters: Cluster[] &#x3D; [];
   errorMessage &#x3D; &#x27;&#x27;;
   isLoading &#x3D; true;
+  // is the currrent user logged in? If true, then yes.
   can &#x3D; false;
   service &#x3D; &#x27;&#x27;;
 
@@ -644,6 +645,7 @@ export class ClusterListComponent implements OnInit {
 
   ngOnInit() {
     this.loadClusters();
+    // check if the current user is logged in
     this.clusterService.can().subscribe((data) &#x3D;&gt; (this.can &#x3D; data));
     this.service &#x3D; this.router.url.split(&#x27;/&#x27;)[1];
   }
@@ -654,6 +656,8 @@ export class ClusterListComponent implements OnInit {
       /* error path */ (error) &#x3D;&gt; this.showErrorMessage(error),
       /* onComplete */ () &#x3D;&gt; (this.isLoading &#x3D; false)
     );
+    // check if the current user is logged in again
+    this.clusterService.can().subscribe((data) &#x3D;&gt; (this.can &#x3D; data));
   }
 
   showErrorMessage(error: any) {
@@ -730,12 +734,14 @@ export class ClusterListComponent implements OnInit {
     &lt;mat-spinner&gt; Loading all clusters ... &lt;/mat-spinner&gt;
   &lt;/section&gt;
   &lt;mat-nav-list *ngIf&#x3D;&quot;!isLoading &amp;&amp; !errorMessage&quot;&gt;
-    &lt;button mat-button routerLink&#x3D;&quot;/&quot;&gt;
-      &lt;mat-icon&gt;arrow_back&lt;/mat-icon&gt; Back to Index
-    &lt;/button&gt;
-    &lt;button mat-mini-fab *ngIf&#x3D;&quot;can&quot; (click)&#x3D;&quot;createCluster()&quot;&gt;
-      &lt;mat-icon&gt;add&lt;/mat-icon&gt;
-    &lt;/button&gt;
+    &lt;div class&#x3D;&quot;cluster-list-button-group&quot;&gt;
+      &lt;button class&#x3D;&quot;back-to-index-button&quot; mat-button routerLink&#x3D;&quot;/&quot;&gt;
+        &lt;mat-icon&gt;arrow_back&lt;/mat-icon&gt; Back to Index
+      &lt;/button&gt;
+      &lt;button mat-mini-fab *ngIf&#x3D;&quot;can&quot; (click)&#x3D;&quot;createCluster()&quot;&gt;
+        &lt;mat-icon&gt;add&lt;/mat-icon&gt;
+      &lt;/button&gt;
+    &lt;/div&gt;
     &lt;h3 mat-subheader&gt;Clusters in {{ service }} ({{ clusters.length }})&lt;/h3&gt;
     &lt;a
       *ngFor&#x3D;&quot;let cluster of clusters&quot;
@@ -765,6 +771,25 @@ export class ClusterListComponent implements OnInit {
                 <pre class="line-numbers"><code class="language-scss">@use &#x27;@angular/material&#x27; as mat;
 @import &#x27;src/theme.scss&#x27;;
 
+.mat-nav-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.cluster-list-button-group {
+  display: flex;
+  justify-content: space-between;
+  margin-right: 1rem;
+}
+
+.back-to-index-button {
+  align-self: flex-start;
+}
+
+.add-cluster-button {
+  align-self: flex-end;
+}
+
 .mat-spinner {
   margin: 20px;
 }
@@ -778,12 +803,6 @@ export class ClusterListComponent implements OnInit {
   padding: 10px;
 }
 
-.mat-mini-fab {
-  position: fixed;
-  right: 16px;
-  top: 16px;
-}
-
 .empty {
   font-size: 14px;
   // font-style: italic;
@@ -817,8 +836,8 @@ export class ClusterListComponent implements OnInit {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+        var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'ClusterListComponent'};
 </script>
diff --git a/helix-front/docs/components/ConfigDetailComponent.html b/helix-front/docs/components/ConfigDetailComponent.html
index 89d91f54f..e99d1d778 100644
--- a/helix-front/docs/components/ConfigDetailComponent.html
+++ b/helix-front/docs/components/ConfigDetailComponent.html
@@ -866,7 +866,7 @@ export class ConfigDetailComponent implements OnInit {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'ConfigDetailComponent'};
 </script>
diff --git a/helix-front/docs/components/ConfirmDialogComponent.html b/helix-front/docs/components/ConfirmDialogComponent.html
index 3687a2864..38168e170 100644
--- a/helix-front/docs/components/ConfirmDialogComponent.html
+++ b/helix-front/docs/components/ConfirmDialogComponent.html
@@ -133,6 +133,9 @@
                 <tr>
                     <td class="col-md-4">
                         <ul class="index-list">
+                            <li>
+                                <a href="#confirmButtonText" >confirmButtonText</a>
+                            </li>
                             <li>
                                 <a href="#message" >message</a>
                             </li>
@@ -183,7 +186,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="12" class="link-to-prism">src/app/shared/dialog/confirm-dialog/confirm-dialog.component.ts:12</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="13" class="link-to-prism">src/app/shared/dialog/confirm-dialog/confirm-dialog.component.ts:13</a></div>
                             </td>
                         </tr>
 
@@ -262,8 +265,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="19"
-                            class="link-to-prism">src/app/shared/dialog/confirm-dialog/confirm-dialog.component.ts:19</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="20"
+                            class="link-to-prism">src/app/shared/dialog/confirm-dialog/confirm-dialog.component.ts:20</a></div>
                 </td>
             </tr>
 
@@ -299,8 +302,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="29"
-                            class="link-to-prism">src/app/shared/dialog/confirm-dialog/confirm-dialog.component.ts:29</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="32"
+                            class="link-to-prism">src/app/shared/dialog/confirm-dialog/confirm-dialog.component.ts:32</a></div>
                 </td>
             </tr>
 
@@ -336,8 +339,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="25"
-                            class="link-to-prism">src/app/shared/dialog/confirm-dialog/confirm-dialog.component.ts:25</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="28"
+                            class="link-to-prism">src/app/shared/dialog/confirm-dialog/confirm-dialog.component.ts:28</a></div>
                 </td>
             </tr>
 
@@ -359,6 +362,32 @@
     <h3 id="inputs">
         Properties
     </h3>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="confirmButtonText"></a>
+                    <span class="name">
+                        <span ><b>confirmButtonText</b></span>
+                        <a href="#confirmButtonText"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="13" class="link-to-prism">src/app/shared/dialog/confirm-dialog/confirm-dialog.component.ts:13</a></div>
+                        </td>
+                    </tr>
+
+
+        </tbody>
+    </table>
     <table class="table table-sm table-bordered">
         <tbody>
             <tr>
@@ -429,6 +458,7 @@ import { MAT_DIALOG_DATA } from &#x27;@angular/material/dialog&#x27;;
 export class ConfirmDialogComponent implements OnInit {
   title: string;
   message: string;
+  confirmButtonText: string;
 
   constructor(
     @Inject(MAT_DIALOG_DATA) protected data: any,
@@ -439,6 +469,8 @@ export class ConfirmDialogComponent implements OnInit {
     this.title &#x3D; (this.data &amp;&amp; this.data.title) || &#x27;Confirmation&#x27;;
     this.message &#x3D;
       (this.data &amp;&amp; this.data.message) || &#x27;Are you sure about this?&#x27;;
+    this.confirmButtonText &#x3D;
+      (this.data &amp;&amp; this.data.confirmButtonText) || &#x27;Continue&#x27;;
   }
 
   onConfirm() {
@@ -488,7 +520,9 @@ export class ConfirmDialogComponent implements OnInit {
     &gt;
       Cancel
     &lt;/button&gt;
-    &lt;button mat-button type&#x3D;&quot;button&quot; (click)&#x3D;&quot;onConfirm()&quot;&gt;Continue&lt;/button&gt;
+    &lt;button mat-button type&#x3D;&quot;button&quot; (click)&#x3D;&quot;onConfirm()&quot;&gt;
+      {{ confirmButtonText }}
+    &lt;/button&gt;
   &lt;/div&gt;
 &lt;/form&gt;
 </code></pre>
@@ -526,8 +560,8 @@ export class ConfirmDialogComponent implements OnInit {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+        var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'ConfirmDialogComponent'};
 </script>
diff --git a/helix-front/docs/components/JsonViewerComponent.html b/helix-front/docs/components/ConfirmDialogTestComponent.html
similarity index 62%
copy from helix-front/docs/components/JsonViewerComponent.html
copy to helix-front/docs/components/ConfirmDialogTestComponent.html
index 631e65b14..941fb6c2a 100644
--- a/helix-front/docs/components/JsonViewerComponent.html
+++ b/helix-front/docs/components/ConfirmDialogTestComponent.html
@@ -38,7 +38,7 @@
   <li>Components</li>
   <li
   >
-  JsonViewerComponent</li>
+  ConfirmDialogTestComponent</li>
 </ol>
 
 <ul class="nav nav-tabs" role="tablist">
@@ -48,9 +48,6 @@
         <li >
             <a href="#source" role="tab" id="source-tab" data-toggle="tab" data-link="source">Source</a>
         </li>
-        <li >
-            <a href="#templateData" role="tab" id="templateData-tab" data-toggle="tab" data-link="template">Template</a>
-        </li>
         <li >
             <a href="#styleData" role="tab" id="styleData-tab" data-toggle="tab" data-link="style">Styles</a>
         </li>
@@ -64,18 +61,12 @@
     <h3>File</h3>
 </p>
 <p class="comment">
-    <code>src/app/shared/json-viewer/json-viewer.component.ts</code>
+    <code>src/app/shared/dialog/confirm-dialog/confirm-dialog-test.component.ts</code>
 </p>
 
 
 
 
-    <p class="comment">
-        <h3>Implements</h3>
-    </p>
-    <p class="comment">
-                    <code><a href="https://angular.io/api/core/OnInit" target="_blank" >OnInit</a></code>
-    </p>
 
 
 <section>
@@ -95,19 +86,19 @@
 
             <tr>
                 <td class="col-md-3">selector</td>
-                <td class="col-md-9"><code>hi-json-viewer</code></td>
+                <td class="col-md-9"><code>hi-confirm-dialog-test</code></td>
             </tr>
 
             <tr>
                 <td class="col-md-3">styleUrls</td>
-                <td class="col-md-9"><code>./json-viewer.component.scss</code></td>
+                <td class="col-md-9"><code>./confirm-dialog.component.scss</code></td>
             </tr>
 
 
-
             <tr>
-                <td class="col-md-3">templateUrl</td>
-                <td class="col-md-9"><code>./json-viewer.component.html</code></td>
+                <td class="col-md-3">template</td>
+                <td class="col-md-9"><pre class="line-numbers"><code class="language-html">&lt;button mat-flat-button (click)&#x3D;&quot;openDialog()&quot;&gt;   Open Dialog
+ &lt;/button&gt;</code></pre></td>
             </tr>
 
 
@@ -117,6 +108,7 @@
 
 
 
+
         </tbody>
     </table>
 </section>
@@ -125,6 +117,21 @@
     <h3 id="index">Index</h3>
     <table class="table table-sm table-bordered index-table">
         <tbody>
+                <tr>
+                    <td class="col-md-4">
+                        <h6><b>Properties</b></h6>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <ul class="index-list">
+                            <li>
+                                    <span class="modifier">Public</span>
+                                <a href="#dialog" >dialog</a>
+                            </li>
+                        </ul>
+                    </td>
+                </tr>
 
                 <tr>
                     <td class="col-md-4">
@@ -135,7 +142,8 @@
                     <td class="col-md-4">
                         <ul class="index-list">
                             <li>
-                                <a href="#ngOnInit" >ngOnInit</a>
+                                    <span class="modifier">Public</span>
+                                <a href="#openDialog" >openDialog</a>
                             </li>
                         </ul>
                     </td>
@@ -150,7 +158,7 @@
                     <td class="col-md-4">
                         <ul class="index-list">
                             <li>
-                                <a href="#obj" >obj</a>
+                                <a href="#data" >data</a>
                             </li>
                         </ul>
                     </td>
@@ -169,12 +177,12 @@
             <tbody>
                 <tr>
                     <td class="col-md-4">
-<code>constructor(route: <a href="https://angular.io/api/router/ActivatedRoute" target="_blank">ActivatedRoute</a>)</code>
+<code>constructor(dialog: MatDialog)</code>
                     </td>
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="13" class="link-to-prism">src/app/shared/json-viewer/json-viewer.component.ts:13</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="17" class="link-to-prism">src/app/shared/dialog/confirm-dialog/confirm-dialog-test.component.ts:17</a></div>
                             </td>
                         </tr>
 
@@ -192,10 +200,10 @@
                                         </thead>
                                         <tbody>
                                                 <tr>
-                                                        <td>route</td>
+                                                        <td>dialog</td>
                                                   
                                                         <td>
-                                                                        <code><a href="https://angular.io/api/router/ActivatedRoute" target="_blank" >ActivatedRoute</a></code>
+                                                                    <code>MatDialog</code>
                                                         </td>
                                                   
                                                     <td>
@@ -218,8 +226,8 @@
             <tbody>
                 <tr>
                     <td class="col-md-4">
-                        <a name="obj"></a>
-                        <b>obj</b>
+                        <a name="data"></a>
+                        <b>data</b>
                     </td>
                 </tr>
                 <tr>
@@ -230,7 +238,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="13" class="link-to-prism">src/app/shared/json-viewer/json-viewer.component.ts:13</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="17" class="link-to-prism">src/app/shared/dialog/confirm-dialog/confirm-dialog-test.component.ts:17</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -248,24 +256,26 @@
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="ngOnInit"></a>
+                    <a name="openDialog"></a>
                     <span class="name">
-                        <span ><b>ngOnInit</b></span>
-                        <a href="#ngOnInit"><span class="icon ion-ios-link"></span></a>
+                        <span class="modifier">Public</span>
+                        <span ><b>openDialog</b></span>
+                        <a href="#openDialog"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
             <tr>
                 <td class="col-md-4">
-<code>ngOnInit()</code>
+                    <span class="modifier-icon icon ion-ios-reset"></span>
+                    <code>openDialog()</code>
                 </td>
             </tr>
 
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="17"
-                            class="link-to-prism">src/app/shared/json-viewer/json-viewer.component.ts:17</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="21"
+                            class="link-to-prism">src/app/shared/dialog/confirm-dialog/confirm-dialog-test.component.ts:21</a></div>
                 </td>
             </tr>
 
@@ -282,72 +292,91 @@
         </tbody>
     </table>
 </section>
+    <section>
+    
+    <h3 id="inputs">
+        Properties
+    </h3>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="dialog"></a>
+                    <span class="name">
+                            <span class="modifier">Public</span>
+                        <span ><b>dialog</b></span>
+                        <a href="#dialog"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>MatDialog</code>
+
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="19" class="link-to-prism">src/app/shared/dialog/confirm-dialog/confirm-dialog-test.component.ts:19</a></div>
+                        </td>
+                    </tr>
+
+
+        </tbody>
+    </table>
+</section>
 
 </div>
 
 
     <div class="tab-pane fade  tab-source-code" id="c-source">
         <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { Component, OnInit, Input } from &#x27;@angular/core&#x27;;
-import { ActivatedRoute } from &#x27;@angular/router&#x27;;
-
-import * as _ from &#x27;lodash&#x27;;
+import { MatDialog, MatDialogModule } from &#x27;@angular/material/dialog&#x27;;
+import { BrowserAnimationsModule } from &#x27;@angular/platform-browser/animations&#x27;;
+import { MaterialModule } from &#x27;app/shared/material.module&#x27;;
+import { ConfirmDialogComponent } from &#x27;../confirm-dialog/confirm-dialog.component&#x27;;
 
+// Wrapper component for testing approach recommended in this answer:
+// https://stackoverflow.com/a/63953851/1732222
 @Component({
-  selector: &#x27;hi-json-viewer&#x27;,
-  templateUrl: &#x27;./json-viewer.component.html&#x27;,
-  styleUrls: [&#x27;./json-viewer.component.scss&#x27;],
+  selector: &#x27;hi-confirm-dialog-test&#x27;,
+  template: &#x60; &lt;button mat-flat-button (click)&#x3D;&quot;openDialog()&quot;&gt;
+    Open Dialog
+  &lt;/button&gt;&#x60;,
+  styleUrls: [&#x27;./confirm-dialog.component.scss&#x27;],
 })
-export class JsonViewerComponent implements OnInit {
-  // MODE 1: use directly in components
-  @Input() obj: any;
+export class ConfirmDialogTestComponent {
+  @Input() data: any;
 
-  constructor(protected route: ActivatedRoute) {}
+  constructor(public dialog: MatDialog) {}
 
-  ngOnInit() {
-    // MODE 2: use in router
-    if (this.route.snapshot.data.path) {
-      const path &#x3D; this.route.snapshot.data.path;
-
-      // try parent data first
-      this.obj &#x3D; _.get(this.route.parent, &#x60;snapshot.data.${path}&#x60;);
-
-      if (this.obj &#x3D;&#x3D; null) {
-        // try self data then
-        this.obj &#x3D; _.get(this.route.snapshot.data, path);
-      }
-    }
+  public openDialog(): void {
+    this.dialog.open(ConfirmDialogComponent, {
+      data: this.data,
+    });
   }
 }
-</code></pre>
-    </div>
 
-    <div class="tab-pane fade " id="c-templateData">
-        <pre class="line-numbers"><code class="language-html">&lt;!--
-  ~ Licensed to the Apache Software Foundation (ASF) under one
-  ~ or more contributor license agreements.  See the NOTICE file
-  ~ distributed with this work for additional information
-  ~ regarding copyright ownership.  The ASF licenses this file
-  ~ to you under the Apache License, Version 2.0 (the
-  ~ &quot;License&quot;); you may not use this file except in compliance
-  ~ with the License.  You may obtain a copy of the License at
-  ~
-  ~     http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing,
-  ~ software distributed under the License is distributed on an
-  ~ &quot;AS IS&quot; BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-  ~ KIND, either express or implied.  See the License for the
-  ~ specific language governing permissions and limitations
-  ~ under the License.
-  --&gt;
-
-&lt;pre&gt;{{ obj | json }}&lt;/pre&gt;
+export default () &#x3D;&gt; ({
+  moduleMetadata: {
+    _imports: [BrowserAnimationsModule, MatDialogModule, MaterialModule],
+    get imports() {
+      return this._imports;
+    },
+    set imports(value) {
+      this._imports &#x3D; value;
+    },
+    declarations: [ConfirmDialogTestComponent],
+  },
+  component: ConfirmDialogTestComponent,
+});
 </code></pre>
     </div>
 
+
     <div class="tab-pane fade " id="c-styleData">
                 <p class="comment">
-                    <code>./json-viewer.component.scss</code>
+                    <code>./confirm-dialog.component.scss</code>
                 </p>
                 <pre class="line-numbers"><code class="language-scss"></code></pre>
     </div>
@@ -377,10 +406,10 @@ export class JsonViewerComponent implements OnInit {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+        var COMPONENT_TEMPLATE = '<div><button mat-flat-button (click)="openDialog()">   Open Dialog </button></div>'
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
-    var ACTUAL_COMPONENT = {'name': 'JsonViewerComponent'};
+    var ACTUAL_COMPONENT = {'name': 'ConfirmDialogTestComponent'};
 </script>
 <script src="../js/tree.js"></script>
 
@@ -426,7 +455,7 @@ export class JsonViewerComponent implements OnInit {
        <script>
             var COMPODOC_CURRENT_PAGE_DEPTH = 1;
             var COMPODOC_CURRENT_PAGE_CONTEXT = 'component';
-            var COMPODOC_CURRENT_PAGE_URL = 'JsonViewerComponent.html';
+            var COMPODOC_CURRENT_PAGE_URL = 'ConfirmDialogTestComponent.html';
             var MAX_SEARCH_RESULTS = 15;
        </script>
 
diff --git a/helix-front/docs/components/ControllerDetailComponent.html b/helix-front/docs/components/ControllerDetailComponent.html
index f21112bd2..2e7988817 100644
--- a/helix-front/docs/components/ControllerDetailComponent.html
+++ b/helix-front/docs/components/ControllerDetailComponent.html
@@ -506,7 +506,7 @@ export class ControllerDetailComponent implements OnInit {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'ControllerDetailComponent'};
 </script>
diff --git a/helix-front/docs/components/DashboardComponent.html b/helix-front/docs/components/DashboardComponent.html
index 667dd2050..083a2c493 100644
--- a/helix-front/docs/components/DashboardComponent.html
+++ b/helix-front/docs/components/DashboardComponent.html
@@ -1483,7 +1483,7 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'DashboardComponent'};
 </script>
diff --git a/helix-front/docs/components/DataTableComponent.html b/helix-front/docs/components/DataTableComponent.html
index 883e44603..3b3c7e205 100644
--- a/helix-front/docs/components/DataTableComponent.html
+++ b/helix-front/docs/components/DataTableComponent.html
@@ -1049,7 +1049,7 @@ export class DataTableComponent implements OnInit {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'DataTableComponent'};
 </script>
diff --git a/helix-front/docs/components/DetailHeaderComponent.html b/helix-front/docs/components/DetailHeaderComponent.html
index e6ea5cf75..6f95f0b5f 100644
--- a/helix-front/docs/components/DetailHeaderComponent.html
+++ b/helix-front/docs/components/DetailHeaderComponent.html
@@ -548,7 +548,7 @@ export class DetailHeaderComponent {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'DetailHeaderComponent'};
 </script>
diff --git a/helix-front/docs/components/DisabledLabelComponent.html b/helix-front/docs/components/DisabledLabelComponent.html
index 51c673787..8de60ecad 100644
--- a/helix-front/docs/components/DisabledLabelComponent.html
+++ b/helix-front/docs/components/DisabledLabelComponent.html
@@ -348,7 +348,7 @@ export class DisabledLabelComponent implements OnInit {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'DisabledLabelComponent'};
 </script>
diff --git a/helix-front/docs/components/HelixListComponent.html b/helix-front/docs/components/HelixListComponent.html
index ef9a7ba01..d3f511fb4 100644
--- a/helix-front/docs/components/HelixListComponent.html
+++ b/helix-front/docs/components/HelixListComponent.html
@@ -433,7 +433,7 @@ export class HelixListComponent implements OnInit {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'HelixListComponent'};
 </script>
diff --git a/helix-front/docs/components/HistoryListComponent.html b/helix-front/docs/components/HistoryListComponent.html
index a1dc4b927..76e59afed 100644
--- a/helix-front/docs/components/HistoryListComponent.html
+++ b/helix-front/docs/components/HistoryListComponent.html
@@ -811,7 +811,7 @@ hi-history-list {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'HistoryListComponent'};
 </script>
diff --git a/helix-front/docs/components/InputDialogComponent.html b/helix-front/docs/components/InputDialogComponent.html
index adb452c02..80a9d5ce9 100644
--- a/helix-front/docs/components/InputDialogComponent.html
+++ b/helix-front/docs/components/InputDialogComponent.html
@@ -668,7 +668,7 @@ export class InputDialogComponent implements OnInit {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'InputDialogComponent'};
 </script>
diff --git a/helix-front/docs/components/InputInlineComponent.html b/helix-front/docs/components/InputInlineComponent.html
index 13436a3b2..8e932f4f8 100644
--- a/helix-front/docs/components/InputInlineComponent.html
+++ b/helix-front/docs/components/InputInlineComponent.html
@@ -1655,7 +1655,7 @@ export class InputInlineComponent implements ControlValueAccessor, OnInit {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'InputInlineComponent'};
 </script>
diff --git a/helix-front/docs/components/InstanceDetailComponent.html b/helix-front/docs/components/InstanceDetailComponent.html
index aabfb1d67..0e5afd846 100644
--- a/helix-front/docs/components/InstanceDetailComponent.html
+++ b/helix-front/docs/components/InstanceDetailComponent.html
@@ -312,8 +312,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="65"
-                            class="link-to-prism">src/app/instance/instance-detail/instance-detail.component.ts:65</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="68"
+                            class="link-to-prism">src/app/instance/instance-detail/instance-detail.component.ts:68</a></div>
                 </td>
             </tr>
 
@@ -349,8 +349,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="58"
-                            class="link-to-prism">src/app/instance/instance-detail/instance-detail.component.ts:58</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="60"
+                            class="link-to-prism">src/app/instance/instance-detail/instance-detail.component.ts:60</a></div>
                 </td>
             </tr>
 
@@ -388,8 +388,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="72"
-                            class="link-to-prism">src/app/instance/instance-detail/instance-detail.component.ts:72</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="76"
+                            class="link-to-prism">src/app/instance/instance-detail/instance-detail.component.ts:76</a></div>
                 </td>
             </tr>
 
@@ -700,38 +700,42 @@ export class InstanceDetailComponent implements OnInit {
       .showConfirmation(&#x27;Are you sure you want to remove this Instance?&#x27;)
       .then((result) &#x3D;&gt; {
         if (result) {
-          this.service
-            .remove(this.clusterName, this.instance.name)
-            .subscribe((data) &#x3D;&gt; {
+          this.service.remove(this.clusterName, this.instance.name).subscribe(
+            /* happy path */ () &#x3D;&gt; {
               this.helperService.showSnackBar(
                 &#x60;Instance: ${this.instance.name} removed!&#x60;
               );
               this.router.navigate([&#x27;..&#x27;], { relativeTo: this.route });
-            });
+            },
+            /* error path */ (error) &#x3D;&gt; this.helperService.showError(error),
+            /* onComplete */ () &#x3D;&gt; (this.isLoading &#x3D; false)
+          );
         }
       });
   }
 
   enableInstance() {
     this.service.enable(this.clusterName, this.instance.name).subscribe(
-      () &#x3D;&gt; this.loadInstance(),
-      (error) &#x3D;&gt; this.helperService.showError(error)
+      /* happy path */ () &#x3D;&gt; this.loadInstance(),
+      /* error path */ (error) &#x3D;&gt; this.helperService.showError(error),
+      /* onComplete */ () &#x3D;&gt; (this.isLoading &#x3D; false)
     );
   }
 
   disableInstance() {
     this.service.disable(this.clusterName, this.instance.name).subscribe(
-      () &#x3D;&gt; this.loadInstance(),
-      (error) &#x3D;&gt; this.helperService.showError(error)
+      /* happy path */ () &#x3D;&gt; this.loadInstance(),
+      /* error path */ (error) &#x3D;&gt; this.helperService.showError(error),
+      /* onComplete */ () &#x3D;&gt; (this.isLoading &#x3D; false)
     );
   }
 
   protected loadInstance() {
     this.isLoading &#x3D; true;
     this.service.get(this.clusterName, this.instanceName).subscribe(
-      (instance) &#x3D;&gt; (this.instance &#x3D; instance),
-      (error) &#x3D;&gt; this.helperService.showError(error),
-      () &#x3D;&gt; (this.isLoading &#x3D; false)
+      /* happy path */ (instance) &#x3D;&gt; (this.instance &#x3D; instance),
+      /* error path */ (error) &#x3D;&gt; this.helperService.showError(error),
+      /* onComplete */ () &#x3D;&gt; (this.isLoading &#x3D; false)
     );
   }
 }
@@ -876,7 +880,7 @@ export class InstanceDetailComponent implements OnInit {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'InstanceDetailComponent'};
 </script>
diff --git a/helix-front/docs/components/InstanceListComponent.html b/helix-front/docs/components/InstanceListComponent.html
index 88d49400a..14d3ffa92 100644
--- a/helix-front/docs/components/InstanceListComponent.html
+++ b/helix-front/docs/components/InstanceListComponent.html
@@ -728,7 +728,7 @@ export class InstanceListComponent implements OnInit {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'InstanceListComponent'};
 </script>
diff --git a/helix-front/docs/components/JobDetailComponent.html b/helix-front/docs/components/JobDetailComponent.html
index 7572027e1..5758b8d42 100644
--- a/helix-front/docs/components/JobDetailComponent.html
+++ b/helix-front/docs/components/JobDetailComponent.html
@@ -440,7 +440,7 @@ export class JobDetailComponent implements OnInit {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'JobDetailComponent'};
 </script>
diff --git a/helix-front/docs/components/JobListComponent.html b/helix-front/docs/components/JobListComponent.html
index 87e196bff..f5dae7785 100644
--- a/helix-front/docs/components/JobListComponent.html
+++ b/helix-front/docs/components/JobListComponent.html
@@ -206,7 +206,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="30" class="link-to-prism">src/app/workflow/job-list/job-list.component.ts:30</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="31" class="link-to-prism">src/app/workflow/job-list/job-list.component.ts:31</a></div>
                             </td>
                         </tr>
 
@@ -232,7 +232,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="15" class="link-to-prism">src/app/workflow/job-list/job-list.component.ts:15</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="16" class="link-to-prism">src/app/workflow/job-list/job-list.component.ts:16</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -266,8 +266,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="34"
-                            class="link-to-prism">src/app/workflow/job-list/job-list.component.ts:34</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="35"
+                            class="link-to-prism">src/app/workflow/job-list/job-list.component.ts:35</a></div>
                 </td>
             </tr>
 
@@ -303,8 +303,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="40"
-                            class="link-to-prism">src/app/workflow/job-list/job-list.component.ts:40</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="41"
+                            class="link-to-prism">src/app/workflow/job-list/job-list.component.ts:41</a></div>
                 </td>
             </tr>
 
@@ -367,8 +367,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="36"
-                            class="link-to-prism">src/app/workflow/job-list/job-list.component.ts:36</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="37"
+                            class="link-to-prism">src/app/workflow/job-list/job-list.component.ts:37</a></div>
                 </td>
             </tr>
 
@@ -440,7 +440,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="21" class="link-to-prism">src/app/workflow/job-list/job-list.component.ts:21</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="22" class="link-to-prism">src/app/workflow/job-list/job-list.component.ts:22</a></div>
                         </td>
                     </tr>
 
@@ -475,7 +475,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="26" class="link-to-prism">src/app/workflow/job-list/job-list.component.ts:26</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="27" class="link-to-prism">src/app/workflow/job-list/job-list.component.ts:27</a></div>
                         </td>
                     </tr>
 
@@ -500,7 +500,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="20" class="link-to-prism">src/app/workflow/job-list/job-list.component.ts:20</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="21" class="link-to-prism">src/app/workflow/job-list/job-list.component.ts:21</a></div>
                         </td>
                     </tr>
 
@@ -534,7 +534,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="22" class="link-to-prism">src/app/workflow/job-list/job-list.component.ts:22</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="23" class="link-to-prism">src/app/workflow/job-list/job-list.component.ts:23</a></div>
                         </td>
                     </tr>
 
@@ -554,7 +554,7 @@
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
+                        <i>Type : </i>    <code>DatatableComponent</code>
 
                     </td>
                 </tr>
@@ -563,13 +563,13 @@
                         <b>Decorators : </b>
                         <br />
                         <code>
-                            @ViewChild(&#x27;jobsTable&#x27;, {static: true})<br />
+                            @ViewChild(&#x27;jobsTable&#x27;, {static: false})<br />
                         </code>
                     </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="18" class="link-to-prism">src/app/workflow/job-list/job-list.component.ts:18</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="19" class="link-to-prism">src/app/workflow/job-list/job-list.component.ts:19</a></div>
                         </td>
                     </tr>
 
@@ -588,6 +588,7 @@ import moment from &#x27;moment&#x27;;
 
 import { Settings } from &#x27;../../core/settings&#x27;;
 import { Job } from &#x27;../shared/workflow.model&#x27;;
+import { DatatableComponent } from &#x27;@swimlane/ngx-datatable&#x27;;
 
 @Component({
   selector: &#x27;hi-job-list&#x27;,
@@ -598,8 +599,8 @@ export class JobListComponent implements OnInit {
   @Input()
   jobs: Job[];
 
-  @ViewChild(&#x27;jobsTable&#x27;, { static: true })
-  table: any;
+  @ViewChild(&#x27;jobsTable&#x27;, { static: false })
+  table: DatatableComponent;
 
   rowHeight &#x3D; Settings.tableRowHeight;
   headerHeight &#x3D; Settings.tableHeaderHeight;
@@ -750,7 +751,7 @@ export class JobListComponent implements OnInit {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'JobListComponent'};
 </script>
diff --git a/helix-front/docs/components/JsonViewerComponent.html b/helix-front/docs/components/JsonViewerComponent.html
index 631e65b14..bcd4aad4e 100644
--- a/helix-front/docs/components/JsonViewerComponent.html
+++ b/helix-front/docs/components/JsonViewerComponent.html
@@ -378,7 +378,7 @@ export class JsonViewerComponent implements OnInit {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'JsonViewerComponent'};
 </script>
diff --git a/helix-front/docs/components/KeyValuePairsComponent.html b/helix-front/docs/components/KeyValuePairsComponent.html
index 37e467852..8f67a4856 100644
--- a/helix-front/docs/components/KeyValuePairsComponent.html
+++ b/helix-front/docs/components/KeyValuePairsComponent.html
@@ -375,7 +375,7 @@ export class KeyValuePairsComponent {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'KeyValuePairsComponent'};
 </script>
diff --git a/helix-front/docs/components/NodeViewerComponent.html b/helix-front/docs/components/NodeViewerComponent.html
index f3947bf67..94fd46fcf 100644
--- a/helix-front/docs/components/NodeViewerComponent.html
+++ b/helix-front/docs/components/NodeViewerComponent.html
@@ -2042,12 +2042,12 @@ export class NodeViewerComponent implements OnInit {
       ? _.filter(
           this.node.mapFields,
           (config) &#x3D;&gt;
-            config.name.toLowerCase().indexOf(this.keyword) &gt;&#x3D; 0 ||
+            config.name.toLowerCase().trim().indexOf(this.keyword) &gt;&#x3D; 0 ||
             _.some(
               config.value as any[],
               (subconfig) &#x3D;&gt;
-                subconfig.name.toLowerCase().indexOf(this.keyword) &gt;&#x3D; 0 ||
-                subconfig.value.toLowerCase().indexOf(this.keyword) &gt;&#x3D; 0
+                subconfig.name.toLowerCase().trim().indexOf(this.keyword) &gt;&#x3D;
+                  0 || subconfig.value.toLowerCase().indexOf(this.keyword) &gt;&#x3D; 0
             )
         )
       : [];
@@ -2164,9 +2164,9 @@ export class NodeViewerComponent implements OnInit {
     if (type &#x3D;&#x3D;&#x3D; &#x27;simple&#x27;) {
       newNode.appendSimpleField(row.name, &#x27;&#x27;);
     } else if (type &#x3D;&#x3D;&#x3D; &#x27;list&#x27;) {
-      newNode.listFields &#x3D; [{ name: row.name, value: [] }];
+      newNode.listFields &#x3D; [{ name: row.name.trim(), value: [] }];
     } else if (type &#x3D;&#x3D;&#x3D; &#x27;map&#x27;) {
-      newNode.mapFields &#x3D; [{ name: row.name, value: null }];
+      newNode.mapFields &#x3D; [{ name: row.name.trim(), value: null }];
     }
 
     this.delete.emit(newNode);
@@ -2195,7 +2195,7 @@ export class NodeViewerComponent implements OnInit {
 
       case &#x27;map&#x27;:
         if (key) {
-          const entry &#x3D; _.find(this.node.mapFields, { name: key });
+          const entry &#x3D; _.find(this.node.mapFields, { name: key.trim() });
 
           _.forEach(entry.value, (item: any) &#x3D;&gt; {
             newNode.appendMapField(key, item.name, item.value);
@@ -2239,16 +2239,16 @@ export class NodeViewerComponent implements OnInit {
       case &#x27;map&#x27;:
         if (key) {
           // have to fetch all other configs under this key
-          const entry &#x3D; _.find(this.node.mapFields, { name: key });
-          newNode.mapFields &#x3D; [{ name: key, value: [] }];
+          const entry &#x3D; _.find(this.node.mapFields, { name: key.trim() });
+          newNode.mapFields &#x3D; [{ name: key.trim(), value: [] }];
 
           _.forEach(entry.value, (item: any) &#x3D;&gt; {
             if (item.name &#x3D;&#x3D;&#x3D; row.name) {
               if (!isDeleting) {
-                newNode.appendMapField(key, item.name, value);
+                newNode.appendMapField(key.trim(), item.name.trim(), value);
               }
             } else {
-              newNode.appendMapField(key, item.name, item.value);
+              newNode.appendMapField(key.trim(), item.name.trim(), item.value);
             }
           });
         }
@@ -2689,7 +2689,7 @@ ngx-datatable {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'NodeViewerComponent'};
 </script>
diff --git a/helix-front/docs/components/PartitionDetailComponent.html b/helix-front/docs/components/PartitionDetailComponent.html
index 65befae75..76ac0eba9 100644
--- a/helix-front/docs/components/PartitionDetailComponent.html
+++ b/helix-front/docs/components/PartitionDetailComponent.html
@@ -504,7 +504,7 @@ export class PartitionDetailComponent implements OnInit {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'PartitionDetailComponent'};
 </script>
diff --git a/helix-front/docs/components/PartitionListComponent.html b/helix-front/docs/components/PartitionListComponent.html
index fc0fcc3bf..f4bfd1b74 100644
--- a/helix-front/docs/components/PartitionListComponent.html
+++ b/helix-front/docs/components/PartitionListComponent.html
@@ -208,7 +208,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="27" class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:27</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="28" class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:28</a></div>
                             </td>
                         </tr>
 
@@ -299,8 +299,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="44"
-                            class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:44</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="45"
+                            class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:45</a></div>
                 </td>
             </tr>
 
@@ -336,8 +336,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="48"
-                            class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:48</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="49"
+                            class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:49</a></div>
                 </td>
             </tr>
 
@@ -375,8 +375,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="67"
-                            class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:67</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="68"
+                            class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:68</a></div>
                 </td>
             </tr>
 
@@ -412,8 +412,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="35"
-                            class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:35</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="36"
+                            class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:36</a></div>
                 </td>
             </tr>
 
@@ -449,8 +449,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="61"
-                            class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:61</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="62"
+                            class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:62</a></div>
                 </td>
             </tr>
 
@@ -518,7 +518,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="19" class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:19</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="20" class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:20</a></div>
                         </td>
                     </tr>
 
@@ -543,7 +543,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="22" class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:22</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="23" class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:23</a></div>
                         </td>
                     </tr>
 
@@ -568,7 +568,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="18" class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:18</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="19" class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:19</a></div>
                         </td>
                     </tr>
 
@@ -594,7 +594,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="21" class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:21</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="22" class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:22</a></div>
                         </td>
                     </tr>
 
@@ -620,7 +620,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="20" class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:20</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="21" class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:21</a></div>
                         </td>
                     </tr>
 
@@ -645,7 +645,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="23" class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:23</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="24" class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:24</a></div>
                         </td>
                     </tr>
 
@@ -679,7 +679,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="24" class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:24</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="25" class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:25</a></div>
                         </td>
                     </tr>
 
@@ -699,7 +699,7 @@
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
+                        <i>Type : </i>    <code>DatatableComponent</code>
 
                     </td>
                 </tr>
@@ -708,13 +708,13 @@
                         <b>Decorators : </b>
                         <br />
                         <code>
-                            @ViewChild(&#x27;partitionsTable&#x27;, {static: true})<br />
+                            @ViewChild(&#x27;partitionsTable&#x27;, {static: false})<br />
                         </code>
                     </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="16" class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:16</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="17" class="link-to-prism">src/app/resource/partition-list/partition-list.component.ts:17</a></div>
                         </td>
                     </tr>
 
@@ -734,6 +734,7 @@ import { Settings } from &#x27;../../core/settings&#x27;;
 import { Partition, IReplica, Resource } from &#x27;../shared/resource.model&#x27;;
 import { HelperService } from &#x27;../../shared/helper.service&#x27;;
 import { ResourceService } from &#x27;../shared/resource.service&#x27;;
+import { DatatableComponent } from &#x27;@swimlane/ngx-datatable&#x27;;
 
 @Component({
   selector: &#x27;hi-partition-list&#x27;,
@@ -741,8 +742,8 @@ import { ResourceService } from &#x27;../shared/resource.service&#x27;;
   styleUrls: [&#x27;./partition-list.component.scss&#x27;],
 })
 export class PartitionListComponent implements OnInit {
-  @ViewChild(&#x27;partitionsTable&#x27;, { static: true })
-  table: any;
+  @ViewChild(&#x27;partitionsTable&#x27;, { static: false })
+  table: DatatableComponent;
 
   isLoading &#x3D; true;
   clusterName: string;
@@ -1005,7 +1006,7 @@ div.message {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'PartitionListComponent'};
 </script>
diff --git a/helix-front/docs/components/ResourceDetailComponent.html b/helix-front/docs/components/ResourceDetailComponent.html
index 94419d067..738d212b7 100644
--- a/helix-front/docs/components/ResourceDetailComponent.html
+++ b/helix-front/docs/components/ResourceDetailComponent.html
@@ -887,7 +887,7 @@ export class ResourceDetailComponent implements OnInit {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'ResourceDetailComponent'};
 </script>
diff --git a/helix-front/docs/components/ResourceDetailForInstanceComponent.html b/helix-front/docs/components/ResourceDetailForInstanceComponent.html
index b287c6f2b..47e6b9f3b 100644
--- a/helix-front/docs/components/ResourceDetailForInstanceComponent.html
+++ b/helix-front/docs/components/ResourceDetailForInstanceComponent.html
@@ -625,7 +625,7 @@ hi-key-value-pairs {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'ResourceDetailForInstanceComponent'};
 </script>
diff --git a/helix-front/docs/components/ResourceListComponent.html b/helix-front/docs/components/ResourceListComponent.html
index 72fc5f294..55dc61750 100644
--- a/helix-front/docs/components/ResourceListComponent.html
+++ b/helix-front/docs/components/ResourceListComponent.html
@@ -211,7 +211,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="34" class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:34</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="35" class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:35</a></div>
                             </td>
                         </tr>
 
@@ -328,8 +328,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="75"
-                            class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:75</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="76"
+                            class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:76</a></div>
                 </td>
             </tr>
 
@@ -365,8 +365,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="44"
-                            class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:44</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="45"
+                            class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:45</a></div>
                 </td>
             </tr>
 
@@ -402,8 +402,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="98"
-                            class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:98</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="99"
+                            class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:99</a></div>
                 </td>
             </tr>
 
@@ -471,7 +471,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="29" class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:29</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="30" class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:30</a></div>
                         </td>
                     </tr>
 
@@ -496,7 +496,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="25" class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:25</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="26" class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:26</a></div>
                         </td>
                     </tr>
 
@@ -522,7 +522,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="30" class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:30</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="31" class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:31</a></div>
                         </td>
                     </tr>
 
@@ -547,7 +547,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="24" class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:24</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="25" class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:25</a></div>
                         </td>
                     </tr>
 
@@ -572,7 +572,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="28" class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:28</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="29" class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:29</a></div>
                         </td>
                     </tr>
 
@@ -598,7 +598,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="27" class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:27</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="28" class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:28</a></div>
                         </td>
                     </tr>
 
@@ -623,7 +623,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="26" class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:26</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="27" class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:27</a></div>
                         </td>
                     </tr>
 
@@ -657,7 +657,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="31" class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:31</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="32" class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:32</a></div>
                         </td>
                     </tr>
 
@@ -677,7 +677,7 @@
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
+                        <i>Type : </i>    <code>DatatableComponent</code>
 
                     </td>
                 </tr>
@@ -686,13 +686,13 @@
                         <b>Decorators : </b>
                         <br />
                         <code>
-                            @ViewChild(&#x27;resourcesTable&#x27;, {static: true})<br />
+                            @ViewChild(&#x27;resourcesTable&#x27;, {static: false})<br />
                         </code>
                     </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="22" class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:22</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="23" class="link-to-prism">src/app/resource/resource-list/resource-list.component.ts:23</a></div>
                         </td>
                     </tr>
 
@@ -717,6 +717,7 @@ import { Resource } from &#x27;../shared/resource.model&#x27;;
 import { ResourceService } from &#x27;../shared/resource.service&#x27;;
 import { WorkflowService } from &#x27;../../workflow/shared/workflow.service&#x27;;
 import { HelperService } from &#x27;../../shared/helper.service&#x27;;
+import { DatatableComponent } from &#x27;@swimlane/ngx-datatable&#x27;;
 
 @Component({
   selector: &#x27;hi-resource-list&#x27;,
@@ -725,8 +726,8 @@ import { HelperService } from &#x27;../../shared/helper.service&#x27;;
   providers: [WorkflowService],
 })
 export class ResourceListComponent implements OnInit {
-  @ViewChild(&#x27;resourcesTable&#x27;, { static: true })
-  table: any;
+  @ViewChild(&#x27;resourcesTable&#x27;, { static: false })
+  table: DatatableComponent;
 
   isForInstance &#x3D; false;
   headerHeight &#x3D; Settings.tableHeaderHeight;
@@ -929,7 +930,7 @@ export class ResourceListComponent implements OnInit {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'ResourceListComponent'};
 </script>
diff --git a/helix-front/docs/components/ResourceNodeViewerComponent.html b/helix-front/docs/components/ResourceNodeViewerComponent.html
index b169d266a..6f0cb75df 100644
--- a/helix-front/docs/components/ResourceNodeViewerComponent.html
+++ b/helix-front/docs/components/ResourceNodeViewerComponent.html
@@ -622,7 +622,7 @@ export class ResourceNodeViewerComponent implements OnInit {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'ResourceNodeViewerComponent'};
 </script>
diff --git a/helix-front/docs/components/StateLabelComponent.html b/helix-front/docs/components/StateLabelComponent.html
index 9e148b738..b2c7a9585 100644
--- a/helix-front/docs/components/StateLabelComponent.html
+++ b/helix-front/docs/components/StateLabelComponent.html
@@ -387,7 +387,7 @@ export class StateLabelComponent implements OnInit {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'StateLabelComponent'};
 </script>
diff --git a/helix-front/docs/components/WorkflowDagComponent.html b/helix-front/docs/components/WorkflowDagComponent.html
index 9e193489f..699ab3b93 100644
--- a/helix-front/docs/components/WorkflowDagComponent.html
+++ b/helix-front/docs/components/WorkflowDagComponent.html
@@ -781,7 +781,7 @@ export class WorkflowDagComponent implements OnInit, AfterViewInit {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'WorkflowDagComponent'};
 </script>
diff --git a/helix-front/docs/components/WorkflowDetailComponent.html b/helix-front/docs/components/WorkflowDetailComponent.html
index c580fc98b..784089b54 100644
--- a/helix-front/docs/components/WorkflowDetailComponent.html
+++ b/helix-front/docs/components/WorkflowDetailComponent.html
@@ -794,7 +794,7 @@ export class WorkflowDetailComponent implements OnInit {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'WorkflowDetailComponent'};
 </script>
diff --git a/helix-front/docs/components/WorkflowListComponent.html b/helix-front/docs/components/WorkflowListComponent.html
index a61732fa2..d689f49a0 100644
--- a/helix-front/docs/components/WorkflowListComponent.html
+++ b/helix-front/docs/components/WorkflowListComponent.html
@@ -195,7 +195,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="27" class="link-to-prism">src/app/workflow/workflow-list/workflow-list.component.ts:27</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="28" class="link-to-prism">src/app/workflow/workflow-list/workflow-list.component.ts:28</a></div>
                             </td>
                         </tr>
 
@@ -286,8 +286,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="64"
-                            class="link-to-prism">src/app/workflow/workflow-list/workflow-list.component.ts:64</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="65"
+                            class="link-to-prism">src/app/workflow/workflow-list/workflow-list.component.ts:65</a></div>
                 </td>
             </tr>
 
@@ -351,8 +351,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="35"
-                            class="link-to-prism">src/app/workflow/workflow-list/workflow-list.component.ts:35</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="36"
+                            class="link-to-prism">src/app/workflow/workflow-list/workflow-list.component.ts:36</a></div>
                 </td>
             </tr>
 
@@ -393,7 +393,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="21" class="link-to-prism">src/app/workflow/workflow-list/workflow-list.component.ts:21</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="22" class="link-to-prism">src/app/workflow/workflow-list/workflow-list.component.ts:22</a></div>
                         </td>
                     </tr>
 
@@ -418,7 +418,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="24" class="link-to-prism">src/app/workflow/workflow-list/workflow-list.component.ts:24</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="25" class="link-to-prism">src/app/workflow/workflow-list/workflow-list.component.ts:25</a></div>
                         </td>
                     </tr>
 
@@ -443,7 +443,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="20" class="link-to-prism">src/app/workflow/workflow-list/workflow-list.component.ts:20</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="21" class="link-to-prism">src/app/workflow/workflow-list/workflow-list.component.ts:21</a></div>
                         </td>
                     </tr>
 
@@ -468,7 +468,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="25" class="link-to-prism">src/app/workflow/workflow-list/workflow-list.component.ts:25</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="26" class="link-to-prism">src/app/workflow/workflow-list/workflow-list.component.ts:26</a></div>
                         </td>
                     </tr>
 
@@ -499,7 +499,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="27" class="link-to-prism">src/app/workflow/workflow-list/workflow-list.component.ts:27</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="28" class="link-to-prism">src/app/workflow/workflow-list/workflow-list.component.ts:28</a></div>
                         </td>
                     </tr>
 
@@ -519,7 +519,7 @@
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
+                        <i>Type : </i>    <code>DatatableComponent</code>
 
                     </td>
                 </tr>
@@ -528,13 +528,13 @@
                         <b>Decorators : </b>
                         <br />
                         <code>
-                            @ViewChild(&#x27;workflowsTable&#x27;, {static: true})<br />
+                            @ViewChild(&#x27;workflowsTable&#x27;, {static: false})<br />
                         </code>
                     </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="18" class="link-to-prism">src/app/workflow/workflow-list/workflow-list.component.ts:18</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="19" class="link-to-prism">src/app/workflow/workflow-list/workflow-list.component.ts:19</a></div>
                         </td>
                     </tr>
 
@@ -560,7 +560,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="22" class="link-to-prism">src/app/workflow/workflow-list/workflow-list.component.ts:22</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="23" class="link-to-prism">src/app/workflow/workflow-list/workflow-list.component.ts:23</a></div>
                         </td>
                     </tr>
 
@@ -578,6 +578,7 @@ import { Router, ActivatedRoute } from &#x27;@angular/router&#x27;;
 
 import { Settings } from &#x27;../../core/settings&#x27;;
 import { WorkflowService } from &#x27;../shared/workflow.service&#x27;;
+import { DatatableComponent } from &#x27;@swimlane/ngx-datatable&#x27;;
 
 type WorkflowRow &#x3D; {
   name: string;
@@ -589,8 +590,8 @@ type WorkflowRow &#x3D; {
   styleUrls: [&#x27;./workflow-list.component.scss&#x27;],
 })
 export class WorkflowListComponent implements OnInit {
-  @ViewChild(&#x27;workflowsTable&#x27;, { static: true })
-  table: any;
+  @ViewChild(&#x27;workflowsTable&#x27;, { static: false })
+  table: DatatableComponent;
 
   isLoading &#x3D; true;
   clusterName: string;
@@ -771,7 +772,7 @@ export class WorkflowListComponent implements OnInit {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><!--  ~ Licensed to the Apache Software Foundation (ASF) under one  ~ or more contributor license agreements.  See the NOTICE file  ~ distributed with this work for additional information  ~ regarding copyright ownership.  The ASF licenses this file  ~ to you under the Apache License, Version 2.0 (the  ~ "License"); you may not use this file except in compliance  ~ with the License.  You may obtain a copy of the License at  ~  ~     http://www.apach [...]
-    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ControllerDetailComponent', [...]
+    var COMPONENTS = [{'name': 'AlertDialogComponent', 'selector': 'hi-alert-dialog'},{'name': 'AppComponent', 'selector': 'hi-root'},{'name': 'ClusterComponent', 'selector': 'hi-cluster'},{'name': 'ClusterDetailComponent', 'selector': 'hi-cluster-detail'},{'name': 'ClusterListComponent', 'selector': 'hi-cluster-list'},{'name': 'ConfigDetailComponent', 'selector': 'hi-config-detail'},{'name': 'ConfirmDialogComponent', 'selector': 'hi-confirm-dialog'},{'name': 'ConfirmDialogTestComponent' [...]
     var DIRECTIVES = [{'name': 'KeyValuePairDirective', 'selector': 'hi-key-value-pair'}];
     var ACTUAL_COMPONENT = {'name': 'WorkflowListComponent'};
 </script>
diff --git a/helix-front/docs/coverage.html b/helix-front/docs/coverage.html
index 9a6caf67a..ea3f91287 100644
--- a/helix-front/docs/coverage.html
+++ b/helix-front/docs/coverage.html
@@ -91,6 +91,114 @@
                 <span class="coverage-count">(0/1)</span>
             </td>
         </tr>
+        <tr class="very-good">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./miscellaneous/variables.html#CUSTOM_IDENTITY_TOKEN_REQUEST_BODY">server/config.example.ts</a>
+            </td>
+            <td>variable</td>
+            <td>CUSTOM_IDENTITY_TOKEN_REQUEST_BODY</td>
+            <td align="right" data-sort="100">
+                <span class="coverage-percent">100 %</span>
+                <span class="coverage-count">(1/1)</span>
+            </td>
+        </tr>
+        <tr class="low">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./miscellaneous/variables.html#HELIX_ENDPOINTS">server/config.example.ts</a>
+            </td>
+            <td>variable</td>
+            <td>HELIX_ENDPOINTS</td>
+            <td align="right" data-sort="0">
+                <span class="coverage-percent">0 %</span>
+                <span class="coverage-count">(0/1)</span>
+            </td>
+        </tr>
+        <tr class="very-good">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./miscellaneous/variables.html#IDENTITY_TOKEN_SOURCE">server/config.example.ts</a>
+            </td>
+            <td>variable</td>
+            <td>IDENTITY_TOKEN_SOURCE</td>
+            <td align="right" data-sort="100">
+                <span class="coverage-percent">100 %</span>
+                <span class="coverage-count">(1/1)</span>
+            </td>
+        </tr>
+        <tr class="low">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./miscellaneous/variables.html#LDAP">server/config.example.ts</a>
+            </td>
+            <td>variable</td>
+            <td>LDAP</td>
+            <td align="right" data-sort="0">
+                <span class="coverage-percent">0 %</span>
+                <span class="coverage-count">(0/1)</span>
+            </td>
+        </tr>
+        <tr class="low">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./miscellaneous/variables.html#SESSION_STORE">server/config.example.ts</a>
+            </td>
+            <td>variable</td>
+            <td>SESSION_STORE</td>
+            <td align="right" data-sort="0">
+                <span class="coverage-percent">0 %</span>
+                <span class="coverage-count">(0/1)</span>
+            </td>
+        </tr>
+        <tr class="low">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./miscellaneous/variables.html#SSL">server/config.example.ts</a>
+            </td>
+            <td>variable</td>
+            <td>SSL</td>
+            <td align="right" data-sort="0">
+                <span class="coverage-percent">0 %</span>
+                <span class="coverage-count">(0/1)</span>
+            </td>
+        </tr>
+        <tr class="very-good">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./miscellaneous/variables.html#TOKEN_EXPIRATION_KEY">server/config.example.ts</a>
+            </td>
+            <td>variable</td>
+            <td>TOKEN_EXPIRATION_KEY</td>
+            <td align="right" data-sort="100">
+                <span class="coverage-percent">100 %</span>
+                <span class="coverage-count">(1/1)</span>
+            </td>
+        </tr>
+        <tr class="very-good">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./miscellaneous/variables.html#TOKEN_RESPONSE_KEY">server/config.example.ts</a>
+            </td>
+            <td>variable</td>
+            <td>TOKEN_RESPONSE_KEY</td>
+            <td align="right" data-sort="100">
+                <span class="coverage-percent">100 %</span>
+                <span class="coverage-count">(1/1)</span>
+            </td>
+        </tr>
+        <tr class="very-good">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./miscellaneous/variables.html#CUSTOM_IDENTITY_TOKEN_REQUEST_BODY">server/config.ts</a>
+            </td>
+            <td>variable</td>
+            <td>CUSTOM_IDENTITY_TOKEN_REQUEST_BODY</td>
+            <td align="right" data-sort="100">
+                <span class="coverage-percent">100 %</span>
+                <span class="coverage-count">(1/1)</span>
+            </td>
+        </tr>
         <tr class="low">
             <td>
                 <!-- miscellaneous -->
@@ -103,6 +211,18 @@
                 <span class="coverage-count">(0/1)</span>
             </td>
         </tr>
+        <tr class="very-good">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./miscellaneous/variables.html#IDENTITY_TOKEN_SOURCE">server/config.ts</a>
+            </td>
+            <td>variable</td>
+            <td>IDENTITY_TOKEN_SOURCE</td>
+            <td align="right" data-sort="100">
+                <span class="coverage-percent">100 %</span>
+                <span class="coverage-count">(1/1)</span>
+            </td>
+        </tr>
         <tr class="low">
             <td>
                 <!-- miscellaneous -->
@@ -139,28 +259,52 @@
                 <span class="coverage-count">(0/1)</span>
             </td>
         </tr>
+        <tr class="very-good">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./miscellaneous/variables.html#TOKEN_EXPIRATION_KEY">server/config.ts</a>
+            </td>
+            <td>variable</td>
+            <td>TOKEN_EXPIRATION_KEY</td>
+            <td align="right" data-sort="100">
+                <span class="coverage-percent">100 %</span>
+                <span class="coverage-count">(1/1)</span>
+            </td>
+        </tr>
+        <tr class="very-good">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./miscellaneous/variables.html#TOKEN_RESPONSE_KEY">server/config.ts</a>
+            </td>
+            <td>variable</td>
+            <td>TOKEN_RESPONSE_KEY</td>
+            <td align="right" data-sort="100">
+                <span class="coverage-percent">100 %</span>
+                <span class="coverage-count">(1/1)</span>
+            </td>
+        </tr>
         <tr class="low">
             <td>
                 <!-- miscellaneous -->
-                <a href="./interfaces/HelixSession.html">server/controllers/d.ts</a>
+                <a href="./interfaces/HelixRequest.html">server/controllers/d.ts</a>
             </td>
             <td>interface</td>
-            <td>HelixSession</td>
+            <td>HelixRequest</td>
             <td align="right" data-sort="0">
                 <span class="coverage-percent">0 %</span>
-                <span class="coverage-count">(0/3)</span>
+                <span class="coverage-count">(0/2)</span>
             </td>
         </tr>
         <tr class="low">
             <td>
                 <!-- miscellaneous -->
-                <a href="./interfaces/HelixUserRequest.html">server/controllers/d.ts</a>
+                <a href="./interfaces/HelixSession.html">server/controllers/d.ts</a>
             </td>
             <td>interface</td>
-            <td>HelixUserRequest</td>
+            <td>HelixSession</td>
             <td align="right" data-sort="0">
                 <span class="coverage-percent">0 %</span>
-                <span class="coverage-count">(0/2)</span>
+                <span class="coverage-count">(0/4)</span>
             </td>
         </tr>
         <tr class="low">
@@ -184,7 +328,7 @@
             <td>UserCtrl</td>
             <td align="right" data-sort="0">
                 <span class="coverage-percent">0 %</span>
-                <span class="coverage-count">(0/6)</span>
+                <span class="coverage-count">(0/5)</span>
             </td>
         </tr>
         <tr class="low">
@@ -679,6 +823,18 @@
                 <span class="coverage-count">(0/5)</span>
             </td>
         </tr>
+        <tr class="low">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./components/ConfirmDialogTestComponent.html">src/app/shared/dialog/confirm-dialog/confirm-dialog-test.component.ts</a>
+            </td>
+            <td>component</td>
+            <td>ConfirmDialogTestComponent</td>
+            <td align="right" data-sort="0">
+                <span class="coverage-percent">0 %</span>
+                <span class="coverage-count">(0/5)</span>
+            </td>
+        </tr>
         <tr class="low">
             <td>
                 <!-- miscellaneous -->
@@ -688,7 +844,31 @@
             <td>ConfirmDialogComponent</td>
             <td align="right" data-sort="0">
                 <span class="coverage-percent">0 %</span>
-                <span class="coverage-count">(0/7)</span>
+                <span class="coverage-count">(0/8)</span>
+            </td>
+        </tr>
+        <tr class="low">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./miscellaneous/variables.html#Delete">src/app/shared/dialog/confirm-dialog/confirm-dialog.stories.ts</a>
+            </td>
+            <td>variable</td>
+            <td>Delete</td>
+            <td align="right" data-sort="0">
+                <span class="coverage-percent">0 %</span>
+                <span class="coverage-count">(0/1)</span>
+            </td>
+        </tr>
+        <tr class="low">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./miscellaneous/variables.html#Template">src/app/shared/dialog/confirm-dialog/confirm-dialog.stories.ts</a>
+            </td>
+            <td>variable</td>
+            <td>Template</td>
+            <td align="right" data-sort="0">
+                <span class="coverage-percent">0 %</span>
+                <span class="coverage-count">(0/1)</span>
             </td>
         </tr>
         <tr class="low">
@@ -724,7 +904,7 @@
             <td>HelperService</td>
             <td align="right" data-sort="0">
                 <span class="coverage-percent">0 %</span>
-                <span class="coverage-count">(0/5)</span>
+                <span class="coverage-count">(0/6)</span>
             </td>
         </tr>
         <tr class="low">
@@ -811,6 +991,18 @@
                 <span class="coverage-count">(0/3)</span>
             </td>
         </tr>
+        <tr class="low">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./interfaces/Payload.html">src/app/shared/models/node.model.ts</a>
+            </td>
+            <td>interface</td>
+            <td>Payload</td>
+            <td align="right" data-sort="0">
+                <span class="coverage-percent">0 %</span>
+                <span class="coverage-count">(0/5)</span>
+            </td>
+        </tr>
         <tr class="low">
             <td>
                 <!-- miscellaneous -->
@@ -847,6 +1039,54 @@
                 <span class="coverage-count">(0/5)</span>
             </td>
         </tr>
+        <tr class="low">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./miscellaneous/variables.html#Leader">src/app/shared/state-label/state-label.stories.ts</a>
+            </td>
+            <td>variable</td>
+            <td>Leader</td>
+            <td align="right" data-sort="0">
+                <span class="coverage-percent">0 %</span>
+                <span class="coverage-count">(0/1)</span>
+            </td>
+        </tr>
+        <tr class="low">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./miscellaneous/variables.html#Offline">src/app/shared/state-label/state-label.stories.ts</a>
+            </td>
+            <td>variable</td>
+            <td>Offline</td>
+            <td align="right" data-sort="0">
+                <span class="coverage-percent">0 %</span>
+                <span class="coverage-count">(0/1)</span>
+            </td>
+        </tr>
+        <tr class="low">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./miscellaneous/variables.html#Standby">src/app/shared/state-label/state-label.stories.ts</a>
+            </td>
+            <td>variable</td>
+            <td>Standby</td>
+            <td align="right" data-sort="0">
+                <span class="coverage-percent">0 %</span>
+                <span class="coverage-count">(0/1)</span>
+            </td>
+        </tr>
+        <tr class="low">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./miscellaneous/variables.html#Template">src/app/shared/state-label/state-label.stories.ts</a>
+            </td>
+            <td>variable</td>
+            <td>Template</td>
+            <td align="right" data-sort="0">
+                <span class="coverage-percent">0 %</span>
+                <span class="coverage-count">(0/1)</span>
+            </td>
+        </tr>
         <tr class="low">
             <td>
                 <!-- miscellaneous -->
@@ -967,6 +1207,78 @@
                 <span class="coverage-count">(0/11)</span>
             </td>
         </tr>
+        <tr class="low">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./miscellaneous/variables.html#clusterName">src/app/workflow/workflow-list/workflow-list.stories.ts</a>
+            </td>
+            <td>variable</td>
+            <td>clusterName</td>
+            <td align="right" data-sort="0">
+                <span class="coverage-percent">0 %</span>
+                <span class="coverage-count">(0/1)</span>
+            </td>
+        </tr>
+        <tr class="low">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./miscellaneous/variables.html#Default">src/app/workflow/workflow-list/workflow-list.stories.ts</a>
+            </td>
+            <td>variable</td>
+            <td>Default</td>
+            <td align="right" data-sort="0">
+                <span class="coverage-percent">0 %</span>
+                <span class="coverage-count">(0/1)</span>
+            </td>
+        </tr>
+        <tr class="low">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./miscellaneous/variables.html#Empty">src/app/workflow/workflow-list/workflow-list.stories.ts</a>
+            </td>
+            <td>variable</td>
+            <td>Empty</td>
+            <td align="right" data-sort="0">
+                <span class="coverage-percent">0 %</span>
+                <span class="coverage-count">(0/1)</span>
+            </td>
+        </tr>
+        <tr class="low">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./miscellaneous/variables.html#Loading">src/app/workflow/workflow-list/workflow-list.stories.ts</a>
+            </td>
+            <td>variable</td>
+            <td>Loading</td>
+            <td align="right" data-sort="0">
+                <span class="coverage-percent">0 %</span>
+                <span class="coverage-count">(0/1)</span>
+            </td>
+        </tr>
+        <tr class="low">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./miscellaneous/variables.html#Template">src/app/workflow/workflow-list/workflow-list.stories.ts</a>
+            </td>
+            <td>variable</td>
+            <td>Template</td>
+            <td align="right" data-sort="0">
+                <span class="coverage-percent">0 %</span>
+                <span class="coverage-count">(0/1)</span>
+            </td>
+        </tr>
+        <tr class="low">
+            <td>
+                <!-- miscellaneous -->
+                <a href="./miscellaneous/variables.html#workflowRows">src/app/workflow/workflow-list/workflow-list.stories.ts</a>
+            </td>
+            <td>variable</td>
+            <td>workflowRows</td>
+            <td align="right" data-sort="0">
+                <span class="coverage-percent">0 %</span>
+                <span class="coverage-count">(0/1)</span>
+            </td>
+        </tr>
         <tr class="low">
             <td>
                 <!-- miscellaneous -->
diff --git a/helix-front/docs/dependencies.html b/helix-front/docs/dependencies.html
index a8642eb19..ff9fc6df0 100644
--- a/helix-front/docs/dependencies.html
+++ b/helix-front/docs/dependencies.html
@@ -134,7 +134,7 @@
         <li>
             <b>uuid</b> : ^7.0.3</li>
         <li>
-            <b>vis-data</b> : ^6.5.1</li>
+            <b>vis-data</b> : ^7.0.0</li>
         <li>
             <b>vis-network</b> : 7.10.2</li>
         <li>
@@ -146,6 +146,15 @@
     </ul>
 
 
+    <br/>
+    <ol class="breadcrumb">
+        <li>Peer dependencies</li>
+    </ol>
+    <ul class="dependencies-list">
+        <li>
+            <b>webpack</b> : *</li>
+    </ul>
+
 
 
 
diff --git a/helix-front/docs/images/coverage-badge-documentation.svg b/helix-front/docs/images/coverage-badge-documentation.svg
index fe6ebd641..65e1e7641 100644
--- a/helix-front/docs/images/coverage-badge-documentation.svg
+++ b/helix-front/docs/images/coverage-badge-documentation.svg
@@ -4,6 +4,6 @@
         <rect id="svg_2" height="20" width="40" y="0" x="92" stroke-width="1.5" stroke="#d8604b" fill="#d8604b" rx="7" ry="7"/>
         <rect id="svg_3" height="20" width="22" y="0" x="92" stroke-width="1.5" stroke="#d8604b" fill="#d8604b"/>
         <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="12" id="svg_4" y="14" x="6" stroke-width="0" stroke="#5d5d5d" fill="#ffffff">documentation</text>
-        <text xml:space="preserve" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="12" id="svg_5" y="14" x="112" stroke-width="0" stroke="#5d5d5d" fill="#ffffff" style="text-anchor: middle">0%</text>
+        <text xml:space="preserve" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="12" id="svg_5" y="14" x="112" stroke-width="0" stroke="#5d5d5d" fill="#ffffff" style="text-anchor: middle">7%</text>
     </g>
 </svg>
diff --git a/helix-front/docs/injectables/ClusterService.html b/helix-front/docs/injectables/ClusterService.html
index c0bb13982..7544eb928 100644
--- a/helix-front/docs/injectables/ClusterService.html
+++ b/helix-front/docs/injectables/ClusterService.html
@@ -417,8 +417,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="53"
-                            class="link-to-prism">src/app/cluster/shared/cluster.service.ts:53</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="50"
+                            class="link-to-prism">src/app/cluster/shared/cluster.service.ts:50</a></div>
                 </td>
             </tr>
 
@@ -1407,12 +1407,9 @@ export class ClusterService extends HelixService {
   }
 
   public enableMaintenanceMode(name: string, reason: string) {
-    return this.post(
-      &#x60;/clusters/${name}?command&#x3D;enableMaintenanceMode&#x60;,
-      JSON.stringify({
-        reason,
-      })
-    );
+    return this.post(&#x60;/clusters/${name}?command&#x3D;enableMaintenanceMode&#x60;, {
+      reason,
+    });
   }
 
   public disableMaintenanceMode(name: string) {
diff --git a/helix-front/docs/injectables/ConfigurationService.html b/helix-front/docs/injectables/ConfigurationService.html
index afec590be..7416b463e 100644
--- a/helix-front/docs/injectables/ConfigurationService.html
+++ b/helix-front/docs/injectables/ConfigurationService.html
@@ -1529,14 +1529,14 @@ export class ConfigurationService extends HelixService {
   public setClusterConfig(name: string, config: Node) {
     return this.post(
       &#x60;/clusters/${name}/configs?command&#x3D;update&#x60;,
-      config.json(name)
+      JSON.parse(config.json(name))
     );
   }
 
   public deleteClusterConfig(name: string, config: Node) {
     return this.post(
       &#x60;/clusters/${name}/configs?command&#x3D;delete&#x60;,
-      config.json(name)
+      JSON.parse(config.json(name))
     );
   }
 
@@ -1553,7 +1553,7 @@ export class ConfigurationService extends HelixService {
   ) {
     return this.post(
       &#x60;/clusters/${clusterName}/instances/${instanceName}/configs?command&#x3D;update&#x60;,
-      config.json(instanceName)
+      JSON.parse(config.json(instanceName))
     );
   }
 
@@ -1564,7 +1564,7 @@ export class ConfigurationService extends HelixService {
   ) {
     return this.post(
       &#x60;/clusters/${clusterName}/instances/${instanceName}/configs?command&#x3D;delete&#x60;,
-      config.json(instanceName)
+      JSON.parse(config.json(instanceName))
     );
   }
 
@@ -1581,7 +1581,7 @@ export class ConfigurationService extends HelixService {
   ) {
     return this.post(
       &#x60;/clusters/${clusterName}/resources/${resourceName}/configs?command&#x3D;update&#x60;,
-      config.json(resourceName)
+      JSON.parse(config.json(resourceName))
     );
   }
 
@@ -1592,7 +1592,7 @@ export class ConfigurationService extends HelixService {
   ) {
     return this.post(
       &#x60;/clusters/${clusterName}/resources/${resourceName}/configs?command&#x3D;delete&#x60;,
-      config.json(resourceName)
+      JSON.parse(config.json(resourceName))
     );
   }
 }
diff --git a/helix-front/docs/injectables/HelperService.html b/helix-front/docs/injectables/HelperService.html
index e94cea556..f8e633f68 100644
--- a/helix-front/docs/injectables/HelperService.html
+++ b/helix-front/docs/injectables/HelperService.html
@@ -78,6 +78,10 @@
                 <tr>
                     <td class="col-md-4">
                         <ul class="index-list">
+                            <li>
+                                    <span class="modifier">Private</span>
+                                <a href="#parseMessage" >parseMessage</a>
+                            </li>
                             <li>
                                 <a href="#showConfirmation" >showConfirmation</a>
                             </li>
@@ -165,6 +169,77 @@
     <h3 id="methods">
         Methods
     </h3>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="parseMessage"></a>
+                    <span class="name">
+                        <span class="modifier">Private</span>
+                        <span ><b>parseMessage</b></span>
+                        <a href="#parseMessage"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+            <tr>
+                <td class="col-md-4">
+                    <span class="modifier-icon icon ion-ios-reset"></span>
+                    <code>parseMessage(message: string | object)</code>
+                </td>
+            </tr>
+
+
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-line">Defined in <a href="" data-line="12"
+                            class="link-to-prism">src/app/shared/helper.service.ts:12</a></div>
+                </td>
+            </tr>
+
+
+            <tr>
+                <td class="col-md-4">
+
+                    <div class="io-description">
+                        <b>Parameters :</b>
+                        
+                        <table class="params">
+                            <thead>
+                                <tr>
+                                    <td>Name</td>
+                                    <td>Type</td>
+                                    <td>Optional</td>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>message</td>
+                                    <td>
+                                            <code>string | object</code>
+                                    </td>
+
+                                    <td>
+                                        No
+                                    </td>
+
+
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div>
+                    </div>
+                    <div class="io-description">
+                        <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
+
+                    </div>
+                    <div class="io-description">
+                        
+                    </div>
+                </td>
+            </tr>
+        </tbody>
+    </table>
     <table class="table table-sm table-bordered">
         <tbody>
             <tr>
@@ -178,15 +253,15 @@
             </tr>
             <tr>
                 <td class="col-md-4">
-<code>showConfirmation(message: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank">string</a>)</code>
+<code>showConfirmation(message: string | object, title?: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank">string</a>, confirmButtonText?: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank">string</a>)</code>
                 </td>
             </tr>
 
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="27"
-                            class="link-to-prism">src/app/shared/helper.service.ts:27</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="33"
+                            class="link-to-prism">src/app/shared/helper.service.ts:33</a></div>
                 </td>
             </tr>
 
@@ -209,7 +284,7 @@
                                 <tr>
                                     <td>message</td>
                                     <td>
-                                                <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+                                            <code>string | object</code>
                                     </td>
 
                                     <td>
@@ -217,6 +292,30 @@
                                     </td>
 
 
+                                </tr>
+                                <tr>
+                                    <td>title</td>
+                                    <td>
+                                                <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+                                    </td>
+
+                                    <td>
+                                        Yes
+                                    </td>
+
+
+                                </tr>
+                                <tr>
+                                    <td>confirmButtonText</td>
+                                    <td>
+                                                <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+                                    </td>
+
+                                    <td>
+                                        Yes
+                                    </td>
+
+
                                 </tr>
                             </tbody>
                         </table>
@@ -247,15 +346,15 @@
             </tr>
             <tr>
                 <td class="col-md-4">
-<code>showError(message: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank">string</a>)</code>
+<code>showError(message: string | object)</code>
                 </td>
             </tr>
 
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="12"
-                            class="link-to-prism">src/app/shared/helper.service.ts:12</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="18"
+                            class="link-to-prism">src/app/shared/helper.service.ts:18</a></div>
                 </td>
             </tr>
 
@@ -278,7 +377,7 @@
                                 <tr>
                                     <td>message</td>
                                     <td>
-                                                <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+                                            <code>string | object</code>
                                     </td>
 
                                     <td>
@@ -316,15 +415,15 @@
             </tr>
             <tr>
                 <td class="col-md-4">
-<code>showSnackBar(message: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank">string</a>)</code>
+<code>showSnackBar(message: string | object)</code>
                 </td>
             </tr>
 
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="21"
-                            class="link-to-prism">src/app/shared/helper.service.ts:21</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="27"
+                            class="link-to-prism">src/app/shared/helper.service.ts:27</a></div>
                 </td>
             </tr>
 
@@ -347,7 +446,7 @@
                                 <tr>
                                     <td>message</td>
                                     <td>
-                                                <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+                                            <code>string | object</code>
                                     </td>
 
                                     <td>
@@ -389,27 +488,38 @@ import { ConfirmDialogComponent } from &#x27;./dialog/confirm-dialog/confirm-dia
 export class HelperService {
   constructor(protected snackBar: MatSnackBar, protected dialog: MatDialog) {}
 
-  showError(message: string) {
+  private parseMessage(message: string | object) {
+    return typeof message &#x3D;&#x3D;&#x3D; &#x27;string&#x27;
+      ? message
+      : JSON.stringify(message, null, 2);
+  }
+
+  showError(message: string | object) {
     this.dialog.open(AlertDialogComponent, {
       data: {
         title: &#x27;Error&#x27;,
-        message,
+        message: this.parseMessage(message),
       },
     });
   }
 
-  showSnackBar(message: string) {
-    this.snackBar.open(message, &#x27;OK&#x27;, {
+  showSnackBar(message: string | object) {
+    this.snackBar.open(this.parseMessage(message), &#x27;OK&#x27;, {
       duration: 2000,
     });
   }
 
-  showConfirmation(message: string) {
+  showConfirmation(
+    message: string | object,
+    title?: string,
+    confirmButtonText?: string
+  ) {
     return this.dialog
       .open(ConfirmDialogComponent, {
         data: {
-          title: &#x27;Confirmation&#x27;,
-          message,
+          message: this.parseMessage(message),
+          title,
+          confirmButtonText,
         },
       })
       .afterClosed()
diff --git a/helix-front/docs/injectables/InstanceService.html b/helix-front/docs/injectables/InstanceService.html
index 8431b6c80..4955be59f 100644
--- a/helix-front/docs/injectables/InstanceService.html
+++ b/helix-front/docs/injectables/InstanceService.html
@@ -1303,7 +1303,7 @@ export class InstanceService extends HelixService {
 
     return this.put(
       &#x60;/clusters/${clusterName}/instances/${name}&#x60;,
-      node.json(name)
+      JSON.parse(node.json(name))
     );
   }
 
diff --git a/helix-front/docs/injectables/ResourceService.html b/helix-front/docs/injectables/ResourceService.html
index e1ecc9e54..4a8a17e5f 100644
--- a/helix-front/docs/injectables/ResourceService.html
+++ b/helix-front/docs/injectables/ResourceService.html
@@ -1487,9 +1487,9 @@ export class ResourceService extends HelixService {
           const par &#x3D; data.mapFields[partition];
 
           ret.partitions.push({
-            name: partition,
-            currentState: par.CURRENT_STATE,
-            info: par.INFO,
+            name: partition.trim(),
+            currentState: par.CURRENT_STATE.trim(),
+            info: par.INFO.trim(),
           });
         }
 
diff --git a/helix-front/docs/injectables/UserService.html b/helix-front/docs/injectables/UserService.html
index 55ae64725..f0ae19c4a 100644
--- a/helix-front/docs/injectables/UserService.html
+++ b/helix-front/docs/injectables/UserService.html
@@ -229,8 +229,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="27"
-                            class="link-to-prism">src/app/core/user.service.ts:27</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="29"
+                            class="link-to-prism">src/app/core/user.service.ts:29</a></div>
                 </td>
             </tr>
 
@@ -319,7 +319,7 @@
                     <div>
                     </div>
                     <div class="io-description">
-                        <b>Returns : </b>    <code>Observable&lt;object&gt;</code>
+                        <b>Returns : </b>    <code>Observable&lt;any&gt;</code>
 
                     </div>
                     <div class="io-description">
@@ -353,12 +353,14 @@ export class UserService {
       .pipe(catchError((_) &#x3D;&gt; _));
   }
 
-  public login(username: string, password: string): Observable&lt;object&gt; {
-    return this.http.post(
-      &#x60;${Settings.userAPI}/login&#x60;,
-      { username, password },
-      { headers: this.getHeaders() }
-    );
+  public login(username: string, password: string): Observable&lt;any&gt; {
+    const url &#x3D; &#x60;${Settings.userAPI}/login&#x60;;
+    const body &#x3D; { username, password };
+    const options &#x3D; {
+      headers: this.getHeaders(),
+      observe: &#x27;response&#x27; as &#x27;body&#x27;,
+    };
+    return this.http.post&lt;any&gt;(url, body, options);
   }
 
   protected getHeaders() {
diff --git a/helix-front/docs/interfaces/HelixSession.html b/helix-front/docs/interfaces/HelixRequest.html
similarity index 73%
copy from helix-front/docs/interfaces/HelixSession.html
copy to helix-front/docs/interfaces/HelixRequest.html
index d434b1952..43065df3b 100644
--- a/helix-front/docs/interfaces/HelixSession.html
+++ b/helix-front/docs/interfaces/HelixRequest.html
@@ -47,7 +47,7 @@
   <li>Interfaces</li>
   <li
   >
-  HelixSession</li>
+  HelixRequest</li>
 </ol>
 
 <ul class="nav nav-tabs" role="tablist">
@@ -70,6 +70,12 @@
 
 
 
+            <p class="comment">
+                <h3>Extends</h3>
+            </p>
+            <p class="comment">
+                    <code>Request</code>
+            </p>
 
         <section>
             <h3 id="index">Index</h3>
@@ -84,15 +90,10 @@
                         <td class="col-md-4">
                             <ul class="index-list">
                                 <li>
-                                        <a href="#isAdmin" 
+                                            <span class="modifier">Optional</span>
+                                        <a href="#session" 
 >
-                                            isAdmin
-                                        </a>
-                                </li>
-                                <li>
-                                        <a href="#username" 
->
-                                            username
+                                            session
                                         </a>
                                 </li>
                             </ul>
@@ -110,9 +111,9 @@
                         <tbody>
                                 <tr>
                                     <td class="col-md-4">
-                                        <a name="isAdmin"></a>
-                                        <span class="name "><b>isAdmin</b>
-                                            <a href="#isAdmin">
+                                        <a name="session"></a>
+                                        <span class="name "><b>session</b>
+                                            <a href="#session">
                                                 <span class="icon ion-ios-link"></span>
                                             </a>
                                         </span>
@@ -120,7 +121,7 @@
                                 </tr>
                                 <tr>
                                     <td class="col-md-4">
-                                        <code>isAdmin:         <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
+                                        <code>session:         <code><a href="../interfaces/HelixSession.html" target="_self" >HelixSession</a></code>
 </code>
                                     </td>
                                 </tr>
@@ -128,48 +129,20 @@
 
                                     <tr>
                                         <td class="col-md-4">
-                                            <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
+                                            <i>Type : </i>        <code><a href="../interfaces/HelixSession.html" target="_self" >HelixSession</a></code>
 
                                         </td>
                                     </tr>
 
-
-
-
-
-                        </tbody>
-                    </table>
-                    <table class="table table-sm table-bordered">
-                        <tbody>
-                                <tr>
-                                    <td class="col-md-4">
-                                        <a name="username"></a>
-                                        <span class="name "><b>username</b>
-                                            <a href="#username">
-                                                <span class="icon ion-ios-link"></span>
-                                            </a>
-                                        </span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td class="col-md-4">
-                                        <code>username:         <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
-</code>
-                                    </td>
-                                </tr>
-
-
                                     <tr>
                                         <td class="col-md-4">
-                                            <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
-
+                                            <i>Optional</i>
                                         </td>
                                     </tr>
 
 
 
 
-
                         </tbody>
                     </table>
             </section>
@@ -178,15 +151,33 @@
 
     <div class="tab-pane fade  tab-source-code" id="c-source">
         <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { Request } from &#x27;express&#x27;;
+import request from &#x27;request&#x27;;
 
-export interface HelixUserRequest extends Request {
+export interface HelixRequest extends Request {
   session?: HelixSession;
 }
 
 interface HelixSession {
+  // since this token is from a configurable
+  // identity source, the format really is
+  // &#x60;any&#x60; from helix-front&#x27;s point of view.
+  identityToken: any;
   username: string;
   isAdmin: boolean;
 }
+
+type AgentOptions &#x3D; {
+  rejectUnauthorized: boolean;
+  ca?: string;
+};
+
+export type HelixRequestOptions &#x3D; {
+  url: string;
+  json: string;
+  headers: request.Headers;
+  agentOptions: AgentOptions;
+  body?: string;
+};
 </code></pre>
     </div>
 </div>
@@ -224,7 +215,7 @@ interface HelixSession {
        <script>
             var COMPODOC_CURRENT_PAGE_DEPTH = 1;
             var COMPODOC_CURRENT_PAGE_CONTEXT = 'interface';
-            var COMPODOC_CURRENT_PAGE_URL = 'HelixSession.html';
+            var COMPODOC_CURRENT_PAGE_URL = 'HelixRequest.html';
             var MAX_SEARCH_RESULTS = 15;
        </script>
 
diff --git a/helix-front/docs/interfaces/HelixSession.html b/helix-front/docs/interfaces/HelixSession.html
index d434b1952..c4b45e69f 100644
--- a/helix-front/docs/interfaces/HelixSession.html
+++ b/helix-front/docs/interfaces/HelixSession.html
@@ -83,6 +83,12 @@
                     <tr>
                         <td class="col-md-4">
                             <ul class="index-list">
+                                <li>
+                                        <a href="#identityToken" 
+>
+                                            identityToken
+                                        </a>
+                                </li>
                                 <li>
                                         <a href="#isAdmin" 
 >
@@ -106,6 +112,39 @@
 
             <section>
                 <h3 id="inputs">Properties</h3>
+                    <table class="table table-sm table-bordered">
+                        <tbody>
+                                <tr>
+                                    <td class="col-md-4">
+                                        <a name="identityToken"></a>
+                                        <span class="name "><b>identityToken</b>
+                                            <a href="#identityToken">
+                                                <span class="icon ion-ios-link"></span>
+                                            </a>
+                                        </span>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="col-md-4">
+                                        <code>identityToken:         <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
+</code>
+                                    </td>
+                                </tr>
+
+
+                                    <tr>
+                                        <td class="col-md-4">
+                                            <i>Type : </i>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
+
+                                        </td>
+                                    </tr>
+
+
+
+
+
+                        </tbody>
+                    </table>
                     <table class="table table-sm table-bordered">
                         <tbody>
                                 <tr>
@@ -178,15 +217,33 @@
 
     <div class="tab-pane fade  tab-source-code" id="c-source">
         <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { Request } from &#x27;express&#x27;;
+import request from &#x27;request&#x27;;
 
-export interface HelixUserRequest extends Request {
+export interface HelixRequest extends Request {
   session?: HelixSession;
 }
 
 interface HelixSession {
+  // since this token is from a configurable
+  // identity source, the format really is
+  // &#x60;any&#x60; from helix-front&#x27;s point of view.
+  identityToken: any;
   username: string;
   isAdmin: boolean;
 }
+
+type AgentOptions &#x3D; {
+  rejectUnauthorized: boolean;
+  ca?: string;
+};
+
+export type HelixRequestOptions &#x3D; {
+  url: string;
+  json: string;
+  headers: request.Headers;
+  agentOptions: AgentOptions;
+  body?: string;
+};
 </code></pre>
     </div>
 </div>
diff --git a/helix-front/docs/interfaces/ListFieldObject.html b/helix-front/docs/interfaces/ListFieldObject.html
index 58127e732..75d9b616c 100644
--- a/helix-front/docs/interfaces/ListFieldObject.html
+++ b/helix-front/docs/interfaces/ListFieldObject.html
@@ -194,6 +194,13 @@ interface MapFieldObject {
   value: SimpleFieldObject[];
 }
 
+interface Payload {
+  id: string;
+  simpleFields?: any;
+  listFields?: any;
+  mapFields?: any;
+}
+
 // This is a typical Helix Node definition
 export class Node {
   id: string;
@@ -221,7 +228,7 @@ export class Node {
 
       _.forOwn(obj[&#x27;mapFields&#x27;], (v, k) &#x3D;&gt; {
         this.mapFields.push(&lt;MapFieldObject&gt;{
-          name: k,
+          name: k.trim(),
           value: this.keyValueToArray(v),
         });
       });
@@ -239,7 +246,7 @@ export class Node {
     const index &#x3D; _.findIndex(this.mapFields, { name: key });
     if (index &gt;&#x3D; 0) {
       this.mapFields[index].value.push(&lt;SimpleFieldObject&gt;{
-        name,
+        name: name.trim(),
         value,
       });
     } else {
@@ -247,7 +254,7 @@ export class Node {
         name: key,
         value: [
           &lt;SimpleFieldObject&gt;{
-            name,
+            name: name.trim(),
             value,
           },
         ],
@@ -256,30 +263,45 @@ export class Node {
   }
 
   public json(id: string): string {
-    const obj &#x3D; {
+    const obj: Payload &#x3D; {
       id,
-      simpleFields: {},
-      listFields: {},
-      mapFields: {},
     };
 
-    _.forEach(this.simpleFields, (item: SimpleFieldObject) &#x3D;&gt; {
-      obj.simpleFields[item.name] &#x3D; item.value;
-    });
+    if (this?.simpleFields.length &gt; 0) {
+      obj.simpleFields &#x3D; {};
+      _.forEach(this.simpleFields, (item: SimpleFieldObject) &#x3D;&gt; {
+        obj.simpleFields[item.name] &#x3D; item.value;
+      });
+    }
 
-    _.forEach(this.listFields, (item: ListFieldObject) &#x3D;&gt; {
-      obj.listFields[item.name] &#x3D; [];
-      _.forEach(item.value, (subItem: SimpleFieldObject) &#x3D;&gt; {
-        obj.listFields[item.name].push(subItem.value);
+    if (this?.listFields.length &gt; 0) {
+      obj.listFields &#x3D; {};
+      _.forEach(this.listFields, (item: ListFieldObject) &#x3D;&gt; {
+        obj.listFields[item.name] &#x3D; [];
+        _.forEach(item.value, (subItem: SimpleFieldObject) &#x3D;&gt; {
+          obj.listFields[item.name].push(subItem.value);
+        });
       });
-    });
+    }
 
-    _.forEach(this.mapFields, (item: MapFieldObject) &#x3D;&gt; {
-      obj.mapFields[item.name] &#x3D; item.value ? {} : null;
-      _.forEach(item.value, (subItem: SimpleFieldObject) &#x3D;&gt; {
-        obj.mapFields[item.name][subItem.name] &#x3D; subItem.value;
+    if (this?.mapFields.length &gt; 0) {
+      obj.mapFields &#x3D; {};
+      _.forEach(this.mapFields, (item: MapFieldObject) &#x3D;&gt; {
+        obj.mapFields[item.name.trim()] &#x3D; item.value ? {} : null;
+        _.forEach(item.value, (subItem: SimpleFieldObject) &#x3D;&gt; {
+          // if the value is a string that contains all digits, parse it to a number
+          let parsedValue: string | number &#x3D; subItem.value;
+          if (
+            typeof subItem.value &#x3D;&#x3D;&#x3D; &#x27;string&#x27; &amp;&amp;
+            /^\d+$/.test(subItem.value)
+          ) {
+            parsedValue &#x3D; Number(subItem.value);
+          }
+
+          obj.mapFields[item.name.trim()][subItem.name] &#x3D; parsedValue;
+        });
       });
-    });
+    }
 
     return JSON.stringify(obj);
   }
diff --git a/helix-front/docs/interfaces/MapFieldObject.html b/helix-front/docs/interfaces/MapFieldObject.html
index e1df2b6c2..b336dffc0 100644
--- a/helix-front/docs/interfaces/MapFieldObject.html
+++ b/helix-front/docs/interfaces/MapFieldObject.html
@@ -194,6 +194,13 @@ interface MapFieldObject {
   value: SimpleFieldObject[];
 }
 
+interface Payload {
+  id: string;
+  simpleFields?: any;
+  listFields?: any;
+  mapFields?: any;
+}
+
 // This is a typical Helix Node definition
 export class Node {
   id: string;
@@ -221,7 +228,7 @@ export class Node {
 
       _.forOwn(obj[&#x27;mapFields&#x27;], (v, k) &#x3D;&gt; {
         this.mapFields.push(&lt;MapFieldObject&gt;{
-          name: k,
+          name: k.trim(),
           value: this.keyValueToArray(v),
         });
       });
@@ -239,7 +246,7 @@ export class Node {
     const index &#x3D; _.findIndex(this.mapFields, { name: key });
     if (index &gt;&#x3D; 0) {
       this.mapFields[index].value.push(&lt;SimpleFieldObject&gt;{
-        name,
+        name: name.trim(),
         value,
       });
     } else {
@@ -247,7 +254,7 @@ export class Node {
         name: key,
         value: [
           &lt;SimpleFieldObject&gt;{
-            name,
+            name: name.trim(),
             value,
           },
         ],
@@ -256,30 +263,45 @@ export class Node {
   }
 
   public json(id: string): string {
-    const obj &#x3D; {
+    const obj: Payload &#x3D; {
       id,
-      simpleFields: {},
-      listFields: {},
-      mapFields: {},
     };
 
-    _.forEach(this.simpleFields, (item: SimpleFieldObject) &#x3D;&gt; {
-      obj.simpleFields[item.name] &#x3D; item.value;
-    });
+    if (this?.simpleFields.length &gt; 0) {
+      obj.simpleFields &#x3D; {};
+      _.forEach(this.simpleFields, (item: SimpleFieldObject) &#x3D;&gt; {
+        obj.simpleFields[item.name] &#x3D; item.value;
+      });
+    }
 
-    _.forEach(this.listFields, (item: ListFieldObject) &#x3D;&gt; {
-      obj.listFields[item.name] &#x3D; [];
-      _.forEach(item.value, (subItem: SimpleFieldObject) &#x3D;&gt; {
-        obj.listFields[item.name].push(subItem.value);
+    if (this?.listFields.length &gt; 0) {
+      obj.listFields &#x3D; {};
+      _.forEach(this.listFields, (item: ListFieldObject) &#x3D;&gt; {
+        obj.listFields[item.name] &#x3D; [];
+        _.forEach(item.value, (subItem: SimpleFieldObject) &#x3D;&gt; {
+          obj.listFields[item.name].push(subItem.value);
+        });
       });
-    });
+    }
 
-    _.forEach(this.mapFields, (item: MapFieldObject) &#x3D;&gt; {
-      obj.mapFields[item.name] &#x3D; item.value ? {} : null;
-      _.forEach(item.value, (subItem: SimpleFieldObject) &#x3D;&gt; {
-        obj.mapFields[item.name][subItem.name] &#x3D; subItem.value;
+    if (this?.mapFields.length &gt; 0) {
+      obj.mapFields &#x3D; {};
+      _.forEach(this.mapFields, (item: MapFieldObject) &#x3D;&gt; {
+        obj.mapFields[item.name.trim()] &#x3D; item.value ? {} : null;
+        _.forEach(item.value, (subItem: SimpleFieldObject) &#x3D;&gt; {
+          // if the value is a string that contains all digits, parse it to a number
+          let parsedValue: string | number &#x3D; subItem.value;
+          if (
+            typeof subItem.value &#x3D;&#x3D;&#x3D; &#x27;string&#x27; &amp;&amp;
+            /^\d+$/.test(subItem.value)
+          ) {
+            parsedValue &#x3D; Number(subItem.value);
+          }
+
+          obj.mapFields[item.name.trim()][subItem.name] &#x3D; parsedValue;
+        });
       });
-    });
+    }
 
     return JSON.stringify(obj);
   }
diff --git a/helix-front/docs/interfaces/SimpleFieldObject.html b/helix-front/docs/interfaces/Payload.html
similarity index 58%
copy from helix-front/docs/interfaces/SimpleFieldObject.html
copy to helix-front/docs/interfaces/Payload.html
index c9085c59f..63a0db0b2 100644
--- a/helix-front/docs/interfaces/SimpleFieldObject.html
+++ b/helix-front/docs/interfaces/Payload.html
@@ -47,7 +47,7 @@
   <li>Interfaces</li>
   <li
   >
-  SimpleFieldObject</li>
+  Payload</li>
 </ol>
 
 <ul class="nav nav-tabs" role="tablist">
@@ -84,15 +84,30 @@
                         <td class="col-md-4">
                             <ul class="index-list">
                                 <li>
-                                        <a href="#name" 
+                                        <a href="#id" 
 >
-                                            name
+                                            id
                                         </a>
                                 </li>
                                 <li>
-                                        <a href="#value" 
+                                            <span class="modifier">Optional</span>
+                                        <a href="#listFields" 
 >
-                                            value
+                                            listFields
+                                        </a>
+                                </li>
+                                <li>
+                                            <span class="modifier">Optional</span>
+                                        <a href="#mapFields" 
+>
+                                            mapFields
+                                        </a>
+                                </li>
+                                <li>
+                                            <span class="modifier">Optional</span>
+                                        <a href="#simpleFields" 
+>
+                                            simpleFields
                                         </a>
                                 </li>
                             </ul>
@@ -110,9 +125,9 @@
                         <tbody>
                                 <tr>
                                     <td class="col-md-4">
-                                        <a name="name"></a>
-                                        <span class="name "><b>name</b>
-                                            <a href="#name">
+                                        <a name="id"></a>
+                                        <span class="name "><b>id</b>
+                                            <a href="#id">
                                                 <span class="icon ion-ios-link"></span>
                                             </a>
                                         </span>
@@ -120,7 +135,7 @@
                                 </tr>
                                 <tr>
                                     <td class="col-md-4">
-                                        <code>name:         <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+                                        <code>id:         <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
 </code>
                                     </td>
                                 </tr>
@@ -143,9 +158,9 @@
                         <tbody>
                                 <tr>
                                     <td class="col-md-4">
-                                        <a name="value"></a>
-                                        <span class="name "><b>value</b>
-                                            <a href="#value">
+                                        <a name="listFields"></a>
+                                        <span class="name "><b>listFields</b>
+                                            <a href="#listFields">
                                                 <span class="icon ion-ios-link"></span>
                                             </a>
                                         </span>
@@ -153,7 +168,7 @@
                                 </tr>
                                 <tr>
                                     <td class="col-md-4">
-                                        <code>value:         <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+                                        <code>listFields:         <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
 </code>
                                     </td>
                                 </tr>
@@ -161,11 +176,92 @@
 
                                     <tr>
                                         <td class="col-md-4">
-                                            <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+                                            <i>Type : </i>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
+
+                                        </td>
+                                    </tr>
+
+                                    <tr>
+                                        <td class="col-md-4">
+                                            <i>Optional</i>
+                                        </td>
+                                    </tr>
+
+
+
+
+                        </tbody>
+                    </table>
+                    <table class="table table-sm table-bordered">
+                        <tbody>
+                                <tr>
+                                    <td class="col-md-4">
+                                        <a name="mapFields"></a>
+                                        <span class="name "><b>mapFields</b>
+                                            <a href="#mapFields">
+                                                <span class="icon ion-ios-link"></span>
+                                            </a>
+                                        </span>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="col-md-4">
+                                        <code>mapFields:         <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
+</code>
+                                    </td>
+                                </tr>
+
+
+                                    <tr>
+                                        <td class="col-md-4">
+                                            <i>Type : </i>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
+
+                                        </td>
+                                    </tr>
+
+                                    <tr>
+                                        <td class="col-md-4">
+                                            <i>Optional</i>
+                                        </td>
+                                    </tr>
+
+
+
+
+                        </tbody>
+                    </table>
+                    <table class="table table-sm table-bordered">
+                        <tbody>
+                                <tr>
+                                    <td class="col-md-4">
+                                        <a name="simpleFields"></a>
+                                        <span class="name "><b>simpleFields</b>
+                                            <a href="#simpleFields">
+                                                <span class="icon ion-ios-link"></span>
+                                            </a>
+                                        </span>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="col-md-4">
+                                        <code>simpleFields:         <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
+</code>
+                                    </td>
+                                </tr>
+
+
+                                    <tr>
+                                        <td class="col-md-4">
+                                            <i>Type : </i>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
 
                                         </td>
                                     </tr>
 
+                                    <tr>
+                                        <td class="col-md-4">
+                                            <i>Optional</i>
+                                        </td>
+                                    </tr>
 
 
 
@@ -194,6 +290,13 @@ interface MapFieldObject {
   value: SimpleFieldObject[];
 }
 
+interface Payload {
+  id: string;
+  simpleFields?: any;
+  listFields?: any;
+  mapFields?: any;
+}
+
 // This is a typical Helix Node definition
 export class Node {
   id: string;
@@ -221,7 +324,7 @@ export class Node {
 
       _.forOwn(obj[&#x27;mapFields&#x27;], (v, k) &#x3D;&gt; {
         this.mapFields.push(&lt;MapFieldObject&gt;{
-          name: k,
+          name: k.trim(),
           value: this.keyValueToArray(v),
         });
       });
@@ -239,7 +342,7 @@ export class Node {
     const index &#x3D; _.findIndex(this.mapFields, { name: key });
     if (index &gt;&#x3D; 0) {
       this.mapFields[index].value.push(&lt;SimpleFieldObject&gt;{
-        name,
+        name: name.trim(),
         value,
       });
     } else {
@@ -247,7 +350,7 @@ export class Node {
         name: key,
         value: [
           &lt;SimpleFieldObject&gt;{
-            name,
+            name: name.trim(),
             value,
           },
         ],
@@ -256,30 +359,45 @@ export class Node {
   }
 
   public json(id: string): string {
-    const obj &#x3D; {
+    const obj: Payload &#x3D; {
       id,
-      simpleFields: {},
-      listFields: {},
-      mapFields: {},
     };
 
-    _.forEach(this.simpleFields, (item: SimpleFieldObject) &#x3D;&gt; {
-      obj.simpleFields[item.name] &#x3D; item.value;
-    });
+    if (this?.simpleFields.length &gt; 0) {
+      obj.simpleFields &#x3D; {};
+      _.forEach(this.simpleFields, (item: SimpleFieldObject) &#x3D;&gt; {
+        obj.simpleFields[item.name] &#x3D; item.value;
+      });
+    }
 
-    _.forEach(this.listFields, (item: ListFieldObject) &#x3D;&gt; {
-      obj.listFields[item.name] &#x3D; [];
-      _.forEach(item.value, (subItem: SimpleFieldObject) &#x3D;&gt; {
-        obj.listFields[item.name].push(subItem.value);
+    if (this?.listFields.length &gt; 0) {
+      obj.listFields &#x3D; {};
+      _.forEach(this.listFields, (item: ListFieldObject) &#x3D;&gt; {
+        obj.listFields[item.name] &#x3D; [];
+        _.forEach(item.value, (subItem: SimpleFieldObject) &#x3D;&gt; {
+          obj.listFields[item.name].push(subItem.value);
+        });
       });
-    });
+    }
 
-    _.forEach(this.mapFields, (item: MapFieldObject) &#x3D;&gt; {
-      obj.mapFields[item.name] &#x3D; item.value ? {} : null;
-      _.forEach(item.value, (subItem: SimpleFieldObject) &#x3D;&gt; {
-        obj.mapFields[item.name][subItem.name] &#x3D; subItem.value;
+    if (this?.mapFields.length &gt; 0) {
+      obj.mapFields &#x3D; {};
+      _.forEach(this.mapFields, (item: MapFieldObject) &#x3D;&gt; {
+        obj.mapFields[item.name.trim()] &#x3D; item.value ? {} : null;
+        _.forEach(item.value, (subItem: SimpleFieldObject) &#x3D;&gt; {
+          // if the value is a string that contains all digits, parse it to a number
+          let parsedValue: string | number &#x3D; subItem.value;
+          if (
+            typeof subItem.value &#x3D;&#x3D;&#x3D; &#x27;string&#x27; &amp;&amp;
+            /^\d+$/.test(subItem.value)
+          ) {
+            parsedValue &#x3D; Number(subItem.value);
+          }
+
+          obj.mapFields[item.name.trim()][subItem.name] &#x3D; parsedValue;
+        });
       });
-    });
+    }
 
     return JSON.stringify(obj);
   }
@@ -335,7 +453,7 @@ export class Node {
        <script>
             var COMPODOC_CURRENT_PAGE_DEPTH = 1;
             var COMPODOC_CURRENT_PAGE_CONTEXT = 'interface';
-            var COMPODOC_CURRENT_PAGE_URL = 'SimpleFieldObject.html';
+            var COMPODOC_CURRENT_PAGE_URL = 'Payload.html';
             var MAX_SEARCH_RESULTS = 15;
        </script>
 
diff --git a/helix-front/docs/interfaces/SimpleFieldObject.html b/helix-front/docs/interfaces/SimpleFieldObject.html
index c9085c59f..33cac1eff 100644
--- a/helix-front/docs/interfaces/SimpleFieldObject.html
+++ b/helix-front/docs/interfaces/SimpleFieldObject.html
@@ -194,6 +194,13 @@ interface MapFieldObject {
   value: SimpleFieldObject[];
 }
 
+interface Payload {
+  id: string;
+  simpleFields?: any;
+  listFields?: any;
+  mapFields?: any;
+}
+
 // This is a typical Helix Node definition
 export class Node {
   id: string;
@@ -221,7 +228,7 @@ export class Node {
 
       _.forOwn(obj[&#x27;mapFields&#x27;], (v, k) &#x3D;&gt; {
         this.mapFields.push(&lt;MapFieldObject&gt;{
-          name: k,
+          name: k.trim(),
           value: this.keyValueToArray(v),
         });
       });
@@ -239,7 +246,7 @@ export class Node {
     const index &#x3D; _.findIndex(this.mapFields, { name: key });
     if (index &gt;&#x3D; 0) {
       this.mapFields[index].value.push(&lt;SimpleFieldObject&gt;{
-        name,
+        name: name.trim(),
         value,
       });
     } else {
@@ -247,7 +254,7 @@ export class Node {
         name: key,
         value: [
           &lt;SimpleFieldObject&gt;{
-            name,
+            name: name.trim(),
             value,
           },
         ],
@@ -256,30 +263,45 @@ export class Node {
   }
 
   public json(id: string): string {
-    const obj &#x3D; {
+    const obj: Payload &#x3D; {
       id,
-      simpleFields: {},
-      listFields: {},
-      mapFields: {},
     };
 
-    _.forEach(this.simpleFields, (item: SimpleFieldObject) &#x3D;&gt; {
-      obj.simpleFields[item.name] &#x3D; item.value;
-    });
+    if (this?.simpleFields.length &gt; 0) {
+      obj.simpleFields &#x3D; {};
+      _.forEach(this.simpleFields, (item: SimpleFieldObject) &#x3D;&gt; {
+        obj.simpleFields[item.name] &#x3D; item.value;
+      });
+    }
 
-    _.forEach(this.listFields, (item: ListFieldObject) &#x3D;&gt; {
-      obj.listFields[item.name] &#x3D; [];
-      _.forEach(item.value, (subItem: SimpleFieldObject) &#x3D;&gt; {
-        obj.listFields[item.name].push(subItem.value);
+    if (this?.listFields.length &gt; 0) {
+      obj.listFields &#x3D; {};
+      _.forEach(this.listFields, (item: ListFieldObject) &#x3D;&gt; {
+        obj.listFields[item.name] &#x3D; [];
+        _.forEach(item.value, (subItem: SimpleFieldObject) &#x3D;&gt; {
+          obj.listFields[item.name].push(subItem.value);
+        });
       });
-    });
+    }
 
-    _.forEach(this.mapFields, (item: MapFieldObject) &#x3D;&gt; {
-      obj.mapFields[item.name] &#x3D; item.value ? {} : null;
-      _.forEach(item.value, (subItem: SimpleFieldObject) &#x3D;&gt; {
-        obj.mapFields[item.name][subItem.name] &#x3D; subItem.value;
+    if (this?.mapFields.length &gt; 0) {
+      obj.mapFields &#x3D; {};
+      _.forEach(this.mapFields, (item: MapFieldObject) &#x3D;&gt; {
+        obj.mapFields[item.name.trim()] &#x3D; item.value ? {} : null;
+        _.forEach(item.value, (subItem: SimpleFieldObject) &#x3D;&gt; {
+          // if the value is a string that contains all digits, parse it to a number
+          let parsedValue: string | number &#x3D; subItem.value;
+          if (
+            typeof subItem.value &#x3D;&#x3D;&#x3D; &#x27;string&#x27; &amp;&amp;
+            /^\d+$/.test(subItem.value)
+          ) {
+            parsedValue &#x3D; Number(subItem.value);
+          }
+
+          obj.mapFields[item.name.trim()][subItem.name] &#x3D; parsedValue;
+        });
       });
-    });
+    }
 
     return JSON.stringify(obj);
   }
diff --git a/helix-front/docs/js/menu-wc.js b/helix-front/docs/js/menu-wc.js
index 851c5b79f..ec065f10a 100644
--- a/helix-front/docs/js/menu-wc.js
+++ b/helix-front/docs/js/menu-wc.js
@@ -420,6 +420,19 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                             </li>
                 </ul>
                 </li>
+                    <li class="chapter">
+                        <div class="simple menu-toggler" data-toggle="collapse" ${ isNormalMode ? 'data-target="#components-links"' :
+                            'data-target="#xs-components-links"' }>
+                            <span class="icon ion-md-cog"></span>
+                            <span>Components</span>
+                            <span class="icon ion-ios-arrow-down"></span>
+                        </div>
+                        <ul class="links collapse " ${ isNormalMode ? 'id="components-links"' : 'id="xs-components-links"' }>
+                            <li class="link">
+                                <a href="components/ConfirmDialogTestComponent.html" data-type="entity-link" >ConfirmDialogTestComponent</a>
+                            </li>
+                        </ul>
+                    </li>
                     <li class="chapter">
                         <div class="simple menu-toggler" data-toggle="collapse" ${ isNormalMode ? 'data-target="#classes-links"' :
                             'data-target="#xs-classes-links"' }>
@@ -519,10 +532,10 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                         </div>
                         <ul class="links collapse " ${ isNormalMode ? ' id="interfaces-links"' : 'id="xs-interfaces-links"' }>
                             <li class="link">
-                                <a href="interfaces/HelixSession.html" data-type="entity-link" >HelixSession</a>
+                                <a href="interfaces/HelixRequest.html" data-type="entity-link" >HelixRequest</a>
                             </li>
                             <li class="link">
-                                <a href="interfaces/HelixUserRequest.html" data-type="entity-link" >HelixUserRequest</a>
+                                <a href="interfaces/HelixSession.html" data-type="entity-link" >HelixSession</a>
                             </li>
                             <li class="link">
                                 <a href="interfaces/IReplica.html" data-type="entity-link" >IReplica</a>
@@ -533,6 +546,9 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                             <li class="link">
                                 <a href="interfaces/MapFieldObject.html" data-type="entity-link" >MapFieldObject</a>
                             </li>
+                            <li class="link">
+                                <a href="interfaces/Payload.html" data-type="entity-link" >Payload</a>
+                            </li>
                             <li class="link">
                                 <a href="interfaces/SimpleFieldObject.html" data-type="entity-link" >SimpleFieldObject</a>
                             </li>
diff --git a/helix-front/docs/js/menu-wc_es5.js b/helix-front/docs/js/menu-wc_es5.js
index 56123a2ed..b34265329 100644
--- a/helix-front/docs/js/menu-wc_es5.js
+++ b/helix-front/docs/js/menu-wc_es5.js
@@ -1,48 +1,29 @@
 'use strict';
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _wrapNativeSuper(Class) { var _cache = typeof Map === "function" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== "function") { throw new TypeError("Super expression must either be null or a function"); } if (typeof _cache !== "undefined") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, ar [...]
-
 function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct.bind(); } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 function _isNativeFunction(fn) { return Function.toString.call(fn).indexOf("[native code]") !== -1; }
-
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 customElements.define('compodoc-menu', /*#__PURE__*/function (_HTMLElement) {
   _inherits(_class, _HTMLElement);
-
   var _super = _createSuper(_class);
-
   function _class() {
     var _this;
-
     _classCallCheck(this, _class);
-
     _this = _super.call(this);
     _this.isNormalMode = _this.getAttribute('mode') === 'normal';
     return _this;
   }
-
   _createClass(_class, [{
     key: "connectedCallback",
     value: function connectedCallback() {
@@ -51,10 +32,9 @@ customElements.define('compodoc-menu', /*#__PURE__*/function (_HTMLElement) {
   }, {
     key: "render",
     value: function render(isNormalMode) {
-      var tp = lithtml.html("\n        <nav>\n            <ul class=\"list\">\n                <li class=\"title\">\n                    <a href=\"index.html\" data-type=\"index-link\">helix-front documentation</a>\n                </li>\n\n                <li class=\"divider\"></li>\n                ".concat(isNormalMode ? "<div id=\"book-search-input\" role=\"search\"><input type=\"text\" placeholder=\"Type to search\"></div>" : '', "\n                <li class=\"chapter\">\n           [...]
+      var tp = lithtml.html("\n        <nav>\n            <ul class=\"list\">\n                <li class=\"title\">\n                    <a href=\"index.html\" data-type=\"index-link\">helix-front documentation</a>\n                </li>\n\n                <li class=\"divider\"></li>\n                ".concat(isNormalMode ? "<div id=\"book-search-input\" role=\"search\"><input type=\"text\" placeholder=\"Type to search\"></div>" : '', "\n                <li class=\"chapter\">\n           [...]
       this.innerHTML = tp.strings;
     }
   }]);
-
   return _class;
 }( /*#__PURE__*/_wrapNativeSuper(HTMLElement)));
\ No newline at end of file
diff --git a/helix-front/docs/js/search/search_index.js b/helix-front/docs/js/search/search_index.js
index 37913183a..34b2ab1b4 100644
--- a/helix-front/docs/js/search/search_index.js
+++ b/helix-front/docs/js/search/search_index.js
@@ -1,4 +1,4 @@
 var COMPODOC_SEARCH_INDEX = {
-    "index": {"version":"2.3.9","fields":["title","body"],"fieldVectors":[["title/components/AlertDialogComponent.html",[0,0.247,1,0.887]],["body/components/AlertDialogComponent.html",[0,0.383,1,1.481,2,1.358,3,0.111,4,0.099,5,1.017,6,1.017,7,1.017,8,1.017,9,0.099,10,6.355,11,4.66,12,2.992,13,1.399,14,1.699,15,0.987,16,2.104,17,2.104,18,1.977,19,3.242,20,1.358,21,5.099,22,1.358,23,4.461,24,0.258,25,0.878,26,3.81,27,3.81,28,0.821,29,1.83,30,0.617,31,3.243,32,0.7,33,4.461,34,0.538,35,0.012 [...]
-    "store": {"components/AlertDialogComponent.html":{"url":"components/AlertDialogComponent.html","title":"component - AlertDialogComponent","body":"\n                   \n\n\n\n\n\n  Components\n  \n  AlertDialogComponent\n\n\n\n        \n            Info\n        \n        \n            Source\n        \n        \n            Template\n        \n        \n            Styles\n        \n        \n            DOM Tree\n        \n\n\n\n    \n    File\n\n\n    src/app/shared/dialog/alert-d [...]
+    "index": {"version":"2.3.9","fields":["title","body"],"fieldVectors":[["title/components/AlertDialogComponent.html",[0,0.227,1,0.883]],["body/components/AlertDialogComponent.html",[0,0.355,1,1.482,2,1.361,3,0.11,4,0.086,5,0.965,6,1.023,7,1.023,8,1.023,9,0.098,10,6.426,11,4.723,12,3.057,13,1.444,14,1.696,15,0.994,16,2.092,17,2.092,18,1.967,19,1.507,20,1.361,21,4.774,22,1.401,23,4.535,24,0.255,25,0.86,26,3.868,27,3.868,28,0.832,29,1.879,30,0.628,31,3.312,32,0.713,33,4.535,34,0.549,35,0 [...]
+    "store": {"components/AlertDialogComponent.html":{"url":"components/AlertDialogComponent.html","title":"component - AlertDialogComponent","body":"\n                   \n\n\n\n\n\n  Components\n  \n  AlertDialogComponent\n\n\n\n        \n            Info\n        \n        \n            Source\n        \n        \n            Template\n        \n        \n            Styles\n        \n        \n            DOM Tree\n        \n\n\n\n    \n    File\n\n\n    src/app/shared/dialog/alert-d [...]
 }
diff --git a/helix-front/docs/miscellaneous/typealiases.html b/helix-front/docs/miscellaneous/typealiases.html
index 7306491ed..fb78d8f2c 100644
--- a/helix-front/docs/miscellaneous/typealiases.html
+++ b/helix-front/docs/miscellaneous/typealiases.html
@@ -60,6 +60,12 @@
             <tr>
                 <td class="col-md-4">
                     <ul class="index-list">
+                        <li>
+                            <a href="#AgentOptions" title="server/controllers/d.ts" ><b>AgentOptions</b>&nbsp;&nbsp;&nbsp;(server/.../d.ts)</a>
+                        </li>
+                        <li>
+                            <a href="#HelixRequestOptions" title="server/controllers/d.ts" ><b>HelixRequestOptions</b>&nbsp;&nbsp;&nbsp;(server/.../d.ts)</a>
+                        </li>
                         <li>
                             <a href="#IdealState" title="src/app/shared/node-viewer/node-viewer.component.ts" ><b>IdealState</b>&nbsp;&nbsp;&nbsp;(src/.../node-viewer.component.ts)</a>
                         </li>
@@ -73,7 +79,41 @@
     </table>
 </section>
 
-    <h3>src/app/shared/node-viewer/node-viewer.component.ts</h3>
+    <h3>server/controllers/d.ts</h3>
+    <section>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="AgentOptions"></a>
+                    <span class="name "><b>AgentOptions</b><a href="#AgentOptions"><span class="icon ion-ios-link"></span></a></span>
+                </td>
+            </tr>
+            <tr>
+                <td class="col-md-4">
+                    <code>    <code>literal type</code>
+</code>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="HelixRequestOptions"></a>
+                    <span class="name "><b>HelixRequestOptions</b><a href="#HelixRequestOptions"><span class="icon ion-ios-link"></span></a></span>
+                </td>
+            </tr>
+            <tr>
+                <td class="col-md-4">
+                    <code>    <code>literal type</code>
+</code>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</section>    <h3>src/app/shared/node-viewer/node-viewer.component.ts</h3>
     <section>
     <table class="table table-sm table-bordered">
         <tbody>
diff --git a/helix-front/docs/miscellaneous/variables.html b/helix-front/docs/miscellaneous/variables.html
index 89c3e59b6..8c391ba95 100644
--- a/helix-front/docs/miscellaneous/variables.html
+++ b/helix-front/docs/miscellaneous/variables.html
@@ -67,29 +67,101 @@
                             <a href="#AppRoutingModule" title="src/app/app-routing.module.ts" ><b>AppRoutingModule</b>&nbsp;&nbsp;&nbsp;(src/.../app-routing.module.ts)</a>
                         </li>
                         <li>
-                            <a href="#environment" title="src/environments/environment.ts" ><b>environment</b>&nbsp;&nbsp;&nbsp;(src/.../environment.ts)</a>
+                            <a href="#clusterName" title="src/app/workflow/workflow-list/workflow-list.stories.ts" ><b>clusterName</b>&nbsp;&nbsp;&nbsp;(src/.../workflow-list.stories.ts)</a>
+                        </li>
+                        <li>
+                            <a href="#CUSTOM_IDENTITY_TOKEN_REQUEST_BODY" title="server/config.example.ts" ><b>CUSTOM_IDENTITY_TOKEN_REQUEST_BODY</b>&nbsp;&nbsp;&nbsp;(server/.../config.example.ts)</a>
+                        </li>
+                        <li>
+                            <a href="#CUSTOM_IDENTITY_TOKEN_REQUEST_BODY" title="server/config.ts" ><b>CUSTOM_IDENTITY_TOKEN_REQUEST_BODY</b>&nbsp;&nbsp;&nbsp;(server/.../config.ts)</a>
+                        </li>
+                        <li>
+                            <a href="#Default" title="src/app/workflow/workflow-list/workflow-list.stories.ts" ><b>Default</b>&nbsp;&nbsp;&nbsp;(src/.../workflow-list.stories.ts)</a>
+                        </li>
+                        <li>
+                            <a href="#Delete" title="src/app/shared/dialog/confirm-dialog/confirm-dialog.stories.ts" ><b>Delete</b>&nbsp;&nbsp;&nbsp;(src/.../confirm-dialog.stories.ts)</a>
+                        </li>
+                        <li>
+                            <a href="#Empty" title="src/app/workflow/workflow-list/workflow-list.stories.ts" ><b>Empty</b>&nbsp;&nbsp;&nbsp;(src/.../workflow-list.stories.ts)</a>
                         </li>
                         <li>
                             <a href="#environment" title="src/environments/environment.prod.ts" ><b>environment</b>&nbsp;&nbsp;&nbsp;(src/.../environment.prod.ts)</a>
                         </li>
+                        <li>
+                            <a href="#environment" title="src/environments/environment.ts" ><b>environment</b>&nbsp;&nbsp;&nbsp;(src/.../environment.ts)</a>
+                        </li>
+                        <li>
+                            <a href="#HELIX_ENDPOINTS" title="server/config.example.ts" ><b>HELIX_ENDPOINTS</b>&nbsp;&nbsp;&nbsp;(server/.../config.example.ts)</a>
+                        </li>
                         <li>
                             <a href="#HELIX_ENDPOINTS" title="server/config.ts" ><b>HELIX_ENDPOINTS</b>&nbsp;&nbsp;&nbsp;(server/.../config.ts)</a>
                         </li>
                         <li>
                             <a href="#HelperServiceStub" title="src/testing/stubs.ts" ><b>HelperServiceStub</b>&nbsp;&nbsp;&nbsp;(src/.../stubs.ts)</a>
                         </li>
+                        <li>
+                            <a href="#IDENTITY_TOKEN_SOURCE" title="server/config.example.ts" ><b>IDENTITY_TOKEN_SOURCE</b>&nbsp;&nbsp;&nbsp;(server/.../config.example.ts)</a>
+                        </li>
+                        <li>
+                            <a href="#IDENTITY_TOKEN_SOURCE" title="server/config.ts" ><b>IDENTITY_TOKEN_SOURCE</b>&nbsp;&nbsp;&nbsp;(server/.../config.ts)</a>
+                        </li>
+                        <li>
+                            <a href="#LDAP" title="server/config.example.ts" ><b>LDAP</b>&nbsp;&nbsp;&nbsp;(server/.../config.example.ts)</a>
+                        </li>
                         <li>
                             <a href="#LDAP" title="server/config.ts" ><b>LDAP</b>&nbsp;&nbsp;&nbsp;(server/.../config.ts)</a>
                         </li>
+                        <li>
+                            <a href="#Leader" title="src/app/shared/state-label/state-label.stories.ts" ><b>Leader</b>&nbsp;&nbsp;&nbsp;(src/.../state-label.stories.ts)</a>
+                        </li>
+                        <li>
+                            <a href="#Loading" title="src/app/workflow/workflow-list/workflow-list.stories.ts" ><b>Loading</b>&nbsp;&nbsp;&nbsp;(src/.../workflow-list.stories.ts)</a>
+                        </li>
+                        <li>
+                            <a href="#Offline" title="src/app/shared/state-label/state-label.stories.ts" ><b>Offline</b>&nbsp;&nbsp;&nbsp;(src/.../state-label.stories.ts)</a>
+                        </li>
                         <li>
                             <a href="#server" title="server/app.ts" ><b>server</b>&nbsp;&nbsp;&nbsp;(server/.../app.ts)</a>
                         </li>
+                        <li>
+                            <a href="#SESSION_STORE" title="server/config.example.ts" ><b>SESSION_STORE</b>&nbsp;&nbsp;&nbsp;(server/.../config.example.ts)</a>
+                        </li>
                         <li>
                             <a href="#SESSION_STORE" title="server/config.ts" ><b>SESSION_STORE</b>&nbsp;&nbsp;&nbsp;(server/.../config.ts)</a>
                         </li>
+                        <li>
+                            <a href="#SSL" title="server/config.example.ts" ><b>SSL</b>&nbsp;&nbsp;&nbsp;(server/.../config.example.ts)</a>
+                        </li>
                         <li>
                             <a href="#SSL" title="server/config.ts" ><b>SSL</b>&nbsp;&nbsp;&nbsp;(server/.../config.ts)</a>
                         </li>
+                        <li>
+                            <a href="#Standby" title="src/app/shared/state-label/state-label.stories.ts" ><b>Standby</b>&nbsp;&nbsp;&nbsp;(src/.../state-label.stories.ts)</a>
+                        </li>
+                        <li>
+                            <a href="#Template" title="src/app/shared/state-label/state-label.stories.ts" ><b>Template</b>&nbsp;&nbsp;&nbsp;(src/.../state-label.stories.ts)</a>
+                        </li>
+                        <li>
+                            <a href="#Template" title="src/app/workflow/workflow-list/workflow-list.stories.ts" ><b>Template</b>&nbsp;&nbsp;&nbsp;(src/.../workflow-list.stories.ts)</a>
+                        </li>
+                        <li>
+                            <a href="#Template" title="src/app/shared/dialog/confirm-dialog/confirm-dialog.stories.ts" ><b>Template</b>&nbsp;&nbsp;&nbsp;(src/.../confirm-dialog.stories.ts)</a>
+                        </li>
+                        <li>
+                            <a href="#TOKEN_EXPIRATION_KEY" title="server/config.example.ts" ><b>TOKEN_EXPIRATION_KEY</b>&nbsp;&nbsp;&nbsp;(server/.../config.example.ts)</a>
+                        </li>
+                        <li>
+                            <a href="#TOKEN_EXPIRATION_KEY" title="server/config.ts" ><b>TOKEN_EXPIRATION_KEY</b>&nbsp;&nbsp;&nbsp;(server/.../config.ts)</a>
+                        </li>
+                        <li>
+                            <a href="#TOKEN_RESPONSE_KEY" title="server/config.example.ts" ><b>TOKEN_RESPONSE_KEY</b>&nbsp;&nbsp;&nbsp;(server/.../config.example.ts)</a>
+                        </li>
+                        <li>
+                            <a href="#TOKEN_RESPONSE_KEY" title="server/config.ts" ><b>TOKEN_RESPONSE_KEY</b>&nbsp;&nbsp;&nbsp;(server/.../config.ts)</a>
+                        </li>
+                        <li>
+                            <a href="#workflowRows" title="src/app/workflow/workflow-list/workflow-list.stories.ts" ><b>workflowRows</b>&nbsp;&nbsp;&nbsp;(src/.../workflow-list.stories.ts)</a>
+                        </li>
                     </ul>
                 </td>
             </tr>
@@ -169,65 +241,150 @@
         </tbody>
     </table>
 </section>
-    <h3>src/environments/environment.ts</h3>
+    <h3>src/app/workflow/workflow-list/workflow-list.stories.ts</h3>
     <section>
     <h3></h3>    <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="environment"></a>
+                    <a name="clusterName"></a>
                     <span class="name">
-                        <span ><b>environment</b></span>
-                        <a href="#environment"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>clusterName</b></span>
+                        <a href="#clusterName"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/object" target="_blank" >object</a></code>
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>{
-  production: false,
-  piwik: {
-    url: &#x27;//vxu-ld1.linkedin.biz/piwik/&#x27;,
-    id: &#x27;3&#x27;,
+                        <i>Default value : </i><code>&#x27;cluster1&#x27;</code>
+                    </td>
+                </tr>
+
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="Default"></a>
+                    <span class="name">
+                        <span ><b>Default</b></span>
+                        <a href="#Default"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>Template.bind({})</code>
+                    </td>
+                </tr>
+
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="Empty"></a>
+                    <span class="name">
+                        <span ><b>Empty</b></span>
+                        <a href="#Empty"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>Template.bind({})</code>
+                    </td>
+                </tr>
+
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="Loading"></a>
+                    <span class="name">
+                        <span ><b>Loading</b></span>
+                        <a href="#Loading"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>Template.bind({})</code>
+                    </td>
+                </tr>
+
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="Template"></a>
+                    <span class="name">
+                        <span ><b>Template</b></span>
+                        <a href="#Template"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>Story</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>(args: any) &#x3D;&gt; ({
+  props: {
+    ...args,
   },
-}</code>
+  template: &#x60;
+  &lt;div&gt;Workflow List&lt;/div&gt;
+  &lt;span&gt;There&#x27;s no workflow here.&lt;/span&gt;
+  &lt;hi-workflow-list [workflowRows]&#x3D;&quot;workflowRows&quot; [clusterName]&#x3D;&quot;clusterName&quot; [isLoading]&#x3D;&quot;isLoading&quot;&gt;&lt;/hi-workflow-list&gt;
+   &lt;router-outlet&gt;&lt;/router-outlet&gt;
+&#x60;,
+})</code>
                     </td>
                 </tr>
 
 
         </tbody>
     </table>
-</section>
-    <h3>src/environments/environment.prod.ts</h3>
-    <section>
-    <h3></h3>    <table class="table table-sm table-bordered">
+    <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="environment"></a>
+                    <a name="workflowRows"></a>
                     <span class="name">
-                        <span ><b>environment</b></span>
-                        <a href="#environment"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>workflowRows</b></span>
+                        <a href="#workflowRows"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/object" target="_blank" >object</a></code>
+                        <i>Type : </i>    <code>[]</code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>{
-  production: true,
-}</code>
+                        <i>Default value : </i><code>[{ name: &#x27;workflow1&#x27; }]</code>
                     </td>
                 </tr>
 
@@ -235,9 +392,43 @@
         </tbody>
     </table>
 </section>
-    <h3>server/config.ts</h3>
+    <h3>server/config.example.ts</h3>
     <section>
     <h3></h3>    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="CUSTOM_IDENTITY_TOKEN_REQUEST_BODY"></a>
+                    <span class="name">
+                        <span ><b>CUSTOM_IDENTITY_TOKEN_REQUEST_BODY</b></span>
+                        <a href="#CUSTOM_IDENTITY_TOKEN_REQUEST_BODY"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>{}</code>
+                    </td>
+                </tr>
+
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Any custom object that you would like
+to include in the body of the request
+to your custom identity source.</p>
+</div>
+                </td>
+            </tr>
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
@@ -269,6 +460,41 @@
 
         </tbody>
     </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="IDENTITY_TOKEN_SOURCE"></a>
+                    <span class="name">
+                        <span ><b>IDENTITY_TOKEN_SOURCE</b></span>
+                        <a href="#IDENTITY_TOKEN_SOURCE"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>string | undefined</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>undefined</code>
+                    </td>
+                </tr>
+
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>The url of your Identity Token API.
+This an API that should expect LDAP credentials
+and if the LDAP credentials are valid
+respond with a unique token of some kind.</p>
+</div>
+                </td>
+            </tr>
+
+        </tbody>
+    </table>
     <table class="table table-sm table-bordered">
         <tbody>
             <tr>
@@ -350,32 +576,476 @@
                 </tr>
 
 
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="TOKEN_EXPIRATION_KEY"></a>
+                    <span class="name">
+                        <span ><b>TOKEN_EXPIRATION_KEY</b></span>
+                        <a href="#TOKEN_EXPIRATION_KEY"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>&#x27;expires&#x27;</code>
+                    </td>
+                </tr>
+
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>This is the key that helix-front uses
+to access the token expiration datetime</p>
+</div>
+                </td>
+            </tr>
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="TOKEN_RESPONSE_KEY"></a>
+                    <span class="name">
+                        <span ><b>TOKEN_RESPONSE_KEY</b></span>
+                        <a href="#TOKEN_RESPONSE_KEY"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>&#x27;token&#x27;</code>
+                    </td>
+                </tr>
+
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>This is the key that helix-front uses
+to access the token itself
+from the custom identity token response
+sent by your Identity Token API.</p>
+</div>
+                </td>
+            </tr>
+
         </tbody>
     </table>
 </section>
-    <h3>src/testing/stubs.ts</h3>
+    <h3>server/config.ts</h3>
     <section>
     <h3></h3>    <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="HelperServiceStub"></a>
+                    <a name="CUSTOM_IDENTITY_TOKEN_REQUEST_BODY"></a>
                     <span class="name">
-                        <span ><b>HelperServiceStub</b></span>
-                        <a href="#HelperServiceStub"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>CUSTOM_IDENTITY_TOKEN_REQUEST_BODY</b></span>
+                        <a href="#CUSTOM_IDENTITY_TOKEN_REQUEST_BODY"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/object" target="_blank" >object</a></code>
+                        <i>Type : </i>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>{
-  showError: (message: string) &#x3D;&gt; {},
+                        <i>Default value : </i><code>{}</code>
+                    </td>
+                </tr>
+
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Any custom object that you would like
+to include in the body of the request
+to your custom identity source.</p>
+</div>
+                </td>
+            </tr>
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="HELIX_ENDPOINTS"></a>
+                    <span class="name">
+                        <span ><b>HELIX_ENDPOINTS</b></span>
+                        <a href="#HELIX_ENDPOINTS"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/object" target="_blank" >object</a></code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>{
+  helix: [
+    {
+      default: &#x27;http://localhost:8100/admin/v2&#x27;,
+    },
+  ],
+}</code>
+                    </td>
+                </tr>
+
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="IDENTITY_TOKEN_SOURCE"></a>
+                    <span class="name">
+                        <span ><b>IDENTITY_TOKEN_SOURCE</b></span>
+                        <a href="#IDENTITY_TOKEN_SOURCE"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>string | undefined</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>undefined</code>
+                    </td>
+                </tr>
+
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>The url of your Identity Token API.
+This an API that should expect LDAP credentials
+and if the LDAP credentials are valid
+respond with a unique token of some kind.</p>
+</div>
+                </td>
+            </tr>
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="LDAP"></a>
+                    <span class="name">
+                        <span ><b>LDAP</b></span>
+                        <a href="#LDAP"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/object" target="_blank" >object</a></code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>{
+  uri: &#x27;ldap://example.com&#x27;,
+  base: &#x27;DC&#x3D;example,DC&#x3D;com&#x27;,
+  principalSuffix: &#x27;@example.com&#x27;,
+  adminGroup: &#x27;admin&#x27;,
+}</code>
+                    </td>
+                </tr>
+
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="SESSION_STORE"></a>
+                    <span class="name">
+                        <span ><b>SESSION_STORE</b></span>
+                        <a href="#SESSION_STORE"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>undefined</code>
+                    </td>
+                </tr>
+
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="SSL"></a>
+                    <span class="name">
+                        <span ><b>SSL</b></span>
+                        <a href="#SSL"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/object" target="_blank" >object</a></code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>{
+  port: 0,
+  keyfile: &#x27;&#x27;,
+  certfile: &#x27;&#x27;,
+  passfile: &#x27;&#x27;,
+  cafiles: [],
+}</code>
+                    </td>
+                </tr>
+
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="TOKEN_EXPIRATION_KEY"></a>
+                    <span class="name">
+                        <span ><b>TOKEN_EXPIRATION_KEY</b></span>
+                        <a href="#TOKEN_EXPIRATION_KEY"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>&#x27;expires&#x27;</code>
+                    </td>
+                </tr>
+
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>This is the key that helix-front uses
+to access the token expiration datetime</p>
+</div>
+                </td>
+            </tr>
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="TOKEN_RESPONSE_KEY"></a>
+                    <span class="name">
+                        <span ><b>TOKEN_RESPONSE_KEY</b></span>
+                        <a href="#TOKEN_RESPONSE_KEY"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>&#x27;token&#x27;</code>
+                    </td>
+                </tr>
+
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>This is the key that helix-front uses
+to access the token itself
+from the custom identity token response
+sent by your Identity Token API.</p>
+</div>
+                </td>
+            </tr>
+
+        </tbody>
+    </table>
+</section>
+    <h3>src/app/shared/dialog/confirm-dialog/confirm-dialog.stories.ts</h3>
+    <section>
+    <h3></h3>    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="Delete"></a>
+                    <span class="name">
+                        <span ><b>Delete</b></span>
+                        <a href="#Delete"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>Template.bind({})</code>
+                    </td>
+                </tr>
+
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="Template"></a>
+                    <span class="name">
+                        <span ><b>Template</b></span>
+                        <a href="#Template"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>Story</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>(args) &#x3D;&gt; ({
+  component: ConfirmDialogTestComponent,
+  template: &#x60;&lt;hi-confirm-dialog-test [data]&#x3D;&quot;data&quot;&gt;&lt;/hi-confirm-dialog-test&gt;&#x60;,
+  props: {
+    ...args,
+  },
+})</code>
+                    </td>
+                </tr>
+
+
+        </tbody>
+    </table>
+</section>
+    <h3>src/environments/environment.prod.ts</h3>
+    <section>
+    <h3></h3>    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="environment"></a>
+                    <span class="name">
+                        <span ><b>environment</b></span>
+                        <a href="#environment"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/object" target="_blank" >object</a></code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>{
+  production: true,
+}</code>
+                    </td>
+                </tr>
+
+
+        </tbody>
+    </table>
+</section>
+    <h3>src/environments/environment.ts</h3>
+    <section>
+    <h3></h3>    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="environment"></a>
+                    <span class="name">
+                        <span ><b>environment</b></span>
+                        <a href="#environment"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/object" target="_blank" >object</a></code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>{
+  production: false,
+  piwik: {
+    url: &#x27;//vxu-ld1.linkedin.biz/piwik/&#x27;,
+    id: &#x27;3&#x27;,
+  },
+}</code>
+                    </td>
+                </tr>
+
+
+        </tbody>
+    </table>
+</section>
+    <h3>src/testing/stubs.ts</h3>
+    <section>
+    <h3></h3>    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="HelperServiceStub"></a>
+                    <span class="name">
+                        <span ><b>HelperServiceStub</b></span>
+                        <a href="#HelperServiceStub"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/object" target="_blank" >object</a></code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>{
+  showError: (message: string) &#x3D;&gt; {},
   showSnackBar: (message: string) &#x3D;&gt; {},
   showConfirmation: (message: string): Promise&lt;boolean&gt; &#x3D;&gt;
     new Promise&lt;boolean&gt;((f) &#x3D;&gt; f(false)),
@@ -384,6 +1054,102 @@
                 </tr>
 
 
+        </tbody>
+    </table>
+</section>
+    <h3>src/app/shared/state-label/state-label.stories.ts</h3>
+    <section>
+    <h3></h3>    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="Leader"></a>
+                    <span class="name">
+                        <span ><b>Leader</b></span>
+                        <a href="#Leader"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>Template.bind({})</code>
+                    </td>
+                </tr>
+
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="Offline"></a>
+                    <span class="name">
+                        <span ><b>Offline</b></span>
+                        <a href="#Offline"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>Template.bind({})</code>
+                    </td>
+                </tr>
+
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="Standby"></a>
+                    <span class="name">
+                        <span ><b>Standby</b></span>
+                        <a href="#Standby"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>Template.bind({})</code>
+                    </td>
+                </tr>
+
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="Template"></a>
+                    <span class="name">
+                        <span ><b>Template</b></span>
+                        <a href="#Template"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>Story</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>(args: any) &#x3D;&gt; ({
+  props: {
+    ...args,
+  },
+  template: &#x60;
+  &lt;hi-state-label [state]&#x3D;&quot;state&quot; [isReady]&#x3D;&quot;isReady&quot;&gt;&lt;/hi-state-label&gt;
+  &#x60;,
+})</code>
+                    </td>
+                </tr>
+
+
         </tbody>
     </table>
 </section>
diff --git a/helix-front/docs/overview.html b/helix-front/docs/overview.html
index 8c7067859..d41a0e490 100644
--- a/helix-front/docs/overview.html
+++ b/helix-front/docs/overview.html
@@ -1094,7 +1094,7 @@
             <div class="card text-center">
                 <div class="card-block">
                     <h4 class="card-title"><span class="icon ion-md-cog"></span></h4>
-                    <p class="card-text">33 Components</p>
+                    <p class="card-text">34 Components</p>
                 </div>
             </div>
         </div>
@@ -1134,7 +1134,7 @@
             <div class="card text-center">
                 <div class="card-block">
                     <h4 class="card-title"><span class="icon ion-md-information-circle-outline"></span></h4>
-                    <p class="card-text">6 Interfaces</p>
+                    <p class="card-text">7 Interfaces</p>
                 </div>
             </div>
         </div>
diff --git a/helix-front/docs/properties.html b/helix-front/docs/properties.html
index b00b032a7..29f9f63d9 100644
--- a/helix-front/docs/properties.html
+++ b/helix-front/docs/properties.html
@@ -51,7 +51,7 @@
     </ol>
     <ul class="properties-list">
         <li>
-            <b>Version</b> : 1.2.1</li>
+            <b>Version</b> : 1.4.1</li>
         <li>
             <b>Keywords</b> : helix, ui</li>
         <li>
@@ -59,7 +59,7 @@
         <li>
             <b>Repository</b> : https://github.com/apache/helix.git</li>
         <li>
-            <b>Author</b> : Vivo Xu <xu...@xuxu.name></li>
+            <b>Author</b> : Vivo Xu <gi...@vivoxu.com></li>
     </ul>
 
 
diff --git a/helix-front/documentation.json b/helix-front/documentation.json
index 14b5e1a02..7050ea58a 100644
--- a/helix-front/documentation.json
+++ b/helix-front/documentation.json
@@ -1,14 +1,38 @@
 {
     "pipes": [],
     "interfaces": [
+        {
+            "name": "HelixRequest",
+            "id": "interface-HelixRequest-75cdd56f58bc639681072e593c0effa7c1ccba2af537b2a4b93746aa3f1d35e729428000225a04219b1b7ac5ba4629dc5d80383e2b93e47950307e8bff7fffa8",
+            "file": "server/controllers/d.ts",
+            "deprecated": false,
+            "deprecationMessage": "",
+            "type": "interface",
+            "sourceCode": "import { Request } from 'express';\nimport request from 'request';\n\nexport interface HelixRequest extends Request {\n  session?: HelixSession;\n}\n\ninterface HelixSession {\n  // since this token is from a configurable\n  // identity source, the format really is\n  // `any` from helix-front's point of view.\n  identityToken: any;\n  username: string;\n  isAdmin: boolean;\n}\n\ntype AgentOptions = {\n  rejectUnauthorized: boolean;\n  ca?: string;\n};\n\nexpor [...]
+            "properties": [
+                {
+                    "name": "session",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "HelixSession",
+                    "optional": true,
+                    "description": "",
+                    "line": 5
+                }
+            ],
+            "indexSignatures": [],
+            "kind": 165,
+            "methods": [],
+            "extends": "Request"
+        },
         {
             "name": "HelixSession",
-            "id": "interface-HelixSession-1d5c4ab566de85237551f45f493e21719366587b74c3cbe29150e24a8b98c8d99fcfbc92dc9e5660b74dbd8c2e762d623e02620e1ce4d21c1e253f925a5e8d3a",
+            "id": "interface-HelixSession-75cdd56f58bc639681072e593c0effa7c1ccba2af537b2a4b93746aa3f1d35e729428000225a04219b1b7ac5ba4629dc5d80383e2b93e47950307e8bff7fffa8",
             "file": "server/controllers/d.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import { Request } from 'express';\n\nexport interface HelixUserRequest extends Request {\n  session?: HelixSession;\n}\n\ninterface HelixSession {\n  // since this token is from a configurable\n  // identity source, the format really is\n  // `any` from helix-front's point of view.\n  identityToken: any;\n  username: string;\n  isAdmin: boolean;\n}\n",
+            "sourceCode": "import { Request } from 'express';\nimport request from 'request';\n\nexport interface HelixRequest extends Request {\n  session?: HelixSession;\n}\n\ninterface HelixSession {\n  // since this token is from a configurable\n  // identity source, the format really is\n  // `any` from helix-front's point of view.\n  identityToken: any;\n  username: string;\n  isAdmin: boolean;\n}\n\ntype AgentOptions = {\n  rejectUnauthorized: boolean;\n  ca?: string;\n};\n\nexpor [...]
             "properties": [
                 {
                     "name": "identityToken",
@@ -17,7 +41,7 @@
                     "type": "any",
                     "optional": false,
                     "description": "",
-                    "line": 11
+                    "line": 12
                 },
                 {
                     "name": "isAdmin",
@@ -26,7 +50,7 @@
                     "type": "boolean",
                     "optional": false,
                     "description": "",
-                    "line": 13
+                    "line": 14
                 },
                 {
                     "name": "username",
@@ -35,37 +59,13 @@
                     "type": "string",
                     "optional": false,
                     "description": "",
-                    "line": 12
+                    "line": 13
                 }
             ],
             "indexSignatures": [],
             "kind": 165,
             "methods": []
         },
-        {
-            "name": "HelixUserRequest",
-            "id": "interface-HelixUserRequest-1d5c4ab566de85237551f45f493e21719366587b74c3cbe29150e24a8b98c8d99fcfbc92dc9e5660b74dbd8c2e762d623e02620e1ce4d21c1e253f925a5e8d3a",
-            "file": "server/controllers/d.ts",
-            "deprecated": false,
-            "deprecationMessage": "",
-            "type": "interface",
-            "sourceCode": "import { Request } from 'express';\n\nexport interface HelixUserRequest extends Request {\n  session?: HelixSession;\n}\n\ninterface HelixSession {\n  // since this token is from a configurable\n  // identity source, the format really is\n  // `any` from helix-front's point of view.\n  identityToken: any;\n  username: string;\n  isAdmin: boolean;\n}\n",
-            "properties": [
-                {
-                    "name": "session",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "HelixSession",
-                    "optional": true,
-                    "description": "",
-                    "line": 4
-                }
-            ],
-            "indexSignatures": [],
-            "kind": 165,
-            "methods": [],
-            "extends": "Request"
-        },
         {
             "name": "IReplica",
             "id": "interface-IReplica-c368277d55c3a276a0743ee15fa8b9d77b202780d749de8a9363f93aaa5331e3afffe77b25bc9fff5156b0be913836c0d7e13b89ebf930d53338f495b6b84e94",
@@ -109,12 +109,12 @@
         },
         {
             "name": "ListFieldObject",
-            "id": "interface-ListFieldObject-4b8fff68ba7ccb7a14a733c002190a7e5c760999f3a699168565ddeecf085df759c8918b7b69b728e480ecdbd894c972284cbe97c29ad2413b6f9ffed799247d",
+            "id": "interface-ListFieldObject-9a579c751dc9ff03063f99c75efe170bbfd4d7dd827c0bcb47ce7e303f211f158d9908ef90c5b54f79dfd5d45ff2c7f95357eccbc3453011fcd26d9e597b9a2c",
             "file": "src/app/shared/models/node.model.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import * as _ from 'lodash';\n\ninterface SimpleFieldObject {\n  name: string;\n  value: string;\n}\n\ninterface ListFieldObject {\n  name: string;\n  value: SimpleFieldObject[];\n}\n\ninterface MapFieldObject {\n  name: string;\n  value: SimpleFieldObject[];\n}\n\ninterface Payload {\n  id: string;\n  simpleFields?: any;\n  listFields?: any;\n  mapFields?: any;\n}\n\n// This is a typical Helix Node definition\nexport class Node {\n  id: string;\n  simpleFields [...]
+            "sourceCode": "import * as _ from 'lodash';\n\ninterface SimpleFieldObject {\n  name: string;\n  value: string;\n}\n\ninterface ListFieldObject {\n  name: string;\n  value: SimpleFieldObject[];\n}\n\ninterface MapFieldObject {\n  name: string;\n  value: SimpleFieldObject[];\n}\n\ninterface Payload {\n  id: string;\n  simpleFields?: any;\n  listFields?: any;\n  mapFields?: any;\n}\n\n// This is a typical Helix Node definition\nexport class Node {\n  id: string;\n  simpleFields [...]
             "properties": [
                 {
                     "name": "name",
@@ -141,12 +141,12 @@
         },
         {
             "name": "MapFieldObject",
-            "id": "interface-MapFieldObject-4b8fff68ba7ccb7a14a733c002190a7e5c760999f3a699168565ddeecf085df759c8918b7b69b728e480ecdbd894c972284cbe97c29ad2413b6f9ffed799247d",
+            "id": "interface-MapFieldObject-9a579c751dc9ff03063f99c75efe170bbfd4d7dd827c0bcb47ce7e303f211f158d9908ef90c5b54f79dfd5d45ff2c7f95357eccbc3453011fcd26d9e597b9a2c",
             "file": "src/app/shared/models/node.model.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import * as _ from 'lodash';\n\ninterface SimpleFieldObject {\n  name: string;\n  value: string;\n}\n\ninterface ListFieldObject {\n  name: string;\n  value: SimpleFieldObject[];\n}\n\ninterface MapFieldObject {\n  name: string;\n  value: SimpleFieldObject[];\n}\n\ninterface Payload {\n  id: string;\n  simpleFields?: any;\n  listFields?: any;\n  mapFields?: any;\n}\n\n// This is a typical Helix Node definition\nexport class Node {\n  id: string;\n  simpleFields [...]
+            "sourceCode": "import * as _ from 'lodash';\n\ninterface SimpleFieldObject {\n  name: string;\n  value: string;\n}\n\ninterface ListFieldObject {\n  name: string;\n  value: SimpleFieldObject[];\n}\n\ninterface MapFieldObject {\n  name: string;\n  value: SimpleFieldObject[];\n}\n\ninterface Payload {\n  id: string;\n  simpleFields?: any;\n  listFields?: any;\n  mapFields?: any;\n}\n\n// This is a typical Helix Node definition\nexport class Node {\n  id: string;\n  simpleFields [...]
             "properties": [
                 {
                     "name": "name",
@@ -173,12 +173,12 @@
         },
         {
             "name": "Payload",
-            "id": "interface-Payload-4b8fff68ba7ccb7a14a733c002190a7e5c760999f3a699168565ddeecf085df759c8918b7b69b728e480ecdbd894c972284cbe97c29ad2413b6f9ffed799247d",
+            "id": "interface-Payload-9a579c751dc9ff03063f99c75efe170bbfd4d7dd827c0bcb47ce7e303f211f158d9908ef90c5b54f79dfd5d45ff2c7f95357eccbc3453011fcd26d9e597b9a2c",
             "file": "src/app/shared/models/node.model.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import * as _ from 'lodash';\n\ninterface SimpleFieldObject {\n  name: string;\n  value: string;\n}\n\ninterface ListFieldObject {\n  name: string;\n  value: SimpleFieldObject[];\n}\n\ninterface MapFieldObject {\n  name: string;\n  value: SimpleFieldObject[];\n}\n\ninterface Payload {\n  id: string;\n  simpleFields?: any;\n  listFields?: any;\n  mapFields?: any;\n}\n\n// This is a typical Helix Node definition\nexport class Node {\n  id: string;\n  simpleFields [...]
+            "sourceCode": "import * as _ from 'lodash';\n\ninterface SimpleFieldObject {\n  name: string;\n  value: string;\n}\n\ninterface ListFieldObject {\n  name: string;\n  value: SimpleFieldObject[];\n}\n\ninterface MapFieldObject {\n  name: string;\n  value: SimpleFieldObject[];\n}\n\ninterface Payload {\n  id: string;\n  simpleFields?: any;\n  listFields?: any;\n  mapFields?: any;\n}\n\n// This is a typical Helix Node definition\nexport class Node {\n  id: string;\n  simpleFields [...]
             "properties": [
                 {
                     "name": "id",
@@ -223,12 +223,12 @@
         },
         {
             "name": "SimpleFieldObject",
-            "id": "interface-SimpleFieldObject-4b8fff68ba7ccb7a14a733c002190a7e5c760999f3a699168565ddeecf085df759c8918b7b69b728e480ecdbd894c972284cbe97c29ad2413b6f9ffed799247d",
+            "id": "interface-SimpleFieldObject-9a579c751dc9ff03063f99c75efe170bbfd4d7dd827c0bcb47ce7e303f211f158d9908ef90c5b54f79dfd5d45ff2c7f95357eccbc3453011fcd26d9e597b9a2c",
             "file": "src/app/shared/models/node.model.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import * as _ from 'lodash';\n\ninterface SimpleFieldObject {\n  name: string;\n  value: string;\n}\n\ninterface ListFieldObject {\n  name: string;\n  value: SimpleFieldObject[];\n}\n\ninterface MapFieldObject {\n  name: string;\n  value: SimpleFieldObject[];\n}\n\ninterface Payload {\n  id: string;\n  simpleFields?: any;\n  listFields?: any;\n  mapFields?: any;\n}\n\n// This is a typical Helix Node definition\nexport class Node {\n  id: string;\n  simpleFields [...]
+            "sourceCode": "import * as _ from 'lodash';\n\ninterface SimpleFieldObject {\n  name: string;\n  value: string;\n}\n\ninterface ListFieldObject {\n  name: string;\n  value: SimpleFieldObject[];\n}\n\ninterface MapFieldObject {\n  name: string;\n  value: SimpleFieldObject[];\n}\n\ninterface Payload {\n  id: string;\n  simpleFields?: any;\n  listFields?: any;\n  mapFields?: any;\n}\n\n// This is a typical Helix Node definition\nexport class Node {\n  id: string;\n  simpleFields [...]
             "properties": [
                 {
                     "name": "name",
@@ -2467,7 +2467,7 @@
         },
         {
             "name": "HelperService",
-            "id": "injectable-HelperService-260f75c0868c1437c527847fe3fb6e12cb0b8074436cea09c1529bcee3274b19a7dfeb2f893bccf5ca56f862aa02892c24b387af93bb9f414971ce8d44beb90a",
+            "id": "injectable-HelperService-78f7b16aa1126cfdcb732f98106aeca50cabf9c533da6d678fa074bd5eb9416856852ea358598d7cee135fb02a055d94872ed1648c8b65111b8a67ce96ec9a42",
             "file": "src/app/shared/helper.service.ts",
             "properties": [],
             "methods": [
@@ -2510,6 +2510,20 @@
                             "type": "string | object",
                             "deprecated": false,
                             "deprecationMessage": ""
+                        },
+                        {
+                            "name": "title",
+                            "type": "string",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "optional": true
+                        },
+                        {
+                            "name": "confirmButtonText",
+                            "type": "string",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "optional": true
                         }
                     ],
                     "optional": false,
@@ -2527,6 +2541,26 @@
                             "tagName": {
                                 "text": "param"
                             }
+                        },
+                        {
+                            "name": "title",
+                            "type": "string",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "optional": true,
+                            "tagName": {
+                                "text": "param"
+                            }
+                        },
+                        {
+                            "name": "confirmButtonText",
+                            "type": "string",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "optional": true,
+                            "tagName": {
+                                "text": "param"
+                            }
                         }
                     ]
                 },
@@ -2591,7 +2625,7 @@
             "deprecationMessage": "",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { Injectable } from '@angular/core';\nimport { MatDialog } from '@angular/material/dialog';\nimport { MatSnackBar } from '@angular/material/snack-bar';\n\nimport { AlertDialogComponent } from './dialog/alert-dialog/alert-dialog.component';\nimport { ConfirmDialogComponent } from './dialog/confirm-dialog/confirm-dialog.component';\n\n@Injectable()\nexport class HelperService {\n  constructor(protected snackBar: MatSnackBar, protected dialog: MatDialog) {} [...]
+            "sourceCode": "import { Injectable } from '@angular/core';\nimport { MatDialog } from '@angular/material/dialog';\nimport { MatSnackBar } from '@angular/material/snack-bar';\n\nimport { AlertDialogComponent } from './dialog/alert-dialog/alert-dialog.component';\nimport { ConfirmDialogComponent } from './dialog/confirm-dialog/confirm-dialog.component';\n\n@Injectable()\nexport class HelperService {\n  constructor(protected snackBar: MatSnackBar, protected dialog: MatDialog) {} [...]
             "constructorObj": {
                 "name": "constructor",
                 "description": "",
@@ -3901,7 +3935,7 @@
         },
         {
             "name": "ResourceService",
-            "id": "injectable-ResourceService-965385bc6c6b989b9dc6bced9fbc30c88fb1fed7ba53ba829bc79608c8178e26b3fd13644d210fb99addc130325bcaa10b36f007f0604294525801d98b0d3869",
+            "id": "injectable-ResourceService-d7fa0780b63fe6ffeb56522e7f59c8396d8b73e5d908c3224cdf4c382d0c68d3cf619098234bf3acc62847eeff9e4c1b55e941ebc17512fb7fd744381d335918",
             "file": "src/app/resource/shared/resource.service.ts",
             "properties": [],
             "methods": [
@@ -4558,7 +4592,7 @@
             "deprecationMessage": "",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { map } from 'rxjs/operators';\nimport { Injectable } from '@angular/core';\n\nimport * as _ from 'lodash';\n\nimport { IdealState } from '../../shared/node-viewer/node-viewer.component';\nimport { HelixService } from '../../core/helix.service';\nimport { Resource } from './resource.model';\n\n@Injectable()\nexport class ResourceService extends HelixService {\n  public getAll(clusterName: string) {\n    return this.request(`/clusters/${clusterName}/resou [...]
+            "sourceCode": "import { map } from 'rxjs/operators';\nimport { Injectable } from '@angular/core';\n\nimport * as _ from 'lodash';\n\nimport { IdealState } from '../../shared/node-viewer/node-viewer.component';\nimport { HelixService } from '../../core/helix.service';\nimport { Resource } from './resource.model';\n\n@Injectable()\nexport class ResourceService extends HelixService {\n  public getAll(clusterName: string) {\n    return this.request(`/clusters/${clusterName}/resou [...]
             "extends": "HelixService",
             "type": "injectable"
         },
@@ -5580,12 +5614,12 @@
         },
         {
             "name": "HelixCtrl",
-            "id": "class-HelixCtrl-b66c5fede44bb07c635bc61e76737e06e83c42991391cea8209cab75928ce9f08d9d4243df1c9c31ae601f24c1f0c0dd850d87175204f95382e95611f51bc9e8",
+            "id": "class-HelixCtrl-5ea8b5cb0aae1dbdc946600b8fbf894ff871be85d84f8a486813da2ddc8aa838fbcce31f41a64d71a36c7f7cd7c34e37452a65b83ab2a88beb930712e9f26d41",
             "file": "server/controllers/helix.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "class",
-            "sourceCode": "import { Request, Response, Router } from 'express';\n\nimport * as request from 'request';\n\nimport { HELIX_ENDPOINTS, IDENTITY_TOKEN_SOURCE } from '../config';\nimport { HelixUserRequest } from './d';\n\nexport class HelixCtrl {\n  static readonly ROUTE_PREFIX = '/api/helix';\n\n  constructor(router: Router) {\n    router.route('/helix/list').get(this.list);\n    router.route('/helix/*').all(this.proxy);\n  }\n\n  protected proxy(req: HelixUserRequest, res:  [...]
+            "sourceCode": "import { Request, Response, Router } from 'express';\nimport * as request from 'request';\nimport { readFileSync } from 'fs';\n\nimport { HELIX_ENDPOINTS, IDENTITY_TOKEN_SOURCE, SSL } from '../config';\nimport { HelixRequest, HelixRequestOptions } from './d';\n\nexport class HelixCtrl {\n  static readonly ROUTE_PREFIX = '/api/helix';\n\n  constructor(router: Router) {\n    router.route('/helix/list').get(this.list);\n    router.route('/helix/*').all(this.proxy) [...]
             "constructorObj": {
                 "name": "constructor",
                 "description": "",
@@ -5648,7 +5682,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 73,
+                    "line": 82,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -5680,7 +5714,7 @@
                     "args": [
                         {
                             "name": "req",
-                            "type": "HelixUserRequest",
+                            "type": "HelixRequest",
                             "deprecated": false,
                             "deprecationMessage": ""
                         },
@@ -5703,7 +5737,7 @@
                     "jsdoctags": [
                         {
                             "name": "req",
-                            "type": "HelixUserRequest",
+                            "type": "HelixRequest",
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
@@ -6208,12 +6242,12 @@
         },
         {
             "name": "Node",
-            "id": "class-Node-4b8fff68ba7ccb7a14a733c002190a7e5c760999f3a699168565ddeecf085df759c8918b7b69b728e480ecdbd894c972284cbe97c29ad2413b6f9ffed799247d",
+            "id": "class-Node-9a579c751dc9ff03063f99c75efe170bbfd4d7dd827c0bcb47ce7e303f211f158d9908ef90c5b54f79dfd5d45ff2c7f95357eccbc3453011fcd26d9e597b9a2c",
             "file": "src/app/shared/models/node.model.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "class",
-            "sourceCode": "import * as _ from 'lodash';\n\ninterface SimpleFieldObject {\n  name: string;\n  value: string;\n}\n\ninterface ListFieldObject {\n  name: string;\n  value: SimpleFieldObject[];\n}\n\ninterface MapFieldObject {\n  name: string;\n  value: SimpleFieldObject[];\n}\n\ninterface Payload {\n  id: string;\n  simpleFields?: any;\n  listFields?: any;\n  mapFields?: any;\n}\n\n// This is a typical Helix Node definition\nexport class Node {\n  id: string;\n  simpleFields [...]
+            "sourceCode": "import * as _ from 'lodash';\n\ninterface SimpleFieldObject {\n  name: string;\n  value: string;\n}\n\ninterface ListFieldObject {\n  name: string;\n  value: SimpleFieldObject[];\n}\n\ninterface MapFieldObject {\n  name: string;\n  value: SimpleFieldObject[];\n}\n\ninterface Payload {\n  id: string;\n  simpleFields?: any;\n  listFields?: any;\n  mapFields?: any;\n}\n\n// This is a typical Helix Node definition\nexport class Node {\n  id: string;\n  simpleFields [...]
             "constructorObj": {
                 "name": "constructor",
                 "description": "",
@@ -6876,12 +6910,12 @@
         },
         {
             "name": "UserCtrl",
-            "id": "class-UserCtrl-eb768a2104b06325cce6a34e27d58f026062912330331b4f1bf1062203a65659e42b3aa3c3d3c9260e755e0066b786d68c4137b13d080e001a415329fb7d99d8",
+            "id": "class-UserCtrl-b45bb852048757c2ba0bbe29eedfb0b8fcbce439757ca96bf9ba74604a16b9ef7614a93b9ee0d885606f7f461382b2517fa8178afe3489efbffd33b6b6a895ea",
             "file": "server/controllers/user.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "class",
-            "sourceCode": "import { Response, Router } from 'express';\nimport * as LdapClient from 'ldapjs';\nimport * as request from 'request';\n\nimport {\n  LDAP,\n  IDENTITY_TOKEN_SOURCE,\n  CUSTOM_IDENTITY_TOKEN_REQUEST_BODY,\n} from '../config';\nimport { HelixUserRequest } from './d';\n\nexport class UserCtrl {\n  constructor(router: Router) {\n    router.route('/user/authorize').get(this.authorize);\n    router.route('/user/login').post(this.login.bind(this));\n    router.route [...]
+            "sourceCode": "import { Response, Router } from 'express';\nimport * as LdapClient from 'ldapjs';\nimport * as request from 'request';\nimport { readFileSync } from 'fs';\n\nimport {\n  LDAP,\n  IDENTITY_TOKEN_SOURCE,\n  CUSTOM_IDENTITY_TOKEN_REQUEST_BODY,\n  SSL,\n} from '../config';\nimport { HelixRequest, HelixRequestOptions } from './d';\nimport { TOKEN_EXPIRATION_KEY, TOKEN_RESPONSE_KEY } from '../config';\n\nexport class UserCtrl {\n  constructor(router: Router) {\n     [...]
             "constructorObj": {
                 "name": "constructor",
                 "description": "",
@@ -6895,7 +6929,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 12,
+                "line": 15,
                 "jsdoctags": [
                     {
                         "name": "router",
@@ -6910,58 +6944,12 @@
             },
             "properties": [],
             "methods": [
-                {
-                    "name": "authorize",
-                    "args": [
-                        {
-                            "name": "req",
-                            "type": "HelixUserRequest",
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        },
-                        {
-                            "name": "res",
-                            "type": "Response",
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 20,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "modifierKind": [
-                        122
-                    ],
-                    "jsdoctags": [
-                        {
-                            "name": "req",
-                            "type": "HelixUserRequest",
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "tagName": {
-                                "text": "param"
-                            }
-                        },
-                        {
-                            "name": "res",
-                            "type": "Response",
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "tagName": {
-                                "text": "param"
-                            }
-                        }
-                    ]
-                },
                 {
                     "name": "can",
                     "args": [
                         {
                             "name": "req",
-                            "type": "HelixUserRequest",
+                            "type": "HelixRequest",
                             "deprecated": false,
                             "deprecationMessage": ""
                         },
@@ -6975,7 +6963,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 42,
+                    "line": 48,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -6984,7 +6972,7 @@
                     "jsdoctags": [
                         {
                             "name": "req",
-                            "type": "HelixUserRequest",
+                            "type": "HelixRequest",
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
@@ -7007,7 +6995,7 @@
                     "args": [
                         {
                             "name": "req",
-                            "type": "HelixUserRequest",
+                            "type": "HelixRequest",
                             "deprecated": false,
                             "deprecationMessage": ""
                         },
@@ -7021,7 +7009,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 33,
+                    "line": 39,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -7030,7 +7018,7 @@
                     "jsdoctags": [
                         {
                             "name": "req",
-                            "type": "HelixUserRequest",
+                            "type": "HelixRequest",
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
@@ -7053,7 +7041,7 @@
                     "args": [
                         {
                             "name": "req",
-                            "type": "HelixUserRequest",
+                            "type": "HelixRequest",
                             "deprecated": false,
                             "deprecationMessage": ""
                         },
@@ -7067,7 +7055,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 53,
+                    "line": 59,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -7076,7 +7064,7 @@
                     "jsdoctags": [
                         {
                             "name": "req",
-                            "type": "HelixUserRequest",
+                            "type": "HelixRequest",
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
@@ -7439,7 +7427,7 @@
         },
         {
             "name": "AppComponent",
-            "id": "component-AppComponent-d59185f86d30e473711e732239cf4a5fb2df02a89685c5e8b3f4e8780db508f2dcede12517ba61757bbb051b780a96de518e9589fe463b48667342da66cd2f0f",
+            "id": "component-AppComponent-ab0f2d07d9bbe2b2304e8801b2049073dc9e2ea892d1bd8ecd75058bd815db3565891a02eab931fffaf1ed578523751bdde179b10f9a18a117fe0215f7b552c6",
             "file": "src/app/app.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -7469,7 +7457,7 @@
                     "type": "any",
                     "optional": false,
                     "description": "",
-                    "line": 33
+                    "line": 28
                 },
                 {
                     "name": "footerEnabled",
@@ -7479,7 +7467,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 31
+                    "line": 26
                 },
                 {
                     "name": "headerEnabled",
@@ -7489,7 +7477,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 30
+                    "line": 25
                 },
                 {
                     "name": "isLoading",
@@ -7499,7 +7487,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 32
+                    "line": 27
                 }
             ],
             "methodsClass": [
@@ -7509,7 +7497,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 70,
+                    "line": 65,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -7519,7 +7507,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 60,
+                    "line": 55,
                     "deprecated": false,
                     "deprecationMessage": ""
                 }
@@ -7531,7 +7519,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { Component, OnInit } from '@angular/core';\nimport {\n  Router,\n  ActivatedRoute,\n  NavigationStart,\n  NavigationEnd,\n  NavigationCancel,\n  NavigationError,\n} from '@angular/router';\nimport { MatDialog } from '@angular/material/dialog';\n\n// import { Angulartics2Piwik } from 'angulartics2/piwik';\n\nimport { UserService } from './core/user.service';\nimport { InputDialogComponent } from './shared/dialog/input-dialog/input-dialog.component';\nimp [...]
+            "sourceCode": "import { Component, OnInit } from '@angular/core';\nimport {\n  Router,\n  ActivatedRoute,\n  NavigationStart,\n  NavigationEnd,\n  NavigationCancel,\n  NavigationError,\n} from '@angular/router';\nimport { MatDialog } from '@angular/material/dialog';\n\n// import { Angulartics2Piwik } from 'angulartics2/piwik';\n\nimport { UserService } from './core/user.service';\nimport { InputDialogComponent } from './shared/dialog/input-dialog/input-dialog.component';\nimp [...]
             "assetsDirs": [],
             "styleUrlsData": [
                 {
@@ -7577,7 +7565,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 33,
+                "line": 28,
                 "jsdoctags": [
                     {
                         "name": "route",
@@ -7748,7 +7736,7 @@
         },
         {
             "name": "ClusterDetailComponent",
-            "id": "component-ClusterDetailComponent-ddbc6c258e23b5f3d987edb840f8bb0acbe1f8911737b357b55e6540c03cf4382447ff8ae97ddb271ed70d02bc05fcaf91e76ea4ab2e276b40ae8e1b05f071e1",
+            "id": "component-ClusterDetailComponent-c113526e36f3c537ef54d6e94ae2437e25a4350adba3e1311f167d0913656b2da2fe391edee3eb40924bf4ebd85424f8e595f44db590d0750c5c7bc5d5d32dcb",
             "file": "src/app/cluster/cluster-detail/cluster-detail.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -7925,7 +7913,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { map } from 'rxjs/operators';\nimport { Component, OnInit } from '@angular/core';\nimport { ActivatedRoute, Router } from '@angular/router';\nimport { MatDialog } from '@angular/material/dialog';\n\nimport { Cluster } from '../shared/cluster.model';\nimport { HelperService } from '../../shared/helper.service';\nimport { ClusterService } from '../shared/cluster.service';\nimport { InstanceService } from '../../instance/shared/instance.service';\nimport { [...]
+            "sourceCode": "import { map } from 'rxjs/operators';\nimport { Component, OnInit } from '@angular/core';\nimport { ActivatedRoute, Router } from '@angular/router';\nimport { MatDialog } from '@angular/material/dialog';\n\nimport { Cluster } from '../shared/cluster.model';\nimport { HelperService } from '../../shared/helper.service';\nimport { ClusterService } from '../shared/cluster.service';\nimport { InstanceService } from '../../instance/shared/instance.service';\nimport { [...]
             "assetsDirs": [],
             "styleUrlsData": [
                 {
@@ -8504,7 +8492,7 @@
         },
         {
             "name": "ConfirmDialogComponent",
-            "id": "component-ConfirmDialogComponent-040b64af83bf2524ae5e83c1434f5ae6a3b73436fa093083f01868ee225b876c6b10d9a3e0f144b2937faaf634c5b944f690cf3f8b54610c349f91f0acf5c058",
+            "id": "component-ConfirmDialogComponent-48a0f9fe0e37f8bd5340e5f536cbf9375ac0a8e58bf2616bd82f418ff626eb2029bd3fe6d9fabfdeaad6711e34696274e4c72561d29e3a704f702d1c701bbd3d",
             "file": "src/app/shared/dialog/confirm-dialog/confirm-dialog.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -8523,6 +8511,15 @@
             "inputsClass": [],
             "outputsClass": [],
             "propertiesClass": [
+                {
+                    "name": "confirmButtonText",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "optional": false,
+                    "description": "",
+                    "line": 13
+                },
                 {
                     "name": "message",
                     "deprecated": false,
@@ -8549,7 +8546,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 19,
+                    "line": 20,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -8559,7 +8556,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 29,
+                    "line": 32,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -8569,7 +8566,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 25,
+                    "line": 28,
                     "deprecated": false,
                     "deprecationMessage": ""
                 }
@@ -8581,7 +8578,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { Component, OnInit, Inject } from '@angular/core';\nimport { MatDialogRef } from '@angular/material/dialog';\nimport { MAT_DIALOG_DATA } from '@angular/material/dialog';\n\n@Component({\n  selector: 'hi-confirm-dialog',\n  templateUrl: './confirm-dialog.component.html',\n  styleUrls: ['./confirm-dialog.component.scss'],\n})\nexport class ConfirmDialogComponent implements OnInit {\n  title: string;\n  message: string;\n\n  constructor(\n    @Inject(MAT_D [...]
+            "sourceCode": "import { Component, OnInit, Inject } from '@angular/core';\nimport { MatDialogRef } from '@angular/material/dialog';\nimport { MAT_DIALOG_DATA } from '@angular/material/dialog';\n\n@Component({\n  selector: 'hi-confirm-dialog',\n  templateUrl: './confirm-dialog.component.html',\n  styleUrls: ['./confirm-dialog.component.scss'],\n})\nexport class ConfirmDialogComponent implements OnInit {\n  title: string;\n  message: string;\n  confirmButtonText: string;\n\n  c [...]
             "assetsDirs": [],
             "styleUrlsData": [
                 {
@@ -8609,7 +8606,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 12,
+                "line": 13,
                 "jsdoctags": [
                     {
                         "name": "data",
@@ -8634,11 +8631,11 @@
             "implements": [
                 "OnInit"
             ],
-            "templateData": "<!--\n  ~ Licensed to the Apache Software Foundation (ASF) under one\n  ~ or more contributor license agreements.  See the NOTICE file\n  ~ distributed with this work for additional information\n  ~ regarding copyright ownership.  The ASF licenses this file\n  ~ to you under the Apache License, Version 2.0 (the\n  ~ \"License\"); you may not use this file except in compliance\n  ~ with the License.  You may obtain a copy of the License at\n  ~\n  ~     http:/ [...]
+            "templateData": "<!--\n  ~ Licensed to the Apache Software Foundation (ASF) under one\n  ~ or more contributor license agreements.  See the NOTICE file\n  ~ distributed with this work for additional information\n  ~ regarding copyright ownership.  The ASF licenses this file\n  ~ to you under the Apache License, Version 2.0 (the\n  ~ \"License\"); you may not use this file except in compliance\n  ~ with the License.  You may obtain a copy of the License at\n  ~\n  ~     http:/ [...]
         },
         {
             "name": "ConfirmDialogTestComponent",
-            "id": "component-ConfirmDialogTestComponent-a1fe3ea07605b8814e649ad8d7416f2460dbf9fcb315a9bf08101456f2cce9f73ddeeea00e8bff65a34898783e29f8bbcf5b6ecd81d4150a8f07473aa4a91b12",
+            "id": "component-ConfirmDialogTestComponent-de0078ca900ade63a7a114ed07a1a6b39665b99125c58043d2bcc3ed2e672f8d85618a960a9470e6d371d97d40a5466bb0f5c438b368dd7ff97224534899aa06",
             "file": "src/app/shared/dialog/confirm-dialog/confirm-dialog-test.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -8650,20 +8647,42 @@
                 "./confirm-dialog.component.scss"
             ],
             "styles": [],
-            "template": "<button mat-flat-button (click)=\"launch()\">Launch</button>",
+            "template": "<button mat-flat-button (click)=\"openDialog()\">   Open Dialog\n </button>",
             "templateUrl": [],
             "viewProviders": [],
-            "inputsClass": [],
+            "inputsClass": [
+                {
+                    "name": "data",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 17,
+                    "type": "any",
+                    "decorators": []
+                }
+            ],
             "outputsClass": [],
-            "propertiesClass": [],
+            "propertiesClass": [
+                {
+                    "name": "dialog",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "MatDialog",
+                    "optional": false,
+                    "description": "",
+                    "line": 19,
+                    "modifierKind": [
+                        123
+                    ]
+                }
+            ],
             "methodsClass": [
                 {
-                    "name": "launch",
+                    "name": "openDialog",
                     "args": [],
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 17,
+                    "line": 21,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -8678,7 +8697,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { Component } from '@angular/core';\nimport { MatDialog, MatDialogModule } from '@angular/material/dialog';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { MaterialModule } from 'app/shared/material.module';\nimport { ConfirmDialogComponent } from '../confirm-dialog/confirm-dialog.component';\n\n// Wrapper component for testing approach recommended in this answer:\n// https://stackoverflow.com/a/63953851/1732222 [...]
+            "sourceCode": "import { Component, OnInit, Input } from '@angular/core';\nimport { MatDialog, MatDialogModule } from '@angular/material/dialog';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { MaterialModule } from 'app/shared/material.module';\nimport { ConfirmDialogComponent } from '../confirm-dialog/confirm-dialog.component';\n\n// Wrapper component for testing approach recommended in this answer:\n// https://stackoverflow.com/a/6 [...]
             "assetsDirs": [],
             "styleUrlsData": [
                 {
@@ -8694,16 +8713,16 @@
                 "deprecationMessage": "",
                 "args": [
                     {
-                        "name": "_dialog",
+                        "name": "dialog",
                         "type": "MatDialog",
                         "deprecated": false,
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 14,
+                "line": 17,
                 "jsdoctags": [
                     {
-                        "name": "_dialog",
+                        "name": "dialog",
                         "type": "MatDialog",
                         "deprecated": false,
                         "deprecationMessage": "",
@@ -10726,7 +10745,7 @@
         },
         {
             "name": "InstanceDetailComponent",
-            "id": "component-InstanceDetailComponent-eb61d3f495bda1e016f4fc31a5f34db0689114bd1a6ad0fa97c4d56accee9381e2853a021e5adbc9920e7f681f6fe000f1d7cf0f914e02ba4a4f55981a6d31b8",
+            "id": "component-InstanceDetailComponent-b55a7689c26a2aac4ab7ea9cdcacbf15fd4540921055407c528f90d2ec255779b62656dcfbab878b749f8780bb3996f25e282609c9fc9fd96a9f4260068d8681",
             "file": "src/app/instance/instance-detail/instance-detail.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -10817,7 +10836,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 65,
+                    "line": 68,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -10827,7 +10846,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 58,
+                    "line": 60,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -10837,7 +10856,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 72,
+                    "line": 76,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -10872,7 +10891,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { Component, OnInit } from '@angular/core';\nimport { ActivatedRoute, Router } from '@angular/router';\n\nimport { Instance } from '../shared/instance.model';\nimport { HelperService } from '../../shared/helper.service';\nimport { InstanceService } from '../shared/instance.service';\n\n@Component({\n  selector: 'hi-instance-detail',\n  templateUrl: './instance-detail.component.html',\n  styleUrls: ['./instance-detail.component.scss'],\n  providers: [Inst [...]
+            "sourceCode": "import { Component, OnInit } from '@angular/core';\nimport { ActivatedRoute, Router } from '@angular/router';\n\nimport { Instance } from '../shared/instance.model';\nimport { HelperService } from '../../shared/helper.service';\nimport { InstanceService } from '../shared/instance.service';\n\n@Component({\n  selector: 'hi-instance-detail',\n  templateUrl: './instance-detail.component.html',\n  styleUrls: ['./instance-detail.component.scss'],\n  providers: [Inst [...]
             "assetsDirs": [],
             "styleUrlsData": [
                 {
@@ -11629,7 +11648,7 @@
         },
         {
             "name": "NodeViewerComponent",
-            "id": "component-NodeViewerComponent-ccadefbaeb906479af0e1837831d04bf9238f87c230a5a091cb1ad41a8766887740c8dd9ff4251b12ff3218675e305862d70256e36b34c91d22be68fda7b0566",
+            "id": "component-NodeViewerComponent-c30983867249a031151ea924d5136b0949a6f2f247d308780a18b62f1f93b61371fb7ac285d7bfd2776de183a6e015aa5bea0e6bf7f93f0286cfec140a1aeb81",
             "file": "src/app/shared/node-viewer/node-viewer.component.ts",
             "encapsulation": [
                 "ViewEncapsulation.None"
@@ -12210,7 +12229,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n  Component,\n  OnInit,\n  Input,\n  Output,\n  ViewChild,\n  ViewEncapsulation,\n  EventEmitter,\n} from '@angular/core';\nimport { ActivatedRoute } from '@angular/router';\nimport { MatDialog } from '@angular/material/dialog';\n\nimport * as _ from 'lodash';\n// import * as ace from 'ace-builds/src-noconflict/ace';\nimport 'ace-builds';\nimport 'ace-builds/webpack-resolver';\nimport 'ace-builds/src-noconflict/mode-json';\nimport 'ace-builds/src-noco [...]
+            "sourceCode": "import {\n  Component,\n  OnInit,\n  Input,\n  Output,\n  ViewChild,\n  ViewEncapsulation,\n  EventEmitter,\n} from '@angular/core';\nimport { ActivatedRoute } from '@angular/router';\nimport { MatDialog } from '@angular/material/dialog';\n\nimport * as _ from 'lodash';\n// import * as ace from 'ace-builds/src-noconflict/ace';\nimport 'ace-builds';\nimport 'ace-builds/webpack-resolver';\nimport 'ace-builds/src-noconflict/mode-json';\nimport 'ace-builds/src-noco [...]
             "assetsDirs": [],
             "styleUrlsData": [
                 {
@@ -15071,7 +15090,7 @@
                 "name": "CUSTOM_IDENTITY_TOKEN_REQUEST_BODY",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "server/config.ts",
+                "file": "server/config.example.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "any",
@@ -15083,7 +15102,7 @@
                 "name": "CUSTOM_IDENTITY_TOKEN_REQUEST_BODY",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "server/config.example.ts",
+                "file": "server/config.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "any",
@@ -15145,7 +15164,7 @@
                 "name": "HELIX_ENDPOINTS",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "server/config.ts",
+                "file": "server/config.example.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "object",
@@ -15155,7 +15174,7 @@
                 "name": "HELIX_ENDPOINTS",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "server/config.example.ts",
+                "file": "server/config.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "object",
@@ -15175,7 +15194,7 @@
                 "name": "IDENTITY_TOKEN_SOURCE",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "server/config.ts",
+                "file": "server/config.example.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "string | undefined",
@@ -15187,7 +15206,7 @@
                 "name": "IDENTITY_TOKEN_SOURCE",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "server/config.example.ts",
+                "file": "server/config.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "string | undefined",
@@ -15199,7 +15218,7 @@
                 "name": "LDAP",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "server/config.ts",
+                "file": "server/config.example.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "object",
@@ -15209,7 +15228,7 @@
                 "name": "LDAP",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "server/config.example.ts",
+                "file": "server/config.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "object",
@@ -15259,7 +15278,7 @@
                 "name": "SESSION_STORE",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "server/config.ts",
+                "file": "server/config.example.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -15269,7 +15288,7 @@
                 "name": "SESSION_STORE",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "server/config.example.ts",
+                "file": "server/config.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -15279,7 +15298,7 @@
                 "name": "SSL",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "server/config.ts",
+                "file": "server/config.example.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "object",
@@ -15289,7 +15308,7 @@
                 "name": "SSL",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "server/config.example.ts",
+                "file": "server/config.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "object",
@@ -15333,13 +15352,13 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "Story",
-                "defaultValue": "(args) => ({\n  component: ConfirmDialogTestComponent,\n  template: `<hi-confirm-dialog-test></hi-confirm-dialog-test>`,\n  props: { ...args },\n})"
+                "defaultValue": "(args) => ({\n  component: ConfirmDialogTestComponent,\n  template: `<hi-confirm-dialog-test [data]=\"data\"></hi-confirm-dialog-test>`,\n  props: {\n    ...args,\n  },\n})"
             },
             {
                 "name": "TOKEN_EXPIRATION_KEY",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "server/config.ts",
+                "file": "server/config.example.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "string",
@@ -15351,7 +15370,7 @@
                 "name": "TOKEN_EXPIRATION_KEY",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "server/config.example.ts",
+                "file": "server/config.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "string",
@@ -15363,7 +15382,7 @@
                 "name": "TOKEN_RESPONSE_KEY",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "server/config.ts",
+                "file": "server/config.example.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "string",
@@ -15375,7 +15394,7 @@
                 "name": "TOKEN_RESPONSE_KEY",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "server/config.example.ts",
+                "file": "server/config.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "string",
@@ -15425,6 +15444,28 @@
             }
         ],
         "typealiases": [
+            {
+                "name": "AgentOptions",
+                "ctype": "miscellaneous",
+                "subtype": "typealias",
+                "rawtype": "literal type",
+                "file": "server/controllers/d.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "description": "",
+                "kind": 181
+            },
+            {
+                "name": "HelixRequestOptions",
+                "ctype": "miscellaneous",
+                "subtype": "typealias",
+                "rawtype": "literal type",
+                "file": "server/controllers/d.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "description": "",
+                "kind": 181
+            },
             {
                 "name": "IdealState",
                 "ctype": "miscellaneous",
@@ -15546,12 +15587,12 @@
                     "defaultValue": "[{ name: 'workflow1' }]"
                 }
             ],
-            "server/config.ts": [
+            "server/config.example.ts": [
                 {
                     "name": "CUSTOM_IDENTITY_TOKEN_REQUEST_BODY",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "server/config.ts",
+                    "file": "server/config.example.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "any",
@@ -15563,7 +15604,7 @@
                     "name": "HELIX_ENDPOINTS",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "server/config.ts",
+                    "file": "server/config.example.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "object",
@@ -15573,7 +15614,7 @@
                     "name": "IDENTITY_TOKEN_SOURCE",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "server/config.ts",
+                    "file": "server/config.example.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "string | undefined",
@@ -15585,7 +15626,7 @@
                     "name": "LDAP",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "server/config.ts",
+                    "file": "server/config.example.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "object",
@@ -15595,7 +15636,7 @@
                     "name": "SESSION_STORE",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "server/config.ts",
+                    "file": "server/config.example.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
@@ -15605,7 +15646,7 @@
                     "name": "SSL",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "server/config.ts",
+                    "file": "server/config.example.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "object",
@@ -15615,7 +15656,7 @@
                     "name": "TOKEN_EXPIRATION_KEY",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "server/config.ts",
+                    "file": "server/config.example.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "string",
@@ -15627,7 +15668,7 @@
                     "name": "TOKEN_RESPONSE_KEY",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "server/config.ts",
+                    "file": "server/config.example.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "string",
@@ -15636,12 +15677,12 @@
                     "description": "<p>This is the key that helix-front uses\nto access the token itself\nfrom the custom identity token response\nsent by your Identity Token API.</p>\n"
                 }
             ],
-            "server/config.example.ts": [
+            "server/config.ts": [
                 {
                     "name": "CUSTOM_IDENTITY_TOKEN_REQUEST_BODY",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "server/config.example.ts",
+                    "file": "server/config.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "any",
@@ -15653,7 +15694,7 @@
                     "name": "HELIX_ENDPOINTS",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "server/config.example.ts",
+                    "file": "server/config.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "object",
@@ -15663,7 +15704,7 @@
                     "name": "IDENTITY_TOKEN_SOURCE",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "server/config.example.ts",
+                    "file": "server/config.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "string | undefined",
@@ -15675,7 +15716,7 @@
                     "name": "LDAP",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "server/config.example.ts",
+                    "file": "server/config.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "object",
@@ -15685,7 +15726,7 @@
                     "name": "SESSION_STORE",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "server/config.example.ts",
+                    "file": "server/config.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
@@ -15695,7 +15736,7 @@
                     "name": "SSL",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "server/config.example.ts",
+                    "file": "server/config.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "object",
@@ -15705,7 +15746,7 @@
                     "name": "TOKEN_EXPIRATION_KEY",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "server/config.example.ts",
+                    "file": "server/config.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "string",
@@ -15717,7 +15758,7 @@
                     "name": "TOKEN_RESPONSE_KEY",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "server/config.example.ts",
+                    "file": "server/config.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "string",
@@ -15745,7 +15786,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "Story",
-                    "defaultValue": "(args) => ({\n  component: ConfirmDialogTestComponent,\n  template: `<hi-confirm-dialog-test></hi-confirm-dialog-test>`,\n  props: { ...args },\n})"
+                    "defaultValue": "(args) => ({\n  component: ConfirmDialogTestComponent,\n  template: `<hi-confirm-dialog-test [data]=\"data\"></hi-confirm-dialog-test>`,\n  props: {\n    ...args,\n  },\n})"
                 }
             ],
             "src/environments/environment.prod.ts": [
@@ -15861,6 +15902,30 @@
         },
         "groupedEnumerations": {},
         "groupedTypeAliases": {
+            "server/controllers/d.ts": [
+                {
+                    "name": "AgentOptions",
+                    "ctype": "miscellaneous",
+                    "subtype": "typealias",
+                    "rawtype": "literal type",
+                    "file": "server/controllers/d.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "description": "",
+                    "kind": 181
+                },
+                {
+                    "name": "HelixRequestOptions",
+                    "ctype": "miscellaneous",
+                    "subtype": "typealias",
+                    "rawtype": "literal type",
+                    "file": "server/controllers/d.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "description": "",
+                    "kind": 181
+                }
+            ],
             "src/app/shared/node-viewer/node-viewer.component.ts": [
                 {
                     "name": "IdealState",
@@ -16078,18 +16143,18 @@
                 "filePath": "server/controllers/d.ts",
                 "type": "interface",
                 "linktype": "interface",
-                "name": "HelixSession",
+                "name": "HelixRequest",
                 "coveragePercent": 0,
-                "coverageCount": "0/4",
+                "coverageCount": "0/2",
                 "status": "low"
             },
             {
                 "filePath": "server/controllers/d.ts",
                 "type": "interface",
                 "linktype": "interface",
-                "name": "HelixUserRequest",
+                "name": "HelixSession",
                 "coveragePercent": 0,
-                "coverageCount": "0/2",
+                "coverageCount": "0/4",
                 "status": "low"
             },
             {
@@ -16107,7 +16172,7 @@
                 "linktype": "classe",
                 "name": "UserCtrl",
                 "coveragePercent": 0,
-                "coverageCount": "0/6",
+                "coverageCount": "0/5",
                 "status": "low"
             },
             {
@@ -16487,7 +16552,7 @@
                 "linktype": "component",
                 "name": "ConfirmDialogTestComponent",
                 "coveragePercent": 0,
-                "coverageCount": "0/3",
+                "coverageCount": "0/5",
                 "status": "low"
             },
             {
@@ -16496,7 +16561,7 @@
                 "linktype": "component",
                 "name": "ConfirmDialogComponent",
                 "coveragePercent": 0,
-                "coverageCount": "0/7",
+                "coverageCount": "0/8",
                 "status": "low"
             },
             {
diff --git a/helix-front/package.json b/helix-front/package.json
index 8da242349..5dbe60e75 100644
--- a/helix-front/package.json
+++ b/helix-front/package.json
@@ -2,7 +2,7 @@
   "name": "helix-front",
   "version": "1.4.1",
   "main": "/dist/server/app.js",
-  "author": "Vivo Xu <xu...@xuxu.name>",
+  "author": "Vivo Xu <gi...@vivoxu.com>",
   "contributors": [
     {
       "name": "@micahstubbs",
diff --git a/helix-front/server/controllers/user.ts b/helix-front/server/controllers/user.ts
index 10ec4e98f..fc2266bed 100644
--- a/helix-front/server/controllers/user.ts
+++ b/helix-front/server/controllers/user.ts
@@ -14,24 +14,27 @@ import { TOKEN_EXPIRATION_KEY, TOKEN_RESPONSE_KEY } from '../config';
 
 export class UserCtrl {
   constructor(router: Router) {
-    router.route('/user/authorize').get(this.authorize);
+    // uncomment the following line to use customized login
+    // router.route('/user/authorize').get(this.authorize);
     router.route('/user/login').post(this.login.bind(this));
     router.route('/user/current').get(this.current);
     router.route('/user/can').get(this.can);
   }
 
+  //
+  // You may rewrite this function to support your own authorization logic.
+  // Usually it would be helpful to integrate with 3rd party login.
+  // For example:
+  //
+  /*
   protected authorize(req: HelixRequest, res: Response) {
-    //
-    // you can rewrite this function
-    // to support your own authorization logic
-    // by default, do nothing but redirect
-    //
-    if (req.query.url) {
-      res.redirect(req.query.url as string);
-    } else {
-      res.redirect('/');
-    }
+    const { isAdmin, username, token } = get_auth_state();
+    req.session.isAdmin = isAdmin;
+    req.session.username = username;
+    req.session.identityToken = token;
+    res.redirect('/');
   }
+  */
 
   protected current(req: HelixRequest, res: Response) {
     res.json(req.session.username || 'Sign In');