Add user type move portal query to header add services tooltip

frontend/package.json

@@ -18,6 +18,7 @@
     "react-router-dom": "^4.1.1",
     "redux": "^3.6.0",
     "redux-actions": "^2.0.3",
+    "redux-batched-actions": "^0.2.0",
     "redux-form": "^6.7.0",
     "reselect": "^3.0.1",
     "simple-statistics": "^4.1.0",

frontend/src/components/navigation/header.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
@@ -8,6 +9,7 @@ import { colors } from '@ui/shared/constants';
 import Logo from '@assets/triton_logo.png';
 import Row from '@ui/components/row';
 import Column from '@ui/components/column';
+import { P } from '@ui/components/base-elements';
 
 const StyledHeader = styled.div`
   background-color: ${colors.base.primaryDarkBrand};
@@ -19,14 +21,36 @@ const StyledLogo = styled.img`
   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>
     <Row>
-      <Column lg={12} xs={12}>
+      <Column md={10} xs={12}>
         <Link to='/'>
           <StyledLogo src={Logo} />
         </Link>
       </Column>
+      <Column md={1} xs={6}>
+        <StyledP>{datacenter}</StyledP>
+      </Column>
+      <Column md={1} xs={6}>
+        <StyledP>{username}</StyledP>
+      </Column>
     </Row>
   </StyledHeader>
 );
+
+Header.propTypes = {
+  datacenter: PropTypes.string,
+  username: PropTypes.string
+}
+
+export default Header;

frontend/src/containers/instances/list.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { compose, graphql } from 'react-apollo';
-import PortalQuery from '@graphql/Portal.gql';
 import InstancesQuery from '@graphql/Instances.gql';
 
 import { LayoutContainer } from '@components/layout';
@@ -58,8 +57,6 @@ class InstanceList extends Component {
   }
 }
 
