Skip to content

Commit

Permalink
src: Clean up clusters rendering
Browse files Browse the repository at this point in the history
  • Loading branch information
@zakaria-fadli-netatmo
zakaria-fadli-netatmo committed May 7, 2024
1 parent 9fc4a3d commit bc8ec3d
Show file tree
Hide file tree
Showing 2 changed files with 127 additions and 78 deletions.
120 changes: 51 additions & 69 deletions src/components/ClusterAccordion.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,36 +14,29 @@ import { capitalCase } from "capital-case";

import AttributesTable from "./AttributesTable";
import CommandsTable from "./CommandsTable";
import { GetClusterDescription } from "./ZapDbReader/GetCluster";
import {
find_clusters_with_same_name,
concatenate_cluster_commands,
} from "./ClusterUtils";
import { find_cluster_couples } from "./ClusterUtils";
import { ComponentsPalette } from "../Colors";

const get_bg_color = (cluster_side) => {
return cluster_side === "client"
? ComponentsPalette.ClusterClient
: ComponentsPalette.ClusterServer;
}

const ClusterSide = ({ cluster_couple, cluster_side }) => (
cluster_couple.client_cluster ? (
<ClusterSideDetails
cluster={cluster_couple.client_cluster}
merged_cluster_commands={cluster_couple.merged_commands}
/>
) : (
<AbsentClusterSideDetails cluster_side={cluster_side} />
)
)

