added key vault keys mao

Author: utdevnp

package.json

@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@azure/identity": "^4.8.0",
+    "@azure/keyvault-secrets": "^4.9.0",
     "@kubernetes/client-node": "^1.1.0",
     "axios": "^1.8.4",
     "bootstrap": "5.3.3",

src/app/page.tsx

@@ -4,14 +4,15 @@ import { workLoads } from "@/setting";
 import DeploymentTab from "@/components/deployment/main";
 import ConfigMapTab from "@/components/configmap";
 import { getWorkLoadData, saveWorkLoadData } from "@/functions/localstorage";
+import KeyVaultTab from "@/components/keyvault";
 
 const tabs = ["Deployments", "Config Map", "Key Vault"];
 
 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[1]);
+  const [activeTab, setActiveTab] = useState(tabs[0]);
 
   const setWorkLoadValueOne = (e: any) => {
     setWorkLoadOne(e.target.value);
@@ -89,7 +90,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 loading={loading} closeLoading={closeLoading}  workLoadOne={workLoadOne} workLoadTwo={workLoadTwo}/>}
-            {activeTab === "Key Vault" && <p>📜 Key vaults</p>}
+            {activeTab === "Key Vault" && <KeyVaultTab/>}
           </div>
         </div>
       </main>

src/components/configmap/tables/configItemList.tsx

@@ -1,6 +1,4 @@
 
-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>

src/components/configmap/tables/deploymentItem.tsx

