Add sheet shape for storage classes.

Signed-off-by: Pradeepkumarbk <[email protected]>

client/app/scripts/charts/node-shapes.js

@@ -20,7 +20,8 @@ import {
   octagonShapeProps,
   cloudShapeProps,
   cylinderShapeProps,
-  dottedCylinderShapeProps
+  dottedCylinderShapeProps,
+  SheetShapeProps
 } from '../utils/node-shape-utils';
 import { encodeIdAttribute } from '../utils/dom-utils';
 
@@ -87,3 +88,4 @@ export const NodeShapeHexagon = props => NodeShape('hexagon', pathElement, hexag
 export const NodeShapeHeptagon = props => NodeShape('heptagon', pathElement, heptagonShapeProps, props);
 export const NodeShapeOctagon = props => NodeShape('octagon', pathElement, octagonShapeProps, props);
 export const NodeShapeCloud = props => NodeShape('cloud', pathElement, cloudShapeProps, props);
+export const NodeShapeSheet = props => NodeShape('sheet', pathElement, SheetShapeProps, props);

client/app/scripts/charts/node.js

@@ -23,7 +23,8 @@ import {
   NodeShapeOctagon,
   NodeShapeCloud,
   NodeShapeCylinder,
-  NodeShapeDottedCylinder
+  NodeShapeDottedCylinder,
+  NodeShapeSheet
 } from './node-shapes';
 
 
@@ -38,7 +39,8 @@ const nodeShapes = {
   octagon: NodeShapeOctagon,
   cloud: NodeShapeCloud,
   cylinder: NodeShapeCylinder,
-  dottedcylinder: NodeShapeDottedCylinder
+  dottedcylinder: NodeShapeDottedCylinder,
+  storagesheet: NodeShapeSheet
 };
 
 function stackedShape(Shape) {

client/app/scripts/constants/styles.js

@@ -30,6 +30,8 @@ export const UNIT_CYLINDER_PATH = 'm -1 -1.25' // this line is responsible for a
   + 'a 1 0.4 0 0 0 2 0'
   + 'v -1.8'
   + 'a 1 0.4 0 0 0 -2 0';
+export const SHEET = 'm -1.2 -1.6 m 0.4 0 v 2.4 m -0.4 -2.4 v 2.4 h 2 v -2.4 z m 0 0.4 h 2';
+
 // NOTE: This value represents the node unit radius (in pixels). Since zooming is
 // controlled at the top level now, this renormalization would be obsolete (i.e.
 // value 1 could be used instead), if it wasn't for the following factors:

client/app/scripts/utils/node-shape-utils.js

@@ -2,7 +2,7 @@ import React from 'react';
 import range from 'lodash/range';
 import { line, curveCardinalClosed } from 'd3-shape';
 
-import { UNIT_CLOUD_PATH, UNIT_CYLINDER_PATH } from '../constants/styles';
+import { UNIT_CLOUD_PATH, UNIT_CYLINDER_PATH, SHEET } from '../constants/styles';
 
 
 export const pathElement = React.createFactory('path');
@@ -31,3 +31,4 @@ export const octagonShapeProps = { d: curvedUnitPolygonPath(8) };
 export const cylinderShapeProps = { d: UNIT_CYLINDER_PATH };
 export const dottedCylinderShapeProps = { d: UNIT_CYLINDER_PATH };
 export const cloudShapeProps = { d: UNIT_CLOUD_PATH };
+export const SheetShapeProps = { d: SHEET };