Extending certificate table with Issuer and Subject columns.

This commit introduce two new columns on certificate table.
It should help user to differentiate multiple mTLS certificates.

Date format was changed to 'medium' one to accommodate two new columns.
Small corrections were made to action button paddings to make the icon better centered.

Tested: GUI tests were done on Chromium v74.0.3729 browser. Desktop and mobile version.

Signed-off-by: Zbigniew Kurzynski <zbigniew.kurzynski@intel.com>
Change-Id: I660b74dd8b50f854ebbdad1890bbf99b3675f4cd

3 files changed, 43 insertions, 9 deletions

diff --git a/app/common/directives/certificate.html b/app/common/directives/certificate.html
index a46de69..8579f7a 100644
--- a/app/common/directives/certificate.html
+++ b/app/common/directives/certificate.html
@@ -3,10 +3,22 @@
     {{cert.Description}}
   </div>
   <div class="certificate__title-inline">
+    Issued by:
+  </div>
+  <div class="certificate__issue-cell">
+    {{cert.Issuer.CommonName}}
+  </div>
+  <div class="certificate__title-inline">
+    Issued to:
+  </div>
+  <div class="certificate__issue-cell">
+    {{cert.Subject.CommonName}}
+  </div>
+  <div class="certificate__title-inline">
     Valid from:
   </div>
   <div class="certificate__date-cell">
-    {{cert.ValidNotBefore | localeDate}}
+    {{cert.ValidNotBefore | date:medium}}
   </div>
   <div class="certificate__title-inline">
     Valid until:
@@ -17,7 +29,7 @@
       ng-if="cert.isExpired || cert.isExpiring"></span>
   </div>
   <div class="certificate__date-cell">
-    {{cert.ValidNotAfter | localeDate}}
+    {{cert.ValidNotAfter | date:medium}}
   </div>
   <div class="certificate__buttons-cell">
     <button type="button" class="btn  btn-tertiary  certificate__button">
diff --git a/app/configuration/controllers/certificate-controller.html b/app/configuration/controllers/certificate-controller.html
index 6490bb0..89ea28f 100644
--- a/app/configuration/controllers/certificate-controller.html
+++ b/app/configuration/controllers/certificate-controller.html
@@ -28,6 +28,12 @@
           <div class="certificate__type-header">
             Certificate
           </div>
+          <div class="certificate__issue-header">
+            Issued by
+          </div>
+          <div class="certificate__issue-header">
+            Issued to
+          </div>
           <div class="certificate__date-header">
             Valid from
           </div>
diff --git a/app/configuration/styles/certificate.scss b/app/configuration/styles/certificate.scss
index 5a122fe..a113781 100644
--- a/app/configuration/styles/certificate.scss
+++ b/app/configuration/styles/certificate.scss
@@ -15,17 +15,25 @@
   }
   .certificate__type-header {
     @include mediaQuery(small) {
-      width: 25%;
+      width: 20%;
       background: transparent;
     }
     width: 100%;
     padding: 0.8em;
     padding-left: 1.5em;
   }
+  .certificate__issue-header {
+    display: none;
+    padding: 0.8em;
+    @include mediaQuery(small) {
+      width: 20%;
+      display: block;
+    }
+  }
   .certificate__date-header {
     padding: 0.8em;
     @include mediaQuery(small) {
-      width: 30%;
+      width: 12%;
       display: block;
     }
     display: none;
@@ -44,18 +52,26 @@
     word-wrap: break-word;
     background: $background-02;
     @include mediaQuery(small) {
-      width: 25%;
+      width: 20%;
       background: transparent;
     }
   }
-  .certificate__date-cell {
+  .certificate__issue-cell {
     padding: 0.8em;
     word-wrap: break-word;
     @include mediaQuery(small) {
-      width: 30%;
+      width: 20%;
     }
     width: 70%;
   }
+  .certificate__date-cell {
+    width: 70%;
+    padding: 0.8em;
+    word-wrap: break-word;
+    @include mediaQuery(small) {
+      width: 12%;
+    }
+  }
   .certificate__status-cell {
     padding: 0.8em;
     @include mediaQuery(small) {
@@ -67,11 +83,11 @@
   .certificate__buttons-cell {
     @include mediaQuery(small) {
       width: 10%;
-      padding-top: 0.8em;
+      padding-top: 0.5em;
     }
     width: 100%;
     text-align: right;
-    padding: 0 1.5em 0.8em 0;
+    padding: 0 1.5em 0 0;
   }
   .certificate__title-inline {
     @include mediaQuery(small) {