diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs index ae64d52c..278b12e0 100644 --- a/frontend/.eslintrc.cjs +++ b/frontend/.eslintrc.cjs @@ -44,25 +44,31 @@ module.exports = { 'import/newline-after-import': 'warn', 'import/no-duplicates': 'warn', 'import/no-extraneous-dependencies': 'off', - 'simple-import-sort/imports': ['warn', { - groups: [ - ['^\\u0000'], - ['^@?\\w', '^@?\\w.*\\u0000$'], - ['(?/**" - ], - "runtimeExecutable": "npm", - "runtimeArgs": [ - "run" - ], - "args": [ - "dev" - ], - "cwd": "${workspaceFolder}", - "envFile": "${workspaceFolder}/.env", - "outputCapture": "std", - "internalConsoleOptions": "openOnSessionStart" - } - ] -} \ No newline at end of file + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "node", + "request": "launch", + "name": "Launch frontend development server", + "skipFiles": ["/**"], + "runtimeExecutable": "npm", + "runtimeArgs": ["run"], + "args": ["dev"], + "cwd": "${workspaceFolder}", + "envFile": "${workspaceFolder}/.env", + "outputCapture": "std", + "internalConsoleOptions": "openOnSessionStart" + } + ] +} diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json index bb73af27..3628ada7 100644 --- a/frontend/.vscode/settings.json +++ b/frontend/.vscode/settings.json @@ -1,7 +1,5 @@ { - "prettier.documentSelectors": [ - "**/*.svelte" - ], + "prettier.documentSelectors": ["**/*.svelte"], "tailwindCSS.classAttributes": [ "class", "accent", @@ -99,9 +97,5 @@ "[svelte]": { "editor.defaultFormatter": "svelte.svelte-vscode" }, - "eslint.validate": [ - "javascript", - "typescript", - "svelte" - ] -} \ No newline at end of file + "eslint.validate": ["javascript", "typescript", "svelte"] +} diff --git a/frontend/package.json b/frontend/package.json index a11fb9f5..690206cf 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,70 +1,70 @@ { - "name": "frontend", - "version": "0.3.0", - "private": true, - "scripts": { - "dev": "vite dev", - "build": "vite build", - "preview": "vite preview", - "sync": "svelte-kit sync", - "test": "playwright test", - "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", - "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", - "test:unit": "vitest", - "lint": "prettier --plugin-search-dir . --check . && eslint .", - "format": "prettier --plugin-search-dir . --write ." - }, - "devDependencies": { - "@floating-ui/dom": "^1.6.3", - "@rollup/plugin-json": "^6.1.0", - "@skeletonlabs/skeleton": "^2.8.0", - "@skeletonlabs/tw-plugin": "0.3.1", - "@sveltejs/adapter-auto": "^3.1.1", - "@sveltejs/kit": "^2.5.0", - "@sveltejs/vite-plugin-svelte": "^3.0.2", - "@tailwindcss/forms": "0.5.7", - "@tailwindcss/typography": "0.5.10", - "@types/js-yaml": "^4.0.9", - "@types/node": "20.11.19", - "@typescript-eslint/eslint-plugin": "^6.15.0", - "@typescript-eslint/parser": "^6.15.0", - "autoprefixer": "10.4.17", - "eslint": "^8.56.0", - "eslint-config-airbnb-base": "^15.0.0", - "eslint-config-airbnb-typescript": "^17.1.0", - "eslint-config-prettier": "^9.1.0", - "eslint-plugin-eslint-comments": "^3.2.0", - "eslint-plugin-import": "^2.29.1", - "eslint-plugin-simple-import-sort": "^12.0.0", - "eslint-plugin-svelte": "^2.35.1", - "eslint-plugin-unicorn": "^51.0.1", - "postcss": "^8.4.35", - "prettier": "^3.2.5", - "prettier-plugin-svelte": "^3.2.1", - "svelte": "^4.2.11", - "svelte-check": "^3.6.4", - "tailwindcss": "^3.4.1", - "tslib": "^2.6.2", - "typescript": "^5.3.3", - "vite": "^5.1.3", - "vite-plugin-tailwind-purgecss": "0.2.0" - }, - "type": "module", - "dependencies": { - "@fontsource/ibm-plex-sans": "^5.0.18", - "babel-plugin-prismjs": "^2.1.0", - "date-fns": "^3.3.1", - "filesize": "^10.1.0", - "graphql-request": "^6.1.0", - "highlight.js": "^11.9.0", - "js-yaml": "^4.1.0", - "json-to-pretty-yaml": "^1.2.2", - "keycloak-js": "^23.0.6", - "mermaid": "^10.8.0", - "minio": "^7.1.3", - "plotly.js-dist": "^2.29.1", - "svelte-feather-icons": "^4.1.0", - "svelte-plotly.js": "^0.3.2", - "vitest": "^1.4.0" - } + "name": "frontend", + "version": "0.3.0", + "private": true, + "scripts": { + "dev": "vite dev", + "build": "vite build", + "preview": "vite preview", + "sync": "svelte-kit sync", + "test": "playwright test", + "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", + "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", + "test:unit": "vitest", + "lint": "prettier --plugin-search-dir . --check . && eslint .", + "format": "prettier --plugin-search-dir . --write ." + }, + "devDependencies": { + "@floating-ui/dom": "^1.6.3", + "@rollup/plugin-json": "^6.1.0", + "@skeletonlabs/skeleton": "^2.8.0", + "@skeletonlabs/tw-plugin": "0.3.1", + "@sveltejs/adapter-auto": "^3.1.1", + "@sveltejs/kit": "^2.5.0", + "@sveltejs/vite-plugin-svelte": "^3.0.2", + "@tailwindcss/forms": "0.5.7", + "@tailwindcss/typography": "0.5.10", + "@types/js-yaml": "^4.0.9", + "@types/node": "20.11.19", + "@typescript-eslint/eslint-plugin": "^6.15.0", + "@typescript-eslint/parser": "^6.15.0", + "autoprefixer": "10.4.17", + "eslint": "^8.56.0", + "eslint-config-airbnb-base": "^15.0.0", + "eslint-config-airbnb-typescript": "^17.1.0", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-eslint-comments": "^3.2.0", + "eslint-plugin-import": "^2.29.1", + "eslint-plugin-simple-import-sort": "^12.0.0", + "eslint-plugin-svelte": "^2.35.1", + "eslint-plugin-unicorn": "^51.0.1", + "postcss": "^8.4.35", + "prettier": "^3.2.5", + "prettier-plugin-svelte": "^3.2.1", + "svelte": "^4.2.11", + "svelte-check": "^3.6.4", + "tailwindcss": "^3.4.1", + "tslib": "^2.6.2", + "typescript": "^5.3.3", + "vite": "^5.1.3", + "vite-plugin-tailwind-purgecss": "0.2.0" + }, + "type": "module", + "dependencies": { + "@fontsource/ibm-plex-sans": "^5.0.18", + "babel-plugin-prismjs": "^2.1.0", + "date-fns": "^3.3.1", + "filesize": "^10.1.0", + "graphql-request": "^6.1.0", + "highlight.js": "^11.9.0", + "js-yaml": "^4.1.0", + "json-to-pretty-yaml": "^1.2.2", + "keycloak-js": "^23.0.6", + "mermaid": "^10.8.0", + "minio": "^7.1.3", + "plotly.js-dist": "^2.29.1", + "svelte-feather-icons": "^4.1.0", + "svelte-plotly.js": "^0.3.2", + "vitest": "^1.4.0" + } } diff --git a/frontend/src/app.html b/frontend/src/app.html index ec615f03..5d04ca14 100644 --- a/frontend/src/app.html +++ b/frontend/src/app.html @@ -1,4 +1,4 @@ - + diff --git a/frontend/src/lib/formatBytes.ts b/frontend/src/lib/formatBytes.ts index 092c0cc1..bd1939dd 100644 --- a/frontend/src/lib/formatBytes.ts +++ b/frontend/src/lib/formatBytes.ts @@ -1,13 +1,12 @@ - // Helper function to format file size in a human-readable format export function formatBytes(bytes: number, decimals: number = 2) { - if (bytes === 0) return '0 Bytes'; + if (bytes === 0) return '0 Bytes'; - const k = 1024; - const dm = decimals < 0 ? 0 : decimals; - const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; + const k = 1024; + const dm = decimals < 0 ? 0 : decimals; + const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; - const i = Math.floor(Math.log(bytes) / Math.log(k)); + const i = Math.floor(Math.log(bytes) / Math.log(k)); - return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; -} \ No newline at end of file + return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; +} diff --git a/frontend/src/lib/modules/Alert.svelte b/frontend/src/lib/modules/Alert.svelte index e347d871..3561e64f 100644 --- a/frontend/src/lib/modules/Alert.svelte +++ b/frontend/src/lib/modules/Alert.svelte @@ -1,15 +1,14 @@ {#if visibleAlert} -
+
-{/if} \ No newline at end of file +{/if} diff --git a/frontend/src/modals/artifact-browser.svelte b/frontend/src/modals/artifact-browser.svelte index 4da84d21..297047d7 100644 --- a/frontend/src/modals/artifact-browser.svelte +++ b/frontend/src/modals/artifact-browser.svelte @@ -1,110 +1,119 @@
-
- - - - - -
-
-

Select one artifact as input

- {#if $selectedArtifact} -
-
- Bucket: {$selectedArtifact.bucket} -
-
- Artifact: {$selectedArtifact.name} -
-
- {/if} -
-
-
-
- -
-
-
- -
-
- -
-
-
-
+
+ + + + + +
+
+

Select one artifact as input

+ {#if $selectedArtifact} +
+
+ Bucket: {$selectedArtifact.bucket} +
+
+ Artifact: {$selectedArtifact.name} +
+
+ {/if} +
+
+
+ +
+
+
+ +
+
+ +
+
+
+
diff --git a/frontend/src/modals/rename-project-modal.svelte b/frontend/src/modals/rename-project-modal.svelte index 797da5c4..31fba60a 100644 --- a/frontend/src/modals/rename-project-modal.svelte +++ b/frontend/src/modals/rename-project-modal.svelte @@ -7,16 +7,15 @@ import allProjectsQuery from '$queries/get_all_projects.js'; import renameProjectMutation from '$queries/rename_project.js'; import { projectsList } from '$stores/stores.js'; - import { cBase, cForm,cHeader } from '$styles/styles.js'; + import { cBase, cForm, cHeader } from '$styles/styles.js'; import { displayAlert } from '$utils/alerts_utils.js'; import type { AllProjectsResponse } from '$typesdefinitions'; // Props - Exposes parent props to this component const modalStore = getModalStore(); - // Props - Exposes parent props to this component - export let parent: SvelteComponent; - + // Props - Exposes parent props to this component + export let parent: SvelteComponent; const project: { projectId: string; projectName: string } = $modalStore[0]?.valueAttr as { projectId: string; diff --git a/frontend/src/modals/submit-new-dry-run-modal.svelte b/frontend/src/modals/submit-new-dry-run-modal.svelte index 0b1507f9..41db146c 100644 --- a/frontend/src/modals/submit-new-dry-run-modal.svelte +++ b/frontend/src/modals/submit-new-dry-run-modal.svelte @@ -2,7 +2,7 @@ import { getModalStore } from '@skeletonlabs/skeleton'; import type { ModalSettings } from '@skeletonlabs/skeleton'; import { FileButton } from '@skeletonlabs/skeleton'; - import type { SvelteComponent } from 'svelte'; + import type { SvelteComponent } from 'svelte'; import { requestGraphQLClient } from '$lib/graphqlUtils.js'; @@ -14,7 +14,6 @@ import type { ArtifactHierarchyType, Project } from '$typesdefinitions'; import ArtifactBrowser from './artifact-browser.svelte'; - let isOverlayOpen = false; let selectedTemplateTaskName = ''; let selectedTemplateTaskArtifactName = ''; @@ -27,13 +26,14 @@ // Props - Exposes parent props to this component export let parent: SvelteComponent; - // TODO: input artifacts are enriched with raw data from local files. + // TODO: input artifacts are enriched with raw data from local files. // That is, the local files text content is written directly into the template!!! This is risky and should be changed! // templateContainerInputs contains argo workflow template container inputs. const templateContainerInputs: any = {}; // holds information about selected input data (raw files and artifacts) - let inputdata: { [task_name: string]: { [template_task_artifact_index: number]: InputData } } = {}; + let inputdata: { [task_name: string]: { [template_task_artifact_index: number]: InputData } } = + {}; let argoWorkflowTemplate = $selectedProject?.workflowTemplates[0].argoWorkflowTemplate; let currentArgoWorkflowTemplates = argoWorkflowTemplate.spec.templates; @@ -52,7 +52,7 @@ type ArtifactDataContent = { artifact_path: string; artifact_bucket: string; - } + }; type FileDataContent = { filename: string; @@ -67,7 +67,7 @@ path: string; bucket: string; }; - + // We have been using raw input. Now we will use miniobrowser to select input files. Currently need to support both useRawInput and useMinio // raw input comes from formData.files. type Task = { @@ -83,47 +83,51 @@ type TemplateContainerArtifactInput = { artifacts: [ { - name: string, // the given name of the input artifact in the template container - path: string, // the path to the input artifact in the container - mode: 644, // file mode (read-write for owner, read-only for group and others) - s3?: S3Input // s3 input artifact details + name: string; // the given name of the input artifact in the template container + path: string; // the path to the input artifact in the container + mode: 644; // file mode (read-write for owner, read-only for group and others) + s3?: S3Input; // s3 input artifact details } - ] + ]; }; type TemplateContainerRawInput = { artifacts: [ { - name: string, // the given name of the input artifact in the template container - path: string, // the path to the input artifact in the container - mode: 644, // file mode (read-write for owner, read-only for group and others) - raw: { data: string } // raw input artifact details + name: string; // the given name of the input artifact in the template container + path: string; // the path to the input artifact in the container + mode: 644; // file mode (read-write for owner, read-only for group and others) + raw: { data: string }; // raw input artifact details } - ] + ]; }; type S3Input = { - key: string; // path to minio object - endpoint: string, // minio endpoint - bucket: string, // minio bucket - insecure: true, + key: string; // path to minio object + endpoint: string; // minio endpoint + bucket: string; // minio bucket + insecure: true; accessKeySecret: { - name: string, - key: string - }, + name: string; + key: string; + }; secretKeySecret: { - name: string, - key: string - } + name: string; + key: string; + }; }; - function openOverlay(template_task_name: string, artifact_name: string, task_artifact_index: number) { + function openOverlay( + template_task_name: string, + artifact_name: string, + task_artifact_index: number + ) { console.log('openOverlay'); selectedTemplateTaskName = template_task_name; selectedTemplateTaskArtifactName = artifact_name; selectedTaskArtifactIndex = task_artifact_index; isOverlayOpen = true; - }; + } const closeOverlay = () => { console.log('closeOverlay'); @@ -132,15 +136,25 @@ }; // Receives message from ArtifactBrowser - returns details of selected artifact and template task name - function handleMessage(event: { detail: { selected_artifact: ArtifactHierarchyType, template_task_name: string, template_task_artifact_name: string}}) { + function handleMessage(event: { + detail: { + selected_artifact: ArtifactHierarchyType; + template_task_name: string; + template_task_artifact_name: string; + }; + }) { console.log('triggerInsertArtifactInput'); - const selectedArtifact = event.detail.selected_artifact; + const selectedArtifact = event.detail.selected_artifact; const selectedTemplateTaskName = event.detail.template_task_name; const selectedTemplateTaskArtifactName = event.detail.template_task_artifact_name; const selectedTemplateTaskArtifactIndex = selectedTaskArtifactIndex; - const template = currentArgoWorkflowTemplates.find((template: any) => template.name === selectedTemplateTaskName); - const input_artifact = template.inputs.artifacts.find((artifact: any) => artifact.name === selectedTemplateTaskArtifactName); + const template = currentArgoWorkflowTemplates.find( + (template: any) => template.name === selectedTemplateTaskName + ); + const input_artifact = template.inputs.artifacts.find( + (artifact: any) => artifact.name === selectedTemplateTaskArtifactName + ); // pop input_artifact.raw if ('raw' in input_artifact) { delete input_artifact.raw; @@ -148,30 +162,36 @@ input_artifact.s3 = createDefaultS3Input(); input_artifact.s3.key = selectedArtifact.path; input_artifact.s3.bucket = selectedArtifact.bucket; - currentArgoWorkflowTemplates.find( - (template: any) => template.name === selectedTemplateTaskName).inputs.artifacts.find( - (artifact: any) => artifact.name === selectedTemplateTaskArtifactName).s3 = input_artifact.s3; + currentArgoWorkflowTemplates + .find((template: any) => template.name === selectedTemplateTaskName) + .inputs.artifacts.find( + (artifact: any) => artifact.name === selectedTemplateTaskArtifactName + ).s3 = input_artifact.s3; const inputdata_data: InputData = { - 'template_task_name': selectedTemplateTaskName, - 'template_artifact_name': selectedTemplateTaskArtifactName, - 'template_task_artifact_index': selectedTemplateTaskArtifactIndex, - 'is_raw': false, - 'is_artifact': true, - 'artifact': { + template_task_name: selectedTemplateTaskName, + template_artifact_name: selectedTemplateTaskArtifactName, + template_task_artifact_index: selectedTemplateTaskArtifactIndex, + is_raw: false, + is_artifact: true, + artifact: { artifact_path: selectedArtifact.path, - artifact_bucket: selectedArtifact.bucket } + artifact_bucket: selectedArtifact.bucket + } }; if (!inputdata[selectedTemplateTaskName]) { // initialize empty array inputdata[selectedTemplateTaskName] = []; - } + } inputdata[selectedTemplateTaskName][selectedTemplateTaskArtifactIndex] = inputdata_data; console.log('handleMessage inputdata', inputdata); } - - async function triggerInsertRawInput(template_task_name: string, template_artifact_name: string, task_artifact_index: number) { + async function triggerInsertRawInput( + template_task_name: string, + template_artifact_name: string, + task_artifact_index: number + ) { // when a file is uploaded, the raw input is updated similarly to handleMessage event from the ArtifactBrowser console.log('triggerInsertRawInput'); const selectedTemplateTaskName = template_task_name; @@ -182,12 +202,12 @@ const filename = files[0].name; const inputdata_data: InputData = { - 'template_task_name': selectedTemplateTaskName, - 'template_artifact_name': selectedTemplateTaskArtifactName, - 'template_task_artifact_index': task_artifact_index, - 'is_raw': true, - 'is_artifact': false, - 'raw': { filename: filename } + template_task_name: selectedTemplateTaskName, + template_artifact_name: selectedTemplateTaskArtifactName, + template_task_artifact_index: task_artifact_index, + is_raw: true, + is_artifact: false, + raw: { filename: filename } }; if (!inputdata[selectedTemplateTaskName]) { // initialize empty array @@ -195,62 +215,66 @@ } inputdata[selectedTemplateTaskName][selectedTemplateTaskArtifactIndex] = inputdata_data; - - const template = currentArgoWorkflowTemplates.find((template: any) => template.name === selectedTemplateTaskName); - const input_artifact = template.inputs.artifacts.find((artifact: any) => artifact.name === selectedTemplateTaskArtifactName); + const template = currentArgoWorkflowTemplates.find( + (template: any) => template.name === selectedTemplateTaskName + ); + const input_artifact = template.inputs.artifacts.find( + (artifact: any) => artifact.name === selectedTemplateTaskArtifactName + ); // pop input_artifact.s3 if ('s3' in input_artifact) { delete input_artifact.s3; } input_artifact.raw = { data: text }; - currentArgoWorkflowTemplates.find( - (template: any) => template.name === selectedTemplateTaskName).inputs.artifacts.find( - (artifact: any) => artifact.name === selectedTemplateTaskArtifactName).raw = input_artifact.raw; + currentArgoWorkflowTemplates + .find((template: any) => template.name === selectedTemplateTaskName) + .inputs.artifacts.find( + (artifact: any) => artifact.name === selectedTemplateTaskArtifactName + ).raw = input_artifact.raw; } function createDefaultTemplateContainerRawInput(): TemplateContainerRawInput { return { artifacts: [ { - name: '', // the given name of the input artifact in the template container - path: '', // the path to the input artifact in the container - mode: 644, // file mode (read-write for owner, read-only for group and others) - raw: { data: '' } // raw input artifact details + name: '', // the given name of the input artifact in the template container + path: '', // the path to the input artifact in the container + mode: 644, // file mode (read-write for owner, read-only for group and others) + raw: { data: '' } // raw input artifact details } ] }; - }; + } function createDefaultTemplateContainerArtifactInput(): TemplateContainerArtifactInput { return { artifacts: [ { - name: '', // the given name of the input artifact in the template container - path: '', // the path to the input artifact in the container - mode: 644, // file mode (read-write for owner, read-only for group and others) + name: '', // the given name of the input artifact in the template container + path: '', // the path to the input artifact in the container + mode: 644, // file mode (read-write for owner, read-only for group and others) s3: createDefaultS3Input() } ] }; - }; + } function createDefaultS3Input(): S3Input { return { - key: '', // path to minio object - e.g. /path/to/object - this must be provided from minio artifact browser - bucket: '', // minio bucket - this must be provided from minio artifact browser - endpoint: "simpipe-minio:9000", + key: '', // path to minio object - e.g. /path/to/object - this must be provided from minio artifact browser + bucket: '', // minio bucket - this must be provided from minio artifact browser + endpoint: 'simpipe-minio:9000', insecure: true, accessKeySecret: { - name: "simpipe-minio", - key: "root-user" + name: 'simpipe-minio', + key: 'root-user' }, secretKeySecret: { - name: "simpipe-minio", - key: "root-password" + name: 'simpipe-minio', + key: 'root-password' } }; - }; - + } function parsetemplateTaskList() { // disabling; could not resolve eslint error Unsafe usage of optional chaining. If it short-circuits with 'undefined' the evaluation will throw TypeError 55:53 warning Unexpected any. Specify a different type @@ -267,11 +291,10 @@ // console.log('steps', steps); array of arrays of tasks let tasks: Task[] = []; if (dag) { - console.log('dag', dag) + console.log('dag', dag); tasks = dag.dag.tasks; - } else if (steps) { - console.log('steps', steps) + console.log('steps', steps); tasks = steps.steps.reduce((acc: Task[], step: any) => { acc.push(...step); return acc; @@ -294,7 +317,7 @@ newWorkflowTemplate.spec.templates = currentArgoWorkflowTemplates; // console.log('originalWorkflowTemplate', argoWorkflowTemplate); // console.log('newWorkflowTemplate', newWorkflowTemplate); - newWorkflowTemplate.metadata = { generateName: newWorkflowTemplate.metadata.generateName } + newWorkflowTemplate.metadata = { generateName: newWorkflowTemplate.metadata.generateName }; return newWorkflowTemplate; } @@ -360,7 +383,6 @@ } $: console.log('inputdata', inputdata); - {#if $modalStore[0]} @@ -411,23 +433,32 @@
{#if inputdata[task.name] && inputdata[task.name][k] && inputdata[task.name][k].is_artifact} - {inputdata[task.name][k].artifact?.artifact_bucket} {inputdata[task.name][k].artifact?.artifact_path} + {inputdata[task.name][k].artifact?.artifact_bucket} + {inputdata[task.name][k].artifact?.artifact_path} {:else} - {/if} + {/if}
- triggerInsertRawInput(task.name, artifact.name, k)}> + on:change={() => triggerInsertRawInput(task.name, artifact.name, k)} + > Upload local file
- +
@@ -454,16 +485,18 @@ {/if} {/if} - - + diff --git a/frontend/src/modals/submit-new-project-modal.svelte b/frontend/src/modals/submit-new-project-modal.svelte index e2c76d42..f22f8d5f 100644 --- a/frontend/src/modals/submit-new-project-modal.svelte +++ b/frontend/src/modals/submit-new-project-modal.svelte @@ -1,5 +1,5 @@ - {#if $modalStore[0]}
@@ -127,12 +146,7 @@
-{/if} \ No newline at end of file +{/if} diff --git a/frontend/src/modals/submit-new-secret-modal.svelte b/frontend/src/modals/submit-new-secret-modal.svelte index eb39ad90..57cdd876 100644 --- a/frontend/src/modals/submit-new-secret-modal.svelte +++ b/frontend/src/modals/submit-new-secret-modal.svelte @@ -1,5 +1,5 @@ {#if $modalStore[0]} -
-
{$modalStore[0].title ?? '(title mising)'}
-
-
- -
-
- - -
-
+
+
{$modalStore[0].title ?? '(title mising)'}
+
+
+ +
+
+ + +
+
{/if} diff --git a/frontend/src/modals/upload-file-modal.svelte b/frontend/src/modals/upload-file-modal.svelte index b217c5e2..72bbeb14 100644 --- a/frontend/src/modals/upload-file-modal.svelte +++ b/frontend/src/modals/upload-file-modal.svelte @@ -1,100 +1,106 @@ {#if $modalStore[0]} -
-
{$modalStore[0].title ?? '(title mising)'}
-
- Bucket: - -
-
- Path: - -
- - -
-
-
- Upload files or drag and drop -
- {#if files} - {#each files as file} -
- {file.name} - {formatBytes(file.size)} -
- {/each} - {/if} -
- -
- - -
-
-{/if} \ No newline at end of file +
+
{$modalStore[0].title ?? '(title mising)'}
+
+ Bucket: + +
+
+ Path: + +
+ + +
+
+
+ Upload files or drag and drop +
+ {#if files} + {#each files as file} +
+ {file.name} + {formatBytes(file.size)} +
+ {/each} + {/if} +
+ +
+ + +
+
+{/if} diff --git a/frontend/src/queries/delete_artifacts.ts b/frontend/src/queries/delete_artifacts.ts index 382fc66d..5400e9d9 100644 --- a/frontend/src/queries/delete_artifacts.ts +++ b/frontend/src/queries/delete_artifacts.ts @@ -1,9 +1,9 @@ import { gql } from 'graphql-request'; const deleteArtifactsMutation = gql` - mutation DeleteArtifacts($bucketName: String!, $keys: [String!]!) { - deleteArtifacts(bucketName: $bucketName, keys: $keys) - } + mutation DeleteArtifacts($bucketName: String!, $keys: [String!]!) { + deleteArtifacts(bucketName: $bucketName, keys: $keys) + } `; export default deleteArtifactsMutation; diff --git a/frontend/src/queries/get_all_artifacts.ts b/frontend/src/queries/get_all_artifacts.ts index 9772c7dc..6b26c168 100644 --- a/frontend/src/queries/get_all_artifacts.ts +++ b/frontend/src/queries/get_all_artifacts.ts @@ -1,14 +1,14 @@ import { gql } from 'graphql-request'; const allArtifactsQuery = gql` - query Artifacts($bucketName: String) { - artifacts(bucketName: $bucketName) { - name - url - size - bucketName - } - } + query Artifacts($bucketName: String) { + artifacts(bucketName: $bucketName) { + name + url + size + bucketName + } + } `; export default allArtifactsQuery; diff --git a/frontend/src/queries/get_all_buckets.ts b/frontend/src/queries/get_all_buckets.ts index 1d048d1c..65e334ca 100644 --- a/frontend/src/queries/get_all_buckets.ts +++ b/frontend/src/queries/get_all_buckets.ts @@ -1,11 +1,11 @@ import { gql } from 'graphql-request'; const allBucketsQuery = gql` - query Buckets { - buckets { - name - } - } + query Buckets { + buckets { + name + } + } `; export default allBucketsQuery; diff --git a/frontend/src/queries/get_presigned_url_upload.ts b/frontend/src/queries/get_presigned_url_upload.ts index f6a29cd9..f65336a4 100644 --- a/frontend/src/queries/get_presigned_url_upload.ts +++ b/frontend/src/queries/get_presigned_url_upload.ts @@ -2,8 +2,8 @@ import { gql } from 'graphql-request'; const getUploadPresignedUrl = gql` mutation ComputeUploadPresignedUrl($key: String, $bucketName: String) { - computeUploadPresignedUrl(key: $key, bucketName: $bucketName) - } + computeUploadPresignedUrl(key: $key, bucketName: $bucketName) + } `; export default getUploadPresignedUrl; diff --git a/frontend/src/queries/get_workflow_template.ts b/frontend/src/queries/get_workflow_template.ts index be11bb71..8b405bf8 100644 --- a/frontend/src/queries/get_workflow_template.ts +++ b/frontend/src/queries/get_workflow_template.ts @@ -4,7 +4,10 @@ const getWorkflowQuery = gql` query WorkflowTemplate($name: String!) { workflowTemplate(name: $name) { name - project {name, id} + project { + name + id + } argoWorkflowTemplate } } diff --git a/frontend/src/queries/get_workflow_template_from_dry_run.ts b/frontend/src/queries/get_workflow_template_from_dry_run.ts index b770554f..f8b8c3a1 100644 --- a/frontend/src/queries/get_workflow_template_from_dry_run.ts +++ b/frontend/src/queries/get_workflow_template_from_dry_run.ts @@ -1,13 +1,16 @@ import { gql } from 'graphql-request'; const getWorkflowFromDryRunQuery = gql` - query WorkflowTemplateFromDryRun($dryRunId: String!) { - dryRun(dryRunId: $dryRunId) { - id - project {name, id} - argoWorkflow - } - } + query WorkflowTemplateFromDryRun($dryRunId: String!) { + dryRun(dryRunId: $dryRunId) { + id + project { + name + id + } + argoWorkflow + } + } `; export default getWorkflowFromDryRunQuery; diff --git a/frontend/src/routes/+error.svelte b/frontend/src/routes/+error.svelte index 7bd45222..1cc26372 100644 --- a/frontend/src/routes/+error.svelte +++ b/frontend/src/routes/+error.svelte @@ -1,9 +1,9 @@
-

404: Page Not Found

-

The page you are looking for does not exist.

-
\ No newline at end of file +

404: Page Not Found

+

The page you are looking for does not exist.

+ diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte index 9c541ecd..b8827b12 100644 --- a/frontend/src/routes/+layout.svelte +++ b/frontend/src/routes/+layout.svelte @@ -9,12 +9,20 @@ import hljs from 'highlight.js'; import 'highlight.js/styles/github-dark.css'; // highlight.js theme import { LockIcon, BookOpenIcon, FileIcon, FolderIcon, StarIcon } from 'svelte-feather-icons'; - import { AppShell, AppBar, AppRail, AppRailAnchor, LightSwitch, storeHighlightJs, Modal, initializeStores } from '@skeletonlabs/skeleton'; + import { + AppShell, + AppBar, + AppRail, + AppRailAnchor, + LightSwitch, + storeHighlightJs, + Modal, + initializeStores + } from '@skeletonlabs/skeleton'; import type { ModalComponent } from '@skeletonlabs/skeleton'; import { page } from '$app/stores'; import * as config from '../lib/config'; - import { browser } from '$app/environment'; - + import { browser } from '$app/environment'; initializeStores(); @@ -30,10 +38,9 @@ provideTextInputModal: { ref: ProvideTextInputModal }, createNewProjectModal: { ref: SubmitNewProjectModal }, submitNewDryRunModal: { ref: SubmitNewDryRunModal }, - submitNewSecretModal: { ref: SubmitNewSecretModal }, + submitNewSecretModal: { ref: SubmitNewSecretModal } }; - storeHighlightJs.set(hljs); function generateServiceUrl(): string { @@ -67,7 +74,6 @@ } - @@ -87,49 +93,52 @@ - +
-
- Projects -
+
Projects
 - +
-
- Artifacts -
+
Artifacts
 - +
-
- Registry -
+
Registry
 - +
-
- Files -
+
Files
 - - - + + + - + diff --git a/frontend/src/routes/artifacts/Artifact.svelte b/frontend/src/routes/artifacts/Artifact.svelte index 7dabc1b9..8645f178 100644 --- a/frontend/src/routes/artifacts/Artifact.svelte +++ b/frontend/src/routes/artifacts/Artifact.svelte @@ -1,56 +1,55 @@
  • -
    -
    - -
    -
    - {#if artifact.isExpanded && artifact.subfolders.length > 0} -
      - {#each artifact.subfolders as subfolder (subfolder.name)} - - {/each} -
    - {/if} +
    +
    + +
    +
    + {#if artifact.isExpanded && artifact.subfolders.length > 0} +
      + {#each artifact.subfolders as subfolder (subfolder.name)} + + {/each} +
    + {/if}
    • \ No newline at end of file + ul { + list-style-type: none; + padding-left: 20px; + gap: 2px; + } + li { + display: flex; + flex-direction: column; + gap: 2px; + margin-left: 10px; /* Indentation */ + } + button { + display: flex; + align-items: center; + } + diff --git a/frontend/src/routes/artifacts/Artifacts.svelte b/frontend/src/routes/artifacts/Artifacts.svelte index 38db4329..f044b061 100644 --- a/frontend/src/routes/artifacts/Artifacts.svelte +++ b/frontend/src/routes/artifacts/Artifacts.svelte @@ -1,127 +1,131 @@ - - -
    -
    -

    Buckets

    - {#if !requestsComplete } - - {:else} -
    - -
    - {/if} -
    +
    +

    Buckets

    + {#if !requestsComplete} + + {:else} +
    + +
    + {/if} +
    - + + + diff --git a/frontend/src/routes/artifacts/artifact-structure.svelte b/frontend/src/routes/artifacts/artifact-structure.svelte index 75d6301b..07712cc0 100644 --- a/frontend/src/routes/artifacts/artifact-structure.svelte +++ b/frontend/src/routes/artifacts/artifact-structure.svelte @@ -1,110 +1,118 @@
    -
    - {#each $reactiveBuckets as bucket (bucket.bucket)} -
    -
    - -
    -
    - {#if bucket.isExpanded} - {#each bucket.artifacts as artifact (artifact.id)} - - {/each} - {/if} - {/each} -
    +
    + {#each $reactiveBuckets as bucket (bucket.bucket)} +
    +
    + +
    +
    + {#if bucket.isExpanded} + {#each bucket.artifacts as artifact (artifact.id)} + + {/each} + {/if} + {/each} +
    diff --git a/frontend/src/routes/artifacts/symbol-for-artifact.svelte b/frontend/src/routes/artifacts/symbol-for-artifact.svelte index 4161e5fa..32477c5c 100644 --- a/frontend/src/routes/artifacts/symbol-for-artifact.svelte +++ b/frontend/src/routes/artifacts/symbol-for-artifact.svelte @@ -1,52 +1,51 @@ - - - + + diff --git a/frontend/src/routes/artifacts/symbol-for-bucket.svelte b/frontend/src/routes/artifacts/symbol-for-bucket.svelte index 54d6c04d..1dd399b0 100644 --- a/frontend/src/routes/artifacts/symbol-for-bucket.svelte +++ b/frontend/src/routes/artifacts/symbol-for-bucket.svelte @@ -1,51 +1,50 @@ - - - + + diff --git a/frontend/src/routes/ideas/+page.server.ts b/frontend/src/routes/ideas/+page.server.ts index 09d2a8b4..c6bf25c3 100644 --- a/frontend/src/routes/ideas/+page.server.ts +++ b/frontend/src/routes/ideas/+page.server.ts @@ -1,15 +1,15 @@ import type { PageServerLoad } from './$types'; -import { GraphQLClient } from 'graphql-request' +import { GraphQLClient } from 'graphql-request'; import allArtifactsQuery from '$queries/get_all_artifacts'; import allBucketsQuery from '$queries/get_all_buckets'; import * as config from '$lib/config'; const simpipe_endpoint = config.SIM_PIPE_CONTROLLER_URL as string; -const client = new GraphQLClient(simpipe_endpoint) +const client = new GraphQLClient(simpipe_endpoint); type Bucket = { - name: string; + name: string; }; type Artifact = { @@ -24,20 +24,19 @@ type Artifacts = { artifacts: Artifact[]; }; - - -export const load: PageServerLoad = async () => { +export const load: PageServerLoad = async () => { const buckets_response: { buckets: Bucket[] } = await client.request(allBucketsQuery); let artifacts_list: Artifacts[] = []; for (const bucket of buckets_response.buckets) { - const artifacts: {artifacts: Artifact[]} = await client.request(allArtifactsQuery, { bucketName: bucket.name }); + const artifacts: { artifacts: Artifact[] } = await client.request(allArtifactsQuery, { + bucketName: bucket.name + }); artifacts_list.push({ bucketName: bucket.name, artifacts: artifacts.artifacts }); } - return { + return { buckets: buckets_response, - artifacts: artifacts_list, + artifacts: artifacts_list }; }; - diff --git a/frontend/src/routes/ideas/+page.svelte b/frontend/src/routes/ideas/+page.svelte index ef25e514..8e2bcf6f 100644 --- a/frontend/src/routes/ideas/+page.svelte +++ b/frontend/src/routes/ideas/+page.svelte @@ -1,24 +1,21 @@ -
    -

    - Hello there! -

    - - -
    \ No newline at end of file +

    Hello there!

    + + + diff --git a/frontend/src/routes/projects/+page.svelte b/frontend/src/routes/projects/+page.svelte index e4b52adf..0889bb1b 100644 --- a/frontend/src/routes/projects/+page.svelte +++ b/frontend/src/routes/projects/+page.svelte @@ -1,7 +1,7 @@ - -
    @@ -154,3 +135,21 @@ {/await}
    + + diff --git a/frontend/src/routes/secrets/[secret_id]/+page.svelte b/frontend/src/routes/secrets/[secret_id]/+page.svelte index 85ed6289..d2dc2acf 100644 --- a/frontend/src/routes/secrets/[secret_id]/+page.svelte +++ b/frontend/src/routes/secrets/[secret_id]/+page.svelte @@ -1,19 +1,18 @@