From 4857f7f4bce88265598db4f3088020f3d016c63b Mon Sep 17 00:00:00 2001 From: andreas-unleash Date: Mon, 21 Aug 2023 15:12:50 +0300 Subject: [PATCH 1/2] feat: Last seen per environment health (#4539) 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 --- .../ProjectHealth/ReportTable/ReportTable.tsx | 136 ++++++++++-------- 1 file changed, 77 insertions(+), 59 deletions(-) diff --git a/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx b/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx index 75df6cb1dd..abddbd1e50 100644 --- a/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx +++ b/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx @@ -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( () => @@ -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 ? ( + + ) : ( + + ); + }, + 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) => { ); }; - -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, - }, -]; From 625006418377afc3368c53449b51f440bf3e8a81 Mon Sep 17 00:00:00 2001 From: andreas-unleash Date: Mon, 21 Aug 2023 15:37:44 +0300 Subject: [PATCH 2/2] feat: Last seen per environment archive (#4540) Closes # [1-1280](https://linear.app/unleash/issue/1-1280/update-the-archive-toggle-page-with-the-new-design) ![Screenshot 2023-08-21 at 14 53 10](https://github.com/Unleash/unleash/assets/104830839/f7c9fcc2-ef60-4415-bf9a-605fdebd92ed) --------- Signed-off-by: andreas-unleash --- .../archive/ArchiveTable/ArchiveTable.tsx | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx b/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx index c08c9a02f9..3390682dbe 100644 --- a/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx +++ b/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx @@ -19,7 +19,6 @@ import { Search } from 'component/common/Search/Search'; import { FeatureTypeCell } from 'component/common/Table/cells/FeatureTypeCell/FeatureTypeCell'; import { FeatureSeenCell } from 'component/common/Table/cells/FeatureSeenCell/FeatureSeenCell'; import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell'; -import { FeatureStaleCell } from 'component/feature/FeatureToggleList/FeatureStaleCell/FeatureStaleCell'; import { ArchivedFeatureActionCell } from 'component/archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureActionCell'; import { featuresPlaceholder } from 'component/feature/FeatureToggleList/FeatureToggleListTable'; import theme from 'themes/theme'; @@ -36,6 +35,8 @@ import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColum import { RowSelectCell } from '../../project/Project/ProjectFeatureToggles/RowSelectCell/RowSelectCell'; import { BatchSelectionActionsBar } from '../../common/BatchSelectionActionsBar/BatchSelectionActionsBar'; import { ArchiveBatchActions } from './ArchiveBatchActions'; +import { FeatureEnvironmentSeenCell } from 'component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell'; +import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; export interface IFeaturesArchiveTableProps { archivedFeatures: FeatureSchema[]; @@ -74,6 +75,11 @@ export const ArchiveTable = ({ searchParams.get('search') || '' ); + const { uiConfig } = useUiConfig(); + const showEnvironmentLastSeen = Boolean( + uiConfig.flags.lastSeenByEnvironment + ); + const onRevive = useCallback( async (feature: string) => { try { @@ -113,11 +119,16 @@ export const ArchiveTable = ({ : []), { Header: 'Seen', - width: 85, - canSort: true, - Cell: FeatureSeenCell, accessor: 'lastSeenAt', + Cell: ({ value, row: { original: feature } }: any) => { + return showEnvironmentLastSeen ? ( + + ) : ( + + ); + }, align: 'center', + maxWidth: 80, }, { Header: 'Type', @@ -197,7 +208,7 @@ export const ArchiveTable = ({ }, ], //eslint-disable-next-line - [projectId] + [projectId, showEnvironmentLastSeen] ); const {