add model urls

dashboard/package-lock.json

@@ -100,7 +100,7 @@
         "@babel/preset-typescript": "^7.15.0",
         "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
-        "@porter-dev/api-contracts": "^0.2.166",
+        "@porter-dev/api-contracts": "^0.2.168",
         "@testing-library/jest-dom": "^4.2.4",
         "@testing-library/react": "^9.3.2",
         "@testing-library/user-event": "^7.1.2",
@@ -2786,9 +2786,9 @@
       }
     },
     "node_modules/@porter-dev/api-contracts": {
-      "version": "0.2.166",
-      "resolved": "https://registry.npmjs.org/@porter-dev/api-contracts/-/api-contracts-0.2.166.tgz",
-      "integrity": "sha512-189degLVU36wPP2Bd4eSLiVY0fYzZTiCOrPsiUXkXeOVZCMAUO6uRmEf8YQOgNkQ/kVGiUtkG9SfH4sXdvZZHw==",
+      "version": "0.2.168",
+      "resolved": "https://registry.npmjs.org/@porter-dev/api-contracts/-/api-contracts-0.2.168.tgz",
+      "integrity": "sha512-z1TRl5wEsNtR49Aj8ZeJstBxuY/bsL1F9+o4Y4r4n1Y+yIFwDw+6LzJCrb8v0WktL+L7XUEa61MtE0mxVTWGTw==",
       "dev": true,
       "dependencies": {
         "@bufbuild/protobuf": "^1.1.0"

dashboard/package.json

@@ -107,7 +107,7 @@
     "@babel/preset-typescript": "^7.15.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
-    "@porter-dev/api-contracts": "^0.2.166",
+    "@porter-dev/api-contracts": "^0.2.168",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

dashboard/src/lib/addons/deepgram.ts

@@ -1,5 +1,8 @@
 import { z } from "zod";
 
+const modelUrlValidator = z.object({
+  url: z.string().nonempty(),
+});
 export const deepgramConfigValidator = z.object({
   type: z.literal("deepgram"),
   deepgramAPIKey: z.string().nonempty().default("*********"),
@@ -7,6 +10,7 @@ export const deepgramConfigValidator = z.object({
   quaySecret: z.string().nonempty().default("secret"),
   quayEmail: z.string().nonempty().default(""),
   releaseTag: z.string().nonempty().default("release-240426"),
+  modelUrls: z.array(modelUrlValidator).default([]),
 });
 
 export type DeepgramConfigValidator = z.infer<typeof deepgramConfigValidator>;

dashboard/src/lib/addons/index.ts

@@ -298,6 +298,7 @@ export function clientAddonToProto(
         ecrPassword: data.quaySecret,
         ecrEmail: data.quayEmail,
         releaseTag: data.releaseTag,
+        modelUrls: data.modelUrls.map(({ url }) => url),
       }),
       case: "deepgram" as const,
     }))
