Add metrics link to topology

Add metrics link to topology

Add metrics link to topology

Add metrics link to topology

Add tooltip data to list view too

Add metrics link to quick actions
This commit is contained in:
JUDIT GRESKOVITS 2017-03-23 12:19:30 +00:00 committed by Sérgio Ramos
parent 70b640fddf
commit b0a266a020
4 changed files with 67 additions and 35 deletions

View File

@ -1,14 +1,20 @@
import React from 'react'; import React from 'react';
import Tooltip, { TooltipButton, TooltipDivider } from '@ui/components/tooltip'; 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 = ({ const ServicesTooltip = ({
show, show,
position, position,
data,
...rest ...rest
}) => show ? ( }) => {
if(!show) {
return null;
}
// eslint-disable-next-line max-len
const scaleLink = 'https://projects.invisionapp.com/share/YDAKI8CW4#/screens/221841542_Deployed_Services_1-8';
// eslint-disable-next-line max-len
const metricsLink = `/${data.orgId}/projects/${data.projectId}/services/${data.serviceId}/metrics`;
return (
<Tooltip {...position} {...rest}> <Tooltip {...position} {...rest}>
<li> <li>
<TooltipButton href={scaleLink}> <TooltipButton href={scaleLink}>
@ -25,7 +31,9 @@ const ServicesTooltip = ({
<TooltipButton>Transfer</TooltipButton> <TooltipButton>Transfer</TooltipButton>
</li> </li>
<li> <li>
<TooltipButton>Setup metrics</TooltipButton> <TooltipButton to={metricsLink}>
Setup metrics
</TooltipButton>
</li> </li>
<TooltipDivider /> <TooltipDivider />
<li> <li>
@ -35,9 +43,11 @@ const ServicesTooltip = ({
<TooltipButton>Delete</TooltipButton> <TooltipButton>Delete</TooltipButton>
</li> </li>
</Tooltip> </Tooltip>
) : null; );
};
ServicesTooltip.propTypes = { ServicesTooltip.propTypes = {
data: React.PropTypes.object,
position: React.PropTypes.object, position: React.PropTypes.object,
show: React.PropTypes.bool show: React.PropTypes.bool
}; };

View File

@ -61,7 +61,12 @@ class Services extends React.Component {
toggleTooltip({ toggleTooltip({
service: service, service: service,
position: position position: position,
data: {
serviceId: service.id,
orgId: org.id,
projectId: project.id
}
}); });
}; };

View File

@ -27,12 +27,25 @@ const StyledContainer = styled(LayoutContainer)`
const Services = (props) => { const Services = (props) => {
const { const {
services = [], services = [],
org = {},
project = {},
toggleTooltip, toggleTooltip,
uiTooltip uiTooltip
} = props; } = props;
const onQuickActions = (evt, tooltipData) => { const onQuickActions = (evt, tooltipData) => {
toggleTooltip(tooltipData); const service = services.reduce((acc, service) =>
service.uuid === tooltipData.service ? service : acc
, {});
const ttData = {
...tooltipData,
data: {
serviceId: service.id,
orgId: org.id,
projectId: project.id
}
};
toggleTooltip(ttData);
}; };
return ( return (
@ -49,7 +62,9 @@ const Services = (props) => {
}; };
Services.propTypes = { Services.propTypes = {
org: PropTypes.org,
services: React.PropTypes.arrayOf(PropTypes.service), services: React.PropTypes.arrayOf(PropTypes.service),
project: PropTypes.project,
toggleTooltip: React.PropTypes.func, toggleTooltip: React.PropTypes.func,
uiTooltip: React.PropTypes.object uiTooltip: React.PropTypes.object
}; };

View File

@ -50,7 +50,8 @@ export default handleActions({
[toggleTooltip.toString()]: (state, action) => { [toggleTooltip.toString()]: (state, action) => {
const { const {
position, position,
service service,
data
} = action.payload; } = action.payload;
const show = state.ui.tooltip.service !== service; const show = state.ui.tooltip.service !== service;
@ -60,7 +61,8 @@ export default handleActions({
position: { position: {
...position ...position
}, },
service: service service: service,
data: data
} : { } : {
show: false show: false
}; };