update error message and added sorting

Author: utdevnp

src/components/configmap/index.tsx

@@ -9,6 +9,7 @@ const ConfigMapTab = (props: any) => {
     const { workLoadOne, workLoadTwo, loading, activeTab } = props;
     const [configMapData, setConfigMapData] = useState<any>([]);
     const [error, setError] = useState("");
+    const [isMatch, setIsMatch] = useState(true);
     const getDeployments = async (props: any) => {
         let queryString = [
             props.workLoadOne ? `workload1=${props.workLoadOne}` : '',
@@ -35,6 +36,7 @@ const ConfigMapTab = (props: any) => {
         for (let i = 0; i < confData.length; i++) {
             if (isOpenFlag) {
                 confData[i][index].isConfigMapOpen = value
+                confData[i][index].isConfigMapOther = Object.entries(confData[i][index].configMaps)
             } else {
                 confData[i][index].setCurrentView = value
             }
@@ -48,6 +50,9 @@ const ConfigMapTab = (props: any) => {
         getConfigFromLocal();
     }
 
+    const countMaps = (count) => {
+        setIsMatch(count + count === count * 2);
+    }
     const getConfigFromLocal = () => {
         setConfigMapData(getConfigData());
     }
@@ -67,17 +72,18 @@ const ConfigMapTab = (props: any) => {
             <div> {error ? error : ""}</div>
             <div className="flex flex-row p-2 gap-8">
                 {
+                    
                     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} />
+                                <CountTable deployments={deployment} configMapData={configMapData} index={index} countMaps={countMaps} isMatch={isMatch}/>
                                 <ConfigMapDeployments deployments={deployment} updateDataWithIndex={updateDataWithIndex} title="Services" />
                             </div>
                         </div>

src/components/configmap/tables/countInfo.tsx

@@ -1,25 +1,25 @@
-import { deploymentHavingIssue, filterDeployments } from '@/functions';
+import { deploymentHavingIssue, filterDeployments, getConfigMapDifferenceCount } from '@/functions';
 import React from 'react';
 
 const CountTable = (props: any) => {
   const allServices = props.deployments? filterDeployments(props.deployments) : [];
-  const deploymentHavingIssues = allServices.length ? deploymentHavingIssue(allServices): []
-  
+  const count = getConfigMapDifferenceCount(props.deployments);
+  props.countMaps( count, props.index);
+
   return (
     <div className="overflow-x-auto">
       <table className="w-full text-center table-auto border-collapse border border-gray-300">
         <thead>
           <tr className="bg-gray-200">
             <th className="border border-gray-300 px-4 py-2">Services</th>
-            <th className="border border-gray-300 px-4 py-2">Config Item</th>
+           
             <th className="border border-gray-300 px-4 py-2">Diff</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td className="border border-gray-300 px-4 py-2">{allServices.length}</td>
-            <td className="border border-gray-300 px-4 py-2">2</td>
-            <td className={`border border-gray-300 px-4 py-2 ${deploymentHavingIssues.length ? "text-red-500": "text-green-500"}`}>{deploymentHavingIssues.length}</td>
+            <td className={`border border-gray-300 px-4 py-2 ${props.isMatch ? "text-green-500": "text-red-500"}`}>{count}</td>
           </tr>
         </tbody>
       </table>

src/components/configmap/tables/deploymentItem.tsx

@@ -19,7 +19,7 @@ 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>

src/functions/index.ts

@@ -94,3 +94,14 @@ export const findDifferentNamesInList = (list: any[]) => {
     return keyVaults.find((item: { value: any; }) => item.value == workload)?.name;
   }
 
+
+  export const getConfigMapDifferenceCount = (deployments: any) => {
+    let totalConfigMapKeys = 0;
+
+    deployments.forEach(deployment => {
+      totalConfigMapKeys += deployment.configMaps ? Object.keys(deployment.configMaps).length : 0;
+    });
+
+    return totalConfigMapKeys;
+  }
+