Skip to content

Commit 31c886b

Browse files
utdevnputdevnp
committed
complete key vault api and comparesion
1 parent 0dd12be commit 31c886b

File tree

10 files changed

+148
-62
lines changed

10 files changed

+148
-62
lines changed

‎src/app/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -88,9 +88,9 @@ export default function Home() {
8888
</div>
8989

9090
<div className="mt-4 tab body">
91-
{activeTab === "Deployments" && <DeploymentTab workLoadOne={workLoadOne} workLoadTwo={workLoadTwo} loading={loading} closeLoading={closeLoading} />}
92-
{activeTab === "Config Map" && <ConfigMapTab loading={loading} closeLoading={closeLoading} workLoadOne={workLoadOne} workLoadTwo={workLoadTwo}/>}
93-
{activeTab === "Key Vault" && <KeyVaultTab/>}
91+
{activeTab === "Deployments" && <DeploymentTab workLoadOne={workLoadOne} workLoadTwo={workLoadTwo} loading={loading} closeLoading={closeLoading} activeTab={activeTab} />}
92+
{activeTab === "Config Map" && <ConfigMapTab loading={loading} closeLoading={closeLoading} workLoadOne={workLoadOne} workLoadTwo={workLoadTwo} activeTab={activeTab}/>}
93+
{activeTab === "Key Vault" && <KeyVaultTab loading={loading} closeLoading={closeLoading} workLoadOne={workLoadOne} workLoadTwo={workLoadTwo} activeTab={activeTab}/>}
9494
</div>
9595
</div>
9696
</main>

‎src/components/configmap/index.tsx‎

Lines changed: 57 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,69 @@
11
import { useEffect, useState } from "react";
2-
import { getDeploymentsData } from "@/functions/localstorage";
2+
import { getConfigData, getDeploymentsData, saveConfigData } from "@/functions/localstorage";
33
import { findName } from "@/functions";
44
import CountTable from "./tables/countInfo";
55
import ConfigMapDeployments from "./tables/deployments";
6+
import httpRequest from "axios";
67

78
const ConfigMapTab = (props: any) => {
8-
const { workLoadOne, workLoadTwo, loading } = props;
9+
const { workLoadOne, workLoadTwo, loading, activeTab } = props;
910
const [configMapData, setConfigMapData] = useState<any>([]);
10-
const [deploymentsDiff, setDeploymentsDiff] = useState<any>(null);
11+
const [error, setError] = useState("");
12+
const getDeployments = async (props: any) => {
13+
let queryString = [
14+
props.workLoadOne ? `workload1=${props.workLoadOne}` : '',
15+
props.workLoadTwo ? `workload2=${props.workLoadTwo}` : ''
16+
].filter(Boolean).join('&');
17+
try {
18+
const response = await httpRequest.get(`/api/deploy?${queryString}&loadConfig=true`);
19+
if (response && response.data.length) {
20+
saveConfigData(response.data);
21+
setConfigMapData(response.data);
22+
}
23+
24+
if (response && response.data && response.data.length > 0) {
25+
props.closeLoading(false);
26+
}
27+
} catch (error: any) {
28+
setError(error.message);
29+
props.closeLoading(false);
30+
}
31+
32+
};
33+
34+
const updateDataWithIndex = (index: number, value: boolean, isOpenFlag: boolean = true) => {
35+
const confData = getConfigData();
36+
37+
for (let i = 0; i < confData.length; i++) {
38+
if (isOpenFlag) {
39+
confData[i][index].isConfigMapOpen = value
40+
} else {
41+
confData[i][index].setCurrentView = value
42+
}
43+
}
44+
45+
saveConfigData(confData);
46+
getConfigFromLocal();
47+
}
48+
49+
const getConfigFromLocal = () => {
50+
setConfigMapData(getConfigData());
51+
}
52+
1153
useEffect(() => {
12-
setConfigMapData(getDeploymentsData());
54+
getConfigFromLocal();
55+
56+
if (loading && activeTab == "Config Map") {
57+
getDeployments(props);
58+
}
1359
props.closeLoading(false);
14-
}, []);
60+
}, [props]);
1561

1662

