-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ui): Add support for structured reporting of warnings and failur…
…es in the UI ingestion flow (ingest uplift 2/2) (#10790) Co-authored-by: John Joyce <[email protected]> Co-authored-by: John Joyce <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
- Loading branch information
4 people
authored
Jul 1, 2024
1 parent
9c5bea3
commit c7f83a3
Showing
11 changed files
with
629 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
44 changes: 44 additions & 0 deletions
44
datahub-web-react/src/app/ingest/source/executions/reporting/StructuredReport.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import React from 'react'; | ||
| import styled from 'styled-components'; | ||
| import { CloseCircleOutlined, ExclamationCircleOutlined, InfoCircleOutlined } from '@ant-design/icons'; | ||
|
|
||
| import { StructuredReportItemLevel, StructuredReport as StructuredReportType } from '../../types'; | ||
| import { StructuredReportItemList } from './StructuredReportItemList'; | ||
| import { REDESIGN_COLORS } from '../../../../entity/shared/constants'; | ||
|
|
||
| const Container = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 12px; | ||
| `; | ||
|
|
||
| const ERROR_COLOR = '#F5222D'; | ||
| const WARNING_COLOR = '#FA8C16'; | ||
| const INFO_COLOR = REDESIGN_COLORS.BLUE; | ||
|
|
||
| interface Props { | ||
| report: StructuredReportType; | ||
| } | ||
|
|
||
| export function StructuredReport({ report }: Props) { | ||
| if (!report.items.length) { | ||
| return null; | ||
| } | ||
|
|
||
| const warnings = report.items.filter((item) => item.level === StructuredReportItemLevel.WARN); | ||
| const errors = report.items.filter((item) => item.level === StructuredReportItemLevel.ERROR); | ||
| const infos = report.items.filter((item) => item.level === StructuredReportItemLevel.INFO); | ||
| return ( | ||
| <Container> | ||
| {errors.length ? ( | ||
| <StructuredReportItemList items={errors} color={ERROR_COLOR} icon={CloseCircleOutlined} /> | ||
| ) : null} | ||
| {warnings.length ? ( | ||
| <StructuredReportItemList items={warnings} color={WARNING_COLOR} icon={ExclamationCircleOutlined} /> | ||
| ) : null} | ||
| {infos.length ? ( | ||
| <StructuredReportItemList items={infos} color={INFO_COLOR} icon={InfoCircleOutlined} /> | ||
| ) : null} | ||
| </Container> | ||
| ); | ||
| } |
81 changes: 81 additions & 0 deletions
81
datahub-web-react/src/app/ingest/source/executions/reporting/StructuredReportItem.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import React from 'react'; | ||
| import styled from 'styled-components'; | ||
| import { Collapse } from 'antd'; | ||
|
|
||
| import { StructuredReportItem as StructuredReportItemType } from '../../types'; | ||
| import { ANTD_GRAY } from '../../../../entity/shared/constants'; | ||
| import { applyOpacity } from '../../../../shared/styleUtils'; | ||
| import { StructuredReportItemContext } from './StructuredReportItemContext'; | ||
|
|
||
| const StyledCollapse = styled(Collapse)<{ color: string }>` | ||
| background-color: ${(props) => applyOpacity(props.color, 8)}; | ||
| border: 1px solid ${(props) => applyOpacity(props.color, 20)}; | ||
| display: flex; | ||
| && { | ||
| .ant-collapse-header { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| .ant-collapse-item { | ||
| border: none; | ||
| width: 100%; | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| const Item = styled.div` | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: start; | ||
| gap: 4px; | ||
| `; | ||
|
|
||
| const Content = styled.div` | ||
| border-radius: 8px; | ||
| `; | ||
|
|
||
| const Text = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| `; | ||
|
|
||
| const Type = styled.div` | ||
| font-weight: bold; | ||
| font-size: 14px; | ||
| `; | ||
|
|
||
| const Message = styled.div` | ||
| color: ${ANTD_GRAY[8]}; | ||
| `; | ||
|
|
||
| interface Props { | ||
| item: StructuredReportItemType; | ||
| color: string; | ||
| icon?: React.ComponentType<any>; | ||
| } | ||
|
|
||
| export function StructuredReportItem({ item, color, icon }: Props) { | ||
| const Icon = icon; | ||
| return ( | ||
| <StyledCollapse color={color}> | ||
| <Collapse.Panel | ||
| header={ | ||
| <Item> | ||
| {Icon ? <Icon style={{ fontSize: 16, color, marginRight: 12 }} /> : null} | ||
| <Text> | ||
| <Type>{item.title}</Type> | ||
| <Message>{item.message}</Message> | ||
| </Text> | ||
| </Item> | ||
| } | ||
| key="0" | ||
| > | ||
| <Content> | ||
| <StructuredReportItemContext item={item} /> | ||
| </Content> | ||
| </Collapse.Panel> | ||
| </StyledCollapse> | ||
| ); | ||
| } |
44 changes: 44 additions & 0 deletions
44
datahub-web-react/src/app/ingest/source/executions/reporting/StructuredReportItemContext.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import React from 'react'; | ||
| import styled from 'styled-components'; | ||
| import { Tooltip } from 'antd'; | ||
|
|
||
| import { StructuredReportItem as StructuredReportItemType } from '../../types'; | ||
| import { ANTD_GRAY } from '../../../../entity/shared/constants'; | ||
|
|
||
| const Container = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 8px; | ||
| margin-left: 12px; | ||
| `; | ||
|
|
||
| const Title = styled.div` | ||
| font-size: 14px; | ||
| font-weight: bold; | ||
| `; | ||
|
|
||
| const Item = styled.div` | ||
| padding: 6px; | ||
| font-size: 12px; | ||
| border-radius: 2px; | ||
| background-color: ${ANTD_GRAY[3]}; | ||
| color: ${ANTD_GRAY[8]}; | ||
| `; | ||
|
|
||
| interface Props { | ||
| item: StructuredReportItemType; | ||
| } | ||
|
|
||
| export function StructuredReportItemContext({ item }: Props) { | ||
| return ( | ||
| <Container> | ||
| <Tooltip showArrow={false} title="Additional context about the source of the issue" placement="left"> | ||
| <Title>Context</Title> | ||
| </Tooltip> | ||
| {item.context.length | ||
| ? // eslint-disable-next-line react/no-array-index-key | ||
| item.context.map((contextItem, index) => <Item key={`${contextItem}-${index}`}>{contextItem}</Item>) | ||
| : 'No additional context found.'} | ||
| </Container> | ||
| ); | ||
| } |
42 changes: 42 additions & 0 deletions
42
datahub-web-react/src/app/ingest/source/executions/reporting/StructuredReportItemList.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import React, { useState } from 'react'; | ||
| import styled from 'styled-components'; | ||
| import { StructuredReportItem as StructuredReportItemType } from '../../types'; | ||
| import { StructuredReportItem } from './StructuredReportItem'; | ||
| import { ShowMoreSection } from '../../../../shared/ShowMoreSection'; | ||
|
|
||
| const ItemList = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 12px; | ||
| `; | ||
|
|
||
| interface Props { | ||
| items: StructuredReportItemType[]; | ||
| color: string; | ||
| icon?: React.ComponentType<any>; | ||
| pageSize?: number; | ||
| } | ||
|
|
||
| export function StructuredReportItemList({ items, color, icon, pageSize = 3 }: Props) { | ||
| const [visibleCount, setVisibleCount] = useState(pageSize); | ||
| const visibleItems = items.slice(0, visibleCount); | ||
| const totalCount = items.length; | ||
|
|
||
| return ( | ||
| <> | ||
| <ItemList> | ||
| {visibleItems.map((item) => ( | ||
| <StructuredReportItem item={item} color={color} icon={icon} key={item.rawType} /> | ||
| ))} | ||
| </ItemList> | ||
| {totalCount > visibleCount ? ( | ||
| <ShowMoreSection | ||
| totalCount={totalCount} | ||
| visibleCount={visibleCount} | ||
| setVisibleCount={setVisibleCount} | ||
| pageSize={pageSize} | ||
| /> | ||
| ) : null} | ||
| </> | ||
| ); | ||
| } |
Oops, something went wrong.