@@ -1,8 +1,5 @@
-import { getDeploymentStatus } from "@/functions";
 
 const ConfigMapDeploymentList = ({ deployment, index }: { deployment: any, index: number }) => {
-
-    console.log("deploymentcmap", deployment)
     return (
         <>
             <tr>

src/components/keyvault/index.tsx

@@ -0,0 +1,88 @@
+import { getKvData, saveKvData } from "@/functions/localstorage";
+import httpRequest from "axios";
+import { useEffect, useState } from "react";
+import KeyVaultsDetail from "./table/listkv";
+import { findKv, findName } from "@/functions";
+import CompareKv from "./kvValues";
+
+const KeyVaultTab = (props: any) => {
+  const { workLoadOne, workLoadTwo, loading } = props;
+  const [keyVaults, setData] = useState<any | null>([]);
+  const [kvKeys, setKvKeys] = useState<any>([]);
+  const [kvSelected, setKvSelected] = useState("");
+  const [selectedKey, setSelectedKey] = useState([]);
+
+  const getKeyVaults = async (props: any) => {
+    let queryString = [
+      props.workLoadOne ? `workload1=${props.workLoadOne}` : '',
+      props.workLoadTwo ? `workload2=${props.workLoadTwo}` : ''
+    ].filter(Boolean).join('&');
+    try {
+      const response = await httpRequest.get(`/api/keyvault?`);
+      //   saveDeploymentsData(response.data);
+      setData(response.data);
+      saveKvData(response.data);
+      //   setDataDiff(findDifferentNamesInList(response.data as unknown as any));
+
+      //   if (response && response.data && response.data.length > 0) {
+      //     props.closeLoading(false);ss
+      //   }
+    } catch (error) {
+      console.error('Error fetching deployments:', error);
+      props.closeLoading(false);
+    }
+
+  };
+
+  const setKeyName = (e: any) => {
+    setKvSelected(e.target.value);
+  }
+  const getFromLc = () => {
+    const kvData = getKvData();
+    const getKeys = kvData[0];
+    setKvKeys(Object.keys(getKeys).map((item) => item));
+    setData(kvData);
+  }
+
+  useEffect(() => {
+    getFromLc();
+  }, []);
+
+  if (!keyVaults.length || !kvKeys.length) {
+    return;
+  }
+  return (
+    <>
+      <div>
+        <select onChange={setKeyName} className="p-2 text-l bg-gray-100 rounded-lg">
+          <option value="">Choose Keys </option>
+          {
+            kvKeys && kvKeys.map((keys: string, index: number) => (
+              <option value={keys} key={index}>{keys}</option>
+            ))
+          }
+        </select>
+        <CompareKv selectedKey={kvSelected} deployments={keyVaults} />
+      </div>
+      <div className="flex flex-row p-2 gap-8">
+        {
+          keyVaults.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 ? findKv(workLoadOne || workLoadTwo) : findKv(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">
+                <KeyVaultsDetail deployments={deployment} title="Keys" />
+              </div>
+            </div>
+          ))
+        }
+      </div>
+    </>
+
+  )
+}
+
+export default KeyVaultTab;

src/components/keyvault/kvValues.tsx

@@ -0,0 +1,16 @@
+import KvFullDetail from "./table/itemfulldetail";
+
+const CompareKv = (props: any) => {
+    const { deployments, selectedKey } = props;
+    const arrayData = Object.entries(deployments);
+    return (
+        <div className="flex flex-row p-2 gap-8 flex-text-wrap">
+
+            {arrayData.map((deployment: any, index: number) => (
+                <KvFullDetail key={index} index={index} deployment={deployment} selectedKey={selectedKey} />
+            ))}
+
+        </div>);
+};
+
+export default CompareKv;

src/components/keyvault/table/itemfulldetail.tsx

@@ -0,0 +1,29 @@
+const KvFullDetail = ({ deployment, index, selectedKey }: { deployment: any, index: number, selectedKey: any }) => {
+    let allKeys = []
+    try {
+        allKeys = selectedKey ? Object.entries(JSON.parse(atob(deployment[1][selectedKey]))) : [];
+    } catch (error: any) {
+        return <>{error.message}</>
+    }
+
+    return (
+        <div>
+            <table className="w-full table-auto border-collapse border border-gray-300 mt-2 text-sm">
+                <tbody>
+                    {
+                        allKeys.map((item: any, index: number) => {
+                            return <tr key={index}>
+                                <td className="border border-gray-300 px-4 py-2">{index + 1}</td>
+                                <td className="border border-gray-300 px-4 py-2">{item[0]}</td>
+                                <td className="border border-gray-300 px-4 py-2 text-wrap"></td>
+                            </tr>
+                        })
+                    }
+
+                </tbody>
+            </table>
+        </div>
+    )
+}
+
+export default KvFullDetail;

src/components/keyvault/table/itemkv.tsx

@@ -0,0 +1,10 @@
+const KeyVaultItem = ({ deployment, index }: { deployment: any,index: number }) => {
+    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[0]}</td>
+        </tr>
+    )
+}
+
+export default KeyVaultItem;

src/components/keyvault/table/listkv.tsx

