Skip to content

Commit

Permalink
Merge pull request #2025 from DaoDaoNoCode/upstream-issue-1947
Browse files Browse the repository at this point in the history
Implement KServe table on project details page
  • Loading branch information
openshift-ci[bot] authored Oct 27, 2023
2 parents aa6ce80 + 83cce23 commit 411c83d
Show file tree
Hide file tree
Showing 7 changed files with 171 additions and 17 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from 'react';
import { Button } from '@patternfly/react-core';
import { Tr } from '@patternfly/react-table';
import ManageInferenceServiceModal from '~/pages/modelServing/screens/projects/InferenceServiceModal/ManageInferenceServiceModal';
import { Table } from '~/components/table';
import { InferenceServiceKind, ServingRuntimeKind } from '~/k8sTypes';
Expand Down Expand Up @@ -50,16 +51,19 @@ const InferenceServiceTable: React.FC<InferenceServiceTableProps> = ({
) : undefined
}
rowRenderer={(is) => (
<InferenceServiceTableRow
key={is.metadata.uid}
obj={is}
servingRuntime={servingRuntimes.find(
(sr) => sr.metadata.name === is.spec.predictor.model.runtime,
)}
isGlobal={isGlobal}
onDeleteInferenceService={setDeleteInferenceService}
onEditInferenceService={setEditInferenceService}
/>
<Tr>
<InferenceServiceTableRow
key={is.metadata.uid}
obj={is}
servingRuntime={servingRuntimes.find(
(sr) => sr.metadata.name === is.spec.predictor.model.runtime,
)}
isGlobal={isGlobal}
showServingRuntime={isGlobal}
onDeleteInferenceService={setDeleteInferenceService}
onEditInferenceService={setEditInferenceService}
/>
</Tr>
)}
/>
<DeleteInferenceServiceModal
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { DropdownDirection } from '@patternfly/react-core';
import { ActionsColumn, Td, Tr } from '@patternfly/react-table';
import { ActionsColumn, Td } from '@patternfly/react-table';
import { Link } from 'react-router-dom';
import ResourceNameTooltip from '~/components/ResourceNameTooltip';
import { isModelMesh } from '~/pages/modelServing/utils';
Expand All @@ -18,6 +18,7 @@ type InferenceServiceTableRowProps = {
servingRuntime?: ServingRuntimeKind;
onDeleteInferenceService: (obj: InferenceServiceKind) => void;
onEditInferenceService: (obj: InferenceServiceKind) => void;
showServingRuntime?: boolean;
};

