Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-09 00:18:00 +01:00
Code Issues Projects Releases Wiki Activity

feat: Last seen for toggles that have an old usage reported (#4538)

Browse Source 
Last seen for toggles that have an old usage reported and no environment

Closes: # [1-1276]
(https://linear.app/unleash/issue/1-1276/last-seen-for-toggles-that-have-an-old-usage-reported-and-that-are)

![Screenshot 2023-08-21 at 14 40
42](https://github.com/Unleash/unleash/assets/104830839/bfa20993-3d52-4c34-959d-f3e34b5c5b47)

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
This commit is contained in:
andreas-unleash 2023-08-21 14:52:32 +03:00 committed by GitHub
parent d19d97cf18
commit 10c21461bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 88 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx
View File

@ -9,7 +9,10 @@ interface IFeatureSeenCellProps {
export const FeatureEnvironmentSeenCell: VFC<IFeatureSeenCellProps> = ({ export const FeatureEnvironmentSeenCell: VFC<IFeatureSeenCellProps> = ({
feature, feature,
}) => { }) => {
const environments = Object.values(feature.environments); const environments = Boolean(feature.environments)
? Object.values(feature.environments)
: [];
return ( return (
<FeatureEnvironmentSeen <FeatureEnvironmentSeen
featureLastSeen={feature.lastSeenAt} featureLastSeen={feature.lastSeenAt}

55
frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenTooltip.tsx
View File

@ -1,4 +1,4 @@
import { styled, SxProps, Theme } from '@mui/material'; import { styled, SxProps, Theme, Typography } from '@mui/material';
import TimeAgo from 'react-timeago'; import TimeAgo from 'react-timeago';
import { IEnvironments, IFeatureEnvironment } from 'interfaces/featureToggle'; import { IEnvironments, IFeatureEnvironment } from 'interfaces/featureToggle';
import React from 'react'; import React from 'react';
@ -56,6 +56,7 @@ const StyledValue = styled('div', {
})); }));
interface ILastSeenTooltipProps { interface ILastSeenTooltipProps {
featureLastSeen: string;
environments?: IEnvironments[] | IFeatureEnvironment[]; environments?: IEnvironments[] | IFeatureEnvironment[];
className?: string; className?: string;
sx?: SxProps<Theme>; sx?: SxProps<Theme>;
@ -63,10 +64,14 @@ interface ILastSeenTooltipProps {
export const LastSeenTooltip = ({ export const LastSeenTooltip = ({
environments, environments,
featureLastSeen,
...rest ...rest
}: ILastSeenTooltipProps) => { }: ILastSeenTooltipProps) => {
const getColor = useLastSeenColors(); const getColor = useLastSeenColors();
const [, defaultTextColor] = getColor(); const [, defaultTextColor] = getColor();
const environmentsHaveLastSeen = environments?.some(environment =>
Boolean(environment.lastSeenAt)
);
return ( return (
<StyledDescription {...rest}> <StyledDescription {...rest}>
<StyledDescriptionHeader sx={{ mb: 0 }}> <StyledDescriptionHeader sx={{ mb: 0 }}>
@ -75,8 +80,13 @@ export const LastSeenTooltip = ({
<StyledDescriptionSubHeader> <StyledDescriptionSubHeader>
Usage is reported from connected applications through metrics Usage is reported from connected applications through metrics
</StyledDescriptionSubHeader> </StyledDescriptionSubHeader>
{environments && <ConditionallyRender
environments.map(({ name, lastSeenAt }) => ( condition={
Boolean(environments) && Boolean(environmentsHaveLastSeen)
}
show={
<>
{environments?.map(({ name, lastSeenAt }) => (
<StyledDescriptionBlock key={name}> <StyledDescriptionBlock key={name}>
<StyledDescriptionBlockHeader> <StyledDescriptionBlockHeader>
{name} {name}
@ -97,9 +107,13 @@ export const LastSeenTooltip = ({
const [, textColor] = const [, textColor] =
getColor(unit); getColor(unit);
return ( return (
<StyledValue color={textColor}> <StyledValue
color={textColor}
>
{`${value} ${unit}${ {`${value} ${unit}${
value !== 1 ? 's' : '' value !== 1
? 's'
: ''
} ${suffix}`} } ${suffix}`}
</StyledValue> </StyledValue>
); );
@ -107,7 +121,9 @@ export const LastSeenTooltip = ({
/> />
} }
elseShow={ elseShow={
<StyledValue color={defaultTextColor}> <StyledValue
color={defaultTextColor}
>
no usage no usage
</StyledValue> </StyledValue>
} }
@ -115,6 +131,33 @@ export const LastSeenTooltip = ({
</StyledValueContainer> </StyledValueContainer>
</StyledDescriptionBlock> </StyledDescriptionBlock>
))} ))}
</>
}
elseShow={
<TimeAgo
date={featureLastSeen}
title=""
live={false}
formatter={(
value: number,
unit: string,
suffix: string
) => {
const [, textColor] = getColor(unit);
return (
<Typography
fontWeight={'bold'}
color={'text.primary'}
>
{`Reported ${value} ${unit}${
value !== 1 ? 's' : ''
} ${suffix}`}
</Typography>
);
}}
/>
}
/>
</StyledDescription> </StyledDescription>
); );
}; };

1
frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx
View File

@ -91,6 +91,7 @@ export const FeatureEnvironmentSeen = ({
sx={sx} sx={sx}
tooltip={ tooltip={
<LastSeenTooltip <LastSeenTooltip
featureLastSeen={featureLastSeen}
environments={environments} environments={environments}
/> />
} }