зеркало из https://github.com/mozilla/treeherder.git
Bug 1714038 - Enable pagination in Compare View (#7186)
* Enable pagination in Compare View * Moved implementation to CompareTableControls * WIP updating the url parameters * Keep filtered text in the input box when refreshing page
This commit is contained in:
beatrice-acasandrei
GitHub
Родитель
95ae37bd7c
Коммит
3c8f0c47f1
|
|
@ -0,0 +1,310 @@
|
|||
[
|
||||
{
|
||||
"className": "danger",
|
||||
"confidence": 6.057234137528269,
|
||||
"confidenceText": "high",
|
||||
"confidenceTextLong": "Result of running t-test on base versus new result distribution: A value of 'high' indicates more confidence that there is a significant change, however you should check the historical record for the test by looking at the graph to be more sure (some noisy tests can provide inconsistent results).",
|
||||
"delta": 4.9191666666666265,
|
||||
"deltaPercentage": 3.23249676019764,
|
||||
"frameworkId": 1,
|
||||
"isComplete": 1,
|
||||
"isConfident": false,
|
||||
"isEmpty": false,
|
||||
"isImprovement": false,
|
||||
"isMeaningful": true,
|
||||
"isNoiseMetric": false,
|
||||
"isRegression": true,
|
||||
"links": [],
|
||||
"magnitude": 12.162483800988202,
|
||||
"name": "result1",
|
||||
"needsMoreRuns": false,
|
||||
"newIsBetter": false,
|
||||
"newRuns": [],
|
||||
"originalRetriggerableJobId": 111,
|
||||
"originalRepoName": "try",
|
||||
"newRetriggerableJobId": 121,
|
||||
"newRepoName": "mozilla-central",
|
||||
"baseColumnMeasurementUnit": "ms",
|
||||
"newColumnMeasurementUnit": "score"
|
||||
},
|
||||
{
|
||||
"className": "danger",
|
||||
"confidence": 6.057234137528269,
|
||||
"confidenceText": "high",
|
||||
"confidenceTextLong": "Result of running t-test on base versus new result distribution: A value of 'high' indicates more confidence that there is a significant change, however you should check the historical record for the test by looking at the graph to be more sure (some noisy tests can provide inconsistent results).",
|
||||
"delta": 4.9191666666666265,
|
||||
"deltaPercentage": 3.23249676019764,
|
||||
"frameworkId": 1,
|
||||
"isComplete": 1,
|
||||
"isConfident": false,
|
||||
"isEmpty": false,
|
||||
"isImprovement": false,
|
||||
"isMeaningful": true,
|
||||
"isNoiseMetric": false,
|
||||
"isRegression": true,
|
||||
"links": [],
|
||||
"magnitude": 12.162483800988202,
|
||||
"name": "result2",
|
||||
"needsMoreRuns": false,
|
||||
"newIsBetter": false,
|
||||
"newRuns": [],
|
||||
"originalRetriggerableJobId": 111,
|
||||
"originalRepoName": "try",
|
||||
"newRetriggerableJobId": 121,
|
||||
"newRepoName": "mozilla-central",
|
||||
"baseColumnMeasurementUnit": "ms",
|
||||
"newColumnMeasurementUnit": "score"
|
||||
},
|
||||
{
|
||||
"className": "danger",
|
||||
"confidence": 6.057234137528269,
|
||||
"confidenceText": "high",
|
||||
"confidenceTextLong": "Result of running t-test on base versus new result distribution: A value of 'high' indicates more confidence that there is a significant change, however you should check the historical record for the test by looking at the graph to be more sure (some noisy tests can provide inconsistent results).",
|
||||
"delta": 4.9191666666666265,
|
||||
"deltaPercentage": 3.23249676019764,
|
||||
"frameworkId": 1,
|
||||
"isComplete": 1,
|
||||
"isConfident": false,
|
||||
"isEmpty": false,
|
||||
"isImprovement": false,
|
||||
"isMeaningful": true,
|
||||
"isNoiseMetric": false,
|
||||
"isRegression": true,
|
||||
"links": [],
|
||||
"magnitude": 12.162483800988202,
|
||||
"name": "result3",
|
||||
"needsMoreRuns": false,
|
||||
"newIsBetter": false,
|
||||
"newRuns": [],
|
||||
"originalRetriggerableJobId": 111,
|
||||
"originalRepoName": "try",
|
||||
"newRetriggerableJobId": 121,
|
||||
"newRepoName": "mozilla-central",
|
||||
"baseColumnMeasurementUnit": "ms",
|
||||
"newColumnMeasurementUnit": "score"
|
||||
},
|
||||
{
|
||||
"className": "danger",
|
||||
"confidence": 6.057234137528269,
|
||||
"confidenceText": "high",
|
||||
"confidenceTextLong": "Result of running t-test on base versus new result distribution: A value of 'high' indicates more confidence that there is a significant change, however you should check the historical record for the test by looking at the graph to be more sure (some noisy tests can provide inconsistent results).",
|
||||
"delta": 4.9191666666666265,
|
||||
"deltaPercentage": 3.23249676019764,
|
||||
"frameworkId": 1,
|
||||
"isComplete": 1,
|
||||
"isConfident": false,
|
||||
"isEmpty": false,
|
||||
"isImprovement": false,
|
||||
"isMeaningful": true,
|
||||
"isNoiseMetric": false,
|
||||
"isRegression": true,
|
||||
"links": [],
|
||||
"magnitude": 12.162483800988202,
|
||||
"name": "result4",
|
||||
"needsMoreRuns": false,
|
||||
"newIsBetter": false,
|
||||
"newRuns": [],
|
||||
"originalRetriggerableJobId": 111,
|
||||
"originalRepoName": "try",
|
||||
"newRetriggerableJobId": 121,
|
||||
"newRepoName": "mozilla-central",
|
||||
"baseColumnMeasurementUnit": "ms",
|
||||
"newColumnMeasurementUnit": "score"
|
||||
},
|
||||
{
|
||||
"className": "danger",
|
||||
"confidence": 6.057234137528269,
|
||||
"confidenceText": "high",
|
||||
"confidenceTextLong": "Result of running t-test on base versus new result distribution: A value of 'high' indicates more confidence that there is a significant change, however you should check the historical record for the test by looking at the graph to be more sure (some noisy tests can provide inconsistent results).",
|
||||
"delta": 4.9191666666666265,
|
||||
"deltaPercentage": 3.23249676019764,
|
||||
"frameworkId": 1,
|
||||
"isComplete": 1,
|
||||
"isConfident": false,
|
||||
"isEmpty": false,
|
||||
"isImprovement": false,
|
||||
"isMeaningful": true,
|
||||
"isNoiseMetric": false,
|
||||
"isRegression": true,
|
||||
"links": [],
|
||||
"magnitude": 12.162483800988202,
|
||||
"name": "resutlt5",
|
||||
"needsMoreRuns": false,
|
||||
"newIsBetter": false,
|
||||
"newRuns": [],
|
||||
"originalRetriggerableJobId": 111,
|
||||
"originalRepoName": "try",
|
||||
"newRetriggerableJobId": 121,
|
||||
"newRepoName": "mozilla-central",
|
||||
"baseColumnMeasurementUnit": "ms",
|
||||
"newColumnMeasurementUnit": "score"
|
||||
},
|
||||
{
|
||||
"className": "danger",
|
||||
"confidence": 6.057234137528269,
|
||||
"confidenceText": "high",
|
||||
"confidenceTextLong": "Result of running t-test on base versus new result distribution: A value of 'high' indicates more confidence that there is a significant change, however you should check the historical record for the test by looking at the graph to be more sure (some noisy tests can provide inconsistent results).",
|
||||
"delta": 4.9191666666666265,
|
||||
"deltaPercentage": 3.23249676019764,
|
||||
"frameworkId": 1,
|
||||
"isComplete": 1,
|
||||
"isConfident": false,
|
||||
"isEmpty": false,
|
||||
"isImprovement": false,
|
||||
"isMeaningful": true,
|
||||
"isNoiseMetric": false,
|
||||
"isRegression": true,
|
||||
"links": [],
|
||||
"magnitude": 12.162483800988202,
|
||||
"name": "result6",
|
||||
"needsMoreRuns": false,
|
||||
"newIsBetter": false,
|
||||
"newRuns": [],
|
||||
"originalRetriggerableJobId": 111,
|
||||
"originalRepoName": "try",
|
||||
"newRetriggerableJobId": 121,
|
||||
"newRepoName": "mozilla-central",
|
||||
"baseColumnMeasurementUnit": "ms",
|
||||
"newColumnMeasurementUnit": "score"
|
||||
},
|
||||
{
|
||||
"className": "danger",
|
||||
"confidence": 6.057234137528269,
|
||||
"confidenceText": "high",
|
||||
"confidenceTextLong": "Result of running t-test on base versus new result distribution: A value of 'high' indicates more confidence that there is a significant change, however you should check the historical record for the test by looking at the graph to be more sure (some noisy tests can provide inconsistent results).",
|
||||
"delta": 4.9191666666666265,
|
||||
"deltaPercentage": 3.23249676019764,
|
||||
"frameworkId": 1,
|
||||
"isComplete": 1,
|
||||
"isConfident": false,
|
||||
"isEmpty": false,
|
||||
"isImprovement": false,
|
||||
"isMeaningful": true,
|
||||
"isNoiseMetric": false,
|
||||
"isRegression": true,
|
||||
"links": [],
|
||||
"magnitude": 12.162483800988202,
|
||||
"name": "result7",
|
||||
"needsMoreRuns": false,
|
||||
"newIsBetter": false,
|
||||
"newRuns": [],
|
||||
"originalRetriggerableJobId": 111,
|
||||
"originalRepoName": "try",
|
||||
"newRetriggerableJobId": 121,
|
||||
"newRepoName": "mozilla-central",
|
||||
"baseColumnMeasurementUnit": "ms",
|
||||
"newColumnMeasurementUnit": "score"
|
||||
},
|
||||
{
|
||||
"className": "danger",
|
||||
"confidence": 6.057234137528269,
|
||||
"confidenceText": "high",
|
||||
"confidenceTextLong": "Result of running t-test on base versus new result distribution: A value of 'high' indicates more confidence that there is a significant change, however you should check the historical record for the test by looking at the graph to be more sure (some noisy tests can provide inconsistent results).",
|
||||
"delta": 4.9191666666666265,
|
||||
"deltaPercentage": 3.23249676019764,
|
||||
"frameworkId": 1,
|
||||
"isComplete": 1,
|
||||
"isConfident": false,
|
||||
"isEmpty": false,
|
||||
"isImprovement": false,
|
||||
"isMeaningful": true,
|
||||
"isNoiseMetric": false,
|
||||
"isRegression": true,
|
||||
"links": [],
|
||||
"magnitude": 12.162483800988202,
|
||||
"name": "result8",
|
||||
"needsMoreRuns": false,
|
||||
"newIsBetter": false,
|
||||
"newRuns": [],
|
||||
"originalRetriggerableJobId": 111,
|
||||
"originalRepoName": "try",
|
||||
"newRetriggerableJobId": 121,
|
||||
"newRepoName": "mozilla-central",
|
||||
"baseColumnMeasurementUnit": "ms",
|
||||
"newColumnMeasurementUnit": "score"
|
||||
},
|
||||
{
|
||||
"className": "danger",
|
||||
"confidence": 6.057234137528269,
|
||||
"confidenceText": "high",
|
||||
"confidenceTextLong": "Result of running t-test on base versus new result distribution: A value of 'high' indicates more confidence that there is a significant change, however you should check the historical record for the test by looking at the graph to be more sure (some noisy tests can provide inconsistent results).",
|
||||
"delta": 4.9191666666666265,
|
||||
"deltaPercentage": 3.23249676019764,
|
||||
"frameworkId": 1,
|
||||
"isComplete": 1,
|
||||
"isConfident": false,
|
||||
"isEmpty": false,
|
||||
"isImprovement": false,
|
||||
"isMeaningful": true,
|
||||
"isNoiseMetric": false,
|
||||
"isRegression": true,
|
||||
"links": [],
|
||||
"magnitude": 12.162483800988202,
|
||||
"name": "result9",
|
||||
"needsMoreRuns": false,
|
||||
"newIsBetter": false,
|
||||
"newRuns": [],
|
||||
"originalRetriggerableJobId": 111,
|
||||
"originalRepoName": "try",
|
||||
"newRetriggerableJobId": 121,
|
||||
"newRepoName": "mozilla-central",
|
||||
"baseColumnMeasurementUnit": "ms",
|
||||
"newColumnMeasurementUnit": "score"
|
||||
},
|
||||
{
|
||||
"className": "danger",
|
||||
"confidence": 6.057234137528269,
|
||||
"confidenceText": "high",
|
||||
"confidenceTextLong": "Result of running t-test on base versus new result distribution: A value of 'high' indicates more confidence that there is a significant change, however you should check the historical record for the test by looking at the graph to be more sure (some noisy tests can provide inconsistent results).",
|
||||
"delta": 4.9191666666666265,
|
||||
"deltaPercentage": 3.23249676019764,
|
||||
"frameworkId": 1,
|
||||
"isComplete": 1,
|
||||
"isConfident": false,
|
||||
"isEmpty": false,
|
||||
"isImprovement": false,
|
||||
"isMeaningful": true,
|
||||
"isNoiseMetric": false,
|
||||
"isRegression": true,
|
||||
"links": [],
|
||||
"magnitude": 12.162483800988202,
|
||||
"name": "result10",
|
||||
"needsMoreRuns": false,
|
||||
"newIsBetter": false,
|
||||
"newRuns": [],
|
||||
"originalRetriggerableJobId": 111,
|
||||
"originalRepoName": "try",
|
||||
"newRetriggerableJobId": 121,
|
||||
"newRepoName": "mozilla-central",
|
||||
"baseColumnMeasurementUnit": "ms",
|
||||
"newColumnMeasurementUnit": "score"
|
||||
},
|
||||
{
|
||||
"className": "danger",
|
||||
"confidence": 6.057234137528269,
|
||||
"confidenceText": "high",
|
||||
"confidenceTextLong": "Result of running t-test on base versus new result distribution: A value of 'high' indicates more confidence that there is a significant change, however you should check the historical record for the test by looking at the graph to be more sure (some noisy tests can provide inconsistent results).",
|
||||
"delta": 4.9191666666666265,
|
||||
"deltaPercentage": 3.23249676019764,
|
||||
"frameworkId": 1,
|
||||
"isComplete": 1,
|
||||
"isConfident": false,
|
||||
"isEmpty": false,
|
||||
"isImprovement": false,
|
||||
"isMeaningful": true,
|
||||
"isNoiseMetric": false,
|
||||
"isRegression": true,
|
||||
"links": [],
|
||||
"magnitude": 12.162483800988202,
|
||||
"name": "result11",
|
||||
"needsMoreRuns": false,
|
||||
"newIsBetter": false,
|
||||
"newRuns": [],
|
||||
"originalRetriggerableJobId": 111,
|
||||
"originalRepoName": "try",
|
||||
"newRetriggerableJobId": 121,
|
||||
"newRepoName": "mozilla-central",
|
||||
"baseColumnMeasurementUnit": "ms",
|
||||
"newColumnMeasurementUnit": "score"
|
||||
}
|
||||
]
|
||||
|
|
@ -8,6 +8,7 @@ import {
|
|||
waitForElementToBeRemoved,
|
||||
} from '@testing-library/react';
|
||||
|
||||
import compareTablesControlsResults from '../../mock/compare_table_controls';
|
||||
import projects from '../../mock/repositories';
|
||||
import CompareTableControls from '../../../../ui/perfherder/compare/CompareTableControls';
|
||||
import CompareTable from '../../../../ui/perfherder/compare/CompareTable';
|
||||
|
|
@ -114,7 +115,19 @@ const result = [
|
|||
];
|
||||
|
||||
const results = new Map([['a11yr pgo e10s stylo', result]]);
|
||||
|
||||
const compareResults = new Map([
|
||||
['compare table 1', [compareTablesControlsResults[0]]],
|
||||
['compare table 2', [compareTablesControlsResults[1]]],
|
||||
['compare table 3', [compareTablesControlsResults[2]]],
|
||||
['compare table 4', [compareTablesControlsResults[3]]],
|
||||
['compare table 5', [compareTablesControlsResults[4]]],
|
||||
['compare table 6', [compareTablesControlsResults[5]]],
|
||||
['compare table 7', [compareTablesControlsResults[6]]],
|
||||
['compare table 8', [compareTablesControlsResults[7]]],
|
||||
['compare table 9', [compareTablesControlsResults[8]]],
|
||||
['compare table 10', [compareTablesControlsResults[9]]],
|
||||
['compare table 11', [compareTablesControlsResults[10]]],
|
||||
]);
|
||||
jest.mock('../../../../ui/models/job');
|
||||
|
||||
const mockHandlePermalinkClick = jest.fn();
|
||||
|
|
@ -129,12 +142,13 @@ beforeEach(() => {
|
|||
afterEach(cleanup);
|
||||
|
||||
const compareTableControlsNode = (
|
||||
compareTableControlsResults,
|
||||
userLoggedIn = false,
|
||||
isBaseAggregate = false,
|
||||
) => {
|
||||
return (
|
||||
<CompareTableControls
|
||||
compareResults={results}
|
||||
compareResults={compareTableControlsResults}
|
||||
filterOptions={{}}
|
||||
user={{ isLoggedIn: userLoggedIn }}
|
||||
notify={() => {}}
|
||||
|
|
@ -149,17 +163,26 @@ const compareTableControlsNode = (
|
|||
showOnlyNoise: '0',
|
||||
filter: null,
|
||||
}}
|
||||
location={{
|
||||
search: '',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const compareTableControls = (
|
||||
compareTableControlsResults = results,
|
||||
userLoggedIn = false,
|
||||
isBaseAggregate = false,
|
||||
mockDataRetrigger = { retriggers: [] },
|
||||
) =>
|
||||
render(
|
||||
compareTableControlsNode(userLoggedIn, isBaseAggregate, mockDataRetrigger),
|
||||
compareTableControlsNode(
|
||||
compareTableControlsResults,
|
||||
userLoggedIn,
|
||||
isBaseAggregate,
|
||||
mockDataRetrigger,
|
||||
),
|
||||
);
|
||||
|
||||
const compareTable = (userLoggedIn, isBaseAggregate = false) =>
|
||||
|
|
@ -220,12 +243,10 @@ test('toggle all buttons should update the URL params', async () => {
|
|||
getByText(filterText.showImportant),
|
||||
);
|
||||
fireEvent.click(showImportant);
|
||||
expect(mockUpdateParams).toHaveBeenLastCalledWith({ showOnlyImportant: 1 }, [
|
||||
'filter',
|
||||
'showOnlyComparable',
|
||||
'showOnlyConfident',
|
||||
'showOnlyNoise',
|
||||
]);
|
||||
expect(mockUpdateParams).toHaveBeenLastCalledWith(
|
||||
{ page: 1, showOnlyImportant: 1 },
|
||||
['filter', 'showOnlyComparable', 'showOnlyConfident', 'showOnlyNoise'],
|
||||
);
|
||||
|
||||
const hideUncertain = await waitFor(() =>
|
||||
getByText(filterText.hideUncertain),
|
||||
|
|
@ -233,6 +254,7 @@ test('toggle all buttons should update the URL params', async () => {
|
|||
fireEvent.click(hideUncertain);
|
||||
expect(mockUpdateParams).toHaveBeenLastCalledWith(
|
||||
{
|
||||
page: 1,
|
||||
showOnlyImportant: 1,
|
||||
showOnlyConfident: 1,
|
||||
},
|
||||
|
|
@ -243,6 +265,7 @@ test('toggle all buttons should update the URL params', async () => {
|
|||
fireEvent.click(showNoise);
|
||||
expect(mockUpdateParams).toHaveBeenLastCalledWith(
|
||||
{
|
||||
page: 1,
|
||||
showOnlyImportant: 1,
|
||||
showOnlyConfident: 1,
|
||||
showOnlyNoise: 1,
|
||||
|
|
@ -256,6 +279,7 @@ test('toggle all buttons should update the URL params', async () => {
|
|||
fireEvent.click(hideUncomparable);
|
||||
expect(mockUpdateParams).toHaveBeenLastCalledWith(
|
||||
{
|
||||
page: 1,
|
||||
showOnlyImportant: 1,
|
||||
showOnlyConfident: 1,
|
||||
showOnlyNoise: 1,
|
||||
|
|
@ -272,14 +296,12 @@ test('filters that are not enabled are removed from URL params', async () => {
|
|||
getByText(filterText.showImportant),
|
||||
);
|
||||
fireEvent.click(showImportant);
|
||||
expect(mockUpdateParams).toHaveBeenLastCalledWith({ showOnlyImportant: 1 }, [
|
||||
'filter',
|
||||
'showOnlyComparable',
|
||||
'showOnlyConfident',
|
||||
'showOnlyNoise',
|
||||
]);
|
||||
expect(mockUpdateParams).toHaveBeenLastCalledWith(
|
||||
{ page: 1, showOnlyImportant: 1 },
|
||||
['filter', 'showOnlyComparable', 'showOnlyConfident', 'showOnlyNoise'],
|
||||
);
|
||||
fireEvent.click(showImportant);
|
||||
expect(mockUpdateParams).toHaveBeenLastCalledWith({}, [
|
||||
expect(mockUpdateParams).toHaveBeenLastCalledWith({ page: 1 }, [
|
||||
'filter',
|
||||
'showOnlyComparable',
|
||||
'showOnlyImportant',
|
||||
|
|
@ -288,6 +310,32 @@ test('filters that are not enabled are removed from URL params', async () => {
|
|||
]);
|
||||
});
|
||||
|
||||
test('page parameter updates with value 2 when clicking on the second page', async () => {
|
||||
const { getByText, findAllByLabelText } = compareTableControls(
|
||||
compareResults,
|
||||
);
|
||||
|
||||
const result1 = await waitFor(() =>
|
||||
getByText(compareTablesControlsResults[0].name),
|
||||
);
|
||||
const result2 = await waitFor(() =>
|
||||
getByText(compareTablesControlsResults[1].name),
|
||||
);
|
||||
const result10 = await waitFor(() =>
|
||||
getByText(compareTablesControlsResults[9].name),
|
||||
);
|
||||
|
||||
expect(result1).toBeInTheDocument();
|
||||
expect(result2).toBeInTheDocument();
|
||||
expect(result10).toBeInTheDocument();
|
||||
|
||||
const secondPage = await waitFor(() =>
|
||||
findAllByLabelText('pagination-button-2'),
|
||||
);
|
||||
fireEvent.click(secondPage[0]);
|
||||
expect(mockUpdateParams).toHaveBeenLastCalledWith({ page: 2 });
|
||||
});
|
||||
|
||||
test('text input filter results should differ when filter button(s) are selected', async () => {
|
||||
const {
|
||||
getByText,
|
||||
|
|
@ -374,19 +422,23 @@ test('clicking compare table permalinks callbacks with unique hash-based ids', a
|
|||
});
|
||||
|
||||
test('retrigger buttons should appear only when the user is logged in', async () => {
|
||||
const { queryAllByTitle, rerender } = compareTableControls(false);
|
||||
const { queryAllByTitle, rerender } = compareTableControls(results, false);
|
||||
let retriggerButtons = queryAllByTitle(compareTableText.retriggerButtonTitle);
|
||||
expect(retriggerButtons).toHaveLength(0);
|
||||
|
||||
// simulate login
|
||||
rerender(compareTableControlsNode(true));
|
||||
rerender(compareTableControlsNode(results, true));
|
||||
|
||||
retriggerButtons = queryAllByTitle(compareTableText.retriggerButtonTitle);
|
||||
expect(retriggerButtons).toHaveLength(3);
|
||||
});
|
||||
|
||||
test('retrigger should trigger jobs for base and new repositories', async () => {
|
||||
const { queryAllByTitle, getByText } = compareTableControls(true, false);
|
||||
const { queryAllByTitle, getByText } = compareTableControls(
|
||||
results,
|
||||
true,
|
||||
false,
|
||||
);
|
||||
const retriggerButtons = queryAllByTitle(
|
||||
compareTableText.retriggerButtonTitle,
|
||||
);
|
||||
|
|
@ -409,7 +461,11 @@ test('retrigger should trigger jobs for base and new repositories', async () =>
|
|||
});
|
||||
|
||||
test('retrigger should only work on new repo when base is aggregate', async () => {
|
||||
const { queryAllByTitle, getByText } = compareTableControls(true, true);
|
||||
const { queryAllByTitle, getByText } = compareTableControls(
|
||||
results,
|
||||
true,
|
||||
true,
|
||||
);
|
||||
const retriggerButtons = queryAllByTitle(
|
||||
compareTableText.retriggerButtonTitle,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@ import { Row, Button, Container } from 'reactstrap';
|
|||
|
||||
import FilterControls from '../../shared/FilterControls';
|
||||
import { summaryStatusMap, scrollTypes } from '../perf-helpers/constants';
|
||||
import PaginationGroup from '../shared/Pagination';
|
||||
|
||||
import AlertTable from './AlertTable';
|
||||
import PaginationGroup from './Pagination';
|
||||
|
||||
export default class AlertsViewControls extends React.Component {
|
||||
constructor(props) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
/* eslint-disable react/no-did-update-set-state */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Container } from 'reactstrap';
|
||||
import { Container, Row } from 'reactstrap';
|
||||
|
||||
import { filterText } from '../perf-helpers/constants';
|
||||
import {
|
||||
|
|
@ -9,6 +10,8 @@ import {
|
|||
onPermalinkClick,
|
||||
retriggerMultipleJobs,
|
||||
} from '../perf-helpers/helpers';
|
||||
import { parseQueryParams } from '../../helpers/url';
|
||||
import PaginationGroup from '../shared/Pagination';
|
||||
import FilterControls from '../../shared/FilterControls';
|
||||
|
||||
import CompareTable from './CompareTable';
|
||||
|
|
@ -27,6 +30,9 @@ export default class CompareTableControls extends React.Component {
|
|||
filteredText: this.getDefaultFilterText(this.validated),
|
||||
showRetriggerModal: false,
|
||||
currentRetriggerRow: {},
|
||||
totalPagesList: 0,
|
||||
page: this.validated.page ? parseInt(this.validated.page, 10) : 1,
|
||||
countPages: 0,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -34,11 +40,23 @@ export default class CompareTableControls extends React.Component {
|
|||
this.updateFilteredResults();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const { compareResults } = this.props;
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
const { compareResults, location } = this.props;
|
||||
const { countPages } = this.state;
|
||||
const params = parseQueryParams(location.search);
|
||||
const prevParams = parseQueryParams(prevProps.location.search);
|
||||
|
||||
if (prevState.countPages !== countPages) {
|
||||
this.setState({ totalPagesList: this.generatePages(countPages) });
|
||||
}
|
||||
if (prevProps.compareResults !== compareResults) {
|
||||
this.updateFilteredResults();
|
||||
}
|
||||
if (params.page && params.page !== prevParams.page) {
|
||||
this.setState({ page: parseInt(params.page, 10) }, () => {
|
||||
this.updateFilteredResults();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
getDefaultFilterText = (validated) => {
|
||||
|
|
@ -47,14 +65,14 @@ export default class CompareTableControls extends React.Component {
|
|||
};
|
||||
|
||||
updateFilterText = (filterText) => {
|
||||
this.setState({ filteredText: filterText }, () =>
|
||||
this.setState({ filteredText: filterText, page: 1 }, () =>
|
||||
this.updateFilteredResults(),
|
||||
);
|
||||
};
|
||||
|
||||
updateFilter = (filter) => {
|
||||
this.setState(
|
||||
(prevState) => ({ [filter]: !prevState[filter] }),
|
||||
(prevState) => ({ [filter]: !prevState[filter], page: 1 }),
|
||||
() => this.updateFilteredResults(),
|
||||
);
|
||||
};
|
||||
|
|
@ -90,9 +108,15 @@ export default class CompareTableControls extends React.Component {
|
|||
showImportant,
|
||||
hideUncertain,
|
||||
showNoise,
|
||||
page,
|
||||
} = this.state;
|
||||
|
||||
const { compareResults } = this.props;
|
||||
let results;
|
||||
const toEnd = page * 10;
|
||||
const fromStart = toEnd - 10;
|
||||
let countPages = Math.ceil(compareResults.size / 10);
|
||||
let totalPagesList = this.generatePages(countPages);
|
||||
|
||||
this.updateUrlParams();
|
||||
if (
|
||||
|
|
@ -102,7 +126,9 @@ export default class CompareTableControls extends React.Component {
|
|||
!hideUncertain &&
|
||||
!showNoise
|
||||
) {
|
||||
return this.setState({ results: compareResults });
|
||||
results = Array.from(compareResults).slice(fromStart, toEnd);
|
||||
results = new Map(results);
|
||||
return this.setState({ results, countPages, totalPagesList });
|
||||
}
|
||||
|
||||
const filteredResults = new Map(compareResults);
|
||||
|
|
@ -118,7 +144,12 @@ export default class CompareTableControls extends React.Component {
|
|||
filteredResults.delete(testName);
|
||||
}
|
||||
}
|
||||
this.setState({ results: filteredResults });
|
||||
|
||||
countPages = Math.ceil(filteredResults.size / 10);
|
||||
totalPagesList = this.generatePages(countPages);
|
||||
results = Array.from(filteredResults).slice(fromStart, toEnd);
|
||||
results = new Map(results);
|
||||
this.setState({ results, countPages, totalPagesList });
|
||||
};
|
||||
|
||||
toggleRetriggerModal = () => {
|
||||
|
|
@ -149,6 +180,7 @@ export default class CompareTableControls extends React.Component {
|
|||
showImportant,
|
||||
hideUncertain,
|
||||
showNoise,
|
||||
page,
|
||||
} = this.state;
|
||||
const compareURLParams = {};
|
||||
const paramsToRemove = [];
|
||||
|
|
@ -168,6 +200,7 @@ export default class CompareTableControls extends React.Component {
|
|||
if (showNoise) compareURLParams.showOnlyNoise = 1;
|
||||
else paramsToRemove.push('showOnlyNoise');
|
||||
|
||||
compareURLParams.page = page;
|
||||
updateParams(compareURLParams, paramsToRemove);
|
||||
};
|
||||
|
||||
|
|
@ -176,6 +209,22 @@ export default class CompareTableControls extends React.Component {
|
|||
this.toggleRetriggerModal();
|
||||
};
|
||||
|
||||
getCurrentPages = () => {
|
||||
const { page, totalPagesList } = this.state;
|
||||
if (totalPagesList.length === 5 || !totalPagesList.length) {
|
||||
return totalPagesList;
|
||||
}
|
||||
return totalPagesList.slice(page - 1, page + 4);
|
||||
};
|
||||
|
||||
generatePages = (countPages) => {
|
||||
const pages = [];
|
||||
for (let num = 1; num <= countPages; num++) {
|
||||
pages.push(num);
|
||||
}
|
||||
return pages;
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
frameworkName,
|
||||
|
|
@ -188,8 +237,8 @@ export default class CompareTableControls extends React.Component {
|
|||
onPermalinkClick,
|
||||
projects,
|
||||
history,
|
||||
validated,
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
hideUncomparable,
|
||||
hideUncertain,
|
||||
|
|
@ -199,6 +248,8 @@ export default class CompareTableControls extends React.Component {
|
|||
showRetriggerModal,
|
||||
currentRetriggerRow,
|
||||
filteredText,
|
||||
countPages,
|
||||
page,
|
||||
} = this.state;
|
||||
|
||||
const compareFilters = [
|
||||
|
|
@ -229,6 +280,10 @@ export default class CompareTableControls extends React.Component {
|
|||
stateName: 'showNoise',
|
||||
},
|
||||
];
|
||||
|
||||
const viewablePagesList = this.getCurrentPages();
|
||||
const hasMorePages = () => viewablePagesList.length > 0 && countPages !== 1;
|
||||
|
||||
return (
|
||||
<Container fluid className="my-3 px-0">
|
||||
<RetriggerModal
|
||||
|
|
@ -246,6 +301,19 @@ export default class CompareTableControls extends React.Component {
|
|||
dropdownOptions={dropdownOptions}
|
||||
/>
|
||||
|
||||
{viewablePagesList
|
||||
? hasMorePages() && (
|
||||
<Row className="justify-content-center">
|
||||
<PaginationGroup
|
||||
viewablePageNums={viewablePagesList}
|
||||
updateParams={validated.updateParams}
|
||||
currentPage={page}
|
||||
count={countPages}
|
||||
/>
|
||||
</Row>
|
||||
)
|
||||
: null}
|
||||
|
||||
{showNoise && showTestsWithNoise}
|
||||
|
||||
{results.size > 0 ? (
|
||||
|
|
@ -268,6 +336,19 @@ export default class CompareTableControls extends React.Component {
|
|||
) : (
|
||||
<p className="lead text-center">No results to show</p>
|
||||
)}
|
||||
|
||||
{viewablePagesList
|
||||
? hasMorePages() && (
|
||||
<Row className="justify-content-center">
|
||||
<PaginationGroup
|
||||
viewablePageNums={viewablePagesList}
|
||||
updateParams={validated.updateParams}
|
||||
currentPage={page}
|
||||
count={countPages}
|
||||
/>
|
||||
</Row>
|
||||
)
|
||||
: null}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -202,7 +202,7 @@ export default class CompareTableView extends React.Component {
|
|||
|
||||
const framework = frameworks.find((item) => item.name === selection);
|
||||
|
||||
updateParams({ framework: framework.id });
|
||||
updateParams({ framework: framework.id, page: 1 });
|
||||
this.setState({ framework }, () => this.getPerformanceData());
|
||||
};
|
||||
|
||||
|
|
@ -210,7 +210,7 @@ export default class CompareTableView extends React.Component {
|
|||
const { updateParams } = this.props.validated;
|
||||
const timeRange = phTimeRanges.find((item) => item.text === selection);
|
||||
|
||||
updateParams({ selectedTimeRange: timeRange.value });
|
||||
updateParams({ selectedTimeRange: timeRange.value, page: 1 });
|
||||
this.setState({ timeRange }, () => this.getPerformanceData());
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@ class PaginationGroup extends React.Component {
|
|||
<PaginationLink
|
||||
className="text-info"
|
||||
onClick={() => this.navigatePage(num)}
|
||||
aria-label={`pagination-button-${num}`}
|
||||
>
|
||||
{num}
|
||||
</PaginationLink>
|
||||
Загрузка…
Ссылка в новой задаче