Resolving conflict
This commit is contained in:
commit
894189e890
56
frontend/src/components/metrics-row/index.js
Normal file
56
frontend/src/components/metrics-row/index.js
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
const React = require('react');
|
||||||
|
const Styled = require('styled-components');
|
||||||
|
|
||||||
|
const Column = require('@ui/components/column');
|
||||||
|
const MiniMetric = require('@ui/components/mini-metric');
|
||||||
|
const PropTypes = require('@root/prop-types');
|
||||||
|
const Row = require('@ui/components/row');
|
||||||
|
|
||||||
|
const {
|
||||||
|
default: styled
|
||||||
|
} = Styled;
|
||||||
|
|
||||||
|
const {
|
||||||
|
MiniMetricGraph,
|
||||||
|
MiniMetricMeta,
|
||||||
|
MiniMetricTitle,
|
||||||
|
MiniMetricSubtitle,
|
||||||
|
MiniMetricView
|
||||||
|
} = MiniMetric;
|
||||||
|
|
||||||
|
const StyledRow = styled(Row)`
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const MetricsRow = ({
|
||||||
|
datasets = []
|
||||||
|
}) => {
|
||||||
|
const _datasets = datasets.map((metric, i) => (
|
||||||
|
<Column key={i} xs={4}>
|
||||||
|
<MiniMetricView borderless>
|
||||||
|
<MiniMetricMeta>
|
||||||
|
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
||||||
|
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
||||||
|
</MiniMetricMeta>
|
||||||
|
<MiniMetricGraph data={metric.data} />
|
||||||
|
</MiniMetricView>
|
||||||
|
</Column>
|
||||||
|
));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StyledRow>
|
||||||
|
{_datasets}
|
||||||
|
</StyledRow>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
MetricsRow.propTypes = {
|
||||||
|
datasets: React.PropTypes.arrayOf(PropTypes.dataset)
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = MetricsRow;
|
@ -1,8 +1,10 @@
|
|||||||
|
const forceArray = require('force-array');
|
||||||
const React = require('react');
|
const React = require('react');
|
||||||
const ReactRouter = require('react-router');
|
const ReactRouter = require('react-router');
|
||||||
|
|
||||||
const Anchor = require('@ui/components/anchor');
|
const Anchor = require('@ui/components/anchor');
|
||||||
const List = require('@ui/components/list');
|
const List = require('@ui/components/list');
|
||||||
|
const MetricsRow = require('@components/metrics-row');
|
||||||
const PropTypes = require('@root/prop-types');
|
const PropTypes = require('@root/prop-types');
|
||||||
|
|
||||||
const {
|
const {
|
||||||
@ -27,49 +29,22 @@ const ServiceItem = ({
|
|||||||
project = '',
|
project = '',
|
||||||
service = {}
|
service = {}
|
||||||
}) => {
|
}) => {
|
||||||
const to = `/${org}/projects/${project}/services/${service.id}`;
|
const isChild = !!service.parent;
|
||||||
|
|
||||||
const childs = service.services.map((service) => (
|
const childs = forceArray(service.services).map((service) => (
|
||||||
<ListItem
|
<ServiceItem
|
||||||
collapsed={service.collapsed}
|
|
||||||
flat
|
|
||||||
key={service.uuid}
|
key={service.uuid}
|
||||||
stacked={service.instances > 1}
|
org={org}
|
||||||
>
|
project={project}
|
||||||
<ListItemView>
|
service={service}
|
||||||
<ListItemMeta>
|
/>
|
||||||
<ListItemTitle>{service.name}</ListItemTitle>
|
|
||||||
<ListItemSubTitle>{service.instances} instances</ListItemSubTitle>
|
|
||||||
</ListItemMeta>
|
|
||||||
<ListItemOutlet>
|
|
||||||
Metrics
|
|
||||||
</ListItemOutlet>
|
|
||||||
</ListItemView>
|
|
||||||
</ListItem>
|
|
||||||
));
|
));
|
||||||
|
|
||||||
const view = childs.length ? (
|
const to = `/${org}/projects/${project}/services/${service.id}`;
|
||||||
<ListItemGroupView>
|
|
||||||
{childs}
|
|
||||||
</ListItemGroupView>
|
|
||||||
) : (
|
|
||||||
<ListItemView>
|
|
||||||
<ListItemMeta>
|
|
||||||
<ListItemDescription>Flags</ListItemDescription>
|
|
||||||
</ListItemMeta>
|
|
||||||
<ListItemOutlet>
|
|
||||||
Metrics
|
|
||||||
</ListItemOutlet>
|
|
||||||
</ListItemView>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
const title = isChild ? (
|
||||||
<ListItem
|
<ListItemTitle>{service.name}</ListItemTitle>
|
||||||
collapsed={service.collapsed}
|
) : (
|
||||||
headed
|
|
||||||
>
|
|
||||||
<ListItemHeader>
|
|
||||||
<ListItemMeta>
|
|
||||||
<ListItemTitle>
|
<ListItemTitle>
|
||||||
<Link to={to}>
|
<Link to={to}>
|
||||||
{Anchor.fn(
|
{Anchor.fn(
|
||||||
@ -79,10 +54,53 @@ const ServiceItem = ({
|
|||||||
)}
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
</ListItemTitle>
|
</ListItemTitle>
|
||||||
<ListItemSubTitle>{service.instances} instance</ListItemSubTitle>
|
);
|
||||||
|
|
||||||
|
const subtitle = (
|
||||||
|
<ListItemSubTitle>{service.instances} instances</ListItemSubTitle>
|
||||||
|
);
|
||||||
|
|
||||||
|
const description = (
|
||||||
|
<ListItemDescription>Flags</ListItemDescription>
|
||||||
|
);
|
||||||
|
|
||||||
|
const header = isChild ? null : (
|
||||||
|
<ListItemHeader>
|
||||||
|
<ListItemMeta>
|
||||||
|
{title}
|
||||||
|
{subtitle}
|
||||||
|
{description}
|
||||||
</ListItemMeta>
|
</ListItemMeta>
|
||||||
<ListItemOptions>…</ListItemOptions>
|
<ListItemOptions>…</ListItemOptions>
|
||||||
</ListItemHeader>
|
</ListItemHeader>
|
||||||
|
);
|
||||||
|
|
||||||
|
const view = childs.length ? (
|
||||||
|
<ListItemGroupView>
|
||||||
|
{childs}
|
||||||
|
</ListItemGroupView>
|
||||||
|
) : (
|
||||||
|
<ListItemView>
|
||||||
|
<ListItemMeta>
|
||||||
|
{isChild && title}
|
||||||
|
{isChild && subtitle}
|
||||||
|
{description}
|
||||||
|
</ListItemMeta>
|
||||||
|
<ListItemOutlet>
|
||||||
|
<MetricsRow metrics={service.metrics} />
|
||||||
|
</ListItemOutlet>
|
||||||
|
</ListItemView>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ListItem
|
||||||
|
collapsed={service.collapsed}
|
||||||
|
flat={isChild}
|
||||||
|
headed={!isChild}
|
||||||
|
key={service.uuid}
|
||||||
|
stacked={isChild && (service.instances > 1)}
|
||||||
|
>
|
||||||
|
{header}
|
||||||
{view}
|
{view}
|
||||||
</ListItem>
|
</ListItem>
|
||||||
);
|
);
|
||||||
|
@ -24,7 +24,7 @@ const AddMetrics = ({
|
|||||||
const added = (metric) =>
|
const added = (metric) =>
|
||||||
Boolean(metrics.filter((m) => m.id === metric).length);
|
Boolean(metrics.filter((m) => m.id === metric).length);
|
||||||
const addButton = (metric) => (
|
const addButton = (metric) => (
|
||||||
<AddMetricButton onClick={onAddMetric(metric)}>
|
<AddMetricButton metric={metric} onClick={onAddMetric}>
|
||||||
<FormattedMessage id={'metrics.add.add-label'} onClick={onAddMetric} />
|
<FormattedMessage id={'metrics.add.add-label'} onClick={onAddMetric} />
|
||||||
</AddMetricButton>
|
</AddMetricButton>
|
||||||
);
|
);
|
||||||
|
@ -1,11 +1,17 @@
|
|||||||
const React = require('react');
|
const React = require('react');
|
||||||
const ReactRedux = require('react-redux');
|
const ReactRedux = require('react-redux');
|
||||||
|
|
||||||
|
const actions = require('@state/actions');
|
||||||
const EmptyInstances = require('@components/empty/instances');
|
const EmptyInstances = require('@components/empty/instances');
|
||||||
const PropTypes = require('@root/prop-types');
|
const PropTypes = require('@root/prop-types');
|
||||||
const List = require('@ui/components/list');
|
const List = require('@ui/components/list');
|
||||||
|
const DatasetsRow = require('@components/metrics-row');
|
||||||
const selectors = require('@state/selectors');
|
const selectors = require('@state/selectors');
|
||||||
|
|
||||||
|
const {
|
||||||
|
toggleInstanceCollapsed
|
||||||
|
} = actions;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
connect
|
connect
|
||||||
} = ReactRedux;
|
} = ReactRedux;
|
||||||
@ -19,22 +25,29 @@ const {
|
|||||||
ListItemView,
|
ListItemView,
|
||||||
ListItemMeta,
|
ListItemMeta,
|
||||||
ListItemTitle,
|
ListItemTitle,
|
||||||
ListItemOptions
|
ListItemOptions,
|
||||||
|
ListItemOutlet
|
||||||
} = List;
|
} = List;
|
||||||
|
|
||||||
const Instances = ({
|
const Instances = ({
|
||||||
instances = []
|
instances = [],
|
||||||
|
toggleCollapsed = () => null
|
||||||
}) => {
|
}) => {
|
||||||
|
const onClick = (uuid) => () => toggleCollapsed(uuid);
|
||||||
|
|
||||||
const empty = instances.length ? null : (
|
const empty = instances.length ? null : (
|
||||||
<EmptyInstances />
|
<EmptyInstances />
|
||||||
);
|
);
|
||||||
|
|
||||||
const instanceList = instances.map((service) => (
|
const instanceList = instances.map((instance) => (
|
||||||
<ListItem collapsed key={service.uuid}>
|
<ListItem collapsed={!instance.collapsed} key={instance.uuid} >
|
||||||
<ListItemView>
|
<ListItemView>
|
||||||
<ListItemMeta>
|
<ListItemMeta onClick={onClick(instance.uuid)}>
|
||||||
<ListItemTitle>{service.name}</ListItemTitle>
|
<ListItemTitle>{instance.name}</ListItemTitle>
|
||||||
</ListItemMeta>
|
</ListItemMeta>
|
||||||
|
<ListItemOutlet>
|
||||||
|
<DatasetsRow metrics={instance.metrics} />
|
||||||
|
</ListItemOutlet>
|
||||||
</ListItemView>
|
</ListItemView>
|
||||||
<ListItemOptions>
|
<ListItemOptions>
|
||||||
…
|
…
|
||||||
@ -51,7 +64,8 @@ const Instances = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
Instances.propTypes = {
|
Instances.propTypes = {
|
||||||
instances: React.PropTypes.arrayOf(PropTypes.instance)
|
instances: React.PropTypes.arrayOf(PropTypes.instance),
|
||||||
|
toggleCollapsed: React.PropTypes.func
|
||||||
};
|
};
|
||||||
|
|
||||||
const mapStateToProps = (state, {
|
const mapStateToProps = (state, {
|
||||||
@ -60,6 +74,11 @@ const mapStateToProps = (state, {
|
|||||||
instances: instancesByServiceIdSelector(params.serviceId)(state)
|
instances: instancesByServiceIdSelector(params.serviceId)(state)
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const mapDispatchToProps = (dispatch) => ({
|
||||||
|
toggleCollapsed: (uuid) => dispatch(toggleInstanceCollapsed(uuid))
|
||||||
|
});
|
||||||
|
|
||||||
module.exports = connect(
|
module.exports = connect(
|
||||||
mapStateToProps
|
mapStateToProps,
|
||||||
|
mapDispatchToProps
|
||||||
)(Instances);
|
)(Instances);
|
||||||
|
@ -65,19 +65,129 @@
|
|||||||
"time_of_day"
|
"time_of_day"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"data": [{
|
"data": {
|
||||||
|
"types": [{
|
||||||
"uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d4",
|
"uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d4",
|
||||||
"id": "cpu_agg_usage",
|
"id": "agg-cpu-usage"
|
||||||
"service": "081a792c-47e0-4439-924b-2efa9788ae9e"
|
|
||||||
}, {
|
}, {
|
||||||
"uuid": "9e77b50e-42d7-425d-8daf-c0e98e2bdd6a",
|
"uuid": "9e77b50e-42d7-425d-8daf-c0e98e2bdd6a",
|
||||||
"id": "zfs_used",
|
"id": "mem-res-set-size"
|
||||||
"service": "081a792c-47e0-4439-924b-2efa9788ae9e"
|
|
||||||
}, {
|
}, {
|
||||||
"uuid": "347dbdc7-15e3-4e12-8dfb-865d38526e14",
|
"uuid": "347dbdc7-15e3-4e12-8dfb-865d38526e14",
|
||||||
"id": "mem_limit",
|
"id": "apache-http-reqs"
|
||||||
"service": "081a792c-47e0-4439-924b-2efa9788ae9e"
|
}, {
|
||||||
|
"uuid": "2aaa237d-42b3-442f-9094-a17aa470014b",
|
||||||
|
"name": "Memory",
|
||||||
|
"id": "memory"
|
||||||
|
}],
|
||||||
|
"datasets": [{
|
||||||
|
"type": "2aaa237d-42b3-442f-9094-a17aa470014b",
|
||||||
|
"uuid": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"data": [{
|
||||||
|
"firstQuartile": 15,
|
||||||
|
"thirdQuartile": 15,
|
||||||
|
"median": 15,
|
||||||
|
"max": 15,
|
||||||
|
"min": 15
|
||||||
|
}, {
|
||||||
|
"firstQuartile": 26,
|
||||||
|
"thirdQuartile": 26,
|
||||||
|
"median": 26,
|
||||||
|
"max": 26,
|
||||||
|
"min": 26
|
||||||
|
}, {
|
||||||
|
"firstQuartile": 17,
|
||||||
|
"thirdQuartile": 17,
|
||||||
|
"median": 17,
|
||||||
|
"max": 17,
|
||||||
|
"min": 17
|
||||||
|
}, {
|
||||||
|
"firstQuartile": 15,
|
||||||
|
"thirdQuartile": 25,
|
||||||
|
"median": 19,
|
||||||
|
"max": 19,
|
||||||
|
"min": 20
|
||||||
|
}, {
|
||||||
|
"firstQuartile": 19,
|
||||||
|
"thirdQuartile": 25,
|
||||||
|
"median": 21,
|
||||||
|
"max": 20,
|
||||||
|
"min": 25
|
||||||
|
}, {
|
||||||
|
"firstQuartile": 24,
|
||||||
|
"thirdQuartile": 30,
|
||||||
|
"median": 25,
|
||||||
|
"max": 26,
|
||||||
|
"min": 27
|
||||||
|
}, {
|
||||||
|
"firstQuartile": 28,
|
||||||
|
"thirdQuartile": 34,
|
||||||
|
"median": 30,
|
||||||
|
"max": 30,
|
||||||
|
"min": 30
|
||||||
|
}, {
|
||||||
|
"firstQuartile": 30,
|
||||||
|
"thirdQuartile": 45,
|
||||||
|
"median": 35,
|
||||||
|
"max": 40,
|
||||||
|
"min": 40
|
||||||
|
}, {
|
||||||
|
"firstQuartile": 20,
|
||||||
|
"thirdQuartile": 55,
|
||||||
|
"median": 45,
|
||||||
|
"max": 44,
|
||||||
|
"min": 44
|
||||||
|
}, {
|
||||||
|
"firstQuartile": 55,
|
||||||
|
"thirdQuartile": 55,
|
||||||
|
"median": 55,
|
||||||
|
"max": 55,
|
||||||
|
"min": 55
|
||||||
|
}, {
|
||||||
|
"firstQuartile": 57,
|
||||||
|
"thirdQuartile": 56,
|
||||||
|
"median": 57,
|
||||||
|
"max": 58,
|
||||||
|
"min": 57
|
||||||
|
}, {
|
||||||
|
"firstQuartile": 57,
|
||||||
|
"thirdQuartile": 56,
|
||||||
|
"median": 56,
|
||||||
|
"max": 56,
|
||||||
|
"min": 56
|
||||||
|
}, {
|
||||||
|
"firstQuartile": 60,
|
||||||
|
"thirdQuartile": 56,
|
||||||
|
"median": 60,
|
||||||
|
"max": 60,
|
||||||
|
"min": 60
|
||||||
|
}, {
|
||||||
|
"firstQuartile": 57,
|
||||||
|
"thirdQuartile": 57,
|
||||||
|
"median": 57,
|
||||||
|
"max": 57,
|
||||||
|
"min": 57
|
||||||
|
}, {
|
||||||
|
"firstQuartile": 57,
|
||||||
|
"thirdQuartile": 55,
|
||||||
|
"median": 55,
|
||||||
|
"max": 55,
|
||||||
|
"min": 55
|
||||||
|
}, {
|
||||||
|
"firstQuartile": 20,
|
||||||
|
"thirdQuartile": 45,
|
||||||
|
"median": 45,
|
||||||
|
"max": 45,
|
||||||
|
"min": 45
|
||||||
|
}, {
|
||||||
|
"firstQuartile": 15,
|
||||||
|
"thirdQuartile": 40,
|
||||||
|
"median": 30,
|
||||||
|
"max": 49,
|
||||||
|
"min": 30
|
||||||
}]
|
}]
|
||||||
|
}]
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"orgs": {
|
"orgs": {
|
||||||
"ui": {
|
"ui": {
|
||||||
@ -180,120 +290,218 @@
|
|||||||
"id": "nginx",
|
"id": "nginx",
|
||||||
"name": "Nginx",
|
"name": "Nginx",
|
||||||
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
||||||
"instances": 1
|
"instances": 1,
|
||||||
|
"metrics": [
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
|
||||||
|
]
|
||||||
}, {
|
}, {
|
||||||
"uuid": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
|
"uuid": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
|
||||||
"id": "wordpress",
|
"id": "wordpress",
|
||||||
"name": "Wordpress",
|
"name": "Wordpress",
|
||||||
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
||||||
"instances": 1
|
"instances": 1,
|
||||||
|
"metrics": [
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
|
||||||
|
]
|
||||||
}, {
|
}, {
|
||||||
"uuid": "6a0eee76-c019-413b-9d5f-44712b55b993",
|
"uuid": "6a0eee76-c019-413b-9d5f-44712b55b993",
|
||||||
"id": "nfs",
|
"id": "nfs",
|
||||||
"name": "NFS",
|
"name": "NFS",
|
||||||
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
||||||
"instances": 1
|
"instances": 1,
|
||||||
|
"metrics": [
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
|
||||||
|
]
|
||||||
}, {
|
}, {
|
||||||
"uuid": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
|
"uuid": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
|
||||||
"id": "memcached",
|
"id": "memcached",
|
||||||
"name": "Memcached",
|
"name": "Memcached",
|
||||||
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
||||||
"instances": 1
|
"instances": 5,
|
||||||
|
"metrics": [
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
|
||||||
|
]
|
||||||
}, {
|
}, {
|
||||||
"uuid": "4ee4103e-1a52-4099-a48e-01588f597c70",
|
"uuid": "4ee4103e-1a52-4099-a48e-01588f597c70",
|
||||||
"id": "percona",
|
"id": "percona",
|
||||||
"name": "Percona",
|
"name": "Percona",
|
||||||
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
||||||
"instances": 5
|
"instances": 5,
|
||||||
|
"metrics": [
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
|
||||||
|
]
|
||||||
}, {
|
}, {
|
||||||
"uuid": "9572d367-c4ae-4fb1-8ad5-f5e3830e7034",
|
"uuid": "9572d367-c4ae-4fb1-8ad5-f5e3830e7034",
|
||||||
"id": "primary",
|
"id": "primary",
|
||||||
"name": "Primary",
|
"name": "Primary",
|
||||||
"parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
|
"parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
|
||||||
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
||||||
"instances": 1
|
"instances": 1,
|
||||||
|
"metrics": [
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
|
||||||
|
]
|
||||||
}, {
|
}, {
|
||||||
"uuid": "c8411ef0-ab39-42cb-a704-d20b170eff31",
|
"uuid": "c8411ef0-ab39-42cb-a704-d20b170eff31",
|
||||||
"id": "secondaries",
|
"id": "secondaries",
|
||||||
"name": "Secondaries",
|
"name": "Secondaries",
|
||||||
"parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
|
"parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
|
||||||
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
||||||
"instances": 4
|
"instances": 4,
|
||||||
|
"metrics": [
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
|
||||||
|
]
|
||||||
}, {
|
}, {
|
||||||
"uuid": "97c68055-db88-45c9-ad49-f26da4264777",
|
"uuid": "97c68055-db88-45c9-ad49-f26da4264777",
|
||||||
"id": "consul",
|
"id": "consul",
|
||||||
"name": "Consul",
|
"name": "Consul",
|
||||||
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
||||||
"instances": 1
|
"instances": 1,
|
||||||
|
"metrics": [
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
|
||||||
|
]
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
"instances": {
|
"instances": {
|
||||||
|
"ui": {
|
||||||
|
"collapsed": []
|
||||||
|
},
|
||||||
"data": [{
|
"data": [{
|
||||||
"uuid": "309ecd9f-ac03-474b-aff7-4bd2e743296c",
|
"uuid": "309ecd9f-ac03-474b-aff7-4bd2e743296c",
|
||||||
"name": "wordpress_01",
|
"name": "wordpress_01",
|
||||||
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
|
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
|
||||||
"service": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
|
"service": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
|
||||||
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
|
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
||||||
|
"metrics": [
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
|
||||||
|
]
|
||||||
}, {
|
}, {
|
||||||
"uuid": "0db6db53-de6f-4378-839e-5d5b452fbaf2",
|
"uuid": "0db6db53-de6f-4378-839e-5d5b452fbaf2",
|
||||||
"name": "nfs_01",
|
"name": "nfs_01",
|
||||||
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
|
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
|
||||||
"service": "6a0eee76-c019-413b-9d5f-44712b55b993",
|
"service": "6a0eee76-c019-413b-9d5f-44712b55b993",
|
||||||
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
|
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
||||||
|
"metrics": [
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
|
||||||
|
]
|
||||||
}, {
|
}, {
|
||||||
"uuid": "250c8a6c-7d02-49a9-8abd-e1c22773041d",
|
"uuid": "250c8a6c-7d02-49a9-8abd-e1c22773041d",
|
||||||
"name": "consul",
|
"name": "consul",
|
||||||
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
|
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
|
||||||
"service": "97c68055-db88-45c9-ad49-f26da4264777",
|
"service": "97c68055-db88-45c9-ad49-f26da4264777",
|
||||||
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
|
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
||||||
|
"metrics": [
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
|
||||||
|
]
|
||||||
}, {
|
}, {
|
||||||
"uuid": "2c921f3a-8bc3-4f57-9cd7-789ebae72061",
|
"uuid": "2c921f3a-8bc3-4f57-9cd7-789ebae72061",
|
||||||
"name": "memcache_01",
|
"name": "memcache_01",
|
||||||
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
|
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
|
||||||
"service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
|
"service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
|
||||||
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
|
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
||||||
|
"metrics": [
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
|
||||||
|
]
|
||||||
}, {
|
}, {
|
||||||
"uuid": "68d3046e-8e34-4f5d-a0e5-db3795a250fd",
|
"uuid": "68d3046e-8e34-4f5d-a0e5-db3795a250fd",
|
||||||
"name": "memcache_02",
|
"name": "memcache_02",
|
||||||
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
|
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
|
||||||
"service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
|
"service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
|
||||||
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
|
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
||||||
|
"metrics": [
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
|
||||||
|
]
|
||||||
}, {
|
}, {
|
||||||
"uuid": "2ea99763-3b44-4179-8393-d66d94961051",
|
"uuid": "2ea99763-3b44-4179-8393-d66d94961051",
|
||||||
"name": "memcache_03",
|
"name": "memcache_03",
|
||||||
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
|
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
|
||||||
"service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
|
"service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
|
||||||
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
|
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
||||||
|
"metrics": [
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
|
||||||
|
]
|
||||||
}, {
|
}, {
|
||||||
"uuid": "25f6bc62-63b8-4959-908e-1f6d7ff6341d",
|
"uuid": "25f6bc62-63b8-4959-908e-1f6d7ff6341d",
|
||||||
"name": "memcache_04",
|
"name": "memcache_04",
|
||||||
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
|
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
|
||||||
"service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
|
"service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
|
||||||
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
|
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
||||||
|
"metrics": [
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
|
||||||
|
]
|
||||||
}, {
|
}, {
|
||||||
"uuid": "8be01042-0281-4a77-a357-25979e87bf3d",
|
"uuid": "8be01042-0281-4a77-a357-25979e87bf3d",
|
||||||
"name": "memcache_05",
|
"name": "memcache_05",
|
||||||
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
|
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
|
||||||
"service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
|
"service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
|
||||||
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
|
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
||||||
|
"metrics": [
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
|
||||||
|
]
|
||||||
}, {
|
}, {
|
||||||
"uuid": "3d652e9d-73e8-4a6f-8171-84fa83740662",
|
"uuid": "3d652e9d-73e8-4a6f-8171-84fa83740662",
|
||||||
"name": "nginx",
|
"name": "nginx",
|
||||||
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
|
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
|
||||||
"service": "081a792c-47e0-4439-924b-2efa9788ae9e",
|
"service": "081a792c-47e0-4439-924b-2efa9788ae9e",
|
||||||
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
|
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
||||||
|
"metrics": [
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
|
||||||
|
]
|
||||||
}, {
|
}, {
|
||||||
"uuid": "c3ec7633-a02b-4615-86a0-9e6faeaae94b",
|
"uuid": "c3ec7633-a02b-4615-86a0-9e6faeaae94b",
|
||||||
"name": "percona-primary",
|
"name": "percona-primary",
|
||||||
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
|
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
|
||||||
"service": "9572d367-c4ae-4fb1-8ad5-f5e3830e7034",
|
"service": "4ee4103e-1a52-4099-a48e-01588f597c70",
|
||||||
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
|
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
||||||
|
"metrics": [
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
|
||||||
|
]
|
||||||
}, {
|
}, {
|
||||||
"uuid": "c2b5fec2-31e2-41a7-b7fc-cd0bb1822e76",
|
"uuid": "c2b5fec2-31e2-41a7-b7fc-cd0bb1822e76",
|
||||||
"name": "percona-secundary",
|
"name": "percona-secundary",
|
||||||
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
|
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
|
||||||
"service": "c8411ef0-ab39-42cb-a704-d20b170eff31",
|
"service": "4ee4103e-1a52-4099-a48e-01588f597c70",
|
||||||
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
|
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
|
||||||
|
"metrics": [
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
|
||||||
|
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
|
||||||
|
]
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -39,6 +39,20 @@ const Metric = React.PropTypes.shape({
|
|||||||
...BaseObject
|
...BaseObject
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const Dataset = React.PropTypes.shape({
|
||||||
|
uuid: React.PropTypes.string,
|
||||||
|
type: React.PropTypes.string,
|
||||||
|
data: React.PropTypes.arrayOf(
|
||||||
|
React.PropTypes.shape({
|
||||||
|
firstQuartile: React.PropTypes.string,
|
||||||
|
thirdQuartile: React.PropTypes.string,
|
||||||
|
median: React.PropTypes.string,
|
||||||
|
max: React.PropTypes.string,
|
||||||
|
min: React.PropTypes.string
|
||||||
|
})
|
||||||
|
)
|
||||||
|
});
|
||||||
|
|
||||||
const Sections = React.PropTypes.arrayOf(
|
const Sections = React.PropTypes.arrayOf(
|
||||||
React.PropTypes.string
|
React.PropTypes.string
|
||||||
);
|
);
|
||||||
@ -58,5 +72,6 @@ module.exports = {
|
|||||||
instance: Instance,
|
instance: Instance,
|
||||||
metric: Metric,
|
metric: Metric,
|
||||||
// consinder renaming this to 'Types' as it could be used for any
|
// consinder renaming this to 'Types' as it could be used for any
|
||||||
metricTypes: MetricTypes
|
metricTypes: MetricTypes,
|
||||||
|
dataset: Dataset
|
||||||
};
|
};
|
||||||
|
@ -12,5 +12,6 @@ module.exports = {
|
|||||||
updateRouter: createAction(`${APP}/APP/UPDATE_ROUTER`),
|
updateRouter: createAction(`${APP}/APP/UPDATE_ROUTER`),
|
||||||
toggleHeaderTooltip: createAction(`${APP}/APP/TOGGLE_HEADER_TOOLTIP`),
|
toggleHeaderTooltip: createAction(`${APP}/APP/TOGGLE_HEADER_TOOLTIP`),
|
||||||
toggleServiceCollapsed: createAction(`${APP}/APP/TOGGLE_SERVICE_COLLAPSED`),
|
toggleServiceCollapsed: createAction(`${APP}/APP/TOGGLE_SERVICE_COLLAPSED`),
|
||||||
addMetric: createAction(`${APP}/APP/ADD_METRIC`)
|
addMetric: createAction(`${APP}/APP/ADD_METRIC`),
|
||||||
|
toggleInstanceCollapsed: createAction(`${APP}/APP/TOGGLE_INSTANCE_COLLAPSED`)
|
||||||
};
|
};
|
||||||
|
25
frontend/src/state/reducers/common.js
Normal file
25
frontend/src/state/reducers/common.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
const toggleCollapsed = (state, action) => {
|
||||||
|
const {
|
||||||
|
ui
|
||||||
|
} = state;
|
||||||
|
|
||||||
|
const {
|
||||||
|
collapsed = []
|
||||||
|
} = ui;
|
||||||
|
|
||||||
|
const _collapsed = collapsed.indexOf(action.payload) >= 0
|
||||||
|
? collapsed.filter((uuid) => uuid !== action.payload)
|
||||||
|
: [...collapsed, action.payload];
|
||||||
|
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
ui: {
|
||||||
|
...ui,
|
||||||
|
collapsed: _collapsed
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
toggleCollapsed
|
||||||
|
};
|
@ -1,9 +1,20 @@
|
|||||||
const ReduxActions = require('redux-actions');
|
const ReduxActions = require('redux-actions');
|
||||||
|
|
||||||
|
const actions = require('@state/actions');
|
||||||
|
const common = require('@state/reducers/common');
|
||||||
|
|
||||||
const {
|
const {
|
||||||
handleActions
|
handleActions
|
||||||
} = ReduxActions;
|
} = ReduxActions;
|
||||||
|
|
||||||
|
const {
|
||||||
|
toggleInstanceCollapsed
|
||||||
|
} = actions;
|
||||||
|
|
||||||
|
const {
|
||||||
|
toggleCollapsed
|
||||||
|
} = common;
|
||||||
|
|
||||||
module.exports = handleActions({
|
module.exports = handleActions({
|
||||||
'x': (state) => state // somehow handleActions needs at least one reducer
|
[toggleInstanceCollapsed.toString()]: toggleCollapsed
|
||||||
}, {});
|
}, {});
|
||||||
|
@ -16,10 +16,15 @@ module.exports = handleActions({
|
|||||||
[addMetric.toString()]: (state, action) => {
|
[addMetric.toString()]: (state, action) => {
|
||||||
return ({
|
return ({
|
||||||
...state,
|
...state,
|
||||||
data: [
|
data: {
|
||||||
...state.data,
|
types: [
|
||||||
|
...state.data.types,
|
||||||
action.payload
|
action.payload
|
||||||
|
],
|
||||||
|
datasets: [
|
||||||
|
...state.data.datasets
|
||||||
]
|
]
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, {});
|
}, {});
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
const ReduxActions = require('redux-actions');
|
const ReduxActions = require('redux-actions');
|
||||||
|
|
||||||
const actions = require('@state/actions');
|
const actions = require('@state/actions');
|
||||||
|
const common = require('@state/reducers/common');
|
||||||
|
|
||||||
const {
|
const {
|
||||||
handleActions
|
handleActions
|
||||||
@ -10,14 +11,10 @@ const {
|
|||||||
toggleServiceCollapsed
|
toggleServiceCollapsed
|
||||||
} = actions;
|
} = actions;
|
||||||
|
|
||||||
|
const {
|
||||||
|
toggleCollapsed
|
||||||
|
} = common;
|
||||||
|
|
||||||
module.exports = handleActions({
|
module.exports = handleActions({
|
||||||
[toggleServiceCollapsed.toString()]: (state, action) => ({
|
[toggleServiceCollapsed.toString()]: toggleCollapsed
|
||||||
...state,
|
|
||||||
ui: {
|
|
||||||
...state.ui,
|
|
||||||
collapsed: state.ui.collapsed.indexOf(action.payload) >= 0
|
|
||||||
? state.ui.collapsed.filter((uuid) => uuid !== action.payload)
|
|
||||||
: [...state.ui.collapsed, action.payload]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}, {});
|
}, {});
|
||||||
|
@ -16,8 +16,10 @@ const orgs = (state) => get(state, 'orgs.data', []);
|
|||||||
const projects = (state) => get(state, 'projects.data', []);
|
const projects = (state) => get(state, 'projects.data', []);
|
||||||
const services = (state) => get(state, 'services.data', []);
|
const services = (state) => get(state, 'services.data', []);
|
||||||
const collapsedServices = (state) => get(state, 'services.ui.collapsed', []);
|
const collapsedServices = (state) => get(state, 'services.ui.collapsed', []);
|
||||||
|
const collapsedInstances = (state) => get(state, 'instances.ui.collapsed', []);
|
||||||
const instances = (state) => get(state, 'instances.data', []);
|
const instances = (state) => get(state, 'instances.data', []);
|
||||||
const metrics = (state) => get(state, 'metrics.data', []);
|
const metricTypes = (state) => get(state, 'metrics.data.types', []);
|
||||||
|
const metricDatasets = (state) => get(state, 'metrics.data.datasets', []);
|
||||||
|
|
||||||
const projectById = (projectId) => createSelector(
|
const projectById = (projectId) => createSelector(
|
||||||
projects,
|
projects,
|
||||||
@ -46,9 +48,16 @@ const orgSections = (orgId) => createSelector(
|
|||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const isCollapsed = (collapsed, uuid) => collapsed.indexOf(uuid) >= 0;
|
||||||
|
|
||||||
|
const datasets = (metrics, uuids) => uuids.map((uuid) => find(metrics, [
|
||||||
|
'uuid',
|
||||||
|
uuid
|
||||||
|
]));
|
||||||
|
|
||||||
const servicesByProjectId = (projectId) => createSelector(
|
const servicesByProjectId = (projectId) => createSelector(
|
||||||
[services, projectById(projectId), collapsedServices],
|
[services, projectById(projectId), collapsedServices, metricDatasets],
|
||||||
(services, project, collapsed) =>
|
(services, project, collapsed, metrics) =>
|
||||||
services.filter((s) => s.project === project.uuid)
|
services.filter((s) => s.project === project.uuid)
|
||||||
.map((service) => ({
|
.map((service) => ({
|
||||||
...service,
|
...service,
|
||||||
@ -57,24 +66,31 @@ const servicesByProjectId = (projectId) => createSelector(
|
|||||||
.filter((s) => !s.parent)
|
.filter((s) => !s.parent)
|
||||||
.map((service) => ({
|
.map((service) => ({
|
||||||
...service,
|
...service,
|
||||||
collapsed: collapsed.indexOf(service.uuid) >= 0,
|
metrics: datasets(metrics, service.metrics),
|
||||||
|
collapsed: isCollapsed(collapsed, service.uuid),
|
||||||
services: service.services.map((service) => ({
|
services: service.services.map((service) => ({
|
||||||
...service,
|
...service,
|
||||||
collapsed: collapsed.indexOf(service.uuid) >= 0
|
metrics: datasets(metrics, service.metrics),
|
||||||
|
collapsed: isCollapsed(collapsed, service.uuid)
|
||||||
}))
|
}))
|
||||||
}))
|
}))
|
||||||
);
|
);
|
||||||
|
|
||||||
const instancesByServiceId = (serviceId) => createSelector(
|
const instancesByServiceId = (serviceId) => createSelector(
|
||||||
[instances, serviceById(serviceId)],
|
[instances, serviceById(serviceId), collapsedInstances, metricDatasets],
|
||||||
(instances, service) =>
|
(instances, service, collapsed, metrics) =>
|
||||||
instances.filter((i) => i.service === service.uuid)
|
instances.filter((i) => i.service === service.uuid)
|
||||||
|
.map((instance) => ({
|
||||||
|
...instance,
|
||||||
|
metrics: datasets(metrics, instance.metrics),
|
||||||
|
collapsed: isCollapsed(collapsed, instance.uuid)
|
||||||
|
}))
|
||||||
);
|
);
|
||||||
|
|
||||||
const metricsByServiceId = (serviceId) => createSelector(
|
const metricsByServiceId = (serviceId) => createSelector(
|
||||||
[metrics, serviceById(serviceId)],
|
[metricTypes, serviceById(serviceId)],
|
||||||
(metrics, service) =>
|
(metricTypes, service) =>
|
||||||
metrics.filter((i) => i.service === service.uuid)
|
metricTypes.filter((i) => i.service === service.uuid)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
|
@ -3,7 +3,13 @@ const { configure } = require('@kadira/storybook');
|
|||||||
const req = require.context('../src/components', true, /story.js$/)
|
const req = require.context('../src/components', true, /story.js$/)
|
||||||
|
|
||||||
function loadStories() {
|
function loadStories() {
|
||||||
req.keys().forEach((filename) => req(filename));
|
let stories = req.keys();
|
||||||
|
stories = stories.sort();
|
||||||
|
|
||||||
|
stories.forEach( story => req(story));
|
||||||
|
|
||||||
|
// Fallback to stories/index.js file for anything that
|
||||||
|
// hasn't been moved
|
||||||
require('../stories');
|
require('../stories');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -20,8 +20,10 @@ const StyledButton = styled(Button)`
|
|||||||
const AddMetricButton = ({
|
const AddMetricButton = ({
|
||||||
children,
|
children,
|
||||||
disabled,
|
disabled,
|
||||||
|
metric,
|
||||||
onClick
|
onClick
|
||||||
}) => {
|
}) => {
|
||||||
|
const onButtonClick = (e) => onClick(metric);
|
||||||
return disabled ?
|
return disabled ?
|
||||||
(
|
(
|
||||||
<StyledButton
|
<StyledButton
|
||||||
@ -33,7 +35,7 @@ const AddMetricButton = ({
|
|||||||
) : (
|
) : (
|
||||||
<StyledButton
|
<StyledButton
|
||||||
name='add-metric-button'
|
name='add-metric-button'
|
||||||
onClick={onClick}
|
onClick={onButtonClick}
|
||||||
secondary
|
secondary
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
@ -44,6 +46,7 @@ const AddMetricButton = ({
|
|||||||
AddMetricButton.propTypes = {
|
AddMetricButton.propTypes = {
|
||||||
children: React.PropTypes.node,
|
children: React.PropTypes.node,
|
||||||
disabled: React.PropTypes.bool,
|
disabled: React.PropTypes.bool,
|
||||||
|
metric: React.PropTypes.string,
|
||||||
onClick: React.PropTypes.func,
|
onClick: React.PropTypes.func,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
18
ui/src/components/checkbox/story.js
Normal file
18
ui/src/components/checkbox/story.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const {
|
||||||
|
storiesOf
|
||||||
|
} = require('@kadira/storybook');
|
||||||
|
|
||||||
|
const Checkbox = require('./');
|
||||||
|
|
||||||
|
storiesOf('Checkbox', module)
|
||||||
|
.add('Default', () => (
|
||||||
|
<Checkbox />
|
||||||
|
))
|
||||||
|
.add('Checked', () => (
|
||||||
|
<Checkbox checked onChange={function noop() {}} />
|
||||||
|
))
|
||||||
|
.add('Disabled', () => (
|
||||||
|
<Checkbox disabled />
|
||||||
|
));
|
20
ui/src/components/close/story.js
Normal file
20
ui/src/components/close/story.js
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const {
|
||||||
|
storiesOf
|
||||||
|
} = require('@kadira/storybook');
|
||||||
|
|
||||||
|
const Base = require('../base');
|
||||||
|
const Close = require('./');
|
||||||
|
|
||||||
|
storiesOf('Close', module)
|
||||||
|
.add('Default', () => (
|
||||||
|
<Base
|
||||||
|
style={{
|
||||||
|
position: 'relative',
|
||||||
|
width: 60
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Close onClick={function noop() {}} />
|
||||||
|
</Base>
|
||||||
|
));
|
@ -31,12 +31,11 @@ const InputField = styled.input`
|
|||||||
color: ${props => props.error ? colors.alert : colors.fonts.semibold}
|
color: ${props => props.error ? colors.alert : colors.fonts.semibold}
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
height: ${remcalc(50)};
|
padding: ${remcalc('15 18')};
|
||||||
padding: ${remcalc(16)};
|
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
${baseBox()};
|
${baseBox()};
|
||||||
border-color: ${props => props.error ? colors.alert : 'auto'};
|
border-color: ${props => props.error ? colors.alert : ''};
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: ${boxes.border.checked};
|
border-color: ${boxes.border.checked};
|
||||||
|
35
ui/src/components/input/story.js
Normal file
35
ui/src/components/input/story.js
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const {
|
||||||
|
storiesOf
|
||||||
|
} = require('@kadira/storybook');
|
||||||
|
|
||||||
|
const Base= require('../base');
|
||||||
|
const Input = require('./');
|
||||||
|
|
||||||
|
storiesOf('Input', module)
|
||||||
|
.add('Default', () => (
|
||||||
|
<Base>
|
||||||
|
<Input placeholder="I am the placeholder" />
|
||||||
|
</Base>
|
||||||
|
))
|
||||||
|
.add('type=email', () => (
|
||||||
|
<Base>
|
||||||
|
<Input
|
||||||
|
label='Email Address'
|
||||||
|
placeholder='Enter email'
|
||||||
|
type='email'
|
||||||
|
>
|
||||||
|
<small>We'll never share your email with anyone else.</small>
|
||||||
|
</Input>
|
||||||
|
</Base>
|
||||||
|
))
|
||||||
|
.add('Error', () => (
|
||||||
|
<Base>
|
||||||
|
<Input
|
||||||
|
error="Somethings missing"
|
||||||
|
placeholder="There was an error"
|
||||||
|
value="alexw/makeusproud.com"
|
||||||
|
/>
|
||||||
|
</Base>
|
||||||
|
));
|
103
ui/src/components/list/mini-metric-data.js
Normal file
103
ui/src/components/list/mini-metric-data.js
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
module.exports = [{
|
||||||
|
firstQuartile: 15,
|
||||||
|
thirdQuartile: 15,
|
||||||
|
median: 15,
|
||||||
|
max: 15,
|
||||||
|
min: 15,
|
||||||
|
}, {
|
||||||
|
firstQuartile: 26,
|
||||||
|
thirdQuartile: 26,
|
||||||
|
median: 26,
|
||||||
|
max: 26,
|
||||||
|
min: 26,
|
||||||
|
}, {
|
||||||
|
firstQuartile: 17,
|
||||||
|
thirdQuartile: 17,
|
||||||
|
median: 17,
|
||||||
|
max: 17,
|
||||||
|
min: 17,
|
||||||
|
}, {
|
||||||
|
firstQuartile: 15,
|
||||||
|
thirdQuartile: 25,
|
||||||
|
median: 19,
|
||||||
|
max: 19,
|
||||||
|
min: 20,
|
||||||
|
}, {
|
||||||
|
firstQuartile: 19,
|
||||||
|
thirdQuartile: 25,
|
||||||
|
median: 21,
|
||||||
|
max: 20,
|
||||||
|
min: 25,
|
||||||
|
}, {
|
||||||
|
firstQuartile: 24,
|
||||||
|
thirdQuartile: 30,
|
||||||
|
median: 25,
|
||||||
|
max: 26,
|
||||||
|
min: 27,
|
||||||
|
}, {
|
||||||
|
firstQuartile: 28,
|
||||||
|
thirdQuartile: 34,
|
||||||
|
median: 30,
|
||||||
|
max: 30,
|
||||||
|
min: 30,
|
||||||
|
}, {
|
||||||
|
firstQuartile: 30,
|
||||||
|
thirdQuartile: 45,
|
||||||
|
median: 35,
|
||||||
|
max: 40,
|
||||||
|
min: 40,
|
||||||
|
}, {
|
||||||
|
firstQuartile: 20,
|
||||||
|
thirdQuartile: 55,
|
||||||
|
median: 45,
|
||||||
|
max: 44,
|
||||||
|
min: 44,
|
||||||
|
}, {
|
||||||
|
firstQuartile: 55,
|
||||||
|
thirdQuartile: 55,
|
||||||
|
median: 55,
|
||||||
|
max: 55,
|
||||||
|
min: 55,
|
||||||
|
}, {
|
||||||
|
firstQuartile: 57,
|
||||||
|
thirdQuartile: 56,
|
||||||
|
median: 57,
|
||||||
|
max: 58,
|
||||||
|
min: 57,
|
||||||
|
}, {
|
||||||
|
firstQuartile: 57,
|
||||||
|
thirdQuartile: 56,
|
||||||
|
median: 56,
|
||||||
|
max: 56,
|
||||||
|
min: 56,
|
||||||
|
}, {
|
||||||
|
firstQuartile: 60,
|
||||||
|
thirdQuartile: 56,
|
||||||
|
median: 60,
|
||||||
|
max: 60,
|
||||||
|
min: 60,
|
||||||
|
}, {
|
||||||
|
firstQuartile: 57,
|
||||||
|
thirdQuartile: 57,
|
||||||
|
median: 57,
|
||||||
|
max: 57,
|
||||||
|
min: 57,
|
||||||
|
}, {
|
||||||
|
firstQuartile: 57,
|
||||||
|
thirdQuartile: 55,
|
||||||
|
median: 55,
|
||||||
|
max: 55,
|
||||||
|
min: 55,
|
||||||
|
}, {
|
||||||
|
firstQuartile: 20,
|
||||||
|
thirdQuartile: 45,
|
||||||
|
median: 45,
|
||||||
|
max: 45,
|
||||||
|
min: 45,
|
||||||
|
}, {
|
||||||
|
firstQuartile: 15,
|
||||||
|
thirdQuartile: 40,
|
||||||
|
median: 30,
|
||||||
|
max: 49,
|
||||||
|
min: 30,
|
||||||
|
}];
|
320
ui/src/components/list/story.js
Normal file
320
ui/src/components/list/story.js
Normal file
@ -0,0 +1,320 @@
|
|||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const {
|
||||||
|
storiesOf
|
||||||
|
} = require('@kadira/storybook');
|
||||||
|
|
||||||
|
const Base = require('../base');
|
||||||
|
const Row = require('../row');
|
||||||
|
const Column = require('../column');
|
||||||
|
const MiniMetricData = require('./mini-metric-data');
|
||||||
|
|
||||||
|
const {
|
||||||
|
MiniMetricGraph,
|
||||||
|
MiniMetricMeta,
|
||||||
|
MiniMetricTitle,
|
||||||
|
MiniMetricSubtitle,
|
||||||
|
MiniMetricView
|
||||||
|
} = require('../mini-metric');
|
||||||
|
|
||||||
|
const {
|
||||||
|
ListItemDescription,
|
||||||
|
ListItemHeader,
|
||||||
|
ListItem,
|
||||||
|
ListItemMeta,
|
||||||
|
ListItemOptions,
|
||||||
|
ListItemOutlet,
|
||||||
|
ListItemSubTitle,
|
||||||
|
ListItemTitle,
|
||||||
|
ListItemView,
|
||||||
|
ListItemGroupView
|
||||||
|
} = require('./');
|
||||||
|
|
||||||
|
storiesOf('List Item', module)
|
||||||
|
.add('default', () => (
|
||||||
|
<Base>
|
||||||
|
<ListItem>
|
||||||
|
<ListItemView>
|
||||||
|
<ListItemMeta>
|
||||||
|
<ListItemTitle>Nginx 01</ListItemTitle>
|
||||||
|
<ListItemSubTitle>4 instances</ListItemSubTitle>
|
||||||
|
<ListItemDescription>Flags</ListItemDescription>
|
||||||
|
</ListItemMeta>
|
||||||
|
<ListItemOutlet>
|
||||||
|
Metrics
|
||||||
|
</ListItemOutlet>
|
||||||
|
</ListItemView>
|
||||||
|
<ListItemOptions>
|
||||||
|
…
|
||||||
|
</ListItemOptions>
|
||||||
|
</ListItem>
|
||||||
|
</Base>
|
||||||
|
))
|
||||||
|
.add('collapsed', () => (
|
||||||
|
<Base>
|
||||||
|
<ListItem collapsed>
|
||||||
|
<ListItemView>
|
||||||
|
<ListItemMeta>
|
||||||
|
<ListItemTitle>Nginx 01</ListItemTitle>
|
||||||
|
<ListItemSubTitle>4 instances</ListItemSubTitle>
|
||||||
|
<ListItemDescription>Flags</ListItemDescription>
|
||||||
|
</ListItemMeta>
|
||||||
|
<ListItemOutlet>
|
||||||
|
Metrics
|
||||||
|
</ListItemOutlet>
|
||||||
|
</ListItemView>
|
||||||
|
<ListItemOptions>
|
||||||
|
…
|
||||||
|
</ListItemOptions>
|
||||||
|
</ListItem>
|
||||||
|
</Base>
|
||||||
|
))
|
||||||
|
.add('headed', () => (
|
||||||
|
<Base>
|
||||||
|
<ListItem headed>
|
||||||
|
<ListItemHeader>
|
||||||
|
<ListItemMeta>
|
||||||
|
<ListItemTitle>Nginx 01</ListItemTitle>
|
||||||
|
<ListItemSubTitle>4 instances</ListItemSubTitle>
|
||||||
|
<ListItemDescription>Flags</ListItemDescription>
|
||||||
|
</ListItemMeta>
|
||||||
|
<ListItemOptions>
|
||||||
|
…
|
||||||
|
</ListItemOptions>
|
||||||
|
</ListItemHeader>
|
||||||
|
<ListItemView>
|
||||||
|
<ListItemMeta>
|
||||||
|
<ListItemDescription>Flags</ListItemDescription>
|
||||||
|
</ListItemMeta>
|
||||||
|
<ListItemOutlet>
|
||||||
|
Metrics
|
||||||
|
</ListItemOutlet>
|
||||||
|
</ListItemView>
|
||||||
|
</ListItem>
|
||||||
|
</Base>
|
||||||
|
))
|
||||||
|
.add('headed collapsed', () => (
|
||||||
|
<Base>
|
||||||
|
<ListItem collapsed headed>
|
||||||
|
<ListItemHeader>
|
||||||
|
<ListItemMeta>
|
||||||
|
<ListItemTitle>Nginx 01</ListItemTitle>
|
||||||
|
<ListItemSubTitle>4 instances</ListItemSubTitle>
|
||||||
|
<ListItemDescription>Flags</ListItemDescription>
|
||||||
|
</ListItemMeta>
|
||||||
|
<ListItemOptions>
|
||||||
|
…
|
||||||
|
</ListItemOptions>
|
||||||
|
</ListItemHeader>
|
||||||
|
<ListItemView>
|
||||||
|
<ListItemMeta>
|
||||||
|
<ListItemDescription>Flags</ListItemDescription>
|
||||||
|
</ListItemMeta>
|
||||||
|
<ListItemOutlet>
|
||||||
|
Metrics
|
||||||
|
</ListItemOutlet>
|
||||||
|
</ListItemView>
|
||||||
|
</ListItem>
|
||||||
|
</Base>
|
||||||
|
))
|
||||||
|
.add('stacked', () => (
|
||||||
|
<Base>
|
||||||
|
<ListItem stacked>
|
||||||
|
<ListItemView>
|
||||||
|
<ListItemMeta>
|
||||||
|
<ListItemTitle>Nginx 01</ListItemTitle>
|
||||||
|
<ListItemSubTitle>4 instances</ListItemSubTitle>
|
||||||
|
<ListItemDescription>Flags</ListItemDescription>
|
||||||
|
</ListItemMeta>
|
||||||
|
<ListItemOutlet>
|
||||||
|
Metrics
|
||||||
|
</ListItemOutlet>
|
||||||
|
</ListItemView>
|
||||||
|
<ListItemOptions>
|
||||||
|
…
|
||||||
|
</ListItemOptions>
|
||||||
|
</ListItem>
|
||||||
|
</Base>
|
||||||
|
))
|
||||||
|
.add('view-group', () => (
|
||||||
|
<Base>
|
||||||
|
<ListItem headed>
|
||||||
|
<ListItemHeader>
|
||||||
|
<ListItemMeta>
|
||||||
|
<ListItemTitle>Percona</ListItemTitle>
|
||||||
|
<ListItemSubTitle>5 instances</ListItemSubTitle>
|
||||||
|
<ListItemDescription>Flags</ListItemDescription>
|
||||||
|
</ListItemMeta>
|
||||||
|
<ListItemOptions>…</ListItemOptions>
|
||||||
|
</ListItemHeader>
|
||||||
|
<ListItemGroupView>
|
||||||
|
<ListItem flat>
|
||||||
|
<ListItemView>
|
||||||
|
<ListItemMeta>
|
||||||
|
<ListItemTitle>percona_database</ListItemTitle>
|
||||||
|
</ListItemMeta>
|
||||||
|
<ListItemOutlet>
|
||||||
|
Metrics
|
||||||
|
</ListItemOutlet>
|
||||||
|
</ListItemView>
|
||||||
|
</ListItem>
|
||||||
|
<ListItem flat>
|
||||||
|
<ListItemView>
|
||||||
|
<ListItemMeta>
|
||||||
|
<ListItemTitle>percona_database</ListItemTitle>
|
||||||
|
<ListItemSubTitle>5 instances</ListItemSubTitle>
|
||||||
|
<ListItemDescription>Flags</ListItemDescription>
|
||||||
|
</ListItemMeta>
|
||||||
|
<ListItemOutlet>
|
||||||
|
Metrics
|
||||||
|
</ListItemOutlet>
|
||||||
|
</ListItemView>
|
||||||
|
</ListItem>
|
||||||
|
<ListItem flat stacked>
|
||||||
|
<ListItemView>
|
||||||
|
<ListItemMeta>
|
||||||
|
<ListItemTitle>percona_database</ListItemTitle>
|
||||||
|
<ListItemSubTitle>5 instances</ListItemSubTitle>
|
||||||
|
</ListItemMeta>
|
||||||
|
<ListItemOutlet>
|
||||||
|
Metrics
|
||||||
|
</ListItemOutlet>
|
||||||
|
</ListItemView>
|
||||||
|
</ListItem>
|
||||||
|
</ListItemGroupView>
|
||||||
|
</ListItem>
|
||||||
|
</Base>
|
||||||
|
))
|
||||||
|
.add('view-group with metrics', () => (
|
||||||
|
<Base>
|
||||||
|
<ListItem headed>
|
||||||
|
<ListItemHeader>
|
||||||
|
<ListItemMeta>
|
||||||
|
<ListItemTitle>Percona</ListItemTitle>
|
||||||
|
<ListItemSubTitle>5 instances</ListItemSubTitle>
|
||||||
|
<ListItemDescription>Flags</ListItemDescription>
|
||||||
|
</ListItemMeta>
|
||||||
|
<ListItemOptions>…</ListItemOptions>
|
||||||
|
</ListItemHeader>
|
||||||
|
<ListItemGroupView>
|
||||||
|
<ListItem flat>
|
||||||
|
<ListItemView>
|
||||||
|
<ListItemMeta>
|
||||||
|
<ListItemTitle>percona_database</ListItemTitle>
|
||||||
|
</ListItemMeta>
|
||||||
|
<ListItemOutlet>
|
||||||
|
<Row>
|
||||||
|
<Column xs={4}>
|
||||||
|
<MiniMetricView borderless>
|
||||||
|
<MiniMetricMeta>
|
||||||
|
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
||||||
|
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
||||||
|
</MiniMetricMeta>
|
||||||
|
<MiniMetricGraph data={MiniMetricData} />
|
||||||
|
</MiniMetricView>
|
||||||
|
</Column>
|
||||||
|
<Column xs={4}>
|
||||||
|
<MiniMetricView borderless>
|
||||||
|
<MiniMetricMeta>
|
||||||
|
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
||||||
|
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
||||||
|
</MiniMetricMeta>
|
||||||
|
<MiniMetricGraph data={MiniMetricData} />
|
||||||
|
</MiniMetricView>
|
||||||
|
</Column>
|
||||||
|
<Column xs={4}>
|
||||||
|
<MiniMetricView borderless>
|
||||||
|
<MiniMetricMeta>
|
||||||
|
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
||||||
|
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
||||||
|
</MiniMetricMeta>
|
||||||
|
<MiniMetricGraph data={MiniMetricData} />
|
||||||
|
</MiniMetricView>
|
||||||
|
</Column>
|
||||||
|
</Row>
|
||||||
|
</ListItemOutlet>
|
||||||
|
</ListItemView>
|
||||||
|
</ListItem>
|
||||||
|
<ListItem flat>
|
||||||
|
<ListItemView>
|
||||||
|
<ListItemMeta>
|
||||||
|
<ListItemTitle>percona_database</ListItemTitle>
|
||||||
|
<ListItemSubTitle>5 instances</ListItemSubTitle>
|
||||||
|
<ListItemDescription>Flags</ListItemDescription>
|
||||||
|
</ListItemMeta>
|
||||||
|
<ListItemOutlet>
|
||||||
|
<Row>
|
||||||
|
<Column xs={4}>
|
||||||
|
<MiniMetricView borderless>
|
||||||
|
<MiniMetricMeta>
|
||||||
|
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
||||||
|
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
||||||
|
</MiniMetricMeta>
|
||||||
|
<MiniMetricGraph data={MiniMetricData} />
|
||||||
|
</MiniMetricView>
|
||||||
|
</Column>
|
||||||
|
<Column xs={4}>
|
||||||
|
<MiniMetricView borderless>
|
||||||
|
<MiniMetricMeta>
|
||||||
|
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
||||||
|
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
||||||
|
</MiniMetricMeta>
|
||||||
|
<MiniMetricGraph data={MiniMetricData} />
|
||||||
|
</MiniMetricView>
|
||||||
|
</Column>
|
||||||
|
<Column xs={4}>
|
||||||
|
<MiniMetricView borderless>
|
||||||
|
<MiniMetricMeta>
|
||||||
|
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
||||||
|
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
||||||
|
</MiniMetricMeta>
|
||||||
|
<MiniMetricGraph data={MiniMetricData} />
|
||||||
|
</MiniMetricView>
|
||||||
|
</Column>
|
||||||
|
</Row>
|
||||||
|
</ListItemOutlet>
|
||||||
|
</ListItemView>
|
||||||
|
</ListItem>
|
||||||
|
<ListItem flat stacked>
|
||||||
|
<ListItemView>
|
||||||
|
<ListItemMeta>
|
||||||
|
<ListItemTitle>percona_database</ListItemTitle>
|
||||||
|
<ListItemSubTitle>5 instances</ListItemSubTitle>
|
||||||
|
</ListItemMeta>
|
||||||
|
<ListItemOutlet>
|
||||||
|
<Row>
|
||||||
|
<Column xs={4}>
|
||||||
|
<MiniMetricView borderless>
|
||||||
|
<MiniMetricMeta>
|
||||||
|
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
||||||
|
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
||||||
|
</MiniMetricMeta>
|
||||||
|
<MiniMetricGraph data={MiniMetricData} />
|
||||||
|
</MiniMetricView>
|
||||||
|
</Column>
|
||||||
|
<Column xs={4}>
|
||||||
|
<MiniMetricView borderless>
|
||||||
|
<MiniMetricMeta>
|
||||||
|
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
||||||
|
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
||||||
|
</MiniMetricMeta>
|
||||||
|
<MiniMetricGraph data={MiniMetricData} />
|
||||||
|
</MiniMetricView>
|
||||||
|
</Column>
|
||||||
|
<Column xs={4}>
|
||||||
|
<MiniMetricView borderless>
|
||||||
|
<MiniMetricMeta>
|
||||||
|
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
||||||
|
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
||||||
|
</MiniMetricMeta>
|
||||||
|
<MiniMetricGraph data={MiniMetricData} />
|
||||||
|
</MiniMetricView>
|
||||||
|
</Column>
|
||||||
|
</Row>
|
||||||
|
</ListItemOutlet>
|
||||||
|
</ListItemView>
|
||||||
|
</ListItem>
|
||||||
|
</ListItemGroupView>
|
||||||
|
</ListItem>
|
||||||
|
</Base>
|
||||||
|
));
|
@ -4,7 +4,7 @@ const React = require('react');
|
|||||||
const transfer = (parentProps, props) => {
|
const transfer = (parentProps, props) => {
|
||||||
// eslint-disable-next-line react/prop-types
|
// eslint-disable-next-line react/prop-types
|
||||||
return React.Children.map(props.children, (c) => {
|
return React.Children.map(props.children, (c) => {
|
||||||
return React.cloneElement(c, {
|
return c && React.cloneElement(c, {
|
||||||
...c.props,
|
...c.props,
|
||||||
...parentProps.reduce((sum, name) => ({
|
...parentProps.reduce((sum, name) => ({
|
||||||
...sum,
|
...sum,
|
||||||
|
17
ui/src/components/modal/story.js
Normal file
17
ui/src/components/modal/story.js
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const {
|
||||||
|
storiesOf
|
||||||
|
} = require('@kadira/storybook');
|
||||||
|
|
||||||
|
const Base= require('../base');
|
||||||
|
const Modal = require('./');
|
||||||
|
|
||||||
|
storiesOf('Modal', module)
|
||||||
|
.add('Default', () => (
|
||||||
|
<Base>
|
||||||
|
<Modal>
|
||||||
|
<h2>This is the Modal</h2>
|
||||||
|
</Modal>
|
||||||
|
</Base>
|
||||||
|
));
|
34
ui/src/components/notification/story.js
Normal file
34
ui/src/components/notification/story.js
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const {
|
||||||
|
storiesOf
|
||||||
|
} = require('@kadira/storybook');
|
||||||
|
|
||||||
|
const Base= require('../base');
|
||||||
|
const Notificaton = require('./');
|
||||||
|
|
||||||
|
storiesOf('Notificaton', module)
|
||||||
|
.add('Default', () => (
|
||||||
|
<Base>
|
||||||
|
<Notificaton>
|
||||||
|
<span>This is the default content</span>
|
||||||
|
</Notificaton>
|
||||||
|
</Base>
|
||||||
|
))
|
||||||
|
.add('Success', () => (
|
||||||
|
<Base>
|
||||||
|
<Notificaton
|
||||||
|
close={function noop() {}}
|
||||||
|
type="success"
|
||||||
|
>
|
||||||
|
<span>This is a success notification that is closable</span>
|
||||||
|
</Notificaton>
|
||||||
|
</Base>
|
||||||
|
))
|
||||||
|
.add('Alert', () => (
|
||||||
|
<Base>
|
||||||
|
<Notificaton type="alert">
|
||||||
|
<span>This is the alert content</span>
|
||||||
|
</Notificaton>
|
||||||
|
</Base>
|
||||||
|
));
|
20
ui/src/components/pagination/story.js
Normal file
20
ui/src/components/pagination/story.js
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const {
|
||||||
|
storiesOf
|
||||||
|
} = require('@kadira/storybook');
|
||||||
|
|
||||||
|
const Pagination = require('./');
|
||||||
|
|
||||||
|
storiesOf('Pagination', module)
|
||||||
|
.add('Default', () => (
|
||||||
|
<Pagination>
|
||||||
|
<a>
|
||||||
|
<span>«</span>
|
||||||
|
<span>Previous</span>
|
||||||
|
</a>
|
||||||
|
<a>1</a>
|
||||||
|
<a active>2</a>
|
||||||
|
<a>3</a>
|
||||||
|
</Pagination>
|
||||||
|
));
|
27
ui/src/components/radio-group/story.js
Normal file
27
ui/src/components/radio-group/story.js
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const {
|
||||||
|
storiesOf
|
||||||
|
} = require('@kadira/storybook');
|
||||||
|
|
||||||
|
const Base= require('../base');
|
||||||
|
const RadioGroup = require('./');
|
||||||
|
const Radio = require('./item');
|
||||||
|
|
||||||
|
|
||||||
|
storiesOf('Radio Group', module)
|
||||||
|
.add('Default', () => (
|
||||||
|
<Base>
|
||||||
|
<RadioGroup>
|
||||||
|
<Radio name='hello' value='default'>
|
||||||
|
Video killed the radio star
|
||||||
|
</Radio>
|
||||||
|
<Radio name='hello' value='fancy'>
|
||||||
|
Video killed the radio star
|
||||||
|
</Radio>
|
||||||
|
<Radio name='hello' value='none'>
|
||||||
|
Video killed the radio star
|
||||||
|
</Radio>
|
||||||
|
</RadioGroup>
|
||||||
|
</Base>
|
||||||
|
));
|
20
ui/src/components/radio/story.js
Normal file
20
ui/src/components/radio/story.js
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const {
|
||||||
|
storiesOf
|
||||||
|
} = require('@kadira/storybook');
|
||||||
|
|
||||||
|
const Radio = require('./');
|
||||||
|
|
||||||
|
storiesOf('Radio', module)
|
||||||
|
.add('Default', () => (
|
||||||
|
<Radio>
|
||||||
|
Video killed the radio star
|
||||||
|
</Radio>
|
||||||
|
))
|
||||||
|
.add('Checked', () => (
|
||||||
|
<Radio checked onChange={function noop() {}} />
|
||||||
|
))
|
||||||
|
.add('Disabled', () => (
|
||||||
|
<Radio disabled />
|
||||||
|
));
|
12
ui/src/components/range-slider/story.js
Normal file
12
ui/src/components/range-slider/story.js
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const {
|
||||||
|
storiesOf
|
||||||
|
} = require('@kadira/storybook');
|
||||||
|
|
||||||
|
const RangeSlider = require('./');
|
||||||
|
|
||||||
|
storiesOf('Range Slider', module)
|
||||||
|
.add('Default', () => (
|
||||||
|
<RangeSlider />
|
||||||
|
));
|
28
ui/src/components/select-custom/story.js
Normal file
28
ui/src/components/select-custom/story.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const {
|
||||||
|
storiesOf
|
||||||
|
} = require('@kadira/storybook');
|
||||||
|
|
||||||
|
const {
|
||||||
|
selectData
|
||||||
|
} = require('../../shared/fake-data');
|
||||||
|
|
||||||
|
const SelectCustom = require('./');
|
||||||
|
|
||||||
|
storiesOf('Select Custom', module)
|
||||||
|
.add('Default', () => (
|
||||||
|
<SelectCustom
|
||||||
|
label="This is the label"
|
||||||
|
onChange={function noop() {}}
|
||||||
|
options={selectData}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
.add('Multiple', () => (
|
||||||
|
<SelectCustom
|
||||||
|
label="This is the label"
|
||||||
|
multi
|
||||||
|
onChange={function noop() {}}
|
||||||
|
options={selectData}
|
||||||
|
/>
|
||||||
|
));
|
26
ui/src/components/select/story.js
Normal file
26
ui/src/components/select/story.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const {
|
||||||
|
storiesOf
|
||||||
|
} = require('@kadira/storybook');
|
||||||
|
|
||||||
|
const Select = require('./');
|
||||||
|
|
||||||
|
storiesOf('Select', module)
|
||||||
|
.add('Default', () => (
|
||||||
|
<Select label='example select'>
|
||||||
|
<option>Apple</option>
|
||||||
|
<option>Banana</option>
|
||||||
|
<option>Pear</option>
|
||||||
|
<option>Orange</option>
|
||||||
|
</Select>
|
||||||
|
))
|
||||||
|
.add('multiple', () => (
|
||||||
|
<Select label='example multiple select' multiple>
|
||||||
|
<option>1</option>
|
||||||
|
<option>2</option>
|
||||||
|
<option>3</option>
|
||||||
|
<option>4</option>
|
||||||
|
<option>5</option>
|
||||||
|
</Select>
|
||||||
|
));
|
20
ui/src/components/tabs/story.js
Normal file
20
ui/src/components/tabs/story.js
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const {
|
||||||
|
storiesOf
|
||||||
|
} = require('@kadira/storybook');
|
||||||
|
|
||||||
|
const Tabs = require('./');
|
||||||
|
const Tab = require('./tab');
|
||||||
|
|
||||||
|
storiesOf('Tabs', module)
|
||||||
|
.add('Default', () => (
|
||||||
|
<Tabs name='my-tab-group'>
|
||||||
|
<Tab title='Containers'>
|
||||||
|
<h1>Containers</h1>
|
||||||
|
</Tab>
|
||||||
|
<Tab title='Users'>
|
||||||
|
<h1>User</h1>
|
||||||
|
</Tab>
|
||||||
|
</Tabs>
|
||||||
|
));
|
146
ui/src/components/textarea/index.js
Normal file
146
ui/src/components/textarea/index.js
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const composers = require('../../shared/composers');
|
||||||
|
const constants = require('../../shared/constants');
|
||||||
|
const fns = require('../../shared/functions');
|
||||||
|
const Styled = require('styled-components');
|
||||||
|
|
||||||
|
const {
|
||||||
|
boxes,
|
||||||
|
colors
|
||||||
|
} = constants;
|
||||||
|
|
||||||
|
const {
|
||||||
|
remcalc
|
||||||
|
} = fns;
|
||||||
|
|
||||||
|
const {
|
||||||
|
baseBox
|
||||||
|
} = composers;
|
||||||
|
|
||||||
|
const {
|
||||||
|
default: styled
|
||||||
|
} = Styled;
|
||||||
|
|
||||||
|
const Label = styled.label`
|
||||||
|
color: ${props => props.error ? colors.alert : colors.fonts.regular}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const InputField = styled.textarea`
|
||||||
|
background: ${colors.brandSecondary};
|
||||||
|
color: ${props => props.error ? colors.alert : colors.fonts.semibold}
|
||||||
|
display: block;
|
||||||
|
font-size: 16px;
|
||||||
|
padding: ${remcalc('15 18')};
|
||||||
|
visibility: visible;
|
||||||
|
width: 100%;
|
||||||
|
min-height: ${remcalc(96)};
|
||||||
|
${baseBox()};
|
||||||
|
border-color: ${props => props.error ? colors.alert : ''};
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: ${boxes.border.checked};
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Error = styled.span`
|
||||||
|
float: right;
|
||||||
|
color: ${colors.alert};
|
||||||
|
font-size: ${remcalc(14)};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Textarea = ({
|
||||||
|
autoComplete,
|
||||||
|
autoFocus,
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
disabled = false,
|
||||||
|
error,
|
||||||
|
form,
|
||||||
|
id,
|
||||||
|
inputMode,
|
||||||
|
label,
|
||||||
|
labelledby,
|
||||||
|
list,
|
||||||
|
name,
|
||||||
|
onChange,
|
||||||
|
pattern,
|
||||||
|
placeholder,
|
||||||
|
readOnly,
|
||||||
|
required,
|
||||||
|
selectionDirection,
|
||||||
|
spellCheck,
|
||||||
|
style,
|
||||||
|
tabIndex,
|
||||||
|
type,
|
||||||
|
value
|
||||||
|
}) => {
|
||||||
|
const _label = label || children;
|
||||||
|
const _children = label && children ? children : null;
|
||||||
|
const _error = error ? (<Error>{error}</Error>) : null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Label
|
||||||
|
error={error}
|
||||||
|
htmlFor={id}
|
||||||
|
>
|
||||||
|
{_label}
|
||||||
|
</Label>
|
||||||
|
{_error}
|
||||||
|
<InputField
|
||||||
|
aria-labelledby={labelledby}
|
||||||
|
autoComplete={autoComplete}
|
||||||
|
autoFocus={autoFocus}
|
||||||
|
disabled={disabled}
|
||||||
|
error={error}
|
||||||
|
form={form}
|
||||||
|
id={id}
|
||||||
|
inputMode={inputMode}
|
||||||
|
list={list}
|
||||||
|
name={name}
|
||||||
|
onChange={onChange}
|
||||||
|
pattern={pattern}
|
||||||
|
placeholder={placeholder}
|
||||||
|
readOnly={readOnly}
|
||||||
|
required={required}
|
||||||
|
selectionDirection={selectionDirection}
|
||||||
|
spellCheck={spellCheck}
|
||||||
|
tabIndex={tabIndex}
|
||||||
|
type={type}
|
||||||
|
value={value}
|
||||||
|
/>
|
||||||
|
{_children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Textarea.propTypes = {
|
||||||
|
autoComplete: React.PropTypes.string,
|
||||||
|
autoFocus: React.PropTypes.bool,
|
||||||
|
children: React.PropTypes.node,
|
||||||
|
className: React.PropTypes.string,
|
||||||
|
disabled: React.PropTypes.bool,
|
||||||
|
error: React.PropTypes.string,
|
||||||
|
form: React.PropTypes.string,
|
||||||
|
id: React.PropTypes.string,
|
||||||
|
inputMode: React.PropTypes.string,
|
||||||
|
label: React.PropTypes.string,
|
||||||
|
labelledby: React.PropTypes.string,
|
||||||
|
list: React.PropTypes.string,
|
||||||
|
name: React.PropTypes.string,
|
||||||
|
onChange: React.PropTypes.func,
|
||||||
|
pattern: React.PropTypes.string,
|
||||||
|
placeholder: React.PropTypes.string,
|
||||||
|
readOnly: React.PropTypes.bool,
|
||||||
|
required: React.PropTypes.bool,
|
||||||
|
selectionDirection: React.PropTypes.string,
|
||||||
|
spellCheck: React.PropTypes.bool,
|
||||||
|
style: React.PropTypes.object,
|
||||||
|
tabIndex: React.PropTypes.string,
|
||||||
|
type: React.PropTypes.string,
|
||||||
|
value: React.PropTypes.string
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = Textarea;
|
60
ui/src/components/textarea/readme.md
Normal file
60
ui/src/components/textarea/readme.md
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
# Input
|
||||||
|
|
||||||
|
## demo
|
||||||
|
|
||||||
|
```embed
|
||||||
|
const React = require('react');
|
||||||
|
const ReactDOM = require('react-dom/server');
|
||||||
|
const Base = require('../base');
|
||||||
|
const Container = require('../container');
|
||||||
|
const Row = require('../row');
|
||||||
|
const Column = require('../column');
|
||||||
|
const Input = require('./index.js');
|
||||||
|
|
||||||
|
nmodule.exports = ReactDOM.renderToString(
|
||||||
|
<Base>
|
||||||
|
<Row>
|
||||||
|
<Column>
|
||||||
|
<Input
|
||||||
|
placeholder='Enter email'
|
||||||
|
label='Email Address'
|
||||||
|
type='email'
|
||||||
|
>
|
||||||
|
<small>We'll never share your email with anyone else.</small>
|
||||||
|
</Input>
|
||||||
|
</Column>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Column>
|
||||||
|
<Input placeholder='Password' type='password'>
|
||||||
|
Password
|
||||||
|
</Input>
|
||||||
|
</Column>
|
||||||
|
</Row>
|
||||||
|
</Base>
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
## usage
|
||||||
|
|
||||||
|
```js
|
||||||
|
const React = require('react');
|
||||||
|
const Input = require('ui/input');
|
||||||
|
|
||||||
|
module.exports = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Input
|
||||||
|
placeholder='Enter email'
|
||||||
|
label='Email Address'
|
||||||
|
type='email'
|
||||||
|
>
|
||||||
|
<small>We'll never share your email with anyone else.</small>
|
||||||
|
</Input>
|
||||||
|
<Input placeholder='Password' type='password'>
|
||||||
|
Password
|
||||||
|
</Input>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
24
ui/src/components/textarea/story.js
Normal file
24
ui/src/components/textarea/story.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const {
|
||||||
|
storiesOf
|
||||||
|
} = require('@kadira/storybook');
|
||||||
|
|
||||||
|
const Base= require('../base');
|
||||||
|
const Textarea = require('./');
|
||||||
|
|
||||||
|
storiesOf('Textarea', module)
|
||||||
|
.add('Default', () => (
|
||||||
|
<Base>
|
||||||
|
<Textarea placeholder="I am the placeholder" />
|
||||||
|
</Base>
|
||||||
|
))
|
||||||
|
.add('Error', () => (
|
||||||
|
<Base>
|
||||||
|
<Textarea
|
||||||
|
error="Somethings missing"
|
||||||
|
placeholder="There was an error"
|
||||||
|
value="alexw/makeusproud.com"
|
||||||
|
/>
|
||||||
|
</Base>
|
||||||
|
));
|
30
ui/src/components/toggle/story.js
Normal file
30
ui/src/components/toggle/story.js
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const {
|
||||||
|
storiesOf
|
||||||
|
} = require('@kadira/storybook');
|
||||||
|
|
||||||
|
const Toggle = require('./');
|
||||||
|
|
||||||
|
storiesOf('Toggle', module)
|
||||||
|
.add('default', () => (
|
||||||
|
<Toggle checked />
|
||||||
|
))
|
||||||
|
.add('checked', () => (
|
||||||
|
<Toggle
|
||||||
|
defaultChecked
|
||||||
|
options={[
|
||||||
|
{
|
||||||
|
label: 'Topology',
|
||||||
|
checked: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'List',
|
||||||
|
checked: false
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
.add('no props', () => (
|
||||||
|
<Toggle />
|
||||||
|
));
|
29
ui/src/components/tooltip/story.js
Normal file
29
ui/src/components/tooltip/story.js
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const {
|
||||||
|
storiesOf
|
||||||
|
} = require('@kadira/storybook');
|
||||||
|
|
||||||
|
const Tooltip = require('./');
|
||||||
|
|
||||||
|
storiesOf('Tooltip', module)
|
||||||
|
.add('default', () => (
|
||||||
|
<Tooltip>
|
||||||
|
<li>One</li>
|
||||||
|
<li>Two</li>
|
||||||
|
<li>Three</li>
|
||||||
|
</Tooltip>
|
||||||
|
))
|
||||||
|
.add('custom position', () => {
|
||||||
|
const arrowPosition = {
|
||||||
|
left: '90%',
|
||||||
|
bottom: '100%'
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<Tooltip arrowPosition={arrowPosition}>
|
||||||
|
<li>One</li>
|
||||||
|
<li>Two</li>
|
||||||
|
<li>Three</li>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
});
|
24
ui/src/components/widget/story.js
Normal file
24
ui/src/components/widget/story.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const {
|
||||||
|
storiesOf
|
||||||
|
} = require('@kadira/storybook');
|
||||||
|
|
||||||
|
const Widget = require('./');
|
||||||
|
|
||||||
|
storiesOf('Widget', module)
|
||||||
|
.add('single', () => (
|
||||||
|
<Widget
|
||||||
|
checked
|
||||||
|
name='flag'
|
||||||
|
selectable='single'
|
||||||
|
value='flag_1'
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
alt='england flag'
|
||||||
|
// eslint-disable-next-line max-len
|
||||||
|
src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png'
|
||||||
|
/>
|
||||||
|
<p>Some text</p>
|
||||||
|
</Widget>
|
||||||
|
));
|
@ -24,5 +24,6 @@ module.exports = {
|
|||||||
Tabs: require('./components/tabs'),
|
Tabs: require('./components/tabs'),
|
||||||
Toggle: require('./components/toggle'),
|
Toggle: require('./components/toggle'),
|
||||||
Tooltip: require('./components/tooltip'),
|
Tooltip: require('./components/tooltip'),
|
||||||
|
Textarea: require('./components/textarea'),
|
||||||
Widget: require('./components/widget'),
|
Widget: require('./components/widget'),
|
||||||
};
|
};
|
||||||
|
@ -8,23 +8,8 @@ const {
|
|||||||
const {
|
const {
|
||||||
Base,
|
Base,
|
||||||
Container,
|
Container,
|
||||||
Checkbox,
|
|
||||||
Row,
|
Row,
|
||||||
Column,
|
Column,
|
||||||
Close,
|
|
||||||
Input,
|
|
||||||
List: {
|
|
||||||
ListItemDescription,
|
|
||||||
ListItemHeader,
|
|
||||||
ListItem,
|
|
||||||
ListItemMeta,
|
|
||||||
ListItemOptions,
|
|
||||||
ListItemOutlet,
|
|
||||||
ListItemSubTitle,
|
|
||||||
ListItemTitle,
|
|
||||||
ListItemView,
|
|
||||||
ListItemGroupView
|
|
||||||
},
|
|
||||||
MiniMetric: {
|
MiniMetric: {
|
||||||
MiniMetricGraph,
|
MiniMetricGraph,
|
||||||
MiniMetricMeta,
|
MiniMetricMeta,
|
||||||
@ -32,26 +17,9 @@ const {
|
|||||||
MiniMetricSubtitle,
|
MiniMetricSubtitle,
|
||||||
MiniMetricView
|
MiniMetricView
|
||||||
},
|
},
|
||||||
Modal,
|
|
||||||
Notificaton,
|
|
||||||
Pagination,
|
|
||||||
RangeSlider,
|
|
||||||
Select,
|
|
||||||
SelectCustom,
|
|
||||||
Tabs,
|
|
||||||
Tab,
|
|
||||||
Toggle,
|
|
||||||
Tooltip,
|
|
||||||
Widget,
|
|
||||||
Radio,
|
|
||||||
RadioGroup
|
|
||||||
} = require('../src/');
|
} = require('../src/');
|
||||||
|
|
||||||
const fakeData = require('../src/shared/fake-data');
|
const MiniMetricData = require('../src/components/list/mini-metric-data');
|
||||||
|
|
||||||
const {
|
|
||||||
selectData
|
|
||||||
} = fakeData;
|
|
||||||
|
|
||||||
const styles = {
|
const styles = {
|
||||||
base: {
|
base: {
|
||||||
@ -107,349 +75,6 @@ storiesOf('Grid', module)
|
|||||||
</Base>
|
</Base>
|
||||||
));
|
));
|
||||||
|
|
||||||
storiesOf('Checkbox', module)
|
|
||||||
.add('Default', () => (
|
|
||||||
<Checkbox />
|
|
||||||
))
|
|
||||||
.add('Checked', () => (
|
|
||||||
<Checkbox checked onChange={function noop() {}} />
|
|
||||||
))
|
|
||||||
.add('Disabled', () => (
|
|
||||||
<Checkbox disabled />
|
|
||||||
));
|
|
||||||
|
|
||||||
storiesOf('Radio', module)
|
|
||||||
.add('Default', () => (
|
|
||||||
<Radio>
|
|
||||||
Video killed the radio star
|
|
||||||
</Radio>
|
|
||||||
))
|
|
||||||
.add('Checked', () => (
|
|
||||||
<Radio checked onChange={function noop() {}} />
|
|
||||||
))
|
|
||||||
.add('Disabled', () => (
|
|
||||||
<Radio disabled />
|
|
||||||
));
|
|
||||||
|
|
||||||
storiesOf('Input', module)
|
|
||||||
.add('Default', () => (
|
|
||||||
<Base>
|
|
||||||
<Input placeholder="I am the placeholder" />
|
|
||||||
</Base>
|
|
||||||
))
|
|
||||||
.add('type=email', () => (
|
|
||||||
<Base>
|
|
||||||
<Input
|
|
||||||
label='Email Address'
|
|
||||||
placeholder='Enter email'
|
|
||||||
type='email'
|
|
||||||
>
|
|
||||||
<small>We'll never share your email with anyone else.</small>
|
|
||||||
</Input>
|
|
||||||
</Base>
|
|
||||||
))
|
|
||||||
.add('Error', () => (
|
|
||||||
<Base>
|
|
||||||
<Input
|
|
||||||
error="Somethings missing"
|
|
||||||
placeholder="There was an error"
|
|
||||||
value="alexw/makeusproud.com"
|
|
||||||
/>
|
|
||||||
</Base>
|
|
||||||
));
|
|
||||||
|
|
||||||
storiesOf('Modal', module)
|
|
||||||
.add('Default', () => (
|
|
||||||
<Modal>
|
|
||||||
<h2>This is the Modal</h2>
|
|
||||||
</Modal>
|
|
||||||
));
|
|
||||||
|
|
||||||
storiesOf('Notificaton', module)
|
|
||||||
.add('Default', () => (
|
|
||||||
<Base>
|
|
||||||
<Notificaton>
|
|
||||||
<span>This is the default content</span>
|
|
||||||
</Notificaton>
|
|
||||||
</Base>
|
|
||||||
))
|
|
||||||
.add('Success', () => (
|
|
||||||
<Base>
|
|
||||||
<Notificaton
|
|
||||||
close={function noop() {}}
|
|
||||||
type="success"
|
|
||||||
>
|
|
||||||
<span>This is a success notification that is closable</span>
|
|
||||||
</Notificaton>
|
|
||||||
</Base>
|
|
||||||
))
|
|
||||||
.add('Alert', () => (
|
|
||||||
<Base>
|
|
||||||
<Notificaton type="alert">
|
|
||||||
<span>This is the alert content</span>
|
|
||||||
</Notificaton>
|
|
||||||
</Base>
|
|
||||||
));
|
|
||||||
|
|
||||||
storiesOf('Pagination', module)
|
|
||||||
.add('Default', () => (
|
|
||||||
<Pagination>
|
|
||||||
<a>
|
|
||||||
<span>«</span>
|
|
||||||
<span>Previous</span>
|
|
||||||
</a>
|
|
||||||
<a>1</a>
|
|
||||||
<a active>2</a>
|
|
||||||
<a>3</a>
|
|
||||||
</Pagination>
|
|
||||||
));
|
|
||||||
|
|
||||||
storiesOf('Radio Group', module)
|
|
||||||
.add('Default', () => (
|
|
||||||
<RadioGroup>
|
|
||||||
<Radio name='hello' value='default'>
|
|
||||||
Video killed the radio star
|
|
||||||
</Radio>
|
|
||||||
<Radio name='hello' value='fancy'>
|
|
||||||
Video killed the radio star
|
|
||||||
</Radio>
|
|
||||||
<Radio name='hello' value='none'>
|
|
||||||
Video killed the radio star
|
|
||||||
</Radio>
|
|
||||||
</RadioGroup>
|
|
||||||
));
|
|
||||||
|
|
||||||
storiesOf('RangeSlider', module)
|
|
||||||
.add('Default', () => (
|
|
||||||
<RangeSlider />
|
|
||||||
));
|
|
||||||
|
|
||||||
storiesOf('Select', module)
|
|
||||||
.add('Default', () => (
|
|
||||||
<Select label='example select'>
|
|
||||||
<option>Apple</option>
|
|
||||||
<option>Banana</option>
|
|
||||||
<option>Pear</option>
|
|
||||||
<option>Orange</option>
|
|
||||||
</Select>
|
|
||||||
))
|
|
||||||
.add('multiple', () => (
|
|
||||||
<Select label='example multiple select' multiple>
|
|
||||||
<option>1</option>
|
|
||||||
<option>2</option>
|
|
||||||
<option>3</option>
|
|
||||||
<option>4</option>
|
|
||||||
<option>5</option>
|
|
||||||
</Select>
|
|
||||||
));
|
|
||||||
|
|
||||||
storiesOf('Select Custom', module)
|
|
||||||
.add('Default', () => (
|
|
||||||
<SelectCustom
|
|
||||||
label="This is the label"
|
|
||||||
onChange={function noop() {}}
|
|
||||||
options={selectData}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
.add('Multiple', () => (
|
|
||||||
<SelectCustom
|
|
||||||
label="This is the label"
|
|
||||||
multi
|
|
||||||
onChange={function noop() {}}
|
|
||||||
options={selectData}
|
|
||||||
/>
|
|
||||||
));
|
|
||||||
|
|
||||||
storiesOf('Tabs', module)
|
|
||||||
.add('Default', () => (
|
|
||||||
<Tabs name='my-tab-group'>
|
|
||||||
<Tab title='Containers'>
|
|
||||||
<h1>Containers</h1>
|
|
||||||
</Tab>
|
|
||||||
<Tab title='Users'>
|
|
||||||
<h1>User</h1>
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
));
|
|
||||||
|
|
||||||
storiesOf('Close', module)
|
|
||||||
.add('Default', () => (
|
|
||||||
<Base
|
|
||||||
style={{
|
|
||||||
position: 'relative',
|
|
||||||
width: 60
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Close onClick={function noop() {}} />
|
|
||||||
</Base>
|
|
||||||
));
|
|
||||||
|
|
||||||
storiesOf('Toggle', module)
|
|
||||||
.add('default', () => (
|
|
||||||
<Toggle checked />
|
|
||||||
))
|
|
||||||
.add('checked', () => (
|
|
||||||
<Toggle
|
|
||||||
defaultChecked
|
|
||||||
options={[
|
|
||||||
{
|
|
||||||
label: 'Topology',
|
|
||||||
checked: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'List',
|
|
||||||
checked: false
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
.add('no props', () => (
|
|
||||||
<Toggle />
|
|
||||||
));
|
|
||||||
|
|
||||||
storiesOf('Tooltip', module)
|
|
||||||
.add('default', () => (
|
|
||||||
<Tooltip>
|
|
||||||
<li>One</li>
|
|
||||||
<li>Two</li>
|
|
||||||
<li>Three</li>
|
|
||||||
</Tooltip>
|
|
||||||
))
|
|
||||||
.add('custom position', () => {
|
|
||||||
const arrowPosition = {
|
|
||||||
left: '90%',
|
|
||||||
bottom: '100%'
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<Tooltip arrowPosition={arrowPosition}>
|
|
||||||
<li>One</li>
|
|
||||||
<li>Two</li>
|
|
||||||
<li>Three</li>
|
|
||||||
</Tooltip>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
storiesOf('Widget', module)
|
|
||||||
.add('single', () => (
|
|
||||||
<Widget
|
|
||||||
checked
|
|
||||||
name='flag'
|
|
||||||
selectable='single'
|
|
||||||
value='flag_1'
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
alt='england flag'
|
|
||||||
// eslint-disable-next-line max-len
|
|
||||||
src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png'
|
|
||||||
/>
|
|
||||||
<p>Some text</p>
|
|
||||||
</Widget>
|
|
||||||
));
|
|
||||||
|
|
||||||
const minMetricData = [{
|
|
||||||
firstQuartile: 15,
|
|
||||||
thirdQuartile: 15,
|
|
||||||
median: 15,
|
|
||||||
max: 15,
|
|
||||||
min: 15,
|
|
||||||
}, {
|
|
||||||
firstQuartile: 26,
|
|
||||||
thirdQuartile: 26,
|
|
||||||
median: 26,
|
|
||||||
max: 26,
|
|
||||||
min: 26,
|
|
||||||
}, {
|
|
||||||
firstQuartile: 17,
|
|
||||||
thirdQuartile: 17,
|
|
||||||
median: 17,
|
|
||||||
max: 17,
|
|
||||||
min: 17,
|
|
||||||
}, {
|
|
||||||
firstQuartile: 15,
|
|
||||||
thirdQuartile: 25,
|
|
||||||
median: 19,
|
|
||||||
max: 19,
|
|
||||||
min: 20,
|
|
||||||
}, {
|
|
||||||
firstQuartile: 19,
|
|
||||||
thirdQuartile: 25,
|
|
||||||
median: 21,
|
|
||||||
max: 20,
|
|
||||||
min: 25,
|
|
||||||
}, {
|
|
||||||
firstQuartile: 24,
|
|
||||||
thirdQuartile: 30,
|
|
||||||
median: 25,
|
|
||||||
max: 26,
|
|
||||||
min: 27,
|
|
||||||
}, {
|
|
||||||
firstQuartile: 28,
|
|
||||||
thirdQuartile: 34,
|
|
||||||
median: 30,
|
|
||||||
max: 30,
|
|
||||||
min: 30,
|
|
||||||
}, {
|
|
||||||
firstQuartile: 30,
|
|
||||||
thirdQuartile: 45,
|
|
||||||
median: 35,
|
|
||||||
max: 40,
|
|
||||||
min: 40,
|
|
||||||
}, {
|
|
||||||
firstQuartile: 20,
|
|
||||||
thirdQuartile: 55,
|
|
||||||
median: 45,
|
|
||||||
max: 44,
|
|
||||||
min: 44,
|
|
||||||
}, {
|
|
||||||
firstQuartile: 55,
|
|
||||||
thirdQuartile: 55,
|
|
||||||
median: 55,
|
|
||||||
max: 55,
|
|
||||||
min: 55,
|
|
||||||
}, {
|
|
||||||
firstQuartile: 57,
|
|
||||||
thirdQuartile: 56,
|
|
||||||
median: 57,
|
|
||||||
max: 58,
|
|
||||||
min: 57,
|
|
||||||
}, {
|
|
||||||
firstQuartile: 57,
|
|
||||||
thirdQuartile: 56,
|
|
||||||
median: 56,
|
|
||||||
max: 56,
|
|
||||||
min: 56,
|
|
||||||
}, {
|
|
||||||
firstQuartile: 60,
|
|
||||||
thirdQuartile: 56,
|
|
||||||
median: 60,
|
|
||||||
max: 60,
|
|
||||||
min: 60,
|
|
||||||
}, {
|
|
||||||
firstQuartile: 57,
|
|
||||||
thirdQuartile: 57,
|
|
||||||
median: 57,
|
|
||||||
max: 57,
|
|
||||||
min: 57,
|
|
||||||
}, {
|
|
||||||
firstQuartile: 57,
|
|
||||||
thirdQuartile: 55,
|
|
||||||
median: 55,
|
|
||||||
max: 55,
|
|
||||||
min: 55,
|
|
||||||
}, {
|
|
||||||
firstQuartile: 20,
|
|
||||||
thirdQuartile: 45,
|
|
||||||
median: 45,
|
|
||||||
max: 45,
|
|
||||||
min: 45,
|
|
||||||
}, {
|
|
||||||
firstQuartile: 15,
|
|
||||||
thirdQuartile: 40,
|
|
||||||
median: 30,
|
|
||||||
max: 49,
|
|
||||||
min: 30,
|
|
||||||
}];
|
|
||||||
|
|
||||||
storiesOf('Metrics', module)
|
storiesOf('Metrics', module)
|
||||||
.add('Mini Metric', () => (
|
.add('Mini Metric', () => (
|
||||||
<Base>
|
<Base>
|
||||||
@ -460,7 +85,7 @@ storiesOf('Metrics', module)
|
|||||||
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
||||||
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
||||||
</MiniMetricMeta>
|
</MiniMetricMeta>
|
||||||
<MiniMetricGraph data={minMetricData} />
|
<MiniMetricGraph data={MiniMetricData} />
|
||||||
</MiniMetricView>
|
</MiniMetricView>
|
||||||
</Column>
|
</Column>
|
||||||
<Column xs={3}>
|
<Column xs={3}>
|
||||||
@ -469,7 +94,7 @@ storiesOf('Metrics', module)
|
|||||||
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
||||||
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
||||||
</MiniMetricMeta>
|
</MiniMetricMeta>
|
||||||
<MiniMetricGraph data={minMetricData} />
|
<MiniMetricGraph data={MiniMetricData} />
|
||||||
</MiniMetricView>
|
</MiniMetricView>
|
||||||
</Column>
|
</Column>
|
||||||
<Column xs={3}>
|
<Column xs={3}>
|
||||||
@ -478,298 +103,9 @@ storiesOf('Metrics', module)
|
|||||||
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
||||||
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
||||||
</MiniMetricMeta>
|
</MiniMetricMeta>
|
||||||
<MiniMetricGraph data={minMetricData} />
|
<MiniMetricGraph data={MiniMetricData} />
|
||||||
</MiniMetricView>
|
</MiniMetricView>
|
||||||
</Column>
|
</Column>
|
||||||
</Row>
|
</Row>
|
||||||
</Base>
|
</Base>
|
||||||
));
|
));
|
||||||
|
|
||||||
storiesOf('ListItem', module)
|
|
||||||
.add('default', () => (
|
|
||||||
<Base>
|
|
||||||
<ListItem>
|
|
||||||
<ListItemView>
|
|
||||||
<ListItemMeta>
|
|
||||||
<ListItemTitle>Nginx 01</ListItemTitle>
|
|
||||||
<ListItemSubTitle>4 instances</ListItemSubTitle>
|
|
||||||
<ListItemDescription>Flags</ListItemDescription>
|
|
||||||
</ListItemMeta>
|
|
||||||
<ListItemOutlet>
|
|
||||||
Metrics
|
|
||||||
</ListItemOutlet>
|
|
||||||
</ListItemView>
|
|
||||||
<ListItemOptions>
|
|
||||||
…
|
|
||||||
</ListItemOptions>
|
|
||||||
</ListItem>
|
|
||||||
</Base>
|
|
||||||
))
|
|
||||||
.add('collapsed', () => (
|
|
||||||
<Base>
|
|
||||||
<ListItem collapsed>
|
|
||||||
<ListItemView>
|
|
||||||
<ListItemMeta>
|
|
||||||
<ListItemTitle>Nginx 01</ListItemTitle>
|
|
||||||
<ListItemSubTitle>4 instances</ListItemSubTitle>
|
|
||||||
<ListItemDescription>Flags</ListItemDescription>
|
|
||||||
</ListItemMeta>
|
|
||||||
<ListItemOutlet>
|
|
||||||
Metrics
|
|
||||||
</ListItemOutlet>
|
|
||||||
</ListItemView>
|
|
||||||
<ListItemOptions>
|
|
||||||
…
|
|
||||||
</ListItemOptions>
|
|
||||||
</ListItem>
|
|
||||||
</Base>
|
|
||||||
))
|
|
||||||
.add('headed', () => (
|
|
||||||
<Base>
|
|
||||||
<ListItem headed>
|
|
||||||
<ListItemHeader>
|
|
||||||
<ListItemMeta>
|
|
||||||
<ListItemTitle>Nginx 01</ListItemTitle>
|
|
||||||
<ListItemSubTitle>4 instances</ListItemSubTitle>
|
|
||||||
<ListItemDescription>Flags</ListItemDescription>
|
|
||||||
</ListItemMeta>
|
|
||||||
<ListItemOptions>
|
|
||||||
…
|
|
||||||
</ListItemOptions>
|
|
||||||
</ListItemHeader>
|
|
||||||
<ListItemView>
|
|
||||||
<ListItemMeta>
|
|
||||||
<ListItemDescription>Flags</ListItemDescription>
|
|
||||||
</ListItemMeta>
|
|
||||||
<ListItemOutlet>
|
|
||||||
Metrics
|
|
||||||
</ListItemOutlet>
|
|
||||||
</ListItemView>
|
|
||||||
</ListItem>
|
|
||||||
</Base>
|
|
||||||
))
|
|
||||||
.add('headed collapsed', () => (
|
|
||||||
<Base>
|
|
||||||
<ListItem collapsed headed>
|
|
||||||
<ListItemHeader>
|
|
||||||
<ListItemMeta>
|
|
||||||
<ListItemTitle>Nginx 01</ListItemTitle>
|
|
||||||
<ListItemSubTitle>4 instances</ListItemSubTitle>
|
|
||||||
<ListItemDescription>Flags</ListItemDescription>
|
|
||||||
</ListItemMeta>
|
|
||||||
<ListItemOptions>
|
|
||||||
…
|
|
||||||
</ListItemOptions>
|
|
||||||
</ListItemHeader>
|
|
||||||
<ListItemView>
|
|
||||||
<ListItemMeta>
|
|
||||||
<ListItemDescription>Flags</ListItemDescription>
|
|
||||||
</ListItemMeta>
|
|
||||||
<ListItemOutlet>
|
|
||||||
Metrics
|
|
||||||
</ListItemOutlet>
|
|
||||||
</ListItemView>
|
|
||||||
</ListItem>
|
|
||||||
</Base>
|
|
||||||
))
|
|
||||||
.add('stacked', () => (
|
|
||||||
<Base>
|
|
||||||
<ListItem stacked>
|
|
||||||
<ListItemView>
|
|
||||||
<ListItemMeta>
|
|
||||||
<ListItemTitle>Nginx 01</ListItemTitle>
|
|
||||||
<ListItemSubTitle>4 instances</ListItemSubTitle>
|
|
||||||
<ListItemDescription>Flags</ListItemDescription>
|
|
||||||
</ListItemMeta>
|
|
||||||
<ListItemOutlet>
|
|
||||||
Metrics
|
|
||||||
</ListItemOutlet>
|
|
||||||
</ListItemView>
|
|
||||||
<ListItemOptions>
|
|
||||||
…
|
|
||||||
</ListItemOptions>
|
|
||||||
</ListItem>
|
|
||||||
</Base>
|
|
||||||
))
|
|
||||||
.add('view-group', () => (
|
|
||||||
<Base>
|
|
||||||
<ListItem headed>
|
|
||||||
<ListItemHeader>
|
|
||||||
<ListItemMeta>
|
|
||||||
<ListItemTitle>Percona</ListItemTitle>
|
|
||||||
<ListItemSubTitle>5 instances</ListItemSubTitle>
|
|
||||||
<ListItemDescription>Flags</ListItemDescription>
|
|
||||||
</ListItemMeta>
|
|
||||||
<ListItemOptions>…</ListItemOptions>
|
|
||||||
</ListItemHeader>
|
|
||||||
<ListItemGroupView>
|
|
||||||
<ListItem flat>
|
|
||||||
<ListItemView>
|
|
||||||
<ListItemMeta>
|
|
||||||
<ListItemTitle>percona_database</ListItemTitle>
|
|
||||||
</ListItemMeta>
|
|
||||||
<ListItemOutlet>
|
|
||||||
Metrics
|
|
||||||
</ListItemOutlet>
|
|
||||||
</ListItemView>
|
|
||||||
</ListItem>
|
|
||||||
<ListItem flat>
|
|
||||||
<ListItemView>
|
|
||||||
<ListItemMeta>
|
|
||||||
<ListItemTitle>percona_database</ListItemTitle>
|
|
||||||
<ListItemSubTitle>5 instances</ListItemSubTitle>
|
|
||||||
<ListItemDescription>Flags</ListItemDescription>
|
|
||||||
</ListItemMeta>
|
|
||||||
<ListItemOutlet>
|
|
||||||
Metrics
|
|
||||||
</ListItemOutlet>
|
|
||||||
</ListItemView>
|
|
||||||
</ListItem>
|
|
||||||
<ListItem flat stacked>
|
|
||||||
<ListItemView>
|
|
||||||
<ListItemMeta>
|
|
||||||
<ListItemTitle>percona_database</ListItemTitle>
|
|
||||||
<ListItemSubTitle>5 instances</ListItemSubTitle>
|
|
||||||
</ListItemMeta>
|
|
||||||
<ListItemOutlet>
|
|
||||||
Metrics
|
|
||||||
</ListItemOutlet>
|
|
||||||
</ListItemView>
|
|
||||||
</ListItem>
|
|
||||||
</ListItemGroupView>
|
|
||||||
</ListItem>
|
|
||||||
</Base>
|
|
||||||
))
|
|
||||||
.add('view-group with metrics', () => (
|
|
||||||
<Base>
|
|
||||||
<ListItem headed>
|
|
||||||
<ListItemHeader>
|
|
||||||
<ListItemMeta>
|
|
||||||
<ListItemTitle>Percona</ListItemTitle>
|
|
||||||
<ListItemSubTitle>5 instances</ListItemSubTitle>
|
|
||||||
<ListItemDescription>Flags</ListItemDescription>
|
|
||||||
</ListItemMeta>
|
|
||||||
<ListItemOptions>…</ListItemOptions>
|
|
||||||
</ListItemHeader>
|
|
||||||
<ListItemGroupView>
|
|
||||||
<ListItem flat>
|
|
||||||
<ListItemView>
|
|
||||||
<ListItemMeta>
|
|
||||||
<ListItemTitle>percona_database</ListItemTitle>
|
|
||||||
</ListItemMeta>
|
|
||||||
<ListItemOutlet>
|
|
||||||
<Row>
|
|
||||||
<Column xs={4}>
|
|
||||||
<MiniMetricView borderless>
|
|
||||||
<MiniMetricMeta>
|
|
||||||
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
|
||||||
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
|
||||||
</MiniMetricMeta>
|
|
||||||
<MiniMetricGraph data={minMetricData} />
|
|
||||||
</MiniMetricView>
|
|
||||||
</Column>
|
|
||||||
<Column xs={4}>
|
|
||||||
<MiniMetricView borderless>
|
|
||||||
<MiniMetricMeta>
|
|
||||||
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
|
||||||
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
|
||||||
</MiniMetricMeta>
|
|
||||||
<MiniMetricGraph data={minMetricData} />
|
|
||||||
</MiniMetricView>
|
|
||||||
</Column>
|
|
||||||
<Column xs={4}>
|
|
||||||
<MiniMetricView borderless>
|
|
||||||
<MiniMetricMeta>
|
|
||||||
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
|
||||||
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
|
||||||
</MiniMetricMeta>
|
|
||||||
<MiniMetricGraph data={minMetricData} />
|
|
||||||
</MiniMetricView>
|
|
||||||
</Column>
|
|
||||||
</Row>
|
|
||||||
</ListItemOutlet>
|
|
||||||
</ListItemView>
|
|
||||||
</ListItem>
|
|
||||||
<ListItem flat>
|
|
||||||
<ListItemView>
|
|
||||||
<ListItemMeta>
|
|
||||||
<ListItemTitle>percona_database</ListItemTitle>
|
|
||||||
<ListItemSubTitle>5 instances</ListItemSubTitle>
|
|
||||||
<ListItemDescription>Flags</ListItemDescription>
|
|
||||||
</ListItemMeta>
|
|
||||||
<ListItemOutlet>
|
|
||||||
<Row>
|
|
||||||
<Column xs={4}>
|
|
||||||
<MiniMetricView borderless>
|
|
||||||
<MiniMetricMeta>
|
|
||||||
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
|
||||||
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
|
||||||
</MiniMetricMeta>
|
|
||||||
<MiniMetricGraph data={minMetricData} />
|
|
||||||
</MiniMetricView>
|
|
||||||
</Column>
|
|
||||||
<Column xs={4}>
|
|
||||||
<MiniMetricView borderless>
|
|
||||||
<MiniMetricMeta>
|
|
||||||
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
|
||||||
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
|
||||||
</MiniMetricMeta>
|
|
||||||
<MiniMetricGraph data={minMetricData} />
|
|
||||||
</MiniMetricView>
|
|
||||||
</Column>
|
|
||||||
<Column xs={4}>
|
|
||||||
<MiniMetricView borderless>
|
|
||||||
<MiniMetricMeta>
|
|
||||||
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
|
||||||
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
|
||||||
</MiniMetricMeta>
|
|
||||||
<MiniMetricGraph data={minMetricData} />
|
|
||||||
</MiniMetricView>
|
|
||||||
</Column>
|
|
||||||
</Row>
|
|
||||||
</ListItemOutlet>
|
|
||||||
</ListItemView>
|
|
||||||
</ListItem>
|
|
||||||
<ListItem flat stacked>
|
|
||||||
<ListItemView>
|
|
||||||
<ListItemMeta>
|
|
||||||
<ListItemTitle>percona_database</ListItemTitle>
|
|
||||||
<ListItemSubTitle>5 instances</ListItemSubTitle>
|
|
||||||
</ListItemMeta>
|
|
||||||
<ListItemOutlet>
|
|
||||||
<Row>
|
|
||||||
<Column xs={4}>
|
|
||||||
<MiniMetricView borderless>
|
|
||||||
<MiniMetricMeta>
|
|
||||||
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
|
||||||
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
|
||||||
</MiniMetricMeta>
|
|
||||||
<MiniMetricGraph data={minMetricData} />
|
|
||||||
</MiniMetricView>
|
|
||||||
</Column>
|
|
||||||
<Column xs={4}>
|
|
||||||
<MiniMetricView borderless>
|
|
||||||
<MiniMetricMeta>
|
|
||||||
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
|
||||||
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
|
||||||
</MiniMetricMeta>
|
|
||||||
<MiniMetricGraph data={minMetricData} />
|
|
||||||
</MiniMetricView>
|
|
||||||
</Column>
|
|
||||||
<Column xs={4}>
|
|
||||||
<MiniMetricView borderless>
|
|
||||||
<MiniMetricMeta>
|
|
||||||
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
|
||||||
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
|
||||||
</MiniMetricMeta>
|
|
||||||
<MiniMetricGraph data={minMetricData} />
|
|
||||||
</MiniMetricView>
|
|
||||||
</Column>
|
|
||||||
</Row>
|
|
||||||
</ListItemOutlet>
|
|
||||||
</ListItemView>
|
|
||||||
</ListItem>
|
|
||||||
</ListItemGroupView>
|
|
||||||
</ListItem>
|
|
||||||
</Base>
|
|
||||||
));
|
|
||||||
|
Loading…
Reference in New Issue
Block a user