mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
Merge branch 'master' of https://github.com/yldio/joyent-portal
This commit is contained in:
commit
df66179b5d
@ -1,12 +1,13 @@
|
||||
const React = require('react');
|
||||
// const ReactRouter = require('react-router');
|
||||
const ReactRouter = require('react-router');
|
||||
|
||||
const Anchor = require('@ui/components/anchor');
|
||||
const List = require('@ui/components/list');
|
||||
const PropTypes = require('@root/prop-types');
|
||||
|
||||
// const {
|
||||
// Link
|
||||
// } = ReactRouter;
|
||||
const {
|
||||
Link
|
||||
} = ReactRouter;
|
||||
|
||||
const {
|
||||
ListItem,
|
||||
@ -21,15 +22,16 @@ const {
|
||||
ListItemHeader
|
||||
} = List;
|
||||
|
||||
const Service = ({
|
||||
const ServiceItem = ({
|
||||
org = '',
|
||||
project = '',
|
||||
service = {}
|
||||
}) => {
|
||||
// const to = `/${org}/projects/${project}/services/${service.id}`;
|
||||
const to = `/${org}/projects/${project}/services/${service.id}`;
|
||||
|
||||
const childs = service.services.map((service) => (
|
||||
<ListItem
|
||||
collapsed={service.collapsed}
|
||||
flat
|
||||
key={service.uuid}
|
||||
stacked={service.instances > 1}
|
||||
@ -62,10 +64,21 @@ const Service = ({
|
||||
);
|
||||
|
||||
return (
|
||||
<ListItem headed>
|
||||
<ListItem
|
||||
collapsed={service.collapsed}
|
||||
headed
|
||||
>
|
||||
<ListItemHeader>
|
||||
<ListItemMeta>
|
||||
<ListItemTitle>{service.name}</ListItemTitle>
|
||||
<ListItemTitle>
|
||||
<Link to={to}>
|
||||
{Anchor.fn(
|
||||
<Anchor secondary>
|
||||
{service.name}
|
||||
</Anchor>
|
||||
)}
|
||||
</Link>
|
||||
</ListItemTitle>
|
||||
<ListItemSubTitle>{service.instances} instance</ListItemSubTitle>
|
||||
</ListItemMeta>
|
||||
<ListItemOptions>…</ListItemOptions>
|
||||
@ -75,10 +88,10 @@ const Service = ({
|
||||
);
|
||||
};
|
||||
|
||||
Service.propTypes = {
|
||||
ServiceItem.propTypes = {
|
||||
org: React.PropTypes.string,
|
||||
project: React.PropTypes.string,
|
||||
service: PropTypes.service
|
||||
};
|
||||
|
||||
module.exports = Service;
|
||||
module.exports = ServiceItem;
|
@ -3,7 +3,7 @@ const ReactRedux = require('react-redux');
|
||||
|
||||
const EmptyServices = require('@components/empty/services');
|
||||
const PropTypes = require('@root/prop-types');
|
||||
const Service = require('./service');
|
||||
const ServiceItem = require('@components/service-item');
|
||||
const selectors = require('@state/selectors');
|
||||
|
||||
const {
|
||||
@ -26,7 +26,7 @@ const Services = ({
|
||||
);
|
||||
|
||||
const serviceList = services.map((service) => (
|
||||
<Service
|
||||
<ServiceItem
|
||||
key={service.uuid}
|
||||
org={org.id}
|
||||
project={project.id}
|
||||
|
@ -160,6 +160,7 @@
|
||||
},
|
||||
"services": {
|
||||
"ui": {
|
||||
"collapsed": [],
|
||||
"sections": [
|
||||
"summary",
|
||||
"instances",
|
||||
|
@ -10,5 +10,6 @@ const APP = constantCase(process.env['APP_NAME']);
|
||||
module.exports = {
|
||||
...require('@state/thunks'),
|
||||
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`)
|
||||
};
|
||||
|
@ -1,9 +1,23 @@
|
||||
const ReduxActions = require('redux-actions');
|
||||
|
||||
const actions = require('@state/actions');
|
||||
|
||||
const {
|
||||
handleActions
|
||||
} = ReduxActions;
|
||||
|
||||
const {
|
||||
toggleServiceCollapsed
|
||||
} = actions;
|
||||
|
||||
module.exports = handleActions({
|
||||
'x': (state) => state // somehow handleActions needs at least one reducer
|
||||
[toggleServiceCollapsed.toString()]: (state, action) => ({
|
||||
...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]
|
||||
}
|
||||
})
|
||||
}, {});
|
||||
|
@ -15,6 +15,7 @@ const serviceUiSections = (state) => get(state, 'services.ui.sections', []);
|
||||
const orgs = (state) => get(state, 'orgs.data', []);
|
||||
const projects = (state) => get(state, 'projects.data', []);
|
||||
const services = (state) => get(state, 'services.data', []);
|
||||
const collapsedServices = (state) => get(state, 'services.ui.collapsed', []);
|
||||
const instances = (state) => get(state, 'instances.data', []);
|
||||
|
||||
const projectById = (projectId) => createSelector(
|
||||
@ -45,19 +46,28 @@ const orgSections = (orgId) => createSelector(
|
||||
);
|
||||
|
||||
const servicesByProjectId = (projectId) => createSelector(
|
||||
[services, projectById(projectId)],
|
||||
(services, project) =>
|
||||
[services, projectById(projectId), collapsedServices],
|
||||
(services, project, collapsed) =>
|
||||
services.filter((s) => s.project === project.uuid)
|
||||
.map((service) => ({
|
||||
...service,
|
||||
services: services.filter((s) => s.parent === service.uuid)
|
||||
}))
|
||||
.filter((s) => !s.parent)
|
||||
.map((service) => ({
|
||||
...service,
|
||||
collapsed: collapsed.indexOf(service.uuid) >= 0,
|
||||
services: service.services.map((service) => ({
|
||||
...service,
|
||||
collapsed: collapsed.indexOf(service.uuid) >= 0
|
||||
}))
|
||||
}))
|
||||
);
|
||||
|
||||
const instancesByServiceId = (serviceId) => createSelector(
|
||||
[instances, serviceById(serviceId)],
|
||||
(instances, service) => instances.filter((i) => i.service === service.uuid)
|
||||
(instances, service) =>
|
||||
instances.filter((i) => i.service === service.uuid)
|
||||
);
|
||||
|
||||
|
||||
|
26
ui/src/components/anchor/index.js
Normal file
26
ui/src/components/anchor/index.js
Normal file
@ -0,0 +1,26 @@
|
||||
const constants = require('../../shared/constants');
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
colors
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const color = (props) => props.secondary
|
||||
? colors.brandSecondaryLink
|
||||
: colors.brandPrimaryLink;
|
||||
|
||||
const Anchor = styled.a`
|
||||
color: ${color} !important;
|
||||
`;
|
||||
|
||||
module.exports = Anchor;
|
||||
|
||||
module.exports.fn = (element) => (props) => React.cloneElement(element, {
|
||||
...element.props,
|
||||
...props
|
||||
}, element.props.children);
|
@ -5,9 +5,9 @@ const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
forms,
|
||||
links,
|
||||
tables,
|
||||
typography
|
||||
typography,
|
||||
colors
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
@ -31,12 +31,12 @@ const fontFilenames = [
|
||||
|
||||
module.exports = styled.div`
|
||||
${generateFonts(fontFamilies, fontFilenames)};
|
||||
|
||||
|
||||
font-family: 'LibreFranklin', -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: #373A3C;
|
||||
color: ${colors.fonts.regular};
|
||||
background-color: #FFFFFF;
|
||||
|
||||
/**************************************************************************
|
||||
@ -343,13 +343,12 @@ module.exports = styled.div`
|
||||
*/
|
||||
|
||||
& a {
|
||||
color: ${links.color};
|
||||
text-decoration: ${links.decoration};
|
||||
color: ${colors.brandPrimaryLink};
|
||||
text-decoration: underline;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: ${links.hoverColor};
|
||||
text-decoration: ${links.hoverDecoration};
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@ -364,8 +363,7 @@ module.exports = styled.div`
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: ${links.hoverColor};
|
||||
text-decoration: ${links.hoverDecoration};
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
39
ui/src/components/close/index.js
Normal file
39
ui/src/components/close/index.js
Normal file
@ -0,0 +1,39 @@
|
||||
const constants = require('../../shared/constants');
|
||||
const fns = require('../../shared/functions');
|
||||
const composers = require('../../shared/composers');
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
const closeIcon = require('../../shared/assets/close');
|
||||
|
||||
const {
|
||||
colors
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
remcalc
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const Close = ({
|
||||
style,
|
||||
onClick
|
||||
}) => {
|
||||
return (
|
||||
<StyledButton
|
||||
style={style}
|
||||
onClick={onClick}
|
||||
>
|
||||
<img src={closeIcon} alt="Close"/>
|
||||
</StyledButton>
|
||||
);
|
||||
};
|
||||
|
||||
Close.propTypes = {
|
||||
style: React.PropTypes.object,
|
||||
onClick: React.PropTypes.func
|
||||
};
|
||||
|
||||
module.exports = Close;
|
65
ui/src/components/close/readme.md
Normal file
65
ui/src/components/close/readme.md
Normal file
@ -0,0 +1,65 @@
|
||||
# `<Notification>`
|
||||
|
||||
## 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 Notificaton = require('./index.js');
|
||||
const styles = require('./style.css');
|
||||
|
||||
const style = {
|
||||
marginBottom: 0
|
||||
}
|
||||
|
||||
nmodule.exports = ReactDOM.renderToString(
|
||||
<Base>
|
||||
<Row>
|
||||
<Column>
|
||||
<Notificaton type='warning' icon='exclamation'>
|
||||
<p style={style}>This is the warning content</p>
|
||||
</Notificaton>
|
||||
</Column>
|
||||
</Row>
|
||||
<Row>
|
||||
<Column>
|
||||
<Notificaton type='warning' icon='question'>
|
||||
<p style={style}>This is the question content</p>
|
||||
</Notificaton>
|
||||
</Column>
|
||||
</Row>
|
||||
<Row>
|
||||
<Column>
|
||||
<Notificaton type='alert' icon='exclamation'>
|
||||
<p style={style}>This is the alert content</p>
|
||||
</Notificaton>
|
||||
</Column>
|
||||
</Row>
|
||||
</Base>
|
||||
);
|
||||
```
|
||||
|
||||
## usage
|
||||
|
||||
```js
|
||||
const React = require('react');
|
||||
const Notificaton = require('ui/avatar');
|
||||
|
||||
module.exports = () => {
|
||||
return (
|
||||
<Notificaton type='warning' icon='question'>
|
||||
<p>This is the warning content</p>
|
||||
</Notificaton>
|
||||
<Notificaton type='warning' icon='question'>
|
||||
<p>This is the question content</p>
|
||||
</Notificaton>
|
||||
<Notificaton type='alert' icon='exclamation'>
|
||||
<p>This is the alert content</p>
|
||||
</Notificaton>
|
||||
);
|
||||
}
|
||||
```
|
@ -16,26 +16,28 @@ const paddingTop = (props) => props.headed && !props.fromHeader
|
||||
? remcalc(47)
|
||||
: remcalc(0);
|
||||
|
||||
const display = (props) => props.headed && !props.fromHeader && props.collapsed
|
||||
? 'none'
|
||||
: 'flex';
|
||||
|
||||
const StyledView = styled(Row)`
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
padding-top: ${paddingTop};
|
||||
display: ${display};
|
||||
`;
|
||||
|
||||
const View = (props) => (
|
||||
<StyledView name='list-item-view' {...props}>
|
||||
{props.children}
|
||||
</StyledView>
|
||||
);
|
||||
const View = (props) => {
|
||||
const hide = props.headed && !props.fromHeader && props.collapsed;
|
||||
|
||||
return hide ? null : (
|
||||
<StyledView name='list-item-view' {...props}>
|
||||
{props.children}
|
||||
</StyledView>
|
||||
);
|
||||
};
|
||||
|
||||
View.propTypes = {
|
||||
children: React.PropTypes.node
|
||||
children: React.PropTypes.node,
|
||||
collapsed: React.PropTypes.bool,
|
||||
fromHeader: React.PropTypes.bool,
|
||||
headed: React.PropTypes.bool
|
||||
};
|
||||
|
||||
module.exports = transferProps([
|
||||
|
115
ui/src/components/mini-metric/graph.js
Normal file
115
ui/src/components/mini-metric/graph.js
Normal file
@ -0,0 +1,115 @@
|
||||
const buildArray = require('build-array');
|
||||
const Chart = require('chart.js');
|
||||
const fns = require('../../shared/functions');
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
const whisker = require('chartjs-chart-box-plot');
|
||||
|
||||
whisker(Chart);
|
||||
|
||||
const {
|
||||
remcalc
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const Container = styled.div`
|
||||
position: relative;
|
||||
height: ${remcalc(72)};
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const Canvas = styled.canvas`
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
`;
|
||||
|
||||
class Graph extends React.Component {
|
||||
componentDidMount() {
|
||||
const {
|
||||
data = [],
|
||||
labels = 0,
|
||||
max = 100,
|
||||
min = 0
|
||||
} = this.props;
|
||||
|
||||
const _labels = !Array.isArray(labels)
|
||||
? buildArray(labels || data.length).map((v, i) => '')
|
||||
: labels;
|
||||
|
||||
this._chart = new Chart(this._refs.component, {
|
||||
type: 'whisker',
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
barPercentage: 1.0,
|
||||
categoryPercentage: 1.0
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
min: min,
|
||||
max: max
|
||||
}
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
data: {
|
||||
labels: _labels,
|
||||
datasets: [{
|
||||
data
|
||||
}]
|
||||
}
|
||||
});
|
||||
}
|
||||
componentWillReceiveProps(nextProps) {
|
||||
const {
|
||||
data = [],
|
||||
labels = 0
|
||||
} = this.props;
|
||||
|
||||
const _labels = !Array.isArray(labels)
|
||||
? buildArray(labels || data.length).map((v, i) => '')
|
||||
: labels;
|
||||
|
||||
this._chart.data.datasets = [{
|
||||
data
|
||||
}];
|
||||
|
||||
this._chart.data.labels = _labels;
|
||||
this._chart.update(0);
|
||||
}
|
||||
ref(name) {
|
||||
this._refs = this._refs || {};
|
||||
|
||||
return (el) => {
|
||||
this._refs[name] = el;
|
||||
};
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<Container>
|
||||
<Canvas
|
||||
innerRef={this.ref('component')}
|
||||
/>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Graph.propTypes = {
|
||||
data: React.PropTypes.array,
|
||||
labels: React.PropTypes.number,
|
||||
max: React.PropTypes.number,
|
||||
min: React.PropTypes.number
|
||||
};
|
||||
|
||||
module.exports = Graph;
|
@ -1,166 +1,7 @@
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
const constants = require('../../shared/constants');
|
||||
|
||||
const {
|
||||
colors
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const buildArray = require('build-array');
|
||||
const Chart = require('chart.js');
|
||||
const whisker = require('chartjs-chart-box-plot');
|
||||
|
||||
whisker(Chart);
|
||||
|
||||
const StyledDiv = styled.div`
|
||||
height: 127px;
|
||||
width: 158px;
|
||||
background-color: ${colors.miniBackground};
|
||||
border: solid 1px ${colors.borderSecondary};
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 9px;
|
||||
height: 127px;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(216, 216, 216, 0));
|
||||
content: '';
|
||||
}
|
||||
`;
|
||||
|
||||
const Devider = styled.div`
|
||||
width: 158px;
|
||||
height: 1px;
|
||||
background-color: ${colors.seperator}
|
||||
`;
|
||||
|
||||
const TextMetric = styled.div`
|
||||
height: 38px;
|
||||
padding: 8px 12px;
|
||||
`;
|
||||
|
||||
const InnerTextBox = styled.div`
|
||||
width: 136px;
|
||||
height: 36px;
|
||||
font-family: 'Libre Franklin', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 18px;
|
||||
text-align: right;
|
||||
color: ${colors.regular};
|
||||
|
||||
& p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1.29;
|
||||
color: ${colors.semibold};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledCanvas = styled.canvas`
|
||||
`;
|
||||
|
||||
class MiniMetric extends React.Component {
|
||||
componentDidMount() {
|
||||
const {
|
||||
datasets = [],
|
||||
labels = 0,
|
||||
max = 100,
|
||||
min = 0
|
||||
} = this.props;
|
||||
|
||||
const _labels = !Array.isArray(labels)
|
||||
? buildArray(labels).map((v, i) => '')
|
||||
: labels;
|
||||
|
||||
this._chart = new Chart(this._refs.component, {
|
||||
type: 'whisker',
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
barPercentage: 1.0,
|
||||
categoryPercentage: 1.0
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
min: min,
|
||||
max: max
|
||||
}
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
data: {
|
||||
labels: _labels,
|
||||
datasets: datasets
|
||||
}
|
||||
});
|
||||
}
|
||||
componentWillReceiveProps(nextProps) {
|
||||
const {
|
||||
datasets = [],
|
||||
labels = 0
|
||||
} = this.props;
|
||||
|
||||
this._chart.data.datasets = datasets;
|
||||
this._chart.data.labels = buildArray(labels).map((v, i) => '');
|
||||
this._chart.update(0);
|
||||
}
|
||||
ref(name) {
|
||||
this._refs = this._refs || {};
|
||||
|
||||
return (el) => {
|
||||
this._refs[name] = el;
|
||||
};
|
||||
}
|
||||
render() {
|
||||
const {
|
||||
name,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<StyledDiv>
|
||||
<TextMetric>
|
||||
<InnerTextBox>
|
||||
<h3>{name}: 54%</h3>
|
||||
<p>(1280/3000 MB)</p>
|
||||
</InnerTextBox>
|
||||
</TextMetric>
|
||||
<Devider />
|
||||
<StyledCanvas
|
||||
height='72'
|
||||
innerRef={this.ref('component')}
|
||||
width='157'
|
||||
/>
|
||||
</StyledDiv>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
MiniMetric.propTypes = {
|
||||
datasets: React.PropTypes.array,
|
||||
labels: React.PropTypes.number,
|
||||
max: React.PropTypes.number,
|
||||
min: React.PropTypes.number,
|
||||
name: React.PropTypes.string,
|
||||
module.exports = {
|
||||
MiniMetricGraph: require('./graph'),
|
||||
MiniMetricMeta: require('./meta'),
|
||||
MiniMetricTitle: require('./title'),
|
||||
MiniMetricSubtitle: require('./subtitle'),
|
||||
MiniMetricView: require('./view')
|
||||
};
|
||||
|
||||
module.exports = MiniMetric;
|
||||
|
41
ui/src/components/mini-metric/meta.js
Normal file
41
ui/src/components/mini-metric/meta.js
Normal file
@ -0,0 +1,41 @@
|
||||
const constants = require('../../shared/constants');
|
||||
const fns = require('../../shared/functions');
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
colors
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
remcalc
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const OuterBox = styled.div`
|
||||
height: ${remcalc(53)};
|
||||
padding: ${remcalc(8)} ${remcalc(12)};
|
||||
border-bottom: ${remcalc(1)} solid ${colors.seperator};
|
||||
`;
|
||||
|
||||
const InnerBox = styled.div`
|
||||
width: 100%;
|
||||
height: ${remcalc(36)};
|
||||
`;
|
||||
|
||||
const Meta = (props) => (
|
||||
<OuterBox {...props}>
|
||||
<InnerBox>
|
||||
{props.children}
|
||||
</InnerBox>
|
||||
</OuterBox>
|
||||
);
|
||||
|
||||
Meta.propTypes = {
|
||||
children: React.PropTypes.node
|
||||
};
|
||||
|
||||
module.exports = Meta;
|
26
ui/src/components/mini-metric/subtitle.js
Normal file
26
ui/src/components/mini-metric/subtitle.js
Normal file
@ -0,0 +1,26 @@
|
||||
const constants = require('../../shared/constants');
|
||||
const fns = require('../../shared/functions');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
remcalc
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
colors
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
module.exports = styled.p`
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
font-size: ${remcalc(12)};
|
||||
line-height: ${remcalc(18)};
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
color: ${colors.regular};
|
||||
`;
|
26
ui/src/components/mini-metric/title.js
Normal file
26
ui/src/components/mini-metric/title.js
Normal file
@ -0,0 +1,26 @@
|
||||
const constants = require('../../shared/constants');
|
||||
const fns = require('../../shared/functions');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
colors
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
remcalc
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
module.exports = styled.h3`
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
font-size: ${remcalc(14)};
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
line-height: 1.29;
|
||||
color: ${colors.semibold};
|
||||
margin-bottom: ${remcalc(3)} !important;
|
||||
`;
|
47
ui/src/components/mini-metric/view.js
Normal file
47
ui/src/components/mini-metric/view.js
Normal file
@ -0,0 +1,47 @@
|
||||
const constants = require('../../shared/constants');
|
||||
const fns = require('../../shared/functions');
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
colors
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
remcalc
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const Container = styled.div`
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: ${colors.miniBackground};
|
||||
border: solid ${remcalc(1)} ${colors.borderSecondary};
|
||||
`;
|
||||
|
||||
const Shadow = styled.div`
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: ${remcalc(9)};
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(216, 216, 216, 0));
|
||||
`;
|
||||
|
||||
const View = (props) => (
|
||||
<Container {...props}>
|
||||
<Shadow />
|
||||
{props.children}
|
||||
</Container>
|
||||
);
|
||||
|
||||
View.propTypes = {
|
||||
children: React.PropTypes.node
|
||||
};
|
||||
|
||||
module.exports = View;
|
@ -1,6 +1,6 @@
|
||||
const constants = require('../../shared/constants');
|
||||
const fns = require('../../shared/functions');
|
||||
const match = require('../../shared/match');
|
||||
const composers = require('../../shared/composers');
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
@ -12,44 +12,46 @@ const {
|
||||
remcalc
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
prop: matchProp
|
||||
} = match;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const background = matchProp({
|
||||
warning: colors.warningLight,
|
||||
alert: colors.alertLight,
|
||||
}, 'transparent');
|
||||
const {
|
||||
baseBox,
|
||||
pseudoEl
|
||||
} = composers;
|
||||
|
||||
const border = matchProp({
|
||||
warning: colors.warning,
|
||||
alert: 'red',
|
||||
}, 'none');
|
||||
const decorationWidth = remcalc(108);
|
||||
|
||||
const StyledNotification = styled.div`
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
background-color: ${background('type')};
|
||||
border: ${border('type')};
|
||||
${baseBox(0)}
|
||||
|
||||
&::before {
|
||||
background-color: ${props => colors[props.type] || colors.brandPrimary}
|
||||
width: ${decorationWidth};
|
||||
height: 100%;
|
||||
|
||||
${pseudoEl()}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledContent = styled.div`
|
||||
float: left;
|
||||
padding: ${remcalc(20)};
|
||||
padding: ${remcalc(18)} 20% ${remcalc(18)} ${remcalc(18)};
|
||||
margin-left: ${decorationWidth};
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const Notificaton = ({
|
||||
children,
|
||||
className,
|
||||
style,
|
||||
type = ''
|
||||
type
|
||||
}) => {
|
||||
return (
|
||||
<StyledNotification
|
||||
@ -68,7 +70,7 @@ Notificaton.propTypes = {
|
||||
children: React.PropTypes.object,
|
||||
className: React.PropTypes.str,
|
||||
style: React.PropTypes.object,
|
||||
type: React.PropTypes.str
|
||||
type: React.PropTypes.string
|
||||
};
|
||||
|
||||
module.exports = Notificaton;
|
||||
|
@ -1,6 +1,7 @@
|
||||
module.exports = {
|
||||
Base: require('./components/base'),
|
||||
AddMetric: require('./components/add-metric'),
|
||||
Anchor: require('./components/anchor'),
|
||||
Avatar: require('./components/avatar'),
|
||||
Button: require('./components/button'),
|
||||
Checkbox: require('./components/checkbox'),
|
||||
|
@ -10,7 +10,8 @@ const brandPrimary = {
|
||||
borderPrimary: '#2531BC',
|
||||
borderPrimaryDark: '#2531BC',
|
||||
borderPrimaryDarkest: '#062BA0',
|
||||
brandPrimaryColor: '#FFFFFF'
|
||||
brandPrimaryColor: '#FFFFFF',
|
||||
brandPrimaryLink: '#364acd'
|
||||
};
|
||||
|
||||
const brandSecondary = {
|
||||
@ -20,7 +21,8 @@ const brandSecondary = {
|
||||
borderSecondary: '#D8D8D8',
|
||||
borderSecondaryDark: '#D8D8D8',
|
||||
borderSecondaryDarkest: '#D8D8D8',
|
||||
brandSecondaryColor: '#464646'
|
||||
brandSecondaryColor: '#464646',
|
||||
brandSecondaryLink: '#ffffff'
|
||||
};
|
||||
|
||||
const brandInactive = {
|
||||
@ -33,6 +35,7 @@ const notifications = {
|
||||
alert: '#DA4B42',
|
||||
alertLight: '#FFC7C7',
|
||||
confirmation: '#00AF66',
|
||||
success: '#00AF66',
|
||||
warning: '#E4A800',
|
||||
warningLight: '#FFFAED',
|
||||
};
|
||||
@ -48,7 +51,7 @@ const colors = {
|
||||
...brandInactive,
|
||||
...notifications,
|
||||
...metrics,
|
||||
...fonts
|
||||
fonts
|
||||
};
|
||||
|
||||
module.exports = colors;
|
||||
|
@ -6,7 +6,6 @@ const boxes = require('./boxes');
|
||||
const typography = require('./typography');
|
||||
const sizes = require('./sizes');
|
||||
const breakpoints = require('./breakpoints');
|
||||
const links = require('./links');
|
||||
|
||||
const tables = {
|
||||
bg: 'transparent',
|
||||
@ -21,7 +20,6 @@ const constants = traverse({
|
||||
colors,
|
||||
boxes,
|
||||
forms,
|
||||
links,
|
||||
sizes,
|
||||
tables,
|
||||
typography
|
||||
|
@ -1,14 +0,0 @@
|
||||
const Color = require('color');
|
||||
|
||||
const links = {
|
||||
color: '#364ACD',
|
||||
decoration: 'none',
|
||||
hoverColor: ({
|
||||
color
|
||||
}) => {
|
||||
return Color(color).darken(0.15).hex();
|
||||
},
|
||||
hoverDecoration: 'underline'
|
||||
};
|
||||
|
||||
module.exports = links;
|
@ -1,8 +1,6 @@
|
||||
const colors = require('./colors');
|
||||
|
||||
const typography = {
|
||||
fontPrimary: 'sans serif',
|
||||
dtFontWeight: 'bold',
|
||||
abbrBorderColor: colors.brandSecondary,
|
||||
textMuted: colors.brandSecondary
|
||||
};
|
||||
|
@ -22,16 +22,16 @@ const generateFonts = (fontFamilies, fontFilenames) => {
|
||||
fontCSS += `
|
||||
@font-face {
|
||||
font-family: ${fontFamily};
|
||||
src: url(${pathToFont}${fontFilenames[i]}.eot);
|
||||
src: url(${pathToFont}${fontFilenames[i]}.eot?#iefix)
|
||||
src: url(${pathToFont + fontFilenames[i]}.eot);
|
||||
src: url(${pathToFont + fontFilenames[i]}.eot?#iefix)
|
||||
format('embedded-opentype');
|
||||
src: url(${pathToFont}${fontFilenames[i]}.woff)
|
||||
src: url(${pathToFont + fontFilenames[i]}.woff)
|
||||
format('woff');
|
||||
src: url(${pathToFont}${fontFilenames[i]}.woff2)
|
||||
src: url(${pathToFont + fontFilenames[i]}.woff2)
|
||||
format('woff2');
|
||||
src: url(${pathToFont}${fontFilenames[i]}.ttf)
|
||||
src: url(${pathToFont + fontFilenames[i]}.ttf)
|
||||
format('truetype');
|
||||
src: url(${pathToFont}${fontFilenames[i]}.svg#${fontFamily})
|
||||
src: url(${pathToFont + fontFilenames[i]}.svg#${fontFamily})
|
||||
format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
@ -33,7 +33,13 @@ const {
|
||||
ListItemView,
|
||||
ListItemGroupView
|
||||
},
|
||||
MiniMetric,
|
||||
MiniMetric: {
|
||||
MiniMetricGraph,
|
||||
MiniMetricMeta,
|
||||
MiniMetricTitle,
|
||||
MiniMetricSubtitle,
|
||||
MiniMetricView
|
||||
},
|
||||
Modal,
|
||||
Notificaton,
|
||||
Pagination,
|
||||
@ -72,7 +78,7 @@ const styles = {
|
||||
|
||||
storiesOf('Grid', module)
|
||||
.add('Row and Column', () => (
|
||||
<Base data-id="base">
|
||||
<Base>
|
||||
<Container fluid>
|
||||
<Row>
|
||||
<Column
|
||||
@ -220,16 +226,20 @@ storiesOf('Radio', module)
|
||||
|
||||
storiesOf('Input', module)
|
||||
.add('Default', () => (
|
||||
<Input placeholder="I am the placeholder" />
|
||||
<Base>
|
||||
<Input placeholder="I am the placeholder" />
|
||||
</Base>
|
||||
))
|
||||
.add('type=email', () => (
|
||||
<Input
|
||||
label='Email Address'
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
>
|
||||
<small>We'll never share your email with anyone else.</small>
|
||||
</Input>
|
||||
<Base>
|
||||
<Input
|
||||
label='Email Address'
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
>
|
||||
<small>We'll never share your email with anyone else.</small>
|
||||
</Input>
|
||||
</Base>
|
||||
));
|
||||
|
||||
storiesOf('Modal', module)
|
||||
@ -241,19 +251,25 @@ storiesOf('Modal', module)
|
||||
|
||||
storiesOf('Notificaton', module)
|
||||
.add('Default', () => (
|
||||
<Notificaton>
|
||||
<span>This is the default content</span>
|
||||
</Notificaton>
|
||||
<Base>
|
||||
<Notificaton>
|
||||
<span>This is the default content</span>
|
||||
</Notificaton>
|
||||
</Base>
|
||||
))
|
||||
.add('warning', () => (
|
||||
<Notificaton type='warning'>
|
||||
<span>This is the warning content</span>
|
||||
</Notificaton>
|
||||
.add('Success', () => (
|
||||
<Base>
|
||||
<Notificaton type="success">
|
||||
<span>This is the success content</span>
|
||||
</Notificaton>
|
||||
</Base>
|
||||
))
|
||||
.add('alert', () => (
|
||||
<Notificaton type='alert'>
|
||||
<span>This is the alert content</span>
|
||||
</Notificaton>
|
||||
.add('Alert', () => (
|
||||
<Base>
|
||||
<Notificaton type="alert">
|
||||
<span>This is the alert content</span>
|
||||
</Notificaton>
|
||||
</Base>
|
||||
));
|
||||
|
||||
storiesOf('Pagination', module)
|
||||
@ -399,141 +415,143 @@ storiesOf('Widget', module)
|
||||
</Widget>
|
||||
));
|
||||
|
||||
const colors = {
|
||||
perc: 'rgba(54, 74, 205, 0.2)',
|
||||
alt: 'rgba(245, 93, 93, 0.2)'
|
||||
};
|
||||
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)
|
||||
.add('Mini Metric', () => (
|
||||
<MiniMetric
|
||||
datasets={[{
|
||||
backgroundColor: colors['perc'],
|
||||
altBackgroundColor: colors['alt'],
|
||||
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,
|
||||
},
|
||||
]
|
||||
}]}
|
||||
labels={17}
|
||||
name='Memory'
|
||||
/>
|
||||
<Base>
|
||||
<Row around>
|
||||
<Column xs={3}>
|
||||
<MiniMetricView>
|
||||
<MiniMetricMeta>
|
||||
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
||||
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
||||
</MiniMetricMeta>
|
||||
<MiniMetricGraph data={minMetricData} />
|
||||
</MiniMetricView>
|
||||
</Column>
|
||||
<Column xs={3}>
|
||||
<MiniMetricView>
|
||||
<MiniMetricMeta>
|
||||
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
||||
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
||||
</MiniMetricMeta>
|
||||
<MiniMetricGraph data={minMetricData} />
|
||||
</MiniMetricView>
|
||||
</Column>
|
||||
<Column xs={3}>
|
||||
<MiniMetricView>
|
||||
<MiniMetricMeta>
|
||||
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
||||
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
||||
</MiniMetricMeta>
|
||||
<MiniMetricGraph data={minMetricData} />
|
||||
</MiniMetricView>
|
||||
</Column>
|
||||
</Row>
|
||||
</Base>
|
||||
));
|
||||
|
||||
storiesOf('ListItem', module)
|
||||
|
Loading…
Reference in New Issue
Block a user