Merge pull request #805 from jpkrohling/HAWKULAR-949-SecretStoreUIRef…

…actor HAWKULAR-949 - Refactored the Tokens UI.
hawkular · Jan 26, 2016 · 2b3c8bb · 2b3c8bb
2 parents 10a0439 + 4a78575
commit 2b3c8bb
Show file tree

Hide file tree

Showing 7 changed files with 193 additions and 33 deletions.
diff --git a/console/src/main/scripts/bower.json b/console/src/main/scripts/bower.json
@@ -24,7 +24,7 @@
     "animate.css": "3.0.0",
     "ngInfiniteScroll": "1.2.1",
     "hawkular-charts": "0.6.18",
-    "hawkular-ui-services": "0.8.22",
+    "hawkular-ui-services": "0.8.23",
     "hawtio-core-navigation": "2.0.51",
     "hawtio-core": "2.0.30",
     "hawtio-template-cache": "2.0.4",

diff --git a/console/src/main/scripts/plugins/accounts/html/token-qrcode-modal.html b/console/src/main/scripts/plugins/accounts/html/token-qrcode-modal.html
@@ -0,0 +1,20 @@
+<div class="modal-header">
+  <button type="button" class="close" ng-click="qrCodeModal.close()">
+    <span class="pficon pficon-close"></span>
+  </button>
+  <h4 class="modal-title">Token's QR Code</h4>
+</div>
+<div class="modal-body">
+  <div class="form-group">
+    <p class="primary-message hk-align-center">
+      <img
+        ng-src="/secret-store/qrcode?tokenId={{qrCodeModal.token.id}}&size=250"
+        align="center"
+        height="250"
+        width="250"/>
+    </p>
+  </div>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-default" ng-click="qrCodeModal.close()">Close</button>
+</div>
diff --git a/console/src/main/scripts/plugins/accounts/html/tokens.html b/console/src/main/scripts/plugins/accounts/html/tokens.html
@@ -28,34 +28,98 @@ <h1>No tokens created.</h1>
         Create Token
       </button>
     </div>
-    <div class="hk-table-container" ng-show="controller.tokens.length && !controller.loading">
-      <table class="table table-bordered hk-table-clean">
-        <thead>
-        <tr>
-          <th>Key</th>
-          <th>Secret</th>
-          <th>Persona</th>
-          <th></th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr ng-repeat="token in controller.tokens">
-          <td>{{token.id}}</td>
-          <td>{{token.secret}}</td>
-          <td>{{controller.personaForToken(token)}}</td>
-          <td class="hk-actions-one">
-            <button type="button"
-                    class="btn btn-link"
-                    tooltip-trigger
-                    tooltip-placement="top"
-                    tooltip="Revoke"
-                    ng-click="controller.revoke(token)">
-              <i class="fa fa-trash-o"></i>
-            </button>
-          </td>
-        </tr>
-        </tbody>
-      </table>
-    </div>
+
+    <div class="container-fluid container-cards-pf" ng-show="controller.tokens.length && !controller.loading">
+      <div class="row row-cards-pf">
+        <div class="col-xs-12 col-sm-12 col-md-6" ng-repeat="token in controller.tokens">
+          <div class="card-pf">
+            <h2 class="card-pf-title">
+              <div ng-hide="controller.inEditMode(token)">
+                <span ng-show="token.attributes.name">{{token.attributes.name}}</span>
+                <span ng-hide="token.attributes.name">Token generated at {{(token.createdAt | date:'medium')}}</span>
+                <button class="btn btn-default pull-right"
+                        tooltip-trigger
+                        tooltip="Rename"
+                        ng-click="controller.edit(token)">
+                  <i class="fa fa-pencil"></i>
+                </button>
+              </div>
+              <div ng-show="controller.inEditMode(token)">
+                <input ng-model="controller.newNames[token.id]" placeholder="Name" class="form-control"/>
+                <button class="btn btn-default pull-right"
+                        tooltip-trigger
+                        tooltip="Discard"
+                        type="reset"
+                        ng-click="controller.discard(token)">
+                  <i class="fa fa-close"></i>
+                </button>
+
+                <button class="btn btn-default pull-right"
+                        tooltip-trigger
+                        tooltip="Confirm"
+                        type="submit"
+                        ng-click="controller.confirm(token)">
+                  <i class="fa fa-check"></i>
+                </button>
+              </div>
+            </h2>
+            <div class="card-pf-body">
+              <div ng-hide="controller.inEditMode(token)">
+                <h3 ng-show="token.attributes.description">{{token.attributes.description}}</h3>
+                <h3 ng-hide="token.attributes.description">No description.</h3>
+              </div>
+              <div ng-show="controller.inEditMode(token)">
+                <input ng-model="controller.newDescriptions[token.id]" placeholder="Description" class="form-control"/>
+              </div>
+
+              <img
+                height="50"
+                width="50"
+                class="pull-right"
+                ng-src="/secret-store/qrcode?tokenId={{token.id}}&size=50"
+                ng-click="controller.showQRCode(token)"/>
+
+              <p>
+                <small><b>Key:</b> {{token.id}}</small><br/>
+                <small><b>Secret:</b> {{token.secret}}</small><br/>
+                <small><b>Persona:</b> {{controller.personaForToken(token)}}</small><br/>
+              </p>
+
+            </div>
+            <div class="card-pf-footer">
+              <button type="button"
+                      class="btn btn-link pull-right"
+                      tooltip-trigger
+                      tooltip-placement="top"
+                      tooltip="Revoke"
+                      ng-click="controller.revoke(token)">
+                <i class="fa fa-trash-o"></i>
+              </button>
+
+              <p>
+                Expiration date:
+                <abbr
+                  ng-hide="controller.inEditMode(token)"
+                  data-toggle="tooltip"
+                  data-placement="top"
+                  title="This date is shown in your timezone.">
+                  {{(token.expiresAt | date:'mediumDate') || "&infin;"}}
+                </abbr>
+              <div class="input-group date" ng-show="controller.inEditMode(token)">
+                <input
+                  type="text"
+                  id="dateFor{{token.id}}"
+                  class="form-control bootstrap-datepicker"
+                  ng-model="controller.newExpirations[token.id]"
+                  data-date-format="yyyy-mm-dd"
+                  data-provide="datepicker"/>
+                <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
+              </div>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div><!-- /row -->
+    </div><!-- /container -->
   </div>
 </div>
