Skip to content

Commit

Permalink
Bug 1600752 - changes based on feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
@yogmel
yogmel committed Dec 13, 2019
1 parent 17a40da commit fc52bf9
Show file tree
Hide file tree
Showing 7 changed files with 51 additions and 179 deletions.
8 changes: 8 additions & 0 deletions ui/css/perf.css
View file
Expand Up @@ -308,6 +308,14 @@ th {
.compare-table tr .result-links a,
.compare-table tr .result-links button {
color: #23527c;
opacity: 0.5;
}

.compare-table tr .result-links a:hover,
.compare-table tr .result-links button:hover,
.compare-table tr .result-links a:focus,
.compare-table tr .result-links button:focus {
opacity: 1;
}

.compare-table tr:hover .retrigger-btn {
Expand Down
31 changes: 18 additions & 13 deletions ui/perfherder/ProgressBar.jsx
View file
Expand Up @@ -7,21 +7,26 @@ import SimpleTooltip from '../shared/SimpleTooltip';
const ProgressBar = ({ magnitude, regression, color }) => (
<SimpleTooltip
text={
<Progress multi aria-label="Magnitude of Difference">
<Progress
multi
aria-label={`Magnitude of difference based on lower is better. Metric: ${
regression ? 100 - magnitude : magnitude
} % regressed`}
>
{/* the % of the bars that are colored and transparent is based on the newIsBetter metric,
which determines whether the colored bar for magnitude is displayed on the left or right */}
<span className="sr-only sr-only-focusable">Magnitude 1</span>
<Progress
bar
value={regression ? 100 - magnitude : magnitude}
color={regression ? 'transparent' : color}
/>
<span className="sr-only sr-only-focusable">Magnitude 2</span>
<Progress
bar
value={regression ? magnitude : 100 - magnitude}
color={regression ? color : 'transparent'}
/>
<div aria-hidden="true" className="progress w-100">
<Progress
bar
value={regression ? 100 - magnitude : magnitude}
color={regression ? 'transparent' : color}
/>
<Progress
bar
value={regression ? magnitude : 100 - magnitude}
color={regression ? color : 'transparent'}
/>
</div>
</Progress>
}
tooltipText="Relative magnitude of change (scale from 0 - 20%+)"
Expand Down
18 changes: 9 additions & 9 deletions ui/perfherder/alerts/AlertTable.jsx
View file
Expand Up @@ -248,15 +248,15 @@ export default class AlertTable extends React.Component {
</tr>
</thead>
<tbody>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>Alert Name</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>Detail Hint</th>
<th>Magnitude</th>
<tr className="border">
<th> </th>
<th> </th>
<th>Test and platform</th>
<th>Previous Value</th>
<th> </th>
<th>New Value</th>
<th>Absolute Difference</th>
<th>Magnitude of Change</th>
<th>Confidence</th>
</tr>
{filteredAlerts.map(alert => (
Expand Down
19 changes: 10 additions & 9 deletions ui/perfherder/alerts/AlertTableRow.jsx
View file
Expand Up @@ -2,7 +2,7 @@

import React from 'react';
import PropTypes from 'prop-types';
import { FormGroup, Input, Label } from 'reactstrap';
import { Button, FormGroup, Input, Label } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faStar as faStarSolid,
Expand Down Expand Up @@ -208,13 +208,9 @@ export default class AlertTableRow extends React.Component {
>
<td className="table-width-xs px-1">
<FormGroup check className="ml-2 pl-4">
<Label for={alert.id} hidden>
alert {alert.id} title
</Label>
<Label hidden>alert {alert.id} title</Label>
<Input
id={alert.id}
aria-label={`alert ${alert.id} title`}
aria-labelledby={`alert ${alert.id} title`}
data-testid={`alert ${alert.id} checkbox`}
type="checkbox"
disabled={!user.isStaff}
Expand All @@ -229,8 +225,13 @@ export default class AlertTableRow extends React.Component {
</FormGroup>
</td>
<td className="px-0">
<button
type="button"
<Button
color="black"
aria-label={
starred
? 'Remove bookmark from this Alert'
: 'Bookmark this Alert'
}
className={
starred
? 'visible border border-0 bg-transparent'
Expand All @@ -243,7 +244,7 @@ export default class AlertTableRow extends React.Component {
title={starred ? 'starred' : 'not starred'}
icon={starred ? faStarSolid : faStarRegular}
/>
</button>
</Button>
</td>
<td className="text-left">
{alertStatus !== 'untriaged' ? (
Expand Down
146 changes: 2 additions & 144 deletions ui/perfherder/compare/CompareTable.jsx
View file
Expand Up @@ -51,7 +51,8 @@ export default class CompareTable extends React.PureComponent {
this.header,
)
}
title={`Permalink to this test table: ${testName}`}
title="Permalink to this test table"
aria-label={`Permalink to test ${testName} table`}
>
<FontAwesomeIcon icon={faHashtag} />
</Button>
Expand All @@ -62,7 +63,6 @@ export default class CompareTable extends React.PureComponent {
<th className="table-width-sm" />
<th className="table-width-lg">New</th>
<th className="table-width-lg">Delta</th>
{/* empty for progress bars (magnitude of difference) */}
<th className="table-width-lg">Magnitude of Difference</th>
<th className="table-width-lg">Confidence</th>
<th className="text-right table-width-md">
Expand All @@ -87,152 +87,10 @@ export default class CompareTable extends React.PureComponent {
{data.map(rowLevelResults => (
<CompareTableRow
key={rowLevelResults.name}
<<<<<<< 39891e0e01f1ef9eeed451d1efada0462f91150f
rowLevelResults={rowLevelResults}
hashFunction={hashFunction}
{...this.props}
/>
=======
>
<th className="text-left font-weight-normal pl-1">
{rowLevelResults.name}
<span className="result-links">
{onPermalinkClick && (
<span>
<Button
className="permalink p-0 ml-1"
color="link"
onClick={() =>
onPermalinkClick(
this.getHashBasedId(testName, rowLevelResults.name),
)
}
title={`Permalink to this test: ${rowLevelResults.name}`}
>
<FontAwesomeIcon icon={faHashtag} />
</Button>
</span>
)}
{rowLevelResults.links &&
rowLevelResults.links.map(link => (
<span key={link.title}>
<a href={link.href}>{` ${link.title}`}</a>
</span>
))}
</span>
</th>
<TableAverage
value={rowLevelResults.originalValue}
stddev={rowLevelResults.originalStddev}
stddevpct={rowLevelResults.originalStddevPct}
replicates={rowLevelResults.originalRuns}
/>
<td>
{rowLevelResults.originalValue < rowLevelResults.newValue && (
<span>&lt;</span>
)}
{rowLevelResults.originalValue > rowLevelResults.newValue && (
<span>&gt;</span>
)}
</td>
<TableAverage
value={rowLevelResults.newValue}
stddev={rowLevelResults.newStddev}
stddevpct={rowLevelResults.newStddevPct}
replicates={rowLevelResults.newRuns}
/>
<td className={this.getColorClass(rowLevelResults, 'background')}>
{rowLevelResults.delta &&
Math.abs(displayNumber(rowLevelResults.deltaPercentage)) !==
0 ? (
<SimpleTooltip
textClass="detail-hint"
text={
<React.Fragment>
{(rowLevelResults.isRegression ||
rowLevelResults.isImprovement) && (
<FontAwesomeIcon
icon={
rowLevelResults.isRegression
? faExclamationTriangle
: faThumbsUp
}
title={
rowLevelResults.isRegression
? 'regression'
: 'improvement'
}
className={this.getColorClass(
rowLevelResults,
'text',
)}
size="lg"
/>
)}
{` ${displayNumber(rowLevelResults.deltaPercentage)}%`}
</React.Fragment>
}
tooltipText={this.deltaTooltipText(
rowLevelResults.delta,
rowLevelResults.deltaPercentage,
rowLevelResults.newIsBetter,
)}
/>
) : null}
{rowLevelResults.delta
? Math.abs(displayNumber(rowLevelResults.deltaPercentage)) ===
0 && (
<span>
{displayNumber(rowLevelResults.deltaPercentage)}%
</span>
)
: null}
</td>
<td>
{rowLevelResults.delta ? (
<ProgressBar
magnitude={rowLevelResults.magnitude}
regression={!rowLevelResults.newIsBetter}
color={this.getColorClass(rowLevelResults, 'bar')}
/>
) : null}
</td>
<td>
{rowLevelResults.delta &&
rowLevelResults.confidence &&
rowLevelResults.confidenceText ? (
<SimpleTooltip
textClass="detail-hint"
text={`${displayNumber(rowLevelResults.confidence)} (${
rowLevelResults.confidenceText
})`}
tooltipText={rowLevelResults.confidenceTextLong}
/>
) : null}
</td>
<td className="text-right">
{!hasSubtests &&
!rowLevelResults.isNoiseMetric &&
(rowLevelResults.newRetriggerableJobId || !isBaseAggregate) &&
user.isLoggedIn && (
<Button
className="retrigger-btn btn icon-green mr-1 py-0 px-1"
title={compareTableText.retriggerButtonTitle}
onClick={() => this.retriggerJobs(rowLevelResults, 5)}
>
<FontAwesomeIcon icon={faRedo} />
</Button>
)}
{rowLevelResults.originalRuns && (
<SimpleTooltip
textClass="detail-hint"
text={`${rowLevelResults.originalRuns.length} / ${rowLevelResults.newRuns.length}`}
tooltipText={`${rowLevelResults.originalRuns.length} base / ${rowLevelResults.newRuns.length} new`}
/>
)}
</td>
</tr>
>>>>>>> Bug 1600752 - Compare View Changes
))}
</tbody>
</Table>
Expand Down
1 change: 1 addition & 0 deletions ui/perfherder/compare/CompareTableRow.jsx
View file
Expand Up @@ -77,6 +77,7 @@ export default class CompareTableRow extends React.PureComponent {
)
}
title="Permalink to this test"
aria-label={`Permalink to test ${rowLevelResults.name}`}
>
<FontAwesomeIcon icon={faHashtag} />
</Button>
Expand Down
7 changes: 3 additions & 4 deletions ui/shared/TruncatedText.jsx
View file
@@ -1,6 +1,5 @@
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */

import React from 'react';
import { Button } from 'reactstrap';
import PropTypes from 'prop-types';

export default class TruncatedText extends React.Component {
Expand All @@ -22,12 +21,12 @@ export default class TruncatedText extends React.Component {
{text}
</p>
{text.length > maxLength && (
<p
<Button
className={`${showMoreClass} mb-0 text-right pointer`}
onClick={() => this.setState({ showMoreResults: !showMoreResults })}
>
{`show ${showMoreResults ? 'less' : 'more'}`}
</p>
</Button>
)}
</React.Fragment>
);
Expand Down

0 comments on commit fc52bf9

Please sign in to comment.