const InferenceServiceTableRow: React.FC<InferenceServiceTableRowProps> = ({
Expand All @@ -26,11 +27,12 @@ const InferenceServiceTableRow: React.FC<InferenceServiceTableRowProps> = ({
onDeleteInferenceService,
onEditInferenceService,
isGlobal,
showServingRuntime,
}) => {
const [modelMetricsEnabled] = useModelMetricsEnabled();

return (
<Tr>
<>
<Td dataLabel="Name">
<ResourceNameTooltip resource={inferenceService}>
{modelMetricsEnabled ? (
Expand All @@ -53,7 +55,7 @@ const InferenceServiceTableRow: React.FC<InferenceServiceTableRowProps> = ({
<InferenceServiceProject inferenceService={inferenceService} />
</Td>
)}
{isGlobal && (
{showServingRuntime && (
<Td dataLabel="Serving Runtime">
<InferenceServiceServingRuntime servingRuntime={servingRuntime} />
</Td>
Expand Down Expand Up @@ -88,7 +90,7 @@ const InferenceServiceTableRow: React.FC<InferenceServiceTableRowProps> = ({
]}
/>
</Td>
</Tr>
</>
);
};

Expand Down
13 changes: 13 additions & 0 deletions frontend/src/pages/modelServing/screens/global/data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@ import { SortableData } from '~/components/table';
import { getProjectDisplayName } from '~/pages/projects/utils';
import { getInferenceServiceDisplayName, getTokenDisplayName } from './utils';

const COL_EXPAND: SortableData<InferenceServiceKind> = {
field: 'expand',
label: '',
sortable: false,
};
const COL_NAME: SortableData<InferenceServiceKind> = {
field: 'name',
label: 'Model name',
Expand Down Expand Up @@ -73,6 +78,14 @@ export const getProjectInferenceServiceColumns = (): SortableData<InferenceServi
COL_STATUS,
COL_KEBAB,
];
export const getKServeInferenceServiceColumns = (): SortableData<InferenceServiceKind>[] => [
COL_EXPAND,
COL_NAME,
COL_SERVING_RUNTIME,
COL_ENDPOINT,
COL_STATUS,
COL_KEBAB,
];

export const tokenColumns: SortableData<SecretKind>[] = [
{
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import * as React from 'react';
import { Table } from '~/components/table';
import { getKServeInferenceServiceColumns } from '~/pages/modelServing/screens/global/data';
import KServeInferenceServiceTableRow from '~/pages/modelServing/screens/projects/KServeSection/KServeInferenceServiceTableRow';
import { ProjectDetailsContext } from '~/pages/projects/ProjectDetailsContext';

const KServeInferenceServiceTable: React.FC = () => {
const {
inferenceServices: { data: models },
} = React.useContext(ProjectDetailsContext);

return (
<Table
data={models}
columns={getKServeInferenceServiceColumns()}
disableRowRenderSupport
defaultSortColumn={1}
rowRenderer={(modelServer, rowIndex) => (
<KServeInferenceServiceTableRow
key={modelServer.metadata.uid}
obj={modelServer}
rowIndex={rowIndex}
/>
)}
/>
);
};

export default KServeInferenceServiceTable;
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
import * as React from 'react';
import { ExpandableRowContent, Tbody, Td, Tr } from '@patternfly/react-table';
import {
DescriptionList,
DescriptionListDescription,
DescriptionListGroup,
DescriptionListTerm,
Stack,
StackItem,
} from '@patternfly/react-core';
import { InferenceServiceKind } from '~/k8sTypes';
import InferenceServiceTableRow from '~/pages/modelServing/screens/global/InferenceServiceTableRow';
import { ProjectDetailsContext } from '~/pages/projects/ProjectDetailsContext';
import ServingRuntimeDetails from '~/pages/modelServing/screens/projects/ModelMeshSection/ServingRuntimeDetails';
import ServingRuntimeTokensTable from '~/pages/modelServing/screens/projects/ModelMeshSection/ServingRuntimeTokensTable';
import { isServingRuntimeTokenEnabled } from '~/pages/modelServing/screens/projects/utils';

type KServeInferenceServiceTableRowProps = {
obj: InferenceServiceKind;
rowIndex: number;
};

const KServeInferenceServiceTableRow: React.FC<KServeInferenceServiceTableRowProps> = ({
obj,
rowIndex,
}) => {
const [isExpanded, setExpanded] = React.useState(false);
const {
servingRuntimes: { data: servingRuntimes },
} = React.useContext(ProjectDetailsContext);

const frameworkName = obj.spec.predictor.model.modelFormat.name;
const frameworkVersion = obj.spec.predictor.model.modelFormat.version;

const servingRuntime = servingRuntimes.find(
(sr) => sr.metadata.name === obj.spec.predictor.model.runtime,
);

return (
<Tbody isExpanded={isExpanded}>
<Tr>
<Td
expand={{
rowIndex: rowIndex,
expandId: 'kserve-model-row-item',
isExpanded,
onToggle: () => setExpanded(!isExpanded),
}}
/>
<InferenceServiceTableRow
obj={obj}
isGlobal={false}
showServingRuntime
servingRuntime={servingRuntimes.find(
(sr) => sr.metadata.name === obj.spec.predictor.model.runtime,
)}
onDeleteInferenceService={() => undefined}
onEditInferenceService={() => undefined}
/>
</Tr>
<Tr isExpanded={isExpanded}>
<Td />
<Td dataLabel="Information" colSpan={5}>
<ExpandableRowContent>
<Stack hasGutter>
<StackItem>
<DescriptionList isHorizontal horizontalTermWidthModifier={{ default: '250px' }}>
<DescriptionListGroup>
<DescriptionListTerm>Framework</DescriptionListTerm>
<DescriptionListDescription>
{frameworkVersion ? `${frameworkName}-${frameworkVersion}` : frameworkName}
</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>
</StackItem>
{servingRuntime && (
<StackItem>
<ServingRuntimeDetails obj={servingRuntime} />
</StackItem>
)}
{servingRuntime && (
<StackItem>
<DescriptionList>
<DescriptionListGroup>
<DescriptionListTerm>Tokens</DescriptionListTerm>
<DescriptionListDescription>
<ServingRuntimeTokensTable
obj={servingRuntime}
isTokenEnabled={isServingRuntimeTokenEnabled(servingRuntime)}
/>
</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>
</StackItem>
)}
</Stack>
</ExpandableRowContent>
</Td>
</Tr>
</Tbody>
);
};

export default KServeInferenceServiceTableRow;
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ type ServingRuntimeDetailsProps = {

const ServingRuntimeDetails: React.FC<ServingRuntimeDetailsProps> = ({ obj }) => {
const { dashboardConfig } = React.useContext(AppContext);
const [accelerator] = useServingAccelerator(obj);
const container = obj.spec.containers[0]; // can we assume the first container?
const sizes = getServingRuntimeSizes(dashboardConfig);
const size = sizes.find((size) => _.isEqual(size.resources, container.resources));
const [accelerator] = useServingAccelerator(obj);

return (
<DescriptionList isHorizontal horizontalTermWidthModifier={{ default: '250px' }}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import ModelServingPlatformSelect from '~/pages/modelServing/screens/projects/Mo
import { getProjectModelServingPlatform } from '~/pages/modelServing/screens/projects/utils';
import { useAppContext } from '~/app/AppContext';
import { ProjectsContext } from '~/concepts/projects/ProjectsContext';
import KServeInferenceServiceTable from '~/pages/modelServing/screens/projects/KServeSection/KServeInferenceServiceTable';
import ManageServingRuntimeModal from './ServingRuntimeModal/ManageServingRuntimeModal';
import ModelMeshServingRuntimeTable from './ModelMeshSection/ServingRuntimeTable';
import ModelServingPlatformButtonAction from './ModelServingPlatformButtonAction';
Expand Down Expand Up @@ -119,9 +120,10 @@ const ModelServingPlatform: React.FC = () => {
emptyTemplates={emptyTemplates}
// else, show the kserve deploy model modal
/>
) : (
// show kserve table if `isModelMesh` is false
) : isProjectModelMesh ? (
<ModelMeshServingRuntimeTable />
) : (
<KServeInferenceServiceTable />
)}
</DetailsSection>
<ManageServingRuntimeModal
Expand Down

0 comments on commit 411c83d

Please sign in to comment.