fix: [INS-805] fix not correctly query pipelines that use this resour…

…ce (#420) Because - we didn't correctly query the pipelines that use this resource This commit - fix not correctly query pipelines that use this resource
instill-ai · May 30, 2023 · bdcd7aa · bdcd7aa
1 parent b6a3745
commit bdcd7aa
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 98 deletions.
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "@amplitude/analytics-browser": "^1.9.1",
     "@code-hike/mdx": "^0.7.3",
     "@instill-ai/design-system": "^0.10.6",
-    "@instill-ai/toolkit": "^0.44.1",
+    "@instill-ai/toolkit": "^0.44.3",
     "@radix-ui/react-select": "^1.2.1",
     "@tanstack/react-query": "^4.26.1",
     "@tanstack/react-query-devtools": "^4.26.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/pages/destinations/[id].tsx b/src/pages/destinations/[id].tsx
@@ -87,12 +87,12 @@ const DestinationDetailsPage: FC & {
     enabled: destinationWithPipelines.isSuccess,
   });
 
-  const isLoadingResource =
-    destinationWithPipelines.isLoading ||
-    (destinationWithPipelines.isSuccess &&
-      destinationWithPipelines.data.pipelines.length > 0)
-      ? pipelinesWatchState.isLoading
-      : false;
+  const isLoadingResources = destinationWithPipelines.isLoading
+    ? true
+    : destinationWithPipelines.isSuccess &&
+      destinationWithPipelines.data.pipelines.length > 0
+    ? pipelinesWatchState.isLoading
+    : false;
 
   /* -------------------------------------------------------------------------
    * Render
@@ -142,7 +142,7 @@ const DestinationDetailsPage: FC & {
           isError={
             destinationWithPipelines.isError || pipelinesWatchState.isError
           }
-          isLoading={isLoadingResource}
+          isLoading={isLoadingResources}
           marginBottom="mb-10"
         />
         <h3 className="mb-5 text-black text-instill-h3">Setting</h3>

diff --git a/src/pages/models/[id].tsx b/src/pages/models/[id].tsx
@@ -4,9 +4,7 @@ import { shallow } from "zustand/shallow";
 
 import {
   useDeployModel,
-  useModel,
   useUnDeployModel,
-  usePipelines,
   ChangeModelStateToggle,
   useWarnUnsavedChanges,
   useConfigureModelFormStore,
@@ -20,9 +18,8 @@ import {
   useCreateUpdateDeleteResourceGuard,
   useWatchModel,
   useWatchPipelines,
-  type Pipeline,
+  useModelWithPipelines,
   type ConfigureModelFormStore,
-  getComponentFromPipelineRecipe,
 } from "@instill-ai/toolkit";
 
 import {
@@ -60,10 +57,10 @@ const ModelDetailsPage: FC & {
   });
 
   /* -------------------------------------------------------------------------
-   * Initialize model and modelInstances state
+   * Query resource data
    * -----------------------------------------------------------------------*/
 
