Add bias metrics configuration modal

frontend/src/api/prometheus/serving.ts

@@ -1,5 +1,9 @@
 import * as React from 'react';
-import { ContextResourceData, PrometheusQueryRangeResultValue } from '~/types';
+import {
+  ContextResourceData,
+  PrometheusQueryRangeResponseDataResult,
+  PrometheusQueryRangeResultValue,
+} from '~/types';
 import {
   InferenceMetricType,
   RuntimeMetricType,
@@ -16,7 +20,10 @@ export const useModelServingMetrics = (
   lastUpdateTime: number,
   setLastUpdateTime: (time: number) => void,
 ): {
-  data: Record<RuntimeMetricType, ContextResourceData<PrometheusQueryRangeResultValue>>;
+  data: Record<
+    RuntimeMetricType | InferenceMetricType,
+    ContextResourceData<PrometheusQueryRangeResultValue | PrometheusQueryRangeResponseDataResult>
+  >;
   refresh: () => void;
 } => {
   const [end, setEnd] = React.useState(lastUpdateTime);
@@ -88,6 +95,8 @@ export const useModelServingMetrics = (
     runtimeMemoryUtilization,
     inferenceRequestSuccessCount,
     inferenceRequestFailedCount,
+    inferenceTrustyAIDIR,
+    inferenceTrustyAISPD,
   ]);
 
   const refreshAllMetrics = React.useCallback(() => {

frontend/src/concepts/dashboard/DashboardModalFooter.tsx

@@ -0,0 +1,48 @@
+import {
+  ActionList,
+  ActionListItem,
+  Alert,
+  Button,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import * as React from 'react';
+
+type DashboardModalFooterProps = {
+  submitLabel: string;
+  onSubmit: () => void;
+  onCancel: () => void;
+  isSubmitDisabled: boolean;
+  alertTitle: string;
+  error?: Error;
+};
+
+const DashboardModalFooter: React.FC<DashboardModalFooterProps> = (
+  { submitLabel, onSubmit, onCancel, isSubmitDisabled, error, alertTitle }, // make sure alert uses the full width
+) => (
+  <Stack hasGutter style={{ flex: 'auto' }}>
+    {error && (
+      <StackItem>
+        <Alert isInline variant="danger" title={alertTitle}>
+          {error.message}
+        </Alert>
+      </StackItem>
+    )}
+    <StackItem>
+      <ActionList>
+        <ActionListItem>
+          <Button key="submit" variant="primary" isDisabled={isSubmitDisabled} onClick={onSubmit}>
+            {submitLabel}
+          </Button>
+        </ActionListItem>
+        <ActionListItem>
+          <Button key="cancel" variant="link" onClick={onCancel}>
+            Cancel
+          </Button>
+        </ActionListItem>
+      </ActionList>
+    </StackItem>
+  </Stack>
+);
+
+export default DashboardModalFooter;

frontend/src/pages/modelServing/ModelServingRoutes.tsx

@@ -19,6 +19,7 @@ const ModelServingRoutes: React.FC = () => {
         <Route index element={<ModelServingGlobal />} />
         {modelMetricsEnabled && (
           <Route path="/metrics/:project" element={<ExplainabilityProvider />}>
+            <Route index element={<Navigate to=".." />} />
             <Route path=":inferenceService" element={<GlobalInferenceMetricsWrapper />}>
               <Route path=":tab?" element={<GlobalInferenceMetricsPage />} />
               <Route path="configure" element={<BiasConfigurationBreadcrumbPage />} />
@@ -27,6 +28,7 @@ const ModelServingRoutes: React.FC = () => {
             <Route path="*" element={<Navigate to="." />} />
           </Route>
         )}
+        <Route path="*" element={<Navigate to="." />} />
       </Route>
     </ProjectsRoutes>
   );

frontend/src/pages/modelServing/screens/metrics/BiasConfigurationAlertPopover.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Button, Icon, Popover } from '@patternfly/react-core';
+import { InfoCircleIcon } from '@patternfly/react-icons';
+import { EMPTY_BIAS_CONFIGURATION_DESC, EMPTY_BIAS_CONFIGURATION_TITLE } from './const';
+
+type BiasConfigurationAlertPopoverProps = {
+  onConfigure: () => void;
+};
+
+const BiasConfigurationAlertPopover: React.FC<BiasConfigurationAlertPopoverProps> = ({
+  onConfigure,
+}) => (
+  <Popover
+    aria-label={EMPTY_BIAS_CONFIGURATION_TITLE}
+    alertSeverityVariant="info"
+    headerContent={EMPTY_BIAS_CONFIGURATION_TITLE}
+    headerIcon={<InfoCircleIcon />}
+    bodyContent={EMPTY_BIAS_CONFIGURATION_DESC}
+    footerContent={
+      <Button variant="secondary" isSmall onClick={onConfigure}>
+        Configure
+      </Button>
+    }
+  >
+    <Icon status="info">
+      <InfoCircleIcon />
+    </Icon>
+  </Popover>
+);
+
+export default BiasConfigurationAlertPopover;

frontend/src/pages/modelServing/screens/metrics/BiasConfigurationBreadcrumbPage.tsx

@@ -18,7 +18,7 @@ const BiasConfigurationBreadcrumbPage: React.FC = () => {
         },
         { label: 'Metric configuration', isActive: true },
       ]}
-      modelDisplayName={modelDisplayName}
+      inferenceService={inferenceService}
     />
   );
 };

