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

fix: ReportTable status column not updating (#4924)

Browse Source 
Fixes a bug where the status and expiredAt columns where not updating
dynamically

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
This commit is contained in:
andreas-unleash 2023-10-04 15:27:11 +03:00 committed by GitHub
parent bc650ffe3f
commit 784d38c230
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 59 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportExpiredCell/formatExpiredAt.ts
View File

@ -11,7 +11,7 @@ export const formatExpiredAt = (
const { type, createdAt } = feature; const { type, createdAt } = feature;
const featureType = featureTypes.find( const featureType = featureTypes.find(
(featureType) => featureType.name === type, (featureType) => featureType.id === type,
); );
if ( if (

2
frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportStatusCell/formatStatus.ts
View File

@ -13,7 +13,7 @@ export const formatStatus = (
const { type, createdAt } = feature; const { type, createdAt } = feature;
const featureType = featureTypes.find( const featureType = featureTypes.find(
(featureType) => featureType.name === type, (featureType) => featureType.id === type,
); );
const date = parseISO(createdAt); const date = parseISO(createdAt);
const now = new Date(); const now = new Date();

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

@ -1,35 +1,35 @@
import { useMemo } from 'react'; import { useMemo } from "react";
import { import {
IEnvironments, IEnvironments,
IFeatureToggleListItem, IFeatureToggleListItem,
} from 'interfaces/featureToggle'; } from "interfaces/featureToggle";
import { TablePlaceholder, VirtualizedTable } from 'component/common/Table'; import { TablePlaceholder, VirtualizedTable } from "component/common/Table";
import { PageContent } from 'component/common/PageContent/PageContent'; import { PageContent } from "component/common/PageContent/PageContent";
import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext'; import { SearchHighlightProvider } from "component/common/Table/SearchHighlightContext/SearchHighlightContext";
import { PageHeader } from 'component/common/PageHeader/PageHeader'; import { PageHeader } from "component/common/PageHeader/PageHeader";
import { sortTypes } from 'utils/sortTypes'; import { sortTypes } from "utils/sortTypes";
import { import {
useFlexLayout, useFlexLayout,
useGlobalFilter, useGlobalFilter,
useSortBy, useSortBy,
useTable, useTable,
} from 'react-table'; } from "react-table";
import { useMediaQuery, useTheme } from '@mui/material'; import { useMediaQuery, useTheme } from "@mui/material";
import { FeatureSeenCell } from 'component/common/Table/cells/FeatureSeenCell/FeatureSeenCell'; import { FeatureSeenCell } from "component/common/Table/cells/FeatureSeenCell/FeatureSeenCell";
import { FeatureTypeCell } from 'component/common/Table/cells/FeatureTypeCell/FeatureTypeCell'; import { FeatureTypeCell } from "component/common/Table/cells/FeatureTypeCell/FeatureTypeCell";
import { FeatureNameCell } from 'component/common/Table/cells/FeatureNameCell/FeatureNameCell'; import { FeatureNameCell } from "component/common/Table/cells/FeatureNameCell/FeatureNameCell";
import { DateCell } from 'component/common/Table/cells/DateCell/DateCell'; import { DateCell } from "component/common/Table/cells/DateCell/DateCell";
import { FeatureStaleCell } from 'component/feature/FeatureToggleList/FeatureStaleCell/FeatureStaleCell'; import { FeatureStaleCell } from "component/feature/FeatureToggleList/FeatureStaleCell/FeatureStaleCell";
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from "component/common/ConditionallyRender/ConditionallyRender";
import { Search } from 'component/common/Search/Search'; import { Search } from "component/common/Search/Search";
import { ReportExpiredCell } from './ReportExpiredCell/ReportExpiredCell'; import { ReportExpiredCell } from "./ReportExpiredCell/ReportExpiredCell";
import { ReportStatusCell } from './ReportStatusCell/ReportStatusCell'; import { ReportStatusCell } from "./ReportStatusCell/ReportStatusCell";
import { formatStatus, ReportingStatus } from './ReportStatusCell/formatStatus'; import { formatStatus, ReportingStatus } from "./ReportStatusCell/formatStatus";
import { formatExpiredAt } from './ReportExpiredCell/formatExpiredAt'; import { formatExpiredAt } from "./ReportExpiredCell/formatExpiredAt";
import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns'; import { useConditionallyHiddenColumns } from "hooks/useConditionallyHiddenColumns";
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import useUiConfig from "hooks/api/getters/useUiConfig/useUiConfig";
import { FeatureEnvironmentSeenCell } from 'component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell'; import { FeatureEnvironmentSeenCell } from "component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell";
import useFeatureTypes from 'hooks/api/getters/useFeatureTypes/useFeatureTypes'; import useFeatureTypes from "hooks/api/getters/useFeatureTypes/useFeatureTypes";
interface IReportTableProps { interface IReportTableProps {
projectId: string; projectId: string;
@ -50,12 +50,12 @@ export interface IReportTableRow {
export const ReportTable = ({ projectId, features }: IReportTableProps) => { export const ReportTable = ({ projectId, features }: IReportTableProps) => {
const theme = useTheme(); const theme = useTheme();
const isExtraSmallScreen = useMediaQuery(theme.breakpoints.down('sm')); const isExtraSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
const isSmallScreen = useMediaQuery(theme.breakpoints.down('md')); const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
const isMediumScreen = useMediaQuery(theme.breakpoints.down('lg')); const isMediumScreen = useMediaQuery(theme.breakpoints.down("lg"));
const { uiConfig } = useUiConfig(); const { uiConfig } = useUiConfig();
const showEnvironmentLastSeen = Boolean( const showEnvironmentLastSeen = Boolean(
uiConfig.flags.lastSeenByEnvironment, uiConfig.flags.lastSeenByEnvironment
); );
const { featureTypes } = useFeatureTypes(); const { featureTypes } = useFeatureTypes();
@ -72,22 +72,22 @@ export const ReportTable = ({ projectId, features }: IReportTableProps) => {
createdAt: report.createdAt, createdAt: report.createdAt,
expiredAt: formatExpiredAt(report, featureTypes), expiredAt: formatExpiredAt(report, featureTypes),
})), })),
[projectId, features], [projectId, features, featureTypes]
); );
const initialState = useMemo( const initialState = useMemo(
() => ({ () => ({
hiddenColumns: [], hiddenColumns: [],
sortBy: [{ id: 'createdAt' }], sortBy: [{ id: "createdAt" }],
}), }),
[], []
); );
const COLUMNS = useMemo( const COLUMNS = useMemo(
() => [ () => [
{ {
Header: 'Seen', Header: "Seen",
accessor: 'lastSeenAt', accessor: "lastSeenAt",
Cell: ({ value, row: { original: feature } }: any) => { Cell: ({ value, row: { original: feature } }: any) => {
return showEnvironmentLastSeen ? ( return showEnvironmentLastSeen ? (
<FeatureEnvironmentSeenCell feature={feature} /> <FeatureEnvironmentSeenCell feature={feature} />
@ -95,57 +95,57 @@ export const ReportTable = ({ projectId, features }: IReportTableProps) => {
<FeatureSeenCell value={value} /> <FeatureSeenCell value={value} />
); );
}, },
align: 'center', align: "center",
maxWidth: 80, maxWidth: 80,
}, },
{ {
Header: 'Type', Header: "Type",
accessor: 'type', accessor: "type",
align: 'center', align: "center",
Cell: FeatureTypeCell, Cell: FeatureTypeCell,
disableGlobalFilter: true, disableGlobalFilter: true,
maxWidth: 85, maxWidth: 85,
}, },
{ {
Header: 'Name', Header: "Name",
accessor: 'name', accessor: "name",
sortType: 'alphanumeric', sortType: "alphanumeric",
Cell: FeatureNameCell, Cell: FeatureNameCell,
minWidth: 120, minWidth: 120,
}, },
{ {
Header: 'Created', Header: "Created",
accessor: 'createdAt', accessor: "createdAt",
sortType: 'date', sortType: "date",
Cell: DateCell, Cell: DateCell,
disableGlobalFilter: true, disableGlobalFilter: true,
maxWidth: 150, maxWidth: 150,
}, },
{ {
Header: 'Expired', Header: "Expired",
accessor: 'expiredAt', accessor: "expiredAt",
Cell: ReportExpiredCell, Cell: ReportExpiredCell,
disableGlobalFilter: true, disableGlobalFilter: true,
maxWidth: 150, maxWidth: 150,
}, },
{ {
Header: 'Status', Header: "Status",
id: 'status', id: "status",
accessor: 'status', accessor: "status",
Cell: ReportStatusCell, Cell: ReportStatusCell,
disableGlobalFilter: true, disableGlobalFilter: true,
width: 180, width: 180,
}, },
{ {
Header: 'State', Header: "State",
accessor: 'stale', accessor: "stale",
sortType: 'boolean', sortType: "boolean",
Cell: FeatureStaleCell, Cell: FeatureStaleCell,
disableGlobalFilter: true, disableGlobalFilter: true,
maxWidth: 120, maxWidth: 120,
}, },
], ],
[showEnvironmentLastSeen], [showEnvironmentLastSeen]
); );
const { const {
@ -168,26 +168,26 @@ export const ReportTable = ({ projectId, features }: IReportTableProps) => {
}, },
useGlobalFilter, useGlobalFilter,
useFlexLayout, useFlexLayout,
useSortBy, useSortBy
); );
useConditionallyHiddenColumns( useConditionallyHiddenColumns(
[ [
{ {
condition: isExtraSmallScreen, condition: isExtraSmallScreen,
columns: ['stale'], columns: ["stale"],
}, },
{ {
condition: isSmallScreen, condition: isSmallScreen,
columns: ['expiredAt', 'lastSeenAt'], columns: ["expiredAt", "lastSeenAt"],
}, },
{ {
condition: isMediumScreen, condition: isMediumScreen,
columns: ['createdAt'], columns: ["createdAt"],
}, },
], ],
setHiddenColumns, setHiddenColumns,
COLUMNS, COLUMNS
); );
const title = const title =