|
- import { h, Component, createRef } from 'preact';
- import WBNavbarCommon from 'wb-navbar-common';
- import WBArvadosCrumbs from 'wb-arvados-crumbs';
- import WBBrowseDialog from 'wb-browse-dialog';
- import WBTable from 'wb-table';
- import makeArvadosRequest from 'make-arvados-request';
- import linkState from 'linkstate';
-
- function parseDefinition(text) {
- let definition;
- try {
- definition = JSON.parse(text);
- } catch (_) {
- definition = jsyaml.load(text);
- }
- return definition;
- }
-
- class WBLaunchWorkflowPage extends Component {
- constructor(...args) {
- super(...args);
- this.browseDialogRef = createRef();
- this.state.inputs = {};
- }
-
- componentDidMount() {
- let { app, workflowUuid } = this.props;
- let { arvHost, arvToken } = app.state;
-
- let prom = makeArvadosRequest(arvHost, arvToken,
- '/arvados/v1/workflows/' + workflowUuid);
- prom = prom.then(xhr => this.setState({
- 'workflow': xhr.response,
- 'workflowDefinition': parseDefinition(xhr.response.definition),
- 'defaultProcessName': xhr.response.name + ' ' + (new Date().toISOString()),
- 'defaultProcessDescription': xhr.response.description
- }));
- }
-
- renderInput(inputSpec) {
- const isFile = (inputSpec.type === 'File' || inputSpec.type === 'File[]' ||
- (inputSpec.type.type === 'array' && inputSpec.type.items === 'File'));
-
- const isDirectory = (inputSpec.type === 'Directory' || inputSpec.type === 'Directory[]' ||
- (inputSpec.type.type === 'array' && inputSpec.type.items === 'Directory'));
-
- const isArray = (inputSpec.type === 'File[]' || inputSpec.type === 'Directory[]' ||
- inputSpec.type.type === 'array');
-
- if (!isFile && !isDirectory)
- return (
- <input class="form-control w-100" type="text" placeholder={ inputSpec.doc }
- value={ this.state.inputs[inputSpec.id] }
- onchange={ e => (this.state.inputs[inputSpec.id] = e.target.value) }></input>
- );
-
- const button = (
- <button class="btn btn-outline-primary"
- onclick={ e => {
- e.preventDefault();
- this.browseDialogRef.current.show(isFile ? 'file' : 'directory', isArray,
- v => {
- this.state.inputs[inputSpec.id] = v.toString();
- this.setState({});
- });
- } }>
- Browse...
- </button>
- );
-
- return (
- <div class="input-group">
- <input class="form-control w-100" type="text" placeholder={ inputSpec.doc }
- value={ this.state.inputs[inputSpec.id] }
- onchange={ e => (this.state.inputs[inputSpec.id] = e.target.value) }></input>
- <div class="input-group-append">
- { button }
- </div>
- </div>
- );
- }
-
- render({ app, workflowUuid },
- { workflow, workflowDefinition, projectUuid, processName, processDescription,
- defaultProcessName, defaultProcessDescription }) {
-
- return (
- <div>
- <WBNavbarCommon app={ app } />
-
- <WBBrowseDialog app={ app } ref={ this.browseDialogRef } />
-
- { workflow ?
- (<form class="container-fluid">
- <h1>Launch Workflow</h1>
-
- <div class="form-group">
- <label>Workflow</label>
- <WBArvadosCrumbs app={ app } uuid={ workflowUuid } />
- </div>
-
- <div class="form-group">
- <label for="projectUuid">Project UUID</label>
-
- <div>
- { projectUuid ? (
- <WBArvadosCrumbs app={ app } uuid={ projectUuid } />
- ) : null }
-
- <div class="input-group mb-3">
- <input type="text" class="form-control" id="projectUuid"
- placeholder="Enter Project UUID" aria-label="Project UUID"
- aria-describedby="button-addon2" value={ projectUuid }
- onChange={ linkState(this, 'projectUuid') } />
- <div class="input-group-append">
- <button class="btn btn-primary" type="button"
- id="button-addon2" onclick={ e => { e.preventDefault();
- this.browseDialogRef.current.show('owner', false,
- projectUuid => this.setState({ projectUuid })); } }>Browse</button>
- </div>
- </div>
- </div>
- </div>
-
- <div class="form-group">
- <label for="processName">Process Name</label>
- <input type="text" class="form-control" id="processName"
- placeholder={ defaultProcessName } value={ processName }
- onChange={ linkState(this, 'processName') }/>
- </div>
-
- <div class="form-group">
- <label for="processDescription">Process Description</label>
- <input type="text" class="form-control" id="processDescription"
- placeholder={ defaultProcessDescription } value={ processDescription }
- onChange={ linkState(this, 'processDescription') } />
- </div>
-
- <div class="form-group">
- <label for="inputs">Inputs</label>
- <WBTable columns={ [ 'Name', 'Value'] }
- rows={ workflowDefinition.$graph.find(a => (a.id === '#main')).inputs.map(it => [
- it.label || it.id,
- this.renderInput(it)
- ]) } />
- </div>
- </form>) : <div>Loading...</div> }
- </div>
- );
- }
- }
-
- export default WBLaunchWorkflowPage;
|