Update cluster storage connected resources

Author: katieperry4

frontend/src/__tests__/cypress/cypress/pages/clusterStorage.ts

@@ -8,8 +8,8 @@ class ClusterStorageRow extends TableRow {
     return this;
   }
 
-  findConnectedWorkbenches() {
-    return this.find().find('[data-label="Workbench connections"]');
+  findConnectedResources() {
+    return this.find().find('[data-label="Connected resources"]');
   }
 
   toggleExpandableContent() {

frontend/src/__tests__/cypress/cypress/tests/e2e/dataScienceProjects/workbenches/workbenches.cy.ts

@@ -104,7 +104,7 @@ describe('Workbench and PVSs tests', () => {
       cy.step(`Check the cluster storage ${PVCDisplayName} is now connected to ${workbenchName}`);
       projectDetails.findSectionTab('cluster-storages').click();
       const csRow = clusterStorage.getClusterStorageRow(PVCDisplayName);
-      csRow.findConnectedWorkbenches().should('have.text', workbenchName);
+      csRow.findConnectedResources().should('have.text', workbenchName);
     },
   );
 });

frontend/src/__tests__/cypress/cypress/tests/mocked/projects/tabs/clusterStorage.cy.ts

@@ -451,7 +451,7 @@ describe('ClusterStorage', () => {
     const clusterStorageRow = clusterStorage.getClusterStorageRow('Test Storage');
     clusterStorageRow.findStorageClassColumn().should('not.exist');
     clusterStorageRow.shouldHaveStorageTypeValue('Generic persistent storage');
-    clusterStorageRow.findConnectedWorkbenches().should('have.text', 'No connections');
+    clusterStorageRow.findConnectedResources().should('have.text', '');
     clusterStorageRow.findSizeColumn().contains('5GiB');
 
     //sort by Name

frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/ConnectionSection.tsx

@@ -39,7 +39,7 @@ import {
 import { isModelPathValid } from '#~/pages/modelServing/screens/projects/utils';
 import DashboardPopupIconButton from '#~/concepts/dashboard/DashboardPopupIconButton';
 import { AccessTypes } from '#~/pages/projects/dataConnections/const';
-import { SupportedArea, useIsAreaAvailable } from '#~/concepts/areas/index.ts';
+import { SupportedArea, useIsAreaAvailable } from '#~/concepts/areas/index';
 import ConnectionS3FolderPathField from './ConnectionS3FolderPathField';
 import ConnectionOciPathField from './ConnectionOciPathField';
 import { ConnectionOciAlert } from './ConnectionOciAlert';

frontend/src/pages/projects/notebook/ConnectedNotebookNames.tsx

@@ -9,42 +9,69 @@ import { ProjectObjectType } from '#~/concepts/design/utils';
 import ResourceLabel from '#~/pages/projects/screens/detail/connections/ResourceLabel';
 import { getDisplayNameFromK8sResource } from '#~/concepts/k8s/utils';
 import { useInferenceServicesForConnection } from '#~/pages/projects/useInferenceServicesForConnection';
+import { PersistentVolumeClaimKind } from '#~/k8sTypes';
+import { isModelStorage } from '#~/pages/projects/screens/detail/storage/utils';
+import { useIsAreaAvailable, SupportedArea } from '#~/concepts/areas/index';
 
-type Props = {
-  connection: Connection;
-};
+export type ConnectedResourcesProps =
+  | { connection: Connection; pvc?: undefined }
+  | { connection?: undefined; pvc: PersistentVolumeClaimKind };
 
-const ConnectedResources: React.FC<Props> = ({ connection }) => {
+const ConnectedResources: React.FC<ConnectedResourcesProps> = ({ connection, pvc }) => {
   const { notebooks: connectedNotebooks, loaded: notebooksLoaded } = useRelatedNotebooks(
-    ConnectedNotebookContext.EXISTING_DATA_CONNECTION,
-    connection.metadata.name,
+    connection
+      ? ConnectedNotebookContext.EXISTING_DATA_CONNECTION
+      : ConnectedNotebookContext.EXISTING_PVC,
+    connection ? connection.metadata.name : pvc.metadata.name,
+  );
+  const modelName = React.useMemo(
+    () => pvc?.metadata.annotations?.['dashboard.opendatahub.io/model-name'],
+    [pvc],
   );
+  const modelStorage = React.useMemo(() => (pvc ? isModelStorage(pvc) : false), [pvc]);
+  const pvcServing = useIsAreaAvailable(SupportedArea.PVCSERVING).status;
   const connectedModels = useInferenceServicesForConnection(connection);
 
   if (!notebooksLoaded) {
     return <Spinner size="sm" />;
   }
 
-  if (!connectedNotebooks.length && !connectedModels.length) {
+  if (!connectedNotebooks.length && !connectedModels.length && !modelStorage) {
     return '-';
   }
 
+  const renderNotebookLabels = () =>
+    connectedNotebooks.map((notebook) => (
+      <ResourceLabel
+        key={notebook.metadata.name}
+        resourceType={ProjectObjectType.build}
+        title={getDisplayNameFromK8sResource(notebook)}
+      />
+    ));
+
+  const renderModelLabels = () =>
+    connectedModels.map((model) => (
+      <ResourceLabel
+        key={model.metadata.name}
+        resourceType={ProjectObjectType.deployedModelsList}
+        title={getDisplayNameFromK8sResource(model)}
+      />
+    ));
+
+  const renderPVCModelLabel = () =>
+    modelStorage && pvcServing ? (
+      <ResourceLabel
+        key={modelName ?? 'Unknown model'}
+        resourceType={ProjectObjectType.deployedModelsList}
+        title={modelName ?? 'Unknown model'}
+      />
+    ) : null;
+
   return (
     <LabelGroup>
-      {connectedNotebooks.map((notebook) => (
-        <ResourceLabel
-          key={notebook.metadata.name}
-          resourceType={ProjectObjectType.build}
-          title={getDisplayNameFromK8sResource(notebook)}
-        />
-      ))}
-      {connectedModels.map((model) => (
-        <ResourceLabel
-          key={model.metadata.name}
-          resourceType={ProjectObjectType.deployedModelsList}
-          title={getDisplayNameFromK8sResource(model)}
-        />
-      ))}
+      {renderNotebookLabels()}
+      {renderModelLabels()}
+      {renderPVCModelLabel()}
     </LabelGroup>
   );
 };

frontend/src/pages/projects/screens/detail/connections/ConnectedResources.tsx

@@ -12,8 +12,6 @@ import {
 import { ExclamationTriangleIcon, HddIcon } from '@patternfly/react-icons';
 import { PersistentVolumeClaimKind } from '#~/k8sTypes';
 import StorageSizeBar from '#~/pages/projects/components/StorageSizeBars';
-import ConnectedNotebookNames from '#~/pages/projects/notebook/ConnectedNotebookNames';
-import { ConnectedNotebookContext } from '#~/pages/projects/notebook/useRelatedNotebooks';
 import { TableRowTitleDescription } from '#~/components/table';
 import {
   getDescriptionFromK8sResource,
@@ -23,6 +21,7 @@ import { SupportedArea, useIsAreaAvailable } from '#~/concepts/areas';
 import { getStorageClassConfig } from '#~/pages/storageClasses/utils';
 import { getPvcAccessMode } from '#~/pages/projects/utils.ts';
 import AccessModeFullName from '#~/pages/projects/screens/detail/storage/AccessModeFullName';
+import ConnectedResources from '#~/pages/projects/screens/detail/connections/ConnectedResources';
 import useIsRootVolume from './useIsRootVolume';
 import StorageWarningStatus from './StorageWarningStatus';
 import { StorageTableData } from './types';
@@ -163,11 +162,8 @@ const StorageTableRow: React.FC<StorageTableRowProps> = ({
         <StorageSizeBar pvc={obj.pvc} />
       </Td>
       {workbenchEnabled && (
-        <Td dataLabel="Workbench connections">
-          <ConnectedNotebookNames
-            context={ConnectedNotebookContext.EXISTING_PVC}
-            relatedResourceName={obj.pvc.metadata.name}
-          />
+        <Td dataLabel="Connected resources">
+          <ConnectedResources pvc={obj.pvc} />
         </Td>
       )}
       <Td isActionCell>

frontend/src/pages/projects/screens/detail/storage/StorageTableRow.tsx

@@ -54,7 +54,7 @@ export const columns: SortableData<StorageTableData>[] = [
   },
   {
     field: 'connected',
-    label: 'Workbench connections',
+    label: 'Connected resources',
     width: 20,
     sortable: false,
   },

frontend/src/pages/projects/screens/detail/storage/data.ts

@@ -4,14 +4,17 @@ import { Connection } from '#~/concepts/connectionTypes/types';
 import { ProjectDetailsContext } from '#~/pages/projects/ProjectDetailsContext';
 
 export const useInferenceServicesForConnection = (
-  connection: Connection,
+  connection?: Connection,
 ): InferenceServiceKind[] => {
   const {
     inferenceServices: {
       data: { items: inferenceServices },
     },
   } = React.useContext(ProjectDetailsContext);
-  const connectionName = connection.metadata.name;
+  const connectionName = connection?.metadata.name;
+  if (!connection) {
+    return [];
+  }
 
   return inferenceServices.filter(
     (inferenceService) =>