|
- import { h, Component } from 'preact';
- import makeArvadosRequest from 'make-arvados-request';
- import WBTable from 'wb-table';
- import WBPagination from 'wb-pagination';
- import WBNameAndUuid from 'wb-name-and-uuid';
- import wbFetchObjects from 'wb-fetch-objects';
- import wbFormatDate from 'wb-format-date';
- import urlForObject from 'url-for-object';
- import arvadosObjectName from 'arvados-object-name';
-
- class WBWorkflowListing extends Component {
-
- constructor(...args) {
- super(...args);
- this.state.rows = [];
- this.state.numPages = 0;
- }
-
- componentDidMount() {
- this.fetchItems();
- }
-
- prepareRows(items, ownerLookup) {
- const { renderRenameLink, renderDeleteButton,
- renderSelectionCell, renderSharingButton,
- renderEditDescription } = this.props;
-
- return items.map(item => [
- renderSelectionCell(item),
- (
- <div>
- <div>
- <a href={ urlForObject(item) }>
- { arvadosObjectName(item) }
- </a> { renderRenameLink(item, () => this.fetchItems()) }
- </div>
- <div>{ item.uuid }</div>
- </div>
- ),
- (<div>
- { item.description } { renderEditDescription(item, () => this.fetchItems()) }
- </div>),
- ( <WBNameAndUuid uuid={ item.owner_uuid } lookup={ ownerLookup } /> ),
- wbFormatDate(item.created_at),
- (<div>
- <a class="btn btn-outline-success mx-1 my-1" title="Launch"
- href={ urlForObject(item, 'launch') }><i class="fas fa-running"></i></a>
- <button class="btn btn-outline-primary mx-1 my-1" title="View"><i class="far fa-eye"></i></button>
- { renderDeleteButton(item, () => this.fetchItems()) }
- { renderSharingButton(item) }
- </div>)
- ]);
- }
-
- fetchItems() {
- const { arvHost, arvToken } = this.props.app.state;
- const { page, itemsPerPage, ownerUuid, textSearch } = this.props;
- const filters = [];
- if (ownerUuid)
- filters.push([ 'owner_uuid', '=', ownerUuid ]);
- if (textSearch)
- filters.push([ 'any', 'ilike', '%' + textSearch + '%' ]);
- const select = ['uuid', 'name', 'description', 'owner_uuid', 'created_at'];
- let prom = makeArvadosRequest(arvHost, arvToken,
- '/arvados/v1/workflows?filters=' + encodeURIComponent(JSON.stringify(filters)) +
- '&select=' + encodeURIComponent(JSON.stringify(select)) +
- '&limit=' + encodeURIComponent(itemsPerPage) +
- '&offset=' + encodeURIComponent(itemsPerPage * page));
- let workflowResp;
- prom = prom.then(xhr => (workflowResp = xhr.response));
- prom = prom.then(() => wbFetchObjects(arvHost, arvToken,
- workflowResp.items.map(it => it.owner_uuid)));
- let ownerLookup;
- prom = prom.then(lookup => (ownerLookup = lookup));
- prom = prom.then(() =>
- this.setState({
- 'numPages': Math.ceil(workflowResp['items_available'] / workflowResp['limit']),
- 'rows': this.prepareRows(workflowResp.items, ownerLookup)
- }));
- }
-
- componentWillReceiveProps(nextProps, nextState) {
- this.props = nextProps;
- this.fetchItems();
- }
-
- render({ app, ownerUuid, page, getPageUrl }, { rows, numPages }) {
- return (
- <div>
- <WBTable columns={ [ '', 'Name', 'Description', 'Owner', 'Created At', 'Actions' ] }
- headerClasses={ [ 'w-1' ] }
- rows={ rows } />
-
- <WBPagination numPages={ numPages }
- activePage={ page }
- getPageUrl={ getPageUrl } />
- </div>
- );
- }
- }
-
- WBWorkflowListing.defaultProps = {
- 'itemsPerPage': 100,
- 'ownerUuid': null,
- 'renderSharingButton': () => null,
- 'renderEditDescription': () => null
- };
-
- export default WBWorkflowListing;
|