From ec8bcfd32459ed97478b14ef150b8f4aeeb3f834 Mon Sep 17 00:00:00 2001 From: Mariana Sartorato Date: Thu, 18 Jul 2024 09:41:07 -0300 Subject: [PATCH] feat(#72): add builds yable in tree details page --- .../src/components/Table/BuildsTable.tsx | 28 +++++++ .../Tabs/TreeDetails/TreeDetailsBuildTab.tsx | 79 +++++++++++++++---- dashboard/src/locales/messages/index.ts | 1 + .../src/routes/TreeDetails/TreeDetails.tsx | 18 ++++- 4 files changed, 108 insertions(+), 18 deletions(-) create mode 100644 dashboard/src/components/Table/BuildsTable.tsx diff --git a/dashboard/src/components/Table/BuildsTable.tsx b/dashboard/src/components/Table/BuildsTable.tsx new file mode 100644 index 0000000..bc51d98 --- /dev/null +++ b/dashboard/src/components/Table/BuildsTable.tsx @@ -0,0 +1,28 @@ +import Accordion, { IAccordionItems } from '../Accordion/Accordion'; + +interface IBuildsTable { + buildsData?: IAccordionItems[]; +} + +const BuildsTable = ({ buildsData }: IBuildsTable): JSX.Element => { + return ( +
+ {buildsData && ( + + )} +
+ ); +}; + +export default BuildsTable; diff --git a/dashboard/src/components/Tabs/TreeDetails/TreeDetailsBuildTab.tsx b/dashboard/src/components/Tabs/TreeDetails/TreeDetailsBuildTab.tsx index 612659c..8e9c416 100644 --- a/dashboard/src/components/Tabs/TreeDetails/TreeDetailsBuildTab.tsx +++ b/dashboard/src/components/Tabs/TreeDetails/TreeDetailsBuildTab.tsx @@ -3,10 +3,11 @@ import { FormattedMessage } from 'react-intl'; import { useMemo } from 'react'; import CardsGroup from '@/components/CardsGroup/CardsGroup'; -import { Colors, IStatusChart } from '@/components/StatusChart/StatusCharts'; +import { Colors } from '@/components/StatusChart/StatusCharts'; import { ITreeDetails } from '@/routes/TreeDetails/TreeDetails'; -import { ISummary } from '@/components/Summary/Summary'; -import { IListingContent } from '@/components/ListingContent/ListingContent'; +import BuildsTable from '@/components/Table/BuildsTable'; +import { TableInfo } from '@/components/Table/TableInfo'; +import { usePagination } from '@/hooks/usePagination'; interface ITreeDetailsBuildTab { treeDetailsData?: ITreeDetails; @@ -15,40 +16,53 @@ interface ITreeDetailsBuildTab { const TreeDetailsBuildTab = ({ treeDetailsData, }: ITreeDetailsBuildTab): JSX.Element => { + const accordionContent = useMemo(() => { + return treeDetailsData?.builds.map(row => ({ + trigger: { + ...row, + buildTime: `${row.buildTime?.split('.')[0]} ${()}`, + date: row.date?.split(' ')[0], + }, + content: <>, + })); + }, [treeDetailsData?.builds]); + + const { startIndex, endIndex, onClickGoForward, onClickGoBack } = + usePagination(accordionContent?.length ?? 0, ITEMS_PER_PAGE); const cards = useMemo( () => [ { title: , type: 'chart', pieCentralLabel: `${ - (treeDetailsData?.builds.invalid ?? 0) + - (treeDetailsData?.builds.valid ?? 0) + - (treeDetailsData?.builds.null ?? 0) + (treeDetailsData?.buildsSummary.invalid ?? 0) + + (treeDetailsData?.buildsSummary.valid ?? 0) + + (treeDetailsData?.buildsSummary.null ?? 0) }`, pieCentralDescription: , elements: [ { - value: treeDetailsData?.builds.valid ?? 0, + value: treeDetailsData?.buildsSummary.valid ?? 0, label: 'Valid', color: Colors.Green, }, { - value: treeDetailsData?.builds.invalid ?? 0, + value: treeDetailsData?.buildsSummary.invalid ?? 0, label: 'Invalid', color: Colors.Red, }, { - value: treeDetailsData?.builds.null ?? 0, + value: treeDetailsData?.buildsSummary.null ?? 0, label: 'Null', color: Colors.Gray, }, ], - } as IStatusChart, + }, { items: treeDetailsData?.configs ?? [], title: , type: 'listing', - } as IListingContent, + }, { summaryBody: treeDetailsData?.archs ?? [], title: , @@ -60,21 +74,54 @@ const TreeDetailsBuildTab = ({ />, ], type: 'summary', - } as ISummary, + }, ], [ treeDetailsData?.archs, - treeDetailsData?.builds.invalid, - treeDetailsData?.builds.null, - treeDetailsData?.builds.valid, + treeDetailsData?.buildsSummary.invalid, + treeDetailsData?.buildsSummary.null, + treeDetailsData?.buildsSummary.valid, treeDetailsData?.configs, ], ); + return ( -
+
+ {accordionContent && ( +
+
+ +
+
+ +
+ +
+ +
+
+ )}
); }; +const ITEMS_PER_PAGE = 10; + export default TreeDetailsBuildTab; diff --git a/dashboard/src/locales/messages/index.ts b/dashboard/src/locales/messages/index.ts index 7151176..2be4132 100644 --- a/dashboard/src/locales/messages/index.ts +++ b/dashboard/src/locales/messages/index.ts @@ -5,6 +5,7 @@ export const messages = { global: { filters: 'Filters', cleanAll: 'Clean all', + seconds: 'sec', }, routes: { deviceMonitor: 'Devices', diff --git a/dashboard/src/routes/TreeDetails/TreeDetails.tsx b/dashboard/src/routes/TreeDetails/TreeDetails.tsx index 6ac2e2d..340854c 100644 --- a/dashboard/src/routes/TreeDetails/TreeDetails.tsx +++ b/dashboard/src/routes/TreeDetails/TreeDetails.tsx @@ -13,11 +13,13 @@ import { useTreeDetails } from '@/api/TreeDetails'; import { IListingItem } from '@/components/ListingItem/ListingItem'; import { ISummaryItem } from '@/components/Summary/Summary'; import { Results } from '@/types/tree/TreeDetails'; +import { AccordionItemBuildsTrigger } from '@/components/Accordion/Accordion'; export interface ITreeDetails { archs: ISummaryItem[]; configs: IListingItem[]; - builds: Results; + buildsSummary: Results; + builds: AccordionItemBuildsTrigger[]; } const TreeDetails = (): JSX.Element => { @@ -49,10 +51,22 @@ const TreeDetails = (): JSX.Element => { null: data.summary.builds.null, }; + const buildsData: AccordionItemBuildsTrigger[] = Object.entries( + data.builds, + ).map(([, value]) => ({ + config: value.config_name, + date: value.start_time, + buildTime: value.duration, + compiler: value.compiler, + buildErrors: value.test_status.error, + status: value.valid ? 'valid' : 'invalid', + })); + setTreeDetailsData({ archs: archData, configs: configsData, - builds: buildSummaryData, + buildsSummary: buildSummaryData, + builds: buildsData, }); } }, [data]);