Add mock testing data

frontend/src/components/breadcrumb/index.js

@@ -20,6 +20,7 @@ const StyledDiv = styled.div`
 
 const BreadcrumbA = styled(NavLink)`
   text-decoration: none;
+  color: ${colors.base.primary};
 `;
 
 const BreadcrumbSpan = styled.span`

frontend/src/components/navigation/org.js

@@ -7,7 +7,7 @@ import Container from '@ui/components/container';
 import NavLink from '@ui/components/nav-link';
 import { colors } from '@ui/shared/constants';
 import PropTypes from '@root/prop-types';
-import { orgsSelector } from '@state/selectors';
+import { orgsSelector, orgsUISelector } from '@state/selectors';
 import { remcalc } from '@ui/shared/functions';
 import { breakpoints } from '@ui/shared/constants';
 import Tabs, { Tab } from '@ui/components/tabs';
@@ -58,7 +58,7 @@ const NavLi = styled(NavLink)`
 
 const StyledTabs = styled(Tabs)`
   padding-top: ${remcalc(12)};
-  
+
   ${breakpoints.smallOnly`
     display: inline-block;
     white-space: nowrap;
@@ -70,7 +70,7 @@ const StyledContainer = styled(Container)`
   ${breakpoints.smallOnly`
     overflow: scroll;
     display: flex;
-    
+
   `}
 `;
 
@@ -96,7 +96,8 @@ const DumbTab = ({
 );
 
 const OrgNavigation = ({
-  orgs = []
+  orgs = [],
+  orgsUI
 }) => {
   const navLinks = orgs.map(({
     id,
@@ -129,11 +130,13 @@ const OrgNavigation = ({
     );
   });
 
-  const manageTabs = () => (
+  const manageTabs = () => orgsUI.hide_add_and_manage ? null :
+  (
     <DumbTab>Manage Tabs ({orgs.length})</DumbTab>
   );
 
-  const addOrgTab = () => (
+  const addOrgTab = () => orgsUI.hide_add_and_manage ? null :
+  (
     <DumbTab>+ &nbsp; Add organisation</DumbTab>
   );
 
@@ -142,7 +145,6 @@ const OrgNavigation = ({
       <StyledContainer>
         <StyledTabs name='organisation-navigation-group'>
           {navLinks}
-
           <Tab title={addOrgTab()} key='1' />
           <ManageTab title={manageTabs()} key='2' />
         </StyledTabs>
@@ -152,7 +154,8 @@ const OrgNavigation = ({
 };
 
 OrgNavigation.propTypes = {
-  orgs: React.PropTypes.arrayOf(PropTypes.org)
+  orgs: React.PropTypes.arrayOf(PropTypes.org),
+  orgsUI: React.PropTypes.object
 };
 
 DumbTab.propTypes = {
@@ -160,7 +163,8 @@ DumbTab.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  orgs: orgsSelector(state)
+  orgs: orgsSelector(state),
+  orgsUI: orgsUISelector(state)
 });
 
 export default connect(

frontend/src/components/service/item.js

@@ -42,7 +42,7 @@ const ServiceItem = ({
   service = {}
 }) => {
   const isChild = !!service.parent;
-  console.log('service = ', service);
+
   const childs = forceArray(service.services).map((service) => (
     <ServiceItem
       key={service.uuid}

frontend/src/index.js

@@ -6,7 +6,8 @@ import ReactDOM from 'react-dom';
 import React from 'react';
 
 import App from '@containers/app';
-import MockState from './mock-state.json';
+// import MockState from './mock-state.json';
+import MockStateTesting from './mock-state-testing.json';
 import Datasets from './datasets.json';
 import Store from '@state/store';
 
@@ -16,13 +17,17 @@ if (process.env.NODE_ENV !== 'production') {
   });
 }
 
+// TODO want ot be able to switch whic mock state to use
+// based on a query string
+const mockState = MockStateTesting;
+
 // TMP - ensure datasets are at least 2 hrs long - START
 import getTwoHourDatasets from './utils/two-hour-metric-datasets';
 const twoHourLongDatasets = getTwoHourDatasets(Datasets);
 // TMP - ensure datasets are at least 2 hrs long - END
 
 // TMP - plug fake metric data - START
-const datasets = MockState.metrics.data.datasets.map((dataset, index) => {
+const datasets = mockState.metrics.data.datasets.map((dataset, index) => {
   const keyIndex = index%2 ? 0 : 1;
   const key = Object.keys(twoHourLongDatasets)[keyIndex];
   return {
@@ -31,11 +36,11 @@ const datasets = MockState.metrics.data.datasets.map((dataset, index) => {
   };
 });
 
-MockState.metrics.data.datasets = datasets;
+mockState.metrics.data.datasets = datasets;
 // TMP - plug fake metric data - END
 
 ReactDOM.render(
-  <Provider store={Store(MockState)}>
+  <Provider store={Store(mockState)}>
     <IntlProvider>
       <BrowserRouter>
         <App />

frontend/src/mock-state-testing.json

@@ -0,0 +1,629 @@
+{
+  "account": {
+    "data": {
+      "uuid": "b94033c1-3665-4c36-afab-d9c3d0b51c01",
+      "id": "nicola",
+      "name": "Nicola",
+      "email": "nicola@biztech.com",
+      "avatar": "/static/images/avatar.png"
+    },
+    "ui": {
+      "profile_tooltip": false
+    }
+  },
+  "datacenters": {
+    "data": [{
+      "uuid": "f018da03-41c8-4619-a36a-ab8b706160cb",
+      "id": "us-east-1",
+      "location": "Virginia, United States"
+    }, {
+      "uuid": "c4bf6263-be98-4798-bff4-9043bbc6b4e0",
+      "id": "us-east-2",
+      "location": "Virginia, United States"
+    }, {
+      "uuid": "443750e4-a58f-4360-b956-ef84b1a9a8ad",
+      "id": "us-east-3",
+      "location": "Virginia, United States"
+    }, {
+      "uuid": "9f743fdb-9401-48ea-b19e-45fcd1fc6d21",
+      "id": "us-east-3b",
+      "location": "Virginia, United States"
+    }, {
+      "uuid": "79a3ef11-be0a-44f0-b1fd-8c335dea61f4",
+      "id": "us-sw-1",
+      "location": "Nevada, United States"
+    }, {
+      "uuid": "e69017d6-a4ce-4a0e-a7a3-993b426200fd",
+      "id": "us-west-1",
+      "location": "California, United States"
+    }, {
+      "uuid": "8d2eb6f8-27b3-4275-afab-1044cc75def1",
+      "id": "eu-ams-1",
+      "location": "Amsterdam, Netherlands"
+    }, {
+      "uuid": "4395136a-d623-4101-ab19-79f064d7a224",
+      "id": "eu-ams-1",
+      "location": "Amsterdam, Netherlands"
+    }]
+  },
+  "monitors": {
+    "ui": {
+      "page": "create"
+    }
+  },
+  "metrics": {
+    "ui": {
+      "pos": 0,
+      "durations": [
+        "360",
+        "720",
+        "1440",
+        "2880"
+      ]
+    },
+    "data": {
+      "types": [{
+        "uuid": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "name": "Aggregated CPU usage",
+        "id": "cpu-agg-usage",
+        "min": 0,
+        "max": 100,
+        "measurement": "%"
+      }, {
+        "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d6",
+        "name": "Aggregated CPU usage",
+        "id": "cpu-wait-time",
+        "min": 0,
+        "max": 100,
+        "measurement": "%"
+      }, {
+        "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
+        "name": "Aggregated CPU usage",
+        "id": "zfs-used",
+        "min": 1,
+        "max": 2,
+        "measurement": "kb"
+      }, {
+        "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d8",
+        "name": "Aggregated CPU usage",
+        "id": "zfs-available",
+        "min": 0,
+        "max": 100,
+        "measurement": "%"
+      }, {
+        "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+        "name": "Aggregated CPU usage",
+        "id": "load-average",
+        "min": 0,
+        "max": 20,
+        "measurement": "kb"
+      }, {
+        "uuid": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+        "name": "Aggregated CPU usage",
+        "id": "mem-agg-usage",
+        "min": 0,
+        "max": 100,
+        "measurement": "%"
+      }, {
+        "uuid": "dca08514-72e5-46ce-ad93-e68b3b0914d4",
+        "name": "Aggregated CPU usage",
+        "id": "mem-limit",
+        "min": 0,
+        "max": 100,
+        "measurement": "%"
+      }, {
+        "uuid": "dca08514-72e5-46ce-ad94-e68b3b0914d4",
+        "name": "Aggregated CPU usage",
+        "id": "mem-swap",
+        "min": 0,
+        "max": 100,
+        "measurement": "%"
+      }, {
+        "uuid": "dca08514-72e5-46ce-ad95-e68b3b0914d4",
+        "name": "Aggregated CPU usage",
+        "id": "mem-swap-limit",
+        "min": 0,
+        "max": 100,
+        "measurement": "%"
+      }, {
+        "uuid": "dca08514-72e5-46ce-ad96-e68b3b0914d4",
+        "name": "Aggregated CPU usage",
+        "id": "net-agg-packets-in",
+        "min": 0,
+        "max": 100,
+        "measurement": "%"
+      }, {
+        "uuid": "dca08514-72e5-46ce-ad97-e68b3b0914d4",
+        "name": "Aggregated CPU usage",
+        "id": "net-agg-packets-out",
+        "min": 0,
+        "max": 100,
+        "measurement": "%"
+      }, {
+        "uuid": "dca08514-72e5-47ce-ad91-e68b3b0914d4",
+        "name": "Aggregated CPU usage",
+        "id": "net-agg-bytes-in",
+        "min": 0,
+        "max": 100,
+        "measurement": "%"
+      }, {
+        "uuid": "dca08514-72e5-48ce-ad91-e68b3b0914d4",
+        "name": "Aggregated CPU usage",
+        "id": "net-agg-bytes-out",
+        "min": 0,
+        "max": 100,
+        "measurement": "%"
+      }, {
+        "uuid": "dca08514-72e5-49ce-ad91-e68b3b0914d4",
+        "name": "Aggregated CPU usage",
+        "id": "time-of-day",
+        "min": 0,
+        "max": 100,
+        "measurement": "%"
+      }],
+      "datasets": [{
+        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "uuid": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "data": []
+      },{
+        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+        "uuid": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed",
+        "data": []
+      }]
+    }
+  },
+  "orgs": {
+    "ui": {
+      "invite_toggled": false,
+      "member_status_tooltip": false,
+      "member_role_tooltip": false,
+      "hide_add_and_manage": true,
+      "sections": [
+        "projects",
+        "people",
+        "settings"
+      ],
+      "members_status": [
+        "Active",
+        "Inactive",
+        "Invitation Sent"
+      ],
+      "members_roles": [
+        "Owner",
+        "Unassigned",
+        "Read Only"
+      ]
+    },
+    "data": [{
+      "hide": [
+        "people"
+      ],
+      "owner": "b94033c1-3665-4c36-afab-d9c3d0b51c01",
+      "uuid": "e12ad7db-91b2-4154-83dd-40dcfc700dcc",
+      "id": "nicola",
+      "name": "Personal",
+      "image": "https://pbs.twimg.com/profile_images/641289584580493312/VBfsPlff_400x400.jpg",
+      "members": []
+    }]
+  },
+  "projects": {
+    "ui": {
+      "invite_toggled": false,
+      "member_status_tooltip": false,
+      "member_role_tooltip": false,
+      "sections": [
+        "project-feed",
+        "services",
+        "instances",
+        "rollback",
+        "manifest",
+        "settings"
+      ],
+      "members_status": [
+        "Active",
+        "Inactive",
+        "Invitation Sent"
+      ],
+      "members_roles": [
+        "Owner",
+        "Unassigned",
+        "Read Only"
+      ]
+    },
+    "data": [{
+      "uuid": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "org": "e12ad7db-91b2-4154-83dd-40dcfc700dcc",
+      "id": "forest-foundation-dev",
+      "name": "Forest Foundation Dev",
+      "plan": "20.05$ per day",
+      "members": [{
+        "uuid": "fd853d8f-e1dd-49b5-b7b3-ae9adfea1e2f",
+        "role": "Owner",
+        "status": "Active"
+      },
+      {
+        "uuid": "6deddbaa-3b94-4373-8cf7-97129507a872",
+        "role": "Unassigned",
+        "status": "Sent invitation"
+      }]
+    }, {
+      "uuid": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
+      "org": "e12ad7db-91b2-4154-83dd-40dcfc700dcc",
+      "id": "forest-foundation-testing",
+      "name": "Forest Foundation Testing",
+      "plan": "20.05$ per day",
+      "members": []
+    }, {
+      "uuid": "ac2c2498-e865-4ee3-9e26-8c75a81cbe25",
+      "org": "e12ad7db-91b2-4154-83dd-40dcfc700dcc",
+      "id": "forest-foundation-production",
+      "name": "Forest Foundation Production",
+      "plan": "100.17$ per day",
+      "members": []
+    }]
+  },
+  "members": {
+    "data": [{
+      "uuid": "b94033c1-3665-4c36-afab-d9c3d0b51c01"
+    }, {
+      "uuid": "fd853d8f-e1dd-49b5-b7b3-ae9adfea1e2f",
+      "id": "alex-windnett",
+      "name": "Alex Windnett",
+      "email": "alex.windnett@biztech.com"
+    }, {
+      "uuid": "4a248182-f4b5-499d-af5b-d436b70bb309",
+      "id": "alex-fraser",
+      "name": "Alex Fraser",
+      "email": "alex.fraser@biztech.com"
+    }, {
+      "uuid": "a9dfe7de-3938-4e30-93db-6e3b88b003ee",
+      "id": "alex-mcleod",
+      "name": "Alex McLeod",
+      "email": "alex.mcleod@biztech.com"
+    }, {
+      "uuid": "6deddbaa-3b94-4373-8cf7-97129507a872",
+      "id": "casey-jones",
+      "name": "Casey Jones",
+      "email": "caseyjones@biztech.com"
+    }]
+  },
+  "services": {
+    "ui": {
+      "collapsed": [],
+      "sections": [
+        "summary",
+        "instances",
+        "metrics",
+        "networks",
+        "tags-metadata",
+        "activity-feed",
+        "service-manifest",
+        "firewall"
+      ],
+      "tooltip": {
+        "show": false
+      }
+    },
+    "data": [{
+      "uuid": "081a792c-47e0-4439-924b-2efa9788ae9e",
+      "id": "nginx",
+      "name": "Nginx",
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "instances": 1,
+      "metrics": [{
+        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }, {
+        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
+        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+      }, {
+        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }],
+      "connections": [
+        "be227788-74f1-4e5b-a85f-b5c71cbae8d8"
+      ]
+    }, {
+      "uuid": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
+      "id": "wordpress",
+      "name": "Wordpress",
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "instances": 1,
+      "metrics": [{
+        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }, {
+        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
+        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+      }, {
+        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }],
+      "connections": [
+        "6a0eee76-c019-413b-9d5f-44712b55b993",
+        "6d31aff4-de1e-4042-a983-fbd23d5c530c",
+        "4ee4103e-1a52-4099-a48e-01588f597c70"
+      ]
+    }, {
+      "uuid": "6a0eee76-c019-413b-9d5f-44712b55b993",
+      "id": "nfs",
+      "name": "NFS",
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "instances": 1,
+      "metrics": [{
+        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }, {
+        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
+        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+      }, {
+        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }]
+    }, {
+      "uuid": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
+      "id": "memcached",
+      "name": "Memcached",
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "instances": 1,
+      "metrics": [{
+        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }, {
+        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
+        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+      }, {
+        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }]
+    }, {
+      "uuid": "4ee4103e-1a52-4099-a48e-01588f597c70",
+      "id": "percona",
+      "name": "Percona",
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "instances": 4,
+      "metrics": [{
+        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }, {
+        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
+        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+      }, {
+        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }]
+    }, {
+      "uuid": "9572d367-c4ae-4fb1-8ad5-f5e3830e7034",
+      "id": "primary",
+      "name": "Primary",
+      "parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "instances": 1,
+      "metrics": [{
+        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }, {
+        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
+        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+      }, {
+        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }]
+    }, {
+      "uuid": "c8411ef0-ab39-42cb-a704-d20b170eff31",
+      "id": "secondaries",
+      "name": "Secondaries",
+      "parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "instances": 3,
+      "metrics": [{
+        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }, {
+        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
+        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+      }, {
+        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }]
+    }, {
+      "uuid": "97c68055-db88-45c9-ad49-f26da4264777",
+      "id": "consul",
+      "name": "Consul",
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "instances": 3,
+      "metrics": [{
+        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }, {
+        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
+        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+      }, {
+        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }]
+    }]
+  },
+  "instances": {
+    "ui": {
+      "collapsed": []
+    },
+    "data": [{
+      "uuid": "309ecd9f-ac03-474b-aff7-4bd2e743296c",
+      "name": "wordpress_01",
+      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
+      "service": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [{
+        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }, {
+        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
+        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+      }, {
+        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }]
+    }, {
+      "uuid": "0db6db53-de6f-4378-839e-5d5b452fbaf2",
+      "name": "nfs_01",
+      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
+      "service": "6a0eee76-c019-413b-9d5f-44712b55b993",
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [{
+        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }, {
+        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
+        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+      }, {
+        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }]
+    }, {
+      "uuid": "250c8a6c-7d02-49a9-8abd-e1c22773041d",
+      "name": "consul",
+      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
+      "service": "97c68055-db88-45c9-ad49-f26da4264777",
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [{
+        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }, {
+        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
+        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+      }, {
+        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }]
+    }, {
+      "uuid": "2c921f3a-8bc3-4f57-9cd7-789ebae72061",
+      "name": "memcache_01",
+      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
+      "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [{
+        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }, {
+        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
+        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+      }, {
+        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }]
+    }, {
+      "uuid": "68d3046e-8e34-4f5d-a0e5-db3795a250fd",
+      "name": "memcache_02",
+      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
+      "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [{
+        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }, {
+        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
+        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+      }, {
+        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }]
+    }, {
+      "uuid": "2ea99763-3b44-4179-8393-d66d94961051",
+      "name": "memcache_03",
+      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
+      "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [{
+        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }, {
+        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
+        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+      }, {
+        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }]
+    }, {
+      "uuid": "25f6bc62-63b8-4959-908e-1f6d7ff6341d",
+      "name": "memcache_04",
+      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
+      "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [{
+        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }, {
+        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
+        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+      }, {
+        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }]
+    }, {
+      "uuid": "8be01042-0281-4a77-a357-25979e87bf3d",
+      "name": "memcache_05",
+      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
+      "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [{
+        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }, {
+        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
+        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+      }, {
+        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }]
+    }, {
+      "uuid": "3d652e9d-73e8-4a6f-8171-84fa83740662",
+      "name": "nginx",
+      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
+      "service": "081a792c-47e0-4439-924b-2efa9788ae9e",
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [{
+        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }, {
+        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
+        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+      }, {
+        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }]
+    }, {
+      "uuid": "c3ec7633-a02b-4615-86a0-9e6faeaae94b",
+      "name": "percona-primary",
+      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
+      "service": "4ee4103e-1a52-4099-a48e-01588f597c70",
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [{
+        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }, {
+        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
+        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+      }, {
+        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }]
+    }, {
+      "uuid": "c2b5fec2-31e2-41a7-b7fc-cd0bb1822e76",
+      "name": "percona-secondary",
+      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
+      "service": "4ee4103e-1a52-4099-a48e-01588f597c70",
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [{
+        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }, {
+        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
+        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+      }, {
+        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      }]
+    }]
+  }
+}

frontend/src/state/selectors.js

@@ -15,7 +15,7 @@ const projectUiSections = (state) => get(state, 'projects.ui.sections', []);
 const serviceUiTooltip = (state) => get(state, 'services.ui.tooltip', []);
 const serviceUiSections = (state) => get(state, 'services.ui.sections', []);
 const orgs = (state) => get(state, 'orgs.data', []);
-const orgUI = (state) => get(state, 'orgs.ui', []);
+const orgsUI = (state) => get(state, 'orgs.ui', []);
 const projects = (state) => get(state, 'projects.data', []);
 const projectsUI = (state) => get(state, 'projects.ui', []);
 const services = (state) => get(state, 'services.data', []);
@@ -315,8 +315,8 @@ const instancesByServiceId = (serviceId) => createSelector(
 );
 
 const servicesForTopology = (projectId) => createSelector(
-  [services, projectById(projectId)],
+  [services, projectById(projectId), instances],
-  (services, project) =>
+  (services, project, instances) =>
   services.filter((s) => s.project === project.uuid)
   .reduce((acc, service, index, services) => {
     const getService = (s) => ({
@@ -324,10 +324,9 @@ const servicesForTopology = (projectId) => createSelector(
       uuid: s.uuid,
       id: s.id,
       name: s.name,
-      instances: instancesByServiceId(s.uuid).length,
       connections: s.connections,
       // tmp below
-      datacentres: 2,
+      datacentres: 1,
       metrics: [
         {
           name: 'CPU',
@@ -437,7 +436,7 @@ export {
   accountUi as accountUISelector,
   orgById as orgByIdSelector,
   orgs as orgsSelector,
-  orgUI as orgUISelector,
+  orgsUI as orgsUISelector,
   orgIndexById as orgIndexSelector,
   services as servicesSelector,
   serviceById as serviceByIdSelector,