Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added the store #216

Open
wants to merge 1 commit into
base: mvp_demo
Choose a base branch
from
Open

Added the store #216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8,596 changes: 7,432 additions & 1,164 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,12 +98,13 @@
"@kubernetes/client-node": "^0.16.3",
"@material-ui/core": "^4.12.4",
"@patternfly/patternfly": "^5.0.4",
"@patternfly/react-code-editor": "^5.0.1",
"@patternfly/react-charts": "^7.0.1",
"@patternfly/react-code-editor": "^5.0.1",
"@patternfly/react-core": "^5.0.1",
"@patternfly/react-icons": "^5.0.1",
"@patternfly/react-styles": "^5.0.1",
"@patternfly/react-table": "^5.0.1 ",
"@reduxjs/toolkit": "^2.3.0",
"@storybook/builder-webpack5": "^6.2.9",
"@types/minipass": "^3.3.5",
"algebra.js": "^0.2.6",
Expand Down Expand Up @@ -135,8 +136,10 @@
"react-markdown": "^8.0.2",
"react-mathjax2": "^0.0.2",
"react-monaco-editor": "^0.41.2",
"react-redux": "^9.1.2",
"react-router-last-location": "^2.0.1",
"react-tinder-card": "^1.6.2",
"redux-logger": "^3.0.6",
"resolve": "^1.22.6",
"sirv-cli": "^1.0.12",
"tts-loader": "^0.3.0",
Expand Down
94 changes: 43 additions & 51 deletions src/app/Analytics/LocalMonitoring/ClusterDataTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,14 @@ import { Link, useLocation } from 'react-router-dom';
import { getClusterMetadataURL } from '@app/CentralConfig';
import { PlusIcon } from '@patternfly/react-icons';

import { getClusterMetaData } from '@actions/DataSourceActionCreator';
import { useDispatch, useSelector } from 'react-redux';

interface LocationState {
cluster: string;
datasource: string;
}

