mirror of
https://github.com/ansible/awx.git
synced 2026-01-12 10:30:03 -03:30
add dashboard (including counts, line chart and portal mode style lists) to ui_next
This commit is contained in:
John Mitchell
parent
5ea98ab02a
commit
a3c5f50bbf
@ -4,6 +4,7 @@ import Config from './models/Config';
|
||||
import CredentialInputSources from './models/CredentialInputSources';
|
||||
import CredentialTypes from './models/CredentialTypes';
|
||||
import Credentials from './models/Credentials';
|
||||
import Dashboard from './models/Dashboard';
|
||||
import Groups from './models/Groups';
|
||||
import Hosts from './models/Hosts';
|
||||
import InstanceGroups from './models/InstanceGroups';
|
||||
@ -42,6 +43,7 @@ const ConfigAPI = new Config();
|
||||
const CredentialInputSourcesAPI = new CredentialInputSources();
|
||||
const CredentialTypesAPI = new CredentialTypes();
|
||||
const CredentialsAPI = new Credentials();
|
||||
const DashboardAPI = new Dashboard();
|
||||
const GroupsAPI = new Groups();
|
||||
const HostsAPI = new Hosts();
|
||||
const InstanceGroupsAPI = new InstanceGroups();
|
||||
@ -81,6 +83,7 @@ export {
|
||||
CredentialInputSourcesAPI,
|
||||
CredentialTypesAPI,
|
||||
CredentialsAPI,
|
||||
DashboardAPI,
|
||||
GroupsAPI,
|
||||
HostsAPI,
|
||||
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,244 @@
|
||||
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 { t } from '@lingui/macro';
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardHeaderMain,
|
||||
CardActions,
|
||||
CardBody,
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
Select,
|
||||
SelectVariant,
|
||||
SelectOption,
|
||||
Tabs,
|
||||
Tab,
|
||||
TabTitleText,
|
||||
Text,
|
||||
TextContent,
|
||||
TextVariants,
|
||||
Title,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
class Dashboard extends Component {
|
||||
render() {
|
||||
const { i18n } = this.props;
|
||||
const { light } = PageSectionVariants;
|
||||
import useRequest from '../../util/useRequest';
|
||||
import { DashboardAPI } from '../../api';
|
||||
import JobList from '../../components/JobList';
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection variant={light} className="pf-m-condensed">
|
||||
<Title size="2xl" headingLevel="h2">
|
||||
{i18n._(t`Dashboard`)}
|
||||
</Title>
|
||||
</PageSection>
|
||||
<PageSection />
|
||||
</Fragment>
|
||||
);
|
||||
import LineChart from './shared/LineChart';
|
||||
import Count from './shared/Count';
|
||||
import DashboardTemplateList from './shared/DashboardTemplateList';
|
||||
|
||||
const Counts = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-gap: var(--pf-global--spacer--lg);
|
||||
margin-bottom: var(--pf-global--spacer--lg);
|
||||
|
||||
@media (max-width: 900px) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-auto-rows: 1fr;
|
||||
}
|
||||
`;
|
||||
|
||||
const ListPageSection = styled(PageSection)`
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
min-height: 626px;
|
||||
|
||||
& .spacer {
|
||||
margin-bottom: var(--pf-global--spacer--lg);
|
||||
}
|
||||
`;
|
||||
|
||||
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>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardHeaderMain>
|
||||
<TextContent>
|
||||
<Text component={TextVariants.h3}>{i18n._(t`Job Status`)}</Text>
|
||||
</TextContent>
|
||||
</CardHeaderMain>
|
||||
<CardActions>
|
||||
<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>
|
||||
</CardActions>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<LineChart
|
||||
height={430}
|
||||
id="d3-line-chart-root"
|
||||
data={jobGraphData}
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</PageSection>
|
||||
<ListPageSection>
|
||||
<div className="spacer">
|
||||
<Card>
|
||||
<Tabs
|
||||
aria-label={i18n._(t`Tabs`)}
|
||||
activeKey={activeTabId}
|
||||
onSelect={(key, eventKey) => setActiveTabId(eventKey)}
|
||||
>
|
||||
<Tab
|
||||
aria-label={i18n._(t`Recent Jobs list tab`)}
|
||||
eventKey={0}
|
||||
title={<TabTitleText>{i18n._(t`Recent Jobs`)}</TabTitleText>}
|
||||
/>
|
||||
<Tab
|
||||
aria-label={i18n._(t`Recent Templates list tab`)}
|
||||
eventKey={1}
|
||||
title={
|
||||
<TabTitleText>{i18n._(t`Recent Templates`)}</TabTitleText>
|
||||
}
|
||||
/>
|
||||
</Tabs>
|
||||
{activeTabId === 0 && <JobList defaultParams={{ page_size: 5 }} />}
|
||||
{activeTabId === 1 && <DashboardTemplateList />}
|
||||
</Card>
|
||||
</div>
|
||||
</ListPageSection>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default withI18n()(Dashboard);
|
||||
|
||||
@ -1,18 +1,24 @@
|
||||
import React from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
|
||||
import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
|
||||
|
||||
import { DashboardAPI } from '../../api';
|
||||
import Dashboard from './Dashboard';
|
||||
|
||||
jest.mock('../../api');
|
||||
|
||||
describe('<Dashboard />', () => {
|
||||
let pageWrapper;
|
||||
let pageSections;
|
||||
let title;
|
||||
let graphRequest;
|
||||
|
||||
beforeEach(() => {
|
||||
pageWrapper = mountWithContexts(<Dashboard />);
|
||||
pageSections = pageWrapper.find('PageSection');
|
||||
title = pageWrapper.find('Title');
|
||||
beforeEach(async () => {
|
||||
await act(async () => {
|
||||
DashboardAPI.read.mockResolvedValue({});
|
||||
graphRequest = DashboardAPI.readJobGraph;
|
||||
graphRequest.mockResolvedValue({});
|
||||
pageWrapper = mountWithContexts(<Dashboard />);
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
@ -21,9 +27,24 @@ describe('<Dashboard />', () => {
|
||||
|
||||
test('initially renders without crashing', () => {
|
||||
expect(pageWrapper.length).toBe(1);
|
||||
expect(pageSections.length).toBe(2);
|
||||
expect(title.length).toBe(1);
|
||||
expect(title.props().size).toBe('2xl');
|
||||
expect(pageSections.first().props().variant).toBe('light');
|
||||
});
|
||||
|
||||
test('renders jobs list by default', () => {
|
||||
expect(pageWrapper.find('JobList').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',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
207
awx/ui_next/src/screens/Dashboard/shared/ChartTooltip.jsx
Normal file
207
awx/ui_next/src/screens/Dashboard/shared/ChartTooltip.jsx
Normal file
@ -0,0 +1,207 @@
|
||||
import * as d3 from 'd3';
|
||||
|
||||
class Tooltip {
|
||||
constructor(opts) {
|
||||
this.label = opts.label;
|
||||
this.svg = opts.svg;
|
||||
this.colors = opts.colors;
|
||||
this.draw();
|
||||
}
|
||||
|
||||
draw() {
|
||||
this.toolTipBase = d3.select(`${this.svg} > svg`).append('g');
|
||||
this.toolTipBase.attr('id', `svg-chart-Tooltip.base-${this.svg.slice(1)}`);
|
||||
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('Successful');
|
||||
this.failText = this.toolTipBase
|
||||
.append('text')
|
||||
.attr('x', 43)
|
||||
.attr('y', 28)
|
||||
.attr('font-size', 12)
|
||||
.attr('fill', 'white')
|
||||
.text('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('No Jobs');
|
||||
this.successful = this.toolTipBase
|
||||
.append('text')
|
||||
.attr('fill', 'white')
|
||||
.attr('font-size', 12)
|
||||
.attr('x', 122)
|
||||
.attr('y', 4)
|
||||
.text('0');
|
||||
this.failed = this.toolTipBase
|
||||
.append('text')
|
||||
.attr('fill', 'white')
|
||||
.attr('font-size', 12)
|
||||
.attr('x', 122)
|
||||
.attr('y', 28)
|
||||
.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('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);
|
||||
});
|
||||
});
|
||||
283
awx/ui_next/src/screens/Dashboard/shared/LineChart.jsx
Normal file
283
awx/ui_next/src/screens/Dashboard/shared/LineChart.jsx
Normal file
@ -0,0 +1,283 @@
|
||||
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('z', 100)
|
||||
.append('g')
|
||||
.attr('transform', `translate(${margin.left}, ${margin.top})`);
|
||||
// Tooltip
|
||||
const tooltip = new ChartTooltip({
|
||||
svg: `#${id}`,
|
||||
colors,
|
||||
label: i18n._(t`Jobs`),
|
||||
});
|
||||
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);
|
||||
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))
|
||||
.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))
|
||||
.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"
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user