update error message and added sorting

Author: utdevnp

src/components/configmap/index.tsx

@@ -16,13 +16,11 @@ const ConfigMapTab = (props: any) => {
         ].filter(Boolean).join('&');
         try {
             const response = await httpRequest.get(`/api/deploy?${queryString}&loadConfig=true`);
-            if (response && response.data.length) {
-                saveConfigData(response.data);
-                setConfigMapData(response.data);
-            }
 
             if (response && response.data && response.data.length > 0) {
                 props.closeLoading(false);
+                saveConfigData(response.data);
+                setConfigMapData(response.data);
             }
         } catch (error: any) {
             setError(error.message);
@@ -42,7 +40,11 @@ const ConfigMapTab = (props: any) => {
             }
         }
 
-        saveConfigData(confData);
+        const sortedDeployments = confData.map(group => 
+            group.sort((a, b) => (a?.name ?? null).localeCompare(b?.name ?? null))
+        );
+          
+        saveConfigData(sortedDeployments);
         getConfigFromLocal();
     }
 
@@ -64,24 +66,26 @@ const ConfigMapTab = (props: any) => {
         <div>
             <div> {error ? error : ""}</div>
             <div className="flex flex-row p-2 gap-8">
-            {
-                configMapData?.map((deployment: any, index: number) => (
+                {
+                    configMapData?.map((deployment: any, index: number) => (
 
-                    <div key={index} className="flex flex-col gap-2">
-                        <h3 className="font-bold flex-row text-l p-2">
-                            {`${index + 1}.`} <span className="text-blue-500"> {index == 0 ? findName(workLoadOne || workLoadTwo) : findName(workLoadTwo)} </span> <small className="text-sm">({index == 0 ? workLoadOne || workLoadTwo : workLoadTwo})</small>
-                            &nbsp; <small className="text-xs font-light text-green-500">{loading ? "Loading..." : ""}</small>
-                        </h3>
-                        <div className="flex flex-col gap-2">
-                            <CountTable deployments={deployment} />
-                            <ConfigMapDeployments deployments={deployment} updateDataWithIndex={updateDataWithIndex} title="Services" />
+                        <div key={index} className="flex flex-col gap-2">
+                            <h3 className="font-bold flex-row text-l p-2">
+                                {`${index + 1}.`} <span className="text-blue-500">
+                                    {index == 0 ? findName(workLoadOne || workLoadTwo) : findName(workLoadTwo)} </span>
+                                <small className="text-sm">({index == 0 ? workLoadOne || workLoadTwo : workLoadTwo})</small>
+                                &nbsp; <small className="text-xs font-light text-green-500">{loading ? "Loading..." : ""}</small>
+                            </h3>
+                            <div className="flex flex-col gap-2">
+                                <CountTable deployments={deployment} />
+                                <ConfigMapDeployments deployments={deployment} updateDataWithIndex={updateDataWithIndex} title="Services" />
+                            </div>
                         </div>
-                    </div>
-                ))
-            }
+                    ))
+                }
+            </div>
         </div>
-        </div>
-       
+
     );
 };
 

src/components/configmap/tables/countInfo.tsx

