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

feat: update metrics view in the accordion footer

Browse Source
This commit is contained in:
Youssef 2021-12-22 12:52:38 +01:00
parent dde140c0d1
commit 12128e9e33
5 changed files with 68 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts
View File

@ -70,8 +70,8 @@ export const useStyles = makeStyles(theme => ({
alignItems: 'center', alignItems: 'center',
}, },
percentageContainer: { percentageContainer: {
width: '50px', width: '90px',
height: '50px', height: '90px',
border: `2px solid ${theme.palette.primary.light}`, border: `2px solid ${theme.palette.primary.light}`,
borderRadius: '50%', borderRadius: '50%',
display: 'flex', display: 'flex',
@ -95,6 +95,7 @@ export const useStyles = makeStyles(theme => ({
requestText: { requestText: {
textAlign: 'center', textAlign: 'center',
marginTop: '1rem', marginTop: '1rem',
fontSize: theme.fontSizes.smallBody,
}, },
linkContainer: { linkContainer: {
display: 'flex', display: 'flex',
@ -135,6 +136,9 @@ export const useStyles = makeStyles(theme => ({
truncator: { truncator: {
textAlign: 'center', textAlign: 'center',
}, },
resultContainer: {
flexWrap: 'wrap',
},
}, },
[theme.breakpoints.down(400)]: { [theme.breakpoints.down(400)]: {
accordionHeader: { accordionHeader: {
@ -145,4 +149,20 @@ export const useStyles = makeStyles(theme => ({
padding: '0.5rem', padding: '0.5rem',
}, },
}, },
resultContainer: {
display: 'flex',
width: '100%',
justifyContent: 'space-around',
},
dataContainer: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
padding: '0px 15px',
},
resultTitle: {
color: theme.palette.primary.main,
},
})); }));

66
frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentFooter/FeatureOverviewEnvironmentFooter.tsx
View File

@ -1,12 +1,8 @@
import { Warning } from '@material-ui/icons';
import { import {
IFeatureEnvironment, IFeatureEnvironment,
IFeatureEnvironmentMetrics, IFeatureEnvironmentMetrics,
} from '../../../../../../../interfaces/featureToggle'; } from '../../../../../../../interfaces/featureToggle';
import { calculatePercentage } from '../../../../../../../utils/calculate-percentage'; import { calculatePercentage } from '../../../../../../../utils/calculate-percentage';
import ConditionallyRender from '../../../../../../common/ConditionallyRender';
import FeatureEnvironmentMetrics from '../../../FeatureEnvironmentMetrics/FeatureEnvironmentMetrics';
import { useStyles } from '../FeatureOverviewEnvironment.styles'; import { useStyles } from '../FeatureOverviewEnvironment.styles';
interface IFeatureOverviewEnvironmentFooterProps { interface IFeatureOverviewEnvironmentFooterProps {
@ -32,37 +28,41 @@ const FeatureOverviewEnvironmentFooter = ({
</div> </div>
<div className={styles.accordionBodyFooter}> <div className={styles.accordionBodyFooter}>
<ConditionallyRender <div className={styles.resultContainer}>
condition={env.enabled} <div className={styles.dataContainer}>
show={ <h3 className={styles.resultTitle}>Exposure</h3>
<FeatureEnvironmentMetrics metric={environmentMetric} /> <div className={styles.percentageContainer}>
} {environmentMetric?.yes}
elseShow={
<div className={styles.disabledInfo}>
<Warning className={styles.disabledIcon} />
<p>
As long as the environment is disabled, all
requests made for this feature toggle will
return false. Add a strategy and turn on the
environment to enable it for your users.
</p>
</div> </div>
} <p className={styles.requestText}>
/> Total exposure of the feature in the environment in
the last hour
<div className={styles.requestContainer}> </p>
Total requests {totalTraffic} </div>
<div className={styles.percentageContainer}> <div className={styles.dataContainer}>
{calculatePercentage( <h3 className={styles.resultTitle}>% exposure</h3>
totalTraffic, <div className={styles.percentageContainer}>
environmentMetric?.yes {calculatePercentage(
)} totalTraffic,
% environmentMetric?.yes
)}
%
</div>
<p className={styles.requestText}>
Total exposure of the feature in the environment in
the last hour
</p>
</div>
<div className={styles.dataContainer}>
<h3 className={styles.resultTitle}>Total requests</h3>
<div className={styles.percentageContainer}>
{environmentMetric?.yes + environmentMetric?.no}
</div>
<p className={styles.requestText}>
The total request of the feature in the environment
in the last hour
</p>
</div> </div>
<p className={styles.requestText}>
Received enabled for this feature in this environment in
the last hour.
</p>
</div> </div>
</div> </div>
</> </>

9
frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.styles.ts
View File

@ -17,15 +17,18 @@ export const useStyles = makeStyles(theme => ({
width: '75px', width: '75px',
}, },
infoParagraph: { infoParagraph: {
maxWidth: '150px', maxWidth: '215px',
marginTop: '0.25rem', marginTop: '0.25rem',
fontSize: theme.fontSizes.smallBody, fontSize: theme.fontSizes.smallBody,
}, },
percentage: { percentage: {
color: theme.palette.primary.light, color: theme.palette.primary.light,
textAlign: 'center', textAlign: 'right',
fontSize: theme.fontSizes.subHeader, fontSize: theme.fontSizes.subHeader,
}, },
percentageCircle: {
transform: 'scale(0.85)',
},
[theme.breakpoints.down(700)]: { [theme.breakpoints.down(700)]: {
infoParagraph: { infoParagraph: {
display: 'none', display: 'none',
@ -35,8 +38,6 @@ export const useStyles = makeStyles(theme => ({
icon: { icon: {
display: 'none', display: 'none',
}, },
},
[theme.breakpoints.down(400)]: {
percentageCircle: { percentageCircle: {
display: 'none', display: 'none',
}, },

9
frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx
View File

@ -27,7 +27,8 @@ const FeatureOverviewEnvironmentMetrics = ({
{percentage}% {percentage}%
</p> </p>
<p className={styles.infoParagraph} data-loading> <p className={styles.infoParagraph} data-loading>
No one has received this feature in the last hour. The feature has been requested <b>0 times</b> and
exposed<b> 0 times</b> in the last hour
</p> </p>
</div> </div>
<FiberManualRecord <FiberManualRecord
@ -44,8 +45,10 @@ const FeatureOverviewEnvironmentMetrics = ({
<div className={styles.info}> <div className={styles.info}>
<p className={styles.percentage}>{percentage}%</p> <p className={styles.percentage}>{percentage}%</p>
<p className={styles.infoParagraph}> <p className={styles.infoParagraph}>
{environmentMetric.yes} users have received the feature in The feature has been requested{' '}
the last hour. <b>{environmentMetric.yes + environmentMetric.no} times</b>{' '}
and exposed <b>{environmentMetric.yes} times</b> in the last
hour
</p> </p>
</div> </div>
<PercentageCircle <PercentageCircle

5
frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategyExecution/FeatureStrategyExecution.tsx
View File

@ -63,7 +63,7 @@ const FeatureStrategyExecution = ({
return ( return (
<Fragment key={key}> <Fragment key={key}>
<p className={styles.text}> <p className={styles.text}>
{parameters[key]}% of your user base{' '} {parameters[key]}% of your base{' '}
{constraints.length > 0 {constraints.length > 0
? 'who match constraints' ? 'who match constraints'
: ''}{' '} : ''}{' '}
@ -146,8 +146,7 @@ const FeatureStrategyExecution = ({
return ( return (
<Fragment key={param?.name}> <Fragment key={param?.name}>
<p className={styles.text}> <p className={styles.text}>
{strategy?.parameters[param.name]}% of your user {strategy?.parameters[param.name]}% of your base{' '}
base{' '}
{constraints?.length > 0 {constraints?.length > 0
? 'who match constraints' ? 'who match constraints'
: ''}{' '} : ''}{' '}