-  const model = useModel({
+  const modelWithPipelines = useModelWithPipelines({
     enabled: true,
     modelName: id ? `models/${id}` : null,
     accessToken: null,
@@ -75,36 +72,23 @@ const ModelDetailsPage: FC & {
     accessToken: null,
   });
 
-  /* -------------------------------------------------------------------------
-   * Initialize pipelines that use this model
-   * -----------------------------------------------------------------------*/
-
-  const pipelines = usePipelines({ enabled: true, accessToken: null });
-
-  const pipelinesUseThisModel = useMemo(() => {
-    if (!pipelines.isSuccess || !pipelines.data) {
-      return [];
-    }
-
-    return pipelines.data.filter((pipeline: Pipeline) => {
-      const models =
-        getComponentFromPipelineRecipe({
-          recipe: pipeline.recipe,
-          componentName: "model",
-        }) ?? [];
-      return models.some((e) => e.id === id);
-    });
-  }, [pipelines.isSuccess, pipelines.data, id]);
-
   const pipelinesWatchState = useWatchPipelines({
-    enabled: pipelinesUseThisModel.length > 0,
+    enabled:
+      modelWithPipelines.isSuccess &&
+      modelWithPipelines.data.pipelines.length > 0,
     accessToken: null,
-    pipelineNames:
-      pipelinesUseThisModel.length > 0
-        ? pipelinesUseThisModel.map((e) => e.name)
-        : null,
+    pipelineNames: modelWithPipelines.isSuccess
+      ? modelWithPipelines.data?.pipelines.map((e) => e.name)
+      : [],
   });
 
+  const isLoadingPipelines = modelWithPipelines.isLoading
+    ? true
+    : modelWithPipelines.isSuccess &&
+      modelWithPipelines.data?.pipelines.length > 0
+    ? pipelinesWatchState.isLoading
+    : false;
+
   /* -------------------------------------------------------------------------
    * Get model card
    * -----------------------------------------------------------------------*/
@@ -138,9 +122,17 @@ const ModelDetailsPage: FC & {
         />
         <div className="mb-10 flex flex-row gap-x-2.5">
           <ModelDefinitionLabel
-            modelDefinition={model.data ? model.data.model_definition : null}
+            modelDefinition={
+              modelWithPipelines.isSuccess
+                ? modelWithPipelines.data.model_definition
+                : null
+            }
+          />
+          <ModelTaskLabel
+            task={
+              modelWithPipelines.isSuccess ? modelWithPipelines.data.task : null
+            }
           />
-          <ModelTaskLabel task={model.isSuccess ? model.data.task : null} />
           <StateLabel
             enableBgColor={true}
             enableIcon={true}
@@ -155,7 +147,7 @@ const ModelDetailsPage: FC & {
           />
         </div>
         <ChangeModelStateToggle
-          model={model.data ? model.data : null}
+          model={modelWithPipelines.isSuccess ? modelWithPipelines.data : null}
           modelWatchState={
             modelWatchState.isSuccess ? modelWatchState.data.state : null
           }
@@ -165,9 +157,9 @@ const ModelDetailsPage: FC & {
           accessToken={null}
           disabled={enableGuard}
         />
-        {model.isSuccess && model.data ? (
+        {modelWithPipelines.isSuccess ? (
           <ConfigureModelForm
-            model={model.data}
+            model={modelWithPipelines.data}
             marginBottom="mb-[60px]"
             onConfigure={null}
             disabledConfigure={enableGuard}
@@ -179,16 +171,16 @@ const ModelDetailsPage: FC & {
 
         <h3 className="mb-5 text-black text-instill-h3">In use by pipelines</h3>
         <PipelinesTable
-          pipelines={pipelinesUseThisModel}
+          pipelines={
+            modelWithPipelines.isSuccess
+              ? modelWithPipelines.data.pipelines
+              : []
+          }
           pipelinesWatchState={
             pipelinesWatchState.isSuccess ? pipelinesWatchState.data : {}
           }
-          isLoading={
-            pipelines.isLoading || pipelinesUseThisModel.length > 0
-              ? pipelinesWatchState.isLoading
-              : false
-          }
-          isError={pipelines.isError || pipelinesWatchState.isError}
+          isLoading={isLoadingPipelines}
+          isError={modelWithPipelines.isError || pipelinesWatchState.isError}
           marginBottom="mb-10"
         />
         <h3 className="mb-5 text-black text-instill-h3">Setting</h3>
@@ -198,7 +190,7 @@ const ModelDetailsPage: FC & {
           marginBottom="mb-5"
         />
         <ModelConfigurationFields
-          model={model.isSuccess ? model.data : null}
+          model={modelWithPipelines.isSuccess ? modelWithPipelines.data : null}
           marginBottom="mb-10"
         />
       </PageContentContainer>

diff --git a/src/pages/sources/[id].tsx b/src/pages/sources/[id].tsx
@@ -54,6 +54,13 @@ const SourceDetailsPage: FC & {
     accessToken: null,
   });
 
+  const isLoadingResources = sourceWithPipelines.isLoading
+    ? true
+    : sourceWithPipelines.isSuccess &&
+      sourceWithPipelines.data.pipelines.length > 0
+    ? pipelinesWatchState.isLoading
+    : false;
+
   /* -------------------------------------------------------------------------
    * Render
    * -----------------------------------------------------------------------*/
@@ -98,13 +105,7 @@ const SourceDetailsPage: FC & {
             pipelinesWatchState.isSuccess ? pipelinesWatchState.data : {}
           }
           isError={sourceWithPipelines.isError || pipelinesWatchState.isError}
-          isLoading={
-            sourceWithPipelines.isLoading ||
-            (sourceWithPipelines.isSuccess &&
-              sourceWithPipelines.data.pipelines.length > 0)
-              ? pipelinesWatchState.isLoading
-              : false
-          }
+          isLoading={isLoadingResources}
           marginBottom="mb-10"
         />
         <h3 className="mb-5 text-black text-instill-h3">Setting</h3>