Merge pull request #1037 from weaveworks/1035-add-septagon-node-shape

Adds support for the heptagon node shape

client/app/scripts/charts/node-shape-heptagon.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import d3 from 'd3';
+
+const line = d3.svg.line()
+  .interpolate('cardinal-closed')
+  .tension(0.25);
+
+function polygon(r, sides) {
+  const a = (Math.PI * 2) / sides;
+  const points = [[r, 0]];
+  for (let i = 1; i < sides; i++) {
+    points.push([r * Math.cos(a * i), r * Math.sin(a * i)]);
+  }
+  return points;
+}
+
+export default function NodeShapeHeptagon({onlyHighlight, highlighted, size, color}) {
+  const scaledSize = size * 1.0;
+  const pathProps = (v) => {
+    return {
+      d: line(polygon(scaledSize * v, 7)),
+      transform: `rotate(90)`
+    };
+  };
+
+  const hightlightNode = <path className="highlighted" {...pathProps(0.7)} />;
+
+  if (onlyHighlight) {
+    return (
+      <g className="shape">
+        {highlighted && hightlightNode}
+      </g>
+    );
+  }
+
+  return (
+    <g className="shape">
+      {highlighted && hightlightNode}
+      <path className="border" stroke={color} {...pathProps(0.5)} />
+      <path className="shadow" {...pathProps(0.45)} />
+      <circle className="node" r={Math.max(2, (scaledSize * 0.125))} />
+    </g>
+  );
+}
+

client/app/scripts/charts/node.js

@@ -9,6 +9,7 @@ import NodeShapeCircle from './node-shape-circle';
 import NodeShapeStack from './node-shape-stack';
 import NodeShapeRoundedSquare from './node-shape-rounded-square';
 import NodeShapeHex from './node-shape-hex';
+import NodeShapeHeptagon from './node-shape-heptagon';
 import NodeShapeCloud from './node-shape-cloud';
 
 function stackedShape(Shape) {
@@ -22,6 +23,7 @@ function stackedShape(Shape) {
 const nodeShapes = {
   'circle': NodeShapeCircle,
   'hexagon': NodeShapeHex,
+  'heptagon': NodeShapeHeptagon,
   'square': NodeShapeRoundedSquare,
   'cloud': NodeShapeCloud
 };

client/app/scripts/components/debug-toolbar.js

@@ -7,7 +7,7 @@ const log = debug('scope:debug-panel');
 import { receiveNodesDelta } from '../actions/app-actions';
 import AppStore from '../stores/app-store';
 
-const SHAPES = ['circle', 'hexagon', 'square'];
+const SHAPES = ['circle', 'hexagon', 'square', 'heptagon'];
 const NODE_COUNTS = [1, 2, 3];
 const STACK_VARIANTS = [true, false];
 

render/expected/expected.go

@@ -12,7 +12,7 @@ import (
 var (
 	circle   = "circle"
 	square   = "square"
-	pentagon = "pentagon"
+	heptagon = "heptagon"
 	hexagon  = "hexagon"
 	cloud    = "cloud"
 
@@ -372,7 +372,7 @@ var (
 			LabelMinor: "1 container",
 			Rank:       "ping/pong-a",
 			Pseudo:     false,
-			Shape:      pentagon,
+			Shape:      heptagon,
 			Children: report.MakeNodeSet(
 				fixture.Report.Process.Nodes[fixture.ClientProcess1NodeID],
 				fixture.Report.Process.Nodes[fixture.ClientProcess2NodeID],
@@ -392,7 +392,7 @@ var (
 			LabelMinor: "1 container",
 			Rank:       "ping/pong-b",
 			Pseudo:     false,
-			Shape:      pentagon,
+			Shape:      heptagon,
 			Children: report.MakeNodeSet(
 				fixture.Report.Process.Nodes[fixture.ServerProcessNodeID],
 				fixture.Report.Container.Nodes[fixture.ServerContainerNodeID],
@@ -441,7 +441,7 @@ var (
 			LabelMinor: "2 pods",
 			Rank:       fixture.ServiceID,
 			Pseudo:     false,
-			Shape:      pentagon,
+			Shape:      heptagon,
 			Stack:      true,
 			Children: report.MakeNodeSet(
 				fixture.Report.Process.Nodes[fixture.ClientProcess1NodeID],

render/mapping.go

@@ -211,7 +211,7 @@ func MapPodIdentity(m RenderableNode, _ report.Networks) RenderableNodes {
 	)
 
 	node := NewRenderableNodeWith(id, major, "", rank, m)
-	node.Shape = Pentagon
+	node.Shape = Heptagon
 	return RenderableNodes{id: node}
 }
 
@@ -231,7 +231,7 @@ func MapServiceIdentity(m RenderableNode, _ report.Networks) RenderableNodes {
 	)
 
 	node := NewRenderableNodeWith(id, major, "", rank, m)
-	node.Shape = Pentagon
+	node.Shape = Heptagon
 	node.Stack = true
 	return RenderableNodes{id: node}
 }
@@ -590,7 +590,7 @@ func MapPod2Service(n RenderableNode, _ report.Networks) RenderableNodes {
 		n := NewDerivedNode(id, n.WithParents(report.EmptySets))
 		n.Node.Counters = n.Node.Counters.Add(podsKey, 1)
 		n.Children = n.Children.Add(n.Node)
-		n.Shape = Pentagon
+		n.Shape = Heptagon
 		n.Stack = true
 		result[id] = n
 	}
@@ -703,7 +703,7 @@ func MapContainer2Pod(n RenderableNode, _ report.Networks) RenderableNodes {
 	}
 
 	result.Children = result.Children.Add(n.Node)
-	result.Shape = Pentagon
+	result.Shape = Heptagon
 	return RenderableNodes{id: result}
 }
 

render/renderable_node.go

@@ -26,7 +26,7 @@ type RenderableNode struct {
 const (
 	Circle   = "circle"
 	Square   = "square"
-	Pentagon = "pentagon"
+	Heptagon = "heptagon"
 	Hexagon  = "hexagon"
 	Cloud    = "cloud"
 )