feat(ui): implement WIP and alerts board (#172)

* feat: implement alerts <Board /> * feat: work in progress section * feat(ui): fix grid proportion * feat(ui): fix grid proportion * feat(ui): update axios version * fate(ui): add margin-left to right-column launchpad --------- Co-authored-by: Luca Tagliabue <[email protected]>
radicalbit · Oct 7, 2024 · a5c93b8 · a5c93b8
1 parent c5dcbe4
commit a5c93b8
Show file tree

Hide file tree

Showing 63 changed files with 1,068 additions and 915 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -21,7 +21,7 @@
     "@reduxjs/toolkit": "^2.2.4",
     "@vitejs/plugin-react": "^4.2.1",
     "ace-builds": "^1.33.2",
-    "axios": "1.7.2",
+    "axios": "^1.7.7",
     "buffer": "^6.0.3",
     "echarts": "^5.5.0",
     "echarts-for-react": "^3.0.2",

diff --git a/ui/src/components/ErrorPage/something-went-wrong.jsx b/ui/src/components/ErrorPage/something-went-wrong.jsx
@@ -2,7 +2,7 @@ import Logo from '@Img/logo.png';
 import { Void } from '@radicalbit/radicalbit-design-system';
 import { memo } from 'react';
 
-function SomethingWentWrong() {
+function SomethingWentWrong({ size }) {
   return (
     <Void
       description={(
@@ -13,6 +13,7 @@ function SomethingWentWrong() {
         </>
       )}
       image={<img alt="500" src={Logo} />}
+      size={size}
       title={(
         <>
           Oh no!

diff --git a/ui/src/components/JobStatus/job-status-pin.jsx b/ui/src/components/JobStatus/job-status-pin.jsx
@@ -21,8 +21,12 @@ function JobStatusPin({ jobStatus }) {
       );
     }
 
+    case JOB_STATUS.MISSING_CURRENT: {
+      return <Pin size="small" type="secondary" />;
+    }
+
     case JOB_STATUS.MISSING_REFERENCE: {
-      return false;
+      return <Pin size="small" type="secondary" />;
     }
 
     default: return false;

diff --git a/ui/src/components/JobStatus/job-status-tag.jsx b/ui/src/components/JobStatus/job-status-tag.jsx
@@ -1,6 +1,6 @@
 import { JOB_STATUS } from '@Src/constants';
 import { Tag } from '@radicalbit/radicalbit-design-system';
-import { modelsApiSlice } from '@Src/store/state/models/api';
+import { modelsApiSlice } from '@State/models/api';
 import { useParams } from 'react-router';
 
 const { useGetReferenceDataQualityQuery } = modelsApiSlice;

diff --git a/ui/src/components/modals/add-new-model/step-four/form-fields.jsx b/ui/src/components/modals/add-new-model/step-four/form-fields.jsx
@@ -1,4 +1,4 @@
-import { ModelTypeEnum } from '@Src/store/state/models/constants';
+import { ModelTypeEnum } from '@State/models/constants';
 import {
   FormField,
   Select,

diff --git a/ui/src/components/modals/current-import-detail-modal/body.jsx b/ui/src/components/modals/current-import-detail-modal/body.jsx
@@ -10,8 +10,8 @@ import MultiClassificationDataDriftMetrics from '@Container/models/Details/multi
 import RegressionDataQualityMetrics from '@Container/models/Details/regression/current/data-quality';
 import RegressionModelQualityMetrics from '@Container/models/Details/regression/current/model-quality';
 import RegressionDataDriftMetrics from '@Container/models/Details/regression/current/data-drift';
-import { modelsApiSlice } from '@Src/store/state/models/api';
-import { ModelTypeEnum } from '@Src/store/state/models/constants';
+import { modelsApiSlice } from '@State/models/api';
+import { ModelTypeEnum } from '@State/models/constants';
 
 const { useGetModelByUUIDQuery } = modelsApiSlice;
 

diff --git a/ui/src/components/modals/current-import-detail-modal/index.jsx b/ui/src/components/modals/current-import-detail-modal/index.jsx
@@ -1,7 +1,7 @@
 import useModals from '@Hooks/use-modals';
 import { STATUS_SELECTOR_MAX_LEN, TRUNCATE_LENGTH } from '@Src/constants';
-import { modelsApiSlice } from '@Src/store/state/models/api';
-import { DataTypeEnumLabel, GranularityEnumLabel, ModelTypeEnumLabel } from '@Src/store/state/models/constants';
+import { modelsApiSlice } from '@State/models/api';
+import { DataTypeEnumLabel, GranularityEnumLabel, ModelTypeEnumLabel } from '@State/models/constants';
 import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import { truncate } from 'lodash';
 import moment from 'moment';

diff --git a/ui/src/container/app/index.jsx b/ui/src/container/app/index.jsx
@@ -1,8 +1,8 @@
 import SiderBk from '@Img/sider-bk.png';
 import Logo from '@Src/components/Logo';
 import ModalsProvider from '@Src/components/modals/modals-provider';
-import { useContextConfigurationFromUrlEffect } from '@Src/store/state/context-configuration/hooks';
-import { useNotification } from '@Src/store/state/notification/hooks';
+import { useContextConfigurationFromUrlEffect } from '@State/context-configuration/hooks';
+import { useNotification } from '@State/notification/hooks';
 import { actions as layoutActions, selectors as layoutSelectors } from '@State/layout';
 import '@Styles/index.less';
 import '@Styles/tailwind.less';

diff --git a/ui/src/container/launchpad/central-row/index.jsx b/ui/src/container/launchpad/central-row/index.jsx
@@ -69,7 +69,7 @@ function OverallList() {
       clickable
       columns={getColumns}
       dataSource={modelStats}
-      fixedHeader="28rem"
+      fixedHeader="30rem"
       namespace={NamespaceEnum.MODELS_STATS}
       onRow={({ uuid }) => ({
         onClick: () => handleOnClick({ uuid }),

diff --git a/ui/src/container/launchpad/index.jsx b/ui/src/container/launchpad/index.jsx
@@ -1,3 +1,4 @@
+import Right from './right';
 import TopRow from './top-row';
 import ModelStatsList from './central-row';
 
@@ -6,7 +7,7 @@ export default function Launchpad() {
     <div className="flex flex-col p-4 gap-4">
       <TopRow />
 
-      <div className="grid grid-cols-4 h-full">
+      <div className="grid grid-cols-[1.2fr,1.2fr,1fr,1.2fr] gap-4 h-full">
         <div className="col-span-3">
           <ModelStatsList />
         </div>
@@ -19,6 +20,6 @@ export default function Launchpad() {
 
 function RightColumn() {
   return (
-    'RightColumn'
+    <Right />
   );
 }
diff --git a/ui/src/container/launchpad/right/alerts.jsx b/ui/src/container/launchpad/right/alerts.jsx
@@ -0,0 +1,73 @@
+import { Board, Skeleton } from '@radicalbit/radicalbit-design-system';
+import SomethingWentWrong from '@Components/ErrorPage/something-went-wrong';
+import { alertsApiSlice } from '@State/alerts/api';
+
+const { useGetAlertsQuery } = alertsApiSlice;
+
+function Alerts() {
+  const { data = [undefined, undefined], isLoading, isError } = useGetAlertsQuery();
+  console.debug(data);
+
+  if (isLoading) {
+    return (
+      <Board
+        header="Alerts"
+        main={(
+          <div className="flex flex-col gap-2">
+            <Skeleton.Input active block />
+
+            <Skeleton.Input active block />
+
+            <Skeleton.Input active block />
+          </div>
+      )}
+      />
+    );
+  }
+
+  if (isError) {
+    return (
+      <Board
+        header="Alerts"
+        main={<SomethingWentWrong size="small" />}
+        size="small"
+      />
+    );
+  }
+
+  return (
+    <Board
+      header="Alerts"
+      main={(
+        <div className="flex flex-col gap-2">
+          {data.map((alert) => (
+            <Main alert={alert} />
+          ))}
+        </div>
+      )}
+      size="small"
+    />
+  );
+}
+
+function Main({ alert }) {
+  const alertType = alert?.alertType || 'Foo';
+  const fieldsInError = alert?.fieldsInError || 'Bar';
+
+  return (
+    <Board
+      borderType="none"
+      main={(
+        <div>
+          <strong>{alertType}</strong>
+
+          <span>{fieldsInError}</span>
+        </div>
+      )}
+      size="small"
+      type="error"
+    />
+  );
+}
+
+export default Alerts;
diff --git a/ui/src/container/launchpad/right/index.jsx b/ui/src/container/launchpad/right/index.jsx
@@ -0,0 +1,14 @@
+import Alerts from './alerts';
+import WorkInProgress from './work-in-progress';
+
+function Right() {
+  return (
+    <div className="flex flex-col gap-4 ml-4">
+      <Alerts />
+
+      <WorkInProgress />
+    </div>
+  );
+}
+
+export default Right;
diff --git a/ui/src/container/launchpad/right/work-in-progress/columns.jsx b/ui/src/container/launchpad/right/work-in-progress/columns.jsx
@@ -0,0 +1,30 @@
+import JobStatusPin from '@Components/JobStatus/job-status-pin';
+import { columnFactory } from '@Src/components/smart-table/utils';
+import { JOB_STATUS } from '@Src/constants';
+
+const columns = [
+  columnFactory({
+    title: 'S',
+    key: 'name',
+    width: '3rem',
+    align: 'center',
+    render: ({ latestCurrentJobStatus, latestReferenceJobStatus }) => {
+      const jobStatus = latestReferenceJobStatus === JOB_STATUS.SUCCEEDED
+        ? latestCurrentJobStatus
+        : latestReferenceJobStatus;
+
+      console.debug(jobStatus);
+      return (
+        <JobStatusPin jobStatus={jobStatus} />
+      );
+    },
+  }),
+  columnFactory({
+    title: 'Name',
+    key: 'name',
+    width: 250,
+    render: ({ name }) => (<div className="font-[var(--coo-font-weight-bold)]">{name}</div>),
+  }),
+];
+
+export default columns;
diff --git a/ui/src/container/launchpad/right/work-in-progress/index.jsx b/ui/src/container/launchpad/right/work-in-progress/index.jsx
@@ -0,0 +1,65 @@
+import SomethingWentWrong from '@Components/ErrorPage/something-went-wrong';
+import { useGetModelQueryWithPolling } from '@State/models/polling-hook';
+import { Board, DataTable, Skeleton } from '@radicalbit/radicalbit-design-system';
+import { useLocation, useNavigate } from 'react-router-dom';
+import columns from './columns';
+
+function WorkInProgress() {
+  const navigate = useNavigate();
+  const { search } = useLocation();
+
+  const { data = [], isLoading, isError } = useGetModelQueryWithPolling();
+  const models = data.items || [];
+  const wipModels = models.filter(({ latestCurrentUuid, latestReferenceUuid }) => !latestCurrentUuid || !latestReferenceUuid);
+
+  if (isLoading) {
+    return (
+      <Board
+        header="Work in progress"
+        main={(
+          <div className="flex flex-col gap-2">
+            <Skeleton.Input active block />
+
+            <Skeleton.Input active block />
+
+            <Skeleton.Input active block />
+          </div>
+      )}
+      />
+    );
+  }
+
+  if (isError) {
+    return (
+      <Board
+        header="Work in progress"
+        main={<SomethingWentWrong size="small" />}
+        size="small"
+      />
+    );
+  }
+
+  return (
+    <Board
+      header="Work in progress"
+      height="300px"
+      main={(
+        <DataTable
+          clickable
+          columns={columns}
+          dataSource={wipModels}
+          onRow={({ uuid }) => ({
+            onClick: () => navigate({ pathname: `/models/${uuid}`, search }),
+          })}
+          pagination={false}
+          rowKey={({ uuid }) => uuid}
+          scroll={{ y: '16rem' }}
+          size="small"
+        />
+      )}
+      size="small"
+    />
+  );
+}
+
+export default WorkInProgress;
diff --git a/ui/src/container/launchpad/top-row/index.jsx b/ui/src/container/launchpad/top-row/index.jsx
@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 
 function TopRow() {
   return (
-    <div className="grid grid-cols-[1.2fr,1.2fr,1fr,1fr] gap-4 h-[175px]">
+    <div className="grid grid-cols-[1.2fr,1.2fr,1fr,1.2fr] gap-4 h-[175px]">
 
       <QuickStartBoard />
 
@@ -148,7 +148,7 @@ function TrialBoard() {
 
         </div>
       )}
-      modifier="h-full shadow light border-none"
+      modifier="h-full shadow light border-none ml-4"
       onClick={handleOnclick}
       size="small"
       type="primary"

diff --git a/ui/src/container/models/Details/binary-classification/current/data-drift/header/index.jsx b/ui/src/container/models/Details/binary-classification/current/data-drift/header/index.jsx
@@ -1,5 +1,5 @@
 import { FEATURE_TYPE } from '@Container/models/Details/constants';
-import { useGetCurrentDriftQueryWithPolling } from '@Src/store/state/models/polling-hook';
+import { useGetCurrentDriftQueryWithPolling } from '@State/models/polling-hook';
 import { Board, SectionTitle } from '@radicalbit/radicalbit-design-system';
 
 function DataDriftHeader() {

diff --git a/...container/models/Details/binary-classification/current/data-drift/search-filter/index.jsx b/...container/models/Details/binary-classification/current/data-drift/search-filter/index.jsx
@@ -1,4 +1,4 @@
-import { useGetCurrentDriftQueryWithPolling } from '@Src/store/state/models/polling-hook';
+import { useGetCurrentDriftQueryWithPolling } from '@State/models/polling-hook';
 import { fa1, faC, faSearch } from '@fortawesome/free-solid-svg-icons';
 import { useFormbitContext } from '@radicalbit/formbit';
 import {

diff --git a/...dels/Details/binary-classification/current/data-quality/data-point-distribution/index.jsx b/...dels/Details/binary-classification/current/data-quality/data-point-distribution/index.jsx
@@ -1,5 +1,5 @@
-import { modelsApiSlice } from '@Src/store/state/models/api';
-import { useGetCurrentDataQualityQueryWithPolling } from '@Src/store/state/models/polling-hook';
+import { modelsApiSlice } from '@State/models/api';
+import { useGetCurrentDataQualityQueryWithPolling } from '@State/models/polling-hook';
 import {
   Board,
   SectionTitle,

diff --git a/...ntainer/models/Details/binary-classification/current/data-quality/search-filter/index.jsx b/...ntainer/models/Details/binary-classification/current/data-quality/search-filter/index.jsx
@@ -1,4 +1,4 @@
-import { useGetCurrentDataQualityQueryWithPolling } from '@Src/store/state/models/polling-hook';
+import { useGetCurrentDataQualityQueryWithPolling } from '@State/models/polling-hook';
 import { fa1, faC, faSearch } from '@fortawesome/free-solid-svg-icons';
 import { useFormbitContext } from '@radicalbit/formbit';
 import {

diff --git a/...er/models/Details/binary-classification/current/data-quality/use-get-filtered-features.js b/...er/models/Details/binary-classification/current/data-quality/use-get-filtered-features.js
@@ -1,6 +1,6 @@
 import { FEATURE_TYPE } from '@Container/models/Details/constants';
-import { modelsApiSlice } from '@Src/store/state/models/api';
-import { useGetCurrentDataQualityQueryWithPolling } from '@Src/store/state/models/polling-hook';
+import { modelsApiSlice } from '@State/models/api';
+import { useGetCurrentDataQualityQueryWithPolling } from '@State/models/polling-hook';
 import { useFormbitContext } from '@radicalbit/formbit';
 import { useParams } from 'react-router';
 

diff --git a/ui/src/container/models/Details/binary-classification/current/imports/index.jsx b/ui/src/container/models/Details/binary-classification/current/imports/index.jsx
@@ -3,7 +3,7 @@ import SmartTable from '@Components/smart-table';
 import ImportCurrentDatasetButton from '@Components/ImportButton/import-current-button';
 import LogoSquared from '@Img/logo-collapsed.svg';
 import { NamespaceEnum } from '@Src/constants';
-import { useGetCurrentImportsQueryWithPolling } from '@Src/store/state/models/polling-hook';
+import { useGetCurrentImportsQueryWithPolling } from '@State/models/polling-hook';
 import { modelsApiSlice } from '@State/models/api';
 import { Spin, Void } from '@radicalbit/radicalbit-design-system';
 import { useParams } from 'react-router';

diff --git a/ui/src/container/models/Details/binary-classification/current/index.jsx b/ui/src/container/models/Details/binary-classification/current/index.jsx
@@ -1,7 +1,7 @@
 import JobStatus from '@Components/JobStatus';
 import { METRICS_TABS } from '@Container/models/Details/constants';
 import { JOB_STATUS } from '@Src/constants';
-import { useGetReferenceDataQualityQueryWithPolling } from '@Src/store/state/models/polling-hook';
+import { useGetReferenceDataQualityQueryWithPolling } from '@State/models/polling-hook';
 import { Tabs } from '@radicalbit/radicalbit-design-system';
 import { useSearchParams } from 'react-router-dom';
 import BinaryClassificationDataQualityMetrics from './data-quality';

diff --git a/ui/src/container/models/Details/binary-classification/current/model-quality/charts.jsx b/ui/src/container/models/Details/binary-classification/current/model-quality/charts.jsx
@@ -1,7 +1,7 @@
 import { CHART_COLOR } from '@Helpers/common-chart-options';
 import LineChart from '@Components/charts/line-chart';
 import { MODEL_QUALITY_FIELD } from '@Container/models/Details/constants';
-import { useGetCurrentModelQualityQueryWithPolling } from '@Src/store/state/models/polling-hook';
+import { useGetCurrentModelQualityQueryWithPolling } from '@State/models/polling-hook';
 import { modelsApiSlice } from '@State/models/api';
 import { useParams } from 'react-router';
 

diff --git a/...ontainer/models/Details/binary-classification/overview/variables-tab/useHandleOnSubmit.js b/...ontainer/models/Details/binary-classification/overview/variables-tab/useHandleOnSubmit.js
@@ -1,5 +1,5 @@
 import { useFormbitContext } from '@radicalbit/formbit';
-import { modelsApiSlice } from '@Src/store/state/models/api';
+import { modelsApiSlice } from '@State/models/api';
 import { useParams } from 'react-router';
 
 const { useEditModelMutation, useGetModelByUUIDQuery } = modelsApiSlice;

diff --git a/...ls/Details/binary-classification/reference/data-quality/data-point-distribution/index.jsx b/...ls/Details/binary-classification/reference/data-quality/data-point-distribution/index.jsx
@@ -1,4 +1,4 @@
-import { modelsApiSlice } from '@Src/store/state/models/api';
+import { modelsApiSlice } from '@State/models/api';
 import ReactEchartsCore from 'echarts-for-react/lib/core';
 import { BarChart } from 'echarts/charts';
 import {