From f7c3a88d06aa2ca9a6c02db58e12d771c709788a Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Thu, 30 Mar 2023 12:59:11 +0200 Subject: [PATCH] fix(frontend): improve loading of big args in job details --- frontend/src/lib/components/RunForm.svelte | 9 +- frontend/src/lib/stores.ts | 165 +++++++++--------- .../(root)/(logged)/run/[...run]/+page.svelte | 25 ++- .../scripts/edit/[...hash]/+page.svelte | 10 +- 4 files changed, 106 insertions(+), 103 deletions(-) diff --git a/frontend/src/lib/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte index 1b1656de31..a765ce97c2 100644 --- a/frontend/src/lib/components/RunForm.svelte +++ b/frontend/src/lib/components/RunForm.svelte @@ -16,7 +16,7 @@ import { Badge, Button } from './common' import SharedBadge from './SharedBadge.svelte' import Toggle from './Toggle.svelte' - import { userStore } from '$lib/stores' + import { runFormStore, userStore } from '$lib/stores' import Tooltip from './Tooltip.svelte' import CliHelpBox from './CliHelpBox.svelte' import InlineCodeCopy from './InlineCodeCopy.svelte' @@ -51,7 +51,12 @@ export let viewCliRun = false export let isFlow: boolean - export let args: Record = decodeArgs($page.url.searchParams.get('args') ?? undefined) + export let args: Record = {} + + if ($runFormStore) { + args = $runFormStore + $runFormStore = undefined + } export function run() { runAction(scheduledForStr, args, invisible_to_owner) diff --git a/frontend/src/lib/stores.ts b/frontend/src/lib/stores.ts index 617d72423f..73ce0955b1 100644 --- a/frontend/src/lib/stores.ts +++ b/frontend/src/lib/stores.ts @@ -1,100 +1,99 @@ -import { browser } from "$app/environment"; -import { derived, type Readable, writable } from "svelte/store"; -import type { UserWorkspaceList } from "$lib/gen/models/UserWorkspaceList.js"; -import { getUserExt } from "./user"; -import { WorkspaceService, type TokenResponse } from "./gen"; -import { isCloudHosted } from "./utils"; +import { browser } from '$app/environment' +import { derived, type Readable, writable } from 'svelte/store' +import type { UserWorkspaceList } from '$lib/gen/models/UserWorkspaceList.js' +import { getUserExt } from './user' +import { WorkspaceService, type TokenResponse } from './gen' +import { isCloudHosted } from './utils' export interface UserExt { - email: string; - username: string; - is_admin: boolean; - is_super_admin: boolean; - operator: boolean; - created_at: string; - groups: string[]; - pgroups: string[]; - folders: string[] + email: string + username: string + is_admin: boolean + is_super_admin: boolean + operator: boolean + created_at: string + groups: string[] + pgroups: string[] + folders: string[] } -let persistedWorkspace = browser && localStorage.getItem("workspace"); +let persistedWorkspace = browser && localStorage.getItem('workspace') -export const usageStore = writable(0); -export const oauthStore = writable(undefined); -export const userStore = writable(undefined); +export const usageStore = writable(0) +export const runFormStore = writable() +export const oauthStore = writable(undefined) +export const userStore = writable(undefined) export const workspaceStore = writable( - persistedWorkspace ? String(persistedWorkspace) : undefined, -); -export const premiumStore = writable<{ premium: boolean, usage?: number }>({ premium: false }); -export const starStore = writable(1); -export const usersWorkspaceStore = writable( - undefined, -); -export const superadmin = writable(undefined); + persistedWorkspace ? String(persistedWorkspace) : undefined +) +export const premiumStore = writable<{ premium: boolean; usage?: number }>({ premium: false }) +export const starStore = writable(1) +export const usersWorkspaceStore = writable(undefined) +export const superadmin = writable(undefined) export const userWorkspaces: Readable< - Array<{ - id: string; - name: string; - username: string; - }> -> = derived( - [usersWorkspaceStore, superadmin], - ([store, superadmin]) => { - const originalWorkspaces = (store?.workspaces ?? []); - if (superadmin) { - return [...originalWorkspaces.filter((x) => x.id != 'starter' && x.id != 'admins'), { - id: "admins", - name: "Admins", - username: "superadmin", - }]; - } else { - return originalWorkspaces; - } - }, -); + Array<{ + id: string + name: string + username: string + }> +> = derived([usersWorkspaceStore, superadmin], ([store, superadmin]) => { + const originalWorkspaces = store?.workspaces ?? [] + if (superadmin) { + return [ + ...originalWorkspaces.filter((x) => x.id != 'starter' && x.id != 'admins'), + { + id: 'admins', + name: 'Admins', + username: 'superadmin' + } + ] + } else { + return originalWorkspaces + } +}) export const hubScripts = writable< - | Array<{ - path: string; - summary: string; - approved: boolean; - kind: string; - app: string; - ask_id: number; - }> - | undefined ->(undefined); + | Array<{ + path: string + summary: string + approved: boolean + kind: string + app: string + ask_id: number + }> + | undefined +>(undefined) if (browser) { - workspaceStore.subscribe(async (workspace) => { - if (workspace) { - try { - localStorage.setItem("workspace", String(workspace)); - } catch (e) { - console.error('Could not persist workspace to local storage', e) - } - const user = await getUserExt(workspace) - userStore.set(user); - if (isCloudHosted() && user?.is_admin) { - premiumStore.set((await WorkspaceService.getPremiumInfo({ workspace }))); - } - } else { - userStore.set(undefined); - } - }); + workspaceStore.subscribe(async (workspace) => { + if (workspace) { + try { + localStorage.setItem('workspace', String(workspace)) + } catch (e) { + console.error('Could not persist workspace to local storage', e) + } + const user = await getUserExt(workspace) + userStore.set(user) + if (isCloudHosted() && user?.is_admin) { + premiumStore.set(await WorkspaceService.getPremiumInfo({ workspace })) + } + } else { + userStore.set(undefined) + } + }) } export function switchWorkspace(workspace: string | undefined) { - localStorage.removeItem("flow") - localStorage.removeItem("app") - workspaceStore.set(workspace); + localStorage.removeItem('flow') + localStorage.removeItem('app') + workspaceStore.set(workspace) } export function clearStores(): void { - localStorage.removeItem("flow") - localStorage.removeItem("app") - localStorage.removeItem("workspace"); - userStore.set(undefined); - workspaceStore.set(undefined); - usersWorkspaceStore.set(undefined); - superadmin.set(undefined); + localStorage.removeItem('flow') + localStorage.removeItem('app') + localStorage.removeItem('workspace') + userStore.set(undefined) + workspaceStore.set(undefined) + usersWorkspaceStore.set(undefined) + superadmin.set(undefined) } diff --git a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte index d0412b0dad..ca8065a3ef 100644 --- a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte @@ -25,7 +25,7 @@ faFastForward } from '@fortawesome/free-solid-svg-icons' import DisplayResult from '$lib/components/DisplayResult.svelte' - import { superadmin, userStore, userWorkspaces, workspaceStore } from '$lib/stores' + import { runFormStore, superadmin, userStore, userWorkspaces, workspaceStore } from '$lib/stores' import CenteredPage from '$lib/components/CenteredPage.svelte' import FlowStatusViewer from '$lib/components/FlowStatusViewer.svelte' import HighlightCode from '$lib/components/HighlightCode.svelte' @@ -39,6 +39,7 @@ import Badge from '$lib/components/common/badge/Badge.svelte' import Tooltip from '$lib/components/Tooltip.svelte' import Dropdown from '$lib/components/Dropdown.svelte' + import { goto } from '$app/navigation' $: workspace_id = $page.url.searchParams.get('workspace') ?? $workspaceStore $: not_same_workspace = workspace_id !== $workspaceStore @@ -170,18 +171,6 @@ {@const stem = `/${job?.job_kind}s`} {@const isScript = job?.job_kind === 'script'} {@const route = isScript ? job?.script_hash : job?.script_path} - {@const runHref = `${stem}/run/${route}${ - job?.args ? '?args=' + encodeURIComponent(encodeState(job?.args)) : '' - }`} - {@const editHref = `${stem}/edit/${route}${ - isScript - ? `?step=2${job?.args ? `&args=${encodeURIComponent(encodeState(job?.args))}` : ''}` - : `${ - job?.args - ? `?args=${encodeURIComponent(encodeState(job?.args))}&nodraft=true` - : '?nodraft=true' - }` - }`} {@const isRunning = job && 'running' in job && job.running} {@const viewHref = `${stem}/get/${isScript ? job?.script_hash : job?.script_path}`} {#if isRunning} @@ -224,7 +213,10 @@ > {/if}