add local storage and load faster

Author: utdevnp

src/app/page.tsx

@@ -11,7 +11,7 @@ export default function Home() {
   const [loading, setLoading] = useState<boolean>(true);
   const [workLoadOne, setWorkLoadOne] = useState<string>('');
   const [workLoadTwo, setWorkLoadTwo] = useState<string>('');
-  const [activeTab, setActiveTab] = useState(tabs[0]);
+  const [activeTab, setActiveTab] = useState(tabs[1]);
 
   const setWorkLoadValueOne = (e: any) => {
     setWorkLoadOne(e.target.value);
@@ -88,7 +88,7 @@ export default function Home() {
 
           <div className="mt-4 tab body">
             {activeTab === "Deployments" && <DeploymentTab workLoadOne={workLoadOne} workLoadTwo={workLoadTwo} loading={loading} closeLoading={closeLoading} />}
-            {activeTab === "Config Map" && <ConfigMapTab />}
+            {activeTab === "Config Map" && <ConfigMapTab loading={loading} closeLoading={closeLoading}  workLoadOne={workLoadOne} workLoadTwo={workLoadTwo}/>}
             {activeTab === "Key Vault" && <p>📜 Key vaults</p>}
           </div>
         </div>

src/components/configmap/index.tsx

@@ -1,7 +1,36 @@
-const ConfigMapTab = () => {
+import { useEffect, useState } from "react";
+import { getDeploymentsData } from "@/functions/localstorage";
+import { findName } from "@/functions";
+import CountTable from "./tables/countInfo";
+import ConfigMapDeployments from "./tables/deployments";
+
+const ConfigMapTab = (props: any) => {
+    const { workLoadOne, workLoadTwo, loading } = props;
+    const [configMapData, setConfigMapData] = useState<any>([]);
+    const [deploymentsDiff, setDeploymentsDiff] = useState<any>(null);
+    useEffect(() => {
+        setConfigMapData(getDeploymentsData());
+        props.closeLoading(false);
+    }, []);
+
+
     return (
-        <div>
-        <h1>ConfigMap</h1>
+        <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} />
+                            <ConfigMapDeployments deployments={deployment} title="Services" />
+                        </div>
+                    </div>
+                ))
+            }
         </div>
     );
 };

src/components/configmap/tables/configItemList.tsx

@@ -0,0 +1,10 @@
+
+import { getDeploymentStatus } from "@/functions";
+
+const ConfigMapDeploymentListItems = ({ deployment, index }: { deployment: any,index: number }) => {
+    return (
+        <tr><td className="border border-gray-300 px-4 py-2">{index+1}</td> </tr>
+    )
+}
+
+export default ConfigMapDeploymentListItems;

src/components/configmap/tables/countInfo.tsx

@@ -0,0 +1,30 @@
+import { deploymentHavingIssue, filterDeployments } from '@/functions';
+import React from 'react';
+
+const CountTable = (props: any) => {
+  const allServices = filterDeployments(props.deployments);
+  const deploymentHavingIssues = deploymentHavingIssue(allServices);
+  
+  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>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default CountTable;

src/components/configmap/tables/deploymentItem.tsx

@@ -0,0 +1,36 @@
+import { getDeploymentStatus } from "@/functions";
+
+const ConfigMapDeploymentList = ({ deployment, index }: { deployment: any, index: number }) => {
+
+    console.log("deploymentcmap", deployment)
+    return (
+        <>
+            <tr>
+                <td className="border border-gray-300 px-4 py-2">{index + 1}</td>
+                <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="#" className="text-blue-500">Open / Close </a></td>
+            </tr>
+            <tr>
+                <td className="border border-gray-300 px-4 py-2 text-sm gap-2 bg-green-100 " colSpan={5}>
+                    <div className="gap-3 p-2">
+                        <ol type="1">
+                            <li>Swagger API</li>
+                            <li>Swagger API2</li>
+                        </ol>
+                    </div>
+                    <div className="gap-3">
+                        <hr className=" border-gray-300 mt-3 mb-3"></hr>
+                        <a className="text-blue-500 underline" href="">Set current</a>
+                    </div>
+
+                </td>
+            </tr>
+
+        </>
+
+    )
+}
+
+export default ConfigMapDeploymentList;

src/components/configmap/tables/deployments.tsx

@@ -0,0 +1,24 @@
+
+import React from 'react';
+import { filterDeployments } from '@/functions';
+import ConfigMapDeploymentList from './deploymentItem';
+
+const ConfigMapDeployments = (props: any) => {
+  const { deployments, type } = props;
+  const deploymentList: any[] = filterDeployments(deployments);
+
+  return (
+    <div className="overflow-x-auto">
+      { deploymentList.length ? <h4 className={type == 'diff' ? 'text-yellow-600 gap-2': ''}>{props.title}</h4> : <></>}
+      <table className="w-full table-auto border-collapse border border-gray-300 mt-2">
+        <tbody>
+          {deploymentList.map((deployment: any, index: number) => (
+            <ConfigMapDeploymentList key={index} index={index} deployment={deployment} />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default ConfigMapDeployments;

src/components/deployment/main.tsx

@@ -18,27 +18,32 @@ const DeploymentTab = (props: any) => {
       props.workLoadOne ? `workload1=${props.workLoadOne}` : '',
       props.workLoadTwo ? `workload2=${props.workLoadTwo}` : ''
     ].filter(Boolean).join('&');
+    try {
+      const response = await httpRequest.get(`/api/deploy?${queryString}`);
+      saveDeploymentsData(response.data);
+      setData(response.data);
+      setDataDiff(findDifferentNamesInList(response.data as unknown as any));
 
-    const response = await httpRequest.get(`/api/deploy?${queryString}`);
-    saveDeploymentsData(response.data);
-    setData(response.data);
-    setDataDiff(findDifferentNamesInList(response.data as unknown as any));
-
-    if (response && response.data && response.data.length > 0) {
+      if (response && response.data && response.data.length > 0) {
+        props.closeLoading(false);
+      }
+    } catch (error) {
+      console.error('Error fetching deployments:', error);
       props.closeLoading(false);
     }
+
   };
 
-  useEffect(() => { 
+  useEffect(() => {
     setData(getDeploymentsData());
     props.closeLoading(false);
   }, []);
 
-  useEffect(() => { 
+  useEffect(() => {
     if (workLoadOne || workLoadTwo) {
       getDeployments(props);
     }
-    
+
   }, [loading]);
 
 

src/pages/api/deploy.ts

@@ -96,6 +96,8 @@ async function getDeployments(context: string, loadConfig: boolean): Promise<Dep
         replicas,
         available,
         configMaps,
+        isConfigMapOpen: false,
+        setCurrentView: false
       });
     }
 

src/types.ts

@@ -4,4 +4,6 @@ export interface Deployment {
     replicas: number;
     available: number;
     configMaps: any;
+    isConfigMapOpen: boolean;
+    setCurrentView: boolean;
   }