1763
return (
18-
<div className="flex flex-row p-2 gap-8">
64+
<div>
65+
<div> {error ? error : ""}</div>
66+
<div className="flex flex-row p-2 gap-8">
1967
{
2068
configMapData?.map((deployment: any, index: number) => (
2169

@@ -26,12 +74,14 @@ const ConfigMapTab = (props: any) => {
2674
</h3>
2775
<div className="flex flex-col gap-2">
2876
<CountTable deployments={deployment} />
29-
<ConfigMapDeployments deployments={deployment} title="Services" />
77+
<ConfigMapDeployments deployments={deployment} updateDataWithIndex={updateDataWithIndex} title="Services" />
3078
</div>
3179
</div>
3280
))
3381
}
3482
</div>
83+
</div>
84+
3585
);
3686
};
3787

‎src/components/configmap/tables/deploymentItem.tsx‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,33 @@
11

2-
const ConfigMapDeploymentList = ({ deployment, index }: { deployment: any, index: number }) => {
2+
const ConfigMapDeploymentList = ({ deployment, index, updateDataWithIndex }: { deployment: any, index: number, updateDataWithIndex: any }) => {
3+
4+
const configMapArray = Object.entries(deployment.configMaps);
5+
36
return (
47
<>
58
<tr>
69
<td className="border border-gray-300 px-4 py-2">{index + 1}</td>
710
<td className="border border-gray-300 px-4 py-2">{deployment.name}</td>
811
<td className="border border-gray-300 px-4 py-2 block-inline cursor-pointer"> <p title='Replicas'>{deployment.replicas}</p></td>
912
<td className="border border-gray-300 px-4 py-2 block-inline cursor-pointer"> <p title='Available'>{deployment.available}</p></td>
10-
<td className="border border-gray-300 px-4 py-2 block-inline"> <a href="#" className="text-blue-500">Open / Close </a></td>
13+
<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>
1114
</tr>
12-
<tr>
13-
<td className="border border-gray-300 px-4 py-2 text-sm gap-2 bg-green-100 " colSpan={5}>
15+
<tr className={deployment.isConfigMapOpen ? "" : "hidden"}>
16+
<td className={`border border-gray-300 px-4 py-2 text-sm gap-2 ${deployment.setCurrentView ? "bg-green-100" : ""} `} colSpan={5}>
1417
<div className="gap-3 p-2">
15-
<ol type="1">
16-
<li>Swagger API</li>
17-
<li>Swagger API2</li>
18-
</ol>
18+
<table className="w-full table-auto">
19+
<tbody>
20+
{
21+
deployment && configMapArray.map((item: any, index: number) => {
22+
return<tr className="border-b-gray-50"> <td>{index+1}</td> <td> {item[0]} </td><td> {item[1]} </td></tr>
23+
})
24+
}
25+
</tbody>
26+
</table>
1927
</div>
2028
<div className="gap-3">
2129
<hr className=" border-gray-300 mt-3 mb-3"></hr>
22-
<a className="text-blue-500 underline" href="">Set current</a>
30+
<a className="text-blue-500" href="javascript:;" onClick={() => updateDataWithIndex(index, deployment.setCurrentView ? false : true, false)} > {deployment.setCurrentView ? "unset" : "set"} current view</a>
2331
</div>
2432

2533
</td>

‎src/components/configmap/tables/deployments.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { filterDeployments } from '@/functions';
44
import ConfigMapDeploymentList from './deploymentItem';
55

66
const ConfigMapDeployments = (props: any) => {
7-
const { deployments, type } = props;
7+
const { deployments, type, updateDataWithIndex } = props;
88
const deploymentList: any[] = filterDeployments(deployments);
99

1010
return (
@@ -13,7 +13,7 @@ const ConfigMapDeployments = (props: any) => {
1313
<table className="w-full table-auto border-collapse border border-gray-300 mt-2">
1414
<tbody>
1515
{deploymentList.map((deployment: any, index: number) => (
16-
<ConfigMapDeploymentList key={index} index={index} deployment={deployment} />
16+
<ConfigMapDeploymentList key={index} index={index} deployment={deployment} updateDataWithIndex={updateDataWithIndex}/>
1717
))}
1818
</tbody>
1919
</table>

‎src/components/deployment/main.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ import { Deployment } from "@/types";
99
import { saveDeploymentsData, getDeploymentsData } from "@/functions/localstorage";
1010

1111
const DeploymentTab = (props: any) => {
12-
const { workLoadOne, workLoadTwo, loading } = props;
12+
const { workLoadOne, workLoadTwo, loading,activeTab } = props;
1313
const [deployments, setData] = useState<Deployment[] | null>(null);
1414
const [deploymentsDiff, setDataDiff] = useState<any | null>(null);
15-
15+
const [error, setError] = useState("");
1616
const getDeployments = async (props: any) => {
1717
let queryString = [
1818
props.workLoadOne ? `workload1=${props.workLoadOne}` : '',
@@ -27,8 +27,8 @@ const DeploymentTab = (props: any) => {
2727
if (response && response.data && response.data.length > 0) {
2828
props.closeLoading(false);
2929
}
30-
} catch (error) {
31-
console.error('Error fetching deployments:', error);
30+
} catch (error:any) {
31+
setError(error.message);
3232
props.closeLoading(false);
3333
}
3434

@@ -40,7 +40,7 @@ const DeploymentTab = (props: any) => {
4040
}, []);
4141

4242
useEffect(() => {
43-
if (workLoadOne || workLoadTwo) {
43+
if (workLoadOne || workLoadTwo && activeTab =="Deployment") {
4444
getDeployments(props);
4545
}
4646

@@ -50,7 +50,10 @@ const DeploymentTab = (props: any) => {
5050
if (loading && !deployments) return <div className="text-red-500">Error loading data</div>;
5151

5252
return (
53-
<div className="flex flex-row p-2 gap-8">
53+
<div>
54+
<div className="block w-100 p-2 gap-8">{error ? error : ""}</div>
55+
<div className="flex flex-row p-2 gap-8">
56+
5457
{!workLoadOne && !workLoadTwo && !deployments ?
5558
<div className="text-red-500 p-2 gap-2">Please select at least one workloads</div> : ""}
5659
{
@@ -74,6 +77,8 @@ const DeploymentTab = (props: any) => {
7477
))
7578
}
7679
</div>
80+
</div>
81+
7782
);
7883
}
7984

‎src/components/keyvault/index.tsx‎

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,29 +6,24 @@ import { findKv, findName } from "@/functions";
66
import CompareKv from "./kvValues";
77

88
const KeyVaultTab = (props: any) => {
9-
const { workLoadOne, workLoadTwo, loading } = props;
9+
const { workLoadOne, workLoadTwo, loading, activeTab } = props;
1010
const [keyVaults, setData] = useState<any | null>([]);
1111
const [kvKeys, setKvKeys] = useState<any>([]);
1212
const [kvSelected, setKvSelected] = useState("");
1313
const [selectedKey, setSelectedKey] = useState([]);
14+
const [ error, setError] = useState("");
1415

1516
const getKeyVaults = async (props: any) => {
1617
let queryString = [
1718
props.workLoadOne ? `workload1=${props.workLoadOne}` : '',
1819
props.workLoadTwo ? `workload2=${props.workLoadTwo}` : ''
1920
].filter(Boolean).join('&');
2021
try {
21-
const response = await httpRequest.get(`/api/keyvault?`);
22-
// saveDeploymentsData(response.data);
22+
const response = await httpRequest.get(`/api/keyvault?${queryString}`);
2323
setData(response.data);
2424
saveKvData(response.data);
25-
// setDataDiff(findDifferentNamesInList(response.data as unknown as any));
26-
27-
// if (response && response.data && response.data.length > 0) {
28-
// props.closeLoading(false);ss
29-
// }
30-
} catch (error) {
31-
console.error('Error fetching deployments:', error);
25+
} catch (error: any) {
26+
setError(error.message);
3227
props.closeLoading(false);
3328
}
3429

@@ -46,41 +41,50 @@ const KeyVaultTab = (props: any) => {
4641

4742
useEffect(() => {
4843
getFromLc();
49-
}, []);
44+
45+
if (props.loading && activeTab == "Key Vault") {
46+
getKeyVaults(props);
47+
}
48+
}, [props]);
5049

5150
if (!keyVaults.length || !kvKeys.length) {
5251
return;
5352
}
5453
return (
55-
<>
56-
<div>
57-
<select onChange={setKeyName} className="p-2 text-l bg-gray-100 rounded-lg">
58-
<option value="">Choose Keys </option>
59-
{
60-
kvKeys && kvKeys.map((keys: string, index: number) => (
61-
<option value={keys} key={index}>{keys}</option>
62-
))
63-
}
64-
</select>
65-
<CompareKv selectedKey={kvSelected} deployments={keyVaults} />
66-
</div>
54+
<div>
55+
<div>{error? error : ""}</div>
6756
<div className="flex flex-row p-2 gap-8">
57+
6858
{
6959
keyVaults.map((deployment: any, index: number) => (
7060
<div key={index} className="flex flex-col gap-2">
7161

7262
<h3 className="font-bold flex-row text-l p-2">
73-
{`${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>
63+
{`${index + 1}.`} <span className="text-blue-500"> {index == 0 ? findName(workLoadOne || workLoadTwo) : findName(workLoadTwo)} </span> <small className="text-sm">({index == 0 ? findKv(workLoadOne) || findKv(workLoadTwo) : findKv(workLoadTwo)})</small>
7464
&nbsp; <small className="text-xs font-light text-green-500">{loading ? "Loading..." : ""}</small>
7565
</h3>
66+
{
67+
index == 0 ?
68+
<div>
69+
<select onChange={setKeyName} className="p-2 text-l bg-gray-100 rounded-lg">
70+
<option value="">Choose Keys </option>
71+
{
72+
kvKeys && kvKeys.map((keys: string, index: number) => (
73+
<option value={keys} key={index}>{keys}</option>
74+
))
75+
}
76+
</select>
77+
<CompareKv selectedKey={kvSelected} deployments={keyVaults} />
78+
</div> : <></>
79+
}
7680
<div className="flex flex-col gap-2">
7781
<KeyVaultsDetail deployments={deployment} title="Keys" />
7882
</div>
7983
</div>
8084
))
8185
}
8286
</div>
83-
</>
87+
</div>
8488

8589
)
8690
}

‎src/components/keyvault/kvValues.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,11 @@ const CompareKv = (props: any) => {
44
const { deployments, selectedKey } = props;
55
const arrayData = Object.entries(deployments);
66
return (
7-
<div className="flex flex-row p-2 gap-8 flex-text-wrap">
8-
9-
{arrayData.map((deployment: any, index: number) => (
10-
<KvFullDetail key={index} index={index} deployment={deployment} selectedKey={selectedKey} />
11-
))}
12-
13-
</div>);
7+
<div className="flex flex-row p-2 gap-8 flex-text-wrap">
8+
{arrayData.map((deployment: any, index: number) => (
9+
<KvFullDetail key={index} index={index} deployment={deployment} selectedKey={selectedKey} />
10+
))}
11+
</div>);
1412
};
1513

1614
export default CompareKv;

‎src/functions/index.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
import { DEFAULT_IGNORED_NAME, DEFAULT_NAMESPACE, workLoads } from "@/setting";
2+
import { DEFAULT_IGNORED_NAME, DEFAULT_NAMESPACE, keyVaults, workLoads } from "@/setting";
33
import { Deployment } from "@/types";
44

55
export const filterDeployments = (deployments: Deployment[], filter: string = DEFAULT_NAMESPACE) => {
@@ -91,5 +91,6 @@ export const findDifferentNamesInList = (list: any[]) => {
9191
}
9292

9393
export const findKv = ( workload: any) => {
94-
return workLoads.find((item: { value: any; }) => item.value == workload)?.name;
95-
}
94+
return keyVaults.find((item: { value: any; }) => item.value == workload)?.name;
95+
}
96+

‎src/pages/api/keyvault.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,4 +57,6 @@ export default async function handler(
5757
const errorMessage = err instanceof Error ? err.message : 'Unknown error';
5858
res.status(500).json({ error: errorMessage });
5959
}
60+
61+
6062
}

‎src/setting.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,23 @@ export const workLoads = [
1717
}
1818
];
1919

20+
export const keyVaults = [
21+
{
22+
name: "aks-dev2-non-pci-eastus",
23+
value: "kvDev2NonPCI-US-E",
24+
}, {
25+
name: "kv-dev3-non-pci-us-e",
26+
value: "aks-dev3-non-pci-eastus",
27+
},
28+
{
29+
name: "kv-uat2-non-pci-us-e",
30+
value: "aks-uat2-non-pci-eastus",
31+
},
32+
{
33+
name: "kv-prod-non-pci-us-e",
34+
value: "aks-prod-non-pci-eastus",
35+
}
36+
]
37+
2038
export const DEFAULT_NAMESPACE = "default";
2139
export const DEFAULT_IGNORED_NAME = "zipkin";

0 commit comments

Comments
 (0)