Merge pull request #9 from oslabs-beta/victor/pushnow

hi

Author: BoopdiBop

app/charts/EventChart.tsx

@@ -29,7 +29,10 @@ const EventChart: React.FC<EventChartProps> = React.memo(props => {
 
   const createChart = () => {
     const timeArr = timeList.map((el: any) => moment(el).format('kk:mm:ss'));
+    const reverseTimeArr = timeArr.reverse()
     const hashedColour = colourGenerator(metric);
+    const newMetricName =  metric.replace("kubernetes-cadvisor/docker-desktop/", ""); // this will get rid of the long path 
+    const re = /_/g;
     let plotlyData: {
       name: any;
       x: any;
@@ -40,7 +43,7 @@ const EventChart: React.FC<EventChartProps> = React.memo(props => {
     };
     plotlyData = {
       name: metric,
-      x: timeArr,
+      x: reverseTimeArr,
       y: valueList,
       type: 'scattergl',
       mode: 'lines',
@@ -53,7 +56,7 @@ const EventChart: React.FC<EventChartProps> = React.memo(props => {
         data={[plotlyData]}
         config={{ displayModeBar: false }}
         layout={{
-          title: metric,
+          title: newMetricName.replace(re," "), // this will reaplce all the underscores in the graph titlke,
           ...sizeSwitch,
           font: {
             color: '#444d56',

app/charts/HealthChart.tsx

@@ -29,7 +29,9 @@ const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
 
   const createChart = () => {
       const timeArr = timeList.map((el: any) => moment(el).format('kk:mm:ss'));
+      const reverseTimeArr = timeArr.reverse()
       const hashedColour = colourGenerator(renderService);
+      const re = /_/g;
       let plotlyData: {
         name: any;
         x: any;
@@ -39,8 +41,8 @@ const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
         marker: { color: string };
       };
       plotlyData = {
-        name: metric,
-        x: timeArr,
+        name: metric.replace(re, " "),
+        x: reverseTimeArr,
         y: valueList,
         type: 'scattergl',
         mode: 'lines',

app/components/TransferColumns.tsx

@@ -174,7 +174,7 @@ const TransferColumns = React.memo(() => {
     const row = {};
     row['id'] = index;
     row['tag'] = el.tag;
-    row['title'] = el.title.split(' | ')[1];
+    row['title'] = el.title.split(' | ')[1].replace("kubernetes-cadvisor/docker-desktop/", ""); // gets rid of the full path
     rows.push(row);
   });
 

app/containers/HealthContainer.tsx

@@ -54,11 +54,12 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
               // console.log('valueList is', valueList); -> 50 values in an array
               // console.log('newTimeList array is:', newTimeList); -> 50 values in an array
               if (selectedMetricsList.includes(metric)) {
+                const re = /_/g;
                 const newHealthChart = (
                   <HealthChart
                     key={`Chart${counter}`}
                     renderService={serviceName}
-                    metric={metric}
+                    metric={metric.replace(re, " ")}
                     timeList={newTimeList}
                     valueList={valueList}
                     sizing={props.sizing}