External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-17 20:51:21 -03:30
Code Issues Packages Projects Releases Wiki Activity

update dashboard and graph code to aid in automated testing

Browse Source
This commit is contained in:
John Mitchell 2020-10-21 10:32:37 -04:00
parent 5f4d6daf1b
commit 52deb7fd86
3 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui_next/src/screens/Dashboard/Dashboard.jsx
View File

@ -155,7 +155,7 @@ function Dashboard({ i18n }) {
</PageSection>
<MainPageSection>
<div className="spacer">
<Card>
<Card id="dashboard-main-container">
<Tabs
aria-label={i18n._(t`Tabs`)}
activeKey={activeTabId}

14
awx/ui_next/src/screens/Dashboard/shared/ChartTooltip.jsx
View File

@ -1,16 +1,18 @@
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', `svg-chart-Tooltip.base-${this.svg.slice(1)}`);
this.toolTipBase.attr('id', 'chart-tooltip');
this.toolTipBase.attr('overflow', 'visible');
this.toolTipBase.style('opacity', 0);
this.toolTipBase.style('pointer-events', 'none');
@ -54,14 +56,14 @@ class Tooltip {
.attr('y', 4)
.attr('font-size', 12)
.attr('fill', 'white')
.text('Successful');
.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('Failed');
.text(this.i18n._(t`Failed`));
this.icon = this.toolTipBase
.append('text')
.attr('fill', 'white')
@ -77,13 +79,14 @@ class Tooltip {
.attr('y', -21)
.attr('font-size', 12)
.attr('text-anchor', 'end')
.text('No Jobs');
.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')
@ -91,6 +94,7 @@ class Tooltip {
.attr('font-size', 12)
.attr('x', 122)
.attr('y', 28)
.attr('id', 'failed-count')
.text('0');
this.date = this.toolTipBase
.append('text')
@ -99,7 +103,7 @@ class Tooltip {
.attr('x', 20)
.attr('y', -21)
.attr('font-size', 12)
.text('Never');
.text(this.i18n._(t`Never`));
}
handleMouseOver = d => {

9
awx/ui_next/src/screens/Dashboard/shared/LineChart.jsx
View File

@ -57,14 +57,17 @@ function LineChart({ id, data, height, i18n, pageContext }) {
.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');
@ -216,6 +219,10 @@ function LineChart({ id, data, height, i18n, pageContext }) {
.attr('stroke-width', 2)
.attr('d', failLine)
.call(transition);
const dateFormat = d3.timeFormat('%-m/%-d');
// create our successLine circles
svg
.selectAll('dot')
.data(formattedData)
@ -226,6 +233,7 @@ function LineChart({ id, data, height, i18n, pageContext }) {
.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);
@ -240,6 +248,7 @@ function LineChart({ id, data, height, i18n, pageContext }) {
.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);