diff --git a/frontend/src/js/component/wb-process-listing.js b/frontend/src/js/component/wb-process-listing.js
new file mode 100644
index 0000000..2d1021c
--- /dev/null
+++ b/frontend/src/js/component/wb-process-listing.js
@@ -0,0 +1,97 @@
+import { h, Component } from 'preact';
+import { route } from 'preact-router';
+import makeArvadosRequest from 'make-arvados-request';
+import WBTable from 'wb-table';
+import WBPagination from 'wb-pagination';
+import WBCheckboxes from 'wb-checkboxes';
+
+class WBProcessListing extends Component {
+
+ constructor(...args) {
+ super(...args);
+ this.state.rows = [];
+ this.state.numPages = 0;
+ this.state.requestStates = [ 'Uncommitted', 'Committed', 'Final' ];
+ this.state.containerStates = [ 'Queued', 'Locked', 'Running', 'Cancelled', 'Complete' ];
+ this.state.reqStateMask = [ true, true, true ];
+ this.state.contStateMask = [ true, true, true, true, true ];
+ }
+
+ componentDidMount() {
+ this.fetchItems();
+ }
+
+ prepareRows(items) {
+ return items.map(item => [
+ (
),
+ item['state'],
+ item['owner_uuid'],
+ item['created_at'].replace('T', ' ').substr(0, item['created_at'].length - 11) + '',
+ item['output_uuid'],
+ (
+
+
)
+ ]);
+ }
+
+ fetchItems() {
+ let { arvHost, arvToken } = this.props.appState;
+ let i = this.props.activePage;
+ let filters = [
+ [ 'state', 'in', this.state.requestStates.filter((_, idx) => this.state.reqStateMask[idx]) ]
+ ];
+ if (this.props.ownerUuid)
+ filters.push([ 'owner_uuid', '=', this.props.ownerUuid ]);
+ let prom = makeArvadosRequest(arvHost, arvToken,
+ '/arvados/v1/container_requests?filters=' + encodeURIComponent(JSON.stringify(filters)) +
+ '&limit=' + encodeURIComponent(this.props.itemsPerPage) +
+ '&offset=' + encodeURIComponent(this.props.itemsPerPage * i));
+ prom = prom.then(xhr =>
+ this.setState({
+ 'numPages': Math.ceil(xhr.response['items_available'] / xhr.response['limit']),
+ 'rows': this.prepareRows(xhr.response['items'])
+ }));
+ }
+
+ componentWillReceiveProps(nextProps, nextState) {
+ // this.setState({ 'rows': [] }); // .rows = [];
+ this.props = nextProps;
+ this.fetchItems();
+ }
+
+ render({ appState, ownerUuid, activePage, onPageChanged },
+ { rows, numPages, requestStates, containerStates,
+ reqStateMask, contStateMask }) {
+
+ return (
+
+ this.fetchItems() } />
+ this.fetchItems() } />
+
+
+
+ onPageChanged(i) } />
+
+ );
+ }
+}
+
+WBProcessListing.defaultProps = {
+ 'itemsPerPage': 100,
+ 'ownerUuid': null
+};
+
+export default WBProcessListing;
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index 85c1138..6ebb0b6 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -9,7 +9,8 @@ class WBApp extends Component {
super(...args);
this.state.arvHost = window.localStorage['arvHost'];
this.state.arvToken = window.localStorage['arvToken'];
- this.state.currentUser = JSON.parse(window.localStorage['currentUser']);
+ if ('currentUser' in window.localStorage)
+ this.state.currentUser = JSON.parse(window.localStorage['currentUser']);
this.appCallbacks = {
'navbarItemClicked': item => this.navbarItemClicked(item)
};
@@ -43,7 +44,7 @@ class WBApp extends Component {
-
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index 9d010b7..6e78c35 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -5,9 +5,22 @@ import WBProjectListing from 'wb-project-listing';
import WBInlineSearch from 'wb-inline-search';
import WBProjectCrumbs from 'wb-project-crumbs';
import WBTabs from 'wb-tabs';
+import WBProcessListing from 'wb-process-listing';
class WBBrowse extends Component {
- render({ ownerUuid, activePage, appCallbacks, appState }) {
+ route(params) {
+ route('/browse/' +
+ ('ownerUuid' in params ? params.ownerUuid : (this.props.ownerUuid || '')) + '/' +
+ ('activePage' in params ? params.activePage : (this.props.activePage || '')) + '/' +
+ ('objTypeTab' in params ? params.objTypeTab : (this.props.objTypeTab || '')) + '/' +
+ ('collectionPage' in params ? params.collectionPage : (this.props.collectionPage || '')) + '/' +
+ ('processPage' in params ? params.processPage : (this.props.processPage || '')) + '/' +
+ ('workflowPage' in params ? params.workflowPage : (this.props.workflowPage || '')));
+ }
+
+ render({ ownerUuid, activePage, appCallbacks, appState,
+ objTypeTab, collectionPage, processPage, workflowPage }) {
+
return (
route('/browse/' + (ownerUuid || '') + '/' + i)} />
-
+ this.route({ 'objTypeTab': tab['id'] }) } />
+
+ {
+ (!objTypeTab || objTypeTab === 'collection') ? (
+ null
+ ) : (objTypeTab === 'process' ? (
+ this.route({ 'processPage': i }) } />
+ ) : (objTypeTab === 'workflow' ? (
+ null
+ ) : null))
+ }
);
}
diff --git a/frontend/src/js/widget/wb-checkboxes.js b/frontend/src/js/widget/wb-checkboxes.js
new file mode 100644
index 0000000..48792ab
--- /dev/null
+++ b/frontend/src/js/widget/wb-checkboxes.js
@@ -0,0 +1,30 @@
+import { h, Component } from 'preact';
+
+class WBCheckboxes extends Component {
+ render({ items, checked, onChange, cssClass, title }) {
+ return (
+
+ { title }
+ {
+ items.map((name, idx) => (
+
+ ))
+ }
+
+ );
+ }
+}
+
+WBCheckboxes.defaultProps = {
+ 'checked': [],
+ 'onChange': () => {}
+}
+
+export default WBCheckboxes;
diff --git a/frontend/src/js/widget/wb-tabs.js b/frontend/src/js/widget/wb-tabs.js
index 140b6b7..4427df6 100644
--- a/frontend/src/js/widget/wb-tabs.js
+++ b/frontend/src/js/widget/wb-tabs.js
@@ -21,7 +21,7 @@ class WBTabs extends Component {
cls = cls.join(' ');
return (
- onTabChanged(idx) }>{ name }
+ { e.preventDefault(); onTabChanged(t); } }>{ name }
);
}) }