mirror of
https://github.com/ansible/awx.git
synced 2024-10-31 15:21:13 +03:00
job list skeleton
This commit is contained in:
parent
cb50cdce0d
commit
d8452e1259
@ -7,6 +7,7 @@ import Organizations from './models/Organizations';
|
||||
import Root from './models/Root';
|
||||
import Teams from './models/Teams';
|
||||
import UnifiedJobTemplates from './models/UnifiedJobTemplates';
|
||||
import UnifiedJobs from './models/UnifiedJobs';
|
||||
import Users from './models/Users';
|
||||
import WorkflowJobTemplates from './models/WorkflowJobTemplates';
|
||||
|
||||
@ -19,6 +20,7 @@ const OrganizationsAPI = new Organizations();
|
||||
const RootAPI = new Root();
|
||||
const TeamsAPI = new Teams();
|
||||
const UnifiedJobTemplatesAPI = new UnifiedJobTemplates();
|
||||
const UnifiedJobsAPI = new UnifiedJobs();
|
||||
const UsersAPI = new Users();
|
||||
const WorkflowJobTemplatesAPI = new WorkflowJobTemplates();
|
||||
|
||||
@ -32,6 +34,7 @@ export {
|
||||
RootAPI,
|
||||
TeamsAPI,
|
||||
UnifiedJobTemplatesAPI,
|
||||
UnifiedJobsAPI,
|
||||
UsersAPI,
|
||||
WorkflowJobTemplatesAPI
|
||||
};
|
||||
|
10
src/api/models/UnifiedJobs.js
Normal file
10
src/api/models/UnifiedJobs.js
Normal file
@ -0,0 +1,10 @@
|
||||
import Base from '../Base';
|
||||
|
||||
class UnifiedJobs extends Base {
|
||||
constructor (http) {
|
||||
super(http);
|
||||
this.baseUrl = '/api/v2/unified_jobs/';
|
||||
}
|
||||
}
|
||||
|
||||
export default UnifiedJobs;
|
@ -13,7 +13,7 @@ import RoutedTabs from '@components/RoutedTabs';
|
||||
import JobDetail from './JobDetail';
|
||||
import JobOutput from './JobOutput';
|
||||
|
||||
export class Job extends Component {
|
||||
class Job extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
@ -24,22 +24,22 @@ export class Job extends Component {
|
||||
isInitialized: false
|
||||
};
|
||||
|
||||
this.fetchJob = this.fetchJob.bind(this);
|
||||
this.loadJob = this.loadJob.bind(this);
|
||||
}
|
||||
|
||||
async componentDidMount () {
|
||||
await this.fetchJob();
|
||||
await this.loadJob();
|
||||
this.setState({ isInitialized: true });
|
||||
}
|
||||
|
||||
async componentDidUpdate (prevProps) {
|
||||
const { location } = this.props;
|
||||
if (location !== prevProps.location) {
|
||||
await this.fetchJob();
|
||||
await this.loadJob();
|
||||
}
|
||||
}
|
||||
|
||||
async fetchJob () {
|
||||
async loadJob () {
|
||||
const {
|
||||
match,
|
||||
setBreadcrumb,
|
||||
@ -153,3 +153,4 @@ export class Job extends Component {
|
||||
}
|
||||
|
||||
export default withI18n()(withRouter(Job));
|
||||
export { Job as _Job };
|
||||
|
182
src/screens/Job/JobList/JobList.jsx
Normal file
182
src/screens/Job/JobList/JobList.jsx
Normal file
@ -0,0 +1,182 @@
|
||||
import React, { Component } from 'react';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import {
|
||||
Card,
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
import { UnifiedJobsAPI } from '@api';
|
||||
import AlertModal from '@components/AlertModal';
|
||||
import DatalistToolbar from '@components/DataListToolbar';
|
||||
import PaginatedDataList, {
|
||||
ToolbarDeleteButton
|
||||
} from '@components/PaginatedDataList';
|
||||
import { getQSConfig, parseNamespacedQueryString } from '@util/qs';
|
||||
|
||||
import JobListItem from './JobListItem';
|
||||
|
||||
const QS_CONFIG = getQSConfig('job', {
|
||||
page: 1,
|
||||
page_size: 20,
|
||||
order_by: '-finished',
|
||||
not__launch_type: 'sync',
|
||||
});
|
||||
|
||||
class JobsList extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
hasContentLoading: true,
|
||||
hasContentError: false,
|
||||
deletionError: false,
|
||||
selected: [],
|
||||
jobs: [],
|
||||
itemCount: 0,
|
||||
};
|
||||
this.loadJobs = this.loadJobs.bind(this);
|
||||
this.handleSelectAll = this.handleSelectAll.bind(this);
|
||||
this.handleSelect = this.handleSelect.bind(this);
|
||||
this.handleDelete = this.handleDelete.bind(this);
|
||||
this.handleDeleteErrorClose = this.handleDeleteErrorClose.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
this.loadJobs();
|
||||
}
|
||||
|
||||
componentDidUpdate (prevProps) {
|
||||
const { location } = this.props;
|
||||
if (location !== prevProps.location) {
|
||||
this.loadJobs();
|
||||
}
|
||||
}
|
||||
|
||||
handleDeleteErrorClose () {
|
||||
this.setState({ deletionError: false });
|
||||
}
|
||||
|
||||
handleSelectAll (isSelected) {
|
||||
const { jobs } = this.state;
|
||||
const selected = isSelected ? [...jobs] : [];
|
||||
this.setState({ selected });
|
||||
}
|
||||
|
||||
handleSelect (item) {
|
||||
const { selected } = this.state;
|
||||
if (selected.some(s => s.id === item.id)) {
|
||||
this.setState({ selected: selected.filter(s => s.id !== item.id) });
|
||||
} else {
|
||||
this.setState({ selected: selected.concat(item) });
|
||||
}
|
||||
}
|
||||
|
||||
async handleDelete () {
|
||||
const { selected } = this.state;
|
||||
this.setState({ hasContentLoading: true, deletionError: false });
|
||||
try {
|
||||
await Promise.all(selected.map(({ id }) => UnifiedJobsAPI.destroy(id)));
|
||||
} catch (err) {
|
||||
this.setState({ deletionError: true });
|
||||
} finally {
|
||||
await this.loadJobs();
|
||||
}
|
||||
}
|
||||
|
||||
async loadJobs () {
|
||||
const { location } = this.props;
|
||||
const params = parseNamespacedQueryString(QS_CONFIG, location.search);
|
||||
|
||||
this.setState({ hasContentError: false, hasContentLoading: true });
|
||||
try {
|
||||
const { data: { count, results } } = await UnifiedJobsAPI.read(params);
|
||||
this.setState({
|
||||
itemCount: count,
|
||||
jobs: results,
|
||||
selected: [],
|
||||
});
|
||||
} catch (err) {
|
||||
this.setState({ hasContentError: true });
|
||||
} finally {
|
||||
this.setState({ hasContentLoading: false });
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const {
|
||||
hasContentError,
|
||||
hasContentLoading,
|
||||
deletionError,
|
||||
jobs,
|
||||
itemCount,
|
||||
selected,
|
||||
} = this.state;
|
||||
const {
|
||||
match,
|
||||
i18n
|
||||
} = this.props;
|
||||
const { medium } = PageSectionVariants;
|
||||
const isAllSelected = selected.length === jobs.length;
|
||||
const itemName = i18n._(t`Job`);
|
||||
return (
|
||||
<PageSection variant={medium}>
|
||||
<Card>
|
||||
<PaginatedDataList
|
||||
hasContentError={hasContentError}
|
||||
hasContentLoading={hasContentLoading}
|
||||
items={jobs}
|
||||
itemCount={itemCount}
|
||||
itemName={itemName}
|
||||
qsConfig={QS_CONFIG}
|
||||
toolbarColumns={[
|
||||
{ name: i18n._(t`Name`), key: 'name', isSortable: true },
|
||||
{ name: i18n._(t`Finished`), key: 'finished', isSortable: true, isNumeric: true },
|
||||
|
||||
]}
|
||||
renderToolbar={(props) => (
|
||||
<DatalistToolbar
|
||||
{...props}
|
||||
showSelectAll
|
||||
showExpandCollapse
|
||||
isAllSelected={isAllSelected}
|
||||
onSelectAll={this.handleSelectAll}
|
||||
additionalControls={[
|
||||
<ToolbarDeleteButton
|
||||
key="delete"
|
||||
onDelete={this.handleDelete}
|
||||
itemsToDelete={selected}
|
||||
itemName={itemName}
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
renderItem={(job) => (
|
||||
<JobListItem
|
||||
key={job.id}
|
||||
value={job.name}
|
||||
job={job}
|
||||
detailUrl={`${match.url}/${job}/${job.id}`}
|
||||
onSelect={() => this.handleSelect(job)}
|
||||
isSelected={selected.some(row => row.id === job.id)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Card>
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="danger"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={this.handleDeleteErrorClose}
|
||||
>
|
||||
{i18n._(t`Failed to delete one or more jobs.`)}
|
||||
</AlertModal>
|
||||
</PageSection>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export { JobsList as _JobsList };
|
||||
export default withI18n()(withRouter(JobsList));
|
62
src/screens/Job/JobList/JobListItem.jsx
Normal file
62
src/screens/Job/JobList/JobListItem.jsx
Normal file
@ -0,0 +1,62 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
DataListItem,
|
||||
DataListItemRow,
|
||||
DataListItemCells,
|
||||
DataListCheck,
|
||||
DataListCell as PFDataListCell,
|
||||
} from '@patternfly/react-core';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import VerticalSeparator from '@components/VerticalSeparator';
|
||||
import { toTitleCase } from '@util/strings';
|
||||
|
||||
const DataListCell = styled(PFDataListCell)`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@media screen and (min-width: 768px) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
class JobListItem extends Component {
|
||||
render () {
|
||||
const {
|
||||
job,
|
||||
isSelected,
|
||||
onSelect,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<DataListItem
|
||||
aria-labelledby={`check-action-${job.id}`}
|
||||
css="--pf-c-data-list__expandable-content--BoxShadow: none;"
|
||||
>
|
||||
<DataListItemRow>
|
||||
<DataListCheck
|
||||
id={`select-job-${job.id}`}
|
||||
checked={isSelected}
|
||||
onChange={onSelect}
|
||||
aria-labelledby={`check-action-${job.id}`}
|
||||
/>
|
||||
<DataListItemCells dataListCells={[
|
||||
<DataListCell key="divider">
|
||||
<VerticalSeparator />
|
||||
<span>
|
||||
<Link to={`/jobs/${job.id}`}>
|
||||
<b>{job.name}</b>
|
||||
</Link>
|
||||
</span>
|
||||
</DataListCell>,
|
||||
<DataListCell key="type">{toTitleCase(job.type)}</DataListCell>,
|
||||
<DataListCell key="finished">{job.finished}</DataListCell>,
|
||||
]}
|
||||
/>
|
||||
</DataListItemRow>
|
||||
</DataListItem>
|
||||
);
|
||||
}
|
||||
}
|
||||
export { JobListItem as _JobListItem };
|
||||
export default JobListItem;
|
3
src/screens/Job/JobList/index.js
Normal file
3
src/screens/Job/JobList/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
export { default as JobList } from './JobList';
|
||||
export { default as JobListItem } from './JobListItem';
|
||||
|
@ -5,7 +5,8 @@ import { t } from '@lingui/macro';
|
||||
|
||||
import Breadcrumbs from '@components/Breadcrumbs/Breadcrumbs';
|
||||
|
||||
import { Job } from '.';
|
||||
import Job from './Job';
|
||||
import JobList from './JobList/JobList';
|
||||
|
||||
class Jobs extends Component {
|
||||
constructor (props) {
|
||||
@ -47,6 +48,17 @@ class Jobs extends Component {
|
||||
breadcrumbConfig={breadcrumbConfig}
|
||||
/>
|
||||
<Switch>
|
||||
<Route
|
||||
exact
|
||||
path={match.path}
|
||||
render={() => (
|
||||
<JobList
|
||||
history={history}
|
||||
location={location}
|
||||
setBreadcrumb={this.setBreadcrumbConfig}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Route
|
||||
path={`${match.path}/:id`}
|
||||
render={() => (
|
||||
@ -63,4 +75,5 @@ class Jobs extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
export { Jobs as _Jobs };
|
||||
export default withI18n()(withRouter(Jobs));
|
||||
|
Loading…
Reference in New Issue
Block a user