chore: cleaning the code and filesystem and fixing antd message notif…

…ication (#12) * chore: move modal into the right folder and use alias for import * chore: fix notification (missing content) and remove useless field from importList array * chore: remove console.debug --------- Co-authored-by: Luca Tagliabue <[email protected]> Co-authored-by: dvalleri <[email protected]>
radicalbit · Jun 24, 2024 · 66e9369 · 66e9369
1 parent 61f0e05
commit 66e9369
Show file tree

Hide file tree

Showing 63 changed files with 67 additions and 80 deletions.
diff --git a/ui/src/components/ImportButton/import-current-button.jsx b/ui/src/components/ImportButton/import-current-button.jsx
@@ -8,8 +8,8 @@ const { useImportCurrentDataMutation } = modelsApiSlice;
 function ImportCurrentDatasetButton({ type = 'primary-light' }) {
   const { uuid: modelUUID } = useParams();
 
-  const [triggerImportFeedback, { isLoading, isError }] = useImportCurrentDataMutation({ fixedCacheKey: `imports-reference-data-${modelUUID}` });
-  const isSubmitDisabled = isLoading || isError;
+  const [triggerImportFeedback, { isLoading }] = useImportCurrentDataMutation({ fixedCacheKey: `imports-reference-data-${modelUUID}` });
+  const isSubmitDisabled = isLoading;
 
   const disableUploadAction = () => false;
 

diff --git a/...-detail-modal/current-dashboard-modal.jsx → ...dals/current-import-detail-modal/body.jsx b/...-detail-modal/current-dashboard-modal.jsx → ...dals/current-import-detail-modal/body.jsx
@@ -1,9 +1,9 @@
 import { Tabs } from '@radicalbit/radicalbit-design-system';
 import { useSearchParams } from 'react-router-dom';
 import { METRICS_TABS } from '@Container/models/Details/constants';
-import DataDriftMetrics from '../../data-drift-metrics';
-import DataQualityMetrics from '../../data-quality-metrics';
-import ModelQualityMetrics from '../../model-quality-metrics';
+import DataQualityMetrics from '@Container/models/Details/reference/data-quality';
+import ModelQualityMetrics from '@Container/models/Details/reference/model-quality';
+import DataDriftMetrics from '@Container/models/Details/current/data-drift';
 
 const tabs = [
   {
@@ -23,7 +23,7 @@ const tabs = [
   },
 ];
 
-export default function CurrentDashboardModal() {
+function Body() {
   const [searchParams, setSearchParams] = useSearchParams();
 
   const activeTab = searchParams.get('modal-tab-metrics') || METRICS_TABS.METRICS;
@@ -38,14 +38,17 @@ export default function CurrentDashboardModal() {
   };
 
   return (
-
-    <div className="px-4 pt-4 h-[99%]">
-      <Tabs
-        activeKey={activeTab}
-        fullHeight
-        items={tabs}
-        onChange={onChangeTab}
-      />
+    <div className="flex flex-col gap-4 h-full">
+      <div className="px-4 pt-4 h-[99%]">
+        <Tabs
+          activeKey={activeTab}
+          fullHeight
+          items={tabs}
+          onChange={onChangeTab}
+        />
+      </div>
     </div>
   );
 }
+
+export default Body;
diff --git a/...rts/current-import-detail-modal/index.jsx → ...als/current-import-detail-modal/index.jsx b/...rts/current-import-detail-modal/index.jsx → ...als/current-import-detail-modal/index.jsx
@@ -16,7 +16,7 @@ import {
 import { memo } from 'react';
 import { useParams } from 'react-router';
 import { useSearchParams } from 'react-router-dom';
-import CurrentDashboardModal from './current-dashboard-modal';
+import Body from './body';
 
 const { useGetModelByUUIDQuery } = modelsApiSlice;
 
@@ -38,9 +38,7 @@ function CurrentImportDetailModal() {
       onCancel={handleOnCancel}
       open
     >
-      <div className="flex flex-col gap-4 h-full">
-        <CurrentDashboardModal />
-      </div>
+      <Body />
     </RbitModal>
   );
 }

diff --git a/ui/src/components/modals/modals-provider.jsx b/ui/src/components/modals/modals-provider.jsx
@@ -1,7 +1,7 @@
 import { ModalsEnum } from '@Src/constants';
 import useModals from '@Src/hooks/use-modals';
 import AddNewModel from './add-new-model';
-import CurrentImportsDetailModal from '../../container/models/Details/current-dashboard/imports/current-import-detail-modal';
+import CurrentImportsDetailModal from './current-import-detail-modal';
 
 export default function ModalsProvider() {
   const { modalPayload: { modalName } } = useModals();

diff --git a/ui/src/container/models/Details/charts/line-chart/options.js b/ui/src/container/models/Details/charts/line-chart/options.js
@@ -1,6 +1,6 @@
 import { numberFormatter } from '@Src/constants';
 import moment from 'moment';
-import { CHART_COLOR } from '../../constants';
+import { CHART_COLOR } from '@Container/models/Details/constants';
 
 export default function lineChartOptions(title, color, currentDataset, referenceDataset) {
   const series = [

diff --git a/...y-classification-metrics/header/index.jsx → ...ft/binary-classification/header/index.jsx b/...y-classification-metrics/header/index.jsx → ...ft/binary-classification/header/index.jsx
diff --git a/...s/binary-classification-metrics/index.jsx → ...ata-drift/binary-classification/index.jsx b/...s/binary-classification-metrics/index.jsx → ...ata-drift/binary-classification/index.jsx
diff --git a/...ary-classification-metrics/list/index.jsx → ...rift/binary-classification/list/index.jsx b/...ary-classification-metrics/list/index.jsx → ...rift/binary-classification/list/index.jsx
diff --git a/...ification-metrics/search-filter/index.jsx → ...ry-classification/search-filter/index.jsx b/...ification-metrics/search-filter/index.jsx → ...ry-classification/search-filter/index.jsx
diff --git a/...tion-metrics/use-get-filtered-features.js → ...assification/use-get-filtered-features.js b/...tion-metrics/use-get-filtered-features.js → ...assification/use-get-filtered-features.js
diff --git a/...nt-dashboard/data-drift-metrics/index.jsx → ...dels/Details/current/data-drift/index.jsx b/...nt-dashboard/data-drift-metrics/index.jsx → ...dels/Details/current/data-drift/index.jsx
@@ -2,7 +2,7 @@ import { modelsApiSlice } from '@Src/store/state/models/api';
 import { ModelTypeEnum } from '@State/models/constants';
 import { memo } from 'react';
 import { useParams } from 'react-router';
-import BinaryClassificationMetrics from './binary-classification-metrics';
+import BinaryClassificationMetrics from './binary-classification';
 
 const { useGetModelByUUIDQuery } = modelsApiSlice;
 

diff --git a/...metrics/data-point-distribution/index.jsx → ...ication/data-point-distribution/index.jsx b/...metrics/data-point-distribution/index.jsx → ...ication/data-point-distribution/index.jsx
diff --git a/...trics/data-point-distribution/options.jsx → ...ation/data-point-distribution/options.jsx b/...trics/data-point-distribution/options.jsx → ...ation/data-point-distribution/options.jsx
diff --git a/...y-list/categorical/left-table/columns.jsx → ...y-list/categorical/left-table/columns.jsx b/...y-list/categorical/left-table/columns.jsx → ...y-list/categorical/left-table/columns.jsx
diff --git a/...ity-list/categorical/left-table/index.jsx → ...ity-list/categorical/left-table/index.jsx b/...ity-list/categorical/left-table/index.jsx → ...ity-list/categorical/left-table/index.jsx
diff --git a/...-list/categorical/right-table/columns.jsx → ...-list/categorical/right-table/columns.jsx b/...-list/categorical/right-table/columns.jsx → ...-list/categorical/right-table/columns.jsx
diff --git a/...ty-list/categorical/right-table/index.jsx → ...ty-list/categorical/right-table/index.jsx b/...ty-list/categorical/right-table/index.jsx → ...ty-list/categorical/right-table/index.jsx
diff --git a/...ation-metrics/data-quality-list/index.jsx → ...lassification/data-quality-list/index.jsx b/...ation-metrics/data-quality-list/index.jsx → ...lassification/data-quality-list/index.jsx
diff --git a/...ta-quality-list/numerical/chart/index.jsx → ...ta-quality-list/numerical/chart/index.jsx b/...ta-quality-list/numerical/chart/index.jsx → ...ta-quality-list/numerical/chart/index.jsx
diff --git a/...a-quality-list/numerical/chart/options.js → ...a-quality-list/numerical/chart/options.js b/...a-quality-list/numerical/chart/options.js → ...a-quality-list/numerical/chart/options.js
diff --git a/...-quality-list/numerical/table/columns.jsx → ...-quality-list/numerical/table/columns.jsx b/...-quality-list/numerical/table/columns.jsx → ...-quality-list/numerical/table/columns.jsx
diff --git a/...ta-quality-list/numerical/table/index.jsx → ...ta-quality-list/numerical/table/index.jsx b/...ta-quality-list/numerical/table/index.jsx → ...ta-quality-list/numerical/table/index.jsx
diff --git a/...s/binary-classification-metrics/index.jsx → ...a-quality/binary-classification/index.jsx b/...s/binary-classification-metrics/index.jsx → ...a-quality/binary-classification/index.jsx
diff --git a/...ification-metrics/search-filter/index.jsx → ...ry-classification/search-filter/index.jsx b/...ification-metrics/search-filter/index.jsx → ...ry-classification/search-filter/index.jsx
diff --git a/...tion-metrics/use-get-filtered-features.js → ...assification/use-get-filtered-features.js b/...tion-metrics/use-get-filtered-features.js → ...assification/use-get-filtered-features.js
diff --git a/...-dashboard/data-quality-metrics/index.jsx → ...ls/Details/current/data-quality/index.jsx b/...-dashboard/data-quality-metrics/index.jsx → ...ls/Details/current/data-quality/index.jsx
@@ -2,7 +2,7 @@ import { modelsApiSlice } from '@Src/store/state/models/api';
 import { ModelTypeEnum } from '@State/models/constants';
 import { memo } from 'react';
 import { useParams } from 'react-router';
-import BinaryClassificationMetrics from './binary-classification-metrics';
+import BinaryClassificationMetrics from './binary-classification';
 
 const { useGetModelByUUIDQuery } = modelsApiSlice;
 

diff --git a/...ils/current-dashboard/imports/columns.jsx → ...odels/Details/current/imports/columns.jsx b/...ils/current-dashboard/imports/columns.jsx → ...odels/Details/current/imports/columns.jsx
@@ -6,13 +6,6 @@ import moment from 'moment';
 import { DataTableAction, FontAwesomeIcon, Spinner } from '@radicalbit/radicalbit-design-system';
 
 export const getColumns = (activeFilters, activeSorter) => [
-  columnFactory({
-    title: 'File name',
-    dataIndex: 'fileName',
-    key: 'fileName',
-    activeFilters,
-    activeSorter,
-  }),
   columnFactory({
     title: 'File path',
     dataIndex: 'path',

diff --git a/...tails/current-dashboard/imports/index.jsx → .../models/Details/current/imports/index.jsx b/...tails/current-dashboard/imports/index.jsx → .../models/Details/current/imports/index.jsx
@@ -59,19 +59,13 @@ function FeedbackTable() {
   const queryParams = useSelector((state) => contextConfigurationSelectors.selectQueryParamsSelector(state, NamespaceEnum.CURRENT_IMPORT));
 
   const { data } = useGetCurrentImportsQuery({ uuid: modelUUID, queryParams });
-  const importList = data?.items.map((item) => ({
-    ...item,
-    fileName: item.path.split('current/')[1],
-    path: `${item.path.split('current/')[0]}current/`,
-    errorEntries: 0,
-    entries: 100,
-  })) ?? [];
+  const items = data?.items || [];
   const recordCount = data?.total;
 
   return (
     <SmartTable
       columns={getColumns}
-      dataSource={importList}
+      dataSource={items}
       modifier="w-full pt-4"
       namespace={NamespaceEnum.CURRENT_IMPORT}
       recordCount={recordCount}

diff --git a/...odels/Details/current-dashboard/index.jsx → ...ontainer/models/Details/current/index.jsx b/...odels/Details/current-dashboard/index.jsx → ...ontainer/models/Details/current/index.jsx
@@ -3,11 +3,11 @@ import { JOB_STATUS } from '@Src/constants';
 import { modelsApiSlice } from '@Src/store/state/models/api';
 import { Tabs } from '@radicalbit/radicalbit-design-system';
 import { useParams, useSearchParams } from 'react-router-dom';
-import { METRICS_TABS } from '../constants';
-import DataDriftMetrics from './data-drift-metrics/binary-classification-metrics';
-import DataQualityMetrics from './data-quality-metrics';
+import { METRICS_TABS } from '@Container/models/Details/constants';
+import DataDriftMetrics from './data-drift/binary-classification';
+import DataQualityMetrics from './data-quality';
 import Imports from './imports';
-import ModelQualityMetrics from './model-quality-metrics';
+import ModelQualityMetrics from './model-quality';
 
 const { useGetReferenceDataQualityQuery } = modelsApiSlice;
 

diff --git a/.../binary-classification-metrics/charts.jsx → ...-quality/binary-classification/charts.jsx b/.../binary-classification-metrics/charts.jsx → ...-quality/binary-classification/charts.jsx
diff --git a/...binary-classification-metrics/columns.jsx → ...quality/binary-classification/columns.jsx b/...binary-classification-metrics/columns.jsx → ...quality/binary-classification/columns.jsx
diff --git a/...s/binary-classification-metrics/index.jsx → ...l-quality/binary-classification/index.jsx b/...s/binary-classification-metrics/index.jsx → ...l-quality/binary-classification/index.jsx
diff --git a/...dashboard/model-quality-metrics/index.jsx → ...s/Details/current/model-quality/index.jsx b/...dashboard/model-quality-metrics/index.jsx → ...s/Details/current/model-quality/index.jsx
@@ -2,7 +2,7 @@ import { modelsApiSlice } from '@Src/store/state/models/api';
 import { ModelTypeEnum } from '@State/models/constants';
 import { memo } from 'react';
 import { useParams } from 'react-router';
-import BinaryClassificationMetrics from './binary-classification-metrics';
+import BinaryClassificationMetrics from './binary-classification';
 
 const { useGetModelByUUIDQuery } = modelsApiSlice;
 

diff --git a/ui/src/container/models/Details/index.jsx b/ui/src/container/models/Details/index.jsx
@@ -1,10 +1,10 @@
-import { useParams, useSearchParams } from 'react-router-dom';
-import { modelsApiSlice } from '@State/models/api';
 import NotFound from '@Components/ErrorPage/not-found';
-import { MODEL_TABS_ENUM } from './constants';
-import CurrentDashboard from './current-dashboard';
+import { modelsApiSlice } from '@State/models/api';
+import { useParams, useSearchParams } from 'react-router-dom';
+import { MODEL_TABS_ENUM } from '@Container/models/Details/constants';
+import Current from './current';
 import Overview from './overview';
-import ReferenceDashboard from './reference-dashboard';
+import ReferenceDashboard from './reference';
 
 const { useGetModelByUUIDQuery } = modelsApiSlice;
 
@@ -30,6 +30,6 @@ export function ModelDetails() {
   }
 
   if (activeKey === MODEL_TABS_ENUM.CURRENT_DASHBOARD) {
-    return (<CurrentDashboard />);
+    return (<Current />);
   }
 }
diff --git a/ui/src/container/models/Details/overview/index.jsx b/ui/src/container/models/Details/overview/index.jsx
@@ -2,7 +2,7 @@ import {
   Tabs,
 } from '@radicalbit/radicalbit-design-system';
 import { useSearchParams } from 'react-router-dom';
-import { MODEL_TABS_ENUM, OVERVIEW_TABS_ENUM } from '../constants';
+import { MODEL_TABS_ENUM, OVERVIEW_TABS_ENUM } from '@Container/models/Details/constants';
 import OutputsTab from './outputs-tab';
 import SummaryTab from './summary-tab';
 import VariablesTab from './variables-tab';
@@ -18,9 +18,21 @@ function Overview() {
   };
 
   const tabs = [
-    { label: 'Summary', key: OVERVIEW_TABS_ENUM.SUMMARY, children: <SummaryTab /> },
-    { label: 'Variables', key: OVERVIEW_TABS_ENUM.VARIABLES, children: <VariablesTab /> },
-    { label: 'Outputs', key: OVERVIEW_TABS_ENUM.OUTPUTS, children: <OutputsTab /> },
+    {
+      label: 'Summary',
+      key: OVERVIEW_TABS_ENUM.SUMMARY,
+      children: <SummaryTab />,
+    },
+    {
+      label: 'Variables',
+      key: OVERVIEW_TABS_ENUM.VARIABLES,
+      children: <VariablesTab />,
+    },
+    {
+      label: 'Outputs',
+      key: OVERVIEW_TABS_ENUM.OUTPUTS,
+      children: <OutputsTab />,
+    },
   ];
 
   return (

diff --git a/ui/src/container/models/Details/overview/outputs-tab/columns.jsx b/ui/src/container/models/Details/overview/outputs-tab/columns.jsx
@@ -1,5 +1,5 @@
 import { Tag } from '@radicalbit/radicalbit-design-system';
-import { OVERVIEW_ROW_TYPE } from '../../constants';
+import { OVERVIEW_ROW_TYPE } from '@Container/models/Details/constants';
 
 const outputsColumns = (dataSource) => [
   {

diff --git a/ui/src/container/models/Details/overview/outputs-tab/index.jsx b/ui/src/container/models/Details/overview/outputs-tab/index.jsx
@@ -2,7 +2,7 @@ import { DataTable } from '@radicalbit/radicalbit-design-system';
 import { memo } from 'react';
 import { useParams } from 'react-router';
 import { modelsApiSlice } from '@Store/state/models/api';
-import { OVERVIEW_ROW_TYPE } from '../../constants';
+import { OVERVIEW_ROW_TYPE } from '@Container/models/Details/constants';
 import outputsColumns from './columns';
 
 const { useGetModelByUUIDQuery } = modelsApiSlice;

diff --git a/ui/src/container/models/Details/overview/variables-tab/index.jsx b/ui/src/container/models/Details/overview/variables-tab/index.jsx
@@ -2,8 +2,8 @@ import { DataTable } from '@radicalbit/radicalbit-design-system';
 import { useParams } from 'react-router';
 import { memo } from 'react';
 import { modelsApiSlice } from '@Store/state/models/api';
+import { OVERVIEW_ROW_TYPE } from '@Container/models/Details/constants';
 import featuresColumns from './columns';
-import { OVERVIEW_ROW_TYPE } from '../../constants';
 
 const { useGetModelByUUIDQuery } = modelsApiSlice;
 

diff --git a/...metrics/data-point-distribution/index.jsx → ...ication/data-point-distribution/index.jsx b/...metrics/data-point-distribution/index.jsx → ...ication/data-point-distribution/index.jsx
diff --git a/...trics/data-point-distribution/options.jsx → ...ation/data-point-distribution/options.jsx b/...trics/data-point-distribution/options.jsx → ...ation/data-point-distribution/options.jsx
diff --git a/...y-list/categorical/left-table/columns.jsx → ...y-list/categorical/left-table/columns.jsx b/...y-list/categorical/left-table/columns.jsx → ...y-list/categorical/left-table/columns.jsx
diff --git a/...ity-list/categorical/left-table/index.jsx → ...ity-list/categorical/left-table/index.jsx b/...ity-list/categorical/left-table/index.jsx → ...ity-list/categorical/left-table/index.jsx
diff --git a/...-list/categorical/right-table/columns.jsx → ...-list/categorical/right-table/columns.jsx b/...-list/categorical/right-table/columns.jsx → ...-list/categorical/right-table/columns.jsx
diff --git a/...ty-list/categorical/right-table/index.jsx → ...ty-list/categorical/right-table/index.jsx b/...ty-list/categorical/right-table/index.jsx → ...ty-list/categorical/right-table/index.jsx
diff --git a/...ation-metrics/data-quality-list/index.jsx → ...lassification/data-quality-list/index.jsx b/...ation-metrics/data-quality-list/index.jsx → ...lassification/data-quality-list/index.jsx
diff --git a/...ta-quality-list/numerical/chart/index.jsx → ...ta-quality-list/numerical/chart/index.jsx b/...ta-quality-list/numerical/chart/index.jsx → ...ta-quality-list/numerical/chart/index.jsx
diff --git a/...a-quality-list/numerical/chart/options.js → ...a-quality-list/numerical/chart/options.js b/...a-quality-list/numerical/chart/options.js → ...a-quality-list/numerical/chart/options.js
diff --git a/...-quality-list/numerical/table/columns.jsx → ...-quality-list/numerical/table/columns.jsx b/...-quality-list/numerical/table/columns.jsx → ...-quality-list/numerical/table/columns.jsx
diff --git a/...ta-quality-list/numerical/table/index.jsx → ...ta-quality-list/numerical/table/index.jsx b/...ta-quality-list/numerical/table/index.jsx → ...ta-quality-list/numerical/table/index.jsx
diff --git a/...s/binary-classification-metrics/index.jsx → ...a-quality/binary-classification/index.jsx b/...s/binary-classification-metrics/index.jsx → ...a-quality/binary-classification/index.jsx
diff --git a/...ification-metrics/search-filter/index.jsx → ...ry-classification/search-filter/index.jsx b/...ification-metrics/search-filter/index.jsx → ...ry-classification/search-filter/index.jsx
diff --git a/...tion-metrics/use-get-filtered-features.js → ...assification/use-get-filtered-features.js b/...tion-metrics/use-get-filtered-features.js → ...assification/use-get-filtered-features.js
diff --git a/...-dashboard/data-quality-metrics/index.jsx → .../Details/reference/data-quality/index.jsx b/...-dashboard/data-quality-metrics/index.jsx → .../Details/reference/data-quality/index.jsx
@@ -2,7 +2,7 @@ import { modelsApiSlice } from '@Src/store/state/models/api';
 import { ModelTypeEnum } from '@State/models/constants';
 import { memo } from 'react';
 import { useParams } from 'react-router';
-import BinaryClassificationMetrics from './binary-classification-metrics';
+import BinaryClassificationMetrics from './binary-classification';
 
 const { useGetModelByUUIDQuery } = modelsApiSlice;
 

diff --git a/...s/reference-dashboard/imports/columns.jsx → ...els/Details/reference/imports/columns.jsx b/...s/reference-dashboard/imports/columns.jsx → ...els/Details/reference/imports/columns.jsx
@@ -5,13 +5,6 @@ import moment from 'moment';
 import { FontAwesomeIcon, Spinner } from '@radicalbit/radicalbit-design-system';
 
 export const getColumns = (activeFilters, activeSorter) => [
-  columnFactory({
-    title: 'File name',
-    dataIndex: 'fileName',
-    key: 'fileName',
-    activeFilters,
-    activeSorter,
-  }),
   columnFactory({
     title: 'File path',
     dataIndex: 'path',

diff --git a/...ils/reference-dashboard/imports/index.jsx → ...odels/Details/reference/imports/index.jsx b/...ils/reference-dashboard/imports/index.jsx → ...odels/Details/reference/imports/index.jsx
@@ -43,19 +43,13 @@ function FeedbackTable() {
   const { uuid: modelUUID } = useParams();
 
   const { data } = useGetReferenceImportsQuery({ uuid: modelUUID });
-  const importList = data?.items.map((item) => ({
-    ...item,
-    fileName: item.path.split('reference/')[1],
-    path: `${item.path.split('reference/')[0]}reference/`,
-    errorEntries: 0,
-    entries: 100,
-  })) ?? [];
+  const items = data?.items || [];
   const recordCount = data?.total;
 
   return (
     <SmartTable
       columns={getColumns}
-      dataSource={importList}
+      dataSource={items}
       modifier="w-full pt-4"
       namespace={NamespaceEnum.REFERENCE_IMPORT}
       recordCount={recordCount}

diff --git a/...els/Details/reference-dashboard/index.jsx → ...tainer/models/Details/reference/index.jsx b/...els/Details/reference-dashboard/index.jsx → ...tainer/models/Details/reference/index.jsx
@@ -3,10 +3,10 @@ import { JOB_STATUS } from '@Src/constants';
 import { modelsApiSlice } from '@Src/store/state/models/api';
 import { Tabs } from '@radicalbit/radicalbit-design-system';
 import { useParams, useSearchParams } from 'react-router-dom';
-import { METRICS_TABS } from '../constants';
-import DataQualityMetrics from './data-quality-metrics';
+import { METRICS_TABS } from '@Container/models/Details/constants';
+import DataQualityMetrics from './data-quality';
 import Imports from './imports';
-import ModelQualityMetrics from './model-quality-metrics';
+import ModelQualityMetrics from './model-quality';
 
 const { useGetReferenceDataQualityQuery } = modelsApiSlice;
 

diff --git a/...binary-classification-metrics/columns.jsx → ...quality/binary-classification/columns.jsx b/...binary-classification-metrics/columns.jsx → ...quality/binary-classification/columns.jsx
diff --git a/...s/binary-classification-metrics/index.jsx → ...l-quality/binary-classification/index.jsx b/...s/binary-classification-metrics/index.jsx → ...l-quality/binary-classification/index.jsx
diff --git a/...dashboard/model-quality-metrics/index.jsx → ...Details/reference/model-quality/index.jsx b/...dashboard/model-quality-metrics/index.jsx → ...Details/reference/model-quality/index.jsx
@@ -2,7 +2,7 @@ import { modelsApiSlice } from '@Src/store/state/models/api';
 import { ModelTypeEnum } from '@State/models/constants';
 import { memo } from 'react';
 import { useParams } from 'react-router';
-import BinaryClassificationMetrics from './binary-classification-metrics';
+import BinaryClassificationMetrics from './binary-classification';
 
 const { useGetModelByUUIDQuery } = modelsApiSlice;
 

diff --git a/ui/src/container/models/Details/secondary-column/content.jsx b/ui/src/container/models/Details/secondary-column/content.jsx
@@ -9,7 +9,7 @@ import { useSelector } from 'react-redux';
 import JobStatusPin from '@Components/JobStatus/job-status-pin';
 import { selectors as contextConfigurationSelectors } from '@State/context-configuration';
 import { NamespaceEnum } from '@Src/constants';
-import { MODEL_TABS_ENUM } from '../constants';
+import { MODEL_TABS_ENUM } from '@Container/models/Details/constants';
 
 const { useGetModelsQuery } = modelsApiSlice;
 

diff --git a/ui/src/store/middlewares.js b/ui/src/store/middlewares.js
@@ -33,7 +33,7 @@ export const rtkQueryErrorLogger = ({ dispatch }) => (next) => (action) => {
     const error2 = action.payload?.data?.error?.message; // likes models-repo errors
     const error3 = action.payload?.data;
     const message = error1 || error2 || error3 || 'generic error';
-    const notificationMessage = notificationErrorJson({ status, statusText: message });
+    const notificationMessage = notificationErrorJson({ status, message });
 
     dispatch(setNotificationMessage(notificationMessage));
   }

diff --git a/ui/src/store/state/notification/hooks.js b/ui/src/store/state/notification/hooks.js
@@ -13,8 +13,8 @@ const useNotification = () => {
 
   useEffect(() => {
     if (notificationShowMessage) {
-      const { type, title } = notificationMessage;
-      Message[type](title);
+      const { type, title, content } = notificationMessage;
+      Message[type]({ title, content });
 
       dispatch(resetNotificationMessage());
     }

diff --git a/ui/src/store/state/notification/slice.js b/ui/src/store/state/notification/slice.js
@@ -1,5 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit';
-import { NotificationEnum } from './constants';
+import { NotificationEnum } from '@State/notification/constants';
 
 const initialState = {
   showMessage: false,