@@ -0,0 +1,22 @@
+
+import React from 'react';
+import KeyVaultItem from './itemkv';
+const KeyVaultsDetail = (props: any) => {
+  const { deployments } = props;
+  const deploymentList: any[] = Object.entries( deployments);
+
+  return (
+    <div className="overflow-x-auto">
+       <h4>{props.title}</h4>
+      <table className="w-full table-auto border-collapse border border-gray-300 mt-2">
+        <tbody>
+          {deploymentList.map((deployment: any, index: number) => (
+            <KeyVaultItem key={index} index={index} deployment={deployment} />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default KeyVaultsDetail;

src/functions/index.ts

@@ -88,4 +88,8 @@ export const findDifferentNamesInList = (list: any[]) => {
 
   export const findName = ( workload: any) => {
     return workLoads.find((item: { value: any; }) => item.value == workload)?.name;
+  }
+
+  export const findKv = ( workload: any) => {
+    return workLoads.find((item: { value: any; }) => item.value == workload)?.name;
   }

src/functions/localstorage.ts

@@ -18,11 +18,20 @@ export const getConfigData = () => {
     return deployments ? JSON.parse(deployments) : [];
 }
 
+export const saveKvData = (kv: any) => {
+    localStorage.setItem('kv892', btoa(JSON.stringify(kv)));
+}
+
+export const getKvData = () => {
+    const deployments = localStorage.getItem('kv892');
+    return deployments ? JSON.parse(atob(deployments)) : [];
+}
+
 export const saveWorkLoadData = (workload: string, value: string) => {
     localStorage.setItem(workload, JSON.stringify(value));
 }
 
 export const getWorkLoadData = (workload:string) => {
     const deployments = localStorage.getItem(workload);
     return deployments ? JSON.parse(deployments) : [];
-}
+}

src/pages/api/deploy.ts

@@ -3,32 +3,6 @@ import { KubeConfig, AppsV1Api, CoreV1Api, CoreV1ApiReadNamespacedConfigMapReque
 import { DEFAULT_NAMESPACE } from '@/setting';
 import { Deployment } from '@/types';
 
-const extractConfigMaps = (podSpec: any): string[] => {
-  const configMaps = new Set<string>();
-
-  const containers = podSpec?.containers || [];
-  containers.forEach((container: { env?: any; envFrom?: any }) => {
-    (container.env || []).forEach((env: { valueFrom?: { configMapKeyRef?: { name: string } } }) => {
-      if (env.valueFrom?.configMapKeyRef?.name) {
-        configMaps.add(env.valueFrom.configMapKeyRef.name);
-      }
-    });
-    (container.envFrom || []).forEach((envFrom: { configMapRef?: { name: string } }) => {
-      if (envFrom.configMapRef?.name) {
-        configMaps.add(envFrom.configMapRef.name);
-      }
-    });
-  });
-
-  (podSpec?.volumes || []).forEach((volume: { configMap?: { name: string } }) => {
-    if (volume.configMap?.name) {
-      configMaps.add(volume.configMap.name);
-    }
-  });
-
-  return Array.from(configMaps);
-};
-
 async function getConfigMapData(apiClient: CoreV1Api, namespace: string, configMapName: string) {
 
       try {

src/pages/api/keyvault.ts

@@ -0,0 +1,60 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { DefaultAzureCredential } from "@azure/identity";
+import { SecretClient } from "@azure/keyvault-secrets";
+
+
+async function getKeyVaults(keyVaultName: string) {
+  try {
+    const keyVaultUrl = `https://${keyVaultName}.vault.azure.net`;
+    
+    const credential = new DefaultAzureCredential();
+    const client = new SecretClient(keyVaultUrl, credential);
+    const secrets: Record<string, string> = {};
+
+  // Iterate over all secret properties (names)
+  for await (const secretProperties of client.listPropertiesOfSecrets()) {
+    try {
+      // Fetch the secret value
+      const secret = await client.getSecret(secretProperties.name);
+      secrets[secret.name] = secret.value || "(Secret value not available)";
+    } catch (err) {
+      console.error(`❌ Error retrieving secret ${secretProperties.name}:`, err);
+    }
+  }
+
+  return secrets;
+
+  } catch (err) {
+    console.error(`Error fetching key vault keys ${keyVaultName} :`, err);
+    throw err; // Re-throw to handle in the caller
+  }
+}
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<any[] | { error: string }>
+) {
+  try {
+    const keyVaultLists: any[] = [];
+    const workloads: string[] = [];
+    const workLoad1 = req.query.workload1 as string;
+    const workLoad2 = req.query.workload2 as string;
+    const loadConfig = req.query.loadConfig as unknown as boolean;
+
+    if (workLoad1) {
+      workloads.push(workLoad1);
+    }
+    if (workLoad2) {
+      workloads.push(workLoad2);
+    }
+
+    const compareWorkLoads = workloads; //req.query.compareWorkLoads as string;
+    for (let i = 0; i < compareWorkLoads.length; i++) {
+        keyVaultLists.push(await getKeyVaults(compareWorkLoads[i]));
+    }
+    res.status(200).json(keyVaultLists);
+  } catch (err) {
+    const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+    res.status(500).json({ error: errorMessage });
+  }
+}