Fix [Model monitoring] collapsed metrics graphs (#3156)

mlrun · Mar 7, 2025 · c476567 · c476567
1 parent 2eda31f
commit c476567
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 23 deletions.
diff --git a/src/components/DetailsDrillDownAlert/DetailsAlertsMetrics.js b/src/components/DetailsDrillDownAlert/DetailsAlertsMetrics.js
@@ -150,7 +150,7 @@ const DetailsAlertsMetrics = ({ selectedItem, filters, isAlertsPage = true }) =>
   return (
     <div className="metrics-wrapper">
       {isAlertsPage && detailsStore.loadingCounter === 0 && (
-        <div className="metrics__custom-filters">
+        <div className="metrics-wrapper__custom-filters">
           <DatePicker
             className="details-date-picker"
             date={detailsStore.dates.value[0]}
@@ -177,7 +177,7 @@ const DetailsAlertsMetrics = ({ selectedItem, filters, isAlertsPage = true }) =>
           )
         ) : null
       ) : (
-        <div ref={metricsContainerRef} className="metrics-wrapper alerts-table__metrics">
+        <div ref={metricsContainerRef} className="metrics alerts-table__metrics">
           {generatedMetrics.map(([applicationName, applicationMetrics]) => (
             <React.Fragment key={applicationName}>
               {isAlertsPage && <div className="metrics__card-header">{applicationName}</div>}

diff --git a/src/components/DetailsMetrics/DetailsMetrics.js b/src/components/DetailsMetrics/DetailsMetrics.js
@@ -229,7 +229,7 @@ const DetailsMetrics = ({ selectedItem }) => {
 
   return (
     <div className="metrics-wrapper">
-      <div className="metrics__custom-filters">
+      <div className="metrics-wrapper__custom-filters">
         <MetricsSelector
           name="metrics"
           disabled={!hasMetricsList}
@@ -268,7 +268,7 @@ const DetailsMetrics = ({ selectedItem }) => {
           )
         ) : null
       ) : (
-        <div ref={metricsContainerRef} className="metrics-wrapper">
+        <div ref={metricsContainerRef} className="metrics">
           {generatedMetrics.map(([applicationName, applicationMetrics]) => {
             return (
               <React.Fragment key={applicationName}>

diff --git a/src/components/DetailsMetrics/DetailsMetrics.scss b/src/components/DetailsMetrics/DetailsMetrics.scss
@@ -31,25 +31,6 @@ $stickyHeaderHeight: 55px;
     height: fit-content;
     margin-bottom: 30px;
 
-    &__custom-filters {
-      position: sticky;
-      top: 0;
-      z-index: 2;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: flex-end;
-      background-color: $white;
-
-      > * {
-        margin: 0 0 15px 0;
-      }
-
-      .details-date-picker {
-        margin-left: 15px;
-      }
-    }
-
     &__app-name {
       color: $primary;
       font-weight: 700;