github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-03-03 02:00:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add new node shapes for k8s combined view

Browse Source 
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)
This commit is contained in:
jpellizzari
2017-06-07 10:13:53 -07:00
committed by Mike Lang
parent 13b2ed69bd
commit 4f341cb1d2
4 changed files with 31 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
client/app/scripts/charts/node-shapes.js
View File

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

10
client/app/scripts/charts/node.js
View File

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

11
client/app/scripts/utils/node-shape-utils.js
View File

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

11
report/report.go
View File

@@ -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().