frontend/src/pages/modelServing/screens/metrics/BiasConfigurationButton.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Button } from '@patternfly/react-core';
+import { useExplainabilityModelData } from '~/concepts/explainability/useExplainabilityModelData';
+import { InferenceServiceKind } from '~/k8sTypes';
+import ManageBiasConfigurationModal from './biasConfigurationModal/ManageBiasConfigurationModal';
+
+type BiasConfigurationButtonProps = {
+  inferenceService: InferenceServiceKind;
+};
+
+const BiasConfigurationButton: React.FC<BiasConfigurationButtonProps> = ({ inferenceService }) => {
+  const [isOpen, setOpen] = React.useState(false);
+  const { biasMetricConfigs, loaded, refresh } = useExplainabilityModelData();
+
+  React.useEffect(() => {
+    if (loaded && biasMetricConfigs.length === 0) {
+      setOpen(true);
+    }
+  }, [loaded, biasMetricConfigs]);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)} variant="secondary">
+        Configure metric
+      </Button>
+      <ManageBiasConfigurationModal
+        isOpen={isOpen}
+        onClose={(submit) => {
+          if (submit) {
+            refresh();
+          }
+          setOpen(false);
+        }}
+        inferenceService={inferenceService}
+      />
+    </>
+  );
+};
+
+export default BiasConfigurationButton;

frontend/src/pages/modelServing/screens/metrics/BiasConfigurationPage.tsx

@@ -4,21 +4,22 @@ import { useNavigate } from 'react-router-dom';
 import ApplicationsPage from '~/pages/ApplicationsPage';
 import { BreadcrumbItemType } from '~/types';
 import { useExplainabilityModelData } from '~/concepts/explainability/useExplainabilityModelData';