-const PortalGql = graphql(PortalQuery, {});
-
 const InstanceListGql = graphql(InstancesQuery, {
   options(props) {
     const params = props.match.params;
@@ -82,7 +79,6 @@ const InstanceListGql = graphql(InstancesQuery, {
 });
 
 const InstanceListWithData = compose(
-  PortalGql,
   InstanceListGql
 )(InstanceList);
 

frontend/src/containers/navigation/header.js

@@ -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;

frontend/src/containers/navigation/index.js

@@ -1,2 +1,3 @@
+export { default as Header } from './header';
 export { default as Breadcrumb } from './breadcrumb';
 export { default as Menu } from './menu';

frontend/src/containers/services/list.js

@@ -2,8 +2,6 @@ import React, { Component } from 'react';
 import { compose, graphql } from 'react-apollo';
 import { connect } from 'react-redux';
 import styled from 'styled-components';
-// import { Link } from 'react-router-dom';
-import PortalQuery from '@graphql/Portal.gql';
 import ServicesQuery from '@graphql/Services.gql';
 
 import { processServices } from '@root/state/selectors';
@@ -69,8 +67,6 @@ class ServiceList extends Component {
   }
 }
 
-const PortalGql = graphql(PortalQuery, {});
-
 const ServicesGql = graphql(ServicesQuery, {
   options(props) {
     return {
@@ -89,7 +85,6 @@ const ServicesGql = graphql(ServicesQuery, {
 });
 
 const ServiceListWithData = compose(
-  PortalGql,
   ServicesGql
 )(ServiceList);
 

frontend/src/containers/services/topology.js

@@ -2,10 +2,10 @@ import React from 'react';
 import { compose, graphql } from 'react-apollo';
 import { connect } from 'react-redux';
 import styled from 'styled-components';
-import PortalQuery from '@graphql/Portal.gql';
 import ServicesQuery from '@graphql/ServicesTopology.gql';
 
 import { processServices } from '@root/state/selectors';
+import { toggleServicesQuickActions } from '@root/state/actions';
 
 import { LayoutContainer } from '@components/layout';
 import { Loader, ErrorMessage } from '@components/messaging';
@@ -14,25 +14,26 @@ import { ServicesTooltip } from '@components/services';
 import { colors } from '@ui/shared/constants';
 import { unitcalc } from '@ui/shared/functions';
 import { TopologyGraph } from '@ui/components/topology';
-/*import ServicesTooltip from '@components/services/tooltip';
-
-import { toggleTooltip } from '@state/actions';*/
 
 const StyledBackground = styled.div`
+
   background-color: ${colors.base.whiteActive};
+  padding: ${unitcalc(4)};
 `;
 
 const StyledContainer = styled.div`
   position: relative;
-  padding: ${unitcalc(4)};
 `;
 
 const ServicesTopology = ({
+  url,
   push,
   services,
   datacenter,
   loading,
-  error
+  error,
+  servicesQuickActions,
+  toggleServicesQuickActions
 }) => {
 
   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 (
     <StyledBackground>
       <StyledContainer>
         <TopologyGraph
           services={services}
+          onQuickActions={handleQuickActions}
+          onNodeTitleClick={handleNodeTitleClick}
+        />
+      <ServicesTooltip
+        show={servicesQuickActions.show}
+        position={servicesQuickActions.position}
+        onBlur={handleTooltipBlur}
       />
       </StyledContainer>
     </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, {
   options(props) {
@@ -82,8 +122,8 @@ const ServicesGql = graphql(ServicesQuery, {
 });
 
 const ServicesTopologyWithData = compose(
-  PortalGql,
+  ServicesGql,
-  ServicesGql
+  UiConnect
 )(ServicesTopology);
 
 export default ServicesTopologyWithData;

frontend/src/graphql/Portal.gql

@@ -1,6 +1,8 @@
 query Portal {
   portal {
-    username
+    user {
+      firstName
+    }
     datacenter {
       uuid
       region

frontend/src/router.js

@@ -6,9 +6,7 @@ import {
   Switch
 } 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 { ServiceList, ServicesTopology, ServicesMenu } from '@containers/services';

frontend/src/state/actions.js

@@ -5,5 +5,5 @@ const APP = constantCase(process.env['APP_NAME']);
 
 /******************************* UI *******************************/
 
-export const addMemberToProject =
+export const toggleServicesQuickActions =
-  createAction(`${APP}/PROJECT_ADD_MEMBER`);
+  createAction(`${APP}/TOGGLE_SERVICES_QUICK_ACTIONS`);

frontend/src/state/reducers/index.js

@@ -0,0 +1 @@
+export { default as ui } from './ui';

frontend/src/state/reducers/ui.js

@@ -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;
+  }
+}, {});

frontend/src/state/state.js

@@ -15,6 +15,11 @@ const state = {
         pathname: "instances",
         name: "Instances"
       }]
+    },
+    services: {
+      quickActions: {
+        show: false
+      }
     }
   }
 }

frontend/src/state/store.js

@@ -1,6 +1,8 @@
 import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
+import { enableBatching } from 'redux-batched-actions';
 import { ApolloClient, createNetworkInterface } from 'react-apollo';
 import state from './state';
+import { ui } from './reducers';
 
 export const client = new ApolloClient({
   dataIdFromObject: o => {
@@ -14,12 +16,10 @@ export const client = new ApolloClient({
 
 export const store = createStore(
   combineReducers({
-    ui: (s) => {
+    ui: ui,
-      return s ? s : state.ui
-    },
     apollo: client.reducer(),
   }),
-  {}, // initial state
+  state, // initial state
   compose(
       applyMiddleware(client.middleware()),
       // If you are using the devToolsExtension, you can add it here also

frontend/yarn.lock

@@ -5263,6 +5263,10 @@ redux-actions@^2.0.3:
     lodash-es "^4.17.4"
     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:
   version "6.7.0"
   resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-6.7.0.tgz#9fb0769e76f14febf1dd7686e02c4ab2d6f953aa"

spikes/graphql/graphql-server/src/resolvers.js

@@ -7,7 +7,14 @@ const datacenter = {
   uuid: 'datacenter-uuid',
   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 => {
   p.slug = p.id;
   return p;

spikes/graphql/graphql-server/src/schema.gql

@@ -3,11 +3,19 @@
   scalar Object
 
   type Portal {
-    username: String!
+    user: User!
     datacenter: Datacenter!
     deploymentGroups: [DeploymentGroup]!
   }
 
+  type User {
+    uuid: ID!
+    firstName: String!
+    lastName: String!
+    email: String!
+    login: String!
+  }
+
   type DeploymentGroup {
     uuid: ID!
     name: String!
@@ -163,6 +171,7 @@
   # but this way we expose the entire db through gql
   type Query {
     portal: Portal
+    user: User
     deploymentGroups(name: String, slug: String): [DeploymentGroup]
     deploymentGroup(uuid: ID, name: String, slug: String): DeploymentGroup
     serviceScales(serviceName: String, versionUuid: ID): [ServiceScale]

ui/src/components/topology/graph-node/button.js

@@ -39,6 +39,7 @@ const GraphNodeButton = ({
         y2={height}
         connected={connected}
       />
+      {buttonCircles}
       <GraphButtonRect
         height={height}
         onClick={onButtonClick}
@@ -47,7 +48,6 @@ const GraphNodeButton = ({
         role='button'
         tabIndex={100 + index}
       />
-      {buttonCircles}
     </g>
   );
 };

ui/src/components/topology/graph-node/index.js

@@ -40,7 +40,6 @@ const GraphNode = ({
   }
 
   const onButtonClick = (evt) => {
-
     const tooltipPosition = {
       x: data.x + Constants.buttonRect.x + Constants.buttonRect.width/2,
       y: data.y + Constants.buttonRect.y + Constants.buttonRect.height
@@ -52,18 +51,19 @@ const GraphNode = ({
     }
 
     const d = {
-      service: data.uuid,
+      service: data,
       position: {
         left: tooltipPosition.x,
         top: tooltipPosition.y
-      }
+      },
+      rect: Constants.buttonRect
     };
 
     onQuickActions(evt, d);
   };
 
-  const onTitleClick = () =>
+  const onTitleClick = (evt) =>
-    onNodeTitleClick(data.uuid);
+    onNodeTitleClick(evt, { service: data });
 
   const onStart = (evt) => {
     evt.preventDefault();

ui/src/components/topology/graph-node/shapes.js

@@ -27,6 +27,7 @@ export const GraphTitle = styled.text`
   fill: ${props => props.connected ? colors.base.white : colors.base.secondary};
   font-size: 16px;
   font-weight: 600;
+  cursor: pointer;
 `;
 
 export const GraphSubtitle = styled.text`

ui/src/components/topology/topology-graph.js

@@ -220,8 +220,8 @@ class TopologyGraph extends React.Component {
       this.setDragInfo(false);
     };
 
-    const onTitleClick = (serviceUUID) =>
+    const onTitleClick = (evt, data) =>
-      this.props.onNodeTitleClick(serviceUUID);
+      this.props.onNodeTitleClick(evt, data);
 
     const renderedNode = (n, index) => (
       <GraphNode