From 2e7d8d36424cb9e410e49f2d407f3dbfe3f3c313 Mon Sep 17 00:00:00 2001
From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
Date: Tue, 11 Jan 2022 20:23:17 -0800
Subject: [PATCH] Tweaks to Tenant Details for Logging and Monitoring (#1382)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
---
 .../TenantDetails/EditTenantLogsModal.tsx     |  13 +-
 .../EditTenantMonitoringModal.tsx             |   6 +-
 .../Tenants/TenantDetails/TenantDetails.tsx   |  33 ++--
 .../Tenants/TenantDetails/TenantLogging.tsx   |  26 ++--
 .../TenantDetails/TenantMonitoring.tsx        | 142 ++++++++++--------
 5 files changed, 118 insertions(+), 102 deletions(-)

diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/EditTenantLogsModal.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/EditTenantLogsModal.tsx
index bea251620..222cbcada 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/EditTenantLogsModal.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/EditTenantLogsModal.tsx
@@ -256,6 +256,8 @@ const EditTenantLogsModal = ({
           }
         }}
       >
+        <h2>Logging API </h2>
+        <hr className={classes.hrClass} />
         <h4>Image</h4>
         <InputBoxWrapper
           id={`image`}
@@ -322,8 +324,9 @@ const EditTenantLogsModal = ({
           error={nodeSelectorError}
           setError={setNodeSelectorError}
         />
+        <h2>Database Configuration </h2>
         <hr className={classes.hrClass} />
-        <h4>Db Image</h4>
+        <h4>Postgres Image</h4>
         <InputBoxWrapper
           id={`dbImage`}
           label={""}
@@ -337,7 +340,7 @@ const EditTenantLogsModal = ({
           key={`dbImage`}
           error={validationErrors[`dbImage`] || ""}
         />
-        <h4>Db Service Account Name</h4>
+        <h4>Service Account</h4>
         <InputBoxWrapper
           id={`dbServiceAccountName`}
           label={""}
@@ -351,7 +354,7 @@ const EditTenantLogsModal = ({
           key={`dbServiceAccountName`}
           error={validationErrors[`dbServiceAccountName`] || ""}
         />
-        <h4>Db Labels</h4>
+        <h4>Labels</h4>
         <KeyPairEdit
           newValues={newDbLabels}
           setNewValues={setNewDbLabels}
@@ -359,7 +362,7 @@ const EditTenantLogsModal = ({
           error={dbLabelsError}
           setError={setDbLabelsError}
         />
-        <h4>Db Annotations</h4>
+        <h4>Annotations</h4>
         <KeyPairEdit
           newValues={newDbAnnotations}
           setNewValues={setNewDbAnnotations}
@@ -367,7 +370,7 @@ const EditTenantLogsModal = ({
           error={dbAnnotationsError}
           setError={setDbAnnotationsError}
         />
-        <h4>Db Node Selector</h4>
+        <h4>Node Selector</h4>
         <KeyPairEdit
           newValues={newDbNodeSelector}
           setNewValues={setNewDbNodeSelector}
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/EditTenantMonitoringModal.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/EditTenantMonitoringModal.tsx
index 5f75b1284..a37d6fce8 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/EditTenantMonitoringModal.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/EditTenantMonitoringModal.tsx
@@ -203,9 +203,11 @@ const EditTenantMonitoringModal = ({
     <ModalWrapper
       onClose={() => onClose(true)}
       modalOpen={open}
-      title="Edit Prometheus Monitoring Configuration"
+      title="Edit Monitoring Configuration"
     >
       <form noValidate autoComplete="off" onSubmit={submitMonitoringInfo}>
+        <h2>Prometheus configuration</h2>
+        <hr className={classes.hrClass} />
         <h4>Image</h4>
         <InputBoxWrapper
           id={`image`}
@@ -258,7 +260,7 @@ const EditTenantMonitoringModal = ({
           key={`diskCapacityGB`}
           error={validationErrors[`diskCapacityGB`] || ""}
         />
-        <h4>Service Account Name</h4>
+        <h4>Service Account</h4>
         <InputBoxWrapper
           id={`serviceAccountName`}
           label={""}
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
index 6912a5fd3..db976ed91 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
@@ -507,22 +507,7 @@ const TenantDetails = ({
               to: getRoutePath("pods"),
             },
           }}
-          {{
-            tabConfig: {
-              label: "Volumes",
-              value: "volumes",
-              component: Link,
-              to: getRoutePath("volumes"),
-            },
-          }}
-          {{
-            tabConfig: {
-              label: "License",
-              value: "license",
-              component: Link,
-              to: getRoutePath("license"),
-            },
-          }}
+
           {{
             tabConfig: {
               label: "Monitoring",
@@ -539,6 +524,22 @@ const TenantDetails = ({
               to: getRoutePath("logging"),
             },
           }}
+          {{
+            tabConfig: {
+              label: "Volumes",
+              value: "volumes",
+              component: Link,
+              to: getRoutePath("volumes"),
+            },
+          }}
+          {{
+            tabConfig: {
+              label: "License",
+              value: "license",
+              component: Link,
+              to: getRoutePath("license"),
+            },
+          }}
         </VerticalTabs>
       </PageLayout>
     </Fragment>
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantLogging.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantLogging.tsx
index 17cd681a7..c2a2b98b1 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantLogging.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantLogging.tsx
@@ -236,6 +236,8 @@ const TenantLogging = ({
         <Paper className={classes.paperContainer}>
           <Grid container>
             <Grid item xs={12}>
+              <h2>Logging API Service Details</h2>
+              <hr className={classes.hrClass} />
               <table width={"100%"}>
                 <tbody>
                   {loadingTenant ? (
@@ -257,9 +259,7 @@ const TenantLogging = ({
                         <td>{logInfo?.diskCapacityGB}</td>
                       </tr>
                       <tr>
-                        <td className={classes.titleCol}>
-                          Service Account Name:
-                        </td>
+                        <td className={classes.titleCol}>Service Account:</td>
                         <td>{logInfo?.serviceAccountName}</td>
                       </tr>
                       <tr>
@@ -317,6 +317,8 @@ const TenantLogging = ({
                   )}
                 </tbody>
               </table>
+
+              <h2>Database Details</h2>
               <hr className={classes.hrClass} />
               <table width={"100%"}>
                 <tbody>
@@ -329,18 +331,16 @@ const TenantLogging = ({
                   ) : (
                     <Fragment>
                       <tr>
-                        <td className={classes.titleCol}>Db Image:</td>
+                        <td className={classes.titleCol}>Postgres Image:</td>
                         <td>{logInfo?.dbImage}</td>
                       </tr>
                       <tr>
-                        <td className={classes.titleCol}>
-                          Db Service Account Name:
-                        </td>
+                        <td className={classes.titleCol}>Service Account:</td>
                         <td>{logInfo?.dbServiceAccountName}</td>
                       </tr>
                       <tr>
                         <td>
-                          <h4>Db Labels</h4>
+                          <h4>Labels</h4>
                         </td>
                       </tr>
                       <tr>
@@ -351,13 +351,13 @@ const TenantLogging = ({
                                 ? logInfo.dbLabels
                                 : []
                             }
-                            recordName="Db Labels"
+                            recordName="labels"
                           />
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          <h4>Db Annotations</h4>
+                          <h4>Annotations</h4>
                         </td>
                       </tr>
                       <tr>
@@ -369,13 +369,13 @@ const TenantLogging = ({
                                 ? logInfo.dbAnnotations
                                 : []
                             }
-                            recordName="Db Annotations"
+                            recordName="annotations"
                           />
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          <h4>Db Node Selector</h4>
+                          <h4>Node Selector</h4>
                         </td>
                       </tr>
                       <tr>
@@ -387,7 +387,7 @@ const TenantLogging = ({
                                 ? logInfo.dbNodeSelector
                                 : []
                             }
-                            recordName="Db Node Selector"
+                            recordName="node selectors"
                           />
                         </td>
                       </tr>
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantMonitoring.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantMonitoring.tsx
index 3e30a7064..b90c3d19f 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantMonitoring.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantMonitoring.tsx
@@ -223,54 +223,58 @@ const TenantMonitoring = ({
                       </td>
                     </tr>
                   ) : (
-                    monitoringInfo !== undefined && (
-                      <Fragment>
-                        {monitoringInfo.image != null && (
-                          <tr>
-                            <td className={classes.titleCol}>Image:</td>
-                            <td>{monitoringInfo.image}</td>
-                          </tr>
-                        )}
-                        {monitoringInfo.sidecarImage != null && (
-                          <tr>
-                            <td className={classes.titleCol}>Sidecar Image:</td>
-                            <td>{monitoringInfo?.sidecarImage}</td>
-                          </tr>
-                        )}
-                        {monitoringInfo.initImage != null && (
-                          <tr>
-                            <td className={classes.titleCol}>Init Image:</td>
-                            <td>{monitoringInfo?.initImage}</td>
-                          </tr>
-                        )}
-                        {monitoringInfo.diskCapacityGB != null && (
-                          <tr>
-                            <td className={classes.titleCol}>
-                              Disk Capacity (GB):
-                            </td>
-                            <td>{monitoringInfo?.diskCapacityGB}</td>
-                          </tr>
-                        )}
-                        {monitoringInfo.serviceAccountName != null && (
-                          <tr>
-                            <td className={classes.titleCol}>
-                              Service Account Name:
-                            </td>
-                            <td>{monitoringInfo?.serviceAccountName}</td>
-                          </tr>
-                        )}
-                        {monitoringInfo.storageClassName != null && (
-                          <tr>
-                            <td className={classes.titleCol}>
-                              Storage Class Name:
-                            </td>
-                            <td>{monitoringInfo?.storageClassName}</td>
-                          </tr>
-                        )}
-                        {monitoringInfo.labels != null &&
-                          monitoringInfo.labels.length > 0 && (
+                    <Fragment>
+                      {monitoringInfo.image != null && (
+                        <tr>
+                          <td className={classes.titleCol}>Image:</td>
+                          <td>{monitoringInfo.image}</td>
+                        </tr>
+                      )}
+                      {monitoringInfo.sidecarImage != null && (
+                        <tr>
+                          <td className={classes.titleCol}>Sidecar Image:</td>
+                          <td>{monitoringInfo?.sidecarImage}</td>
+                        </tr>
+                      )}
+                      {monitoringInfo.initImage != null && (
+                        <tr>
+                          <td className={classes.titleCol}>Init Image:</td>
+                          <td>{monitoringInfo?.initImage}</td>
+                        </tr>
+                      )}
+                      {monitoringInfo.diskCapacityGB != null && (
+                        <tr>
+                          <td className={classes.titleCol}>
+                            Disk Capacity (GB):
+                          </td>
+                          <td>{monitoringInfo?.diskCapacityGB}</td>
+                        </tr>
+                      )}
+                      {monitoringInfo.serviceAccountName != null && (
+                        <tr>
+                          <td className={classes.titleCol}>
+                            Service Account Name:
+                          </td>
+                          <td>{monitoringInfo?.serviceAccountName}</td>
+                        </tr>
+                      )}
+                      {monitoringInfo.storageClassName != null && (
+                        <tr>
+                          <td className={classes.titleCol}>
+                            Storage Class Name:
+                          </td>
+                          <td>{monitoringInfo?.storageClassName}</td>
+                        </tr>
+                      )}
+                      {monitoringInfo.labels != null &&
+                        monitoringInfo.labels.length > 0 && (
+                          <>
+                            <tr>
+                              <td>
+                                <h4>Labels</h4>
+                              </td>
+                            </tr>
                             <tr>
-                              <h4>Labels</h4>
                               <td className={classes.titleCol}>
                                 <KeyPairView
                                   records={monitoringInfo.labels}
@@ -278,11 +282,17 @@ const TenantMonitoring = ({
                                 />
                               </td>
                             </tr>
-                          )}
-                        {monitoringInfo.annotations != null &&
-                          monitoringInfo.annotations.length > 0 && (
+                          </>
+                        )}
+                      {monitoringInfo.annotations != null &&
+                        monitoringInfo.annotations.length > 0 && (
+                          <>
+                            <tr>
+                              <td>
+                                <h4>Annotations</h4>
+                              </td>
+                            </tr>
                             <tr>
-                              <h4>Annotations</h4>
                               <td className={classes.titleCol}>
                                 <KeyPairView
                                   records={monitoringInfo.annotations}
@@ -290,21 +300,21 @@ const TenantMonitoring = ({
                                 />
                               </td>
                             </tr>
-                          )}
-                        {monitoringInfo.nodeSelector != null &&
-                          monitoringInfo.nodeSelector.length > 0 && (
-                            <tr>
-                              <h4>Node Seletor</h4>
-                              <td className={classes.titleCol}>
-                                <KeyPairView
-                                  records={monitoringInfo.nodeSelector}
-                                  recordName="Node Selector"
-                                />
-                              </td>
-                            </tr>
-                          )}
-                      </Fragment>
-                    )
+                          </>
+                        )}
+                      {monitoringInfo.nodeSelector != null &&
+                        monitoringInfo.nodeSelector.length > 0 && (
+                          <tr>
+                            <h4>Node Seletor</h4>
+                            <td className={classes.titleCol}>
+                              <KeyPairView
+                                records={monitoringInfo.nodeSelector}
+                                recordName="Node Selector"
+                              />
+                            </td>
+                          </tr>
+                        )}
+                    </Fragment>
                   )}
                 </tbody>
               </table>