From 416c75c477d64c13332c2254f7c140d9cc212f4f Mon Sep 17 00:00:00 2001 From: Niklas Granander Date: Wed, 4 Aug 2021 18:11:06 +0200 Subject: [PATCH] Add timeline and better handling of warning/error message Signed-off-by: Niklas Granander --- plugins/xcmetrics/package.json | 3 +- plugins/xcmetrics/src/api/XcmetricsClient.ts | 5 +- .../src/api/__mocks__/XcmetricsClient.ts | 52 ++++- plugins/xcmetrics/src/api/types.ts | 36 +++- .../AccordionComponent/AccordionComponent.tsx | 6 +- .../BuildDetailsComponent.test.tsx | 7 +- .../BuildDetailsComponent.tsx | 193 ++++++++++-------- .../BuildListComponent.test.tsx | 1 + .../BuildListComponent/BuildListComponent.tsx | 15 +- .../BuildTimelineComponent.test.tsx | 43 ++++ .../BuildTimelineComponent.tsx | 119 +++++++++++ .../BuildTimelineComponent/index.ts | 16 ++ .../src/components/BuildsPage/BuildsPage.tsx | 17 +- .../PreformattedTextComponent.tsx | 128 ++++++++++++ .../PreformattedTextComponent/index.ts | 16 ++ .../StatusCellComponent.tsx | 19 +- plugins/xcmetrics/src/utils/format.ts | 6 + 17 files changed, 551 insertions(+), 131 deletions(-) create mode 100644 plugins/xcmetrics/src/components/BuildTimelineComponent/BuildTimelineComponent.test.tsx create mode 100644 plugins/xcmetrics/src/components/BuildTimelineComponent/BuildTimelineComponent.tsx create mode 100644 plugins/xcmetrics/src/components/BuildTimelineComponent/index.ts create mode 100644 plugins/xcmetrics/src/components/PreformattedTextComponent/PreformattedTextComponent.tsx create mode 100644 plugins/xcmetrics/src/components/PreformattedTextComponent/index.ts diff --git a/plugins/xcmetrics/package.json b/plugins/xcmetrics/package.json index 8ebcf9a85e..50eaaf5b94 100644 --- a/plugins/xcmetrics/package.json +++ b/plugins/xcmetrics/package.json @@ -30,7 +30,8 @@ "luxon": "^2.0.2", "react": "^16.13.1", "react-dom": "^16.13.1", - "react-use": "^17.2.4" + "react-use": "^17.2.4", + "recharts": "^1.8.5" }, "devDependencies": { "@backstage/cli": "^0.7.7", diff --git a/plugins/xcmetrics/src/api/XcmetricsClient.ts b/plugins/xcmetrics/src/api/XcmetricsClient.ts index 7aee5453bd..37baa949d4 100644 --- a/plugins/xcmetrics/src/api/XcmetricsClient.ts +++ b/plugins/xcmetrics/src/api/XcmetricsClient.ts @@ -24,6 +24,7 @@ import { BuildFilters, BuildHost, BuildMetadata, + BuildResponse, BuildStatusResult, BuildTime, BuildWarning, @@ -42,9 +43,9 @@ export class XcmetricsClient implements XcmetricsApi { this.discoveryApi = options.discoveryApi; } - async getBuild(id: string): Promise { + async getBuild(id: string): Promise { const response = await this.get(`/build/${id}`); - return ((await response.json()) as Record<'build', Build>).build; + return (await response.json()) as BuildResponse; } async getBuilds(limit: number = 10): Promise { diff --git a/plugins/xcmetrics/src/api/__mocks__/XcmetricsClient.ts b/plugins/xcmetrics/src/api/__mocks__/XcmetricsClient.ts index 5258215175..765be721c6 100644 --- a/plugins/xcmetrics/src/api/__mocks__/XcmetricsClient.ts +++ b/plugins/xcmetrics/src/api/__mocks__/XcmetricsClient.ts @@ -24,9 +24,13 @@ import { BuildStatusResult, BuildTime, BuildWarning, + Target, XcmetricsApi, + Xcode, } from '../types'; +const MOCK_BUILD_ID = 'buildId'; + export const mockBuild: Build = { userid: 'userid1', warningCount: 1, @@ -42,7 +46,7 @@ export const mockBuild: Build = { projectName: 'ProjectName', compilationEndTimestampMicroseconds: 1, errorCount: 1, - id: 'buildId', + id: MOCK_BUILD_ID, buildStatus: 'succeeded', compilationDuration: 1, schema: 'SchemaName', @@ -74,7 +78,7 @@ export const mockBuildError: BuildError = { severity: 2, startingLine: 241, parentType: 'step', - buildIdentifier: 'buildId', + buildIdentifier: MOCK_BUILD_ID, startingColumn: 97, characterRangeStart: 0, documentURL: 'file:///Users//myproject/Sources/MyClass.m', @@ -96,7 +100,7 @@ export const mockBuildHost: BuildHost = { memoryTotalMb: 16384, timezone: 'CET', cpuModel: 'Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz', - buildIdentifier: 'buildId', + buildIdentifier: MOCK_BUILD_ID, memoryFreeMb: 24.5234375, cpuSpeedGhz: 3.5, }; @@ -114,7 +118,7 @@ export const mockBuildTime: BuildTime = { totalDuration: 3.1, }; export const mockBuildStatus: BuildStatusResult = { - id: 'build_id', + id: MOCK_BUILD_ID, buildStatus: 'succeeded', }; @@ -135,13 +139,47 @@ export const mockBuildWarning: BuildWarning = { parentType: 'step', clangFlag: '[-Wdeprecated-declarations]', startingColumn: 22, - buildIdentifier: 'MyMac_34580469-5792-40F3-BEFB-7C5925996F23_1', + buildIdentifier: MOCK_BUILD_ID, characterRangeStart: 0, }; +export const mockTarget: Target = { + id: 'MyMac_34580469-5792-40F3-BEFB-7C5925996F23_1992', + category: 'noop', + startTimestamp: '2020-11-02T10:59:09Z', + compilationEndTimestampMicroseconds: 1604314749.2909288, + endTimestampMicroseconds: 1604314982.298002, + endTimestamp: '2020-11-02T11:03:02Z', + fetchedFromCache: false, + errorCount: 0, + day: '2020-11-02T00:00:00Z', + warningCount: 0, + compilationEndTimestamp: '2020-11-02T10:59:09Z', + compilationDuration: 0, + compiledCount: 0, + duration: 0.000233007, + buildIdentifier: MOCK_BUILD_ID, + name: 'Model', + startTimestampMicroseconds: 1604314749.2909288, +}; + +export const mockXcode: Xcode = { + buildNumber: '12A7209', + id: '6354C87F-0ADC-4354-929C-02EBE545E099', + buildIdentifier: MOCK_BUILD_ID, + day: '2020-11-02T00:00:00Z', + version: '1200', +}; + +export const mockBuildResponse = { + build: mockBuild, + targets: [mockTarget], + xcode: mockXcode, +}; + export const XcmetricsClient: XcmetricsApi = { - getBuild: (id: string) => { - return Promise.resolve({ ...mockBuild, id }); + getBuild: (_id: string) => { + return Promise.resolve(mockBuildResponse); }, getBuilds: () => { return Promise.resolve([ diff --git a/plugins/xcmetrics/src/api/types.ts b/plugins/xcmetrics/src/api/types.ts index 8f6ae9f0ae..44f27872ca 100644 --- a/plugins/xcmetrics/src/api/types.ts +++ b/plugins/xcmetrics/src/api/types.ts @@ -132,6 +132,40 @@ export type PaginationResult = { }; }; +export type Target = { + id: string; + category: string; + startTimestamp: string; + compilationEndTimestampMicroseconds: number; + endTimestampMicroseconds: number; + endTimestamp: string; + fetchedFromCache: boolean; + errorCount: number; + day: string; + warningCount: number; + compilationEndTimestamp: string; + compilationDuration: number; + compiledCount: number; + duration: number; + buildIdentifier: string; + name: string; + startTimestampMicroseconds: number; +}; + +export type Xcode = { + buildNumber: string; + id: string; + buildIdentifier: string; + day: string; + version: string; +}; + +export type BuildResponse = { + build: Build; + targets: Target[]; + xcode: Xcode; +}; + export type BuildFilters = { from: string; // ISO Date (e.g. "2021-01-01") to: string; // ISO Date (e.g. "2021-01-02") @@ -140,7 +174,7 @@ export type BuildFilters = { }; export interface XcmetricsApi { - getBuild(id: string): Promise; + getBuild(id: string): Promise; getBuilds(limit?: number): Promise; getFilteredBuilds( filters: BuildFilters, diff --git a/plugins/xcmetrics/src/components/AccordionComponent/AccordionComponent.tsx b/plugins/xcmetrics/src/components/AccordionComponent/AccordionComponent.tsx index d8c4e4f81d..9afe736a2a 100644 --- a/plugins/xcmetrics/src/components/AccordionComponent/AccordionComponent.tsx +++ b/plugins/xcmetrics/src/components/AccordionComponent/AccordionComponent.tsx @@ -42,6 +42,7 @@ interface AccordionProps { heading: string; secondaryHeading?: string | number; disabled?: boolean; + unmountOnExit?: boolean; } export const AccordionComponent = ( @@ -50,7 +51,10 @@ export const AccordionComponent = ( const classes = useStyles(); return ( - + } aria-controls={`${props.id}-content`} diff --git a/plugins/xcmetrics/src/components/BuildDetailsComponent/BuildDetailsComponent.test.tsx b/plugins/xcmetrics/src/components/BuildDetailsComponent/BuildDetailsComponent.test.tsx index 99c5ec20e5..15b8720a1d 100644 --- a/plugins/xcmetrics/src/components/BuildDetailsComponent/BuildDetailsComponent.test.tsx +++ b/plugins/xcmetrics/src/components/BuildDetailsComponent/BuildDetailsComponent.test.tsx @@ -28,13 +28,17 @@ jest.mock('../AccordionComponent', () => ({ ), })); +jest.mock('../BuildTimelineComponent', () => ({ + BuildTimelineComponent: () => 'BuildTimelineComponent', +})); + describe('BuildDetailsComponent', () => { it('should render', async () => { const rendered = await renderInTestApp( - + , ); @@ -42,6 +46,7 @@ describe('BuildDetailsComponent', () => { expect(rendered.getByText('accordion-Errors')).toBeInTheDocument(); expect(rendered.getByText('accordion-Warnings')).toBeInTheDocument(); expect(rendered.getByText('accordion-Metadata')).toBeInTheDocument(); + expect(rendered.getByText('accordion-Timeline')).toBeInTheDocument(); expect(rendered.getByText(client.mockBuild.id)).toBeInTheDocument(); expect( diff --git a/plugins/xcmetrics/src/components/BuildDetailsComponent/BuildDetailsComponent.tsx b/plugins/xcmetrics/src/components/BuildDetailsComponent/BuildDetailsComponent.tsx index 99b4c83210..6696a2083d 100644 --- a/plugins/xcmetrics/src/components/BuildDetailsComponent/BuildDetailsComponent.tsx +++ b/plugins/xcmetrics/src/components/BuildDetailsComponent/BuildDetailsComponent.tsx @@ -15,12 +15,8 @@ */ import { createStyles, Divider, Grid, makeStyles } from '@material-ui/core'; import React from 'react'; -import { Build, xcmetricsApiRef } from '../../api'; -import { - OverflowTooltip, - Progress, - StructuredMetadataTable, -} from '@backstage/core-components'; +import { BuildResponse, xcmetricsApiRef } from '../../api'; +import { Progress, StructuredMetadataTable } from '@backstage/core-components'; import { Alert } from '@material-ui/lab'; import { useAsync } from 'react-use'; import { useApi } from '@backstage/core-plugin-api'; @@ -28,6 +24,8 @@ import { formatDuration, formatStatus, formatTime } from '../../utils'; import { StatusIconComponent as StatusIcon } from '../StatusIconComponent'; import { BackstageTheme } from '@backstage/theme'; import { AccordionComponent } from '../AccordionComponent'; +import { BuildTimelineComponent } from '../BuildTimelineComponent'; +import { PreformattedTextComponent } from '../PreformattedTextComponent'; const useStyles = makeStyles((theme: BackstageTheme) => createStyles({ @@ -39,10 +37,14 @@ const useStyles = makeStyles((theme: BackstageTheme) => ); interface BuildDetailsProps { - build: Build; + buildData: BuildResponse; + showId?: boolean; } -export const BuildDetailsComponent = ({ build }: BuildDetailsProps) => { +export const BuildDetailsComponent = ({ + buildData: { build, targets, xcode }, + showId, +}: BuildDetailsProps) => { const classes = useStyles(); const client = useApi(xcmetricsApiRef); const hostResult = useAsync(async () => client.getBuildHost(build.id), []); @@ -60,7 +62,6 @@ export const BuildDetailsComponent = ({ build }: BuildDetailsProps) => { ); const buildDetails = { - id: build.id, project: build.projectName, schema: build.schema, category: build.category, @@ -74,96 +75,110 @@ export const BuildDetailsComponent = ({ build }: BuildDetailsProps) => { {formatStatus(build.buildStatus)} ), + xcode: `${xcode.version} (${xcode.buildNumber})`, CI: build.isCi, }; return ( - - - - - - - - {hostResult.loading && } - {!hostResult.loading && hostResult.value && ( - - )} - - - -
- {errorsResult.loading && } - {!errorsResult.loading && - errorsResult.value && - errorsResult.value.map((error, idx) => ( -
- - {idx !== errorsResult.value.length - 1 && ( - - )} -
- ))} -
- - - -
- {warningsResult.loading && } - {!warningsResult.loading && - warningsResult.value && - warningsResult.value.map((warning, idx) => ( -
- - {idx !== warningsResult.value.length - 1 && ( - - )} -
- ))} -
- - - - {metadataResult.loading && } - {!metadataResult.loading && metadataResult.value && ( - - )} - - + + + + + + + {hostResult.loading && } + {!hostResult.loading && hostResult.value && ( + + )} + + + +
+ {errorsResult.loading && } + {!errorsResult.loading && + errorsResult.value?.map((error, idx) => ( +
+ + {idx !== errorsResult.value.length - 1 && ( + + )} +
+ ))} +
+ + + +
+ {warningsResult.loading && } + {!warningsResult.loading && + warningsResult.value?.map((warning, idx) => ( +
+ + {idx !== warningsResult.value.length - 1 && ( + + )} +
+ ))} +
+ + + + {metadataResult.loading && } + {!metadataResult.loading && metadataResult.value && ( + + )} + + + + + - {/* TODO: Sequnce chart */} ); }; +type WithRequestProps = Omit & { + buildId: string; +}; + export const withRequest = (Component: typeof BuildDetailsComponent) => ({ buildId, -}: { - buildId: string; -}) => { + ...props +}: WithRequestProps) => { const client = useApi(xcmetricsApiRef); - const { value: build, loading, error } = useAsync( + const { value: buildResponse, loading, error } = useAsync( async () => client.getBuild(buildId), [], ); @@ -176,9 +191,9 @@ export const withRequest = (Component: typeof BuildDetailsComponent) => ({ return {error.message}; } - if (!build) { + if (!buildResponse) { return Could not load build {buildId}; } - return ; + return ; }; diff --git a/plugins/xcmetrics/src/components/BuildListComponent/BuildListComponent.test.tsx b/plugins/xcmetrics/src/components/BuildListComponent/BuildListComponent.test.tsx index 7d7d1ff585..761c08a711 100644 --- a/plugins/xcmetrics/src/components/BuildListComponent/BuildListComponent.test.tsx +++ b/plugins/xcmetrics/src/components/BuildListComponent/BuildListComponent.test.tsx @@ -28,6 +28,7 @@ jest.mock('../BuildListFilterComponent', () => ({ })); jest.mock('../BuildDetailsComponent', () => ({ + withRequest: (component: any) => component, BuildDetailsComponent: () => 'BuildDetailsComponent', })); diff --git a/plugins/xcmetrics/src/components/BuildListComponent/BuildListComponent.tsx b/plugins/xcmetrics/src/components/BuildListComponent/BuildListComponent.tsx index 6cc44eee54..42f6bf4414 100644 --- a/plugins/xcmetrics/src/components/BuildListComponent/BuildListComponent.tsx +++ b/plugins/xcmetrics/src/components/BuildListComponent/BuildListComponent.tsx @@ -21,7 +21,7 @@ import { createStyles, Grid, makeStyles } from '@material-ui/core'; import { BuildListFilterComponent as Filters } from '../BuildListFilterComponent'; import { DateTime } from 'luxon'; import { buildPageColumns } from '../BuildTableColumns'; -import { BuildDetailsComponent } from '../BuildDetailsComponent'; +import { BuildDetailsComponent, withRequest } from '../BuildDetailsComponent'; import { BackstageTheme } from '@backstage/theme'; const useStyles = makeStyles((theme: BackstageTheme) => @@ -80,11 +80,14 @@ export const BuildListComponent = () => { .catch(reason => reject(reason)); }); }} - detailPanel={rowData => ( -
- -
- )} + detailPanel={rowData => { + const BuildDetails = withRequest(BuildDetailsComponent); + return ( +
+ +
+ ); + }} /> ); diff --git a/plugins/xcmetrics/src/components/BuildTimelineComponent/BuildTimelineComponent.test.tsx b/plugins/xcmetrics/src/components/BuildTimelineComponent/BuildTimelineComponent.test.tsx new file mode 100644 index 0000000000..3adb1ede58 --- /dev/null +++ b/plugins/xcmetrics/src/components/BuildTimelineComponent/BuildTimelineComponent.test.tsx @@ -0,0 +1,43 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; +import { renderInTestApp } from '@backstage/test-utils'; +import { BuildTimelineComponent } from './BuildTimelineComponent'; + +jest.mock('../../api/XcmetricsClient'); +const client = require('../../api/XcmetricsClient'); + +describe('BuildTimelineComponent', () => { + it('should render', async () => { + const rendered = await renderInTestApp( + , + ); + expect( + await rendered.findByText(client.mockTarget.name), + ).toBeInTheDocument(); + }); + + it('should render a message if no targets are provided', async () => { + const rendered = await renderInTestApp( + , + ); + expect(rendered.getByText('No Targets')).toBeInTheDocument(); + }); +}); diff --git a/plugins/xcmetrics/src/components/BuildTimelineComponent/BuildTimelineComponent.tsx b/plugins/xcmetrics/src/components/BuildTimelineComponent/BuildTimelineComponent.tsx new file mode 100644 index 0000000000..0d0f249a95 --- /dev/null +++ b/plugins/xcmetrics/src/components/BuildTimelineComponent/BuildTimelineComponent.tsx @@ -0,0 +1,119 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { createStyles, makeStyles, useTheme } from '@material-ui/core'; +import React from 'react'; +import { + Bar, + BarChart, + CartesianGrid, + Legend, + ResponsiveContainer, + Tooltip, + XAxis, + YAxis, +} from 'recharts'; +import { BackstageTheme } from '@backstage/theme'; +import { Target } from '../../api'; +import { formatSecondsInterval, formatPercentage } from '../../utils'; + +const EMPTY_HEIGHT = 100; + +const useStyles = makeStyles((theme: BackstageTheme) => + createStyles({ + toolTip: { + backgroundColor: theme.palette.background.paper, + opacity: 0.8, + padding: 8, + }, + }), +); + +const TargetToolTip = ({ active, payload, label }: any) => { + const classes = useStyles(); + + if (active && payload && payload.length === 2) { + const buildTime = payload[0].value[1] - payload[0].value[0]; + const compileTime = payload[1].value[1] - payload[1].value[0]; + return ( +
+ {`${label}: ${formatSecondsInterval(payload[0].value)}`} +
+ {buildTime > 0 && + `Compile time: ${formatPercentage(compileTime / buildTime)}`} +
+ ); + } + + return null; +}; + +const getTimelineData = (targets: Target[]) => { + const min = targets[0].startTimestampMicroseconds; + + return targets + .filter(target => target.fetchedFromCache === false) + .map(target => ({ + name: target.name, + buildTime: [ + target.startTimestampMicroseconds - min, + target.endTimestampMicroseconds - min, + ], + compileTime: [ + target.startTimestampMicroseconds - min, + target.compilationEndTimestampMicroseconds - min, + ], + })); +}; + +export interface BuildTimelineProps { + targets: Target[]; + height?: number; + width?: number; +} + +export const BuildTimelineComponent = ({ + targets, + height, + width, +}: BuildTimelineProps) => { + const theme = useTheme(); + if (!targets.length) return

No Targets

; + + const data = getTimelineData(targets); + + return ( + + + + + + } /> + + + + + + ); +}; diff --git a/plugins/xcmetrics/src/components/BuildTimelineComponent/index.ts b/plugins/xcmetrics/src/components/BuildTimelineComponent/index.ts new file mode 100644 index 0000000000..2a6a612acf --- /dev/null +++ b/plugins/xcmetrics/src/components/BuildTimelineComponent/index.ts @@ -0,0 +1,16 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +export * from './BuildTimelineComponent'; diff --git a/plugins/xcmetrics/src/components/BuildsPage/BuildsPage.tsx b/plugins/xcmetrics/src/components/BuildsPage/BuildsPage.tsx index 6d7c8cf20b..ca3f023ff5 100644 --- a/plugins/xcmetrics/src/components/BuildsPage/BuildsPage.tsx +++ b/plugins/xcmetrics/src/components/BuildsPage/BuildsPage.tsx @@ -18,7 +18,7 @@ import { useRouteRefParams } from '@backstage/core-plugin-api'; import { buildsRouteRef } from '../../routes'; import { BuildListComponent } from '../BuildListComponent'; import { BuildDetailsComponent, withRequest } from '../BuildDetailsComponent'; -import { CopyTextButton, InfoCard } from '@backstage/core-components'; +import { InfoCard } from '@backstage/core-components'; export const BuildsPage = () => { const { '*': buildId } = useRouteRefParams(buildsRouteRef) ?? { '*': '' }; @@ -27,19 +27,8 @@ export const BuildsPage = () => { const BuildDetails = withRequest(BuildDetailsComponent); return ( - - {buildId}{' '} - - - } - > - + + ); } diff --git a/plugins/xcmetrics/src/components/PreformattedTextComponent/PreformattedTextComponent.tsx b/plugins/xcmetrics/src/components/PreformattedTextComponent/PreformattedTextComponent.tsx new file mode 100644 index 0000000000..a5ad997ee8 --- /dev/null +++ b/plugins/xcmetrics/src/components/PreformattedTextComponent/PreformattedTextComponent.tsx @@ -0,0 +1,128 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { + Button, + createStyles, + Dialog, + DialogActions, + DialogContent, + DialogTitle, + IconButton, + makeStyles, +} from '@material-ui/core'; +import CloseIcon from '@material-ui/icons/Close'; +import React, { useState } from 'react'; +import { BackstageTheme } from '@backstage/theme'; +import { cn } from '../../utils'; + +const useStyles = makeStyles((theme: BackstageTheme) => + createStyles({ + pre: { + whiteSpace: 'pre-line', + wordBreak: 'break-all', + }, + expandable: { + cursor: 'pointer', + }, + fullPre: { + whiteSpace: 'pre-wrap', + }, + closeButton: { + position: 'absolute', + right: theme.spacing(1), + top: theme.spacing(1), + color: theme.palette.grey[500], + }, + }), +); + +interface PreformattedTextProps { + text: string; + maxChars: number; +} + +interface ExpandableProps extends PreformattedTextProps { + expandable: boolean; + title: string; +} + +interface NonExpandableProps extends PreformattedTextProps { + expandable?: never; + title?: string; +} + +export const PreformattedTextComponent = ({ + text, + maxChars, + expandable, + title, +}: NonExpandableProps | ExpandableProps) => { + const [open, setOpen] = useState(false); + const classes = useStyles(); + + const handleKeyUp = (event: React.KeyboardEvent) => { + if (expandable && event.key === 'Enter') { + setOpen(true); + } + }; + + return ( + <> +
expandable && setOpen(true)} + onKeyUp={handleKeyUp} + tabIndex={expandable ? 0 : undefined} + > + 
+          {text.slice(0, maxChars - 3).trim()}
+          {text.length > maxChars && '...'}
+
+
+ + {expandable && ( + setOpen(false)} + aria-labelledby="dialog-title" + aria-describedby="dialog-description" + maxWidth="xl" + fullWidth + > + + {title} + setOpen(false)} + > + + + + + 
{text}
+ + + + + + )} + + ); +}; diff --git a/plugins/xcmetrics/src/components/PreformattedTextComponent/index.ts b/plugins/xcmetrics/src/components/PreformattedTextComponent/index.ts new file mode 100644 index 0000000000..e923eeb224 --- /dev/null +++ b/plugins/xcmetrics/src/components/PreformattedTextComponent/index.ts @@ -0,0 +1,16 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +export * from './PreformattedTextComponent'; diff --git a/plugins/xcmetrics/src/components/StatusCellComponent/StatusCellComponent.tsx b/plugins/xcmetrics/src/components/StatusCellComponent/StatusCellComponent.tsx index 1ecc324683..201cb4febf 100644 --- a/plugins/xcmetrics/src/components/StatusCellComponent/StatusCellComponent.tsx +++ b/plugins/xcmetrics/src/components/StatusCellComponent/StatusCellComponent.tsx @@ -28,15 +28,16 @@ interface TooltipContentProps { const TooltipContent = ({ buildId }: TooltipContentProps) => { const client = useApi(xcmetricsApiRef); - const { - value: build, - loading, - error, - } = useAsync(async () => client.getBuild(buildId), []); + const { value, loading, error } = useAsync( + async () => client.getBuild(buildId), + [], + ); if (error) { return
{error.message}
; - } else if (loading || !build) { + } + + if (loading || !value?.build) { return ; } @@ -45,15 +46,15 @@ const TooltipContent = ({ buildId }: TooltipContentProps) => { Started - {new Date(build.startTimestamp).toLocaleString()} + {new Date(value.build.startTimestamp).toLocaleString()} Duration - {formatDuration(build.duration)} + {formatDuration(value.build.duration)} Status - {formatStatus(build.buildStatus)} + {formatStatus(value.build.buildStatus)} diff --git a/plugins/xcmetrics/src/utils/format.ts b/plugins/xcmetrics/src/utils/format.ts index 67a0ed4c43..e21e95a7b2 100644 --- a/plugins/xcmetrics/src/utils/format.ts +++ b/plugins/xcmetrics/src/utils/format.ts @@ -32,6 +32,12 @@ export const formatDuration = (seconds: number) => { return `${h} ${m} ${s}`; }; +export const formatSecondsInterval = ([start, end]: [number, number]) => { + return `${Math.round(start * 100) / 100} s - ${ + Math.round(end * 100) / 100 + } s`; +}; + export const formatTime = (timestamp: string) => { return DateTime.fromISO(timestamp).toLocaleString( DateTime.DATETIME_SHORT_WITH_SECONDS,