From 1195cd84ca4ddc98f99a0e5bdfb4dedc9c3ff617 Mon Sep 17 00:00:00 2001 From: sveisvei Date: Wed, 14 Dec 2016 12:45:34 +0100 Subject: [PATCH] minor cleanup of tabs --- .../component/feature/view-edit-container.jsx | 117 ++++++++++-------- 1 file changed, 65 insertions(+), 52 deletions(-) diff --git a/frontend/src/component/feature/view-edit-container.jsx b/frontend/src/component/feature/view-edit-container.jsx index 75c66aa7d6..96781327d2 100644 --- a/frontend/src/component/feature/view-edit-container.jsx +++ b/frontend/src/component/feature/view-edit-container.jsx @@ -13,6 +13,62 @@ import { fetchHistoryForToggle } from '../../store/history-actions'; import { AppsLinkList, SwitchWithLabel, getIcon } from '../common'; + +const MetricTab = ({ metrics, featureToggle, toggleFeature }) => { + const { + lastHour = { yes: 0, no: 0, isFallback: true }, + lastMinute = { yes: 0, no: 0, isFallback: true }, + seenApps = [], + } = metrics; + + const lastHourPercent = 1 * percentLib.calc(lastHour.yes, lastHour.yes + lastHour.no, 0); + const lastMinutePercent = 1 * percentLib.calc(lastMinute.yes, lastMinute.yes + lastMinute.no, 0); + + return (
+ toggleFeature(featureToggle)}>Toggle {featureToggle.name} +
+ + + { + lastMinute.isFallback ? + : +
+ +
+ } +

Last minute
Yes {lastMinute.yes}, No: {lastMinute.no}

+
+ + { + lastHour.isFallback ? + : +
+ +
+ } +

Last hour
Yes {lastHour.yes}, No: {lastHour.no}

+
+ + {seenApps.length > 0 ? + (
Seen in applications:
) : +
+ +
Not used in a app in the last hour. + This might be due to your client implementation is not reporting usage.
+
+ } + +
+
+
); + +}; + class EditFeatureToggleWrapper extends React.Component { constructor (props) { @@ -54,15 +110,6 @@ class EditFeatureToggleWrapper extends React.Component { metrics = {}, } = this.props; - const { - lastHour = { yes: 0, no: 0, isFallback: true }, - lastMinute = { yes: 0, no: 0, isFallback: true }, - seenApps = [], - } = metrics; - - const lastHourPercent = 1 * percentLib.calc(lastHour.yes, lastHour.yes + lastHour.no, 0); - const lastMinutePercent = 1 * percentLib.calc(lastMinute.yes, lastMinute.yes + lastMinute.no, 0); - const featureToggle = features.find(toggle => toggle.name === featureToggleName); if (!featureToggle) { @@ -72,48 +119,13 @@ class EditFeatureToggleWrapper extends React.Component { return Could not find the toggle "{this.props.featureToggleName}"; } - const content = this.state.activeTab === 0 ? ( -
- toggleFeature(featureToggle)}>Toggle {featureToggle.name} -
- - - { - lastMinute.isFallback ? - : -
- -
- } -

Last minute
Yes {lastMinute.yes}, No: {lastMinute.no}

-
- - { - lastHour.isFallback ? - : -
- -
- } -

Last hour
Yes {lastHour.yes}, No: {lastHour.no}

-
- - {seenApps.length > 0 ? - (
Seen in applications:
) : -
- -
Not used in a app in the last hour. This might be due to your client implementation is not reporting usage.
-
- } - -
-
-
- ) : this.state.activeTab === 1 ? ( - - ) : ( + let tabContent; + if (this.state.activeTab === 0) { + tabContent = ; + } else if (this.state.activeTab === 1) { + tabContent = ; + } else { + tabContent = (
{history.map(({ createdAt, type, createdBy }, i) => @@ -128,6 +140,7 @@ class EditFeatureToggleWrapper extends React.Component {
); + } return (
@@ -142,7 +155,7 @@ class EditFeatureToggleWrapper extends React.Component { History - {content} + {tabContent}
); }