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

fix: style metrics view (#448)

Browse Source
This commit is contained in:
Fredrik Strand Oseberg 2021-10-20 12:55:40 +02:00 committed by GitHub
parent 57928d50c6
commit 48bae48ee0
4 changed files with 67 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
frontend/src/component/feature/FeatureView2/EnvironmentMetricComponent/EnvironmentMetricComponent.style.ts
View File

@ -1,100 +0,0 @@
import { makeStyles } from '@material-ui/core/styles';
export const useStyles = makeStyles(theme => ({
container: {
display: 'flex',
borderRadius: '10px',
backgroundColor: '#fff',
padding: '2rem 2rem 2rem 2rem',
marginBottom: '1rem',
flexDirection: 'column',
width: '50%',
position: 'relative'
},
environmentContainer: {
display: 'flex',
marginBottom: '1rem',
width: '100%',
position: 'relative'
},
environmentHeader: {
display: 'flex',
width: '100%',
fontSize: theme.fontSizes.subHeader,
fontWeight: 'bold'
},
applicationHeader: {
display: 'flex',
width: '100%',
fontSize: theme.fontSizes.subHeader,
fontWeight: 'bold'
},
applicationContainer: {
display: 'flex',
width: '100%',
position: 'relative',
marginBottom: '1rem'
},
[theme.breakpoints.down(1000)]: {
container: {
width: '100%'
}
},
headerContainer: {
display: 'flex',
width: '100%',
alignItems: 'center',
justifyContent: 'space-between'
},
title: {
fontSize: theme.fontSizes.subHeader,
fontWeight: 'normal',
margin: 0
},
bodyContainer: {
display: 'flex',
align: 'items',
marginTop: '1rem',
height: '100%'
},
trueCountContainer: {
marginBottom: '0.5rem',
display: 'flex',
alignItems: 'center'
},
trueCount: {
width: '10px',
height: '10px',
borderRadius: '50%',
marginRight: '0.75rem',
backgroundColor: theme.palette.primary.main
},
falseCount: {
width: '10px',
height: '10px',
borderRadius: '50%',
marginRight: '0.75rem',
backgroundColor: theme.palette.grey[300]
},
paragraph: {
fontSize: theme.fontSizes.smallBody
},
textContainer: {
marginRight: '1rem',
maxWidth: '150px'
},
primaryMetric: {
width: '100%'
},
icon: {
fill: theme.palette.grey[300],
height: '75px',
width: '75px'
},
chartContainer: {
width: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}
}));

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

@ -1,50 +0,0 @@
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 { useStyles } from './EnvironmentMetricComponent.style';
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 styles = useStyles();
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 (
<FeatureEnvironmentMetrics key={metric.environment} metric={metric} />
);
});
return (
<>
<div className={styles.environmentHeader}>Environments</div>
<div className={styles.environmentContainer}>
{metricComponents}
</div>
<div className={styles.applicationHeader}>Applications</div>
<div className={styles.applicationsContainer}>
<FeatureSeenApplications />
</div>
</>
)
;
};
export default EnvironmentMetricComponent;

25
frontend/src/component/feature/FeatureView2/FeatureMetrics/FeatureMetrics.styles.ts
View File

@ -1,9 +1,26 @@
import { makeStyles } from '@material-ui/core/styles';
export const useStyles = makeStyles(theme => ({
container: {
borderRadius: '12.5px',
backgroundColor: '#fff',
padding: '2rem',
environmentContainer: {
display: 'flex',
marginBottom: '1rem',
flexWrap: 'wrap',
width: '100%',
position: 'relative',
justifyContent: 'center',
},
environmentMetrics: {
border: `1px solid ${theme.palette.grey[300]}`,
margin: '1rem',
width: '30%',
[theme.breakpoints.down(1000)]: {
width: '40%',
},
[theme.breakpoints.down(750)]: {
width: '100%',
},
},
secondaryContent: {
marginTop: '1rem',
},
}));

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

@ -1,26 +1,59 @@
import { useParams } from 'react-router';
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';
import useFeatureMetrics from '../../../../hooks/api/getters/useFeatureMetrics/useFeatureMetrics';
import FeatureEnvironmentMetrics from '../FeatureOverview/FeatureEnvironmentMetrics/FeatureEnvironmentMetrics';
import FeatureSeenApplications from '../FeatureSeenApplications/FeatureSeenApplications';
import PageContent from '../../../common/PageContent';
const emptyMetric = (environment: string) => ({
yes: 0,
no: 0,
environment,
timestamp: '',
});
const FeatureMetrics = () => {
const styles = useStyles();
const { projectId, featureId } = useParams<IFeatureViewParams>();
const { feature } = useFeature(projectId, featureId);
const { uiConfig } = useUiConfig();
const isEnterprise = uiConfig.flags.E;
const { metrics } = useFeatureMetrics(projectId, featureId);
const styles = useStyles();
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 (
<FeatureEnvironmentMetrics
key={metric.environment}
className={styles.environmentMetrics}
metric={metric}
/>
);
});
return (
<div className={styles.container}>
<ConditionallyRender condition={isEnterprise}
show={<EnvironmentMetricComponent />}
elseShow={<MetricComponent featureToggle={feature} />}
/>
</div>
<>
<PageContent headerContent="Environment metrics">
<div className={styles.environmentContainer}>
{metricComponents}
</div>
</PageContent>
<PageContent
headerContent="Applications"
className={styles.secondaryContent}
>
<div className={styles.applicationsContainer}>
<FeatureSeenApplications />
</div>
</PageContent>
</>
);
};