Selector to add primary and secondary to parent

Remove console log

Selector to add primary and secondary to parent

frontend/src/mock-state.json

@@ -667,7 +667,7 @@
       "connections": [
         "6a0eee76-c019-413b-9d5f-44712b55b993",
         "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-        "9572d367-c4ae-4fb1-8ad5-f5e3830e7034"
+        "4ee4103e-1a52-4099-a48e-01588f597c70"
       ]
     }, {
       "uuid": "6a0eee76-c019-413b-9d5f-44712b55b993",

frontend/src/state/selectors.js

@@ -110,13 +110,14 @@ const servicesForTopology = (projectId) => createSelector(
   [services, projectById(projectId)],
   (services, project) =>
   services.filter((s) => s.project === project.uuid)
-  .map((service) => ({
-    ...service,
-    uuid: service.uuid,
-    id: service.id,
-    name: service.name,
-    instances: instancesByServiceId(service.uuid).length,
-    connections: service.connections,
+  .reduce((acc, service, index, services) => {
+    const getService = (s) => ({
+      ...s,
+      uuid: s.uuid,
+      id: s.id,
+      name: s.name,
+      instances: instancesByServiceId(s.uuid).length,
+      connections: s.connections,
       // tmp below
       datacentres: 2,
       metrics: [
@@ -134,7 +135,33 @@ const servicesForTopology = (projectId) => createSelector(
         }
       ],
       healthy: true
-  }))
+    });
+    const findService = (a, s, p) => s.uuid === p ? s : a;
+    if(service.parent) {
+      let parent = acc.reduce((a, s) =>
+        findService(a, s, service.parent), null);
+      if(!parent) {
+        parent = services.reduce((a, s) =>
+          findService(a, s, service.parent), null);
+        acc.push(parent);
+      }
+      if(!parent.children) {
+        parent.children = [];
+      }
+      parent.children.push(
+        getService(service)
+      );
+    }
+    else {
+      const s = acc.reduce((a, s, i) => s.uuid === service.uuid, null);
+      if(!s) {
+        acc.push(
+          getService(service)
+        );
+      }
+    }
+    return acc;
+  }, [])
 );
 
 const metricsByServiceId = (serviceId) => createSelector(

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

@@ -11,7 +11,7 @@ const StyledLine = styled.line`
 
 const StyledCircle = styled.circle`
   stroke: ${colors.base.secondaryActive};
-  fill: colors.base.secondary;
+  fill: ${colors.base.secondary};
   stroke-width: 1.5;
 `;