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

feat: Last seen per environment health (#4539)

Browse Source 
Closes # [1-1277]
(https://linear.app/unleash/issue/1-1277/update-health-page-with-the-new-designlogic-for-last-seen)

![Screenshot 2023-08-21 at 14 50
20](https://github.com/Unleash/unleash/assets/104830839/bbe7a80b-1dcd-4dd0-9446-42486963b4f1)

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
This commit is contained in:
andreas-unleash 2023-08-21 15:12:50 +03:00 committed by GitHub
parent 10c21461bd
commit 4857f7f4bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 77 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx
View File

@ -1,5 +1,8 @@
import { useMemo } from 'react';
import { IFeatureToggleListItem } from 'interfaces/featureToggle';
import {
IEnvironments,
IFeatureToggleListItem,
} from 'interfaces/featureToggle';
import { TablePlaceholder, VirtualizedTable } from 'component/common/Table';
import { PageContent } from 'component/common/PageContent/PageContent';
import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
@ -24,6 +27,8 @@ import { ReportStatusCell } from './ReportStatusCell/ReportStatusCell';
import { formatStatus, ReportingStatus } from './ReportStatusCell/formatStatus';
import { formatExpiredAt } from './ReportExpiredCell/formatExpiredAt';
import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { FeatureEnvironmentSeenCell } from 'component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell';
interface IReportTableProps {
projectId: string;
@ -37,6 +42,7 @@ export interface IReportTableRow {
stale?: boolean;
status: ReportingStatus;
lastSeenAt?: string;
environments?: IEnvironments[];
createdAt: string;
expiredAt?: string;
}
@ -46,6 +52,10 @@ export const ReportTable = ({ projectId, features }: IReportTableProps) => {
const isExtraSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
const isMediumScreen = useMediaQuery(theme.breakpoints.down('lg'));
const { uiConfig } = useUiConfig();
const showEnvironmentLastSeen = Boolean(
uiConfig.flags.lastSeenByEnvironment
);
const data: IReportTableRow[] = useMemo<IReportTableRow[]>(
() =>
@ -54,6 +64,7 @@ export const ReportTable = ({ projectId, features }: IReportTableProps) => {
name: report.name,
type: report.type,
stale: report.stale,
environments: report.environments,
status: formatStatus(report),
lastSeenAt: report.lastSeenAt,
createdAt: report.createdAt,
@ -70,6 +81,71 @@ export const ReportTable = ({ projectId, features }: IReportTableProps) => {
[]
);
const COLUMNS = useMemo(
() => [
{
Header: 'Seen',
accessor: 'lastSeenAt',
Cell: ({ value, row: { original: feature } }: any) => {
return showEnvironmentLastSeen ? (
<FeatureEnvironmentSeenCell feature={feature} />
) : (
<FeatureSeenCell value={value} />
);
},
align: 'center',
maxWidth: 80,
},
{
Header: 'Type',
accessor: 'type',
align: 'center',
Cell: FeatureTypeCell,
disableGlobalFilter: true,
maxWidth: 85,
},
{
Header: 'Name',
accessor: 'name',
sortType: 'alphanumeric',
Cell: FeatureNameCell,
minWidth: 120,
},
{
Header: 'Created',
accessor: 'createdAt',
sortType: 'date',
Cell: DateCell,
disableGlobalFilter: true,
maxWidth: 150,
},
{
Header: 'Expired',
accessor: 'expiredAt',
Cell: ReportExpiredCell,
disableGlobalFilter: true,
maxWidth: 150,
},
{
Header: 'Status',
id: 'status',
accessor: 'status',
Cell: ReportStatusCell,
disableGlobalFilter: true,
width: 180,
},
{
Header: 'State',
accessor: 'stale',
sortType: 'boolean',
Cell: FeatureStaleCell,
disableGlobalFilter: true,
maxWidth: 120,
},
],
[showEnvironmentLastSeen]
);
const {
headerGroups,
rows,
@ -162,61 +238,3 @@ export const ReportTable = ({ projectId, features }: IReportTableProps) => {
</PageContent>
);
};
const COLUMNS = [
{
Header: 'Seen',
accessor: 'lastSeenAt',
sortType: 'date',
align: 'center',
Cell: FeatureSeenCell,
disableGlobalFilter: true,
maxWidth: 85,
},
{
Header: 'Type',
accessor: 'type',
align: 'center',
Cell: FeatureTypeCell,
disableGlobalFilter: true,
maxWidth: 85,
},
{
Header: 'Name',
accessor: 'name',
sortType: 'alphanumeric',
Cell: FeatureNameCell,
minWidth: 120,
},
{
Header: 'Created',
accessor: 'createdAt',
sortType: 'date',
Cell: DateCell,
disableGlobalFilter: true,
maxWidth: 150,
},
{
Header: 'Expired',
accessor: 'expiredAt',
Cell: ReportExpiredCell,
disableGlobalFilter: true,
maxWidth: 150,
},
{
Header: 'Status',
id: 'status',
accessor: 'status',
Cell: ReportStatusCell,
disableGlobalFilter: true,
width: 180,
},
{
Header: 'State',
accessor: 'stale',
sortType: 'boolean',
Cell: FeatureStaleCell,
disableGlobalFilter: true,
maxWidth: 120,
},
];