Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

Feat/new metrics tab (#432)

Browse Source 
* New metric tab if environment flag is active

* Prepare new metrics tab - need styling help!!
This commit is contained in:
Christopher Kolstad 2021-10-15 10:05:10 +02:00 committed by GitHub
parent c3453fad0d
commit 4230fc98ed
6 changed files with 118 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/component/feature/FeatureView2/EnvironmentMetricComponent/EnvironmentMetricComponent.tsx Normal file
View File

@ -0,0 +1,50 @@
import useFeatureMetrics from '../../../../hooks/api/getters/useFeatureMetrics/useFeatureMetrics';
import { useParams } from 'react-router-dom';
import { IFeatureViewParams } from '../../../../interfaces/params';
import React from 'react';
import useFeature from '../../../../hooks/api/getters/useFeature/useFeature';
import FeatureEnvironmentMetrics from '../FeatureOverview/FeatureEnvironmentMetrics/FeatureEnvironmentMetrics';
import FeatureSeenApplications from '../FeatureSeenApplications/FeatureSeenApplications';
import { Grid } from '@material-ui/core';
const emptyMetric = (environment: string) => ({
yes: 0,
no: 0,
environment,
timestamp: '',
});
const EnvironmentMetricComponent: React.FC = () => {
const { projectId, featureId } = useParams<IFeatureViewParams>();
const { feature } = useFeature(projectId, featureId);
const { metrics } = useFeatureMetrics(projectId, featureId);
const featureMetrics = feature?.environments.map(env => {
const envMetric = metrics.lastHourUsage.find(
metric => metric.environment === env.name
);
return envMetric || emptyMetric(env.name);
});
const metricComponents = featureMetrics.map(metric => {
return (
<Grid item sm={6}>
<FeatureEnvironmentMetrics key={metric.environment} metric={metric} />
</Grid>)
})
return (
<>
<Grid sm={12} data-loading>
<h2>{'Environments'}</h2>
<hr />
{metricComponents}
</Grid>
<Grid sm={12} data-loading>
<h2>Applications</h2>
<hr />
<FeatureSeenApplications />
</Grid>
</>
);
};
export default EnvironmentMetricComponent;

10
frontend/src/component/feature/FeatureView2/FeatureMetrics/FeatureMetrics.tsx
View File

@ -3,15 +3,23 @@ import useFeature from '../../../../hooks/api/getters/useFeature/useFeature';
import MetricComponent from '../../view/metric-container';
import { useStyles } from './FeatureMetrics.styles';
import { IFeatureViewParams } from '../../../../interfaces/params';
import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
import ConditionallyRender from '../../../common/ConditionallyRender';
import EnvironmentMetricComponent from '../EnvironmentMetricComponent/EnvironmentMetricComponent';
const FeatureMetrics = () => {
const styles = useStyles();
const { projectId, featureId } = useParams<IFeatureViewParams>();
const { feature } = useFeature(projectId, featureId);
const { uiConfig } = useUiConfig();
const isEnterprise = uiConfig.flags.E;
return (
<div className={styles.container}>
<MetricComponent featureToggle={feature} />
<ConditionallyRender condition={isEnterprise}
show={<EnvironmentMetricComponent />}
elseShow={<MetricComponent featureToggle={feature} />}
/>
</div>
);
};

15
frontend/src/component/feature/FeatureView2/FeatureSeenApplications/FeatureSeenApplications.styles.ts Normal file
View File

@ -0,0 +1,15 @@
import { makeStyles } from '@material-ui/core/styles';
export const useStyles = makeStyles(theme => ({
listLink: {
color: '#212121',
textDecoration: 'none',
fontWeight: 'normal',
display: 'block',
},
truncate: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}
}));

41
frontend/src/component/feature/FeatureView2/FeatureSeenApplications/FeatureSeenApplications.tsx Normal file
View File

@ -0,0 +1,41 @@
import useFeatureMetrics from '../../../../hooks/api/getters/useFeatureMetrics/useFeatureMetrics';
import { Link, useParams } from 'react-router-dom';
import { IFeatureViewParams } from '../../../../interfaces/params';
import { Grid, List, ListItem, ListItemText } from '@material-ui/core';
import React from 'react';
import { useStyles } from './FeatureSeenApplications.styles';
const FeatureSeenApplications: React.FC = () => {
const { projectId, featureId } = useParams<IFeatureViewParams>();
const { metrics } = useFeatureMetrics(projectId, featureId);
const styles = useStyles()
let seenApplications;
if (metrics?.seenApplications?.length > 0) {
seenApplications = metrics.seenApplications.map(appName => {
return (<ListItem><ListItemText primary={
<Link
to={`/applications/${appName}`}
className={[
styles.listLink,
styles.truncate,
].join(' ')}
>
{appName}
</Link>
} /></ListItem>)
});
} else {
seenApplications = (<ListItem><ListItemText primary={'Not seen in any applications'} /></ListItem>);
}
return (
<Grid sm={12}>
<List>
<ListItemText primary={'Seen in applications:'} />
{seenApplications}
</List>
</Grid>
);
}
export default FeatureSeenApplications;

3
frontend/src/hooks/api/getters/useFeatureMetrics/useFeatureMetrics.ts
View File

@ -2,6 +2,7 @@ import { formatApiPath } from '../../../../utils/format-path';
import { useEffect, useState } from 'react';
import useSWR, { mutate } from 'swr';
import { IFeatureMetrics } from '../../../../interfaces/featureToggle';
import handleErrorResponses from '../httpErrorResponseHandler';
interface IUseFeatureMetricsOptions {
refreshInterval?: number;
@ -18,7 +19,7 @@ const useFeatureMetrics = (projectId: string, featureId: string, options: IUseFe
const path = formatApiPath(`api/admin/client-metrics/features/${featureId}`);
const res = await fetch(path, {
method: 'GET'
});
}).then(handleErrorResponses('feature metrics'));
if (res.ok) {
return res.json();
} else {

2
frontend/src/interfaces/featureToggle.ts
View File

@ -60,5 +60,5 @@ export interface IFeatureMetrics {
version: number;
maturity: string;
lastHourUsage: IFeatureEnvironmentMetrics[],
seenApplication: string[]
seenApplications: string[]
}