CPU/Memory Lim/ Req dispalyed as thresholds in the graph.

extensions/resource-metrics/resource-metrics-extention/ui/src/Metrics/Chart/AnomalyChart.tsx

@@ -344,7 +344,7 @@ export const AnomalyChart = ({
 }: AnomalyChartProps) => {
   const formatChartData = (data: any) => {
     const formattedData: any = [];
-    data?.map((obj: any) => {
+    data?.data?.map((obj: any) => {
       const metricObj: any = {
         ...obj,
         name: obj?.metric && Object.values(obj?.metric).join(":"),
@@ -510,7 +510,6 @@ export const AnomalyChart = ({
     });
     return uEvents;
   };
-  // const thisChartData = formatChartData(exampleData);
   const thisChartData = formatChartData(chartData);
 
   const scaleGradient = (
@@ -537,7 +536,7 @@ export const AnomalyChart = ({
   return useMemo(
     () => (
       <>
-        <div style={{ display: "block", width: "100%" }}>
+        <div style={{ display: "block", width: "100%", margin: "0px 5px" }}>
           <div>
             <strong>{title}</strong>
           </div>
@@ -549,7 +548,7 @@ export const AnomalyChart = ({
               syncId={"o11yCharts"}
               syncMethod={"value"}
               layout={"horizontal"}
-              onMouseMove={(e: any) => {}}
+              onMouseMove={(e: any) => { }}
               onMouseLeave={() => {
                 setHighlight({ ...highlight, [groupBy]: "" });
               }}
@@ -559,6 +558,7 @@ export const AnomalyChart = ({
                 left: 40,
                 bottom: 5,
               }}
+              style={{ border: '1px dashed #DEE6EB' }}
             >
               {/* <CartesianGrid strokeDasharray="3 3" /> */}
               {Object.keys(uniqueEvents(events))?.map(

extensions/resource-metrics/resource-metrics-extention/ui/src/Metrics/Chart/Chart.scss

@@ -3,30 +3,44 @@
 }
 
 .chartYLabel {
-  opacity: .6;
+  opacity: 0.6;
 }
 
 .metrics-charts__legend_wrapper {
   text-align: left;
-  font-size: .9em;
+  font-size: 0.9em;
   position: absolute;
-  margin-left: 30px; 
+  margin-left: 30px;
   overflow-y: scroll;
   z-index: 999;
-  background-color: rgb(0, 0, 0,.8);
+  background-color: rgb(0, 0, 0, 0.8);
   color: #fafafa;
   font-weight: 400;
   border-radius: 6px;
 
   .legend-content {
-    overflow-y: scroll;
+    overflow-y: auto;
     max-height: 220px;
+    padding-right: 15px;
+
+    &::-webkit-scrollbar {
+      width: 0.5em;
+      height: 0.5em;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: rgba(255, 255, 255, 0.4);
+      border-radius: 3px;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.6);
+      }
+    }
   }
   .l-content {
     display: flex;
     white-space: nowrap;
     .label {
-
     }
   }
   .metrics-charts__value {
@@ -41,58 +55,56 @@
 
 .metrics-charts__legend_wrapper {
   display: none;
-  transition: .3s;
-  padding: .8em 1.2em !important;
+  transition: 0.3s;
+  padding: 0.8em 1.2em !important;
   min-width: 50%;
   left: 15%;
-  font-size: .85em;
+  font-size: 0.85em;
   padding: 20px;
 }
 
 div:hover > div > .metrics-charts__legend_wrapper {
   max-height: 500px;
   display: block;
-
 }
 
 .legendLink {
-  color: #ffffff; 
+  color: #ffffff;
   cursor: pointer;
   font-weight: 400;
   &:hover {
-    color: #5d9fcb; 
+    color: #5d9fcb;
   }
 }
 
 .metrics-charts {
-
   &__tooltip_text {
     display: inline-block;
     margin-right: 1em;
   }
 
   &__tooltip_wrapper {
-    padding: .5em;
+    padding: 0.5em;
     text-align: left;
-    font-size: .95em;
+    font-size: 0.95em;
     clear: both;
   }
 
   &__tooltip_title {
     text-align: left;
-    font-size: .8em;
-    padding-bottom:.2em;
+    font-size: 0.8em;
+    padding-bottom: 0.2em;
     text-transform: uppercase;
     color: #ddd;
   }
 
   &__badge {
-    padding: .25em .5em .09em .5em;
+    padding: 0.25em 0.5em 0.09em 0.5em;
     background-color: #555;
-    border-radius:100px;
-    font-size: .8em;
+    border-radius: 100px;
+    font-size: 0.8em;
     display: inline-block;
-    margin: auto .1em;
+    margin: auto 0.1em;
     line-height: 1em;
     float: right;
     margin-top: 2px;
@@ -101,7 +113,6 @@ div:hover > div > .metrics-charts__legend_wrapper {
   &__legend_title {
     text-transform: uppercase;
   }
-
 }
 
 .metrics-charts__tooltip {
@@ -148,10 +159,33 @@ div:hover > div > .metrics-charts__legend_wrapper {
   content: " ";
   position: absolute;
   left: 40px;
-  top:0;
+  top: 0;
   transform: translateY(-99%);
   border-top: none;
   border-right: 7px solid transparent;
   border-left: 7px solid transparent;
   border-bottom: 7px solid rgba(0, 0, 0, 0.8);
-}
+}
+
+.label-container {
+  display: flex;
+  align-items: center;
+}
+
+.checkbox-container {
+  vertical-align: middle;
+  margin-right: 5px;
+}
+
+.graph-container {
+  border: 1px dashed #dee6eb;
+  margin: 2px 0;
+}
+
+.input-container {
+  display: flex;
+  font-size: 16px;
+  margin-left: 50px;
+  margin-top: 5px;
+  letter-spacing: 0.5px;
+}