diff --git a/console/src/main/scripts/plugins/accounts/ts/accountsGlobals.ts b/console/src/main/scripts/plugins/accounts/ts/accountsGlobals.ts
@@ -36,11 +36,15 @@ module HawkularAccounts {
     id:  string;
     key: string;
     secret: string;
+    expiresAt: string;
     createdAt: string;
     updatedAt: string;
     attributes: { [key:string]:string; };
+    $update(options:{},
+            success?:(success:IToken) => void,
+            failure?:(error:IErrorPayload) => void);
     $remove(options:{},
-            success?:(success:IOrganization) => void,
+            success?:(success:IToken) => void,
             failure?:(error:IErrorPayload) => void);
   }
 
@@ -172,4 +176,5 @@ module HawkularAccounts {
   }
 
   export enum PersistenceState {PERSISTING, SUCCESS, ERROR};
+  export enum EditState {READ, EDIT};
 }
diff --git a/console/src/main/scripts/plugins/accounts/ts/tokens.ts b/console/src/main/scripts/plugins/accounts/ts/tokens.ts
@@ -24,6 +24,11 @@ module HawkularAccounts {
     ];
     public tokens:Array<IToken>;
     public personas:Array<IPersona>;
+    public editState:{ [id: string]: EditState; } = {};
+    public tokensToUpdate:{ [id: string]: PersistenceState; } = {};
+    public newNames:{ [id: string]: string; } = {};
+    public newDescriptions:{ [id: string]: string; } = {};
+    public newExpirations:{ [id: string]: string; } = {};
     public loading:boolean = true;
 
     constructor(private $window:any,
@@ -115,6 +120,57 @@ module HawkularAccounts {
           });
         });
     }
