yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-08-16 05:02:59 +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',
300: '#ECA5A5',
400: '#E99393',
500: '#E37878', // primary value
500: '#CD0D24', // primary value
600: '#CF6D6D',
700: '#A15555',
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 { 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 React, { useState } from 'react';
import styled from 'styled-components';
@ -15,12 +16,12 @@ import { Deprecation } from '@types';
const DeprecatedContainer = styled.div`
height: 18px;
border: 1px solid #cd0d24;
border: 1px solid ${colors.red[500]};
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
color: #cd0d24;
color: ${colors.red[500]};
padding-top: 8px;
padding-bottom: 8px;
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;
gap: 4px;
align-items: center;
color: ${REDESIGN_COLORS.DEPRECATION_RED};
color: ${colors.red[500]};
`;
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 } from '@components';
import { Popover, colors } from '@components';
import { CheckCircle, WarningCircle } from 'phosphor-react';
import React from 'react';
import styled from 'styled-components';
import HealthPopover from '@app/previewV2/HealthPopover';
import { isHealthy, isUnhealthy } from '@app/shared/health/healthUtils';
import { COLORS } from '@app/sharedV2/colors';
import { Health } from '@types';
import AmbulanceIcon from '@images/ambulance-icon.svg?react';
const IconContainer = styled.div`
display: flex;
align-items: center;
font-size: 112.5%;
`;
const HealthyIcon = styled(CheckCircleOutlined)`
color: ${COLORS.green_6};
const UnhealthyIcon = styled(WarningCircle)`
color: ${colors.red[500]};
font-size: 20px;
`;
const HealthyIcon = styled(CheckCircle)`
color: ${colors.green[500]};
font-size: 20px;
`;
interface Props {
@ -31,9 +33,9 @@ interface Props {
const HealthIcon = ({ urn, health, baseUrl, className }: Props) => {
let icon: JSX.Element;
if (isUnhealthy(health)) {
icon = <AmbulanceIcon />;
icon = <UnhealthyIcon weight="regular" />;
} else if (isHealthy(health)) {
icon = <HealthyIcon />;
icon = <HealthyIcon weight="regular" />;
} else {
return null;
}

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

@ -7,6 +7,7 @@ import {
WarningFilled,
WarningOutlined,
} from '@ant-design/icons';
import { colors } from '@components';
import React from 'react';
import styled from 'styled-components';
@ -15,7 +16,7 @@ import { GenericEntityProperties } from '@src/app/entity/shared/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 }>`
&& {