@@ -2,8 +2,8 @@ import { deploymentHavingIssue, filterDeployments } from '@/functions';
 import React from 'react';
 
 const CountTable = (props: any) => {
-  const allServices = filterDeployments(props.deployments);
-  const deploymentHavingIssues = deploymentHavingIssue(allServices);
+  const allServices = props.deployments? filterDeployments(props.deployments) : [];
+  const deploymentHavingIssues = allServices.length ? deploymentHavingIssue(allServices): []
 
   return (
     <div className="overflow-x-auto">

src/components/configmap/tables/deploymentItem.tsx

@@ -10,7 +10,7 @@ const ConfigMapDeploymentList = ({ deployment, index, updateDataWithIndex }: { d
                 <td className="border border-gray-300 px-4 py-2">{deployment.name}</td>
                 <td className="border border-gray-300 px-4 py-2 block-inline cursor-pointer"> <p title='Replicas'>{deployment.replicas}</p></td>
                 <td className="border border-gray-300 px-4 py-2 block-inline cursor-pointer"> <p title='Available'>{deployment.available}</p></td>
-                <td className="border border-gray-300 px-4 py-2 block-inline"> <a href="javascript:;" onClick={() => updateDataWithIndex(index, deployment.isConfigMapOpen ? false : true)} className="text-blue-500">   {deployment.isConfigMapOpen ? "close" : "open"}</a></td>
+                <td className="border border-gray-300 px-4 py-2 block-inline "> <a onClick={() => updateDataWithIndex(index, deployment.isConfigMapOpen ? false : true)} className="text-blue-500 cursor-pointer">   {deployment.isConfigMapOpen ? "close" : "open"}</a></td>
             </tr>
             <tr className={deployment.isConfigMapOpen ? "" : "hidden"}>
                 <td className={`border border-gray-300 px-4 py-2 text-sm gap-2 ${deployment.setCurrentView ? "bg-green-100" : ""}  `} colSpan={5}>
@@ -19,15 +19,15 @@ const ConfigMapDeploymentList = ({ deployment, index, updateDataWithIndex }: { d
                             <tbody>
                             {
                                 deployment && configMapArray.map((item: any, index: number) => {
-                                     return<tr className="border-b-gray-50"> <td>{index+1}</td> <td> {item[0]} </td><td> {item[1]} </td></tr>
+                                     return<tr  className="border-b-gray-50"><td>{index+1}</td> <td>{item[0]} </td><td>{item[1]}</td></tr>
                                 })
                             } 
                             </tbody>
                         </table>
                     </div>
                     <div className="gap-3">
                         <hr className=" border-gray-300 mt-3 mb-3"></hr>
-                        <a className="text-blue-500" href="javascript:;" onClick={() => updateDataWithIndex(index, deployment.setCurrentView ? false : true, false)} >  {deployment.setCurrentView ? "unset" : "set"}  current view</a>
+                        <a className="text-blue-500 cursor-pointer" onClick={() => updateDataWithIndex(index, deployment.setCurrentView ? false : true, false)} >  {deployment.setCurrentView ? "unset" : "set"}  current view</a>
                     </div>
 
                 </td>

src/components/keyvault/index.tsx

@@ -20,8 +20,10 @@ const KeyVaultTab = (props: any) => {
     ].filter(Boolean).join('&');
     try {
       const response = await httpRequest.get(`/api/keyvault?${queryString}`);
-      setData(response.data);
-      saveKvData(response.data);
+      if (response?.data?.length) {
+        setData(response.data);
+        saveKvData(response.data);
+      }
     } catch (error: any) {
       setError(error.message);
       props.closeLoading(false);
@@ -34,7 +36,7 @@ const KeyVaultTab = (props: any) => {
   }
   const getFromLc = () => {
     const kvData = getKvData();
-    const getKeys = kvData[0];
+    const getKeys = kvData && kvData.length ? kvData[0] : "";
     setKvKeys(Object.keys(getKeys).map((item) => item));
     setData(kvData);
   }

src/functions/localstorage.ts

@@ -10,12 +10,12 @@ export const getDeploymentsData = () => {
 }
 
 export const saveConfigData = (deployments: Deployment[]) => {
-    localStorage.setItem('configMap', JSON.stringify(deployments));
+    localStorage.setItem('configMap', btoa(JSON.stringify(deployments)));
 }
 
 export const getConfigData = () => {
     const deployments = localStorage.getItem('configMap');
-    return deployments ? JSON.parse(deployments) : [];
+    return deployments ? JSON.parse(atob(deployments)) : [];
 }
 
 export const saveKvData = (kv: any) => {

src/setting.ts

@@ -1,17 +1,38 @@
-
 export const workLoads = [
     {
-        name: "dev2", // set env name 
-        value: "aks-workload-name", // set env workload name as value
+        name: "dev2",
+        value: "aks-dev2-non-pci-eastus",
+    }, {
+        name: "dev3",
+        value: "aks-dev3-non-pci-eastus",
+    },
+    {
+        name: "uat2",
+        value: "aks-uat2-non-pci-eastus",
+    },
+    {
+        name: "prod",
+        value: "aks-prod-non-pci-eastus",
     }
 ];
 
 export const keyVaults = [
     {
-        name: "aks-workload-name", // your aks workload name
-        value: "key-vault-name", // your key vault name
+        name: "aks-dev2-non-pci-eastus",
+        value: "kvDev2NonPCI-US-E",
+    }, {
+        name: "kv-dev3-non-pci-us-e",
+        value: "aks-dev3-non-pci-eastus",
+    },
+    {
+        name: "kv-uat2-non-pci-us-e",
+        value: "aks-uat2-non-pci-eastus",
+    },
+    {
+        name: "kv-prod-non-pci-us-e",
+        value: "aks-prod-non-pci-eastus",
     }
 ]
 
 export const DEFAULT_NAMESPACE = "default";
-export const DEFAULT_IGNORED_NAME = "redis";
+export const DEFAULT_IGNORED_NAME = "zipkin";