const ClusterSideDetails = ({ cluster, merged_cluster_commands }) => {
const bg_color =
cluster.side === "client"
? ComponentsPalette.ClusterClient
: ComponentsPalette.ClusterServer;
const bg_color = get_bg_color(cluster.side);

if (!cluster) {
return (
<Paper
elevation={1}
square={false}
sx={{
backgroundColor: bg_color,
}}
>
<Box padding={2}>
<Typography variant="h4" gutterBottom>
No {capitalCase(cluster.side)} side
</Typography>
</Box>
</Paper>
);
}
return (
<Paper
elevation={1}
Expand Down Expand Up @@ -74,6 +67,24 @@ const ClusterSideDetails = ({ cluster, merged_cluster_commands }) => {
);
};

const AbsentClusterSideDetails = ({ cluster_side }) => {
return (
<Paper
elevation={1}
square={false}
sx={{
backgroundColor: get_bg_color(cluster_side),
}}
>
<Box padding={2}>
<Typography variant="h4" gutterBottom>
No {capitalCase(cluster_side)} side
</Typography>
</Box>
</Paper>
);
};

const ClusterMetadata = ({ cluster_code, cluster_description }) => {
return (
<Box mb={2}>
Expand All @@ -86,28 +97,12 @@ const ClusterMetadata = ({ cluster_code, cluster_description }) => {
);
};

const ClusterDetails = ({ clusters_with_same_name }) => {
const cluster_code =
"0x" + clusters_with_same_name[0].code.toString(16).toUpperCase();

const cluster_description = GetClusterDescription(parseInt(cluster_code, 16));
const merged_cluster_commands = concatenate_cluster_commands(
clusters_with_same_name
);

const client_side_cluster = clusters_with_same_name.find(
(cluster) => cluster.side === "client"
);

const server_side_cluster = clusters_with_same_name.find(
(cluster) => cluster.side === "server"
);

const ClusterCoupleDetails = ({ cluster_couple }) => {
return (
<Box sx={{ width: "90%" }} m="auto">
<ClusterMetadata
cluster_code={cluster_code}
cluster_description={cluster_description}
cluster_code={cluster_couple.code}
cluster_description={cluster_couple.description}
/>
<Grid
container
Expand All @@ -116,16 +111,10 @@ const ClusterDetails = ({ clusters_with_same_name }) => {
alignItems="stretch"
>
<Grid item xs={12} xl={6}>
<ClusterSideDetails
cluster={client_side_cluster}
merged_cluster_commands={merged_cluster_commands}
/>
<ClusterSide cluster_couple={cluster_couple} cluster_side="client" />
</Grid>
<Grid item xs={12} xl={6}>
<ClusterSideDetails
cluster={server_side_cluster}
merged_cluster_commands={merged_cluster_commands}
/>
<ClusterSide cluster_couple={cluster_couple} cluster_side="server" />
</Grid>
</Grid>
</Box>
Expand All @@ -134,38 +123,31 @@ const ClusterDetails = ({ clusters_with_same_name }) => {

// Render a single cluster
// Takes in a list of clusters with same name and code but different side
const ClusterItem = ({ clusters_with_same_name }) => {
// Assert all clusters have same name
const cluster_name = clusters_with_same_name[0].name;

if (
!clusters_with_same_name.every((cluster) => cluster.name === cluster_name)
) {
throw new Error("All clusters in same accordion item must have same name");
}

const ClusterCouple = ({ cluster_couple }) => {
return (
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
sx={{ bgcolor: ComponentsPalette["AccordionHeader"] }}
>
<Typography variant="h3">{cluster_name} cluster</Typography>
<Typography variant="h3">{cluster_couple.name} cluster</Typography>
</AccordionSummary>
<AccordionDetails sx={{ bgcolor: ComponentsPalette["AccordionBody"] }}>
<ClusterDetails clusters_with_same_name={clusters_with_same_name} />
<ClusterCoupleDetails cluster_couple={cluster_couple} />
</AccordionDetails>
</Accordion>
);
};
const ClustersAccordion = ({ all_clusters }) => {
// Make sure all clusters have same name and code but different side
const clusters_lists = find_clusters_with_same_name(all_clusters);
const cluster_couples = find_cluster_couples(all_clusters);

return (
<div>
{clusters_lists.map((cluster_list, index) => (
<ClusterItem key={index} clusters_with_same_name={cluster_list} />
))}
{
cluster_couples.map((cluster_couple, index) =>
<ClusterCouple key={index} cluster_couple={cluster_couple} />)
}
</div>
);
};
Expand Down
85 changes: 76 additions & 9 deletions src/components/ClusterUtils.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,61 @@
import { GetClusterDescription } from "./ZapDbReader/GetCluster";

// Cluster couple type
// with one client cluster and one server cluster (can be null)
class ClusterCouple {
constructor(client_cluster, server_cluster) {

this.client_cluster = client_cluster;
this.server_cluster = server_cluster;

// One cluster can be null


const ref_cluster = client_cluster || server_cluster;
let other_cluster = client_cluster ? server_cluster : client_cluster;

this.name = ref_cluster.name;
this.code = "0x" + ref_cluster.code.toString(16).toUpperCase();

if (!other_cluster) {
other_cluster = get_empty_cluster(ref_cluster.side === "client" ? "server" : "client",
ref_cluster.name, ref_cluster.code);
} else if ((ref_cluster.code !== other_cluster.code)
|| (ref_cluster.name !== other_cluster.name)) {
throw new Error("Cluster couple must have same name and code");
}

this.description = GetClusterDescription(parseInt(this.code, 16));
}

get merged_commands() {
let merged_commands = [];

if (this.client_cluster && this.client_cluster.commands) {
merged_commands = merged_commands.concat(this.client_cluster.commands);
}

if (this.server_cluster && this.server_cluster.commands) {
merged_commands = merged_commands.concat(this.server_cluster.commands);
}

return merged_commands;
}
}

function get_empty_cluster(side, name, code) {
return {
name: "",
code: 0,
side: side,
attributes: [],
commands: [],
};
}


// Find clusters of same name and code but different side
function find_clusters_with_same_name(clusters) {
function find_cluster_couples(clusters) {
let cluster_couples = [];
let found_couples_names = [];
clusters.forEach((cluster, index) => {
Expand All @@ -11,21 +67,32 @@ function find_clusters_with_same_name(clusters) {
index !== other_index &&
!found_couples_names.includes(cluster.name)
) {
cluster_couples.push([cluster, other_cluster]);
if (cluster.side === "client") {
console.log("Found cluster couple: ", cluster.name);
cluster_couples.push(new ClusterCouple(cluster, other_cluster));
} else {
cluster_couples.push(new ClusterCouple(other_cluster, cluster));
}
found_couples_names.push(cluster.name);
}
});
});

// Return a list of list of clusters
// Each list has either 1 or 2 clusters
let list_of_single_clusters = clusters.filter(
// Filter out clusters that are part of a couple
let single_clusters = clusters.filter(
(cluster) => !found_couples_names.includes(cluster.name)
);
// Convert each single cluster to a list of a single cluster
list_of_single_clusters = list_of_single_clusters.map((cluster) => [cluster]);

const merged_list = list_of_single_clusters.concat(cluster_couples);
// Convert each single cluster to a cluster couple by picking side
single_clusters = single_clusters.map((cluster) => {
if (cluster.side === "client") {
return new ClusterCouple(cluster, null);
} else {
return new ClusterCouple(null, cluster);
}
});

const merged_list = single_clusters.concat(cluster_couples);

return merged_list;
}
Expand All @@ -46,4 +113,4 @@ function concatenate_cluster_commands(cluster_list) {
return commands_sum;
}

export { find_clusters_with_same_name, concatenate_cluster_commands };
export { find_cluster_couples, concatenate_cluster_commands };

0 comments on commit bc8ec3d

Please sign in to comment.