1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-13 06:40:06 +02:00

Add icons to service list and tidy up

This commit is contained in:
JUDIT GRESKOVITS 2017-03-20 15:58:47 +00:00 committed by Judit Greskovits
parent 9a1a84510f
commit c06bbf4e31
11 changed files with 138 additions and 24 deletions

View File

@ -1,20 +1,33 @@
import React from 'react';
import { MetricGraph, MetricView } from '@ui/components/metric';
import PropTypes from '@root/prop-types';
import {
MetricGraph,
MetricView,
MiniMetricMeta,
MiniMetricTitle,
MiniMetricSubtitle
} from '@ui/components/metric';
const MetricItem = ({
uuid,
data
}) => (
<MetricView borderless mini>
<MetricGraph data={data} />
<MiniMetricMeta>
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
</MiniMetricMeta>
<MetricGraph
data={data}
width={160}
height={72}
/>
</MetricView>
);
MetricItem.propTypes = {
uuid: React.PropTypes.string,
data: PropTypes.data
data: React.PropTypes.data
};
export default MetricItem;

View File

@ -5,6 +5,11 @@ import { Checkbox, FormGroup } from '@ui/components/form';
import PropTypes from '@root/prop-types';
import forceArray from 'force-array';
import React from 'react';
import {
DataCentersIcon,
HealthyIcon,
InstancesMultipleIcon
} from '@ui/components/icons';
import {
ListItem,
@ -15,7 +20,8 @@ import {
ListItemDescription,
ListItemGroupView,
ListItemOptions,
ListItemHeader
ListItemHeader,
ListItemInfo
} from '@ui/components/list';
const StyledFormGroup = styled(FormGroup)`
@ -36,7 +42,7 @@ const ServiceItem = ({
service = {}
}) => {
const isChild = !!service.parent;
console.log('service = ', service);
const childs = forceArray(service.services).map((service) => (
<ServiceItem
key={service.uuid}
@ -69,10 +75,6 @@ const ServiceItem = ({
<ListItemSubTitle>{service.instances} instances</ListItemSubTitle>
);
const description = (
<ListItemDescription>Flags</ListItemDescription>
);
const onOptionsClick = (evt) => {
onQuickActions(evt, service.uuid);
};
@ -81,12 +83,20 @@ const ServiceItem = ({
<ListItemHeader>
<ListItemMeta>
{title}
{subtitle}
{description}
<ListItemDescription>
<ListItemInfo
icon={<InstancesMultipleIcon />}
iconPosition='top'
label={`${service.instances} ${service.instances > 1 ?
'instances' : 'instance' }`}
/>
<ListItemInfo
icon={<DataCentersIcon />}
label={service.datacenters[0].id}
/>
</ListItemDescription>
</ListItemMeta>
<ListItemOptions onClick={onOptionsClick}>
</ListItemOptions>
<ListItemOptions onClick={onOptionsClick} />
</ListItemHeader>
);
@ -99,7 +109,12 @@ const ServiceItem = ({
<ListItemMeta>
{isChild && title}
{isChild && subtitle}
{description}
<ListItemDescription>
<ListItemInfo
icon={<HealthyIcon />}
label='Healthy'
/>
</ListItemDescription>
</ListItemMeta>
<ItemMetricGroup
datasets={service.metrics}

View File

@ -9,6 +9,7 @@ import moment from 'moment';
const account = (state) => get(state, 'account.data', {});
const accountUi = (state) => get(state, 'account.ui', {});
const datacenters = (state) => get(state, 'datacenters.data', {});
const orgUiSections = (state) => get(state, 'orgs.ui.sections', []);
const projectUiSections = (state) => get(state, 'projects.ui.sections', []);
const serviceUiTooltip = (state) => get(state, 'services.ui.tooltip', []);
@ -267,8 +268,9 @@ const datasets = (
});
const servicesByProjectId = (projectId, metricOptions) => createSelector(
[services, projectById(projectId), collapsedServices, metricsData, metricsUI],
(services, project, collapsed, metrics, metricsUI) =>
[services, projectById(projectId), collapsedServices,
instances, datacenters, metricsData, metricsUI],
(services, project, collapsed, instances, datacenters, metrics, metricsUI) =>
services.filter((s) => s.project === project.uuid)
.map((service) => ({
...service,
@ -278,6 +280,14 @@ const servicesByProjectId = (projectId, metricOptions) => createSelector(
.map((service) => ({
...service,
metrics: datasets(metrics, service.metrics, metricsUI, metricOptions),
datacenters: instances.reduce((acc, instance) => {
if(instance.service === service.uuid) {
acc.push(instance);
}
return acc;
}, []).map((instance) =>
// TODO ensure uniqueness here
find(datacenters, ['uuid', instance.datacenter])),
collapsed: isCollapsed(collapsed, service.uuid),
services: service.services.map((service) => ({
...service,

View File

@ -9,6 +9,7 @@ const style = css`
${is('secondary')`
color: ${colors.base.white};
text-decoration: none;
`}
`;

View File

@ -0,0 +1,9 @@
import { Baseline } from '../../shared/composers';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import DataCentersIcon from './svg/data-centers.svg';
export default Baseline(
DataCentersIcon
);

View File

@ -1,4 +1,5 @@
export { default as CloseIcon } from './close';
export { default as DataCentersIcon } from './data-centers';
export { default as HealthyIcon } from './healthy';
export { default as HeartIcon } from './heart';
export { default as InputConfirmIcon } from './input-confirm';

View File

@ -8,6 +8,7 @@ import ListItemOutlet from './outlet';
import ListItemSubTitle from './subtitle';
import ListItemTitle from './title';
import ListItemView from './view';
import ListItemInfo from './info';
export {
ListItemDescription,
@ -19,5 +20,6 @@ export {
ListItemOutlet,
ListItemSubTitle,
ListItemTitle,
ListItemView
ListItemView,
ListItemInfo
};

View File

@ -0,0 +1,43 @@
import React from 'react';
import styled from 'styled-components';
import { unitcalc } from '../../shared/functions';
import { P } from '../base-elements';
const StyledContainer = styled.div`
display: inline-block;
margin: 0 ${unitcalc(2)};
`;
const StyledIcon = styled.div`
display: inline-block;
margin-right: ${unitcalc(1)};
vertical-align: ${props =>
props.iconPosition ?
props.iconPosition : 'text-top'};
`;
const StyledP = styled(P)`
display: inline-block;
margin: 0;
`;
const Info = ({
icon,
iconPosition,
label
}) => (
<StyledContainer>
<StyledIcon iconPosition={iconPosition}>
{icon}
</StyledIcon>
<StyledP>{label}</StyledP>
</StyledContainer>
);
Info.propTypes = {
icon: React.PropTypes.node,
iconPosition: React.PropTypes.string,
label: React.PropTypes.string
};
export default Info;

View File

@ -12,11 +12,12 @@ const Nav = styled.nav`
box-sizing: border-box;
${is('fromHeader')`
border-left-color: ${colors.base.primary};
border-left-color: ${colors.base.primaryDesaturatedActive};
`};
`;
const StyledButton = styled(Button)`
position: relative;
border-width: 0;
box-shadow: none;
width: 100%;
@ -46,8 +47,20 @@ const StyledButton = styled(Button)`
}
`;
const StyledContainer = styled.div`
position: absolute;
left: 50%;
`;
const StyledCircle = styled.div`
margin: 0 0 2px -2px;
border-radius: 50%;
background-color: ${colors.base.white};
width: 4px;
height: 4px;
`;
const Options = ({
children,
...props
}) => {
const render = ({
@ -61,7 +74,11 @@ const Options = ({
rect
{...props}
>
{children}
<StyledContainer>
<StyledCircle />
<StyledCircle />
<StyledCircle />
</StyledContainer>
</StyledButton>
</Nav>
);
@ -74,7 +91,6 @@ const Options = ({
};
Options.propTypes = {
children: React.PropTypes.node,
collapsed: React.PropTypes.bool,
fromHeader: React.PropTypes.bool
};

View File

@ -1,5 +1,5 @@
import { Subscriber } from 'react-broadcast';
import { is } from '../../shared/functions';
import { is, remcalc } from '../../shared/functions';
import { Baseline } from '../../shared/composers';
import Column from '../column';
import styled from 'styled-components';
@ -7,6 +7,9 @@ import React from 'react';
const StyledColumn = styled(Column)`
display: block;
min-width: auto;
max-width: ${remcalc(480)};
margin-left: auto;
${is('collapsed')`
display: none;

View File

@ -5,6 +5,7 @@ import styled from 'styled-components';
import React from 'react';
const OuterBox = styled.div`
box-sizing: border-box;
height: ${remcalc(53)};
padding: ${remcalc(8)} ${remcalc(12)};
border-bottom: ${remcalc(1)} solid ${colors.seperator};