interface Container {
container_name: string;
container_image_name: string;
Expand All @@ -31,19 +39,12 @@ interface Namespace {
workloads?: Record<string, Workload>;
}

interface Cluster {
interface ClusterDetails {
cluster_name: string;
namespaces: Record<string, Namespace>;
}

interface ClusterGroup {
datasource_name: string;
clusters: Record<string, Cluster>;
}

interface ApiData {
datasources: Record<string, ClusterGroup>;
}

interface TableData {
containerName: string;
Expand All @@ -64,60 +65,51 @@ interface TableData {

*/

const ClusterDataTable = (props: { datasource, clustername }) => {
const [clusterData, setClusterData] = useState<ApiData | null>(null);
const [namespaceData, setNamespaceData] = useState([]);

const datasource = props.datasource;
const cluster = props.clustername;
interface ClusterDataTableProps {
dataSourceName: string;
clusterName: string;
}

const fetchCluster = async () => {
const response = await fetch(getClusterMetadataURL(datasource, cluster));
const data = await response.json();
setClusterData(data);
setNamespaceData(data.datasources[datasource].clusters[cluster]);
};
const ClusterDataTable: React.FC<ClusterDataTableProps> = ({ dataSourceName, clusterName }) => {
const dispatch = useDispatch()
const dataSource: any = useSelector<any>(state => state.dataSource)


useEffect(() => {
try {
fetchCluster();
} catch {
console.log('Clusters get URL not working');
}
}, []);
( async () =>
await dispatch(getClusterMetaData(dataSourceName, clusterName))
)()
}, [dispatch]);

let clusterDetials: ClusterDetails | undefined;
if(dataSource.clusterMetaData.hasOwnProperty(`${dataSourceName}-${clusterName}`)){
clusterDetials = dataSource.clusterMetaData[`${dataSourceName}-${clusterName}`]
}

function extractTableData(apiData: ApiData): TableData[] {
function extractTableData(clusterDetails: ClusterDetails): TableData[] {
console.log(clusterDetails)
const tableData: TableData[] = [];

if (apiData && apiData.datasources) {
for (const clusterGroup of Object.values(apiData.datasources)) {
for (const cluster of Object.values(clusterGroup.clusters)) {
for (const [namespaceName, namespace] of Object.entries(cluster.namespaces)) {
if (!namespace.workloads) continue;

for (const [workloadName, workload] of Object.entries(namespace.workloads)) {
if (!workload.containers) continue;

for (const [_, container] of Object.entries(workload.containers)) {
tableData.push({
containerName: container.container_name,
containerImageName: container.container_image_name,
projectName: namespaceName,
workloadName: workload.workload_name,
workloadType: workload.workload_type,
clusterName: cluster.cluster_name
});
}
for (const [namespaceName, namespace] of Object.entries(clusterDetails.namespaces)) {
if (!namespace.workloads) continue;
for (const [workloadName, workload] of Object.entries(namespace.workloads)) {
if (!workload.containers) continue;
for (const [_, container] of Object.entries(workload.containers)) {
tableData.push({
containerName: container.container_name,
containerImageName: container.container_image_name,
projectName: namespaceName,
workloadName: workload.workload_name,
workloadType: workload.workload_type,
clusterName: clusterName
});
}
}
}
}
}

return tableData;
}

const tableData = clusterData ? extractTableData(clusterData) : [];
const tableData: TableData[] | undefined = clusterDetials !== undefined ? extractTableData(clusterDetials): []

return (
<PageSection variant={PageSectionVariants.light}>
Expand Down Expand Up @@ -156,7 +148,7 @@ const ClusterDataTable = (props: { datasource, clustername }) => {
workloadType: row_data?.workloadType,
clusterName: row_data?.clusterName,
containerImageName: row_data?.containerImageName,
datasourceName: props.datasource
datasourceName: dataSourceName
}
}}
>
Expand Down
47 changes: 16 additions & 31 deletions src/app/Analytics/LocalMonitoring/ClusterGroupTables.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useLocation } from 'react-router-dom';
import { getDatasourceMetadataURL } from '@app/CentralConfig';
import { Link } from 'react-router-dom';
import { ClusterDataTable } from './ClusterDataTable';
import { getClusterMetaData } from '@actions/DataSourceActionCreator';
interface DatasourceDetail {
clusters: { [key: string]: { cluster_name: string } };
}
Expand All @@ -23,37 +24,20 @@ interface LocationState {

*/

const ClusterGroupTables = (props: { clusterGroupData; dsname }) => {
const [clusterSpecificData, setClusterSpecificData] = useState([]);
const [showComponent, setShowComponent] = useState(false);
const [datasourcesData, setDatasourcesData] = useState<Datasources | null>(null);
const ClusterGroupTables = ({ clusterGroupData, dsname }) => {
const [showClusterTable, setShowClusterTable] = useState(false);
const [selectedClusterName, setSelectedClusterName] = useState<string | null>(null);
const [selectedClusterName, setSelectedClusterName] = useState<string>('');

const datasource_name = props.dsname;

// calling get api with parameter ds
const fetchDatasources = async () => {
const response = await fetch(getDatasourceMetadataURL(datasource_name));
const data = await response.json();
setDatasourcesData(data);
};

useEffect(() => {
try {
fetchDatasources();
} catch {
console.log('Datasources get URL not working');
let clusterRowData: any = [];
if (typeof clusterGroupData === 'object' && clusterGroupData !== null) {
if (clusterGroupData.hasOwnProperty(dsname)) {
const clustersData = clusterGroupData[dsname].clusters;
clusterRowData = Object.keys(clustersData).map(clusterKey => ({
groupName: dsname,
clusterName: clustersData[clusterKey].cluster_name
}))
}
}, []);

const cluster_row_data = Object.entries(datasourcesData?.datasources || {}).flatMap(([groupName, groupDetail]) => {
const clusters = (groupDetail as any).clusters || {};
return Object.keys(clusters).map((clusterKey) => ({
groupName: groupName,
clusterName: clusters[clusterKey].cluster_name
}));
});
}

const handleButtonClick = (clusterName: string) => {
setSelectedClusterName(clusterName);
Expand All @@ -62,6 +46,7 @@ const ClusterGroupTables = (props: { clusterGroupData; dsname }) => {

return (
<PageSection variant={PageSectionVariants.light}>
<React.Fragment>
<Table aria-label="Data Sources Table">
<Thead>
<Tr>
Expand All @@ -70,20 +55,20 @@ const ClusterGroupTables = (props: { clusterGroupData; dsname }) => {
</Tr>
</Thead>
<Tbody>
{cluster_row_data.map((row, index) => (
{clusterRowData.map((row, index) => (
<Tr key={index} {...(index % 2 === 0 && { isStriped: true })}>
<Td dataLabel="Cluster Group">{row.groupName}</Td>
<Td dataLabel="Cluster">
<Button variant="link" isInline onClick={() => handleButtonClick(row.clusterName)}>
{' '}
{row.clusterName}
</Button>
</Td>
</Tr>
))}
</Tbody>
</Table>
{showClusterTable && <ClusterDataTable datasource={datasource_name} clustername={selectedClusterName} />}
{showClusterTable && <ClusterDataTable dataSourceName={dsname} clusterName={selectedClusterName} />}
</React.Fragment>
</PageSection>
)
};
Expand Down
52 changes: 22 additions & 30 deletions src/app/Analytics/LocalMonitoring/DatasourceTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { Button, OverflowMenu, OverflowMenuContent, OverflowMenuGroup, OverflowMenuItem } from '@patternfly/react-core';
import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import React, { useState } from 'react';
import { importDataSourcesMetadataURL } from '@app/CentralConfig';
import { ClusterGroupTables } from './ClusterGroupTables';
import { getDataSourceMetaData } from '@actions/DataSourceActionCreator';
import { useDispatch, useSelector } from 'react-redux';
/*

This is the Datasources table which gets display, takes data from fetchDS api call
Expand All @@ -13,45 +14,32 @@ import { ClusterGroupTables } from './ClusterGroupTables';

*/

const DatasourceTable = (props: { fetchDatasourcesData }) => {
const [clusterGroupData, setClusteGroupData] = useState<any>();
const DatasourceTable = ({ dataSourcesData, ...props }) => {
const dispatch = useDispatch()
const dataSourceSelector: any = useSelector<any>(state => state.dataSource)

const [expandedRows, setExpandedRows] = useState({});
const [buttonStatus, setButtonStatus] = useState(false);
const [isComponentVisible, setIsComponentVisible] = useState(false);
const [dsname, setdsname] = useState('');
const [dsname, setdsname] = useState<string>('');


const handleImportMetadata = async (dataSourceName: string) => {
setButtonStatus(true);
setdsname(dataSourceName);
const payload = {
version: 'v1.0',
datasource_name: dataSourceName
};
try {
const response = await fetch(importDataSourcesMetadataURL(), {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(payload)
});

const data = await response.json();
setClusteGroupData(data);
setIsComponentVisible(true);
} catch (error) {
console.error('Error during data import:', error);
}
await dispatch(getDataSourceMetaData(dataSourceName));
setButtonStatus(false);
};

const toggleRowExpanded = (index) => {
const toggleRowExpanded = (index, dsName: string) => {
setdsname(dsName)
setExpandedRows((prevState) => ({
...prevState,
[index]: !prevState[index]
}));
};

const dataLoaded = Object.keys(dataSourceSelector.dataSourceMetaData).length > 0

return (
<React.Fragment>
<Table aria-label="Data Sources Table">
Expand All @@ -63,17 +51,18 @@ const DatasourceTable = (props: { fetchDatasourcesData }) => {
</Tr>
</Thead>
<Tbody>
{props.fetchDatasourcesData?.datasources && props.fetchDatasourcesData.datasources.map((source, index) => (

{dataSourcesData.map((source, index) => (
<Tr key={index} {...(index % 2 === 0 && { isStriped: true })}>
<Td
expand={{
rowIndex: index,
isExpanded: !!expandedRows[index],
onToggle: () => toggleRowExpanded(index)
onToggle: () => toggleRowExpanded(index, source.name)
}}
/>
<Td dataLabel="DataSource Name">
<div>{clusterGroupData ? source.name : source.name}</div>
<div>{dataLoaded ? source.name : source.name}</div>
{expandedRows[index] && (
<div style={{ paddingTop: '10px', fontSize: 'smaller' }}>
URL: {source.url} <br />
Expand All @@ -95,7 +84,7 @@ const DatasourceTable = (props: { fetchDatasourcesData }) => {
isDisabled={buttonStatus}
onClick={() => handleImportMetadata(source.name)}
>
Import Metadata{' '}
Import Metadata
</Button>
</OverflowMenuItem>
</OverflowMenuGroup>
Expand All @@ -106,7 +95,10 @@ const DatasourceTable = (props: { fetchDatasourcesData }) => {
))}
</Tbody>
</Table>
{isComponentVisible && <ClusterGroupTables clusterGroupData={clusterGroupData} dsname={dsname} />}

{dataLoaded && dsname.length > 0 && <ClusterGroupTables clusterGroupData={dataSourceSelector.dataSourceMetaData} dsname={dsname}/>}
</div>

</React.Fragment>
);
};
Expand Down
Loading