mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
Add user type move portal query to header add services tooltip
This commit is contained in:
parent
ba5ccea851
commit
845d9f4800
@ -18,6 +18,7 @@
|
|||||||
"react-router-dom": "^4.1.1",
|
"react-router-dom": "^4.1.1",
|
||||||
"redux": "^3.6.0",
|
"redux": "^3.6.0",
|
||||||
"redux-actions": "^2.0.3",
|
"redux-actions": "^2.0.3",
|
||||||
|
"redux-batched-actions": "^0.2.0",
|
||||||
"redux-form": "^6.7.0",
|
"redux-form": "^6.7.0",
|
||||||
"reselect": "^3.0.1",
|
"reselect": "^3.0.1",
|
||||||
"simple-statistics": "^4.1.0",
|
"simple-statistics": "^4.1.0",
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
@ -8,6 +9,7 @@ import { colors } from '@ui/shared/constants';
|
|||||||
import Logo from '@assets/triton_logo.png';
|
import Logo from '@assets/triton_logo.png';
|
||||||
import Row from '@ui/components/row';
|
import Row from '@ui/components/row';
|
||||||
import Column from '@ui/components/column';
|
import Column from '@ui/components/column';
|
||||||
|
import { P } from '@ui/components/base-elements';
|
||||||
|
|
||||||
const StyledHeader = styled.div`
|
const StyledHeader = styled.div`
|
||||||
background-color: ${colors.base.primaryDarkBrand};
|
background-color: ${colors.base.primaryDarkBrand};
|
||||||
@ -19,14 +21,36 @@ const StyledLogo = styled.img`
|
|||||||
height: ${remcalc(25)};
|
height: ${remcalc(25)};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export default () => (
|
const StyledP = styled(P)`
|
||||||
|
color: ${colors.base.white};
|
||||||
|
font-weight: 600;
|
||||||
|
margin: ${unitcalc(0.5)} 0 0 0;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Header = ({
|
||||||
|
datacenter,
|
||||||
|
username
|
||||||
|
}) => (
|
||||||
<StyledHeader>
|
<StyledHeader>
|
||||||
<Row>
|
<Row>
|
||||||
<Column lg={12} xs={12}>
|
<Column md={10} xs={12}>
|
||||||
<Link to='/'>
|
<Link to='/'>
|
||||||
<StyledLogo src={Logo} />
|
<StyledLogo src={Logo} />
|
||||||
</Link>
|
</Link>
|
||||||
</Column>
|
</Column>
|
||||||
|
<Column md={1} xs={6}>
|
||||||
|
<StyledP>{datacenter}</StyledP>
|
||||||
|
</Column>
|
||||||
|
<Column md={1} xs={6}>
|
||||||
|
<StyledP>{username}</StyledP>
|
||||||
|
</Column>
|
||||||
</Row>
|
</Row>
|
||||||
</StyledHeader>
|
</StyledHeader>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
Header.propTypes = {
|
||||||
|
datacenter: PropTypes.string,
|
||||||
|
username: PropTypes.string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Header;
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { compose, graphql } from 'react-apollo';
|
import { compose, graphql } from 'react-apollo';
|
||||||
import PortalQuery from '@graphql/Portal.gql';
|
|
||||||
import InstancesQuery from '@graphql/Instances.gql';
|
import InstancesQuery from '@graphql/Instances.gql';
|
||||||
|
|
||||||
import { LayoutContainer } from '@components/layout';
|
import { LayoutContainer } from '@components/layout';
|
||||||
@ -58,8 +57,6 @@ class InstanceList extends Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const PortalGql = graphql(PortalQuery, {});
|
|
||||||
|
|
||||||
const InstanceListGql = graphql(InstancesQuery, {
|
const InstanceListGql = graphql(InstancesQuery, {
|
||||||
options(props) {
|
options(props) {
|
||||||
const params = props.match.params;
|
const params = props.match.params;
|
||||||
@ -82,7 +79,6 @@ const InstanceListGql = graphql(InstancesQuery, {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const InstanceListWithData = compose(
|
const InstanceListWithData = compose(
|
||||||
PortalGql,
|
|
||||||
InstanceListGql
|
InstanceListGql
|
||||||
)(InstanceList);
|
)(InstanceList);
|
||||||
|
|
||||||
|
35
frontend/src/containers/navigation/header.js
Normal file
35
frontend/src/containers/navigation/header.js
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { graphql } from 'react-apollo';
|
||||||
|
import PortalQuery from '@graphql/Portal.gql';
|
||||||
|
import { Header as HeaderComponent } from '@components/navigation';
|
||||||
|
|
||||||
|
const Header = ({
|
||||||
|
portal = {
|
||||||
|
datacenter: {
|
||||||
|
region: ''
|
||||||
|
},
|
||||||
|
user: {
|
||||||
|
firstName: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
loading,
|
||||||
|
error
|
||||||
|
}) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<HeaderComponent
|
||||||
|
datacenter={portal.datacenter.region}
|
||||||
|
username={portal.user.firstName}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const HeaderWithData = graphql(PortalQuery, {
|
||||||
|
props: ({ data: { portal, loading, error }}) => ({
|
||||||
|
portal,
|
||||||
|
loading,
|
||||||
|
error
|
||||||
|
})
|
||||||
|
})(Header);
|
||||||
|
|
||||||
|
export default HeaderWithData;
|
@ -1,2 +1,3 @@
|
|||||||
|
export { default as Header } from './header';
|
||||||
export { default as Breadcrumb } from './breadcrumb';
|
export { default as Breadcrumb } from './breadcrumb';
|
||||||
export { default as Menu } from './menu';
|
export { default as Menu } from './menu';
|
||||||
|
@ -2,8 +2,6 @@ import React, { Component } from 'react';
|
|||||||
import { compose, graphql } from 'react-apollo';
|
import { compose, graphql } from 'react-apollo';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
// import { Link } from 'react-router-dom';
|
|
||||||
import PortalQuery from '@graphql/Portal.gql';
|
|
||||||
import ServicesQuery from '@graphql/Services.gql';
|
import ServicesQuery from '@graphql/Services.gql';
|
||||||
|
|
||||||
import { processServices } from '@root/state/selectors';
|
import { processServices } from '@root/state/selectors';
|
||||||
@ -69,8 +67,6 @@ class ServiceList extends Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const PortalGql = graphql(PortalQuery, {});
|
|
||||||
|
|
||||||
const ServicesGql = graphql(ServicesQuery, {
|
const ServicesGql = graphql(ServicesQuery, {
|
||||||
options(props) {
|
options(props) {
|
||||||
return {
|
return {
|
||||||
@ -89,7 +85,6 @@ const ServicesGql = graphql(ServicesQuery, {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const ServiceListWithData = compose(
|
const ServiceListWithData = compose(
|
||||||
PortalGql,
|
|
||||||
ServicesGql
|
ServicesGql
|
||||||
)(ServiceList);
|
)(ServiceList);
|
||||||
|
|
||||||
|
@ -2,10 +2,10 @@ import React from 'react';
|
|||||||
import { compose, graphql } from 'react-apollo';
|
import { compose, graphql } from 'react-apollo';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import PortalQuery from '@graphql/Portal.gql';
|
|
||||||
import ServicesQuery from '@graphql/ServicesTopology.gql';
|
import ServicesQuery from '@graphql/ServicesTopology.gql';
|
||||||
|
|
||||||
import { processServices } from '@root/state/selectors';
|
import { processServices } from '@root/state/selectors';
|
||||||
|
import { toggleServicesQuickActions } from '@root/state/actions';
|
||||||
|
|
||||||
import { LayoutContainer } from '@components/layout';
|
import { LayoutContainer } from '@components/layout';
|
||||||
import { Loader, ErrorMessage } from '@components/messaging';
|
import { Loader, ErrorMessage } from '@components/messaging';
|
||||||
@ -14,25 +14,26 @@ import { ServicesTooltip } from '@components/services';
|
|||||||
import { colors } from '@ui/shared/constants';
|
import { colors } from '@ui/shared/constants';
|
||||||
import { unitcalc } from '@ui/shared/functions';
|
import { unitcalc } from '@ui/shared/functions';
|
||||||
import { TopologyGraph } from '@ui/components/topology';
|
import { TopologyGraph } from '@ui/components/topology';
|
||||||
/*import ServicesTooltip from '@components/services/tooltip';
|
|
||||||
|
|
||||||
import { toggleTooltip } from '@state/actions';*/
|
|
||||||
|
|
||||||
const StyledBackground = styled.div`
|
const StyledBackground = styled.div`
|
||||||
|
|
||||||
background-color: ${colors.base.whiteActive};
|
background-color: ${colors.base.whiteActive};
|
||||||
|
padding: ${unitcalc(4)};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledContainer = styled.div`
|
const StyledContainer = styled.div`
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: ${unitcalc(4)};
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ServicesTopology = ({
|
const ServicesTopology = ({
|
||||||
|
url,
|
||||||
push,
|
push,
|
||||||
services,
|
services,
|
||||||
datacenter,
|
datacenter,
|
||||||
loading,
|
loading,
|
||||||
error
|
error,
|
||||||
|
servicesQuickActions,
|
||||||
|
toggleServicesQuickActions
|
||||||
}) => {
|
}) => {
|
||||||
|
|
||||||
if(loading) {
|
if(loading) {
|
||||||
@ -52,18 +53,57 @@ const ServicesTopology = ({
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleQuickActions = (evt, tooltipData) => {
|
||||||
|
toggleServicesQuickActions(tooltipData);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTooltipBlur = (evt) => {
|
||||||
|
toggleServicesQuickActions({
|
||||||
|
show: false,
|
||||||
|
service: servicesQuickActions.service,
|
||||||
|
position: servicesQuickActions.position
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleNodeTitleClick = (evt, { service }) => {
|
||||||
|
push(
|
||||||
|
`${url.split('/').slice(0, 3).join('/')}/services/${service.slug}`
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledBackground>
|
<StyledBackground>
|
||||||
<StyledContainer>
|
<StyledContainer>
|
||||||
<TopologyGraph
|
<TopologyGraph
|
||||||
services={services}
|
services={services}
|
||||||
|
onQuickActions={handleQuickActions}
|
||||||
|
onNodeTitleClick={handleNodeTitleClick}
|
||||||
/>
|
/>
|
||||||
|
<ServicesTooltip
|
||||||
|
show={servicesQuickActions.show}
|
||||||
|
position={servicesQuickActions.position}
|
||||||
|
onBlur={handleTooltipBlur}
|
||||||
|
/>
|
||||||
</StyledContainer>
|
</StyledContainer>
|
||||||
</StyledBackground>
|
</StyledBackground>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const PortalGql = graphql(PortalQuery, {});
|
const mapStateToProps = (state, ownProps) => ({
|
||||||
|
servicesQuickActions: state.ui.services.quickActions,
|
||||||
|
url: ownProps.match.url,
|
||||||
|
push: ownProps.history.push
|
||||||
|
})
|
||||||
|
|
||||||
|
const mapDispatchToProps = (dispatch) => ({
|
||||||
|
toggleServicesQuickActions: (data) =>
|
||||||
|
dispatch(toggleServicesQuickActions(data))
|
||||||
|
});
|
||||||
|
|
||||||
|
const UiConnect = connect(
|
||||||
|
mapStateToProps,
|
||||||
|
mapDispatchToProps
|
||||||
|
);
|
||||||
|
|
||||||
const ServicesGql = graphql(ServicesQuery, {
|
const ServicesGql = graphql(ServicesQuery, {
|
||||||
options(props) {
|
options(props) {
|
||||||
@ -82,8 +122,8 @@ const ServicesGql = graphql(ServicesQuery, {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const ServicesTopologyWithData = compose(
|
const ServicesTopologyWithData = compose(
|
||||||
PortalGql,
|
ServicesGql,
|
||||||
ServicesGql
|
UiConnect
|
||||||
)(ServicesTopology);
|
)(ServicesTopology);
|
||||||
|
|
||||||
export default ServicesTopologyWithData;
|
export default ServicesTopologyWithData;
|
||||||
|
@ -1,6 +1,8 @@
|
|||||||
query Portal {
|
query Portal {
|
||||||
portal {
|
portal {
|
||||||
username
|
user {
|
||||||
|
firstName
|
||||||
|
}
|
||||||
datacenter {
|
datacenter {
|
||||||
uuid
|
uuid
|
||||||
region
|
region
|
||||||
|
@ -6,9 +6,7 @@ import {
|
|||||||
Switch
|
Switch
|
||||||
} from 'react-router-dom';
|
} from 'react-router-dom';
|
||||||
|
|
||||||
import { Header } from '@components/navigation';
|
import { Header, Breadcrumb, Menu } from '@containers/navigation';
|
||||||
|
|
||||||
import { Breadcrumb, Menu } from '@containers/navigation';
|
|
||||||
|
|
||||||
import { DeploymentGroupList } from '@containers/deployment-groups';
|
import { DeploymentGroupList } from '@containers/deployment-groups';
|
||||||
import { ServiceList, ServicesTopology, ServicesMenu } from '@containers/services';
|
import { ServiceList, ServicesTopology, ServicesMenu } from '@containers/services';
|
||||||
|
@ -5,5 +5,5 @@ const APP = constantCase(process.env['APP_NAME']);
|
|||||||
|
|
||||||
/******************************* UI *******************************/
|
/******************************* UI *******************************/
|
||||||
|
|
||||||
export const addMemberToProject =
|
export const toggleServicesQuickActions =
|
||||||
createAction(`${APP}/PROJECT_ADD_MEMBER`);
|
createAction(`${APP}/TOGGLE_SERVICES_QUICK_ACTIONS`);
|
||||||
|
@ -0,0 +1 @@
|
|||||||
|
export { default as ui } from './ui';
|
34
frontend/src/state/reducers/ui.js
Normal file
34
frontend/src/state/reducers/ui.js
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import { handleActions } from 'redux-actions';
|
||||||
|
import { toggleServicesQuickActions } from '@state/actions';
|
||||||
|
|
||||||
|
export default handleActions({
|
||||||
|
[toggleServicesQuickActions.toString()]: (state, action) => {
|
||||||
|
const {
|
||||||
|
position,
|
||||||
|
service,
|
||||||
|
show
|
||||||
|
} = action.payload;
|
||||||
|
|
||||||
|
const s = show !== undefined ? show :
|
||||||
|
!state.services.quickActions.service ||
|
||||||
|
service.uuid !== state.services.quickActions.service.uuid;
|
||||||
|
|
||||||
|
const quickActions = s ? {
|
||||||
|
show: s,
|
||||||
|
position,
|
||||||
|
service
|
||||||
|
} : {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
services: {
|
||||||
|
...state.services,
|
||||||
|
quickActions
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
}, {});
|
@ -15,6 +15,11 @@ const state = {
|
|||||||
pathname: "instances",
|
pathname: "instances",
|
||||||
name: "Instances"
|
name: "Instances"
|
||||||
}]
|
}]
|
||||||
|
},
|
||||||
|
services: {
|
||||||
|
quickActions: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,8 @@
|
|||||||
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
|
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
|
||||||
|
import { enableBatching } from 'redux-batched-actions';
|
||||||
import { ApolloClient, createNetworkInterface } from 'react-apollo';
|
import { ApolloClient, createNetworkInterface } from 'react-apollo';
|
||||||
import state from './state';
|
import state from './state';
|
||||||
|
import { ui } from './reducers';
|
||||||
|
|
||||||
export const client = new ApolloClient({
|
export const client = new ApolloClient({
|
||||||
dataIdFromObject: o => {
|
dataIdFromObject: o => {
|
||||||
@ -14,12 +16,10 @@ export const client = new ApolloClient({
|
|||||||
|
|
||||||
export const store = createStore(
|
export const store = createStore(
|
||||||
combineReducers({
|
combineReducers({
|
||||||
ui: (s) => {
|
ui: ui,
|
||||||
return s ? s : state.ui
|
|
||||||
},
|
|
||||||
apollo: client.reducer(),
|
apollo: client.reducer(),
|
||||||
}),
|
}),
|
||||||
{}, // initial state
|
state, // initial state
|
||||||
compose(
|
compose(
|
||||||
applyMiddleware(client.middleware()),
|
applyMiddleware(client.middleware()),
|
||||||
// If you are using the devToolsExtension, you can add it here also
|
// If you are using the devToolsExtension, you can add it here also
|
||||||
|
@ -5263,6 +5263,10 @@ redux-actions@^2.0.3:
|
|||||||
lodash-es "^4.17.4"
|
lodash-es "^4.17.4"
|
||||||
reduce-reducers "^0.1.0"
|
reduce-reducers "^0.1.0"
|
||||||
|
|
||||||
|
redux-batched-actions@^0.2.0:
|
||||||
|
version "0.2.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/redux-batched-actions/-/redux-batched-actions-0.2.0.tgz#da0000c882b0e6c861a96d5823bd36adf5d9c0dd"
|
||||||
|
|
||||||
redux-form@^6.7.0:
|
redux-form@^6.7.0:
|
||||||
version "6.7.0"
|
version "6.7.0"
|
||||||
resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-6.7.0.tgz#9fb0769e76f14febf1dd7686e02c4ab2d6f953aa"
|
resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-6.7.0.tgz#9fb0769e76f14febf1dd7686e02c4ab2d6f953aa"
|
||||||
|
@ -7,7 +7,14 @@ const datacenter = {
|
|||||||
uuid: 'datacenter-uuid',
|
uuid: 'datacenter-uuid',
|
||||||
region: 'us-east-1'
|
region: 'us-east-1'
|
||||||
};
|
};
|
||||||
const portal = { username: 'juditgreskovits', host: 'dockerhost', datacenter};
|
const user = {
|
||||||
|
uuid: 'unique-user-id',
|
||||||
|
firstName: 'Judit',
|
||||||
|
lastName: 'Greskovits',
|
||||||
|
email: 'name@email.com',
|
||||||
|
login: 'juditgreskovits'
|
||||||
|
}
|
||||||
|
const portal = { user, host: 'dockerhost', datacenter};
|
||||||
const deploymentGroups = data.projects.data.map(p => {
|
const deploymentGroups = data.projects.data.map(p => {
|
||||||
p.slug = p.id;
|
p.slug = p.id;
|
||||||
return p;
|
return p;
|
||||||
|
@ -3,11 +3,19 @@
|
|||||||
scalar Object
|
scalar Object
|
||||||
|
|
||||||
type Portal {
|
type Portal {
|
||||||
username: String!
|
user: User!
|
||||||
datacenter: Datacenter!
|
datacenter: Datacenter!
|
||||||
deploymentGroups: [DeploymentGroup]!
|
deploymentGroups: [DeploymentGroup]!
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type User {
|
||||||
|
uuid: ID!
|
||||||
|
firstName: String!
|
||||||
|
lastName: String!
|
||||||
|
email: String!
|
||||||
|
login: String!
|
||||||
|
}
|
||||||
|
|
||||||
type DeploymentGroup {
|
type DeploymentGroup {
|
||||||
uuid: ID!
|
uuid: ID!
|
||||||
name: String!
|
name: String!
|
||||||
@ -163,6 +171,7 @@
|
|||||||
# but this way we expose the entire db through gql
|
# but this way we expose the entire db through gql
|
||||||
type Query {
|
type Query {
|
||||||
portal: Portal
|
portal: Portal
|
||||||
|
user: User
|
||||||
deploymentGroups(name: String, slug: String): [DeploymentGroup]
|
deploymentGroups(name: String, slug: String): [DeploymentGroup]
|
||||||
deploymentGroup(uuid: ID, name: String, slug: String): DeploymentGroup
|
deploymentGroup(uuid: ID, name: String, slug: String): DeploymentGroup
|
||||||
serviceScales(serviceName: String, versionUuid: ID): [ServiceScale]
|
serviceScales(serviceName: String, versionUuid: ID): [ServiceScale]
|
||||||
|
@ -39,6 +39,7 @@ const GraphNodeButton = ({
|
|||||||
y2={height}
|
y2={height}
|
||||||
connected={connected}
|
connected={connected}
|
||||||
/>
|
/>
|
||||||
|
{buttonCircles}
|
||||||
<GraphButtonRect
|
<GraphButtonRect
|
||||||
height={height}
|
height={height}
|
||||||
onClick={onButtonClick}
|
onClick={onButtonClick}
|
||||||
@ -47,7 +48,6 @@ const GraphNodeButton = ({
|
|||||||
role='button'
|
role='button'
|
||||||
tabIndex={100 + index}
|
tabIndex={100 + index}
|
||||||
/>
|
/>
|
||||||
{buttonCircles}
|
|
||||||
</g>
|
</g>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -40,7 +40,6 @@ const GraphNode = ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
const onButtonClick = (evt) => {
|
const onButtonClick = (evt) => {
|
||||||
|
|
||||||
const tooltipPosition = {
|
const tooltipPosition = {
|
||||||
x: data.x + Constants.buttonRect.x + Constants.buttonRect.width/2,
|
x: data.x + Constants.buttonRect.x + Constants.buttonRect.width/2,
|
||||||
y: data.y + Constants.buttonRect.y + Constants.buttonRect.height
|
y: data.y + Constants.buttonRect.y + Constants.buttonRect.height
|
||||||
@ -52,18 +51,19 @@ const GraphNode = ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
const d = {
|
const d = {
|
||||||
service: data.uuid,
|
service: data,
|
||||||
position: {
|
position: {
|
||||||
left: tooltipPosition.x,
|
left: tooltipPosition.x,
|
||||||
top: tooltipPosition.y
|
top: tooltipPosition.y
|
||||||
}
|
},
|
||||||
|
rect: Constants.buttonRect
|
||||||
};
|
};
|
||||||
|
|
||||||
onQuickActions(evt, d);
|
onQuickActions(evt, d);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onTitleClick = () =>
|
const onTitleClick = (evt) =>
|
||||||
onNodeTitleClick(data.uuid);
|
onNodeTitleClick(evt, { service: data });
|
||||||
|
|
||||||
const onStart = (evt) => {
|
const onStart = (evt) => {
|
||||||
evt.preventDefault();
|
evt.preventDefault();
|
||||||
|
@ -27,6 +27,7 @@ export const GraphTitle = styled.text`
|
|||||||
fill: ${props => props.connected ? colors.base.white : colors.base.secondary};
|
fill: ${props => props.connected ? colors.base.white : colors.base.secondary};
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const GraphSubtitle = styled.text`
|
export const GraphSubtitle = styled.text`
|
||||||
|
@ -220,8 +220,8 @@ class TopologyGraph extends React.Component {
|
|||||||
this.setDragInfo(false);
|
this.setDragInfo(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onTitleClick = (serviceUUID) =>
|
const onTitleClick = (evt, data) =>
|
||||||
this.props.onNodeTitleClick(serviceUUID);
|
this.props.onNodeTitleClick(evt, data);
|
||||||
|
|
||||||
const renderedNode = (n, index) => (
|
const renderedNode = (n, index) => (
|
||||||
<GraphNode
|
<GraphNode
|
||||||
|
Loading…
Reference in New Issue
Block a user