Impl [Models endpoints monitoring, metrics] Remove Metrics Color Rand…

…omization (#2555)
mlrun · Jun 26, 2024 · 3dec6cb · 3dec6cb
1 parent 49bd276
commit 3dec6cb
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 82 deletions.
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "final-form-arrays": "^3.1.0",
     "fs-extra": "^10.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "iguazio.dashboard-react-controls": "2.1.0",
+    "iguazio.dashboard-react-controls": "2.1.1",
     "is-wsl": "^1.1.0",
     "js-base64": "^2.5.2",
     "js-yaml": "^4.1.0",

diff --git a/src/components/DetailsMetrics/DetailsMetrics.js b/src/components/DetailsMetrics/DetailsMetrics.js
@@ -41,6 +41,7 @@ import {
 } from './detailsMetrics.util'
 
 import { ReactComponent as MetricsIcon } from 'igz-controls/images/metrics-icon.svg'
+import colors from 'igz-controls/scss/colors.scss'
 
 import './DetailsMetrics.scss'
 
@@ -119,8 +120,8 @@ const DetailsMetrics = ({ selectedItem }) => {
           chartType: CHART_TYPE_BAR,
           tension: 0.2,
           borderWidth: 2,
-          backgroundColor: metric.color,
-          borderColor: metric.color
+          backgroundColor: colors.java,
+          borderColor: colors.java
         }
       ]
     }
@@ -399,7 +400,7 @@ const DetailsMetrics = ({ selectedItem }) => {
                                   tension: 0.2,
                                   totalDriftStatus: metric.totalDriftStatus,
                                   borderWidth: 1,
-                                  borderColor: metric.color
+                                  borderColor: metric.totalDriftStatus?.chartColor || colors.java
                                 }
                               ]
                             }

diff --git a/src/components/DetailsMetrics/detailsMetrics.util.js b/src/components/DetailsMetrics/detailsMetrics.util.js
@@ -25,6 +25,7 @@ import {
   PAST_MONTH_DATE_OPTION,
   PAST_WEEK_DATE_OPTION
 } from '../../utils/datePicker.util'
+import colors from 'igz-controls/scss/colors.scss'
 
 export const METRIC_COMPUTED_AVG_POINTS = 'metric_computed_avg_points'
 export const METRIC_RAW_AVG_POINTS = 'metric_raw_avg_points'
@@ -36,9 +37,6 @@ export const METRIC_RAW_TOTAL_POINTS = 'metric_raw_total_points'
 export const METRIC_COMPUTED_TOTAL_POINTS = 'metric_computed_total_points'
 export const TWO_DIGIT = '2-digit'
 
-const metricsColorsByFullName = {}
-const usedColors = new Set()
-
 export const timeRangeMapping = {
   [PAST_24_HOUR_DATE_OPTION]: 'last 24 day',
   [PAST_WEEK_DATE_OPTION]: 'last week',
@@ -77,19 +75,23 @@ const resultKindConfig = {
 const driftStatusConfig = {
   '-1': {
     className: 'no_status',
-    text: 'No status'
+    text: 'No status',
+    chartColor: colors.doveGray
   },
   0: {
     className: 'no_drift',
-    text: 'No drift'
+    text: 'No drift',
+    chartColor: colors.brightTurquoise
   },
   1: {
     className: 'possible_drift',
-    text: 'Possible drift'
+    text: 'Possible drift',
+    chartColor: colors.grandis
   },
   2: {
     className: 'drift_detected',
-    text: 'Drift detected'
+    text: 'Drift detected',
+    chartColor: colors.ceriseRed
   }
 }
 
@@ -106,66 +108,12 @@ const generateResultMessage = (driftStatus, resultKind) => {
   return `${capitalize(resultKindMessage)} ${text.toLowerCase().replace('drift', '').trim()}`
 }
 
-const hslToHex = (hue, saturation, lightness) => {
-  const normalizedLightness = lightness / 100
-  const chroma = (saturation * Math.min(normalizedLightness, 1 - normalizedLightness)) / 100
-
-  const calculateColorComponent = step => {
-    const rotation = (step + hue / 30) % 12
-    const color =
-      normalizedLightness - chroma * Math.max(Math.min(rotation - 3, 9 - rotation, 1), -1)
-
-    return Math.round(255 * color)
-      .toString(16)
-      .padStart(2, '0')
-  }
-
-  return `#${calculateColorComponent(0)}${calculateColorComponent(8)}${calculateColorComponent(4)}`
-}
-
-const getRandomHexColor = () => {
-  const hue = Math.floor(Math.random() * 361)
-  const saturation = Math.floor(Math.random() * 56) + 45
-  const lightness = Math.floor(Math.random() * 71)
-
-  return hslToHex(hue, saturation, lightness)
-}
-
-const setMetricColorByFullName = (name, color) => {
-  metricsColorsByFullName[name] = color
-}
-
-const generateUniqueColor = () => {
-  for (;;) {
-    let color = getRandomHexColor()
-
-    if (!usedColors.has(color)) {
-      usedColors.add(color)
-
-      return color
-    }
-  }
-}
-
-export const getMetricColorByFullName = name => {
-  if (metricsColorsByFullName[name]) {
-    return metricsColorsByFullName[name]
-  } else {
-    const newColor = generateUniqueColor()
-
-    setMetricColorByFullName(name, newColor)
-
-    return newColor
-  }
-}
-
 export const generateMetricsItems = metrics => {
   return chain(metrics)
     .sortBy(metric => metric.label)
     .map(metric => {
       return {
         ...metric,
-        color: getMetricColorByFullName(metric.full_name),
         id: metric.full_name
       }
     })
@@ -280,7 +228,6 @@ export const parseMetrics = (data, timeUnit) => {
     return {
       ...metric,
       app: getAppName(full_name),
-      color: getMetricColorByFullName(full_name),
       id: index,
       labels: timeFormatters[timeUnit].formatMetricsTime(values),
       points,

diff --git a/src/elements/MetricsSelector/MetricsSelector.js b/src/elements/MetricsSelector/MetricsSelector.js
@@ -147,13 +147,8 @@ const MetricsSelector = ({ maxSelectionNumber, metrics, name, onSelect, preselec
           className="metrics-selector-name"
           template={<TextTooltipTemplate text={metric.name} />}
         >
-          <span
-            className="metrics-selector-color-indicator"
-            style={{ backgroundColor: metric.color }}
-          />
           <span className="data-ellipsis">{metric.name}</span>
         </Tooltip>
-
         <Tooltip
           className="metrics-selector-icon-type"
           template={<TextTooltipTemplate text={capitalize(metric.type)} />}

diff --git a/src/elements/MetricsSelector/metricsSelector.scss b/src/elements/MetricsSelector/metricsSelector.scss
@@ -65,20 +65,11 @@
 
           .metrics-selector-name {
             display: flex;
-            align-items: center;
             flex: 1;
+            align-items: center;
             margin-right: 5px;
           }
 
-          .metrics-selector-color-indicator {
-            width: 8px;
-            min-width: 8px;
-            height: 8px;
-            margin: 0 5px;
-            background-color: transparent;
-            border-radius: 50%;
-          }
-
           .metrics-selector-icon-type {
             display: flex;
           }

diff --git a/src/types.js b/src/types.js
@@ -232,7 +232,6 @@ export const METRICS_SELECTOR_OPTIONS = PropTypes.arrayOf(
     name: PropTypes.string.isRequired,
     type: PropTypes.string.isRequired,
     id: PropTypes.string.isRequired,
-    color: PropTypes.string.isRequired,
     full_name: PropTypes.string.isRequired,
     project: PropTypes.string
   })