moved styles associated with aws charts to component folders

Author: mdtagg

app/charts/AwsChart.tsx

@@ -26,6 +26,7 @@ interface SoloStyles {
 const AwsChart: React.FC<any> = React.memo(props => {
   const { renderService, metric, timeList, valueList, colourGenerator, sizing } = props;
   const [solo, setSolo] = useState<SoloStyles | null>(null);
+  
   setInterval(() => {
     if (solo !== soloStyle) {
       setSolo(soloStyle);

app/components/AwsEC2Graphs.tsx …components/AwsEC2Graphs/AwsEC2Graphs.tsxapp/components/AwsEC2Graphs.tsx renamed to app/components/AwsEC2Graphs/AwsEC2Graphs.tsx app/components/AwsEC2Graphs.tsx renamed to app/components/AwsEC2Graphs/AwsEC2Graphs.tsx

@@ -1,8 +1,10 @@
 import React, { useContext, useEffect, useState } from 'react';
-import AwsChart from '../charts/AwsChart';
-import { AwsContext } from '../context/AwsContext';
+import AwsChart from '../../charts/AwsChart';
+import { AwsContext } from '../../context/AwsContext';
+import { stringToColor } from '../../utils';
+import './styles.scss'
 import { CircularProgress } from '@mui/material';
-// import zIndex from '@mui/styles/zIndex';
+
 
 const AwsEC2Graphs: React.FC = React.memo(props => {
   const { awsData, setAwsData, isLoading, setLoadingState } = useContext(AwsContext);
@@ -14,24 +16,6 @@ const AwsEC2Graphs: React.FC = React.memo(props => {
     };
   }, []);
 
-  const stringToColor = (string: string, recurses = 0) => {
-    if (recurses > 20) return string;
-    function hashString(str: string) {
-      let hash = 0;
-      for (let i = 0; i < str.length; i++) {
-        hash = str.charCodeAt(i) + ((hash << 5) - hash);
-      }
-      let colour = '#';
-      for (let i = 0; i < 3; i++) {
-        const value = (hash >> (i * 8)) & 0xff;
-        colour += `00${value.toString(16)}`.substring(-2);
-      }
-
-      // console.log(colour);
-      return colour;
-    }
-  };
-
   return (
     <div className="charts">
       {Object.keys(awsData)?.map(metric => {

app/components/AwsEC2Graphs/styles.scss

@@ -0,0 +1,10 @@
+.charts {
+  display: grid;
+  grid-template-columns: auto auto;
+  padding: 10px;
+}
+
+.chart {
+  margin: 10px;
+  text-align: center;
+}

app/components/AwsECSClusterGraphs.tsx

@@ -1,5 +1,6 @@
 import React, { useContext, useEffect } from 'react';
 import AwsChart from '../charts/AwsChart';
+import { stringToColor } from '../utils';
 import { AwsContext } from '../context/AwsContext';
 
 const AwsECSClusterGraphs: React.FC = React.memo(props => {
@@ -12,24 +13,6 @@ const AwsECSClusterGraphs: React.FC = React.memo(props => {
     };
   }, []);
 
-  const stringToColor = (string: string, recurses = 0) => {
-    if (recurses > 20) return string;
-    function hashString(str: string) {
-      let hash = 0;
-      for (let i = 0; i < str.length; i++) {
-        hash = str.charCodeAt(i) + ((hash << 5) - hash);
-      }
-      let colour = '#';
-      for (let i = 0; i < 3; i++) {
-        const value = (hash >> (i * 8)) & 0xff;
-        colour += `00${value.toString(16)}`.substring(-2);
-      }
-
-      // console.log(colour);
-      return colour;
-    }
-  };
-
   const activeServices = Object.keys(awsEcsData)
     .slice(1)
     .filter(el => awsEcsData[el].CPUUtilization?.value.length > 0);

app/containers/AWSGraphsContainer/AWSGraphsContainer.tsx

@@ -5,7 +5,7 @@ import { Typography } from '@mui/material';
 import { AwsContext } from '../../context/AwsContext';
 import './styles.scss';
 import { useLocation } from 'react-router-dom';
-import AwsEC2Graphs from '../../components/AwsEC2Graphs';
+import AwsEC2Graphs from '../../components/AwsEC2Graphs/AwsEC2Graphs';
 import ClusterTable from '../../components/ClusterTable';
 import AwsECSClusterGraphs from '../../components/AwsECSClusterGraphs';
 

app/containers/AWSGraphsContainer/styles.scss

@@ -24,16 +24,16 @@
   }
 }
 
-.charts {
-  display: grid;
-  grid-template-columns: auto auto;
-  padding: 10px;
-}
-
-.chart {
-  margin: 10px;
-  text-align: center;
-}
+// .charts {
+//   display: grid;
+//   grid-template-columns: auto auto;
+//   padding: 10px;
+// }
+
+// .chart {
+//   margin: 10px;
+//   text-align: center;
+// }
 
 .js-plotly-plot {
   box-shadow: $boxshadow;

app/utils/index.ts

@@ -0,0 +1,19 @@
+
+
+export const stringToColor = (string: string, recurses = 0) => {
+  if (recurses > 20) return string;
+  function hashString(str: string) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    let colour = '#';
+    for (let i = 0; i < 3; i++) {
+      const value = (hash >> (i * 8)) & 0xff;
+      colour += `00${value.toString(16)}`.substring(-2);
+    }
+
+    // console.log(colour);
+    return colour;
+  }
+};