@@ -444,6 +445,7 @@ export function clientAddonFromProto({
       quaySecret: data.value.ecrPassword ?? "",
       quayEmail: data.value.ecrEmail ?? "",
       releaseTag: data.value.releaseTag ?? "",
+      modelUrls: data.value.modelUrls.map((url) => ({ url })) ?? [],
     }))
     .with({ case: "quivr" }, (data) => ({
       type: "quivr" as const,

dashboard/src/lib/addons/template.ts

@@ -321,6 +321,7 @@ export const ADDON_TEMPLATE_DEEPGRAM: AddonTemplate<"deepgram"> = {
     quaySecret: "",
     quayEmail: "",
     releaseTag: "",
+    modelUrls: [{ url: "" }],
   },
   isModelTemplate: true,
 };

dashboard/src/main/home/add-on-dashboard/AddOnDashboard.tsx

@@ -29,8 +29,15 @@ import healthy from "assets/status-healthy.png";
 import DashboardHeader from "../cluster-dashboard/DashboardHeader";
 
 // filter out postgres and redis addons because those are managed in the datastores tab now
-const isDisplayableAddon = (addon: ClientAddon): boolean => {
-  return addon.config.type !== "postgres" && addon.config.type !== "redis";
+// filter out model template addons because those are managed in the infrastructure tab
+const isDisplayableAddon = (
+  addon: ClientAddon | LegacyClientAddon
+): boolean => {
+  return "chart" in addon
+    ? true
+    : addon.config.type !== "postgres" &&
+        addon.config.type !== "redis" &&
+        !addon.template.isModelTemplate;
 };
 
 const AddonDashboard: React.FC = () => {
@@ -52,20 +59,19 @@ const AddonDashboard: React.FC = () => {
   });
 
   const filteredAddons: Array<ClientAddon | LegacyClientAddon> = useMemo(() => {
-    const displayableAddons = addons.filter(isDisplayableAddon);
     const legacyDisplayableAddons = legacyAddons.sort((a, b) => {
       return a.info.last_deployed > b.info.last_deployed ? -1 : 1;
     });
 
     // If an addon name exists in both the legacy and new addon lists, show the new addon
-    const uniqueAddons: Array<ClientAddon | LegacyClientAddon> = [
-      ...displayableAddons,
+    const uniqueDisplayableAddons: Array<ClientAddon | LegacyClientAddon> = [
+      ...addons,
       ...legacyDisplayableAddons.filter(
-        (a) => !displayableAddons.some((b) => b.name.value === a.name)
+        (a) => !addons.some((b) => b.name.value === a.name)
       ),
-    ];
+    ].filter(isDisplayableAddon);
 
-    return uniqueAddons;
+    return uniqueDisplayableAddons;
   }, [addons, legacyAddons, defaultDeploymentTarget]);
 
   return (

dashboard/src/main/home/add-on-dashboard/deepgram/DeepgramForm.tsx

@@ -1,6 +1,8 @@
 import React from "react";
-import { useFormContext } from "react-hook-form";
+import { useFieldArray, useFormContext } from "react-hook-form";
+import styled from "styled-components";
 
+import Button from "components/porter/Button";
 import { ControlledInput } from "components/porter/ControlledInput";
 import Spacer from "components/porter/Spacer";
 import Text from "components/porter/Text";
@@ -11,7 +13,18 @@ const DeepgramForm: React.FC = () => {
   const {
     register,
     formState: { errors },
+    control,
   } = useFormContext<ClientAddon>();
+
+  const {
+    append,
+    fields: urls,
+    remove,
+  } = useFieldArray({
+    control,
+    name: "config.modelUrls",
+  });
+
   return (
     <div>
       <Text size={16}> Release tag </Text>
@@ -82,9 +95,75 @@ const DeepgramForm: React.FC = () => {
         error={errors.config?.quayEmail?.message}
       />
       <Spacer y={1} />
+      <Text>Model URLs</Text>
+      <Spacer y={0.5} />
+      <Text color="helper">The URLs of models you would like to download.</Text>
+      <Spacer y={0.5} />
+      {urls.map((url, i) => {
+        return (
+          <div key={url.id}>
+            <AnnotationContainer>
+              <ControlledInput
+                type="text"
+                placeholder="ex: www.example.com/model.zip"
+                width="275px"
+                {...register(`config.modelUrls.${i}.url`)}
+                error={errors.config?.modelUrls?.[i]?.url?.message}
+              />
+              <DeleteButton
+                onClick={() => {
+                  remove(i);
+                }}
+              >
+                <i className="material-icons">cancel</i>
+              </DeleteButton>
+            </AnnotationContainer>
+            <Spacer y={0.25} />
+          </div>
+        );
+      })}
+      <Button
+        alt
+        onClick={() => {
+          append({
+            url: "",
+          });
+        }}
+      >
+        + Add model URL
+      </Button>
+      <Spacer y={1} />
       <AddonSaveButton />
     </div>
   );
 };
 
 export default DeepgramForm;
+
+const AnnotationContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+const DeleteButton = styled.div`
+  width: 15px;
+  height: 15px;
+  display: flex;
+  align-items: center;
+  margin-left: 8px;
+  margin-top: -3px;
+  justify-content: center;
+
+  > i {
+    font-size: 17px;
+    color: #ffffff44;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    :hover {
+      color: #ffffff88;
+    }
+  }
+`;