+import { InferenceServiceKind } from '~/k8sTypes';
+import { getInferenceServiceDisplayName } from '~/pages/modelServing/screens/global/utils';
 import { MetricsTabKeys } from './types';
 import BiasConfigurationTable from './BiasConfigurationTable';
 import { getBreadcrumbItemComponents } from './utils';
 
 type BiasConfigurationPageProps = {
   breadcrumbItems: BreadcrumbItemType[];
-  modelDisplayName: string;
+  inferenceService: InferenceServiceKind;
 };
 
 const BiasConfigurationPage: React.FC<BiasConfigurationPageProps> = ({
   breadcrumbItems,
-  modelDisplayName,
+  inferenceService,
 }) => {
   const { biasMetricConfigs, loaded } = useExplainabilityModelData();
-  const emptyConfiguration = biasMetricConfigs.length === 0;
   const navigate = useNavigate();
   return (
     <ApplicationsPage
@@ -27,15 +28,17 @@ const BiasConfigurationPage: React.FC<BiasConfigurationPageProps> = ({
       breadcrumb={<Breadcrumb>{getBreadcrumbItemComponents(breadcrumbItems)}</Breadcrumb>}
       headerAction={
         <Button onClick={() => navigate(`../${MetricsTabKeys.BIAS}`, { relative: 'path' })}>
-          {emptyConfiguration ? `Back to ${modelDisplayName}` : 'View metrics'}
+          {biasMetricConfigs.length === 0
+            ? `Back to ${getInferenceServiceDisplayName(inferenceService)}`
+            : 'View metrics'}
         </Button>
       }
       loaded={loaded}
       provideChildrenPadding
       // The page is not empty, we will handle the empty state in the table
       empty={false}
     >
-      <BiasConfigurationTable configurations={biasMetricConfigs} />
+      <BiasConfigurationTable inferenceService={inferenceService} />
     </ApplicationsPage>
   );
 };

frontend/src/pages/modelServing/screens/metrics/BiasConfigurationTable.tsx

@@ -3,26 +3,36 @@ import { Button, ToolbarItem } from '@patternfly/react-core';
 import Table from '~/components/table/Table';
 import DashboardSearchField, { SearchType } from '~/concepts/dashboard/DashboardSearchField';
 import { BiasMetricConfig } from '~/concepts/explainability/types';
+import { useExplainabilityModelData } from '~/concepts/explainability/useExplainabilityModelData';
+import { InferenceServiceKind } from '~/k8sTypes';
+import DeleteBiasConfigurationModal from '~/pages/modelServing/screens/metrics/biasConfigurationModal/DeleteBiasConfigurationModal';
+import ManageBiasConfigurationModal from './biasConfigurationModal/ManageBiasConfigurationModal';
 import BiasConfigurationTableRow from './BiasConfigurationTableRow';
 import { columns } from './tableData';
 import BiasConfigurationEmptyState from './BiasConfigurationEmptyState';
+import BiasConfigurationButton from './BiasConfigurationButton';
 
 type BiasConfigurationTableProps = {
-  configurations: BiasMetricConfig[];
+  inferenceService: InferenceServiceKind;
 };
 
-const BiasConfigurationTable: React.FC<BiasConfigurationTableProps> = ({ configurations }) => {
+const BiasConfigurationTable: React.FC<BiasConfigurationTableProps> = ({ inferenceService }) => {
+  const { biasMetricConfigs, refresh } = useExplainabilityModelData();
   const [searchType, setSearchType] = React.useState<SearchType>(SearchType.NAME);
   const [search, setSearch] = React.useState('');
-  const filteredConfigurations = configurations.filter((configuration) => {
+  const [cloneConfiguration, setCloneConfiguration] = React.useState<BiasMetricConfig>();
+  const [deleteConfiguration, setDeleteConfiguration] = React.useState<BiasMetricConfig>();
+
+  const filteredConfigurations = biasMetricConfigs.filter((configuration) => {
     if (!search) {
       return true;
     }
 
-    // TODO: add more search types
     switch (searchType) {
       case SearchType.NAME:
         return configuration.name.toLowerCase().includes(search.toLowerCase());
+      case SearchType.METRIC:
+        return configuration.metricType.toLowerCase().includes(search.toLocaleLowerCase());
       case SearchType.PROTECTED_ATTRIBUTE:
         return configuration.protectedAttribute.toLowerCase().includes(search.toLowerCase());
       case SearchType.OUTPUT:
@@ -43,53 +53,82 @@ const BiasConfigurationTable: React.FC<BiasConfigurationTableProps> = ({ configu
       Object.keys(SearchType).filter(
         (key) =>
           SearchType[key] === SearchType.NAME ||
+          SearchType[key] === SearchType.METRIC ||
           SearchType[key] === SearchType.PROTECTED_ATTRIBUTE ||
           SearchType[key] === SearchType.OUTPUT,
       ),
     [],
   );
   return (
-    <Table
-      data={filteredConfigurations}
-      columns={columns}
-      disableRowRenderSupport
-      rowRenderer={(configuration, i) => (
-        <BiasConfigurationTableRow key={configuration.id} obj={configuration} rowIndex={i} />
-      )}
-      emptyTableView={
-        search ? (
+    <>
+      <Table
+        data={filteredConfigurations}
+        columns={columns}
+        defaultSortColumn={1}
+        disableRowRenderSupport
+        rowRenderer={(configuration, i) => (
+          <BiasConfigurationTableRow
+            key={configuration.id}
+            obj={configuration}
+            rowIndex={i}
+            onCloneConfiguration={setCloneConfiguration}
+            onDeleteConfiguration={setDeleteConfiguration}
+          />
+        )}
+        emptyTableView={
+          search ? (
+            <>
+              No metric configurations match your filters.{' '}
+              <Button variant="link" isInline onClick={resetFilters}>
+                Clear filters
+              </Button>
+            </>
+          ) : (
+            <BiasConfigurationEmptyState />
+          )
+        }
+        toolbarContent={
           <>
-            No metric configurations match your filters.{' '}
-            <Button variant="link" isInline onClick={resetFilters}>
-              Clear filters
-            </Button>
+            <ToolbarItem>
+              <DashboardSearchField
+                types={searchTypes}
+                searchType={searchType}
+                searchValue={search}
+                onSearchTypeChange={(searchType) => {
+                  setSearchType(searchType);
+                }}
+                onSearchValueChange={(searchValue) => {
+                  setSearch(searchValue);
+                }}
+              />
+            </ToolbarItem>
+            <ToolbarItem>
+              <BiasConfigurationButton inferenceService={inferenceService} />
+            </ToolbarItem>
           </>
-        ) : (
-          <BiasConfigurationEmptyState />
-        )
-      }
-      toolbarContent={
-        <>
-          <ToolbarItem>
-            <DashboardSearchField
-              types={searchTypes}
-              searchType={searchType}
-              searchValue={search}
-              onSearchTypeChange={(searchType) => {
-                setSearchType(searchType);
-              }}
-              onSearchValueChange={(searchValue) => {
-                setSearch(searchValue);
-              }}
-            />
-          </ToolbarItem>
-          <ToolbarItem>
-            {/* TODO: add configure metric action */}
-            <Button variant="secondary">Configure metric</Button>
-          </ToolbarItem>
-        </>
-      }
-    />
+        }
+      />
+      <ManageBiasConfigurationModal
+        existingConfiguration={cloneConfiguration}
+        isOpen={!!cloneConfiguration}
+        onClose={(submit) => {
+          if (submit) {
+            refresh();
+          }
+          setCloneConfiguration(undefined);
+        }}
+        inferenceService={inferenceService}
+      />
+      <DeleteBiasConfigurationModal
+        configurationToDelete={deleteConfiguration}
+        onClose={(deleted) => {
+          if (deleted) {
+            refresh();
+          }
+          setDeleteConfiguration(undefined);
+        }}
+      />
+    </>
   );
 };