From 8aace7f93f221dca694cc26a56ca3292f00a0a14 Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> Date: Mon, 4 Sep 2023 13:10:23 +0200 Subject: [PATCH] refactor: instance health cleanup (#4602) ## About the changes Cleanup after hackathon. Discovered project on: https://linear.app/unleash/project/active-users-and-instance-dashboard-67352abadf49 --- frontend/src/component/admin/Admin.tsx | 2 - frontend/src/component/admin/adminRoutes.ts | 7 - .../InstanceStats/InstanceStats.tsx | 43 +--- .../admin/instance-health/InstanceHealth.tsx | 220 ------------------ frontend/src/interfaces/uiConfig.ts | 1 - src/lib/types/experimental.ts | 3 +- src/server-dev.ts | 1 - 7 files changed, 12 insertions(+), 265 deletions(-) delete mode 100644 frontend/src/component/admin/instance-health/InstanceHealth.tsx diff --git a/frontend/src/component/admin/Admin.tsx b/frontend/src/component/admin/Admin.tsx index 0dc7730e4d..50be47aa0b 100644 --- a/frontend/src/component/admin/Admin.tsx +++ b/frontend/src/component/admin/Admin.tsx @@ -18,7 +18,6 @@ import UsersAdmin from './users/UsersAdmin'; import NotFound from 'component/common/NotFound/NotFound'; import { AdminIndex } from './AdminIndex'; import { AdminTabsMenu } from './menu/AdminTabsMenu'; -import { InstanceHealth } from './instance-health/InstanceHealth'; export const Admin = () => { return ( @@ -35,7 +34,6 @@ export const Admin = () => { } /> } /> } /> - } /> } /> } /> } /> diff --git a/frontend/src/component/admin/adminRoutes.ts b/frontend/src/component/admin/adminRoutes.ts index d7b6f080f7..6cb2cbabb7 100644 --- a/frontend/src/component/admin/adminRoutes.ts +++ b/frontend/src/component/admin/adminRoutes.ts @@ -80,13 +80,6 @@ export const adminRoutes: INavigationMenuItem[] = [ menu: { adminSettings: true }, group: 'instance', }, - { - path: '/admin/instance-health', - title: 'Instance health', - menu: { adminSettings: true }, - group: 'instance', - flag: 'instanceHealthDashboard', - }, { path: '/admin/instance-privacy', title: 'Instance privacy', diff --git a/frontend/src/component/admin/instance-admin/InstanceStats/InstanceStats.tsx b/frontend/src/component/admin/instance-admin/InstanceStats/InstanceStats.tsx index 029aba1282..3584c1f30a 100644 --- a/frontend/src/component/admin/instance-admin/InstanceStats/InstanceStats.tsx +++ b/frontend/src/component/admin/instance-admin/InstanceStats/InstanceStats.tsx @@ -30,24 +30,9 @@ export const InstanceStats: VFC = () => { } const rows = [ - { title: 'Instance Id', value: stats?.instanceId }, + { title: 'Instance Id', value: stats?.instanceId, offset: false }, { title: versionTitle, value: version }, { title: 'Users', value: stats?.users }, - { - title: 'Active past 7 days', - value: stats?.activeUsers?.last7, - offset: true, - }, - { - title: 'Active past 30 days', - value: stats?.activeUsers?.last30, - offset: true, - }, - { - title: 'Active past 90 days', - value: stats?.activeUsers?.last90, - offset: true, - }, { title: 'Feature toggles', value: stats?.featureToggles }, { title: 'Projects', value: stats?.projects }, { title: 'Environments', value: stats?.environments }, @@ -80,22 +65,16 @@ export const InstanceStats: VFC = () => { {rows.map(row => ( - ({ - marginLeft: row.offset - ? theme.spacing(2) - : 0, - })} - > - {row.title} - - } - elseShow={row.title} - /> + ({ + marginLeft: row.offset + ? theme.spacing(2) + : 0, + })} + > + {row.title} + {row.value} diff --git a/frontend/src/component/admin/instance-health/InstanceHealth.tsx b/frontend/src/component/admin/instance-health/InstanceHealth.tsx deleted file mode 100644 index 4470f8e6f8..0000000000 --- a/frontend/src/component/admin/instance-health/InstanceHealth.tsx +++ /dev/null @@ -1,220 +0,0 @@ -import { VFC, useMemo } from 'react'; -import { useSortBy, useTable } from 'react-table'; -import { styled, Typography, Box } from '@mui/material'; -import { PageContent } from 'component/common/PageContent/PageContent'; -import { PageHeader } from 'component/common/PageHeader/PageHeader'; -import { useInstanceStats } from 'hooks/api/getters/useInstanceStats/useInstanceStats'; -import useProjects from 'hooks/api/getters/useProjects/useProjects'; -import { sortTypes } from 'utils/sortTypes'; -import { - SortableTableHeader, - Table, - TableBody, - TableRow, - TableCell, -} from 'component/common/Table'; -import { TextCell } from 'component/common/Table/cells/TextCell/TextCell'; -import { HelpPopper } from 'component/project/Project/ProjectStats/HelpPopper'; -import { StatusBox } from 'component/project/Project/ProjectStats/StatusBox'; -import { DateCell } from 'component/common/Table/cells/DateCell/DateCell'; - -interface IInstanceHealthProps {} - -const CardsGrid = styled('div')(({ theme }) => ({ - display: 'grid', - gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', - gap: theme.spacing(2), - paddingBottom: theme.spacing(2), -})); - -const Card = styled('div')(({ theme }) => ({ - padding: theme.spacing(2.5), - borderRadius: `${theme.shape.borderRadiusLarge}px`, - backgroundColor: `${theme.palette.background.paper}`, - border: `1px solid ${theme.palette.divider}`, - // boxShadow: theme.boxShadows.card, - display: 'flex', - flexDirection: 'column', -})); - -/** - * @deprecated unify with project widget - */ -const StyledWidget = styled(Box)(({ theme }) => ({ - position: 'relative', - padding: theme.spacing(3), - backgroundColor: theme.palette.background.paper, - flex: 1, - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - borderRadius: `${theme.shape.borderRadiusLarge}px`, - [theme.breakpoints.down('lg')]: { - padding: theme.spacing(2), - }, -})); - -export const InstanceHealth: VFC = () => { - const { stats } = useInstanceStats(); - const { projects } = useProjects(); - // FIXME: loading state - - const initialState = useMemo( - () => ({ - hiddenColumns: [], - sortBy: [{ id: 'createdAt' }], - }), - [] - ); - - const data = useMemo(() => projects, [projects]); - - const dormantUsersPercentage = - (1 - stats?.activeUsers?.last90! / stats?.users!) * 100; - - const dormantUsersColor = - dormantUsersPercentage < 30 - ? 'success.main' - : dormantUsersPercentage < 50 - ? 'warning.main' - : 'error.main'; - - const COLUMNS = useMemo( - () => [ - { - accessor: 'name', - Header: 'Project name', - Cell: TextCell, - width: '80%', - }, - { - Header: 'Feature toggles', - accessor: 'featureCount', - Cell: TextCell, - }, - { - Header: 'Created at', - accessor: 'createdAt', - Cell: DateCell, - }, - { - Header: 'Members', - accessor: 'memberCount', - Cell: TextCell, - }, - { - Header: 'Health', - accessor: 'health', - Cell: ({ value }: { value: number }) => { - const healthRatingColor = - value < 50 - ? 'error.main' - : value < 75 - ? 'warning.main' - : 'success.main'; - return ( - - - {value}% - - - ); - }, - }, - ], - [] - ); - - const { headerGroups, rows, prepareRow, getTableProps, getTableBodyProps } = - useTable( - { - columns: COLUMNS as any, - data: data as any, - initialState, - sortTypes, - autoResetGlobalFilter: false, - autoResetHiddenColumns: false, - autoResetSortBy: false, - disableSortRemove: true, - }, - useSortBy - ); - - return ( - <> - - - } - > - {/* - Sum of all configuration and state modifications in - the project. - */} - {/* FIXME: tooltip */} - - - - - ({dormantUsersPercentage.toFixed(1)}%) - - } - > - {/* - Sum of all configuration and state modifications in - the project. - */} - - - - } - > - - - } - > - - - }> - - - - {rows.map(row => { - prepareRow(row); - return ( - - {row.cells.map(cell => ( - - {cell.render('Cell')} - - ))} - - ); - })} - -
- - - ); -}; diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts index 7538d8fbdc..1ed61760d6 100644 --- a/frontend/src/interfaces/uiConfig.ts +++ b/frontend/src/interfaces/uiConfig.ts @@ -57,7 +57,6 @@ export interface IFlags { integrationsRework?: boolean; multipleRoles?: boolean; doraMetrics?: boolean; - instanceHealthDashboard?: boolean; [key: string]: boolean | Variant | undefined; } diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts index 5324a958cc..830780b5ae 100644 --- a/src/lib/types/experimental.ts +++ b/src/lib/types/experimental.ts @@ -28,8 +28,7 @@ export type IFlagKey = | 'newApplicationList' | 'integrationsRework' | 'multipleRoles' - | 'doraMetrics' - | 'instanceHealthDashboard'; + | 'doraMetrics'; export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>; diff --git a/src/server-dev.ts b/src/server-dev.ts index 844251eb38..237baa38cc 100644 --- a/src/server-dev.ts +++ b/src/server-dev.ts @@ -42,7 +42,6 @@ process.nextTick(async () => { lastSeenByEnvironment: true, newApplicationList: true, doraMetrics: true, - instanceHealthDashboard: true, }, }, authentication: {