IF YOU WOULD LIKE TO GET AN ACCOUNT, please write an email to s dot adaszewski at gmail dot com. User accounts are meant only to report issues and/or generate pull requests. This is a purpose-specific Git hosting for ADARED projects. Thank you for your understanding!
Просмотр исходного кода

Filtering by container_request state.

pull/1/head
Stanislaw Adaszewski 4 лет назад
Родитель
Сommit
5e94a25816
5 измененных файлов: 164 добавлений и 5 удалений
  1. +97
    -0
      frontend/src/js/component/wb-process-listing.js
  2. +3
    -2
      frontend/src/js/page/wb-app.js
  3. +33
    -2
      frontend/src/js/page/wb-browse.js
  4. +30
    -0
      frontend/src/js/widget/wb-checkboxes.js
  5. +1
    -1
      frontend/src/js/widget/wb-tabs.js

+ 97
- 0
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 => [
(<div>
<div>
<a href="#"
onclick={ e => { e.preventDefault(); route('/process/' + item['uuid']) }}>{ item['name'] }</a>
</div>
<div>{ item['uuid'] }</div>
</div>),
item['state'],
item['owner_uuid'],
item['created_at'].replace('T', ' ').substr(0, item['created_at'].length - 11) + '',
item['output_uuid'],
(<div>
<button class="btn btn-outline-danger"><i class="fas fa-trash"></i></button>
</div>)
]);
}
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 (
<div>
<WBCheckboxes items={ requestStates } checked={ reqStateMask }
cssClass="float-left mx-2 my-2" title="Request State: "
onChange={ () => this.fetchItems() } />
<WBCheckboxes items={ containerStates } checked={ contStateMask }
cssClass="float-left mx-2 my-2" title="Container State: "
onChange={ () => this.fetchItems() } />
<WBTable columns={ [ 'Name', 'Status', 'Owner', 'Created At (UTC)', 'Output', 'Actions' ] }
rows={ rows } />
<WBPagination numPages={ numPages }
activePage={ activePage }
onPageChanged={ i => onPageChanged(i) } />
</div>
);
}
}
WBProcessListing.defaultProps = {
'itemsPerPage': 100,
'ownerUuid': null
};
export default WBProcessListing;

+ 3
- 2
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 {
<WBSignIn path="/sign-in" appState={ this.appState } />
<WBBrowse path="/browse/:ownerUuid?/:activePage?"
<WBBrowse path="/browse/:ownerUuid?/:activePage?/:objTypeTab?/:collectionPage?/:processPage?/:workflowPage?"
appCallbacks={ this.appCallbacks }
appState={ this.appState } />
</Router>


+ 33
- 2
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 (
<div>
<WBNavbar items={ [
@@ -30,7 +43,25 @@ class WBBrowse extends Component {
activePage={ Number(activePage || 0) }
onPageChanged={ i => route('/browse/' + (ownerUuid || '') + '/' + i)} />
<WBTabs tabs={ [ { 'name': 'Collections', 'isActive': true }, 'Processes', 'Workflows' ] } />
<WBTabs tabs={ [
{ 'id': 'collection', 'name': 'Collections', 'isActive': (!objTypeTab || objTypeTab === 'collection') },
{ 'id': 'process', 'name': 'Processes', 'isActive': (objTypeTab === 'process') },
{ 'id': 'workflow', 'name': 'Workflows', 'isActive': (objTypeTab === 'workflow') } ] }
onTabChanged={ tab => this.route({ 'objTypeTab': tab['id'] }) } />
{
(!objTypeTab || objTypeTab === 'collection') ? (
null
) : (objTypeTab === 'process' ? (
<WBProcessListing appState={ appState }
ownerUuid={ ownerUuid }
itemsPerPage="20"
activePage={ Number(processPage || 0) }
onPageChanged={ i => this.route({ 'processPage': i }) } />
) : (objTypeTab === 'workflow' ? (
null
) : null))
}
</div>
);
}


+ 30
- 0
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 (
<div class={ 'btn-group-toggle' + (cssClass ? ' ' + cssClass : '') } data-toggle="buttons">
{ title }
{
items.map((name, idx) => (
<label class={ 'btn btn-outline-primary' + (checked[idx] ? ' active' : '') }
onclick={ e => { e.preventDefault();
checked[idx] = !checked[idx];
this.setState({});
onChange(); } }>
<input type="checkbox" checked={ checked[idx] ? 'checked' : null }
autocomplete="off" /> { name }
</label>
))
}
</div>
);
}
}
WBCheckboxes.defaultProps = {
'checked': [],
'onChange': () => {}
}
export default WBCheckboxes;

+ 1
- 1
frontend/src/js/widget/wb-tabs.js Просмотреть файл

@@ -21,7 +21,7 @@ class WBTabs extends Component {
cls = cls.join(' ');
return (
<li class="nav-item">
<a class={ cls } href="#" onclick={ () => onTabChanged(idx) }>{ name }</a>
<a class={ cls } href="#" onclick={ e => { e.preventDefault(); onTabChanged(t); } }>{ name }</a>
</li>
);
}) }


Загрузка…
Отмена
Сохранить