mirror of
https://github.com/yldio/copilot.git
synced 2024-11-28 14:10:04 +02:00
parent
58d786c099
commit
faabc8b6d8
@ -78,22 +78,18 @@ const arrowPosition = {
|
||||
|
||||
const Header = ({
|
||||
account,
|
||||
handleToggle,
|
||||
onHeaderToggle,
|
||||
tooltip,
|
||||
...props
|
||||
}) => {
|
||||
const handleToggleClick = (ev) => {
|
||||
const handleHeaderToggle = (ev) => {
|
||||
ev.preventDefault();
|
||||
handleToggle(!tooltip);
|
||||
};
|
||||
|
||||
const handleHideToggle = (ev) => {
|
||||
ev.preventDefault();
|
||||
handleToggle(false);
|
||||
onHeaderToggle();
|
||||
};
|
||||
|
||||
const tooltipComponent = !tooltip ? null : (
|
||||
<Tooltip
|
||||
onBlur={handleHeaderToggle}
|
||||
arrowPosition={arrowPosition}
|
||||
right={0}
|
||||
top={39}
|
||||
@ -111,12 +107,7 @@ const Header = ({
|
||||
);
|
||||
|
||||
return (
|
||||
<StyledHeader
|
||||
name='application-header'
|
||||
onBlur={handleHideToggle}
|
||||
onFocus={handleHideToggle}
|
||||
{...props}
|
||||
>
|
||||
<StyledHeader name='application-header' {...props}>
|
||||
<Row>
|
||||
<Column lg={10} xs={8}>
|
||||
<Link to='/'>
|
||||
@ -126,7 +117,7 @@ const Header = ({
|
||||
<Column lg={2} xs={4}>
|
||||
<StyledProfileWrapper>
|
||||
<StyledAvatarWrapper toggled={tooltip}>
|
||||
<EmptyButton onClick={handleToggleClick}>
|
||||
<EmptyButton onClick={handleHeaderToggle}>
|
||||
<StyledName>
|
||||
{account.name}
|
||||
</StyledName>
|
||||
@ -147,7 +138,7 @@ const Header = ({
|
||||
|
||||
Header.propTypes = {
|
||||
account: PropTypes.account,
|
||||
handleToggle: React.PropTypes.func,
|
||||
onHeaderToggle: React.PropTypes.func,
|
||||
tooltip: React.PropTypes.bool
|
||||
};
|
||||
|
||||
|
@ -1,41 +1,41 @@
|
||||
import React from 'react';
|
||||
import Tooltip, { TooltipButton, TooltipDivider } from '@ui/components/tooltip';
|
||||
|
||||
// eslint-disable-next-line max-len
|
||||
const scaleLink = 'https://projects.invisionapp.com/share/YDAKI8CW4#/screens/221841542_Deployed_Services_1-8';
|
||||
|
||||
const ServicesTooltip = ({
|
||||
show,
|
||||
position
|
||||
}) => {
|
||||
// eslint-disable-next-line max-len
|
||||
const scaleLink = 'https://projects.invisionapp.com/share/YDAKI8CW4#/screens/221841542_Deployed_Services_1-8';
|
||||
return show ? (
|
||||
<Tooltip {...position}>
|
||||
<li>
|
||||
<TooltipButton href={scaleLink}>
|
||||
Scale
|
||||
</TooltipButton>
|
||||
</li>
|
||||
<li>
|
||||
<TooltipButton>Rollback</TooltipButton>
|
||||
</li>
|
||||
<li>
|
||||
<TooltipButton>Reprovision</TooltipButton>
|
||||
</li>
|
||||
<li>
|
||||
<TooltipButton>Transfer</TooltipButton>
|
||||
</li>
|
||||
<li>
|
||||
<TooltipButton>Setup metrics</TooltipButton>
|
||||
</li>
|
||||
<TooltipDivider />
|
||||
<li>
|
||||
<TooltipButton>Stop</TooltipButton>
|
||||
</li>
|
||||
<li>
|
||||
<TooltipButton>Delete</TooltipButton>
|
||||
</li>
|
||||
</Tooltip>
|
||||
) : null;
|
||||
};
|
||||
position,
|
||||
...rest
|
||||
}) => show ? (
|
||||
<Tooltip {...position} {...rest}>
|
||||
<li>
|
||||
<TooltipButton href={scaleLink}>
|
||||
Scale
|
||||
</TooltipButton>
|
||||
</li>
|
||||
<li>
|
||||
<TooltipButton>Rollback</TooltipButton>
|
||||
</li>
|
||||
<li>
|
||||
<TooltipButton>Reprovision</TooltipButton>
|
||||
</li>
|
||||
<li>
|
||||
<TooltipButton>Transfer</TooltipButton>
|
||||
</li>
|
||||
<li>
|
||||
<TooltipButton>Setup metrics</TooltipButton>
|
||||
</li>
|
||||
<TooltipDivider />
|
||||
<li>
|
||||
<TooltipButton>Stop</TooltipButton>
|
||||
</li>
|
||||
<li>
|
||||
<TooltipButton>Delete</TooltipButton>
|
||||
</li>
|
||||
</Tooltip>
|
||||
) : null;
|
||||
|
||||
ServicesTooltip.propTypes = {
|
||||
position: React.PropTypes.object,
|
||||
|
@ -5,15 +5,10 @@ import Row from '@ui/components/row';
|
||||
import Column from '@ui/components/column';
|
||||
import { LayoutContainer } from '@components/layout';
|
||||
import { H2 } from '@ui/components/base-elements';
|
||||
import {
|
||||
FormGroup,
|
||||
Toggle,
|
||||
ToggleList,
|
||||
Legend
|
||||
} from '@ui/components/form';
|
||||
import { FormGroup, Toggle, ToggleList, Legend } from '@ui/components/form';
|
||||
import TopologyFilter from '@components/services/topology-filter';
|
||||
import styled from 'styled-components';
|
||||
import { unitcalc, remcalc } from '@ui/shared/functions';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledLegend = styled(Legend)`
|
||||
float: left;
|
||||
@ -37,6 +32,7 @@ const ServicesView = ({
|
||||
evt.preventDefault();
|
||||
|
||||
const value = evt.target.value;
|
||||
|
||||
if(value !== toggleValue) {
|
||||
onToggle(value);
|
||||
}
|
||||
|
@ -10,7 +10,7 @@ const mapStateToProps = (state, ownProps) => ({
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
handleToggle: (bool) => dispatch(toggleHeaderTooltip(bool))
|
||||
onHeaderToggle: (bool) => dispatch(toggleHeaderTooltip(bool))
|
||||
});
|
||||
|
||||
export default connect(
|
||||
|
@ -25,7 +25,6 @@ const duration = '1 hour';
|
||||
const interval = '2 minutes';
|
||||
|
||||
class Services extends React.Component {
|
||||
|
||||
// we DON'T want to unsubscribe once we started going
|
||||
componentWillMount() {
|
||||
this.props.subscribeMetric(interval);
|
||||
@ -66,7 +65,7 @@ class Services extends React.Component {
|
||||
});
|
||||
};
|
||||
|
||||
const instances = null;
|
||||
const handleTooltipBlur = (evt) => onQuickActions(evt, uiTooltip.service);
|
||||
|
||||
const serviceList = services.map((service) => (
|
||||
<ServiceItem
|
||||
@ -79,13 +78,19 @@ class Services extends React.Component {
|
||||
/>
|
||||
));
|
||||
|
||||
// TODO replace `false` with a check for existence unmanaged instances
|
||||
// eslint-disable-next-line no-constant-condition
|
||||
const unmanagedInstances = false ? (
|
||||
<UnmanagedInstances instances={0} />
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<LayoutContainer>
|
||||
{ instances && <UnmanagedInstances instances={instances} /> }
|
||||
{unmanagedInstances}
|
||||
<StyledContainer>
|
||||
<div ref={this.ref('container')}>
|
||||
{serviceList}
|
||||
<ServicesTooltip {...uiTooltip} />
|
||||
<ServicesTooltip {...uiTooltip} onBlur={handleTooltipBlur} />
|
||||
</div>
|
||||
</StyledContainer>
|
||||
</LayoutContainer>
|
||||
|
@ -6,7 +6,7 @@ export default handleActions({
|
||||
...state,
|
||||
ui: {
|
||||
...state.ui,
|
||||
tooltip: action.payload
|
||||
tooltip: !state.ui.tooltip
|
||||
}
|
||||
})
|
||||
}, {});
|
||||
|
@ -48,13 +48,13 @@ export default handleActions({
|
||||
)
|
||||
}),
|
||||
[toggleTooltip.toString()]: (state, action) => {
|
||||
|
||||
const {
|
||||
position,
|
||||
service
|
||||
} = action.payload;
|
||||
|
||||
const show = state.ui.tooltip.service !== service;
|
||||
|
||||
const tooltip = show ? {
|
||||
show: true,
|
||||
position: {
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { remcalc, unitcalc } from '../../shared/functions';
|
||||
import { boxes, colors } from '../../shared/constants';
|
||||
import styled from 'styled-components';
|
||||
import React from 'react';
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import {
|
||||
absolutePosition,
|
||||
@ -12,12 +12,12 @@ import {
|
||||
getMeasurement
|
||||
} from '../../shared/composers';
|
||||
|
||||
|
||||
const ItemPadder = 9;
|
||||
const WrapperPadder = 24;
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
${(props) => absolutePosition(props)}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledList = styled.ul`
|
||||
@ -29,7 +29,6 @@ const StyledList = styled.ul`
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: ${unitcalc(2)} 0;
|
||||
/*min-width: ${remcalc(200)};*/
|
||||
|
||||
position: absolute;
|
||||
top: ${remcalc(4)};
|
||||
@ -42,6 +41,7 @@ const StyledList = styled.ul`
|
||||
}};
|
||||
|
||||
${props => props.styles}
|
||||
|
||||
${baseBox({
|
||||
shadow: boxes.tooltipShadow
|
||||
})}
|
||||
@ -50,15 +50,6 @@ const StyledList = styled.ul`
|
||||
amount: 1
|
||||
})}
|
||||
|
||||
/*& > * {
|
||||
|
||||
padding: ${remcalc(ItemPadder)} ${remcalc(WrapperPadder)};
|
||||
|
||||
&:hover {
|
||||
background: ${colors.base.grey};
|
||||
}
|
||||
}*/
|
||||
|
||||
&:after, &:before {
|
||||
border: solid transparent;
|
||||
height: 0;
|
||||
@ -73,6 +64,7 @@ const StyledList = styled.ul`
|
||||
border-width: ${remcalc(3)};
|
||||
margin-left: ${remcalc(-3)};
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-color: rgba(216, 216, 216, 0);
|
||||
border-bottom-color: ${colors.base.grey};
|
||||
@ -81,20 +73,42 @@ const StyledList = styled.ul`
|
||||
}
|
||||
`;
|
||||
|
||||
const Tooltip = ({
|
||||
children,
|
||||
arrowPosition = {
|
||||
bottom: '100%',
|
||||
left: '50%'
|
||||
},
|
||||
...props
|
||||
}) => (
|
||||
<StyledContainer {...props}>
|
||||
<StyledList arrowPosition={arrowPosition} {...props}>
|
||||
{children}
|
||||
</StyledList>
|
||||
</StyledContainer>
|
||||
);
|
||||
class Tooltip extends Component {
|
||||
componentDidMount() {
|
||||
this._refs.ul.focus();
|
||||
}
|
||||
|
||||
ref(name) {
|
||||
this._refs = this._refs || {};
|
||||
|
||||
return (el) => {
|
||||
this._refs[name] = el;
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
children,
|
||||
arrowPosition = {
|
||||
bottom: '100%',
|
||||
left: '50%'
|
||||
},
|
||||
...rest
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<StyledContainer
|
||||
innerRef={this.ref('ul')}
|
||||
tabIndex={-1}
|
||||
{...rest}
|
||||
>
|
||||
<StyledList arrowPosition={arrowPosition} {...rest}>
|
||||
{children}
|
||||
</StyledList>
|
||||
</StyledContainer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Tooltip.propTypes = {
|
||||
arrowPosition: React.PropTypes.object,
|
||||
|
Loading…
Reference in New Issue
Block a user