Skip to content

Commit

Permalink
feat(details): Add json viewer
Browse files Browse the repository at this point in the history
- Changed `LogSheetContent` to be able to work with both log content or
  JSON content
- Added state variables needed to control if the sheet content is log or
  json in {Builds,Tests,Issues}Details.

Part of #782
Closes #787
  • Loading branch information
murilx committed Jan 20, 2025
1 parent 2164d19 commit e262d0f
Show file tree
Hide file tree
Showing 10 changed files with 280 additions and 45 deletions.
1 change: 1 addition & 0 deletions dashboard/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@hookform/resolvers": "^3.9.0",
"@microlink/react-json-view": "^1.24.0",
"@mui/material": "^6.1.5",
"@mui/x-charts": "^7.22.0",
"@radix-ui/react-alert-dialog": "^1.1.1",
Expand Down
141 changes: 141 additions & 0 deletions dashboard/pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

19 changes: 16 additions & 3 deletions dashboard/src/components/BuildDetails/BuildDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { MdClose, MdCheck, MdFolderOpen } from 'react-icons/md';

import { useIntl } from 'react-intl';
import { ErrorBoundary } from 'react-error-boundary';
import { useMemo } from 'react';
import { useMemo, useState } from 'react';

import {
useSearch,
Expand All @@ -27,7 +27,10 @@ import { Sheet, SheetTrigger } from '@/components/Sheet';

import type { TableFilter, TestsTableFilter } from '@/types/tree/TreeDetails';

import { LogSheetContent } from '@/components/Log/LogSheetContent';
import {
LogOrJsonSheetContent,
type SheetType,
} from '@/components/Sheet/LogOrJsonSheetContent';
import { TruncatedValueTooltip } from '@/components/Tooltip/TruncatedValueTooltip';

import { getMiscSection } from '@/components/Section/MiscSection';
Expand Down Expand Up @@ -70,12 +73,17 @@ const BuildDetails = ({

const hasUsefulLogInfo = data?.log_url || data?.log_excerpt;

const [sheetType, setSheetType] = useState<SheetType>('log');
const [jsonContent, setJsonContent] = useState<JSON>();

const miscSection: ISection | undefined = useMemo(():
| ISection
| undefined => {
return getMiscSection({
misc: data?.misc,
title: formatMessage({ id: 'globalDetails.miscData' }),
setSheetType: setSheetType,
setJsonContent: setJsonContent,
});
}, [data?.misc, formatMessage]);

Expand Down Expand Up @@ -188,6 +196,9 @@ const BuildDetails = ({
),
icon: hasUsefulLogInfo ? <BlueFolderIcon /> : undefined,
wrapperComponent: hasUsefulLogInfo ? SheetTrigger : undefined,
wrapperOnClick: hasUsefulLogInfo
? (): void => setSheetType('log')
: undefined,
},
{
title: 'buildDetails.buildId',
Expand Down Expand Up @@ -242,7 +253,9 @@ const BuildDetails = ({
historyState={historyState}
previousSearch={searchParams}
/>
<LogSheetContent
<LogOrJsonSheetContent
type={sheetType}
jsonContent={jsonContent}
logUrl={data?.log_url}
logExcerpt={data?.log_excerpt}
/>
Expand Down
Loading

0 comments on commit e262d0f

Please sign in to comment.