mirror of
https://github.com/Unleash/unleash.git
synced 2025-02-23 00:22:19 +01:00
Chore/rename dashboard files to insights (#6662)
Renames everything related to `executive dashboard` to `insights` Closes: # [1-2213](https://linear.app/unleash/issue/1-2213/rename-in-fe) --------- Signed-off-by: andreas-unleash <andreas@getunleash.ai>
This commit is contained in:
parent
8532e08398
commit
9be15d4976
@ -6,10 +6,10 @@ import {
|
||||
allOption,
|
||||
ProjectSelect,
|
||||
} from 'component/common/ProjectSelect/ProjectSelect';
|
||||
import { useExecutiveDashboard } from 'hooks/api/getters/useExecutiveSummary/useExecutiveSummary';
|
||||
import { DashboardHeader } from './components/DashboardHeader/DashboardHeader';
|
||||
import { useDashboardData } from './hooks/useDashboardData';
|
||||
import { Charts } from './Charts';
|
||||
import { useInsights } from 'hooks/api/getters/useInsights/useInsights';
|
||||
import { InsightsHeader } from './components/InsightsHeader/InsightsHeader';
|
||||
import { useInsightsData } from './hooks/useInsightsData';
|
||||
import { InsightsCharts } from './InsightsCharts';
|
||||
|
||||
const StickyWrapper = styled(Box, {
|
||||
shouldForwardProp: (prop) => prop !== 'scrolled',
|
||||
@ -22,9 +22,9 @@ const StickyWrapper = styled(Box, {
|
||||
transition: 'padding 0.3s ease',
|
||||
}));
|
||||
|
||||
export const ExecutiveDashboard: VFC = () => {
|
||||
export const Insights: VFC = () => {
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
const { executiveDashboardData, loading, error } = useExecutiveDashboard();
|
||||
const { insights, loading, error } = useInsights();
|
||||
const stateConfig = {
|
||||
projects: withDefault(ArrayParam, [allOption.id]),
|
||||
};
|
||||
@ -36,7 +36,7 @@ export const ExecutiveDashboard: VFC = () => {
|
||||
? (state.projects.filter(Boolean) as string[])
|
||||
: [];
|
||||
|
||||
const dashboardData = useDashboardData(executiveDashboardData, projects);
|
||||
const insightsData = useInsightsData(insights, projects);
|
||||
|
||||
const handleScroll = () => {
|
||||
if (!scrolled && window.scrollY > 0) {
|
||||
@ -53,7 +53,7 @@ export const ExecutiveDashboard: VFC = () => {
|
||||
return (
|
||||
<>
|
||||
<StickyWrapper scrolled={scrolled}>
|
||||
<DashboardHeader
|
||||
<InsightsHeader
|
||||
actions={
|
||||
<ProjectSelect
|
||||
selectedProjects={projects}
|
||||
@ -64,7 +64,11 @@ export const ExecutiveDashboard: VFC = () => {
|
||||
}
|
||||
/>
|
||||
</StickyWrapper>
|
||||
<Charts loading={loading} projects={projects} {...dashboardData} />
|
||||
<InsightsCharts
|
||||
loading={loading}
|
||||
projects={projects}
|
||||
{...insightsData}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
@ -12,7 +12,7 @@ import { TimeToProduction } from './componentsStat/TimeToProduction/TimeToProduc
|
||||
import { TimeToProductionChart } from './componentsChart/TimeToProductionChart/TimeToProductionChart';
|
||||
import { MetricsSummaryChart } from './componentsChart/MetricsSummaryChart/MetricsSummaryChart';
|
||||
import { UpdatesPerEnvironmentTypeChart } from './componentsChart/UpdatesPerEnvironmentTypeChart/UpdatesPerEnvironmentTypeChart';
|
||||
import type { ExecutiveSummarySchema } from '../../openapi';
|
||||
import type { InstanceInsightsSchema } from 'openapi';
|
||||
import type { GroupedDataByProject } from './hooks/useGroupedProjectTrends';
|
||||
import { Box, styled } from '@mui/material';
|
||||
import { allOption } from '../common/ProjectSelect/ProjectSelect';
|
||||
@ -20,18 +20,18 @@ import type { VFC } from 'react';
|
||||
import { chartInfo } from './chart-info';
|
||||
|
||||
interface IChartsProps {
|
||||
flagTrends: ExecutiveSummarySchema['flagTrends'];
|
||||
projectsData: ExecutiveSummarySchema['projectFlagTrends'];
|
||||
flagTrends: InstanceInsightsSchema['flagTrends'];
|
||||
projectsData: InstanceInsightsSchema['projectFlagTrends'];
|
||||
groupedProjectsData: GroupedDataByProject<
|
||||
ExecutiveSummarySchema['projectFlagTrends']
|
||||
InstanceInsightsSchema['projectFlagTrends']
|
||||
>;
|
||||
metricsData: ExecutiveSummarySchema['metricsSummaryTrends'];
|
||||
metricsData: InstanceInsightsSchema['metricsSummaryTrends'];
|
||||
groupedMetricsData: GroupedDataByProject<
|
||||
ExecutiveSummarySchema['metricsSummaryTrends']
|
||||
InstanceInsightsSchema['metricsSummaryTrends']
|
||||
>;
|
||||
users: ExecutiveSummarySchema['users'];
|
||||
userTrends: ExecutiveSummarySchema['userTrends'];
|
||||
environmentTypeTrends: ExecutiveSummarySchema['environmentTypeTrends'];
|
||||
users: InstanceInsightsSchema['users'];
|
||||
userTrends: InstanceInsightsSchema['userTrends'];
|
||||
environmentTypeTrends: InstanceInsightsSchema['environmentTypeTrends'];
|
||||
summary: {
|
||||
total: number;
|
||||
active: number;
|
||||
@ -64,7 +64,7 @@ const ChartWidget = styled(Widget)(({ theme }) => ({
|
||||
},
|
||||
}));
|
||||
|
||||
export const Charts: VFC<IChartsProps> = ({
|
||||
export const InsightsCharts: VFC<IChartsProps> = ({
|
||||
projects,
|
||||
users,
|
||||
summary,
|
@ -49,7 +49,7 @@ const StyledActionsSmallScreen = styled('div')(({ theme }) => ({
|
||||
marginTop: theme.spacing(2),
|
||||
}));
|
||||
|
||||
export const DashboardHeader: VFC<DashboardHeaderProps> = ({ actions }) => {
|
||||
export const InsightsHeader: VFC<DashboardHeaderProps> = ({ actions }) => {
|
||||
const showInactiveUsers = useUiFlag('showInactiveUsers');
|
||||
const theme = useTheme();
|
||||
const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
|
@ -1,12 +1,15 @@
|
||||
import { useMemo, type VFC } from 'react';
|
||||
import 'chartjs-adapter-date-fns';
|
||||
import { useTheme } from '@mui/material';
|
||||
import type { ExecutiveSummarySchema } from 'openapi';
|
||||
import { LineChart, NotEnoughData } from '../../components/LineChart/LineChart';
|
||||
import { usePlaceholderData } from 'component/executiveDashboard/hooks/usePlaceholderData';
|
||||
import type { InstanceInsightsSchema } from 'openapi';
|
||||
import {
|
||||
LineChart,
|
||||
NotEnoughData,
|
||||
} from 'component/insights/components/LineChart/LineChart';
|
||||
import { usePlaceholderData } from 'component/insights/hooks/usePlaceholderData';
|
||||
|
||||
interface IFlagsChartProps {
|
||||
flagTrends: ExecutiveSummarySchema['flagTrends'];
|
||||
flagTrends: InstanceInsightsSchema['flagTrends'];
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
@ -1,14 +1,17 @@
|
||||
import { useMemo, type VFC } from 'react';
|
||||
import 'chartjs-adapter-date-fns';
|
||||
import type { ExecutiveSummarySchema } from 'openapi';
|
||||
import { LineChart, NotEnoughData } from '../../components/LineChart/LineChart';
|
||||
import { useProjectChartData } from 'component/executiveDashboard/hooks/useProjectChartData';
|
||||
import { usePlaceholderData } from 'component/executiveDashboard/hooks/usePlaceholderData';
|
||||
import type { GroupedDataByProject } from '../../hooks/useGroupedProjectTrends';
|
||||
import type { InstanceInsightsSchema } from 'openapi';
|
||||
import {
|
||||
LineChart,
|
||||
NotEnoughData,
|
||||
} from 'component/insights/components/LineChart/LineChart';
|
||||
import { useProjectChartData } from 'component/insights/hooks/useProjectChartData';
|
||||
import { usePlaceholderData } from 'component/insights/hooks/usePlaceholderData';
|
||||
import type { GroupedDataByProject } from 'component/insights/hooks/useGroupedProjectTrends';
|
||||
|
||||
interface IFlagsProjectChartProps {
|
||||
projectFlagTrends: GroupedDataByProject<
|
||||
ExecutiveSummarySchema['projectFlagTrends']
|
||||
InstanceInsightsSchema['projectFlagTrends']
|
||||
>;
|
||||
}
|
||||
|
@ -1,7 +1,7 @@
|
||||
import type { VFC } from 'react';
|
||||
import type { ExecutiveSummarySchemaMetricsSummaryTrendsItem } from 'openapi';
|
||||
import type { InstanceInsightsSchemaMetricsSummaryTrendsItem } from 'openapi';
|
||||
import { Box, Divider, Paper, styled, Typography } from '@mui/material';
|
||||
import type { TooltipState } from '../../../components/LineChart/ChartTooltip/ChartTooltip';
|
||||
import type { TooltipState } from 'component/insights/components/LineChart/ChartTooltip/ChartTooltip';
|
||||
|
||||
const StyledTooltipItemContainer = styled(Paper)(({ theme }) => ({
|
||||
padding: theme.spacing(2),
|
||||
@ -66,7 +66,7 @@ export const MetricsSummaryTooltip: VFC<{ tooltip: TooltipState | null }> = ({
|
||||
label: point.label,
|
||||
title: point.dataset.label,
|
||||
color: point.dataset.borderColor,
|
||||
value: point.raw as ExecutiveSummarySchemaMetricsSummaryTrendsItem & {
|
||||
value: point.raw as InstanceInsightsSchemaMetricsSummaryTrendsItem & {
|
||||
total: number;
|
||||
},
|
||||
};
|
@ -1,7 +1,7 @@
|
||||
import type { ExecutiveSummarySchema } from 'openapi';
|
||||
import type { InstanceInsightsSchema } from 'openapi';
|
||||
|
||||
export function aggregateDataPerDate(
|
||||
items: ExecutiveSummarySchema['metricsSummaryTrends'],
|
||||
items: InstanceInsightsSchema['metricsSummaryTrends'],
|
||||
) {
|
||||
return items.reduce(
|
||||
(acc, item) => {
|
@ -1,22 +1,22 @@
|
||||
import { useMemo, type VFC } from 'react';
|
||||
import 'chartjs-adapter-date-fns';
|
||||
|
||||
import type { ExecutiveSummarySchema } from 'openapi';
|
||||
import type { InstanceInsightsSchema } from 'openapi';
|
||||
import {
|
||||
fillGradientPrimary,
|
||||
LineChart,
|
||||
NotEnoughData,
|
||||
} from '../../components/LineChart/LineChart';
|
||||
} from 'component/insights/components/LineChart/LineChart';
|
||||
import { MetricsSummaryTooltip } from './MetricsChartTooltip/MetricsChartTooltip';
|
||||
import { useMetricsSummary } from '../../hooks/useMetricsSummary';
|
||||
import { usePlaceholderData } from 'component/executiveDashboard/hooks/usePlaceholderData';
|
||||
import type { GroupedDataByProject } from '../../hooks/useGroupedProjectTrends';
|
||||
import { useMetricsSummary } from 'component/insights/hooks/useMetricsSummary';
|
||||
import { usePlaceholderData } from 'component/insights/hooks/usePlaceholderData';
|
||||
import type { GroupedDataByProject } from 'component/insights/hooks/useGroupedProjectTrends';
|
||||
import { useTheme } from '@mui/material';
|
||||
import { aggregateDataPerDate } from './MetricsChartTooltip/aggregate-metrics-by-day';
|
||||
|
||||
interface IMetricsSummaryChartProps {
|
||||
metricsSummaryTrends: GroupedDataByProject<
|
||||
ExecutiveSummarySchema['metricsSummaryTrends']
|
||||
InstanceInsightsSchema['metricsSummaryTrends']
|
||||
>;
|
||||
isAggregate?: boolean;
|
||||
}
|
@ -1,9 +1,9 @@
|
||||
import type { VFC } from 'react';
|
||||
import type { ExecutiveSummarySchemaProjectFlagTrendsItem } from 'openapi';
|
||||
import type { InstanceInsightsSchemaProjectFlagTrendsItem } from 'openapi';
|
||||
import { Box, Divider, Paper, Typography, styled } from '@mui/material';
|
||||
import { Badge } from 'component/common/Badge/Badge';
|
||||
import type { TooltipState } from '../../../components/LineChart/ChartTooltip/ChartTooltip';
|
||||
import { HorizontalDistributionChart } from '../../../components/HorizontalDistributionChart/HorizontalDistributionChart';
|
||||
import type { TooltipState } from 'component/insights/components/LineChart/ChartTooltip/ChartTooltip';
|
||||
import { HorizontalDistributionChart } from 'component/insights/components/HorizontalDistributionChart/HorizontalDistributionChart';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
|
||||
const StyledTooltipItemContainer = styled(Paper)(({ theme }) => ({
|
||||
@ -89,7 +89,7 @@ export const HealthTooltip: VFC<{ tooltip: TooltipState | null }> = ({
|
||||
label: point.label,
|
||||
title: point.dataset.label,
|
||||
color: point.dataset.borderColor,
|
||||
value: point.raw as ExecutiveSummarySchemaProjectFlagTrendsItem,
|
||||
value: point.raw as InstanceInsightsSchemaProjectFlagTrendsItem,
|
||||
};
|
||||
});
|
||||
|
@ -1,19 +1,19 @@
|
||||
import 'chartjs-adapter-date-fns';
|
||||
import { useMemo, type VFC } from 'react';
|
||||
import type { ExecutiveSummarySchema } from 'openapi';
|
||||
import type { InstanceInsightsSchema } from 'openapi';
|
||||
import { HealthTooltip } from './HealthChartTooltip/HealthChartTooltip';
|
||||
import { useProjectChartData } from 'component/executiveDashboard/hooks/useProjectChartData';
|
||||
import { useProjectChartData } from 'component/insights/hooks/useProjectChartData';
|
||||
import {
|
||||
fillGradientPrimary,
|
||||
LineChart,
|
||||
NotEnoughData,
|
||||
} from 'component/executiveDashboard/components/LineChart/LineChart';
|
||||
} from 'component/insights/components/LineChart/LineChart';
|
||||
import { useTheme } from '@mui/material';
|
||||
import type { GroupedDataByProject } from '../../hooks/useGroupedProjectTrends';
|
||||
import type { GroupedDataByProject } from 'component/insights/hooks/useGroupedProjectTrends';
|
||||
|
||||
interface IProjectHealthChartProps {
|
||||
projectFlagTrends: GroupedDataByProject<
|
||||
ExecutiveSummarySchema['projectFlagTrends']
|
||||
InstanceInsightsSchema['projectFlagTrends']
|
||||
>;
|
||||
isAggregate?: boolean;
|
||||
}
|
@ -1,21 +1,21 @@
|
||||
import { useMemo, type VFC } from 'react';
|
||||
import 'chartjs-adapter-date-fns';
|
||||
import type { ExecutiveSummarySchema } from 'openapi';
|
||||
import type { InstanceInsightsSchema } from 'openapi';
|
||||
import {
|
||||
fillGradientPrimary,
|
||||
LineChart,
|
||||
NotEnoughData,
|
||||
} from '../../components/LineChart/LineChart';
|
||||
import { useProjectChartData } from '../../hooks/useProjectChartData';
|
||||
import type { GroupedDataByProject } from '../../hooks/useGroupedProjectTrends';
|
||||
import { usePlaceholderData } from '../../hooks/usePlaceholderData';
|
||||
} from 'component/insights/components/LineChart/LineChart';
|
||||
import { useProjectChartData } from 'component/insights/hooks/useProjectChartData';
|
||||
import type { GroupedDataByProject } from 'component/insights/hooks/useGroupedProjectTrends';
|
||||
import { usePlaceholderData } from 'component/insights/hooks/usePlaceholderData';
|
||||
import { TimeToProductionTooltip } from './TimeToProductionTooltip/TimeToProductionTooltip';
|
||||
import { useTheme } from '@mui/material';
|
||||
import { medianTimeToProduction } from './median-time-to-production';
|
||||
|
||||
interface ITimeToProductionChartProps {
|
||||
projectFlagTrends: GroupedDataByProject<
|
||||
ExecutiveSummarySchema['projectFlagTrends']
|
||||
InstanceInsightsSchema['projectFlagTrends']
|
||||
>;
|
||||
isAggregate?: boolean;
|
||||
}
|
@ -1,8 +1,8 @@
|
||||
import type { VFC } from 'react';
|
||||
import type { ExecutiveSummarySchemaProjectFlagTrendsItem } from 'openapi';
|
||||
import type { InstanceInsightsSchemaProjectFlagTrendsItem } from 'openapi';
|
||||
import { Box, Paper, Typography, styled } from '@mui/material';
|
||||
import { Badge } from 'component/common/Badge/Badge';
|
||||
import type { TooltipState } from '../../../components/LineChart/ChartTooltip/ChartTooltip';
|
||||
import type { TooltipState } from 'component/insights/components/LineChart/ChartTooltip/ChartTooltip';
|
||||
|
||||
const StyledTooltipItemContainer = styled(Paper)(({ theme }) => ({
|
||||
padding: theme.spacing(2),
|
||||
@ -62,7 +62,7 @@ export const TimeToProductionTooltip: VFC<{ tooltip: TooltipState | null }> = ({
|
||||
label: point.label,
|
||||
title: point.dataset.label,
|
||||
color: point.dataset.borderColor,
|
||||
value: point.raw as ExecutiveSummarySchemaProjectFlagTrendsItem,
|
||||
value: point.raw as InstanceInsightsSchemaProjectFlagTrendsItem,
|
||||
};
|
||||
});
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { medianTimeToProduction } from './median-time-to-production';
|
||||
import type { ExecutiveSummarySchema } from 'openapi';
|
||||
import type { InstanceInsightsSchema } from 'openapi';
|
||||
|
||||
describe('medianTimeToProduction', () => {
|
||||
it('calculates the median with a single date and an odd number of projects', () => {
|
||||
@ -7,7 +7,7 @@ describe('medianTimeToProduction', () => {
|
||||
{ date: '2023-03-21', timeToProduction: 10 },
|
||||
{ date: '2023-03-21', timeToProduction: 20 },
|
||||
{ date: '2023-03-21', timeToProduction: 30 },
|
||||
] as unknown as ExecutiveSummarySchema['projectFlagTrends'];
|
||||
] as unknown as InstanceInsightsSchema['projectFlagTrends'];
|
||||
const expected = { '2023-03-21': 20 };
|
||||
expect(medianTimeToProduction(projectsData)).toEqual(expected);
|
||||
});
|
||||
@ -18,7 +18,7 @@ describe('medianTimeToProduction', () => {
|
||||
{ date: '2023-03-22', timeToProduction: 20 },
|
||||
{ date: '2023-03-22', timeToProduction: 30 },
|
||||
{ date: '2023-03-22', timeToProduction: 40 },
|
||||
] as unknown as ExecutiveSummarySchema['projectFlagTrends'];
|
||||
] as unknown as InstanceInsightsSchema['projectFlagTrends'];
|
||||
const expected = { '2023-03-22': 25 };
|
||||
expect(medianTimeToProduction(projectsData)).toEqual(expected);
|
||||
});
|
||||
@ -31,7 +31,7 @@ describe('medianTimeToProduction', () => {
|
||||
{ date: '2023-03-24', timeToProduction: 20 },
|
||||
{ date: '2023-03-24', timeToProduction: 30 },
|
||||
{ date: '2023-03-25', timeToProduction: 25 },
|
||||
] as unknown as ExecutiveSummarySchema['projectFlagTrends'];
|
||||
] as unknown as InstanceInsightsSchema['projectFlagTrends'];
|
||||
const expected = {
|
||||
'2023-03-23': 10,
|
||||
'2023-03-24': 20,
|
@ -1,11 +1,11 @@
|
||||
import type { ExecutiveSummarySchema } from 'openapi';
|
||||
import type { InstanceInsightsSchema } from 'openapi';
|
||||
|
||||
type GroupedDataByDate<T> = Record<string, T[]>;
|
||||
|
||||
type DateResult<T> = Record<string, T>;
|
||||
|
||||
export function medianTimeToProduction(
|
||||
projectsData: ExecutiveSummarySchema['projectFlagTrends'],
|
||||
projectsData: InstanceInsightsSchema['projectFlagTrends'],
|
||||
): DateResult<number> {
|
||||
const groupedData: GroupedDataByDate<number> = {};
|
||||
projectsData.forEach((item) => {
|
@ -2,21 +2,24 @@ import { useMemo, type VFC } from 'react';
|
||||
import 'chartjs-adapter-date-fns';
|
||||
import { useTheme } from '@mui/material';
|
||||
import type {
|
||||
ExecutiveSummarySchema,
|
||||
ExecutiveSummarySchemaEnvironmentTypeTrendsItem,
|
||||
InstanceInsightsSchema,
|
||||
InstanceInsightsSchemaEnvironmentTypeTrendsItem,
|
||||
} from 'openapi';
|
||||
import { LineChart, NotEnoughData } from '../../components/LineChart/LineChart';
|
||||
import { usePlaceholderData } from 'component/executiveDashboard/hooks/usePlaceholderData';
|
||||
import {
|
||||
LineChart,
|
||||
NotEnoughData,
|
||||
} from 'component/insights/components/LineChart/LineChart';
|
||||
import { usePlaceholderData } from 'component/insights/hooks/usePlaceholderData';
|
||||
import { UpdatesPerEnvironmentTypeChartTooltip } from './UpdatesPerEnvironmentTypeChartTooltip/UpdatesPerEnvironmentTypeChartTooltip';
|
||||
|
||||
interface IUpdatesPerEnvironmnetTypeChart {
|
||||
environmentTypeTrends: ExecutiveSummarySchema['environmentTypeTrends'];
|
||||
environmentTypeTrends: InstanceInsightsSchema['environmentTypeTrends'];
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
const groupByDate = (
|
||||
items: ExecutiveSummarySchemaEnvironmentTypeTrendsItem[],
|
||||
): Record<string, ExecutiveSummarySchemaEnvironmentTypeTrendsItem[]> => {
|
||||
items: InstanceInsightsSchemaEnvironmentTypeTrendsItem[],
|
||||
): Record<string, InstanceInsightsSchemaEnvironmentTypeTrendsItem[]> => {
|
||||
if (!items) {
|
||||
return {};
|
||||
}
|
||||
@ -33,7 +36,7 @@ const groupByDate = (
|
||||
|
||||
return acc;
|
||||
},
|
||||
{} as Record<string, ExecutiveSummarySchemaEnvironmentTypeTrendsItem[]>,
|
||||
{} as Record<string, InstanceInsightsSchemaEnvironmentTypeTrendsItem[]>,
|
||||
);
|
||||
|
||||
return grouped;
|
@ -1,7 +1,7 @@
|
||||
import type { VFC } from 'react';
|
||||
import type { ExecutiveSummarySchemaEnvironmentTypeTrendsItem } from 'openapi';
|
||||
import type { InstanceInsightsSchemaEnvironmentTypeTrendsItem } from 'openapi';
|
||||
import { Box, Divider, Paper, styled, Typography } from '@mui/material';
|
||||
import type { TooltipState } from '../../../components/LineChart/ChartTooltip/ChartTooltip';
|
||||
import type { TooltipState } from 'component/insights/components/LineChart/ChartTooltip/ChartTooltip';
|
||||
|
||||
const StyledTooltipItemContainer = styled(Paper)(({ theme }) => ({
|
||||
padding: theme.spacing(2),
|
||||
@ -64,7 +64,7 @@ export const UpdatesPerEnvironmentTypeChartTooltip: VFC<{
|
||||
label: point.label,
|
||||
title: point.dataset.label,
|
||||
color: point.dataset.borderColor,
|
||||
value: point.raw as ExecutiveSummarySchemaEnvironmentTypeTrendsItem,
|
||||
value: point.raw as InstanceInsightsSchemaEnvironmentTypeTrendsItem,
|
||||
};
|
||||
});
|
||||
|
@ -1,17 +1,17 @@
|
||||
import { useMemo, type VFC } from 'react';
|
||||
import 'chartjs-adapter-date-fns';
|
||||
import { useTheme } from '@mui/material';
|
||||
import type { ExecutiveSummarySchema } from 'openapi';
|
||||
import type { InstanceInsightsSchema } from 'openapi';
|
||||
import {
|
||||
fillGradientPrimary,
|
||||
LineChart,
|
||||
NotEnoughData,
|
||||
} from '../../components/LineChart/LineChart';
|
||||
} from 'component/insights/components/LineChart/LineChart';
|
||||
import { useUiFlag } from 'hooks/useUiFlag';
|
||||
import { usePlaceholderData } from 'component/executiveDashboard/hooks/usePlaceholderData';
|
||||
import { usePlaceholderData } from 'component/insights/hooks/usePlaceholderData';
|
||||
|
||||
interface IUsersChartProps {
|
||||
userTrends: ExecutiveSummarySchema['userTrends'];
|
||||
userTrends: InstanceInsightsSchema['userTrends'];
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
@ -1,14 +1,17 @@
|
||||
import { useMemo, type VFC } from 'react';
|
||||
import 'chartjs-adapter-date-fns';
|
||||
import type { ExecutiveSummarySchema } from 'openapi';
|
||||
import { LineChart, NotEnoughData } from '../../components/LineChart/LineChart';
|
||||
import { useProjectChartData } from 'component/executiveDashboard/hooks/useProjectChartData';
|
||||
import { usePlaceholderData } from 'component/executiveDashboard/hooks/usePlaceholderData';
|
||||
import type { GroupedDataByProject } from '../../hooks/useGroupedProjectTrends';
|
||||
import type { InstanceInsightsSchema } from 'openapi';
|
||||
import {
|
||||
LineChart,
|
||||
NotEnoughData,
|
||||
} from 'component/insights/components/LineChart/LineChart';
|
||||
import { useProjectChartData } from 'component/insights/hooks/useProjectChartData';
|
||||
import { usePlaceholderData } from 'component/insights/hooks/usePlaceholderData';
|
||||
import type { GroupedDataByProject } from 'component/insights/hooks/useGroupedProjectTrends';
|
||||
|
||||
interface IUsersPerProjectChartProps {
|
||||
projectFlagTrends: GroupedDataByProject<
|
||||
ExecutiveSummarySchema['projectFlagTrends']
|
||||
InstanceInsightsSchema['projectFlagTrends']
|
||||
>;
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
import type { VFC } from 'react';
|
||||
import { Typography, styled } from '@mui/material';
|
||||
import { Gauge } from '../../components/Gauge/Gauge';
|
||||
import { Gauge } from 'component/insights/components/Gauge/Gauge';
|
||||
|
||||
const StyledContainer = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
@ -1,6 +1,6 @@
|
||||
import { renderHook } from '@testing-library/react-hooks';
|
||||
import { useFilteredFlagsSummary } from './useFilteredFlagsSummary';
|
||||
import type { ExecutiveSummarySchemaUsers } from '../../../openapi';
|
||||
import type { InstanceInsightsSchemaUsers } from 'openapi';
|
||||
|
||||
describe('useFilteredFlagTrends', () => {
|
||||
it('should summarize only last week of project flag trends', () => {
|
||||
@ -48,7 +48,7 @@ describe('useFilteredFlagTrends', () => {
|
||||
date: '',
|
||||
},
|
||||
],
|
||||
{ total: 1 } as unknown as ExecutiveSummarySchemaUsers,
|
||||
{ total: 1 } as unknown as InstanceInsightsSchemaUsers,
|
||||
),
|
||||
);
|
||||
|
||||
@ -78,7 +78,7 @@ describe('useFilteredFlagTrends', () => {
|
||||
date: '',
|
||||
},
|
||||
],
|
||||
{ total: 1 } as unknown as ExecutiveSummarySchemaUsers,
|
||||
{ total: 1 } as unknown as InstanceInsightsSchemaUsers,
|
||||
),
|
||||
);
|
||||
|
||||
@ -118,7 +118,7 @@ describe('useFilteredFlagTrends', () => {
|
||||
date: '',
|
||||
},
|
||||
],
|
||||
{ total: 1 } as unknown as ExecutiveSummarySchemaUsers,
|
||||
{ total: 1 } as unknown as InstanceInsightsSchemaUsers,
|
||||
),
|
||||
);
|
||||
|
||||
@ -148,7 +148,7 @@ describe('useFilteredFlagTrends', () => {
|
||||
date: '',
|
||||
},
|
||||
],
|
||||
{ total: 1 } as unknown as ExecutiveSummarySchemaUsers,
|
||||
{ total: 1 } as unknown as InstanceInsightsSchemaUsers,
|
||||
),
|
||||
);
|
||||
|
@ -1,13 +1,13 @@
|
||||
import { useMemo } from 'react';
|
||||
import type {
|
||||
ExecutiveSummarySchemaProjectFlagTrendsItem,
|
||||
ExecutiveSummarySchemaUsers,
|
||||
InstanceInsightsSchemaProjectFlagTrendsItem,
|
||||
InstanceInsightsSchemaUsers,
|
||||
} from 'openapi';
|
||||
|
||||
// NOTE: should we move project filtering to the backend?
|
||||
export const useFilteredFlagsSummary = (
|
||||
filteredProjectFlagTrends: ExecutiveSummarySchemaProjectFlagTrendsItem[],
|
||||
users: ExecutiveSummarySchemaUsers,
|
||||
filteredProjectFlagTrends: InstanceInsightsSchemaProjectFlagTrendsItem[],
|
||||
users: InstanceInsightsSchemaUsers,
|
||||
) =>
|
||||
useMemo(() => {
|
||||
const lastWeekId = filteredProjectFlagTrends.reduce((prev, current) => {
|
@ -1,12 +1,12 @@
|
||||
import { useMemo } from 'react';
|
||||
import type { ExecutiveSummarySchema } from 'openapi';
|
||||
import type { InstanceInsightsSchema } from 'openapi';
|
||||
import { useFilteredTrends } from './useFilteredTrends';
|
||||
import { useGroupedProjectTrends } from './useGroupedProjectTrends';
|
||||
import { useFilteredFlagsSummary } from './useFilteredFlagsSummary';
|
||||
import { useMedianTimeToProduction } from './useMedianTimeToProduction';
|
||||
|
||||
export const useDashboardData = (
|
||||
executiveDashboardData: ExecutiveSummarySchema,
|
||||
export const useInsightsData = (
|
||||
executiveDashboardData: InstanceInsightsSchema,
|
||||
projects: string[],
|
||||
) => {
|
||||
const projectsData = useFilteredTrends(
|
@ -1,16 +1,16 @@
|
||||
import { useMemo } from 'react';
|
||||
import type {
|
||||
ExecutiveSummarySchema,
|
||||
ExecutiveSummarySchemaProjectFlagTrendsItem,
|
||||
InstanceInsightsSchema,
|
||||
InstanceInsightsSchemaProjectFlagTrendsItem,
|
||||
} from 'openapi';
|
||||
import type { GroupedDataByProject } from './useGroupedProjectTrends';
|
||||
|
||||
const validTrend = (trend: ExecutiveSummarySchemaProjectFlagTrendsItem) =>
|
||||
const validTrend = (trend: InstanceInsightsSchemaProjectFlagTrendsItem) =>
|
||||
Boolean(trend) && Boolean(trend.timeToProduction);
|
||||
|
||||
export const useMedianTimeToProduction = (
|
||||
projectsData: GroupedDataByProject<
|
||||
ExecutiveSummarySchema['projectFlagTrends']
|
||||
InstanceInsightsSchema['projectFlagTrends']
|
||||
>,
|
||||
) =>
|
||||
useMemo(() => {
|
@ -1,10 +1,10 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useTheme } from '@mui/material';
|
||||
import type { ExecutiveSummarySchema } from 'openapi';
|
||||
import type { InstanceInsightsSchema } from 'openapi';
|
||||
import { useProjectColor } from './useProjectColor';
|
||||
import type { GroupedDataByProject } from './useGroupedProjectTrends';
|
||||
|
||||
type MetricsSummaryTrends = ExecutiveSummarySchema['metricsSummaryTrends'];
|
||||
type MetricsSummaryTrends = InstanceInsightsSchema['metricsSummaryTrends'];
|
||||
|
||||
export const useMetricsSummary = (
|
||||
metricsSummaryTrends: GroupedDataByProject<MetricsSummaryTrends>,
|
@ -1,10 +1,10 @@
|
||||
import { useMemo } from 'react';
|
||||
import type { ExecutiveSummarySchema } from 'openapi';
|
||||
import type { InstanceInsightsSchema } from 'openapi';
|
||||
import { useProjectColor } from './useProjectColor';
|
||||
import { useTheme } from '@mui/material';
|
||||
import type { GroupedDataByProject } from './useGroupedProjectTrends';
|
||||
|
||||
type ProjectFlagTrends = ExecutiveSummarySchema['projectFlagTrends'];
|
||||
type ProjectFlagTrends = InstanceInsightsSchema['projectFlagTrends'];
|
||||
|
||||
export const useProjectChartData = (
|
||||
projectFlagTrends: GroupedDataByProject<ProjectFlagTrends>,
|
@ -44,7 +44,7 @@ import { FeatureTypesList } from 'component/featureTypes/FeatureTypesList';
|
||||
import { ViewIntegration } from 'component/integrations/ViewIntegration/ViewIntegration';
|
||||
import { PaginatedApplicationList } from '../application/ApplicationList/PaginatedApplicationList';
|
||||
import { AddonRedirect } from 'component/integrations/AddonRedirect/AddonRedirect';
|
||||
import { ExecutiveDashboard } from 'component/executiveDashboard/ExecutiveDashboard';
|
||||
import { Insights } from '../insights/Insights';
|
||||
import { FeedbackList } from '../feedbackNew/FeedbackList';
|
||||
import { Application } from 'component/application/Application';
|
||||
import { Signals } from 'component/signals/Signals';
|
||||
@ -64,7 +64,7 @@ export const routes: IRoute[] = [
|
||||
{
|
||||
path: '/insights',
|
||||
title: 'Insights',
|
||||
component: ExecutiveDashboard,
|
||||
component: Insights,
|
||||
type: 'protected',
|
||||
menu: { mobile: true },
|
||||
flag: 'executiveDashboardUI',
|
||||
|
@ -2,32 +2,32 @@ import useSWR, { mutate, type SWRConfiguration } from 'swr';
|
||||
import { useCallback } from 'react';
|
||||
import { formatApiPath } from 'utils/formatPath';
|
||||
import handleErrorResponses from '../httpErrorResponseHandler';
|
||||
import type { ExecutiveSummarySchema } from 'openapi';
|
||||
import type { InstanceInsightsSchema } from 'openapi';
|
||||
|
||||
interface IUseExecutiveDashboardDataOutput {
|
||||
executiveDashboardData: ExecutiveSummarySchema;
|
||||
refetchExecutiveDashboard: () => void;
|
||||
interface IUseInsightsDataOutput {
|
||||
insights: InstanceInsightsSchema;
|
||||
refetchInsights: () => void;
|
||||
loading: boolean;
|
||||
error?: Error;
|
||||
}
|
||||
|
||||
export const useExecutiveDashboard = (
|
||||
export const useInsights = (
|
||||
options?: SWRConfiguration,
|
||||
): IUseExecutiveDashboardDataOutput => {
|
||||
): IUseInsightsDataOutput => {
|
||||
const path = formatApiPath('api/admin/dashboard/executive');
|
||||
|
||||
const { data, error } = useSWR<ExecutiveSummarySchema>(
|
||||
const { data, error } = useSWR<InstanceInsightsSchema>(
|
||||
path,
|
||||
fetchExecutiveDashboard,
|
||||
options,
|
||||
);
|
||||
|
||||
const refetchExecutiveDashboard = useCallback(() => {
|
||||
const refetchInsights = useCallback(() => {
|
||||
mutate(path).catch(console.warn);
|
||||
}, [path]);
|
||||
|
||||
return {
|
||||
executiveDashboardData: data || {
|
||||
insights: data || {
|
||||
users: { total: 0, inactive: 0, active: 0 },
|
||||
flags: { total: 0 },
|
||||
userTrends: [],
|
||||
@ -36,7 +36,7 @@ export const useExecutiveDashboard = (
|
||||
metricsSummaryTrends: [],
|
||||
environmentTypeTrends: [],
|
||||
},
|
||||
refetchExecutiveDashboard,
|
||||
refetchInsights,
|
||||
loading: !error && !data,
|
||||
error,
|
||||
};
|
||||
@ -44,7 +44,7 @@ export const useExecutiveDashboard = (
|
||||
|
||||
const fetchExecutiveDashboard = (
|
||||
path: string,
|
||||
): Promise<ExecutiveSummarySchema> => {
|
||||
): Promise<InstanceInsightsSchema> => {
|
||||
return fetch(path)
|
||||
.then(handleErrorResponses('Executive Dashboard Data'))
|
||||
.then((res) => res.json());
|
@ -1,32 +0,0 @@
|
||||
/**
|
||||
* Generated by Orval
|
||||
* Do not edit manually.
|
||||
* See `gen:api` script in package.json
|
||||
*/
|
||||
import type { ExecutiveSummarySchemaEnvironmentTypeTrendsItem } from './executiveSummarySchemaEnvironmentTypeTrendsItem';
|
||||
import type { ExecutiveSummarySchemaFlags } from './executiveSummarySchemaFlags';
|
||||
import type { ExecutiveSummarySchemaFlagTrendsItem } from './executiveSummarySchemaFlagTrendsItem';
|
||||
import type { ExecutiveSummarySchemaMetricsSummaryTrendsItem } from './executiveSummarySchemaMetricsSummaryTrendsItem';
|
||||
import type { ExecutiveSummarySchemaProjectFlagTrendsItem } from './executiveSummarySchemaProjectFlagTrendsItem';
|
||||
import type { ExecutiveSummarySchemaUsers } from './executiveSummarySchemaUsers';
|
||||
import type { ExecutiveSummarySchemaUserTrendsItem } from './executiveSummarySchemaUserTrendsItem';
|
||||
|
||||
/**
|
||||
* Executive summary of Unleash usage
|
||||
*/
|
||||
export interface ExecutiveSummarySchema {
|
||||
/** How updates per environment type changed over time */
|
||||
environmentTypeTrends: ExecutiveSummarySchemaEnvironmentTypeTrendsItem[];
|
||||
/** High level flag count statistics */
|
||||
flags: ExecutiveSummarySchemaFlags;
|
||||
/** How number of flags changed over time */
|
||||
flagTrends: ExecutiveSummarySchemaFlagTrendsItem[];
|
||||
/** How metrics data per project changed over time */
|
||||
metricsSummaryTrends: ExecutiveSummarySchemaMetricsSummaryTrendsItem[];
|
||||
/** How number of flags per project changed over time */
|
||||
projectFlagTrends: ExecutiveSummarySchemaProjectFlagTrendsItem[];
|
||||
/** High level user count statistics */
|
||||
users: ExecutiveSummarySchemaUsers;
|
||||
/** How number of users changed over time */
|
||||
userTrends: ExecutiveSummarySchemaUserTrendsItem[];
|
||||
}
|
@ -521,14 +521,6 @@ export * from './eventSchemaPreData';
|
||||
export * from './eventSchemaType';
|
||||
export * from './eventsSchema';
|
||||
export * from './eventsSchemaVersion';
|
||||
export * from './executiveSummarySchema';
|
||||
export * from './executiveSummarySchemaEnvironmentTypeTrendsItem';
|
||||
export * from './executiveSummarySchemaFlagTrendsItem';
|
||||
export * from './executiveSummarySchemaFlags';
|
||||
export * from './executiveSummarySchemaMetricsSummaryTrendsItem';
|
||||
export * from './executiveSummarySchemaProjectFlagTrendsItem';
|
||||
export * from './executiveSummarySchemaUserTrendsItem';
|
||||
export * from './executiveSummarySchemaUsers';
|
||||
export * from './exportFeatures404';
|
||||
export * from './exportQuerySchema';
|
||||
export * from './exportQuerySchemaAnyOf';
|
||||
@ -770,6 +762,14 @@ export * from './instanceAdminStatsSchemaClientAppsItem';
|
||||
export * from './instanceAdminStatsSchemaClientAppsItemRange';
|
||||
export * from './instanceAdminStatsSchemaPreviousDayMetricsBucketsCount';
|
||||
export * from './instanceAdminStatsSchemaProductionChanges';
|
||||
export * from './instanceInsightsSchema';
|
||||
export * from './instanceInsightsSchemaEnvironmentTypeTrendsItem';
|
||||
export * from './instanceInsightsSchemaFlagTrendsItem';
|
||||
export * from './instanceInsightsSchemaFlags';
|
||||
export * from './instanceInsightsSchemaMetricsSummaryTrendsItem';
|
||||
export * from './instanceInsightsSchemaProjectFlagTrendsItem';
|
||||
export * from './instanceInsightsSchemaUserTrendsItem';
|
||||
export * from './instanceInsightsSchemaUsers';
|
||||
export * from './invoicesSchema';
|
||||
export * from './invoicesSchemaItem';
|
||||
export * from './legalValueSchema';
|
||||
|
32
frontend/src/openapi/models/instanceInsightsSchema.ts
Normal file
32
frontend/src/openapi/models/instanceInsightsSchema.ts
Normal file
@ -0,0 +1,32 @@
|
||||
/**
|
||||
* Generated by Orval
|
||||
* Do not edit manually.
|
||||
* See `gen:api` script in package.json
|
||||
*/
|
||||
import type { InstanceInsightsSchemaEnvironmentTypeTrendsItem } from './instanceInsightsSchemaEnvironmentTypeTrendsItem';
|
||||
import type { InstanceInsightsSchemaFlags } from './instanceInsightsSchemaFlags';
|
||||
import type { InstanceInsightsSchemaFlagTrendsItem } from './instanceInsightsSchemaFlagTrendsItem';
|
||||
import type { InstanceInsightsSchemaMetricsSummaryTrendsItem } from './instanceInsightsSchemaMetricsSummaryTrendsItem';
|
||||
import type { InstanceInsightsSchemaProjectFlagTrendsItem } from './instanceInsightsSchemaProjectFlagTrendsItem';
|
||||
import type { InstanceInsightsSchemaUsers } from './instanceInsightsSchemaUsers';
|
||||
import type { InstanceInsightsSchemaUserTrendsItem } from './instanceInsightsSchemaUserTrendsItem';
|
||||
|
||||
/**
|
||||
* A summary of this Unleash instance's usage statistics, including user and flag counts, and trends over time.
|
||||
*/
|
||||
export interface InstanceInsightsSchema {
|
||||
/** How updates per environment type changed over time */
|
||||
environmentTypeTrends: InstanceInsightsSchemaEnvironmentTypeTrendsItem[];
|
||||
/** High level flag count statistics */
|
||||
flags: InstanceInsightsSchemaFlags;
|
||||
/** How number of flags changed over time */
|
||||
flagTrends: InstanceInsightsSchemaFlagTrendsItem[];
|
||||
/** How metrics data per project changed over time */
|
||||
metricsSummaryTrends: InstanceInsightsSchemaMetricsSummaryTrendsItem[];
|
||||
/** How number of flags per project changed over time */
|
||||
projectFlagTrends: InstanceInsightsSchemaProjectFlagTrendsItem[];
|
||||
/** High level user count statistics */
|
||||
users: InstanceInsightsSchemaUsers;
|
||||
/** How number of users changed over time */
|
||||
userTrends: InstanceInsightsSchemaUserTrendsItem[];
|
||||
}
|
@ -4,7 +4,7 @@
|
||||
* See `gen:api` script in package.json
|
||||
*/
|
||||
|
||||
export type ExecutiveSummarySchemaEnvironmentTypeTrendsItem = {
|
||||
export type InstanceInsightsSchemaEnvironmentTypeTrendsItem = {
|
||||
/** A UTC date when the stats were captured. Time is the very end of a given day. */
|
||||
date: string;
|
||||
/** Environment type the data belongs too */
|
@ -4,7 +4,7 @@
|
||||
* See `gen:api` script in package.json
|
||||
*/
|
||||
|
||||
export type ExecutiveSummarySchemaFlagTrendsItem = {
|
||||
export type InstanceInsightsSchemaFlagTrendsItem = {
|
||||
/** The number of active flags on a particular day */
|
||||
active: number;
|
||||
/** A UTC date when the stats were captured. Time is the very end of a given day. */
|
@ -7,7 +7,7 @@
|
||||
/**
|
||||
* High level flag count statistics
|
||||
*/
|
||||
export type ExecutiveSummarySchemaFlags = {
|
||||
export type InstanceInsightsSchemaFlags = {
|
||||
/** The number of non-archived flags */
|
||||
total: number;
|
||||
};
|
@ -4,7 +4,7 @@
|
||||
* See `gen:api` script in package.json
|
||||
*/
|
||||
|
||||
export type ExecutiveSummarySchemaMetricsSummaryTrendsItem = {
|
||||
export type InstanceInsightsSchemaMetricsSummaryTrendsItem = {
|
||||
/** A UTC date when metrics summary was captured. Time is the very end of a given day. */
|
||||
date: string;
|
||||
/** Project id of the project the impressions summary belong to */
|
@ -4,7 +4,7 @@
|
||||
* See `gen:api` script in package.json
|
||||
*/
|
||||
|
||||
export type ExecutiveSummarySchemaProjectFlagTrendsItem = {
|
||||
export type InstanceInsightsSchemaProjectFlagTrendsItem = {
|
||||
/** The number of active flags on a particular day */
|
||||
active: number;
|
||||
/** A UTC date when the stats were captured. Time is the very end of a given day. */
|
@ -4,7 +4,7 @@
|
||||
* See `gen:api` script in package.json
|
||||
*/
|
||||
|
||||
export type ExecutiveSummarySchemaUserTrendsItem = {
|
||||
export type InstanceInsightsSchemaUserTrendsItem = {
|
||||
/** The number of active Unleash users on a particular day */
|
||||
active: number;
|
||||
/** A UTC date when the stats were captured. Time is the very end of a given day. */
|
@ -7,7 +7,7 @@
|
||||
/**
|
||||
* High level user count statistics
|
||||
*/
|
||||
export type ExecutiveSummarySchemaUsers = {
|
||||
export type InstanceInsightsSchemaUsers = {
|
||||
/** The number of active Unleash users who have user Unleash in the past 60 days */
|
||||
active: number;
|
||||
/** The number of inactive Unleash users who have not used Unleash in the past 60 days. */
|
Loading…
Reference in New Issue
Block a user