From 0bef1b44c03f44c6540feb9203e81e076bb578e2 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 28 May 2024 12:04:19 -0700
Subject: [PATCH] feat: pipeline valves

---
 backend/main.py                               |  7 +++
 src/lib/apis/index.ts                         | 29 ++++++++++
 .../admin/Settings/Pipelines.svelte           | 55 +++++++++++++++++++
 src/lib/components/admin/SettingsModal.svelte | 38 +++++++++++++
 4 files changed, 129 insertions(+)
 create mode 100644 src/lib/components/admin/Settings/Pipelines.svelte

diff --git a/backend/main.py b/backend/main.py
index 0e5924574..648bedea0 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -464,6 +464,13 @@ async def get_models(user=Depends(get_verified_user)):
     return {"data": models}
 
 
+@app.get("/api/pipelines")
+async def get_pipelines(user=Depends(get_admin_user)):
+    models = await get_all_models()
+    pipelines = [model for model in models if "pipeline" in model]
+    return {"data": pipelines}
+
+
 @app.get("/api/config")
 async def get_app_config():
     # Checking and Handling the Absence of 'ui' in CONFIG_DATA
diff --git a/src/lib/apis/index.ts b/src/lib/apis/index.ts
index dc51abd52..3d6e51684 100644
--- a/src/lib/apis/index.ts
+++ b/src/lib/apis/index.ts
@@ -49,6 +49,35 @@ export const getModels = async (token: string = '') => {
 	return models;
 };
 
+export const getPipelines = async (token: string = '') => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_BASE_URL}/api/pipelines`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.log(err);
+			error = err;
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	let pipelines = res?.data ?? [];
+	return pipelines;
+};
+
 export const getBackendConfig = async () => {
 	let error = null;
 
diff --git a/src/lib/components/admin/Settings/Pipelines.svelte b/src/lib/components/admin/Settings/Pipelines.svelte
new file mode 100644
index 000000000..b1b34ecca
--- /dev/null
+++ b/src/lib/components/admin/Settings/Pipelines.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { v4 as uuidv4 } from 'uuid';
+
+	import { getContext, onMount } from 'svelte';
+	import { models } from '$lib/stores';
+
+	import type { Writable } from 'svelte/store';
+	import type { i18n as i18nType } from 'i18next';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Switch from '$lib/components/common/Switch.svelte';
+	import { stringify } from 'postcss';
+	import { getPipelines } from '$lib/apis';
+	const i18n: Writable<i18nType> = getContext('i18n');
+
+	export let saveHandler: Function;
+
+	let pipelines = [];
+	let selectedPipelineIdx = 0;
+
+	onMount(async () => {
+		pipelines = await getPipelines(localStorage.token);
+	});
+</script>
+
+<form
+	class="flex flex-col h-full justify-between space-y-3 text-sm"
+	on:submit|preventDefault={async () => {
+		saveHandler();
+	}}
+>
+	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80 h-full">
+		<div class=" space-y-3 pr-1.5">
+			<div class="flex w-full justify-between mb-2">
+				<div class=" self-center text-sm font-semibold">
+					{$i18n.t('Pipeline Valves')}
+				</div>
+			</div>
+			<div class="flex flex-col space-y-1">
+				{#each pipelines as pipeline}
+					<div class=" flex justify-between">
+						{JSON.stringify(pipeline)}
+					</div>
+				{/each}
+			</div>
+		</div>
+	</div>
+	<div class="flex justify-end pt-3 text-sm font-medium">
+		<button
+			class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"
+			type="submit"
+		>
+			Save
+		</button>
+	</div>
+</form>
diff --git a/src/lib/components/admin/SettingsModal.svelte b/src/lib/components/admin/SettingsModal.svelte
index 38a2602b6..6da1bda6f 100644
--- a/src/lib/components/admin/SettingsModal.svelte
+++ b/src/lib/components/admin/SettingsModal.svelte
@@ -8,6 +8,7 @@
 
 	import Banners from '$lib/components/admin/Settings/Banners.svelte';
 	import { toast } from 'svelte-sonner';
+	import Pipelines from './Settings/Pipelines.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -149,6 +150,36 @@
 					</div>
 					<div class=" self-center">{$i18n.t('Banners')}</div>
 				</button>
+
+				<button
+					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+					'pipelines'
+						? 'bg-gray-200 dark:bg-gray-700'
+						: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
+					on:click={() => {
+						selectedTab = 'pipelines';
+					}}
+				>
+					<div class=" self-center mr-2">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 24 24"
+							fill="currentColor"
+							class="size-4"
+						>
+							<path
+								d="M11.644 1.59a.75.75 0 0 1 .712 0l9.75 5.25a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.712 0l-9.75-5.25a.75.75 0 0 1 0-1.32l9.75-5.25Z"
+							/>
+							<path
+								d="m3.265 10.602 7.668 4.129a2.25 2.25 0 0 0 2.134 0l7.668-4.13 1.37.739a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.71 0l-9.75-5.25a.75.75 0 0 1 0-1.32l1.37-.738Z"
+							/>
+							<path
+								d="m10.933 19.231-7.668-4.13-1.37.739a.75.75 0 0 0 0 1.32l9.75 5.25c.221.12.489.12.71 0l9.75-5.25a.75.75 0 0 0 0-1.32l-1.37-.738-7.668 4.13a2.25 2.25 0 0 1-2.134-.001Z"
+							/>
+						</svg>
+					</div>
+					<div class=" self-center">{$i18n.t('Pipelines')}</div>
+				</button>
 			</div>
 			<div class="flex-1 md:min-h-[380px]">
 				{#if selectedTab === 'general'}
@@ -179,6 +210,13 @@
 							toast.success($i18n.t('Settings saved successfully!'));
 						}}
 					/>
+				{:else if selectedTab === 'pipelines'}
+					<Pipelines
+						saveHandler={() => {
+							show = false;
+							toast.success($i18n.t('Settings saved successfully!'));
+						}}
+					/>
 				{/if}
 			</div>
 		</div>