- setQuery(e.target.value)}
- >
-
+
-
-
-
-
- {workflows === null ? (
- | - # - | -- Run ID - | -- Run Status - | -
|---|
-
-
- ) : workflows.length === 0 ? (
- - No workflows found -
- ) : ( - - )} -
+
);
};
diff --git a/src/components/RunWorkflow.js b/src/components/RunWorkflow.js
index 069553f..2087534 100644
--- a/src/components/RunWorkflow.js
+++ b/src/components/RunWorkflow.js
@@ -1,37 +1,8 @@
-import React, { useEffect, useState } from 'react';
-// import validator from "validator";
-import yaml from 'js-yaml';
+import React, { useEffect} from 'react';
import { useNavigate } from 'react-router-dom';
-import axios from 'axios';
-import CodeEditor from '@uiw/react-textarea-code-editor';
-import Files from 'react-files';
-import Marquee from 'react-fast-marquee';
-import { host_uri_wes } from '../config';
-import { confirmAlert } from 'react-confirm-alert';
-import { Document, Page, pdfjs } from 'react-pdf';
-import 'react-pdf/dist/Page/AnnotationLayer.css';
-import 'react-pdf/dist/Page/TextLayer.css';
+import ECCClientGa4ghWesCreateRun from '@elixir-cloud/wes/dist/react/create-run';
const RunWorkflow = ({ isLoggedIn, showToast }) => {
- // Pdfjs worker
- pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
-
- const [workflow_type, set_workflow_type] = useState('CWL');
- const [workflow_version, set_workflow_version] = useState('v1.0');
- const [workflow_url, set_workflow_url] = useState('');
- const [workflow_url_error, set_workflow_url_error] = useState('');
- const [workflow_params, set_workflow_params] = useState('');
- const [workflow_params_error, set_workflow_params_error] = useState('');
- const [workflow_attachments, set_workflow_attachments] = useState([]);
- const [workflow_attachments_error, set_workflow_attachments_error] =
- useState('');
- const [showAdvance, setShowAdvance] = useState(false);
- const [workflow_engine_params, set_workflow_engine_params] = useState('');
- const [workflow_engine_params_error, set_workflow_engine_params_error] =
- useState('');
- const [tags, setTags] = useState([]);
- const [tags_error, set_tags_error] = useState([]);
- const [loading, setLoading] = useState(false);
const navigate = useNavigate();
useEffect(() => {
@@ -40,768 +11,10 @@ const RunWorkflow = ({ isLoggedIn, showToast }) => {
}
}, [isLoggedIn]);
- const handleTypeChange = (e) => {
- set_workflow_type(e.target.value);
- if (e.target.value === 'CWL') {
- set_workflow_version('v1.0');
- } else if (e.target.value === 'SMK') {
- set_workflow_version('6.10.0');
- } else {
- set_workflow_version('DSL1');
- }
- };
-
- const renderTags = () => {
- return (
- <>
- {tags.map((tag, i) => {
- return (
- <>
-
- handleChangeTag(true, i, e)}
- className="bg-gray-100 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 mr-3"
- placeholder="Please enter a key."
- />
- handleChangeTag(false, i, e)}
- className="bg-gray-100 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
- placeholder="Please enter a value."
- />
- handleRemoveTag(i)}
- >
-
-
-
- {tags_error[i] !== '' ? (
- {tags_error[i]}
- ) : (
- <>
- )}
-
- );
- })}
-
- );
- };
-
- const handleChangeTag = (isKey, i, e) => {
- let tempTags = tags;
- if (isKey) {
- tempTags[i].key = e.target.value;
- } else {
- tempTags[i].value = e.target.value;
- }
- tempTags = [...tempTags];
- setTags(tempTags);
- };
-
- const handleAddTag = () => {
- let tempTags = tags;
- tempTags = [...tempTags, { key: '', value: '' }];
- setTags(tempTags);
- set_tags_error([...tags_error, '']);
- };
-
- const handleRemoveTag = (i) => {
- let tempTags = tags;
- tempTags.splice(i, 1);
- tempTags = [...tempTags];
- setTags(tempTags);
- tempTags = tags_error;
- tempTags.splice(i, 1);
- tempTags = [...tempTags];
- set_tags_error(tempTags);
- };
-
- const handleAttachmentChange = (e) => {
- const tempAttachment = [...workflow_attachments, ...e];
- set_workflow_attachments(tempAttachment);
- };
- // const handleSubmit = async (e) => {
- // e.preventDefault();
- // const formData = new FormData();
- // formData.append("workflow_url", "https://github.com/ga4gh/workflow-execution-service-schemas/blob/c3b19854240c4fcbaf3483e22b19db0a918a7ee5/openapi/paths/runs.yaml#L89");
- // formData.append("workflow_params", `{"text":"hello world"}`);
- // formData.append("workflow_type_version", "<=6.10.0");
- // formData.append("workflow_type", "SMK");
- // const res = await axios.post("https://wes.rahtiapp.fi/ga4gh/wes/v1/runs", formData, {
- // headers: {
- // "content-type": "multipart/form-data",
- // Accept: "application/json",
- // "Access-Control-Allow-Origin": "*",
- // "Access-Control-Allow-Headers": "*",
- // },
- // });
- // console.log(res);
- // };
-
- const handleSubmit = async (e) => {
- e.preventDefault();
- set_workflow_url_error('');
- set_workflow_params_error('');
- set_workflow_engine_params_error('');
- set_workflow_attachments_error('');
-
- const formData = new FormData();
- // console.log(workflow_type);
- formData.append('workflow_type', workflow_type);
- // console.log(workflow_version);
- if (workflow_type === 'NFL') {
- formData.append('workflow_type_version', '21.04.0');
- } else {
- formData.append('workflow_type_version', workflow_version);
- }
-
- // workflow_url
- if (workflow_url === '') {
- set_workflow_url_error('Workflow URL is required!');
- return;
- }
- // else if (!validator.isURL(workflow_url)) {
- // set_workflow_url_error("Workflow URL is not a valid URL!");
- // return;
- // }
- // console.log(workflow_url);
- formData.append('workflow_url', workflow_url);
- // workflow_url end
-
- // workflow_params
- if (workflow_params === '') {
- set_workflow_params_error('Workflow parameters is required!');
- return;
- }
- let workflow_params_json = '';
- try {
- // console.log(workflow_params);
- workflow_params_json = await yaml.load(workflow_params);
- // console.log(workflow_params_json);
- } catch (e) {
- set_workflow_params_error('Workflow parameters is not a valid YAML!');
- return;
- }
- workflow_params_json = JSON.stringify(workflow_params_json);
- // console.log(workflow_params_json);
- formData.append('workflow_params', workflow_params_json);
- // workflow_params end
-
- // workflow_attachment
- if (workflow_attachments.length > 20) {
- set_workflow_attachments_error(
- 'Workflow attachments must be less that 20.'
- );
- return;
- }
- for (const item of workflow_attachments) {
- if (item.size / 1000 > 500) {
- set_workflow_attachments_error(
- 'Workflow attachments must be less that 500 KB.'
- );
- return;
- } else {
- // console.log(item);
- formData.append(`workflow_attachment`, item);
- }
- }
- // workflow_attachment end
-
- // workflow_engine_params
- let workflow_engine_params_json = '';
- if (workflow_engine_params !== '') {
- try {
- workflow_engine_params_json = await yaml.load(workflow_engine_params);
- workflow_engine_params_json = JSON.stringify(
- workflow_engine_params_json
- );
- // console.log("workflow_engine_params_json", workflow_engine_params_json);
- formData.append(
- 'workflow_engine_parameters',
- workflow_engine_params_json
- );
- } catch (e) {
- setShowAdvance(true);
- set_workflow_engine_params_error(
- 'Workflow engine parameters is not a valid YAML!'
- );
- return;
- }
- }
- // workflow_engine_params end
-
- // workflow_tag
- let tags_json = {};
- for (let i = 0; i < tags.length; i++) {
- if (tags[i].key === '') {
- // eslint-disable-next-line no-var
- var temp_tags_error = Array.from({ length: tags.length }, (v, k) => '');
- temp_tags_error[i] = 'Tag key is required!';
- setShowAdvance(true);
- set_tags_error(temp_tags_error);
- return;
- }
- if (tags[i].value === '') {
- temp_tags_error = Array.from({ length: tags.length }, (v, k) => '');
- temp_tags_error[i] = 'Tag value is required!';
- setShowAdvance(true);
- set_tags_error(temp_tags_error);
- return;
- }
- temp_tags_error = Array.from({ length: tags.length }, (v, k) => '');
- set_tags_error(temp_tags_error);
- tags_json = Object.assign(
- ...tags.map((tag) => ({ [tag.key]: tag.value }))
- );
- }
- tags_json = JSON.stringify(tags_json);
- if (tags.length > 0) {
- // console.log("tags", tags_json);
- formData.append('tags', tags_json);
- }
- // workflow_tag end
-
- try {
- // var token = localStorage.getItem("params");
- // token = JSON.parse(token);
- // token = token.access_token;
- // for (var pair of formData.entries()) {
- // console.log(pair[0] + ", " + pair[1]);
- // }
- const res = await axios.post(`${host_uri_wes}/runs`, formData, {
- headers: {
- 'content-type': 'multipart/form-data',
- Accept: 'application/json',
- 'Access-Control-Allow-Origin': '*',
- 'Access-Control-Allow-Headers': '*'
- // Authorization: `Bearer ${token}`,
- }
- });
- // showToast("success", "Workflow Added!");
- confirmAlert({
- customUI: ({ onClose }) => {
- return (
-
-
- Workflow run added!
-
- );
- }
- });
- } catch (e) {
- // console.log(e);
- showToast('error', 'Server Error!');
- }
- };
-
- const handleFileRemove = (i) => {
- const tempAttachment = workflow_attachments;
- tempAttachment.splice(i, 1);
- set_workflow_attachments([...tempAttachment]);
- };
-
- const handleFileRemoveAll = () => {
- set_workflow_attachments([]);
- };
-
- const renderFiles = () => {
- if (workflow_attachments.length <= 0) {
- return;
- }
- return (
-
- Workflow run added!
- Run Id:{' '}
-
- {res.data.run_id}
-
- Please note the runid.
-
-
-
-
-
-
- );
- };
-
- if (isLoggedIn === 'loading') {
- return (
- -
- {workflow_attachments.map((file, i) => (
-
-
- - {(() => { - if (file.preview.type === 'image') { - return-
; - } else if (file.type === 'application/pdf') { - const fileURL = window.URL.createObjectURL(file); - return ( -
- - ); - } else { - return ( - - ); - } - })()} -- - --{file.sizeReadable}-handleFileRemove(i)} // eslint-disable-line - > - --
- ))}
-
handleFileRemoveAll()} // eslint-disable-line
- >
-
- Clear All
-
-
-
- );
- }
return (
-
-
-
-
- Loading...
-
-
-