Certificate delete API – frontend

With introducing option to add multiple certificates there is a need to give
user a possibility to remove selected certificates, for example when they
expire.
This commit adds implementation of DELETE function to GUI.
A new icon will appear in action section on certificate table.
The delete icon will be enabled only for TrustStore certificates and disabled
for others which does not have support for delete option.
When user clicks on the delete icon then ‘user prompt’ is displayed and after
confirmation, proper redfish action is used to delete the certificate.

Middlewere implementation is here:
 https://gerrit.openbmc-project.xyz/c/openbmc/bmcweb/+/25281

Backend implementation is here:
 https://gerrit.openbmc-project.xyz/c/openbmc/phosphor-certificate-manager/+/25268

Tested on Chrome and Mozilla.
    New icon appears in action section.
    The delete option is available only for TrustStore certificates.
    User is able to delete selected certificate.

Depends-On: I9781c5c79288ec5d080e80e42c63a55e471ddb77
Signed-off-by: Zbigniew Kurzynski <zbigniew.kurzynski@intel.com>
Change-Id: I68c5f54767d6982ae3cb00830b3a1b4f5e237bea

4 files changed, 103 insertions, 3 deletions

diff --git a/app/common/directives/certificate-modal-remove.html b/app/common/directives/certificate-modal-remove.html
new file mode 100644
index 0000000..8de06f9
--- /dev/null
+++ b/app/common/directives/certificate-modal-remove.html
@@ -0,0 +1,21 @@
+<div class="uib-modal__content modal__local-certificates-remove">
+  <div class="modal-header">
+    <h2 class="modal-title" id="dialog_label">
+      Remove certificate
+    </h2>
+    <button type="button" class="btn  btn--close  float-right" ng-click="$dismiss()" aria-label="Close">
+      <icon file="icon-close.svg" aria-hidden="true"></icon>
+    </button>
+  </div>
+  <div class="modal-body">
+    <p>Are you sure you want to remove certificate issued by '{{modalCtrl.certificate.Issuer.CommonName}}' certificate? This action cannot be undone.</p>
+  </div>
+  <div class="modal-footer">
+    <button class="btn btn-secondary" ng-click="$dismiss()" type="button">
+      Cancel
+    </button>
+    <button class="btn btn-primary" ng-click="$close()" type="button">
+      Remove
+    </button>
+  </div>
+</div>
diff --git a/app/common/directives/certificate.html b/app/common/directives/certificate.html
index cf7b46d..86d0dc7 100644
--- a/app/common/directives/certificate.html
+++ b/app/common/directives/certificate.html
@@ -39,7 +39,10 @@
   <div class="certificate__date-cell">
     {{cert.ValidNotAfter | date:medium}}
   </div>
-  <div class="certificate__buttons-cell">
+  <div class="certificate__title-inline">
+    Actions:
+  </div>
+  <div class="certificate__buttons-cell row">
     <button
       type="button"
       ng-click="cert.upload = true"
@@ -47,6 +50,13 @@
       class="btn  btn-tertiary certificate__button">
       <icon file="icon-replace.svg" aria-hidden="true"></icon>
     </button>
+    <button type="button"
+      ng-click="confirmDeleteCert(cert)"
+      aria-label="Delete certificate"
+      class="btn  btn-tertiary certificate__button"
+      ng-disabled="!isDeletable(cert)">
+      <icon file="icon-trashcan.svg" aria-hidden="true"></icon>
+    </button>
   </div>
   <div ng-show="cert.upload === true" class="upload__certificate">
     <div class="close-btn">
diff --git a/app/common/directives/certificate.js b/app/common/directives/certificate.js
index 45b8c99..48fa851 100644
--- a/app/common/directives/certificate.js
+++ b/app/common/directives/certificate.js
@@ -9,8 +9,8 @@ window.angular && (function(angular) {
         'template': require('./certificate.html'),
         'scope': {'cert': '=', 'reload': '&'},
         'controller': [
-          '$scope', 'APIUtils', 'toastService', 'Constants',
-          function($scope, APIUtils, toastService, Constants) {
+          '$scope', 'APIUtils', 'toastService', 'Constants', '$uibModal',
+          function($scope, APIUtils, toastService, Constants, $uibModal) {
             var certificateType = 'PEM';
             var availableCertificateTypes = Constants.CERTIFICATE_TYPES;
 
@@ -35,6 +35,65 @@ window.angular && (function(angular) {
               }
             };
 
+            $scope.isDeletable = function(certificate) {
+              return certificate.Description == 'TrustStore Certificate';
+            };
+
+            $scope.confirmDeleteCert = function(certificate) {
+              initRemoveModal(certificate);
+            };
+
+            /**
+             * Intiate remove certificate modal
+             * @param {*} certificate
+             */
+            function initRemoveModal(certificate) {
+              const template = require('./certificate-modal-remove.html');
+              $uibModal
+                  .open({
+                    template,
+                    windowTopClass: 'uib-modal',
+                    ariaLabelledBy: 'dialog_label',
+                    controllerAs: 'modalCtrl',
+                    controller: function() {
+                      this.certificate = certificate;
+                    }
+                  })
+                  .result
+                  .then(() => {
+                    deleteCert(certificate);
+                  })
+                  .catch(
+                      () => {
+                          // do nothing
+                      })
+            };
+
+            /**
+             * Removes certificate
+             * @param {*} certificate
+             */
+            function deleteCert(certificate) {
+              $scope.confirm_delete = false;
+              APIUtils.deleteRedfishObject(certificate['@odata.id'])
+                  .then(
+                      function(data) {
+                        $scope.loading = false;
+                        toastService.success(
+                            $scope.getCertificateName(certificate.Description) +
+                            ' was deleted.');
+                        $scope.reload();
+                      },
+                      function(error) {
+                        console.log(error);
+                        $scope.loading = false;
+                        toastService.error(
+                            'Unable to delete ' +
+                            $scope.getCertificateName(certificate.Description));
+                      });
+              return;
+            };
+
             $scope.replaceCertificate = function(certificate) {
               $scope.loading = true;
               if (certificate.file.name.split('.').pop() !==
diff --git a/app/common/services/api-utils.js b/app/common/services/api-utils.js
index e3f6136..4298884 100644
--- a/app/common/services/api-utils.js
+++ b/app/common/services/api-utils.js
@@ -1432,6 +1432,16 @@ window.angular && (function(angular) {
                 return response.data;
               });
         },
+        deleteRedfishObject: function(objectPath) {
+          return $http({
+                   method: 'DELETE',
+                   url: DataService.getHost() + objectPath,
+                   withCredentials: true
+                 })
+              .then(function(response) {
+                return response.data;
+              });
+        },
         getHardwares: function(callback) {
           $http({
             method: 'GET',