Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
frontend/src/components/services/tooltip.js
View File

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

7
frontend/src/containers/services/list.js
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
}
}); });
}; };

17
frontend/src/containers/services/topology.js
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
}; };

6
frontend/src/state/reducers/services.js
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
}; };