From 4f341cb1d2885ded0c13f806224b744867e9bdab Mon Sep 17 00:00:00 2001
From: jpellizzari <jordan@weave.works>
Date: Wed, 7 Jun 2017 10:13:53 -0700
Subject: [PATCH] Add new node shapes for k8s combined view

While we're there, adopt a consistent ordering for all places that shapes are listed
Order is least sides to most sides, with circle before polygons, and complex shapes (currently just Cloud) after.

On shape choices for topologies:
* Since the k8s logo is a heptagon, we want pods to be heptagons.
* Since triangle is 'a bit weird', we put it on the least-important type, replica sets.
* Pentagons look a little weirder than octogons (it's the lack of symmetry) so we put octogons on the most common (deployments)
---
 client/app/scripts/charts/node-shapes.js     | 12 +++++++++---
 client/app/scripts/charts/node.js            | 10 ++++++++--
 client/app/scripts/utils/node-shape-utils.js | 11 +++++++----
 report/report.go                             | 11 +++++++----
 4 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/client/app/scripts/charts/node-shapes.js b/client/app/scripts/charts/node-shapes.js
index 3c421ab7c..f73545d86 100644
--- a/client/app/scripts/charts/node-shapes.js
+++ b/client/app/scripts/charts/node-shapes.js
@@ -11,11 +11,14 @@ import {
   pathElement,
   circleElement,
   rectangleElement,
-  cloudShapeProps,
   circleShapeProps,
+  triangleShapeProps,
   squareShapeProps,
+  pentagonShapeProps,
   hexagonShapeProps,
   heptagonShapeProps,
+  octagonShapeProps,
+  cloudShapeProps,
 } from '../utils/node-shape-utils';
 
 
@@ -69,8 +72,11 @@ function NodeShape(shapeType, shapeElement, shapeProps, { id, highlighted, color
   );
 }
 
-export const NodeShapeCloud = props => NodeShape('cloud', pathElement, cloudShapeProps, props);
 export const NodeShapeCircle = props => NodeShape('circle', circleElement, circleShapeProps, props);
+export const NodeShapeTriangle = props => NodeShape('triangle', pathElement, triangleShapeProps, props);
+export const NodeShapeSquare = props => NodeShape('square', rectangleElement, squareShapeProps, props);
+export const NodeShapePentagon = props => NodeShape('pentagon', pathElement, pentagonShapeProps, props);
 export const NodeShapeHexagon = props => NodeShape('hexagon', pathElement, hexagonShapeProps, props);
 export const NodeShapeHeptagon = props => NodeShape('heptagon', pathElement, heptagonShapeProps, props);
-export const NodeShapeSquare = props => NodeShape('square', rectangleElement, squareShapeProps, props);
+export const NodeShapeOctagon = props => NodeShape('octagon', pathElement, octagonShapeProps, props);
+export const NodeShapeCloud = props => NodeShape('cloud', pathElement, cloudShapeProps, props);
diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js
index f5882cb5e..0b5cfb868 100644
--- a/client/app/scripts/charts/node.js
+++ b/client/app/scripts/charts/node.js
@@ -14,20 +14,26 @@ import { NODE_BASE_SIZE } from '../constants/styles';
 import NodeShapeStack from './node-shape-stack';
 import NodeNetworksOverlay from './node-networks-overlay';
 import {
-  NodeShapeCloud,
   NodeShapeCircle,
+  NodeShapeTriangle,
   NodeShapeSquare,
+  NodeShapePentagon,
   NodeShapeHexagon,
   NodeShapeHeptagon,
+  NodeShapeOctagon,
+  NodeShapeCloud,
 } from './node-shapes';
 
 
 const labelWidth = 1.2 * NODE_BASE_SIZE;
 const nodeShapes = {
   circle: NodeShapeCircle,
+  triangle: NodeShapeTriangle,
+  square: NodeShapeSquare,
+  pentagon: NodeShapePentagon,
   hexagon: NodeShapeHexagon,
   heptagon: NodeShapeHeptagon,
-  square: NodeShapeSquare,
+  octagon: NodeShapeOctagon,
   cloud: NodeShapeCloud,
 };
 
diff --git a/client/app/scripts/utils/node-shape-utils.js b/client/app/scripts/utils/node-shape-utils.js
index 20b59f755..1f3f4c255 100644
--- a/client/app/scripts/utils/node-shape-utils.js
+++ b/client/app/scripts/utils/node-shape-utils.js
@@ -20,8 +20,11 @@ function curvedUnitPolygonPath(n) {
   ]));
 }
 
-export const squareShapeProps = { width: 1.8, height: 1.8, rx: 0.4, ry: 0.4, x: -0.9, y: -0.9 };
-export const heptagonShapeProps = { d: curvedUnitPolygonPath(7) };
-export const hexagonShapeProps = { d: curvedUnitPolygonPath(6) };
-export const cloudShapeProps = { d: UNIT_CLOUD_PATH };
 export const circleShapeProps = { r: 1 };
+export const triangleShapeProps = { d: curvedUnitPolygonPath(3) };
+export const squareShapeProps = { width: 1.8, height: 1.8, rx: 0.4, ry: 0.4, x: -0.9, y: -0.9 };
+export const pentagonShapeProps = { d: curvedUnitPolygonPath(5) };
+export const hexagonShapeProps = { d: curvedUnitPolygonPath(6) };
+export const heptagonShapeProps = { d: curvedUnitPolygonPath(7) };
+export const octagonShapeProps = { d: curvedUnitPolygonPath(8) };
+export const cloudShapeProps = { d: UNIT_CLOUD_PATH };
diff --git a/report/report.go b/report/report.go
index f1f790a42..7fb95ec95 100644
--- a/report/report.go
+++ b/report/report.go
@@ -29,9 +29,12 @@ const (
 
 	// Shapes used for different nodes
 	Circle   = "circle"
+	Triangle = "triangle"
 	Square   = "square"
-	Heptagon = "heptagon"
+	Pentagon = "pentagon"
 	Hexagon  = "hexagon"
+	Heptagon = "heptagon"
+	Octagon  = "octagon"
 	Cloud    = "cloud"
 
 	// Used when counting the number of containers
@@ -163,15 +166,15 @@ func MakeReport() Report {
 			WithLabel("service", "services"),
 
 		Deployment: MakeTopology().
-			WithShape(Heptagon).
+			WithShape(Octagon).
 			WithLabel("deployment", "deployments"),
 
 		ReplicaSet: MakeTopology().
-			WithShape(Heptagon).
+			WithShape(Triangle).
 			WithLabel("replica set", "replica sets"),
 
 		DaemonSet: MakeTopology().
-			WithShape(Heptagon).
+			WithShape(Pentagon).
 			WithLabel("daemonset", "daemonsets"),
 
 		Overlay: MakeTopology().