update dashboard and graph code to aid in automated testing

awx/ui_next/src/screens/Dashboard/Dashboard.jsx

@@ -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}

awx/ui_next/src/screens/Dashboard/shared/ChartTooltip.jsx

@@ -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 => {

awx/ui_next/src/screens/Dashboard/shared/LineChart.jsx

@@ -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);