Skip to content
Snippets Groups Projects
Verified Commit 1bd797d5 authored by Daniel Göbel's avatar Daniel Göbel
Browse files

Add view to list all available resources in the system

#88
parent 3f9721ff
No related branches found
No related tags found
1 merge request!85Resolve "Add UI for viewing and managing Resources"
Showing
with 1827 additions and 1720 deletions
......@@ -14,6 +14,7 @@ When accessing the website, these variables will be loaded dynamically into the
|-------------------------|---------|----------|--------------------------------------------------|
| `AUTH_API_BASE_URL` | unset | HTTP URL | Base URL for the Auth Service API |
| `WORKFLOW_API_BASE_URL` | unset | HTTP URL | Base URL for the Workflow Service API |
| `RESOURCE_API_BASE_URL` | unset | HTTP URL | Base URL for the Resource Service API |
| `S3PROXY_API_BASE_URL` | unset | HTTP URL | Base URL for the S3Proxy Service API |
| `S3_URL` | unset | HTTP URL | URL of the S3 storage to interact with |
| `DEV_SYSTEM` | `false` | boolean | Flag if the service is installed on a Dev system |
This diff is collapsed.
......@@ -10,7 +10,8 @@
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
"generate-s3-client": "openapi --input http://localhost:9999/api/s3proxy-service/openapi.json --output src/client/s3proxy --client axios",
"generate-auth-client": "openapi --input http://localhost:9999/api/auth-service/openapi.json --output src/client/auth --client axios",
"generate-workflow-client": "openapi --input http://localhost:9999/api/workflow-service/openapi.json --output src/client/workflow --client axios"
"generate-workflow-client": "openapi --input http://localhost:9999/api/workflow-service/openapi.json --output src/client/workflow --client axios",
"generate-resource-client": "openapi --input http://localhost:9999/api/resource-service/openapi.json --output src/client/resource --client axios"
},
"dependencies": {
"@aws-sdk/client-s3": "^3.440.0",
......@@ -19,44 +20,44 @@
"@fortawesome/fontawesome-free": "~6.4.2",
"@popperjs/core": "~2.11.8",
"ajv": "~8.12.0",
"bootstrap": "~5.3.1",
"chart.js": "~4.3.3",
"bootstrap": "~5.3.0",
"chart.js": "~4.4.0",
"chartjs-plugin-zoom": "~2.0.1",
"dayjs": "~1.11.9",
"dayjs": "~1.11.0",
"dompurify": "~3.0.5",
"filesize": "~10.0.12",
"idb-keyval": "^6.2.1",
"pinia": "~2.1.6",
"semver": "~7.5.4",
"pinia": "~2.1.0",
"semver": "~7.5.0",
"showdown": "~2.1.0",
"vue": "~3.3.4",
"vue-router": "~4.2.4",
"vue3-cookies": "~1.0.6"
"vue": "~3.4.0",
"vue-router": "~4.2.0",
"vue3-cookies": "~1.0.0"
},
"devDependencies": {
"@esbuild-plugins/node-globals-polyfill": "~0.2.3",
"@esbuild-plugins/node-modules-polyfill": "~0.2.2",
"@rushstack/eslint-patch": "~1.2.0",
"@tsconfig/node18": "^18.2.1",
"@types/bootstrap": "~5.2.6",
"@types/dompurify": "~3.0.2",
"@types/node": "^16.18.48",
"@types/bootstrap": "~5.2.0",
"@types/dompurify": "~3.0.0",
"@types/node": "^18.19.5",
"@types/semver": "~7.5.1",
"@types/showdown": "~2.0.1",
"@vitejs/plugin-vue": "~4.3.4",
"@vitejs/plugin-vue": "~5.0.0",
"@vue/eslint-config-prettier": "~8.0.0",
"@vue/eslint-config-typescript": "~11.0.3",
"@vue/tsconfig": "~0.4.0",
"@vue/tsconfig": "~0.5.0",
"axios": "~1.6.0",
"eslint": "~8.48.0",
"eslint-plugin-vue": "~9.17.0",
"eslint-plugin-vue": "~9.19.0",
"npm-run-all": "~4.1.5",
"openapi-typescript-codegen": "^0.25.0",
"openapi-typescript-codegen": "^0.26.0",
"prettier": "~3.0.3",
"rollup-plugin-node-polyfills": "~0.2.1",
"sass": "~1.66.1",
"typescript": "~5.1.6",
"vite": "~4.4.9",
"vue-tsc": "~1.8.10"
"vite": "~5.0.0",
"vue-tsc": "~1.8.0"
}
}
......@@ -7,6 +7,7 @@ import { useRouter } from "vue-router";
import { OpenAPI as S3ProxyOpenAPI } from "@/client/s3proxy";
import { OpenAPI as AuthOpenAPI } from "@/client/auth";
import { OpenAPI as WorkflowOpenAPI } from "@/client/workflow";
import { OpenAPI as ResourceOpenAPI } from "@/client/resource";
import { environment } from "@/environment";
import FooterBottom from "@/components/FooterBottom.vue";
import axios from "axios";
......@@ -19,6 +20,7 @@ onBeforeMount(() => {
S3ProxyOpenAPI.BASE = environment.S3PROXY_API_BASE_URL;
AuthOpenAPI.BASE = environment.AUTH_API_BASE_URL;
WorkflowOpenAPI.BASE = environment.WORKFLOW_API_BASE_URL;
ResourceOpenAPI.BASE = environment.RESOURCE_API_BASE_URL;
axios.interceptors.response.use(
(res) => res,
(err) => {
......
......@@ -6,5 +6,6 @@
window["env"]["workflowApiUrl"] = "${WORKFLOW_API_BASE_URL}";
window["env"]["s3proxyApiUrl"] = "${S3PROXY_API_BASE_URL}";
window["env"]["authApiUrl"] = "${AUTH_API_BASE_URL}";
window["env"]["resourceApiUrl"] = "${RESOURCE_API_BASE_URL}";
window["env"]["devSystem"] = "${DEV_SYSTEM}";
})(this);
/* generated using openapi-typescript-codegen -- do no edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
import type { ApiRequestOptions } from './ApiRequestOptions';
import type { ApiResult } from './ApiResult';
export class ApiError extends Error {
public readonly url: string;
public readonly status: number;
public readonly statusText: string;
public readonly body: any;
public readonly request: ApiRequestOptions;
constructor(request: ApiRequestOptions, response: ApiResult, message: string) {
super(message);
this.name = 'ApiError';
this.url = response.url;
this.status = response.status;
this.statusText = response.statusText;
this.body = response.body;
this.request = request;
}
}
/* generated using openapi-typescript-codegen -- do no edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
export type ApiRequestOptions = {
readonly method: 'GET' | 'PUT' | 'POST' | 'DELETE' | 'OPTIONS' | 'HEAD' | 'PATCH';
readonly url: string;
readonly path?: Record<string, any>;
readonly cookies?: Record<string, any>;
readonly headers?: Record<string, any>;
readonly query?: Record<string, any>;
readonly formData?: Record<string, any>;
readonly body?: any;
readonly mediaType?: string;
readonly responseHeader?: string;
readonly errors?: Record<number, string>;
};
/* generated using openapi-typescript-codegen -- do no edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
export type ApiResult = {
readonly url: string;
readonly ok: boolean;
readonly status: number;
readonly statusText: string;
readonly body: any;
};
/* generated using openapi-typescript-codegen -- do no edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
export class CancelError extends Error {
constructor(message: string) {
super(message);
this.name = 'CancelError';
}
public get isCancelled(): boolean {
return true;
}
}
export interface OnCancel {
readonly isResolved: boolean;
readonly isRejected: boolean;
readonly isCancelled: boolean;
(cancelHandler: () => void): void;
}
export class CancelablePromise<T> implements Promise<T> {
#isResolved: boolean;
#isRejected: boolean;
#isCancelled: boolean;
readonly #cancelHandlers: (() => void)[];
readonly #promise: Promise<T>;
#resolve?: (value: T | PromiseLike<T>) => void;
#reject?: (reason?: any) => void;
constructor(
executor: (
resolve: (value: T | PromiseLike<T>) => void,
reject: (reason?: any) => void,
onCancel: OnCancel
) => void
) {
this.#isResolved = false;
this.#isRejected = false;
this.#isCancelled = false;
this.#cancelHandlers = [];
this.#promise = new Promise<T>((resolve, reject) => {
this.#resolve = resolve;
this.#reject = reject;
const onResolve = (value: T | PromiseLike<T>): void => {
if (this.#isResolved || this.#isRejected || this.#isCancelled) {
return;
}
this.#isResolved = true;
this.#resolve?.(value);
};
const onReject = (reason?: any): void => {
if (this.#isResolved || this.#isRejected || this.#isCancelled) {
return;
}
this.#isRejected = true;
this.#reject?.(reason);
};
const onCancel = (cancelHandler: () => void): void => {
if (this.#isResolved || this.#isRejected || this.#isCancelled) {
return;
}
this.#cancelHandlers.push(cancelHandler);
};
Object.defineProperty(onCancel, 'isResolved', {
get: (): boolean => this.#isResolved,
});
Object.defineProperty(onCancel, 'isRejected', {
get: (): boolean => this.#isRejected,
});
Object.defineProperty(onCancel, 'isCancelled', {
get: (): boolean => this.#isCancelled,
});
return executor(onResolve, onReject, onCancel as OnCancel);
});
}
get [Symbol.toStringTag]() {
return "Cancellable Promise";
}
public then<TResult1 = T, TResult2 = never>(
onFulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | null,
onRejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null
): Promise<TResult1 | TResult2> {
return this.#promise.then(onFulfilled, onRejected);
}
public catch<TResult = never>(
onRejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null
): Promise<T | TResult> {
return this.#promise.catch(onRejected);
}
public finally(onFinally?: (() => void) | null): Promise<T> {
return this.#promise.finally(onFinally);
}
public cancel(): void {
if (this.#isResolved || this.#isRejected || this.#isCancelled) {
return;
}
this.#isCancelled = true;
if (this.#cancelHandlers.length) {
try {
for (const cancelHandler of this.#cancelHandlers) {
cancelHandler();
}
} catch (error) {
console.warn('Cancellation threw an error', error);
return;
}
}
this.#cancelHandlers.length = 0;
this.#reject?.(new CancelError('Request aborted'));
}
public get isCancelled(): boolean {
return this.#isCancelled;
}
}
/* generated using openapi-typescript-codegen -- do no edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
import type { ApiRequestOptions } from './ApiRequestOptions';
type Resolver<T> = (options: ApiRequestOptions) => Promise<T>;
type Headers = Record<string, string>;
export type OpenAPIConfig = {
BASE: string;
VERSION: string;
WITH_CREDENTIALS: boolean;
CREDENTIALS: 'include' | 'omit' | 'same-origin';
TOKEN?: string | Resolver<string> | undefined;
USERNAME?: string | Resolver<string> | undefined;
PASSWORD?: string | Resolver<string> | undefined;
HEADERS?: Headers | Resolver<Headers> | undefined;
ENCODE_PATH?: ((path: string) => string) | undefined;
};
export const OpenAPI: OpenAPIConfig = {
BASE: '/api/resource-service',
VERSION: '1.0.0',
WITH_CREDENTIALS: false,
CREDENTIALS: 'include',
TOKEN: undefined,
USERNAME: undefined,
PASSWORD: undefined,
HEADERS: undefined,
ENCODE_PATH: undefined,
};
/* generated using openapi-typescript-codegen -- do no edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
import axios from 'axios';
import type { AxiosError, AxiosRequestConfig, AxiosResponse, AxiosInstance } from 'axios';
import FormData from 'form-data';
import { ApiError } from './ApiError';
import type { ApiRequestOptions } from './ApiRequestOptions';
import type { ApiResult } from './ApiResult';
import { CancelablePromise } from './CancelablePromise';
import type { OnCancel } from './CancelablePromise';
import type { OpenAPIConfig } from './OpenAPI';
export const isDefined = <T>(value: T | null | undefined): value is Exclude<T, null | undefined> => {
return value !== undefined && value !== null;
};
export const isString = (value: any): value is string => {
return typeof value === 'string';
};
export const isStringWithValue = (value: any): value is string => {
return isString(value) && value !== '';
};
export const isBlob = (value: any): value is Blob => {
return (
typeof value === 'object' &&
typeof value.type === 'string' &&
typeof value.stream === 'function' &&
typeof value.arrayBuffer === 'function' &&
typeof value.constructor === 'function' &&
typeof value.constructor.name === 'string' &&
/^(Blob|File)$/.test(value.constructor.name) &&
/^(Blob|File)$/.test(value[Symbol.toStringTag])
);
};
export const isFormData = (value: any): value is FormData => {
return value instanceof FormData;
};
export const isSuccess = (status: number): boolean => {
return status >= 200 && status < 300;
};
export const base64 = (str: string): string => {
try {
return btoa(str);
} catch (err) {
// @ts-ignore
return Buffer.from(str).toString('base64');
}
};
export const getQueryString = (params: Record<string, any>): string => {
const qs: string[] = [];
const append = (key: string, value: any) => {
qs.push(`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`);
};
const process = (key: string, value: any) => {
if (isDefined(value)) {
if (Array.isArray(value)) {
value.forEach(v => {
process(key, v);
});
} else if (typeof value === 'object') {
Object.entries(value).forEach(([k, v]) => {
process(`${key}[${k}]`, v);
});
} else {
append(key, value);
}
}
};
Object.entries(params).forEach(([key, value]) => {
process(key, value);
});
if (qs.length > 0) {
return `?${qs.join('&')}`;
}
return '';
};
const getUrl = (config: OpenAPIConfig, options: ApiRequestOptions): string => {
const encoder = config.ENCODE_PATH || encodeURI;
const path = options.url
.replace('{api-version}', config.VERSION)
.replace(/{(.*?)}/g, (substring: string, group: string) => {
if (options.path?.hasOwnProperty(group)) {
return encoder(String(options.path[group]));
}
return substring;
});
const url = `${config.BASE}${path}`;
if (options.query) {
return `${url}${getQueryString(options.query)}`;
}
return url;
};
export const getFormData = (options: ApiRequestOptions): FormData | undefined => {
if (options.formData) {
const formData = new FormData();
const process = (key: string, value: any) => {
if (isString(value) || isBlob(value)) {
formData.append(key, value);
} else {
formData.append(key, JSON.stringify(value));
}
};
Object.entries(options.formData)
.filter(([_, value]) => isDefined(value))
.forEach(([key, value]) => {
if (Array.isArray(value)) {
value.forEach(v => process(key, v));
} else {
process(key, value);
}
});
return formData;
}
return undefined;
};
type Resolver<T> = (options: ApiRequestOptions) => Promise<T>;
export const resolve = async <T>(options: ApiRequestOptions, resolver?: T | Resolver<T>): Promise<T | undefined> => {
if (typeof resolver === 'function') {
return (resolver as Resolver<T>)(options);
}
return resolver;
};
export const getHeaders = async (config: OpenAPIConfig, options: ApiRequestOptions, formData?: FormData): Promise<Record<string, string>> => {
const token = await resolve(options, config.TOKEN);
const username = await resolve(options, config.USERNAME);
const password = await resolve(options, config.PASSWORD);
const additionalHeaders = await resolve(options, config.HEADERS);
const formHeaders = typeof formData?.getHeaders === 'function' && formData?.getHeaders() || {}
const headers = Object.entries({
Accept: 'application/json',
...additionalHeaders,
...options.headers,
...formHeaders,
})
.filter(([_, value]) => isDefined(value))
.reduce((headers, [key, value]) => ({
...headers,
[key]: String(value),
}), {} as Record<string, string>);
if (isStringWithValue(token)) {
headers['Authorization'] = `Bearer ${token}`;
}
if (isStringWithValue(username) && isStringWithValue(password)) {
const credentials = base64(`${username}:${password}`);
headers['Authorization'] = `Basic ${credentials}`;
}
if (options.body) {
if (options.mediaType) {
headers['Content-Type'] = options.mediaType;
} else if (isBlob(options.body)) {
headers['Content-Type'] = options.body.type || 'application/octet-stream';
} else if (isString(options.body)) {
headers['Content-Type'] = 'text/plain';
} else if (!isFormData(options.body)) {
headers['Content-Type'] = 'application/json';
}
}
return headers;
};
export const getRequestBody = (options: ApiRequestOptions): any => {
if (options.body) {
return options.body;
}
return undefined;
};
export const sendRequest = async <T>(
config: OpenAPIConfig,
options: ApiRequestOptions,
url: string,
body: any,
formData: FormData | undefined,
headers: Record<string, string>,
onCancel: OnCancel,
axiosClient: AxiosInstance
): Promise<AxiosResponse<T>> => {
const source = axios.CancelToken.source();
const requestConfig: AxiosRequestConfig = {
url,
headers,
data: body ?? formData,
method: options.method,
withCredentials: config.WITH_CREDENTIALS,
cancelToken: source.token,
};
onCancel(() => source.cancel('The user aborted a request.'));
try {
return await axiosClient.request(requestConfig);
} catch (error) {
const axiosError = error as AxiosError<T>;
if (axiosError.response) {
return axiosError.response;
}
throw error;
}
};
export const getResponseHeader = (response: AxiosResponse<any>, responseHeader?: string): string | undefined => {
if (responseHeader) {
const content = response.headers[responseHeader];
if (isString(content)) {
return content;
}
}
return undefined;
};
export const getResponseBody = (response: AxiosResponse<any>): any => {
if (response.status !== 204) {
return response.data;
}
return undefined;
};
export const catchErrorCodes = (options: ApiRequestOptions, result: ApiResult): void => {
const errors: Record<number, string> = {
400: 'Bad Request',
401: 'Unauthorized',
403: 'Forbidden',
404: 'Not Found',
500: 'Internal Server Error',
502: 'Bad Gateway',
503: 'Service Unavailable',
...options.errors,
}
const error = errors[result.status];
if (error) {
throw new ApiError(options, result, error);
}
if (!result.ok) {
const errorStatus = result.status ?? 'unknown';
const errorStatusText = result.statusText ?? 'unknown';
const errorBody = (() => {
try {
return JSON.stringify(result.body, null, 2);
} catch (e) {
return undefined;
}
})();
throw new ApiError(options, result,
`Generic Error: status: ${errorStatus}; status text: ${errorStatusText}; body: ${errorBody}`
);
}
};
/**
* Request method
* @param config The OpenAPI configuration object
* @param options The request options from the service
* @param axiosClient The axios client instance to use
* @returns CancelablePromise<T>
* @throws ApiError
*/
export const request = <T>(config: OpenAPIConfig, options: ApiRequestOptions, axiosClient: AxiosInstance = axios): CancelablePromise<T> => {
return new CancelablePromise(async (resolve, reject, onCancel) => {
try {
const url = getUrl(config, options);
const formData = getFormData(options);
const body = getRequestBody(options);
const headers = await getHeaders(config, options, formData);
if (!onCancel.isCancelled) {
const response = await sendRequest<T>(config, options, url, body, formData, headers, onCancel, axiosClient);
const responseBody = getResponseBody(response);
const responseHeader = getResponseHeader(response, options.responseHeader);
const result: ApiResult = {
url,
ok: isSuccess(response.status),
status: response.status,
statusText: response.statusText,
body: responseHeader ?? responseBody,
};
catchErrorCodes(options, result);
resolve(result.body);
}
} catch (error) {
reject(error);
}
});
};
/* generated using openapi-typescript-codegen -- do no edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
export { ApiError } from './core/ApiError';
export { CancelablePromise, CancelError } from './core/CancelablePromise';
export { OpenAPI } from './core/OpenAPI';
export type { OpenAPIConfig } from './core/OpenAPI';
export type { ErrorDetail } from './models/ErrorDetail';
export type { HTTPValidationError } from './models/HTTPValidationError';
export type { ResourceIn } from './models/ResourceIn';
export type { ResourceOut } from './models/ResourceOut';
export type { ResourceVersionIn } from './models/ResourceVersionIn';
export type { ResourceVersionOut } from './models/ResourceVersionOut';
export { Status } from './models/Status';
export type { ValidationError } from './models/ValidationError';
export { ResourceService } from './services/ResourceService';
export { ResourceVersionService } from './services/ResourceVersionService';
/* generated using openapi-typescript-codegen -- do no edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
/**
* Schema for a error due to a rejected request.
*/
export type ErrorDetail = {
/**
* Detail about the occurred error
*/
detail: string;
};
/* generated using openapi-typescript-codegen -- do no edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
import type { ValidationError } from './ValidationError';
export type HTTPValidationError = {
detail?: Array<ValidationError>;
};
/* generated using openapi-typescript-codegen -- do no edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
export type ResourceIn = {
/**
* Short tag describing the version of the resource
*/
release: string;
/**
* Short Name for the resource
*/
name: string;
/**
* Short description for this resource
*/
description: string;
/**
* A link or similar where the resource originates from
*/
source: string;
};
/* generated using openapi-typescript-codegen -- do no edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
import type { ResourceVersionOut } from './ResourceVersionOut';
export type ResourceOut = {
/**
* Short Name for the resource
*/
name: string;
/**
* Short description for this resource
*/
description: string;
/**
* A link or similar where the resource originates from
*/
source: string;
/**
* ID of the resource
*/
resource_id: string;
/**
* ID of the maintainer
*/
maintainer_id: string;
/**
* Versions of the resource
*/
versions: Array<ResourceVersionOut>;
};
/* generated using openapi-typescript-codegen -- do no edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
export type ResourceVersionIn = {
/**
* Short tag describing the version of the resource
*/
release: string;
};
/* generated using openapi-typescript-codegen -- do no edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
import type { Status } from './Status';
export type ResourceVersionOut = {
/**
* Short tag describing the version of the resource
*/
release: string;
/**
* Status of the resource version
*/
status: Status;
/**
* ID of the resource version
*/
resource_version_id: string;
/**
* ID of the resource
*/
resource_id: string;
/**
* Timestamp when the version was created as UNIX timestamp
*/
created_at: number;
/**
* Path to the resource on the cluster if the resource is synchronized
*/
readonly cluster_path: (string | null);
/**
* Path to the resource in the S3 Bucket. Not publicly available.
*/
readonly s3_path: string;
};
/* generated using openapi-typescript-codegen -- do no edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
/**
* Enumeration for the possible status of a resource version.
*/
export enum Status {
RESOURCE_REQUESTED = 'RESOURCE_REQUESTED',
SYNC_REQUESTED = 'SYNC_REQUESTED',
SYNCHRONIZING = 'SYNCHRONIZING',
SYNCHRONIZED = 'SYNCHRONIZED',
LATEST = 'LATEST',
DENIED = 'DENIED',
CLUSTER_DELETED = 'CLUSTER_DELETED',
S3_DELETED = 'S3_DELETED',
}
/* generated using openapi-typescript-codegen -- do no edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
export type ValidationError = {
loc: Array<(string | number)>;
msg: string;
type: string;
};
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment