Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ADM-975 [frontend]: fix issues
Browse files Browse the repository at this point in the history
zhou-yinyuan committed Jul 16, 2024
1 parent 6d2f73a commit c702230
Showing 7 changed files with 28 additions and 25 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -349,9 +349,9 @@ In report `chart` page, heartbeat provide a better visualization on delivery and
- Board chart
![Image 3-22-1](https://cdn.jsdelivr.net/gh/au-heartbeat/data-hosting@main/readme/3-22-1.png)
- Dora chart
![Image 3-22-2](https://cdn.jsdelivr.net/gh/au-heartbeat/data-hosting@main/readme/3-22-2.png)
![Image 3-22-2](https://cdn.jsdelivr.net/gh/au-heartbeat/data-hosting@main/readme/3-22-2-1.png)

In the Dora chart, you can see the different dora chart by selecting the different pipeline.
Heartbeat chart enable customer to drill down dora metrics to specific pipeline by selecting from pipeline/step dropdown.

Within chart, Hearteat also provide trend indicator which represent last two periods comparison result. The trend indicator includes three key points:
- Color: From delivery perspective, Green means healthy, Red means unhealthy
20 changes: 9 additions & 11 deletions frontend/__tests__/containers/ReportStep/ReportStep.test.tsx
Original file line number Diff line number Diff line change
@@ -768,29 +768,27 @@ describe('Report Step', () => {
const pipelineSelector = screen.getByLabelText('Pipeline Selector');
expect(pipelineSelector).toBeInTheDocument();

await act(async () => {
await userEvent.click(screen.getByRole('button', { name: LIST_OPEN }));
});

let listBox = screen.getByRole('listbox');
expect(listBox).toBeInTheDocument();
const pipelineSelectorText = screen.getByLabelText('Pipeline Selector Text');
expect(pipelineSelectorText).toBeInTheDocument();

await act(async () => {
await userEvent.click(within(listBox).getByText('Average/Total'));
});
const pipelineSelectorInput = pipelineSelectorText.getElementsByTagName('input')[0];
expect(pipelineSelectorInput).toHaveValue('All');

await act(async () => {
await userEvent.click(screen.getByRole('button', { name: LIST_OPEN }));
});

listBox = screen.getByRole('listbox');
const listBox = screen.getByRole('listbox');
expect(listBox).toBeInTheDocument();

expect(screen.getByText('All')).toBeInTheDocument();
expect(screen.getByText('mock pipeline name/mock step1')).toBeInTheDocument();

await act(async () => {
const pipelineSelector = within(listBox).getByText('mock pipeline name/mock step1');
expect(pipelineSelector).toBeInTheDocument();
await userEvent.click(pipelineSelector);
});
expect(pipelineSelectorInput).toHaveValue('mock pipeline name/mock step1');

expect(addNotification).toHaveBeenCalledWith({
message: MESSAGE.EXPIRE_INFORMATION,
4 changes: 3 additions & 1 deletion frontend/e2e/fixtures/import-file/chart-result.ts
Original file line number Diff line number Diff line change
@@ -32,7 +32,7 @@ export const BOARD_CHART_VALUE = {
};

export const DORA_CHART_VALUE: DoraChartType = {
'Average/Total': {
All: {
'Lead Time For Changes': {
type: 'trend down',
color: '#02C4A8',
@@ -77,3 +77,5 @@ export const DORA_CHART_VALUE: DoraChartType = {
},
},
};

export const DORA_CHART_PIPELINES = ['All', 'Heartbeat/ Deploy prod'];
2 changes: 1 addition & 1 deletion frontend/e2e/pages/metrics/report-step.ts
Original file line number Diff line number Diff line change
@@ -186,7 +186,7 @@ export class ReportStep {
this.cycleTimeAllocationTrendIcon = this.cycleTimeAllocationTrendContainer.getByLabel('trend down');
this.reworkTrendIcon = this.reworkTrendContainer.getByLabel('trend down');

this.doraPipelineSelector = this.page.getByLabel('Pipeline Selector');
this.doraPipelineSelector = this.page.getByLabel('Pipeline Selector').first();
this.leadTimeForChangesTrendContainer = this.page.getByLabel('lead time for changes trend container');
this.deploymentFrequencyTrendContainer = this.page.getByLabel('deployment frequency trend container');
this.devChangeFailureRateTrendContainer = this.page.getByLabel('dev change failure rate trend container');
Original file line number Diff line number Diff line change
@@ -15,6 +15,7 @@ import { cycleTimeByStatusFixture } from '../../fixtures/cycle-time-by-status/cy
import { importMultipleDoneProjectFromFile } from '../../fixtures/import-file/multiple-done-config-file';
import { partialTimeRangesSuccess } from '../../fixtures/import-file/partial-time-ranges-success';
import { partialMetricsShowChart } from '../../fixtures/import-file/partial-metrics-show-chart';
import { DORA_CHART_PIPELINES } from '../../fixtures/import-file/chart-result';
import { ProjectCreationType } from 'e2e/pages/metrics/report-step';
import { test } from '../../fixtures/test-with-extend-fixtures';
import { clearTempDir } from 'e2e/utils/clear-temp-dir';
@@ -121,7 +122,7 @@ test('Import project from file with partial ranges API failed', async ({
});
await reportStep.goToCharDoraTab();
await reportStep.checkPipelineSelectorAndDoraChart({
pipelines: ['Average/Total', 'Heartbeat/ Deploy prod'],
pipelines: DORA_CHART_PIPELINES,
showDevMeanTimeToRecoveryTrendContainer: false,
showLeadTimeForChangeChart: true,
showDeploymentFrequencyChart: true,
@@ -167,7 +168,7 @@ test('Import project from file with no all metrics', async ({ homePage, configSt
});
await reportStep.goToCharDoraTab();
await reportStep.checkPipelineSelectorAndDoraChart({
pipelines: ['Average/Total', 'Heartbeat/ Deploy prod'],
pipelines: DORA_CHART_PIPELINES,
showDevMeanTimeToRecoveryTrendContainer: false,
showDevChangeFailureRateChart: false,
showDevMeanTimeToRecoveryChart: true,
Original file line number Diff line number Diff line change
@@ -2,18 +2,18 @@ import { PipelinesSelectContainer } from '@src/containers/ReportStep/DoraMetrics
import { Autocomplete, Box, ListItemText, TextField, Tooltip } from '@mui/material';
import { getEmojiUrls, removeExtraEmojiName } from '@src/constants/emojis/emoji';
import { EmojiWrap, StyledAvatar } from '@src/constants/emojis/style';
import { Z_INDEX } from '@src/constants/commons';
import { EMPTY_STRING, Z_INDEX } from '@src/constants/commons';
import React, { useState } from 'react';

interface Props {
options: string[];
value: string;
onUpDatePipeline: (value: string) => void;
title: string;
readonly options: string[];
readonly value: string;
readonly onUpDatePipeline: (value: string) => void;
readonly title: string;
}

export default function PipelineSelector({ options, value, onUpDatePipeline, title }: Props) {
const label = '';
const label = EMPTY_STRING;
const [inputValue, setInputValue] = useState<string>(value);

const emojiView = (pipelineStepName: string) => {
@@ -62,7 +62,9 @@ export default function PipelineSelector({ options, value, onUpDatePipeline, tit
onChange={(event, newValue: string) => onUpDatePipeline(newValue)}
inputValue={inputValue}
onInputChange={(event, newInputValue) => setInputValue(newInputValue)}
renderInput={(params) => <TextField required {...params} label={label} variant='standard' />}
renderInput={(params) => (
<TextField aria-label={'Pipeline Selector Text'} required {...params} label={label} variant='standard' />
)}
slotProps={{
popper: {
sx: {
Original file line number Diff line number Diff line change
@@ -48,7 +48,7 @@ enum DORAMetricsChartType {

const AVERAGE = 'Average';
const TOTAL = 'Total';
export const DEFAULT_SELECTED_PIPELINE = 'Average/Total';
export const DEFAULT_SELECTED_PIPELINE = 'All';

function extractedStackedBarData(
allDateRanges: string[],

0 comments on commit c702230

Please sign in to comment.