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,43 +1,53 @@
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,
data,
...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;
}) => {
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}>
<li>
<TooltipButton href={scaleLink}>
Scale
</TooltipButton>
</li>
<li>
<TooltipButton>Rollback</TooltipButton>
</li>
<li>
<TooltipButton>Reprovision</TooltipButton>
</li>
<li>
<TooltipButton>Transfer</TooltipButton>
</li>
<li>
<TooltipButton to={metricsLink}>
Setup metrics
</TooltipButton>
</li>
<TooltipDivider />
<li>
<TooltipButton>Stop</TooltipButton>
</li>
<li>
<TooltipButton>Delete</TooltipButton>
</li>
</Tooltip>
);
};
ServicesTooltip.propTypes = {
data: React.PropTypes.object,
position: React.PropTypes.object,
show: React.PropTypes.bool
};

View File

@ -61,7 +61,12 @@ class Services extends React.Component {
toggleTooltip({
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 = [],
org = {},
project = {},
toggleTooltip,
uiTooltip
} = props;
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 (
@ -49,7 +62,9 @@ const Services = (props) => {
};
Services.propTypes = {
org: PropTypes.org,
services: React.PropTypes.arrayOf(PropTypes.service),
project: PropTypes.project,
toggleTooltip: React.PropTypes.func,
uiTooltip: React.PropTypes.object
};

View File

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