adding ui support for hostname and certexpiry (AthenZ#1457)

Signed-off-by: jothi avanachandu <[email protected]> Co-authored-by: jothi avanachandu <[email protected]>
ysknkd · Apr 26, 2021 · 5e9f8c8 · 5e9f8c8
1 parent 220a6ac
commit 5e9f8c8
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 46 deletions.
diff --git a/ui/src/__tests__/components/service/__snapshots__/InstanceTable.test.js.snap b/ui/src/__tests__/components/service/__snapshots__/InstanceTable.test.js.snap
@@ -18,23 +18,11 @@ exports[`InstanceTable should render 1`] = `
   padding-bottom: 5px;
   vertical-align: top;
   text-transform: uppercase;
-  padding: 5px 0 5px 35px;
+  padding: 5px 0 5px 25px;
   word-break: break-all;
 }
 
-.emotion-4 {
-  border-bottom: 2px solid #d5d5d5;
-  color: #9a9a9a;
-  font-weight: 600;
-  font-size: 0.8rem;
-  padding-bottom: 5px;
-  vertical-align: top;
-  text-transform: uppercase;
-  padding: 5px 0 5px 15px;
-  word-break: break-all;
-}
-
-.emotion-8 {
+.emotion-12 {
   box-sizing: border-box;
   margin-top: 10px;
   box-shadow: 0 1px 4px #d9d9d9;
@@ -46,33 +34,32 @@ exports[`InstanceTable should render 1`] = `
   padding: 5px 0 5px 15px;
 }
 
-.emotion-10 {
+.emotion-14 {
   text-align: left;
   padding: 5px 0 5px 15px;
   vertical-align: middle;
   word-break: break-all;
 }
 
-.emotion-12 {
-  text-align: center;
-  padding: 5px 0 5px 15px;
-  vertical-align: middle;
-  word-break: break-all;
-}
-
 <table
   class="emotion-0 emotion-1"
   data-testid="instancetable"
 >
   <colgroup>
     <col
-      style="width: 50%;"
+      style="width: 20%;"
+    />
+    <col
+      style="width: 20%;"
+    />
+    <col
+      style="width: 20%;"
     />
     <col
-      style="width: 25%;"
+      style="width: 20%;"
     />
     <col
-      style="width: 25%;"
+      style="width: 20%;"
     />
   </colgroup>
   <thead>
@@ -83,39 +70,59 @@ exports[`InstanceTable should render 1`] = `
         Instance
       </th>
       <th
-        class="emotion-4 emotion-5"
+        class="emotion-2 emotion-3"
       >
-        Last Certificate Refresh
+        Hostname
       </th>
       <th
-        class="emotion-4 emotion-5"
+        class="emotion-2 emotion-3"
       >
         Provider
       </th>
+      <th
+        class="emotion-2 emotion-3"
+      >
+        Expires On
+      </th>
+      <th
+        class="emotion-2 emotion-3"
+      >
+        Last Certificate Refresh
+      </th>
     </tr>
   </thead>
   <tbody>
     <tr
-      class="emotion-8 emotion-9"
+      class="emotion-12 emotion-13"
       data-testid="instance-row"
     >
       <td
-        class="emotion-10 emotion-11"
+        class="emotion-14 emotion-15"
         color=""
       >
         host1
       </td>
       <td
-        class="emotion-12 emotion-11"
+        class="emotion-14 emotion-15"
+        color=""
+      />
+      <td
+        class="emotion-14 emotion-15"
         color=""
       >
-        2021-03-28 21:38 UTC
+        aws
       </td>
       <td
-        class="emotion-12 emotion-11"
+        class="emotion-14 emotion-15"
         color=""
       >
-        aws
+        Invalid date
+      </td>
+      <td
+        class="emotion-14 emotion-15"
+        color=""
+      >
+        2021-03-28 21:38 UTC
       </td>
     </tr>
   </tbody>

diff --git a/ui/src/components/service/InstanceRow.js b/ui/src/components/service/InstanceRow.js
@@ -77,17 +77,31 @@ class InstanceRow extends React.Component {
                         {ipAddress}
                     </TDStyled>
                     {this.props.category === 'dynamic' && (
-                        <TDStyled color={color} align={center}>
+                        <TDStyled color={color} align={left}>
+                            {details.hostname}
+                        </TDStyled>
+                    )}
+                    {this.props.category === 'dynamic' && (
+                        <TDStyled color={color} align={left}>
+                            {details.provider}
+                        </TDStyled>
+                    )}
+                    {this.props.category === 'dynamic' && (
+                        <TDStyled color={color} align={left}>
                             {this.localDate.getLocalDate(
-                                details.updateTime,
+                                details.certExpiryTime,
                                 'UTC',
                                 'UTC'
                             )}
                         </TDStyled>
                     )}
                     {this.props.category === 'dynamic' && (
-                        <TDStyled color={color} align={center}>
-                            {details.provider}
+                        <TDStyled color={color} align={left}>
+                            {this.localDate.getLocalDate(
+                                details.updateTime,
+                                'UTC',
+                                'UTC'
+                            )}
                         </TDStyled>
                     )}
                     {this.props.category === 'static' && (

diff --git a/ui/src/components/service/InstanceTable.js b/ui/src/components/service/InstanceTable.js
@@ -47,7 +47,7 @@ const TableHeadStyledGroupName = styled.th`
     padding-bottom: 5px;
     vertical-align: top;
     text-transform: uppercase;
-    padding: 5px 0 5px 35px;
+    padding: 5px 0 5px 25px;
     word-break: break-all;
 `;
 
@@ -99,20 +99,30 @@ export default class InstanceTable extends React.Component {
         return (
             <StyleTable key='instance-table' data-testid='instancetable'>
                 <colgroup>
-                    <col style={{ width: 50 + '%' }} />
-                    <col style={{ width: 25 + '%' }} />
-                    <col style={{ width: 25 + '%' }} />
+                    <col style={{ width: 20 + '%' }} />
+                    <col style={{ width: 20 + '%' }} />
+                    <col style={{ width: 20 + '%' }} />
+                    <col style={{ width: 20 + '%' }} />
+                    <col style={{ width: 20 + '%' }} />
                 </colgroup>
                 {this.props.category === 'dynamic' && (
                     <thead>
                         <tr>
                             <TableHeadStyledGroupName align={'left'}>
                                 Instance
                             </TableHeadStyledGroupName>
-                            <TableHeadStyled>
+                            <TableHeadStyledGroupName align={'left'}>
+                                Hostname
+                            </TableHeadStyledGroupName>
+                            <TableHeadStyledGroupName align={'left'}>
+                                Provider
+                            </TableHeadStyledGroupName>
+                            <TableHeadStyledGroupName align={'left'}>
+                                Expires On
+                            </TableHeadStyledGroupName>
+                            <TableHeadStyledGroupName align={'left'}>
                                 Last Certificate Refresh
-                            </TableHeadStyled>
-                            <TableHeadStyled>Provider</TableHeadStyled>
+                            </TableHeadStyledGroupName>
                         </tr>
                     </thead>
                 )}

diff --git a/ui/src/server/handlers/api.js b/ui/src/server/handlers/api.js
@@ -1890,7 +1890,7 @@ Fetchr.registerService({
             { domainName: params.domainName, serviceName: params.serviceName },
             (err, data) => {
                 let result = [];
-                if (data) {
+                if (data && data.workloadList != null) {
                     if (params.category === 'static') {
                         data.workloadList.forEach((workload) => {
                             if (workload.provider === 'Static') {