yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-08-17 13:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): Use phosphor icons for asset health (#13293)

Browse Source 
Co-authored-by: John Joyce <john@Mac-242.lan>
This commit is contained in:
John Joyce 2025-04-23 11:55:20 -07:00 committed by GitHub
parent c52cae72cb
commit 1cb616cff9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 20 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
datahub-web-react/src/alchemy-components/theme/foundations/colors.ts
View File

@ -66,7 +66,7 @@ const colors = {
200: '#F2C1C1', 200: '#F2C1C1',
300: '#ECA5A5', 300: '#ECA5A5',
400: '#E99393', 400: '#E99393',
500: '#E37878', // primary value 500: '#CD0D24', // primary value
600: '#CF6D6D', 600: '#CF6D6D',
700: '#A15555', 700: '#A15555',
800: '#7D4242', 800: '#7D4242',

7
datahub-web-react/src/app/entity/shared/components/styled/DeprecationPill.tsx
View File

@ -1,6 +1,7 @@
import { blue } from '@ant-design/colors'; import { blue } from '@ant-design/colors';
import { InfoCircleOutlined } from '@ant-design/icons'; import { InfoCircleOutlined } from '@ant-design/icons';
import { Divider, Modal, Popover, Tooltip, Typography, message } from 'antd'; import { Popover, Tooltip, colors } from '@components';
import { Divider, Modal, Typography, message } from 'antd';
import moment from 'moment'; import moment from 'moment';
import React, { useState } from 'react'; import React, { useState } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
@ -15,12 +16,12 @@ import { Deprecation } from '@types';
const DeprecatedContainer = styled.div` const DeprecatedContainer = styled.div`
height: 18px; height: 18px;
border: 1px solid #cd0d24; border: 1px solid ${colors.red[500]};
border-radius: 15px; border-radius: 15px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: #cd0d24; color: ${colors.red[500]};
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; padding-bottom: 8px;
padding-right: 4px; padding-right: 4px;

2
datahub-web-react/src/app/entityV2/shared/components/styled/DeprecationIcon.tsx
View File

@ -23,7 +23,7 @@ const DeprecatedContainer = styled.div`
justify-content: center; justify-content: center;
gap: 4px; gap: 4px;
align-items: center; align-items: center;
color: ${REDESIGN_COLORS.DEPRECATION_RED}; color: ${colors.red[500]};
`; `;
const DeprecatedTitle = styled(Typography.Text)` const DeprecatedTitle = styled(Typography.Text)`

22
datahub-web-react/src/app/previewV2/HealthIcon.tsx
View File

@ -1,24 +1,26 @@
import { CheckCircleOutlined } from '@ant-design/icons'; import { Popover, colors } from '@components';
import { Popover } from '@components'; import { CheckCircle, WarningCircle } from 'phosphor-react';
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import HealthPopover from '@app/previewV2/HealthPopover'; import HealthPopover from '@app/previewV2/HealthPopover';
import { isHealthy, isUnhealthy } from '@app/shared/health/healthUtils'; import { isHealthy, isUnhealthy } from '@app/shared/health/healthUtils';
import { COLORS } from '@app/sharedV2/colors';
import { Health } from '@types'; import { Health } from '@types';
import AmbulanceIcon from '@images/ambulance-icon.svg?react';
const IconContainer = styled.div` const IconContainer = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 112.5%;
`; `;
const HealthyIcon = styled(CheckCircleOutlined)` const UnhealthyIcon = styled(WarningCircle)`
color: ${COLORS.green_6}; color: ${colors.red[500]};
font-size: 20px;
`;
const HealthyIcon = styled(CheckCircle)`
color: ${colors.green[500]};
font-size: 20px;
`; `;
interface Props { interface Props {
@ -31,9 +33,9 @@ interface Props {
const HealthIcon = ({ urn, health, baseUrl, className }: Props) => { const HealthIcon = ({ urn, health, baseUrl, className }: Props) => {
let icon: JSX.Element; let icon: JSX.Element;
if (isUnhealthy(health)) { if (isUnhealthy(health)) {
icon = <AmbulanceIcon />; icon = <UnhealthyIcon weight="regular" />;
} else if (isHealthy(health)) { } else if (isHealthy(health)) {
icon = <HealthyIcon />; icon = <HealthyIcon weight="regular" />;
} else { } else {
return null; return null;
} }

3
datahub-web-react/src/app/shared/health/healthUtils.tsx
View File

@ -7,6 +7,7 @@ import {
WarningFilled, WarningFilled,
WarningOutlined, WarningOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import { colors } from '@components';
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
@ -15,7 +16,7 @@ import { GenericEntityProperties } from '@src/app/entity/shared/types';
import { Health, HealthStatus, HealthStatusType } from '@types'; import { Health, HealthStatus, HealthStatusType } from '@types';
const HEALTH_INDICATOR_COLOR = '#d48806'; const HEALTH_INDICATOR_COLOR = colors.red[500];
const UnhealthyIconFilled = styled(ExclamationCircleTwoTone)<{ fontSize: number }>` const UnhealthyIconFilled = styled(ExclamationCircleTwoTone)<{ fontSize: number }>`
&& { && {