mirror of
https://github.com/Unleash/unleash.git
synced 2024-10-23 20:07:40 +02:00
106 lines
2.8 KiB
TypeScript
106 lines
2.8 KiB
TypeScript
|
import { useStyles } from './FeatureStatus.styles';
|
||
|
import TimeAgo from 'react-timeago';
|
||
|
import ConditionallyRender from '../../../common/ConditionallyRender';
|
||
|
import { Tooltip } from '@material-ui/core';
|
||
|
|
||
|
function generateUnit(unit?: string): string {
|
||
|
switch (unit) {
|
||
|
case 'second':
|
||
|
return 's';
|
||
|
case 'minute':
|
||
|
return 'm';
|
||
|
case 'hour':
|
||
|
return 'h';
|
||
|
case 'day':
|
||
|
return 'D';
|
||
|
case 'week':
|
||
|
return 'W';
|
||
|
case 'month':
|
||
|
return 'M';
|
||
|
case 'year':
|
||
|
return 'Y';
|
||
|
default:
|
||
|
return '';
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function getColor(unit?: string): string {
|
||
|
switch (unit) {
|
||
|
case 'second':
|
||
|
return '#98E3AF';
|
||
|
case 'minute':
|
||
|
return '#98E3AF';
|
||
|
case 'hour':
|
||
|
return '#98E3AF';
|
||
|
case 'day':
|
||
|
return '#98E3AF';
|
||
|
case 'week':
|
||
|
return '#ECD875';
|
||
|
case 'month':
|
||
|
return '#F5A69A';
|
||
|
case 'year':
|
||
|
return '#F5A69A';
|
||
|
default:
|
||
|
return '#EDF0F1';
|
||
|
}
|
||
|
}
|
||
|
|
||
|
interface FeatureStatusProps {
|
||
|
lastSeenAt?: Date;
|
||
|
}
|
||
|
|
||
|
const FeatureStatus = ({ lastSeenAt }: FeatureStatusProps) => {
|
||
|
const styles = useStyles();
|
||
|
|
||
|
const Wrapper = (
|
||
|
props: React.PropsWithChildren<{ color: string; toolTip: string }>
|
||
|
) => {
|
||
|
return (
|
||
|
<Tooltip title={props.toolTip} arrow placement="left">
|
||
|
<div
|
||
|
className={styles.container}
|
||
|
style={{ background: props.color, fontSize: '0.8rem' }}
|
||
|
>
|
||
|
{props.children}
|
||
|
</div>
|
||
|
</Tooltip>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
return (
|
||
|
<ConditionallyRender
|
||
|
condition={!!lastSeenAt}
|
||
|
show={
|
||
|
//@ts-ignore
|
||
|
<TimeAgo
|
||
|
date={lastSeenAt}
|
||
|
title=""
|
||
|
live={false}
|
||
|
formatter={(
|
||
|
value: number,
|
||
|
unit: string,
|
||
|
suffix: string
|
||
|
) => {
|
||
|
return (
|
||
|
<Wrapper
|
||
|
toolTip={`Last usage reported ${value} ${unit} ${suffix}`}
|
||
|
color={getColor(unit)}
|
||
|
>
|
||
|
{value}
|
||
|
{generateUnit(unit)}
|
||
|
</Wrapper>
|
||
|
);
|
||
|
}}
|
||
|
/>
|
||
|
}
|
||
|
elseShow={
|
||
|
<Wrapper toolTip="No usage reported" color={getColor()}>
|
||
|
<span style={{ fontSize: '1.4rem' }}>⊕</span>
|
||
|
</Wrapper>
|
||
|
}
|
||
|
/>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default FeatureStatus;
|