mirror of
https://github.com/ansible/awx.git
synced 2026-03-18 01:17:35 -02:30
Merge pull request #8402 from jlmitch5/dashboardAug20
add ui_next dashboard Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
This commit is contained in:
softwarefactory-project-zuul[bot]
GitHub
@@ -8,7 +8,7 @@ The `period` of the data can be adjusted with:
|
|||||||
|
|
||||||
?period=month
|
?period=month
|
||||||
|
|
||||||
Where `month` can be replaced with `week`, or `day`. `month` is the default.
|
Where `month` can be replaced with `week`, `two_weeks`, or `day`. `month` is the default.
|
||||||
|
|
||||||
The type of job can be filtered with:
|
The type of job can be filtered with:
|
||||||
|
|
||||||
|
|||||||
@@ -316,6 +316,9 @@ class DashboardJobsGraphView(APIView):
|
|||||||
if period == 'month':
|
if period == 'month':
|
||||||
end_date = start_date - dateutil.relativedelta.relativedelta(months=1)
|
end_date = start_date - dateutil.relativedelta.relativedelta(months=1)
|
||||||
interval = 'days'
|
interval = 'days'
|
||||||
|
elif period == 'two_weeks':
|
||||||
|
end_date = start_date - dateutil.relativedelta.relativedelta(weeks=2)
|
||||||
|
interval = 'days'
|
||||||
elif period == 'week':
|
elif period == 'week':
|
||||||
end_date = start_date - dateutil.relativedelta.relativedelta(weeks=1)
|
end_date = start_date - dateutil.relativedelta.relativedelta(weeks=1)
|
||||||
interval = 'days'
|
interval = 'days'
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import Config from './models/Config';
|
|||||||
import CredentialInputSources from './models/CredentialInputSources';
|
import CredentialInputSources from './models/CredentialInputSources';
|
||||||
import CredentialTypes from './models/CredentialTypes';
|
import CredentialTypes from './models/CredentialTypes';
|
||||||
import Credentials from './models/Credentials';
|
import Credentials from './models/Credentials';
|
||||||
|
import Dashboard from './models/Dashboard';
|
||||||
import Groups from './models/Groups';
|
import Groups from './models/Groups';
|
||||||
import Hosts from './models/Hosts';
|
import Hosts from './models/Hosts';
|
||||||
import InstanceGroups from './models/InstanceGroups';
|
import InstanceGroups from './models/InstanceGroups';
|
||||||
@@ -42,6 +43,7 @@ const ConfigAPI = new Config();
|
|||||||
const CredentialInputSourcesAPI = new CredentialInputSources();
|
const CredentialInputSourcesAPI = new CredentialInputSources();
|
||||||
const CredentialTypesAPI = new CredentialTypes();
|
const CredentialTypesAPI = new CredentialTypes();
|
||||||
const CredentialsAPI = new Credentials();
|
const CredentialsAPI = new Credentials();
|
||||||
|
const DashboardAPI = new Dashboard();
|
||||||
const GroupsAPI = new Groups();
|
const GroupsAPI = new Groups();
|
||||||
const HostsAPI = new Hosts();
|
const HostsAPI = new Hosts();
|
||||||
const InstanceGroupsAPI = new InstanceGroups();
|
const InstanceGroupsAPI = new InstanceGroups();
|
||||||
@@ -81,6 +83,7 @@ export {
|
|||||||
CredentialInputSourcesAPI,
|
CredentialInputSourcesAPI,
|
||||||
CredentialTypesAPI,
|
CredentialTypesAPI,
|
||||||
CredentialsAPI,
|
CredentialsAPI,
|
||||||
|
DashboardAPI,
|
||||||
GroupsAPI,
|
GroupsAPI,
|
||||||
HostsAPI,
|
HostsAPI,
|
||||||
InstanceGroupsAPI,
|
InstanceGroupsAPI,
|
||||||
|
|||||||
16
awx/ui_next/src/api/models/Dashboard.js
Normal file
16
awx/ui_next/src/api/models/Dashboard.js
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import Base from '../Base';
|
||||||
|
|
||||||
|
class Dashboard extends Base {
|
||||||
|
constructor(http) {
|
||||||
|
super(http);
|
||||||
|
this.baseUrl = '/api/v2/dashboard/';
|
||||||
|
}
|
||||||
|
|
||||||
|
readJobGraph(params) {
|
||||||
|
return this.http.get(`${this.baseUrl}graphs/jobs/`, {
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Dashboard;
|
||||||
@@ -1,28 +1,253 @@
|
|||||||
import React, { Component, Fragment } from 'react';
|
import React, { Fragment, useCallback, useEffect, useState } from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
import { withI18n } from '@lingui/react';
|
import { withI18n } from '@lingui/react';
|
||||||
import { t } from '@lingui/macro';
|
import { t } from '@lingui/macro';
|
||||||
import {
|
import {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardActions,
|
||||||
|
CardBody,
|
||||||
PageSection,
|
PageSection,
|
||||||
PageSectionVariants,
|
PageSectionVariants,
|
||||||
|
Select,
|
||||||
|
SelectVariant,
|
||||||
|
SelectOption,
|
||||||
|
Tabs,
|
||||||
|
Tab,
|
||||||
|
TabTitleText,
|
||||||
Title,
|
Title,
|
||||||
} from '@patternfly/react-core';
|
} from '@patternfly/react-core';
|
||||||
|
|
||||||
class Dashboard extends Component {
|
import useRequest from '../../util/useRequest';
|
||||||
render() {
|
import { DashboardAPI } from '../../api';
|
||||||
const { i18n } = this.props;
|
import JobList from '../../components/JobList';
|
||||||
const { light } = PageSectionVariants;
|
|
||||||
|
|
||||||
return (
|
import LineChart from './shared/LineChart';
|
||||||
<Fragment>
|
import Count from './shared/Count';
|
||||||
<PageSection variant={light} className="pf-m-condensed">
|
import DashboardTemplateList from './shared/DashboardTemplateList';
|
||||||
<Title size="2xl" headingLevel="h2">
|
|
||||||
{i18n._(t`Dashboard`)}
|
const Counts = styled.div`
|
||||||
</Title>
|
display: grid;
|
||||||
</PageSection>
|
grid-template-columns: repeat(6, 1fr);
|
||||||
<PageSection />
|
grid-gap: var(--pf-global--spacer--lg);
|
||||||
</Fragment>
|
|
||||||
);
|
@media (max-width: 900px) {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
grid-auto-rows: 1fr;
|
||||||
}
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const MainPageSection = styled(PageSection)`
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
|
||||||
|
& .spacer {
|
||||||
|
margin-bottom: var(--pf-global--spacer--lg);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const GraphCardHeader = styled(CardHeader)`
|
||||||
|
margin-top: var(--pf-global--spacer--lg);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const GraphCardActions = styled(CardActions)`
|
||||||
|
margin-left: initial;
|
||||||
|
padding-left: 0;
|
||||||
|
`;
|
||||||
|
|
||||||
|
function Dashboard({ i18n }) {
|
||||||
|
const { light } = PageSectionVariants;
|
||||||
|
|
||||||
|
const [isPeriodDropdownOpen, setIsPeriodDropdownOpen] = useState(false);
|
||||||
|
const [isJobTypeDropdownOpen, setIsJobTypeDropdownOpen] = useState(false);
|
||||||
|
const [periodSelection, setPeriodSelection] = useState('month');
|
||||||
|
const [jobTypeSelection, setJobTypeSelection] = useState('all');
|
||||||
|
const [activeTabId, setActiveTabId] = useState(0);
|
||||||
|
|
||||||
|
const {
|
||||||
|
result: { jobGraphData, countData },
|
||||||
|
request: fetchDashboardGraph,
|
||||||
|
} = useRequest(
|
||||||
|
useCallback(async () => {
|
||||||
|
const [{ data }, { data: dataFromCount }] = await Promise.all([
|
||||||
|
DashboardAPI.readJobGraph({
|
||||||
|
period: periodSelection,
|
||||||
|
job_type: jobTypeSelection,
|
||||||
|
}),
|
||||||
|
DashboardAPI.read(),
|
||||||
|
]);
|
||||||
|
const newData = {};
|
||||||
|
data.jobs.successful.forEach(([dateSecs, count]) => {
|
||||||
|
if (!newData[dateSecs]) {
|
||||||
|
newData[dateSecs] = {};
|
||||||
|
}
|
||||||
|
newData[dateSecs].successful = count;
|
||||||
|
});
|
||||||
|
data.jobs.failed.forEach(([dateSecs, count]) => {
|
||||||
|
if (!newData[dateSecs]) {
|
||||||
|
newData[dateSecs] = {};
|
||||||
|
}
|
||||||
|
newData[dateSecs].failed = count;
|
||||||
|
});
|
||||||
|
const jobData = Object.keys(newData).map(dateSecs => {
|
||||||
|
const [created] = new Date(dateSecs * 1000).toISOString().split('T');
|
||||||
|
newData[dateSecs].created = created;
|
||||||
|
return newData[dateSecs];
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
jobGraphData: jobData,
|
||||||
|
countData: dataFromCount,
|
||||||
|
};
|
||||||
|
}, [periodSelection, jobTypeSelection]),
|
||||||
|
{
|
||||||
|
jobGraphData: [],
|
||||||
|
countData: {},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchDashboardGraph();
|
||||||
|
}, [fetchDashboardGraph, periodSelection, jobTypeSelection]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<PageSection variant={light} className="pf-m-condensed">
|
||||||
|
<Title size="2xl" headingLevel="h2">
|
||||||
|
{i18n._(t`Dashboard`)}
|
||||||
|
</Title>
|
||||||
|
</PageSection>
|
||||||
|
<PageSection>
|
||||||
|
<Counts>
|
||||||
|
<Count
|
||||||
|
link="/hosts"
|
||||||
|
data={countData?.hosts?.total}
|
||||||
|
label={i18n._(t`Hosts`)}
|
||||||
|
/>
|
||||||
|
<Count
|
||||||
|
failed
|
||||||
|
link="/hosts?host.last_job_host_summary__failed=true"
|
||||||
|
data={countData?.hosts?.failed}
|
||||||
|
label={i18n._(t`Failed hosts`)}
|
||||||
|
/>
|
||||||
|
<Count
|
||||||
|
link="/inventories"
|
||||||
|
data={countData?.inventories?.total}
|
||||||
|
label={i18n._(t`Inventories`)}
|
||||||
|
/>
|
||||||
|
<Count
|
||||||
|
failed
|
||||||
|
link="/inventories?inventory.inventory_sources_with_failures__gt=0"
|
||||||
|
data={countData?.inventories?.failed}
|
||||||
|
label={i18n._(t`Inventory sync failures`)}
|
||||||
|
/>
|
||||||
|
<Count
|
||||||
|
link="/projects"
|
||||||
|
data={countData?.projects?.total}
|
||||||
|
label={i18n._(t`Projects`)}
|
||||||
|
/>
|
||||||
|
<Count
|
||||||
|
failed
|
||||||
|
link="/projects?project.status__in=failed,canceled"
|
||||||
|
data={countData?.projects?.failed}
|
||||||
|
label={i18n._(t`Project sync failures`)}
|
||||||
|
/>
|
||||||
|
</Counts>
|
||||||
|
</PageSection>
|
||||||
|
<MainPageSection>
|
||||||
|
<div className="spacer">
|
||||||
|
<Card id="dashboard-main-container">
|
||||||
|
<Tabs
|
||||||
|
aria-label={i18n._(t`Tabs`)}
|
||||||
|
activeKey={activeTabId}
|
||||||
|
onSelect={(key, eventKey) => setActiveTabId(eventKey)}
|
||||||
|
>
|
||||||
|
<Tab
|
||||||
|
aria-label={i18n._(t`Job status graph tab`)}
|
||||||
|
eventKey={0}
|
||||||
|
title={<TabTitleText>{i18n._(t`Job status`)}</TabTitleText>}
|
||||||
|
/>
|
||||||
|
<Tab
|
||||||
|
aria-label={i18n._(t`Recent Jobs list tab`)}
|
||||||
|
eventKey={1}
|
||||||
|
title={<TabTitleText>{i18n._(t`Recent Jobs`)}</TabTitleText>}
|
||||||
|
/>
|
||||||
|
<Tab
|
||||||
|
aria-label={i18n._(t`Recent Templates list tab`)}
|
||||||
|
eventKey={2}
|
||||||
|
title={
|
||||||
|
<TabTitleText>{i18n._(t`Recent Templates`)}</TabTitleText>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Tabs>
|
||||||
|
{activeTabId === 0 && (
|
||||||
|
<Fragment>
|
||||||
|
<GraphCardHeader>
|
||||||
|
<GraphCardActions>
|
||||||
|
<Select
|
||||||
|
variant={SelectVariant.single}
|
||||||
|
placeholderText={i18n._(t`Select period`)}
|
||||||
|
aria-label={i18n._(t`Select period`)}
|
||||||
|
className="periodSelect"
|
||||||
|
onToggle={setIsPeriodDropdownOpen}
|
||||||
|
onSelect={(event, selection) =>
|
||||||
|
setPeriodSelection(selection)
|
||||||
|
}
|
||||||
|
selections={periodSelection}
|
||||||
|
isOpen={isPeriodDropdownOpen}
|
||||||
|
>
|
||||||
|
<SelectOption key="month" value="month">
|
||||||
|
{i18n._(t`Past month`)}
|
||||||
|
</SelectOption>
|
||||||
|
<SelectOption key="two_weeks" value="two_weeks">
|
||||||
|
{i18n._(t`Past two weeks`)}
|
||||||
|
</SelectOption>
|
||||||
|
<SelectOption key="week" value="week">
|
||||||
|
{i18n._(t`Past week`)}
|
||||||
|
</SelectOption>
|
||||||
|
</Select>
|
||||||
|
<Select
|
||||||
|
variant={SelectVariant.single}
|
||||||
|
placeholderText={i18n._(t`Select job type`)}
|
||||||
|
aria-label={i18n._(t`Select job type`)}
|
||||||
|
className="jobTypeSelect"
|
||||||
|
onToggle={setIsJobTypeDropdownOpen}
|
||||||
|
onSelect={(event, selection) =>
|
||||||
|
setJobTypeSelection(selection)
|
||||||
|
}
|
||||||
|
selections={jobTypeSelection}
|
||||||
|
isOpen={isJobTypeDropdownOpen}
|
||||||
|
>
|
||||||
|
<SelectOption key="all" value="all">
|
||||||
|
{i18n._(t`All job types`)}
|
||||||
|
</SelectOption>
|
||||||
|
<SelectOption key="inv_sync" value="inv_sync">
|
||||||
|
{i18n._(t`Inventory sync`)}
|
||||||
|
</SelectOption>
|
||||||
|
<SelectOption key="scm_update" value="scm_update">
|
||||||
|
{i18n._(t`SCM update`)}
|
||||||
|
</SelectOption>
|
||||||
|
<SelectOption key="playbook_run" value="playbook_run">
|
||||||
|
{i18n._(t`Playbook run`)}
|
||||||
|
</SelectOption>
|
||||||
|
</Select>
|
||||||
|
</GraphCardActions>
|
||||||
|
</GraphCardHeader>
|
||||||
|
<CardBody>
|
||||||
|
<LineChart
|
||||||
|
height={390}
|
||||||
|
id="d3-line-chart-root"
|
||||||
|
data={jobGraphData}
|
||||||
|
/>
|
||||||
|
</CardBody>
|
||||||
|
</Fragment>
|
||||||
|
)}
|
||||||
|
{activeTabId === 1 && <JobList defaultParams={{ page_size: 5 }} />}
|
||||||
|
{activeTabId === 2 && <DashboardTemplateList />}
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</MainPageSection>
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default withI18n()(Dashboard);
|
export default withI18n()(Dashboard);
|
||||||
|
|||||||
@@ -1,18 +1,24 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { act } from 'react-dom/test-utils';
|
||||||
|
|
||||||
import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
|
import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
|
||||||
|
|
||||||
|
import { DashboardAPI } from '../../api';
|
||||||
import Dashboard from './Dashboard';
|
import Dashboard from './Dashboard';
|
||||||
|
|
||||||
|
jest.mock('../../api');
|
||||||
|
|
||||||
describe('<Dashboard />', () => {
|
describe('<Dashboard />', () => {
|
||||||
let pageWrapper;
|
let pageWrapper;
|
||||||
let pageSections;
|
let graphRequest;
|
||||||
let title;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(async () => {
|
||||||
pageWrapper = mountWithContexts(<Dashboard />);
|
await act(async () => {
|
||||||
pageSections = pageWrapper.find('PageSection');
|
DashboardAPI.read.mockResolvedValue({});
|
||||||
title = pageWrapper.find('Title');
|
graphRequest = DashboardAPI.readJobGraph;
|
||||||
|
graphRequest.mockResolvedValue({});
|
||||||
|
pageWrapper = mountWithContexts(<Dashboard />);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
@@ -21,9 +27,24 @@ describe('<Dashboard />', () => {
|
|||||||
|
|
||||||
test('initially renders without crashing', () => {
|
test('initially renders without crashing', () => {
|
||||||
expect(pageWrapper.length).toBe(1);
|
expect(pageWrapper.length).toBe(1);
|
||||||
expect(pageSections.length).toBe(2);
|
});
|
||||||
expect(title.length).toBe(1);
|
|
||||||
expect(title.props().size).toBe('2xl');
|
test('renders dashboard graph by default', () => {
|
||||||
expect(pageSections.first().props().variant).toBe('light');
|
expect(pageWrapper.find('LineChart').length).toBe(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('renders template list when the active tab is changed', async () => {
|
||||||
|
expect(pageWrapper.find('DashboardTemplateList').length).toBe(0);
|
||||||
|
pageWrapper
|
||||||
|
.find('button[aria-label="Recent Templates list tab"]')
|
||||||
|
.simulate('click');
|
||||||
|
expect(pageWrapper.find('DashboardTemplateList').length).toBe(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('renders month-based/all job type chart by default', () => {
|
||||||
|
expect(graphRequest).toHaveBeenCalledWith({
|
||||||
|
job_type: 'all',
|
||||||
|
period: 'month',
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
211
awx/ui_next/src/screens/Dashboard/shared/ChartTooltip.jsx
Normal file
211
awx/ui_next/src/screens/Dashboard/shared/ChartTooltip.jsx
Normal file
@@ -0,0 +1,211 @@
|
|||||||
|
import * as d3 from 'd3';
|
||||||
|
import { t } from '@lingui/macro';
|
||||||
|
|
||||||
|
class Tooltip {
|
||||||
|
constructor(opts) {
|
||||||
|
this.label = opts.label;
|
||||||
|
this.svg = opts.svg;
|
||||||
|
this.colors = opts.colors;
|
||||||
|
this.i18n = opts.i18n;
|
||||||
|
this.draw();
|
||||||
|
}
|
||||||
|
|
||||||
|
draw() {
|
||||||
|
this.toolTipBase = d3.select(`${this.svg} > svg`).append('g');
|
||||||
|
this.toolTipBase.attr('id', 'chart-tooltip');
|
||||||
|
this.toolTipBase.attr('overflow', 'visible');
|
||||||
|
this.toolTipBase.style('opacity', 0);
|
||||||
|
this.toolTipBase.style('pointer-events', 'none');
|
||||||
|
this.toolTipBase.attr('transform', 'translate(100, 100)');
|
||||||
|
this.boxWidth = 145;
|
||||||
|
this.textWidthThreshold = 20;
|
||||||
|
|
||||||
|
this.toolTipPoint = this.toolTipBase
|
||||||
|
.append('rect')
|
||||||
|
.attr('transform', 'translate(10, -10) rotate(45)')
|
||||||
|
.attr('x', 0)
|
||||||
|
.attr('y', 0)
|
||||||
|
.attr('height', 20)
|
||||||
|
.attr('width', 20)
|
||||||
|
.attr('fill', '#393f44');
|
||||||
|
this.boundingBox = this.toolTipBase
|
||||||
|
.append('rect')
|
||||||
|
.attr('x', 10)
|
||||||
|
.attr('y', -41)
|
||||||
|
.attr('rx', 2)
|
||||||
|
.attr('height', 82)
|
||||||
|
.attr('width', this.boxWidth)
|
||||||
|
.attr('fill', '#393f44');
|
||||||
|
this.circleGreen = this.toolTipBase
|
||||||
|
.append('circle')
|
||||||
|
.attr('cx', 26)
|
||||||
|
.attr('cy', 0)
|
||||||
|
.attr('r', 7)
|
||||||
|
.attr('stroke', 'white')
|
||||||
|
.attr('fill', this.colors(1));
|
||||||
|
this.circleRed = this.toolTipBase
|
||||||
|
.append('circle')
|
||||||
|
.attr('cx', 26)
|
||||||
|
.attr('cy', 26)
|
||||||
|
.attr('r', 7)
|
||||||
|
.attr('stroke', 'white')
|
||||||
|
.attr('fill', this.colors(0));
|
||||||
|
this.successText = this.toolTipBase
|
||||||
|
.append('text')
|
||||||
|
.attr('x', 43)
|
||||||
|
.attr('y', 4)
|
||||||
|
.attr('font-size', 12)
|
||||||
|
.attr('fill', 'white')
|
||||||
|
.text(this.i18n._(t`Successful`));
|
||||||
|
this.failText = this.toolTipBase
|
||||||
|
.append('text')
|
||||||
|
.attr('x', 43)
|
||||||
|
.attr('y', 28)
|
||||||
|
.attr('font-size', 12)
|
||||||
|
.attr('fill', 'white')
|
||||||
|
.text(this.i18n._(t`Failed`));
|
||||||
|
this.icon = this.toolTipBase
|
||||||
|
.append('text')
|
||||||
|
.attr('fill', 'white')
|
||||||
|
.attr('stroke', 'white')
|
||||||
|
.attr('x', 24)
|
||||||
|
.attr('y', 30)
|
||||||
|
.attr('font-size', 12)
|
||||||
|
.text('!');
|
||||||
|
this.jobs = this.toolTipBase
|
||||||
|
.append('text')
|
||||||
|
.attr('fill', 'white')
|
||||||
|
.attr('x', 137)
|
||||||
|
.attr('y', -21)
|
||||||
|
.attr('font-size', 12)
|
||||||
|
.attr('text-anchor', 'end')
|
||||||
|
.text(this.i18n._(t`No Jobs`));
|
||||||
|
this.successful = this.toolTipBase
|
||||||
|
.append('text')
|
||||||
|
.attr('fill', 'white')
|
||||||
|
.attr('font-size', 12)
|
||||||
|
.attr('x', 122)
|
||||||
|
.attr('y', 4)
|
||||||
|
.attr('id', 'successful-count')
|
||||||
|
.text('0');
|
||||||
|
this.failed = this.toolTipBase
|
||||||
|
.append('text')
|
||||||
|
.attr('fill', 'white')
|
||||||
|
.attr('font-size', 12)
|
||||||
|
.attr('x', 122)
|
||||||
|
.attr('y', 28)
|
||||||
|
.attr('id', 'failed-count')
|
||||||
|
.text('0');
|
||||||
|
this.date = this.toolTipBase
|
||||||
|
.append('text')
|
||||||
|
.attr('fill', 'white')
|
||||||
|
.attr('stroke', 'white')
|
||||||
|
.attr('x', 20)
|
||||||
|
.attr('y', -21)
|
||||||
|
.attr('font-size', 12)
|
||||||
|
.text(this.i18n._(t`Never`));
|
||||||
|
}
|
||||||
|
|
||||||
|
handleMouseOver = d => {
|
||||||
|
let success = 0;
|
||||||
|
let fail = 0;
|
||||||
|
let total = 0;
|
||||||
|
const x =
|
||||||
|
d3.event.pageX -
|
||||||
|
d3
|
||||||
|
.select(this.svg)
|
||||||
|
.node()
|
||||||
|
.getBoundingClientRect().x +
|
||||||
|
10;
|
||||||
|
const y =
|
||||||
|
d3.event.pageY -
|
||||||
|
d3
|
||||||
|
.select(this.svg)
|
||||||
|
.node()
|
||||||
|
.getBoundingClientRect().y -
|
||||||
|
10;
|
||||||
|
const formatTooltipDate = d3.timeFormat('%m/%d');
|
||||||
|
if (!d) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const toolTipWidth = this.toolTipBase.node().getBoundingClientRect().width;
|
||||||
|
const chartWidth = d3
|
||||||
|
.select(`${this.svg}> svg`)
|
||||||
|
.node()
|
||||||
|
.getBoundingClientRect().width;
|
||||||
|
const overflow = 100 - (toolTipWidth / chartWidth) * 100;
|
||||||
|
const flipped = overflow < (x / chartWidth) * 100;
|
||||||
|
if (d) {
|
||||||
|
success = d.RAN || 0;
|
||||||
|
fail = d.FAIL || 0;
|
||||||
|
total = d.TOTAL || 0;
|
||||||
|
this.date.text(formatTooltipDate(d.DATE || null));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (d && d.data) {
|
||||||
|
success = d.data.RAN || 0;
|
||||||
|
fail = d.data.FAIL || 0;
|
||||||
|
total = d.data.TOTAL || 0;
|
||||||
|
this.date.text(formatTooltipDate(d.data.DATE || null));
|
||||||
|
}
|
||||||
|
|
||||||
|
this.jobs.text(`${total} ${this.label}`);
|
||||||
|
this.jobsWidth = this.jobs.node().getComputedTextLength();
|
||||||
|
this.failed.text(`${fail}`);
|
||||||
|
this.successful.text(`${success}`);
|
||||||
|
this.successTextWidth = this.successful.node().getComputedTextLength();
|
||||||
|
this.failTextWidth = this.failed.node().getComputedTextLength();
|
||||||
|
|
||||||
|
const maxTextPerc = (this.jobsWidth / this.boxWidth) * 100;
|
||||||
|
const threshold = 40;
|
||||||
|
const overage = maxTextPerc / threshold;
|
||||||
|
let adjustedWidth;
|
||||||
|
if (maxTextPerc > threshold) {
|
||||||
|
adjustedWidth = this.boxWidth * overage;
|
||||||
|
} else {
|
||||||
|
adjustedWidth = this.boxWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.boundingBox.attr('width', adjustedWidth);
|
||||||
|
this.toolTipBase.attr('transform', `translate(${x}, ${y})`);
|
||||||
|
if (flipped) {
|
||||||
|
this.toolTipPoint.attr('transform', 'translate(-20, -10) rotate(45)');
|
||||||
|
this.boundingBox.attr('x', -adjustedWidth - 20);
|
||||||
|
this.circleGreen.attr('cx', -adjustedWidth);
|
||||||
|
this.circleRed.attr('cx', -adjustedWidth);
|
||||||
|
this.icon.attr('x', -adjustedWidth - 2);
|
||||||
|
this.successText.attr('x', -adjustedWidth + 17);
|
||||||
|
this.failText.attr('x', -adjustedWidth + 17);
|
||||||
|
this.successful.attr('x', -this.successTextWidth - 20 - 12);
|
||||||
|
this.failed.attr('x', -this.failTextWidth - 20 - 12);
|
||||||
|
this.date.attr('x', -adjustedWidth - 5);
|
||||||
|
this.jobs.attr('x', -this.jobsWidth / 2 - 14);
|
||||||
|
} else {
|
||||||
|
this.toolTipPoint.attr('transform', 'translate(10, -10) rotate(45)');
|
||||||
|
this.boundingBox.attr('x', 10);
|
||||||
|
this.circleGreen.attr('cx', 26);
|
||||||
|
this.circleRed.attr('cx', 26);
|
||||||
|
this.icon.attr('x', 24);
|
||||||
|
this.successText.attr('x', 43);
|
||||||
|
this.failText.attr('x', 43);
|
||||||
|
this.successful.attr('x', adjustedWidth - this.successTextWidth);
|
||||||
|
this.failed.attr('x', adjustedWidth - this.failTextWidth);
|
||||||
|
this.date.attr('x', 20);
|
||||||
|
this.jobs.attr('x', adjustedWidth);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.toolTipBase.style('opacity', 1);
|
||||||
|
this.toolTipBase.interrupt();
|
||||||
|
};
|
||||||
|
|
||||||
|
handleMouseOut = () => {
|
||||||
|
this.toolTipBase
|
||||||
|
.transition()
|
||||||
|
.delay(15)
|
||||||
|
.style('opacity', 0)
|
||||||
|
.style('pointer-events', 'none');
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Tooltip;
|
||||||
45
awx/ui_next/src/screens/Dashboard/shared/Count.jsx
Normal file
45
awx/ui_next/src/screens/Dashboard/shared/Count.jsx
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { Card } from '@patternfly/react-core';
|
||||||
|
|
||||||
|
const CountCard = styled(Card)`
|
||||||
|
padding: var(--pf-global--spacer--md);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: var(--pf-global--spacer--sm);
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--pf-global--palette--black-1000);
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
& h2 {
|
||||||
|
font-size: var(--pf-global--FontSize--4xl);
|
||||||
|
color: var(--pf-global--palette--blue-400);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
& h2.failed {
|
||||||
|
color: var(--pf-global--palette--red-200);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const CountLink = styled(Link)`
|
||||||
|
display: contents;
|
||||||
|
&:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
function Count({ failed, link, data, label }) {
|
||||||
|
return (
|
||||||
|
<CountLink to={link}>
|
||||||
|
<CountCard isHoverable>
|
||||||
|
<h2 className={failed && 'failed'}>{data || 0}</h2>
|
||||||
|
{label}
|
||||||
|
</CountCard>
|
||||||
|
</CountLink>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Count;
|
||||||
28
awx/ui_next/src/screens/Dashboard/shared/Count.test.jsx
Normal file
28
awx/ui_next/src/screens/Dashboard/shared/Count.test.jsx
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
|
||||||
|
|
||||||
|
import Count from './Count';
|
||||||
|
|
||||||
|
describe('<Count />', () => {
|
||||||
|
let pageWrapper;
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
pageWrapper.unmount();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('initially renders without crashing', () => {
|
||||||
|
pageWrapper = mountWithContexts(<Count link="foo" />);
|
||||||
|
expect(pageWrapper.length).toBe(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('renders non-failed version of count without prop', () => {
|
||||||
|
pageWrapper = mountWithContexts(<Count link="foo" />);
|
||||||
|
expect(pageWrapper.find('h2').hasClass('failed')).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('renders failed version of count with appropriate prop', () => {
|
||||||
|
pageWrapper = mountWithContexts(<Count link="foo" failed />);
|
||||||
|
expect(pageWrapper.find('h2').hasClass('failed')).toBe(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,279 @@
|
|||||||
|
import React, { Fragment, useEffect, useState, useCallback } from 'react';
|
||||||
|
import { useLocation } from 'react-router-dom';
|
||||||
|
import { withI18n } from '@lingui/react';
|
||||||
|
import { t } from '@lingui/macro';
|
||||||
|
import { Card } from '@patternfly/react-core';
|
||||||
|
|
||||||
|
import {
|
||||||
|
JobTemplatesAPI,
|
||||||
|
UnifiedJobTemplatesAPI,
|
||||||
|
WorkflowJobTemplatesAPI,
|
||||||
|
} from '../../../api';
|
||||||
|
import AlertModal from '../../../components/AlertModal';
|
||||||
|
import DatalistToolbar from '../../../components/DataListToolbar';
|
||||||
|
import ErrorDetail from '../../../components/ErrorDetail';
|
||||||
|
import PaginatedDataList, {
|
||||||
|
ToolbarDeleteButton,
|
||||||
|
} from '../../../components/PaginatedDataList';
|
||||||
|
import useRequest, { useDeleteItems } from '../../../util/useRequest';
|
||||||
|
import { getQSConfig, parseQueryString } from '../../../util/qs';
|
||||||
|
import useWsTemplates from '../../../util/useWsTemplates';
|
||||||
|
import AddDropDownButton from '../../../components/AddDropDownButton';
|
||||||
|
|
||||||
|
import DashboardTemplateListItem from './DashboardTemplateListItem';
|
||||||
|
|
||||||
|
const QS_CONFIG = getQSConfig(
|
||||||
|
'template',
|
||||||
|
{
|
||||||
|
page: 1,
|
||||||
|
page_size: 5,
|
||||||
|
order_by: 'name',
|
||||||
|
type: 'job_template,workflow_job_template',
|
||||||
|
},
|
||||||
|
['id', 'page', 'page_size']
|
||||||
|
);
|
||||||
|
|
||||||
|
function DashboardTemplateList({ i18n }) {
|
||||||
|
// The type value in const QS_CONFIG below does not have a space between job_template and
|
||||||
|
// workflow_job_template so the params sent to the API match what the api expects.
|
||||||
|
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
const [selected, setSelected] = useState([]);
|
||||||
|
|
||||||
|
const {
|
||||||
|
result: {
|
||||||
|
results,
|
||||||
|
count,
|
||||||
|
jtActions,
|
||||||
|
wfjtActions,
|
||||||
|
relatedSearchableKeys,
|
||||||
|
searchableKeys,
|
||||||
|
},
|
||||||
|
error: contentError,
|
||||||
|
isLoading,
|
||||||
|
request: fetchTemplates,
|
||||||
|
} = useRequest(
|
||||||
|
useCallback(async () => {
|
||||||
|
const params = parseQueryString(QS_CONFIG, location.search);
|
||||||
|
const responses = await Promise.all([
|
||||||
|
UnifiedJobTemplatesAPI.read(params),
|
||||||
|
JobTemplatesAPI.readOptions(),
|
||||||
|
WorkflowJobTemplatesAPI.readOptions(),
|
||||||
|
UnifiedJobTemplatesAPI.readOptions(),
|
||||||
|
]);
|
||||||
|
return {
|
||||||
|
results: responses[0].data.results,
|
||||||
|
count: responses[0].data.count,
|
||||||
|
jtActions: responses[1].data.actions,
|
||||||
|
wfjtActions: responses[2].data.actions,
|
||||||
|
relatedSearchableKeys: (
|
||||||
|
responses[3]?.data?.related_search_fields || []
|
||||||
|
).map(val => val.slice(0, -8)),
|
||||||
|
searchableKeys: Object.keys(
|
||||||
|
responses[3].data.actions?.GET || {}
|
||||||
|
).filter(key => responses[3].data.actions?.GET[key].filterable),
|
||||||
|
};
|
||||||
|
}, [location]),
|
||||||
|
{
|
||||||
|
results: [],
|
||||||
|
count: 0,
|
||||||
|
jtActions: {},
|
||||||
|
wfjtActions: {},
|
||||||
|
relatedSearchableKeys: [],
|
||||||
|
searchableKeys: [],
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchTemplates();
|
||||||
|
}, [fetchTemplates]);
|
||||||
|
|
||||||
|
const templates = useWsTemplates(results);
|
||||||
|
|
||||||
|
const isAllSelected =
|
||||||
|
selected.length === templates.length && selected.length > 0;
|
||||||
|
const {
|
||||||
|
isLoading: isDeleteLoading,
|
||||||
|
deleteItems: deleteTemplates,
|
||||||
|
deletionError,
|
||||||
|
clearDeletionError,
|
||||||
|
} = useDeleteItems(
|
||||||
|
useCallback(async () => {
|
||||||
|
return Promise.all(
|
||||||
|
selected.map(({ type, id }) => {
|
||||||
|
if (type === 'job_template') {
|
||||||
|
return JobTemplatesAPI.destroy(id);
|
||||||
|
}
|
||||||
|
if (type === 'workflow_job_template') {
|
||||||
|
return WorkflowJobTemplatesAPI.destroy(id);
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}, [selected]),
|
||||||
|
{
|
||||||
|
qsConfig: QS_CONFIG,
|
||||||
|
allItemsSelected: isAllSelected,
|
||||||
|
fetchItems: fetchTemplates,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleTemplateDelete = async () => {
|
||||||
|
await deleteTemplates();
|
||||||
|
setSelected([]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSelectAll = isSelected => {
|
||||||
|
setSelected(isSelected ? [...templates] : []);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSelect = template => {
|
||||||
|
if (selected.some(s => s.id === template.id)) {
|
||||||
|
setSelected(selected.filter(s => s.id !== template.id));
|
||||||
|
} else {
|
||||||
|
setSelected(selected.concat(template));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const canAddJT =
|
||||||
|
jtActions && Object.prototype.hasOwnProperty.call(jtActions, 'POST');
|
||||||
|
const canAddWFJT =
|
||||||
|
wfjtActions && Object.prototype.hasOwnProperty.call(wfjtActions, 'POST');
|
||||||
|
const addButtonOptions = [];
|
||||||
|
|
||||||
|
if (canAddJT) {
|
||||||
|
addButtonOptions.push({
|
||||||
|
label: i18n._(t`Job Template`),
|
||||||
|
url: `/templates/job_template/add/`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (canAddWFJT) {
|
||||||
|
addButtonOptions.push({
|
||||||
|
label: i18n._(t`Workflow Template`),
|
||||||
|
url: `/templates/workflow_job_template/add/`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const addButton = (
|
||||||
|
<AddDropDownButton key="add" dropdownItems={addButtonOptions} />
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<Card>
|
||||||
|
<PaginatedDataList
|
||||||
|
contentError={contentError}
|
||||||
|
hasContentLoading={isLoading || isDeleteLoading}
|
||||||
|
items={templates}
|
||||||
|
itemCount={count}
|
||||||
|
pluralizedItemName={i18n._(t`Templates`)}
|
||||||
|
qsConfig={QS_CONFIG}
|
||||||
|
onRowClick={handleSelect}
|
||||||
|
toolbarSearchColumns={[
|
||||||
|
{
|
||||||
|
name: i18n._(t`Name`),
|
||||||
|
key: 'name__icontains',
|
||||||
|
isDefault: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: i18n._(t`Description`),
|
||||||
|
key: 'description__icontains',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: i18n._(t`Type`),
|
||||||
|
key: 'or__type',
|
||||||
|
options: [
|
||||||
|
[`job_template`, i18n._(t`Job Template`)],
|
||||||
|
[`workflow_job_template`, i18n._(t`Workflow Template`)],
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: i18n._(t`Playbook name`),
|
||||||
|
key: 'job_template__playbook__icontains',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: i18n._(t`Created By (Username)`),
|
||||||
|
key: 'created_by__username__icontains',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: i18n._(t`Modified By (Username)`),
|
||||||
|
key: 'modified_by__username__icontains',
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
toolbarSortColumns={[
|
||||||
|
{
|
||||||
|
name: i18n._(t`Inventory`),
|
||||||
|
key: 'job_template__inventory__id',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: i18n._(t`Last Job Run`),
|
||||||
|
key: 'last_job_run',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: i18n._(t`Modified`),
|
||||||
|
key: 'modified',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: i18n._(t`Name`),
|
||||||
|
key: 'name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: i18n._(t`Project`),
|
||||||
|
key: 'jobtemplate__project__id',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: i18n._(t`Type`),
|
||||||
|
key: 'type',
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
toolbarSearchableKeys={searchableKeys}
|
||||||
|
toolbarRelatedSearchableKeys={relatedSearchableKeys}
|
||||||
|
renderToolbar={props => (
|
||||||
|
<DatalistToolbar
|
||||||
|
{...props}
|
||||||
|
showSelectAll
|
||||||
|
isAllSelected={isAllSelected}
|
||||||
|
onSelectAll={handleSelectAll}
|
||||||
|
qsConfig={QS_CONFIG}
|
||||||
|
additionalControls={[
|
||||||
|
...(canAddJT || canAddWFJT ? [addButton] : []),
|
||||||
|
<ToolbarDeleteButton
|
||||||
|
key="delete"
|
||||||
|
onDelete={handleTemplateDelete}
|
||||||
|
itemsToDelete={selected}
|
||||||
|
pluralizedItemName="Templates"
|
||||||
|
/>,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
renderItem={template => (
|
||||||
|
<DashboardTemplateListItem
|
||||||
|
key={template.id}
|
||||||
|
value={template.name}
|
||||||
|
template={template}
|
||||||
|
detailUrl={`/templates/${template.type}/${template.id}`}
|
||||||
|
onSelect={() => handleSelect(template)}
|
||||||
|
isSelected={selected.some(row => row.id === template.id)}
|
||||||
|
fetchTemplates={fetchTemplates}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
emptyStateControls={(canAddJT || canAddWFJT) && addButton}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
<AlertModal
|
||||||
|
aria-label={i18n._(t`Deletion Error`)}
|
||||||
|
isOpen={deletionError}
|
||||||
|
variant="error"
|
||||||
|
title={i18n._(t`Error!`)}
|
||||||
|
onClose={clearDeletionError}
|
||||||
|
>
|
||||||
|
{i18n._(t`Failed to delete one or more templates.`)}
|
||||||
|
<ErrorDetail error={deletionError} />
|
||||||
|
</AlertModal>
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withI18n()(DashboardTemplateList);
|
||||||
@@ -0,0 +1,336 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { act } from 'react-dom/test-utils';
|
||||||
|
import {
|
||||||
|
JobTemplatesAPI,
|
||||||
|
UnifiedJobTemplatesAPI,
|
||||||
|
WorkflowJobTemplatesAPI,
|
||||||
|
} from '../../../api';
|
||||||
|
import {
|
||||||
|
mountWithContexts,
|
||||||
|
waitForElement,
|
||||||
|
} from '../../../../testUtils/enzymeHelpers';
|
||||||
|
|
||||||
|
import DashboardTemplateList from './DashboardTemplateList';
|
||||||
|
|
||||||
|
jest.mock('../../../api');
|
||||||
|
|
||||||
|
const mockTemplates = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: 'Job Template 1',
|
||||||
|
url: '/templates/job_template/1',
|
||||||
|
type: 'job_template',
|
||||||
|
summary_fields: {
|
||||||
|
user_capabilities: {
|
||||||
|
delete: true,
|
||||||
|
edit: true,
|
||||||
|
copy: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: 'Job Template 2',
|
||||||
|
url: '/templates/job_template/2',
|
||||||
|
type: 'job_template',
|
||||||
|
summary_fields: {
|
||||||
|
user_capabilities: {
|
||||||
|
delete: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: 'Job Template 3',
|
||||||
|
url: '/templates/job_template/3',
|
||||||
|
type: 'job_template',
|
||||||
|
summary_fields: {
|
||||||
|
user_capabilities: {
|
||||||
|
delete: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: 'Workflow Job Template 1',
|
||||||
|
url: '/templates/workflow_job_template/4',
|
||||||
|
type: 'workflow_job_template',
|
||||||
|
summary_fields: {
|
||||||
|
user_capabilities: {
|
||||||
|
delete: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: 'Workflow Job Template 2',
|
||||||
|
url: '/templates/workflow_job_template/5',
|
||||||
|
type: 'workflow_job_template',
|
||||||
|
summary_fields: {
|
||||||
|
user_capabilities: {
|
||||||
|
delete: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
describe('<DashboardTemplateList />', () => {
|
||||||
|
let debug;
|
||||||
|
beforeEach(() => {
|
||||||
|
UnifiedJobTemplatesAPI.read.mockResolvedValue({
|
||||||
|
data: {
|
||||||
|
count: mockTemplates.length,
|
||||||
|
results: mockTemplates,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
UnifiedJobTemplatesAPI.readOptions.mockResolvedValue({
|
||||||
|
data: {
|
||||||
|
actions: [],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
debug = global.console.debug; // eslint-disable-line prefer-destructuring
|
||||||
|
global.console.debug = () => {};
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
jest.clearAllMocks();
|
||||||
|
global.console.debug = debug;
|
||||||
|
});
|
||||||
|
|
||||||
|
test('initially renders successfully', async () => {
|
||||||
|
await act(async () => {
|
||||||
|
mountWithContexts(
|
||||||
|
<DashboardTemplateList
|
||||||
|
match={{ path: '/templates', url: '/templates' }}
|
||||||
|
location={{ search: '', pathname: '/templates' }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Templates are retrieved from the api and the components finishes loading', async () => {
|
||||||
|
let wrapper;
|
||||||
|
await act(async () => {
|
||||||
|
wrapper = mountWithContexts(<DashboardTemplateList />);
|
||||||
|
});
|
||||||
|
expect(UnifiedJobTemplatesAPI.read).toBeCalled();
|
||||||
|
await act(async () => {
|
||||||
|
await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
|
||||||
|
});
|
||||||
|
expect(wrapper.find('DashboardTemplateListItem').length).toEqual(5);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('handleSelect is called when a template list item is selected', async () => {
|
||||||
|
const wrapper = mountWithContexts(<DashboardTemplateList />);
|
||||||
|
await act(async () => {
|
||||||
|
await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
|
||||||
|
});
|
||||||
|
const checkBox = wrapper
|
||||||
|
.find('DashboardTemplateListItem')
|
||||||
|
.at(1)
|
||||||
|
.find('input');
|
||||||
|
|
||||||
|
checkBox.simulate('change', {
|
||||||
|
target: {
|
||||||
|
id: 2,
|
||||||
|
name: 'Job Template 2',
|
||||||
|
url: '/templates/job_template/2',
|
||||||
|
type: 'job_template',
|
||||||
|
summary_fields: { user_capabilities: { delete: true } },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(
|
||||||
|
wrapper
|
||||||
|
.find('DashboardTemplateListItem')
|
||||||
|
.at(1)
|
||||||
|
.prop('isSelected')
|
||||||
|
).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('handleSelectAll is called when a template list item is selected', async () => {
|
||||||
|
const wrapper = mountWithContexts(<DashboardTemplateList />);
|
||||||
|
await act(async () => {
|
||||||
|
await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
|
||||||
|
});
|
||||||
|
expect(wrapper.find('Checkbox#select-all').prop('isChecked')).toBe(false);
|
||||||
|
|
||||||
|
const toolBarCheckBox = wrapper.find('Checkbox#select-all');
|
||||||
|
act(() => {
|
||||||
|
toolBarCheckBox.prop('onChange')(true);
|
||||||
|
});
|
||||||
|
wrapper.update();
|
||||||
|
expect(wrapper.find('Checkbox#select-all').prop('isChecked')).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('delete button is disabled if user does not have delete capabilities on a selected template', async () => {
|
||||||
|
const wrapper = mountWithContexts(<DashboardTemplateList />);
|
||||||
|
await act(async () => {
|
||||||
|
await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
|
||||||
|
});
|
||||||
|
const deleteableItem = wrapper
|
||||||
|
.find('DashboardTemplateListItem')
|
||||||
|
.at(0)
|
||||||
|
.find('input');
|
||||||
|
const nonDeleteableItem = wrapper
|
||||||
|
.find('DashboardTemplateListItem')
|
||||||
|
.at(4)
|
||||||
|
.find('input');
|
||||||
|
|
||||||
|
deleteableItem.simulate('change', {
|
||||||
|
id: 1,
|
||||||
|
name: 'Job Template 1',
|
||||||
|
url: '/templates/job_template/1',
|
||||||
|
type: 'job_template',
|
||||||
|
summary_fields: {
|
||||||
|
user_capabilities: {
|
||||||
|
delete: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.find('Button[aria-label="Delete"]').prop('isDisabled')).toBe(
|
||||||
|
false
|
||||||
|
);
|
||||||
|
deleteableItem.simulate('change', {
|
||||||
|
id: 1,
|
||||||
|
name: 'Job Template 1',
|
||||||
|
url: '/templates/job_template/1',
|
||||||
|
type: 'job_template',
|
||||||
|
summary_fields: {
|
||||||
|
user_capabilities: {
|
||||||
|
delete: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
expect(wrapper.find('Button[aria-label="Delete"]').prop('isDisabled')).toBe(
|
||||||
|
true
|
||||||
|
);
|
||||||
|
nonDeleteableItem.simulate('change', {
|
||||||
|
id: 5,
|
||||||
|
name: 'Workflow Job Template 2',
|
||||||
|
url: '/templates/workflow_job_template/5',
|
||||||
|
type: 'workflow_job_template',
|
||||||
|
summary_fields: {
|
||||||
|
user_capabilities: {
|
||||||
|
delete: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
expect(wrapper.find('Button[aria-label="Delete"]').prop('isDisabled')).toBe(
|
||||||
|
true
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('api is called to delete templates for each selected template.', async () => {
|
||||||
|
const wrapper = mountWithContexts(<DashboardTemplateList />);
|
||||||
|
await act(async () => {
|
||||||
|
await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
|
||||||
|
});
|
||||||
|
const jobTemplate = wrapper
|
||||||
|
.find('DashboardTemplateListItem')
|
||||||
|
.at(1)
|
||||||
|
.find('input');
|
||||||
|
const workflowJobTemplate = wrapper
|
||||||
|
.find('DashboardTemplateListItem')
|
||||||
|
.at(3)
|
||||||
|
.find('input');
|
||||||
|
|
||||||
|
jobTemplate.simulate('change', {
|
||||||
|
target: {
|
||||||
|
id: 2,
|
||||||
|
name: 'Job Template 2',
|
||||||
|
url: '/templates/job_template/2',
|
||||||
|
type: 'job_template',
|
||||||
|
summary_fields: { user_capabilities: { delete: true } },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
workflowJobTemplate.simulate('change', {
|
||||||
|
target: {
|
||||||
|
id: 4,
|
||||||
|
name: 'Workflow Job Template 1',
|
||||||
|
url: '/templates/workflow_job_template/4',
|
||||||
|
type: 'workflow_job_template',
|
||||||
|
summary_fields: {
|
||||||
|
user_capabilities: {
|
||||||
|
delete: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
wrapper.find('button[aria-label="Delete"]').prop('onClick')();
|
||||||
|
});
|
||||||
|
wrapper.update();
|
||||||
|
await act(async () => {
|
||||||
|
await wrapper
|
||||||
|
.find('button[aria-label="confirm delete"]')
|
||||||
|
.prop('onClick')();
|
||||||
|
});
|
||||||
|
expect(JobTemplatesAPI.destroy).toBeCalledWith(2);
|
||||||
|
expect(WorkflowJobTemplatesAPI.destroy).toBeCalledWith(4);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('error is shown when template not successfully deleted from api', async () => {
|
||||||
|
JobTemplatesAPI.destroy.mockRejectedValue(
|
||||||
|
new Error({
|
||||||
|
response: {
|
||||||
|
config: {
|
||||||
|
method: 'delete',
|
||||||
|
url: '/api/v2/job_templates/1',
|
||||||
|
},
|
||||||
|
data: 'An error occurred',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
const wrapper = mountWithContexts(<DashboardTemplateList />);
|
||||||
|
await act(async () => {
|
||||||
|
await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
|
||||||
|
});
|
||||||
|
const checkBox = wrapper
|
||||||
|
.find('DashboardTemplateListItem')
|
||||||
|
.at(1)
|
||||||
|
.find('input');
|
||||||
|
|
||||||
|
checkBox.simulate('change', {
|
||||||
|
target: {
|
||||||
|
id: 'a',
|
||||||
|
name: 'Job Template 2',
|
||||||
|
url: '/templates/job_template/2',
|
||||||
|
type: 'job_template',
|
||||||
|
summary_fields: { user_capabilities: { delete: true } },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
await act(async () => {
|
||||||
|
wrapper.find('button[aria-label="Delete"]').prop('onClick')();
|
||||||
|
});
|
||||||
|
wrapper.update();
|
||||||
|
await act(async () => {
|
||||||
|
await wrapper
|
||||||
|
.find('button[aria-label="confirm delete"]')
|
||||||
|
.prop('onClick')();
|
||||||
|
});
|
||||||
|
|
||||||
|
await waitForElement(
|
||||||
|
wrapper,
|
||||||
|
'Modal[aria-label="Deletion Error"]',
|
||||||
|
el => el.props().isOpen === true && el.props().title === 'Error!'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
test('should properly copy template', async () => {
|
||||||
|
JobTemplatesAPI.copy.mockResolvedValue({});
|
||||||
|
const wrapper = mountWithContexts(<DashboardTemplateList />);
|
||||||
|
await act(async () => {
|
||||||
|
await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
|
||||||
|
});
|
||||||
|
await act(async () =>
|
||||||
|
wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
|
||||||
|
);
|
||||||
|
expect(JobTemplatesAPI.copy).toHaveBeenCalled();
|
||||||
|
expect(UnifiedJobTemplatesAPI.read).toHaveBeenCalled();
|
||||||
|
wrapper.update();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,179 @@
|
|||||||
|
import 'styled-components/macro';
|
||||||
|
import React, { useState, useCallback } from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
DataListAction as _DataListAction,
|
||||||
|
DataListCheck,
|
||||||
|
DataListItem,
|
||||||
|
DataListItemRow,
|
||||||
|
DataListItemCells,
|
||||||
|
Tooltip,
|
||||||
|
} from '@patternfly/react-core';
|
||||||
|
import { t } from '@lingui/macro';
|
||||||
|
import { withI18n } from '@lingui/react';
|
||||||
|
import {
|
||||||
|
ExclamationTriangleIcon,
|
||||||
|
PencilAltIcon,
|
||||||
|
ProjectDiagramIcon,
|
||||||
|
RocketIcon,
|
||||||
|
} from '@patternfly/react-icons';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
import DataListCell from '../../../components/DataListCell';
|
||||||
|
import { timeOfDay } from '../../../util/dates';
|
||||||
|
import { JobTemplatesAPI, WorkflowJobTemplatesAPI } from '../../../api';
|
||||||
|
import LaunchButton from '../../../components/LaunchButton';
|
||||||
|
import Sparkline from '../../../components/Sparkline';
|
||||||
|
import { toTitleCase } from '../../../util/strings';
|
||||||
|
import CopyButton from '../../../components/CopyButton';
|
||||||
|
|
||||||
|
const DataListAction = styled(_DataListAction)`
|
||||||
|
align-items: center;
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 16px;
|
||||||
|
grid-template-columns: repeat(4, 40px);
|
||||||
|
`;
|
||||||
|
|
||||||
|
function DashboardTemplateListItem({
|
||||||
|
i18n,
|
||||||
|
template,
|
||||||
|
isSelected,
|
||||||
|
onSelect,
|
||||||
|
detailUrl,
|
||||||
|
fetchTemplates,
|
||||||
|
}) {
|
||||||
|
const [isDisabled, setIsDisabled] = useState(false);
|
||||||
|
const labelId = `check-action-${template.id}`;
|
||||||
|
|
||||||
|
const copyTemplate = useCallback(async () => {
|
||||||
|
if (template.type === 'job_template') {
|
||||||
|
await JobTemplatesAPI.copy(template.id, {
|
||||||
|
name: `${template.name} @ ${timeOfDay()}`,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
await WorkflowJobTemplatesAPI.copy(template.id, {
|
||||||
|
name: `${template.name} @ ${timeOfDay()}`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
await fetchTemplates();
|
||||||
|
}, [fetchTemplates, template.id, template.name, template.type]);
|
||||||
|
|
||||||
|
const handleCopyStart = useCallback(() => {
|
||||||
|
setIsDisabled(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleCopyFinish = useCallback(() => {
|
||||||
|
setIsDisabled(false);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const missingResourceIcon =
|
||||||
|
template.type === 'job_template' &&
|
||||||
|
(!template.summary_fields.project ||
|
||||||
|
(!template.summary_fields.inventory &&
|
||||||
|
!template.ask_inventory_on_launch));
|
||||||
|
return (
|
||||||
|
<DataListItem aria-labelledby={labelId} id={`${template.id}`}>
|
||||||
|
<DataListItemRow>
|
||||||
|
<DataListCheck
|
||||||
|
isDisabled={isDisabled}
|
||||||
|
id={`select-jobTemplate-${template.id}`}
|
||||||
|
checked={isSelected}
|
||||||
|
onChange={onSelect}
|
||||||
|
aria-labelledby={labelId}
|
||||||
|
/>
|
||||||
|
<DataListItemCells
|
||||||
|
dataListCells={[
|
||||||
|
<DataListCell key="name" id={labelId}>
|
||||||
|
<span>
|
||||||
|
<Link to={`${detailUrl}`}>
|
||||||
|
<b>{template.name}</b>
|
||||||
|
</Link>
|
||||||
|
</span>
|
||||||
|
{missingResourceIcon && (
|
||||||
|
<span>
|
||||||
|
<Tooltip
|
||||||
|
content={i18n._(
|
||||||
|
t`Resources are missing from this template.`
|
||||||
|
)}
|
||||||
|
position="right"
|
||||||
|
>
|
||||||
|
<ExclamationTriangleIcon css="color: #c9190b; margin-left: 20px;" />
|
||||||
|
</Tooltip>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</DataListCell>,
|
||||||
|
<DataListCell key="type">
|
||||||
|
{toTitleCase(template.type)}
|
||||||
|
</DataListCell>,
|
||||||
|
<DataListCell key="sparkline">
|
||||||
|
<Sparkline jobs={template.summary_fields.recent_jobs} />
|
||||||
|
</DataListCell>,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<DataListAction aria-label="actions" aria-labelledby={labelId}>
|
||||||
|
{template.type === 'workflow_job_template' && (
|
||||||
|
<Tooltip content={i18n._(t`Visualizer`)} position="top">
|
||||||
|
<Button
|
||||||
|
isDisabled={isDisabled}
|
||||||
|
aria-label={i18n._(t`Visualizer`)}
|
||||||
|
css="grid-column: 1"
|
||||||
|
variant="plain"
|
||||||
|
component={Link}
|
||||||
|
to={`/templates/workflow_job_template/${template.id}/visualizer`}
|
||||||
|
>
|
||||||
|
<ProjectDiagramIcon />
|
||||||
|
</Button>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
{template.summary_fields.user_capabilities.start && (
|
||||||
|
<Tooltip content={i18n._(t`Launch Template`)} position="top">
|
||||||
|
<LaunchButton resource={template}>
|
||||||
|
{({ handleLaunch }) => (
|
||||||
|
<Button
|
||||||
|
isDisabled={isDisabled}
|
||||||
|
aria-label={i18n._(t`Launch template`)}
|
||||||
|
css="grid-column: 2"
|
||||||
|
variant="plain"
|
||||||
|
onClick={handleLaunch}
|
||||||
|
>
|
||||||
|
<RocketIcon />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</LaunchButton>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
{template.summary_fields.user_capabilities.edit && (
|
||||||
|
<Tooltip content={i18n._(t`Edit Template`)} position="top">
|
||||||
|
<Button
|
||||||
|
isDisabled={isDisabled}
|
||||||
|
aria-label={i18n._(t`Edit Template`)}
|
||||||
|
css="grid-column: 3"
|
||||||
|
variant="plain"
|
||||||
|
component={Link}
|
||||||
|
to={`/templates/${template.type}/${template.id}/edit`}
|
||||||
|
>
|
||||||
|
<PencilAltIcon />
|
||||||
|
</Button>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
{template.summary_fields.user_capabilities.copy && (
|
||||||
|
<CopyButton
|
||||||
|
helperText={{
|
||||||
|
tooltip: i18n._(t`Copy Template`),
|
||||||
|
errorMessage: i18n._(t`Failed to copy template.`),
|
||||||
|
}}
|
||||||
|
isDisabled={isDisabled}
|
||||||
|
onCopyStart={handleCopyStart}
|
||||||
|
onCopyFinish={handleCopyFinish}
|
||||||
|
copyItem={copyTemplate}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</DataListAction>
|
||||||
|
</DataListItemRow>
|
||||||
|
</DataListItem>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { DashboardTemplateListItem as _TemplateListItem };
|
||||||
|
export default withI18n()(DashboardTemplateListItem);
|
||||||
@@ -0,0 +1,268 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { createMemoryHistory } from 'history';
|
||||||
|
import { act } from 'react-dom/test-utils';
|
||||||
|
|
||||||
|
import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
|
||||||
|
import { JobTemplatesAPI } from '../../../api';
|
||||||
|
|
||||||
|
import mockJobTemplateData from './data.job_template.json';
|
||||||
|
import DashboardTemplateListItem from './DashboardTemplateListItem';
|
||||||
|
|
||||||
|
jest.mock('../../../api');
|
||||||
|
|
||||||
|
describe('<DashboardTemplateListItem />', () => {
|
||||||
|
test('launch button shown to users with start capabilities', () => {
|
||||||
|
const wrapper = mountWithContexts(
|
||||||
|
<DashboardTemplateListItem
|
||||||
|
isSelected={false}
|
||||||
|
template={{
|
||||||
|
id: 1,
|
||||||
|
name: 'Template 1',
|
||||||
|
url: '/templates/job_template/1',
|
||||||
|
type: 'job_template',
|
||||||
|
summary_fields: {
|
||||||
|
user_capabilities: {
|
||||||
|
start: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
expect(wrapper.find('LaunchButton').exists()).toBeTruthy();
|
||||||
|
});
|
||||||
|
test('launch button hidden from users without start capabilities', () => {
|
||||||
|
const wrapper = mountWithContexts(
|
||||||
|
<DashboardTemplateListItem
|
||||||
|
isSelected={false}
|
||||||
|
template={{
|
||||||
|
id: 1,
|
||||||
|
name: 'Template 1',
|
||||||
|
url: '/templates/job_template/1',
|
||||||
|
type: 'job_template',
|
||||||
|
summary_fields: {
|
||||||
|
user_capabilities: {
|
||||||
|
start: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
expect(wrapper.find('LaunchButton').exists()).toBeFalsy();
|
||||||
|
});
|
||||||
|
test('edit button shown to users with edit capabilities', () => {
|
||||||
|
const wrapper = mountWithContexts(
|
||||||
|
<DashboardTemplateListItem
|
||||||
|
isSelected={false}
|
||||||
|
template={{
|
||||||
|
id: 1,
|
||||||
|
name: 'Template 1',
|
||||||
|
url: '/templates/job_template/1',
|
||||||
|
type: 'job_template',
|
||||||
|
summary_fields: {
|
||||||
|
user_capabilities: {
|
||||||
|
edit: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
|
||||||
|
});
|
||||||
|
test('edit button hidden from users without edit capabilities', () => {
|
||||||
|
const wrapper = mountWithContexts(
|
||||||
|
<DashboardTemplateListItem
|
||||||
|
isSelected={false}
|
||||||
|
template={{
|
||||||
|
id: 1,
|
||||||
|
name: 'Template 1',
|
||||||
|
url: '/templates/job_template/1',
|
||||||
|
type: 'job_template',
|
||||||
|
summary_fields: {
|
||||||
|
user_capabilities: {
|
||||||
|
edit: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
|
||||||
|
});
|
||||||
|
test('missing resource icon is shown.', () => {
|
||||||
|
const wrapper = mountWithContexts(
|
||||||
|
<DashboardTemplateListItem
|
||||||
|
isSelected={false}
|
||||||
|
template={{
|
||||||
|
id: 1,
|
||||||
|
name: 'Template 1',
|
||||||
|
url: '/templates/job_template/1',
|
||||||
|
type: 'job_template',
|
||||||
|
summary_fields: {
|
||||||
|
user_capabilities: {
|
||||||
|
edit: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(true);
|
||||||
|
});
|
||||||
|
test('missing resource icon is not shown when there is a project and an inventory.', () => {
|
||||||
|
const wrapper = mountWithContexts(
|
||||||
|
<DashboardTemplateListItem
|
||||||
|
isSelected={false}
|
||||||
|
template={{
|
||||||
|
id: 1,
|
||||||
|
name: 'Template 1',
|
||||||
|
url: '/templates/job_template/1',
|
||||||
|
type: 'job_template',
|
||||||
|
summary_fields: {
|
||||||
|
user_capabilities: {
|
||||||
|
edit: false,
|
||||||
|
},
|
||||||
|
project: { name: 'Foo', id: 2 },
|
||||||
|
inventory: { name: 'Bar', id: 2 },
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
|
||||||
|
});
|
||||||
|
test('missing resource icon is not shown when inventory is prompt_on_launch, and a project', () => {
|
||||||
|
const wrapper = mountWithContexts(
|
||||||
|
<DashboardTemplateListItem
|
||||||
|
isSelected={false}
|
||||||
|
template={{
|
||||||
|
id: 1,
|
||||||
|
name: 'Template 1',
|
||||||
|
url: '/templates/job_template/1',
|
||||||
|
type: 'job_template',
|
||||||
|
ask_inventory_on_launch: true,
|
||||||
|
summary_fields: {
|
||||||
|
user_capabilities: {
|
||||||
|
edit: false,
|
||||||
|
},
|
||||||
|
project: { name: 'Foo', id: 2 },
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
|
||||||
|
});
|
||||||
|
test('missing resource icon is not shown type is workflow_job_template', () => {
|
||||||
|
const wrapper = mountWithContexts(
|
||||||
|
<DashboardTemplateListItem
|
||||||
|
isSelected={false}
|
||||||
|
template={{
|
||||||
|
id: 1,
|
||||||
|
name: 'Template 1',
|
||||||
|
url: '/templates/job_template/1',
|
||||||
|
type: 'workflow_job_template',
|
||||||
|
summary_fields: {
|
||||||
|
user_capabilities: {
|
||||||
|
edit: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
|
||||||
|
});
|
||||||
|
test('clicking on template from templates list navigates properly', () => {
|
||||||
|
const history = createMemoryHistory({
|
||||||
|
initialEntries: ['/templates'],
|
||||||
|
});
|
||||||
|
const wrapper = mountWithContexts(
|
||||||
|
<DashboardTemplateListItem
|
||||||
|
isSelected={false}
|
||||||
|
detailUrl="/templates/job_template/1/details"
|
||||||
|
template={{
|
||||||
|
id: 1,
|
||||||
|
name: 'Template 1',
|
||||||
|
summary_fields: {
|
||||||
|
user_capabilities: {
|
||||||
|
edit: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>,
|
||||||
|
{ context: { router: { history } } }
|
||||||
|
);
|
||||||
|
wrapper.find('Link').simulate('click', { button: 0 });
|
||||||
|
expect(history.location.pathname).toEqual(
|
||||||
|
'/templates/job_template/1/details'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
test('should call api to copy template', async () => {
|
||||||
|
JobTemplatesAPI.copy.mockResolvedValue();
|
||||||
|
|
||||||
|
const wrapper = mountWithContexts(
|
||||||
|
<DashboardTemplateListItem
|
||||||
|
isSelected={false}
|
||||||
|
detailUrl="/templates/job_template/1/details"
|
||||||
|
template={mockJobTemplateData}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
await act(async () =>
|
||||||
|
wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
|
||||||
|
);
|
||||||
|
expect(JobTemplatesAPI.copy).toHaveBeenCalled();
|
||||||
|
jest.clearAllMocks();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render proper alert modal on copy error', async () => {
|
||||||
|
JobTemplatesAPI.copy.mockRejectedValue(new Error());
|
||||||
|
|
||||||
|
const wrapper = mountWithContexts(
|
||||||
|
<DashboardTemplateListItem
|
||||||
|
isSelected={false}
|
||||||
|
detailUrl="/templates/job_template/1/details"
|
||||||
|
template={mockJobTemplateData}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
await act(async () =>
|
||||||
|
wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
|
||||||
|
);
|
||||||
|
wrapper.update();
|
||||||
|
expect(wrapper.find('Modal').prop('isOpen')).toBe(true);
|
||||||
|
jest.clearAllMocks();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should not render copy button', async () => {
|
||||||
|
const wrapper = mountWithContexts(
|
||||||
|
<DashboardTemplateListItem
|
||||||
|
isSelected={false}
|
||||||
|
detailUrl="/templates/job_template/1/details"
|
||||||
|
template={{
|
||||||
|
...mockJobTemplateData,
|
||||||
|
summary_fields: { user_capabilities: { copy: false } },
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
expect(wrapper.find('CopyButton').length).toBe(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render visualizer button for workflow', async () => {
|
||||||
|
const wrapper = mountWithContexts(
|
||||||
|
<DashboardTemplateListItem
|
||||||
|
isSelected={false}
|
||||||
|
detailUrl="/templates/job_template/1/details"
|
||||||
|
template={{
|
||||||
|
...mockJobTemplateData,
|
||||||
|
type: 'workflow_job_template',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
expect(wrapper.find('ProjectDiagramIcon').length).toBe(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should not render visualizer button for job template', async () => {
|
||||||
|
const wrapper = mountWithContexts(
|
||||||
|
<DashboardTemplateListItem
|
||||||
|
isSelected={false}
|
||||||
|
detailUrl="/templates/job_template/1/details"
|
||||||
|
template={mockJobTemplateData}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
expect(wrapper.find('ProjectDiagramIcon').length).toBe(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
292
awx/ui_next/src/screens/Dashboard/shared/LineChart.jsx
Normal file
292
awx/ui_next/src/screens/Dashboard/shared/LineChart.jsx
Normal file
@@ -0,0 +1,292 @@
|
|||||||
|
import React, { useEffect, useCallback } from 'react';
|
||||||
|
import { string, number, shape, arrayOf } from 'prop-types';
|
||||||
|
import * as d3 from 'd3';
|
||||||
|
import { t } from '@lingui/macro';
|
||||||
|
import { withI18n } from '@lingui/react';
|
||||||
|
import { PageContextConsumer } from '@patternfly/react-core';
|
||||||
|
|
||||||
|
import ChartTooltip from './ChartTooltip';
|
||||||
|
|
||||||
|
function LineChart({ id, data, height, i18n, pageContext }) {
|
||||||
|
const { isNavOpen } = pageContext;
|
||||||
|
|
||||||
|
// Methods
|
||||||
|
const draw = useCallback(() => {
|
||||||
|
const margin = { top: 15, right: 15, bottom: 35, left: 70 };
|
||||||
|
|
||||||
|
const getWidth = () => {
|
||||||
|
let width;
|
||||||
|
// This is in an a try/catch due to an error from jest.
|
||||||
|
// Even though the d3.select returns a valid selector with
|
||||||
|
// style function, it says it is null in the test
|
||||||
|
try {
|
||||||
|
width =
|
||||||
|
parseInt(d3.select(`#${id}`).style('width'), 10) -
|
||||||
|
margin.left -
|
||||||
|
margin.right || 700;
|
||||||
|
} catch (error) {
|
||||||
|
width = 700;
|
||||||
|
}
|
||||||
|
return width;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Clear our chart container element first
|
||||||
|
d3.selectAll(`#${id} > *`).remove();
|
||||||
|
const width = getWidth();
|
||||||
|
|
||||||
|
function transition(path) {
|
||||||
|
path
|
||||||
|
.transition()
|
||||||
|
.duration(1000)
|
||||||
|
.attrTween('stroke-dasharray', tweenDash);
|
||||||
|
}
|
||||||
|
|
||||||
|
function tweenDash(...params) {
|
||||||
|
const l = params[2][params[1]].getTotalLength();
|
||||||
|
const i = d3.interpolateString(`0,${l}`, `${l},${l}`);
|
||||||
|
return val => i(val);
|
||||||
|
}
|
||||||
|
|
||||||
|
const x = d3.scaleTime().rangeRound([0, width]);
|
||||||
|
const y = d3.scaleLinear().range([height, 0]);
|
||||||
|
|
||||||
|
// [success, fail, total]
|
||||||
|
const colors = d3.scaleOrdinal(['#6EC664', '#A30000', '#06C']);
|
||||||
|
const svg = d3
|
||||||
|
.select(`#${id}`)
|
||||||
|
.append('svg')
|
||||||
|
.attr('width', width + margin.left + margin.right)
|
||||||
|
.attr('height', height + margin.top + margin.bottom)
|
||||||
|
// .attr('id', 'foo')
|
||||||
|
.attr('z', 100)
|
||||||
|
.append('g')
|
||||||
|
.attr('id', 'chart-container')
|
||||||
|
.attr('transform', `translate(${margin.left}, ${margin.top})`);
|
||||||
|
// Tooltip
|
||||||
|
const tooltip = new ChartTooltip({
|
||||||
|
svg: `#${id}`,
|
||||||
|
colors,
|
||||||
|
label: i18n._(t`Jobs`),
|
||||||
|
i18n,
|
||||||
|
});
|
||||||
|
const parseTime = d3.timeParse('%Y-%m-%d');
|
||||||
|
|
||||||
|
const formattedData = data.reduce(
|
||||||
|
(formatted, { created, successful, failed }) => {
|
||||||
|
const DATE = parseTime(created) || new Date();
|
||||||
|
const RAN = +successful || 0;
|
||||||
|
const FAIL = +failed || 0;
|
||||||
|
const TOTAL = +successful + failed || 0;
|
||||||
|
return formatted.concat({ DATE, RAN, FAIL, TOTAL });
|
||||||
|
},
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
// Scale the range of the data
|
||||||
|
const largestY = formattedData.reduce((a_max, b) => {
|
||||||
|
const b_max = Math.max(b.RAN > b.FAIL ? b.RAN : b.FAIL);
|
||||||
|
return a_max > b_max ? a_max : b_max;
|
||||||
|
}, 0);
|
||||||
|
x.domain(d3.extent(formattedData, d => d.DATE));
|
||||||
|
y.domain([
|
||||||
|
0,
|
||||||
|
largestY > 4 ? largestY + Math.max(largestY / 10, 1) : 5,
|
||||||
|
]).nice();
|
||||||
|
|
||||||
|
const successLine = d3
|
||||||
|
.line()
|
||||||
|
.curve(d3.curveMonotoneX)
|
||||||
|
.x(d => x(d.DATE))
|
||||||
|
.y(d => y(d.RAN));
|
||||||
|
|
||||||
|
const failLine = d3
|
||||||
|
.line()
|
||||||
|
.defined(d => typeof d.FAIL === 'number')
|
||||||
|
.curve(d3.curveMonotoneX)
|
||||||
|
.x(d => x(d.DATE))
|
||||||
|
.y(d => y(d.FAIL));
|
||||||
|
// Add the Y Axis
|
||||||
|
svg
|
||||||
|
.append('g')
|
||||||
|
.attr('class', 'y-axis')
|
||||||
|
.call(
|
||||||
|
d3
|
||||||
|
.axisLeft(y)
|
||||||
|
.ticks(
|
||||||
|
largestY > 3
|
||||||
|
? Math.min(largestY + Math.max(largestY / 10, 1), 10)
|
||||||
|
: 5
|
||||||
|
)
|
||||||
|
.tickSize(-width)
|
||||||
|
.tickFormat(d3.format('d'))
|
||||||
|
)
|
||||||
|
.selectAll('line')
|
||||||
|
.attr('stroke', '#d7d7d7');
|
||||||
|
svg.selectAll('.y-axis .tick text').attr('x', -5);
|
||||||
|
|
||||||
|
// text label for the y axis
|
||||||
|
svg
|
||||||
|
.append('text')
|
||||||
|
.attr('transform', 'rotate(-90)')
|
||||||
|
.attr('y', 0 - margin.left)
|
||||||
|
.attr('x', 0 - height / 2)
|
||||||
|
.attr('dy', '1em')
|
||||||
|
.style('text-anchor', 'middle')
|
||||||
|
.text('Job Runs');
|
||||||
|
|
||||||
|
// Add the X Axis
|
||||||
|
let ticks;
|
||||||
|
const maxTicks = Math.round(
|
||||||
|
formattedData.length / (formattedData.length / 2)
|
||||||
|
);
|
||||||
|
ticks = formattedData.map(d => d.DATE);
|
||||||
|
if (formattedData.length === 31) {
|
||||||
|
ticks = formattedData
|
||||||
|
.map((d, i) => (i % maxTicks === 0 ? d.DATE : undefined))
|
||||||
|
.filter(item => item);
|
||||||
|
}
|
||||||
|
|
||||||
|
svg.select('.domain').attr('stroke', '#d7d7d7');
|
||||||
|
|
||||||
|
svg
|
||||||
|
.append('g')
|
||||||
|
.attr('class', 'x-axis')
|
||||||
|
.attr('transform', `translate(0, ${height})`)
|
||||||
|
.call(
|
||||||
|
d3
|
||||||
|
.axisBottom(x)
|
||||||
|
.tickValues(ticks)
|
||||||
|
.tickSize(-height)
|
||||||
|
.tickFormat(d3.timeFormat('%-m/%-d')) // "1/19"
|
||||||
|
) // "Jan-01"
|
||||||
|
.selectAll('line')
|
||||||
|
.attr('stroke', '#d7d7d7');
|
||||||
|
|
||||||
|
svg.selectAll('.x-axis .tick text').attr('y', 10);
|
||||||
|
|
||||||
|
// text label for the x axis
|
||||||
|
svg
|
||||||
|
.append('text')
|
||||||
|
.attr(
|
||||||
|
'transform',
|
||||||
|
`translate(${width / 2} , ${height + margin.top + 20})`
|
||||||
|
)
|
||||||
|
.style('text-anchor', 'middle')
|
||||||
|
.text('Date');
|
||||||
|
const vertical = svg
|
||||||
|
.append('path')
|
||||||
|
.attr('class', 'mouse-line')
|
||||||
|
.style('stroke', 'black')
|
||||||
|
.style('stroke-width', '3px')
|
||||||
|
.style('stroke-dasharray', '3, 3')
|
||||||
|
.style('opacity', '0');
|
||||||
|
|
||||||
|
const handleMouseOver = d => {
|
||||||
|
tooltip.handleMouseOver(d);
|
||||||
|
// show vertical line
|
||||||
|
vertical.transition().style('opacity', '1');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseMove = function mouseMove(...params) {
|
||||||
|
const intersectX = params[2][params[1]].cx.baseVal.value;
|
||||||
|
vertical.attr('d', () => `M${intersectX},${height} ${intersectX},${0}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseOut = () => {
|
||||||
|
// hide tooltip
|
||||||
|
tooltip.handleMouseOut();
|
||||||
|
// hide vertical line
|
||||||
|
vertical.transition().style('opacity', 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add the successLine path.
|
||||||
|
svg
|
||||||
|
.append('path')
|
||||||
|
.data([formattedData])
|
||||||
|
.attr('class', 'line')
|
||||||
|
.style('fill', 'none')
|
||||||
|
.style('stroke', () => colors(1))
|
||||||
|
.attr('stroke-width', 2)
|
||||||
|
.attr('d', successLine)
|
||||||
|
.call(transition);
|
||||||
|
|
||||||
|
// Add the failLine path.
|
||||||
|
svg
|
||||||
|
.append('path')
|
||||||
|
.data([formattedData])
|
||||||
|
.attr('class', 'line')
|
||||||
|
.style('fill', 'none')
|
||||||
|
.style('stroke', () => colors(0))
|
||||||
|
.attr('stroke-width', 2)
|
||||||
|
.attr('d', failLine)
|
||||||
|
.call(transition);
|
||||||
|
|
||||||
|
const dateFormat = d3.timeFormat('%-m-%-d');
|
||||||
|
|
||||||
|
// create our successLine circles
|
||||||
|
svg
|
||||||
|
.selectAll('dot')
|
||||||
|
.data(formattedData)
|
||||||
|
.enter()
|
||||||
|
.append('circle')
|
||||||
|
.attr('r', 3)
|
||||||
|
.style('stroke', () => colors(1))
|
||||||
|
.style('fill', () => colors(1))
|
||||||
|
.attr('cx', d => x(d.DATE))
|
||||||
|
.attr('cy', d => y(d.RAN))
|
||||||
|
.attr('id', d => `success-dot-${dateFormat(d.DATE)}`)
|
||||||
|
.on('mouseover', handleMouseOver)
|
||||||
|
.on('mousemove', handleMouseMove)
|
||||||
|
.on('mouseout', handleMouseOut);
|
||||||
|
// create our failLine circles
|
||||||
|
svg
|
||||||
|
.selectAll('dot')
|
||||||
|
.data(formattedData)
|
||||||
|
.enter()
|
||||||
|
.append('circle')
|
||||||
|
.attr('r', 3)
|
||||||
|
.style('stroke', () => colors(0))
|
||||||
|
.style('fill', () => colors(0))
|
||||||
|
.attr('cx', d => x(d.DATE))
|
||||||
|
.attr('cy', d => y(d.FAIL))
|
||||||
|
.attr('id', d => `success-dot-${dateFormat(d.DATE)}`)
|
||||||
|
.on('mouseover', handleMouseOver)
|
||||||
|
.on('mousemove', handleMouseMove)
|
||||||
|
.on('mouseout', handleMouseOut);
|
||||||
|
}, [data, height, i18n, id]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
draw();
|
||||||
|
}, [draw, isNavOpen]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
function handleResize() {
|
||||||
|
draw();
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
|
||||||
|
handleResize();
|
||||||
|
|
||||||
|
return () => window.removeEventListener('resize', handleResize);
|
||||||
|
}, [draw]);
|
||||||
|
|
||||||
|
return <div id={id} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
LineChart.propTypes = {
|
||||||
|
id: string.isRequired,
|
||||||
|
data: arrayOf(shape({})).isRequired,
|
||||||
|
height: number.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
const withPageContext = Component => {
|
||||||
|
return function contextComponent(props) {
|
||||||
|
return (
|
||||||
|
<PageContextConsumer>
|
||||||
|
{pageContext => <Component {...props} pageContext={pageContext} />}
|
||||||
|
</PageContextConsumer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default withI18n()(withPageContext(LineChart));
|
||||||
181
awx/ui_next/src/screens/Dashboard/shared/data.job_template.json
Normal file
181
awx/ui_next/src/screens/Dashboard/shared/data.job_template.json
Normal file
@@ -0,0 +1,181 @@
|
|||||||
|
{
|
||||||
|
"id": 7,
|
||||||
|
"type": "job_template",
|
||||||
|
"url": "/api/v2/job_templates/7/",
|
||||||
|
"related": {
|
||||||
|
"named_url": "/api/v2/job_templates/Mike's JT/",
|
||||||
|
"created_by": "/api/v2/users/1/",
|
||||||
|
"modified_by": "/api/v2/users/1/",
|
||||||
|
"labels": "/api/v2/job_templates/7/labels/",
|
||||||
|
"inventory": "/api/v2/inventories/1/",
|
||||||
|
"project": "/api/v2/projects/6/",
|
||||||
|
"credentials": "/api/v2/job_templates/7/credentials/",
|
||||||
|
"last_job": "/api/v2/jobs/12/",
|
||||||
|
"jobs": "/api/v2/job_templates/7/jobs/",
|
||||||
|
"schedules": "/api/v2/job_templates/7/schedules/",
|
||||||
|
"activity_stream": "/api/v2/job_templates/7/activity_stream/",
|
||||||
|
"launch": "/api/v2/job_templates/7/launch/",
|
||||||
|
"notification_templates_started": "/api/v2/job_templates/7/notification_templates_started/",
|
||||||
|
"notification_templates_success": "/api/v2/job_templates/7/notification_templates_success/",
|
||||||
|
"notification_templates_error": "/api/v2/job_templates/7/notification_templates_error/",
|
||||||
|
"access_list": "/api/v2/job_templates/7/access_list/",
|
||||||
|
"survey_spec": "/api/v2/job_templates/7/survey_spec/",
|
||||||
|
"object_roles": "/api/v2/job_templates/7/object_roles/",
|
||||||
|
"instance_groups": "/api/v2/job_templates/7/instance_groups/",
|
||||||
|
"slice_workflow_jobs": "/api/v2/job_templates/7/slice_workflow_jobs/",
|
||||||
|
"copy": "/api/v2/job_templates/7/copy/",
|
||||||
|
"webhook_receiver": "/api/v2/job_templates/7/github/",
|
||||||
|
"webhook_key": "/api/v2/job_templates/7/webhook_key/"
|
||||||
|
},
|
||||||
|
"summary_fields": {
|
||||||
|
"inventory": {
|
||||||
|
"id": 1,
|
||||||
|
"name": "Mike's Inventory",
|
||||||
|
"description": "",
|
||||||
|
"has_active_failures": false,
|
||||||
|
"total_hosts": 1,
|
||||||
|
"hosts_with_active_failures": 0,
|
||||||
|
"total_groups": 0,
|
||||||
|
"groups_with_active_failures": 0,
|
||||||
|
"has_inventory_sources": false,
|
||||||
|
"total_inventory_sources": 0,
|
||||||
|
"inventory_sources_with_failures": 0,
|
||||||
|
"organization_id": 1,
|
||||||
|
"kind": ""
|
||||||
|
},
|
||||||
|
"project": {
|
||||||
|
"id": 6,
|
||||||
|
"name": "Mike's Project",
|
||||||
|
"description": "",
|
||||||
|
"status": "successful",
|
||||||
|
"scm_type": "git"
|
||||||
|
},
|
||||||
|
"last_job": {
|
||||||
|
"id": 12,
|
||||||
|
"name": "Mike's JT",
|
||||||
|
"description": "",
|
||||||
|
"finished": "2019-10-01T14:34:35.142483Z",
|
||||||
|
"status": "successful",
|
||||||
|
"failed": false
|
||||||
|
},
|
||||||
|
"last_update": {
|
||||||
|
"id": 12,
|
||||||
|
"name": "Mike's JT",
|
||||||
|
"description": "",
|
||||||
|
"status": "successful",
|
||||||
|
"failed": false
|
||||||
|
},
|
||||||
|
"created_by": {
|
||||||
|
"id": 1,
|
||||||
|
"username": "admin",
|
||||||
|
"first_name": "",
|
||||||
|
"last_name": ""
|
||||||
|
},
|
||||||
|
"modified_by": {
|
||||||
|
"id": 1,
|
||||||
|
"username": "admin",
|
||||||
|
"first_name": "",
|
||||||
|
"last_name": ""
|
||||||
|
},
|
||||||
|
"object_roles": {
|
||||||
|
"admin_role": {
|
||||||
|
"description": "Can manage all aspects of the job template",
|
||||||
|
"name": "Admin",
|
||||||
|
"id": 24
|
||||||
|
},
|
||||||
|
"execute_role": {
|
||||||
|
"description": "May run the job template",
|
||||||
|
"name": "Execute",
|
||||||
|
"id": 25
|
||||||
|
},
|
||||||
|
"read_role": {
|
||||||
|
"description": "May view settings for the job template",
|
||||||
|
"name": "Read",
|
||||||
|
"id": 26
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"user_capabilities": {
|
||||||
|
"edit": true,
|
||||||
|
"delete": true,
|
||||||
|
"start": true,
|
||||||
|
"schedule": true,
|
||||||
|
"copy": true
|
||||||
|
},
|
||||||
|
"labels": {
|
||||||
|
"count": 1,
|
||||||
|
"results": [{
|
||||||
|
"id": 91,
|
||||||
|
"name": "L_91o2"
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
"survey": {
|
||||||
|
"title": "",
|
||||||
|
"description": ""
|
||||||
|
},
|
||||||
|
"recent_jobs": [{
|
||||||
|
"id": 12,
|
||||||
|
"status": "successful",
|
||||||
|
"finished": "2019-10-01T14:34:35.142483Z",
|
||||||
|
"type": "job"
|
||||||
|
}],
|
||||||
|
"credentials": [{
|
||||||
|
"id": 1,
|
||||||
|
"kind": "ssh",
|
||||||
|
"name": "Credential 1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"kind": "awx",
|
||||||
|
"name": "Credential 2"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"webhook_credential": {
|
||||||
|
"id": "1",
|
||||||
|
"name": "Webhook Credential"
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"created": "2019-09-30T16:18:34.564820Z",
|
||||||
|
"modified": "2019-10-01T14:47:31.818431Z",
|
||||||
|
"name": "Mike's JT",
|
||||||
|
"description": "",
|
||||||
|
"job_type": "run",
|
||||||
|
"inventory": 1,
|
||||||
|
"project": 6,
|
||||||
|
"playbook": "ping.yml",
|
||||||
|
"scm_branch": "Foo branch",
|
||||||
|
"forks": 0,
|
||||||
|
"limit": "",
|
||||||
|
"verbosity": 0,
|
||||||
|
"extra_vars": "",
|
||||||
|
"job_tags": "T_100,T_200",
|
||||||
|
"force_handlers": false,
|
||||||
|
"skip_tags": "S_100,S_200",
|
||||||
|
"start_at_task": "",
|
||||||
|
"timeout": 0,
|
||||||
|
"use_fact_cache": true,
|
||||||
|
"last_job_run": "2019-10-01T14:34:35.142483Z",
|
||||||
|
"last_job_failed": false,
|
||||||
|
"next_job_run": null,
|
||||||
|
"status": "successful",
|
||||||
|
"host_config_key": "",
|
||||||
|
"ask_scm_branch_on_launch": false,
|
||||||
|
"ask_diff_mode_on_launch": false,
|
||||||
|
"ask_variables_on_launch": false,
|
||||||
|
"ask_limit_on_launch": false,
|
||||||
|
"ask_tags_on_launch": false,
|
||||||
|
"ask_skip_tags_on_launch": false,
|
||||||
|
"ask_job_type_on_launch": false,
|
||||||
|
"ask_verbosity_on_launch": false,
|
||||||
|
"ask_inventory_on_launch": false,
|
||||||
|
"ask_credential_on_launch": false,
|
||||||
|
"survey_enabled": true,
|
||||||
|
"become_enabled": false,
|
||||||
|
"diff_mode": false,
|
||||||
|
"allow_simultaneous": false,
|
||||||
|
"custom_virtualenv": null,
|
||||||
|
"job_slice_count": 1,
|
||||||
|
"webhook_credential": 1,
|
||||||
|
"webhook_key": "asertdyuhjkhgfd234567kjgfds",
|
||||||
|
"webhook_service": "github"
|
||||||
|
}
|
||||||
@@ -1,8 +1,8 @@
|
|||||||
import React, { useEffect, useState, useCallback } from 'react';
|
import React, { Fragment, useEffect, useState, useCallback } from 'react';
|
||||||
import { useLocation } from 'react-router-dom';
|
import { useLocation } from 'react-router-dom';
|
||||||
import { withI18n } from '@lingui/react';
|
import { withI18n } from '@lingui/react';
|
||||||
import { t } from '@lingui/macro';
|
import { t } from '@lingui/macro';
|
||||||
import { Card, PageSection } from '@patternfly/react-core';
|
import { Card } from '@patternfly/react-core';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
JobTemplatesAPI,
|
JobTemplatesAPI,
|
||||||
@@ -17,7 +17,7 @@ import PaginatedDataList, {
|
|||||||
} from '../../../components/PaginatedDataList';
|
} from '../../../components/PaginatedDataList';
|
||||||
import useRequest, { useDeleteItems } from '../../../util/useRequest';
|
import useRequest, { useDeleteItems } from '../../../util/useRequest';
|
||||||
import { getQSConfig, parseQueryString } from '../../../util/qs';
|
import { getQSConfig, parseQueryString } from '../../../util/qs';
|
||||||
import useWsTemplates from './useWsTemplates';
|
import useWsTemplates from '../../../util/useWsTemplates';
|
||||||
import AddDropDownButton from '../../../components/AddDropDownButton';
|
import AddDropDownButton from '../../../components/AddDropDownButton';
|
||||||
import TemplateListItem from './TemplateListItem';
|
import TemplateListItem from './TemplateListItem';
|
||||||
|
|
||||||
@@ -134,7 +134,6 @@ function TemplateList({ i18n }) {
|
|||||||
jtActions && Object.prototype.hasOwnProperty.call(jtActions, 'POST');
|
jtActions && Object.prototype.hasOwnProperty.call(jtActions, 'POST');
|
||||||
const canAddWFJT =
|
const canAddWFJT =
|
||||||
wfjtActions && Object.prototype.hasOwnProperty.call(wfjtActions, 'POST');
|
wfjtActions && Object.prototype.hasOwnProperty.call(wfjtActions, 'POST');
|
||||||
// spreading Set() returns only unique keys
|
|
||||||
const addButtonOptions = [];
|
const addButtonOptions = [];
|
||||||
|
|
||||||
if (canAddJT) {
|
if (canAddJT) {
|
||||||
@@ -156,7 +155,7 @@ function TemplateList({ i18n }) {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageSection>
|
<Fragment>
|
||||||
<Card>
|
<Card>
|
||||||
<PaginatedDataList
|
<PaginatedDataList
|
||||||
contentError={contentError}
|
contentError={contentError}
|
||||||
@@ -267,7 +266,7 @@ function TemplateList({ i18n }) {
|
|||||||
{i18n._(t`Failed to delete one or more templates.`)}
|
{i18n._(t`Failed to delete one or more templates.`)}
|
||||||
<ErrorDetail error={deletionError} />
|
<ErrorDetail error={deletionError} />
|
||||||
</AlertModal>
|
</AlertModal>
|
||||||
</PageSection>
|
</Fragment>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
|
|||||||
import { withI18n } from '@lingui/react';
|
import { withI18n } from '@lingui/react';
|
||||||
import { t } from '@lingui/macro';
|
import { t } from '@lingui/macro';
|
||||||
import { Route, withRouter, Switch } from 'react-router-dom';
|
import { Route, withRouter, Switch } from 'react-router-dom';
|
||||||
|
import { PageSection } from '@patternfly/react-core';
|
||||||
|
|
||||||
import { Config } from '../../contexts/Config';
|
import { Config } from '../../contexts/Config';
|
||||||
import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
|
import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
|
||||||
@@ -120,7 +121,9 @@ class Templates extends Component {
|
|||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
<Route path={`${match.path}`}>
|
<Route path={`${match.path}`}>
|
||||||
<TemplateList />
|
<PageSection>
|
||||||
|
<TemplateList />
|
||||||
|
</PageSection>
|
||||||
</Route>
|
</Route>
|
||||||
</Switch>
|
</Switch>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import useWebsocket from '../../../util/useWebsocket';
|
import useWebsocket from './useWebsocket';
|
||||||
|
|
||||||
export default function useWsTemplates(initialTemplates) {
|
export default function useWsTemplates(initialTemplates) {
|
||||||
const [templates, setTemplates] = useState(initialTemplates);
|
const [templates, setTemplates] = useState(initialTemplates);
|
||||||
@@ -1,14 +1,14 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { act } from 'react-dom/test-utils';
|
import { act } from 'react-dom/test-utils';
|
||||||
import WS from 'jest-websocket-mock';
|
import WS from 'jest-websocket-mock';
|
||||||
import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
|
import { mountWithContexts } from '../../testUtils/enzymeHelpers';
|
||||||
import useWsTemplates from './useWsTemplates';
|
import useWsTemplates from './useWsTemplates';
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Jest mock timers don’t play well with jest-websocket-mock,
|
Jest mock timers don’t play well with jest-websocket-mock,
|
||||||
so we'll stub out throttling to resolve immediately
|
so we'll stub out throttling to resolve immediately
|
||||||
*/
|
*/
|
||||||
jest.mock('../../../util/useThrottle', () => ({
|
jest.mock('./useThrottle', () => ({
|
||||||
__esModule: true,
|
__esModule: true,
|
||||||
default: jest.fn(val => val),
|
default: jest.fn(val => val),
|
||||||
}));
|
}));
|
||||||
Reference in New Issue
Block a user