+
+    public showQRCode(token:IToken):void {
+      this.$modal.open({
+        controller: 'HawkularAccounts.TokenQRCodeController as qrCodeModal',
+        templateUrl: 'plugins/accounts/html/token-qrcode-modal.html',
+        resolve: {
+          token: () => token
+        }
+      });
+    }
+
+    public edit(token:IToken):void {
+      this.newNames[token.id] = token.attributes['name'];
+      this.newDescriptions[token.id] = token.attributes['description'];
+      this.newExpirations[token.id] = token.expiresAt;
+      this.editState[token.id] = EditState.EDIT;
+    }
+
+    public discard(token:IToken):void {
+      this.newNames[token.id] = '';
+      this.newDescriptions[token.id] = '';
+      this.newExpirations[token.id] = '';
+      this.editState[token.id] = EditState.READ;
+    }
+
+    public confirm(token:IToken):void {
+      token.attributes['name'] = this.newNames[token.id];
+      token.attributes['description'] = this.newDescriptions[token.id];
+
+      // this datepicker has a different context as Angular, so, binding doesn't work here...
+      let date = $(`#dateFor${token.id}`).val();
+      if (date) {
+        let offset = new Date().getTimezoneOffset() * 60 * 1000; // getTimezoneOffset is in minutes
+        let d = new Date((new Date(date).valueOf() + offset));
+        token.expiresAt = d.toISOString();
+      }
+      this.newNames[token.id] = '';
+      this.newDescriptions[token.id] = '';
+      this.editState[token.id] = EditState.READ;
+
+      token.$update(null, (response:IToken) => {
+        this.tokensToUpdate[token.id] = PersistenceState.SUCCESS;
+      }, (error:IErrorPayload) => {
+        this.tokensToUpdate[token.id] = PersistenceState.ERROR;
+        this.$log.debug(`Error changing the name for token ${token.id}. Response: ${error.data.message}`);
+      });
+    }
+
+    public inEditMode(token:IToken):boolean {
+      return this.editState[token.id] === EditState.EDIT;
+    }
   }
 
   export class TokenRevokeController {
@@ -134,6 +190,20 @@ module HawkularAccounts {
     }
   }
 
+  export class TokenQRCodeController {
+    public static $inject = ['$scope', '$modalInstance', 'token'];
+
+    constructor(private $scope:any,
+                private $modalInstance:any,
+                private token:IToken) {
+    }
+
+    public close():void {
+      this.$modalInstance.dismiss('close');
+    }
+  }
+
   _module.controller('HawkularAccounts.TokensController', TokensController);
   _module.controller('HawkularAccounts.TokenRevokeController', TokenRevokeController);
+  _module.controller('HawkularAccounts.TokenQRCodeController', TokenQRCodeController);
 }
diff --git a/console/src/main/webapp/index.html b/console/src/main/webapp/index.html
@@ -17,6 +17,7 @@
     <script src="libs/es5-dom-shim/__COMPILE/a.js"></script>
     <script src="libs/patternfly/components/jquery/dist/jquery.js"></script>
     <script src="libs/patternfly/components/bootstrap/dist/js/bootstrap.js"></script>
+    <script src="libs/patternfly/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
 
     <!-- bower:js -->
     <!-- endbower -->

diff --git a/pom.xml b/pom.xml
@@ -88,14 +88,14 @@
     <version.com.google.code.gson>2.2.4</version.com.google.code.gson>
     <version.commons.io>2.4</version.commons.io>
     <version.gnu.getopt>1.0.13</version.gnu.getopt>
+    <version.org.hawkular.accounts>2.0.15.Final</version.org.hawkular.accounts>
     <version.org.hawkular.agent>0.15.6.Final</version.org.hawkular.agent>
-    <version.org.hawkular.accounts>2.0.13.Final</version.org.hawkular.accounts>
     <version.org.hawkular.alerts>0.8.2.Final</version.org.hawkular.alerts>
     <version.org.hawkular.cmdgw>0.10.9.Final</version.org.hawkular.cmdgw>
     <version.org.hawkular.commons>0.3.4.Final</version.org.hawkular.commons>
     <version.org.hawkular.inventory>0.12.1.Final</version.org.hawkular.inventory>
     <version.org.hawkular.metrics>0.11.0.Final</version.org.hawkular.metrics>
-    <version.org.keycloak.secretstore>1.0.7.Final</version.org.keycloak.secretstore>
+    <version.org.keycloak.secretstore>1.0.9.Final</version.org.keycloak.secretstore>
     <version.rxjava>1.0.16</version.rxjava>
     <version.hystrix-core>1.4.21</version.hystrix-core>
     <version.hystrix-request-servlet>1.1.2</version.hystrix-request-servlet>