mirror of
https://github.com/weaveworks/scope.git
synced 2026-03-05 03:01:11 +00:00
d26b2c3805
This will: - Add StorageClass resource. Storage classes are mentioned in the PVC spec. We're using storage class name from PVC spec to add adjacency to the PVC node. - Add square sheet shape for StorageClass. - Add storage filter in the PODS topology. Storage Filter will allow user to see distinct view of stateful applications. - Add visually distinct edge to show storage adjacency. Signed-off-by: Satyam Zode <satyam.zode@openebs.io>
92 lines
3.3 KiB
JavaScript
92 lines
3.3 KiB
JavaScript
import React from 'react';
|
|
import classNames from 'classnames';
|
|
|
|
import { NODE_BASE_SIZE } from '../constants/styles';
|
|
import {
|
|
getMetricValue,
|
|
getMetricColor,
|
|
getClipPathDefinition,
|
|
} from '../utils/metric-utils';
|
|
import {
|
|
pathElement,
|
|
circleElement,
|
|
rectangleElement,
|
|
circleShapeProps,
|
|
triangleShapeProps,
|
|
squareShapeProps,
|
|
pentagonShapeProps,
|
|
hexagonShapeProps,
|
|
heptagonShapeProps,
|
|
octagonShapeProps,
|
|
cloudShapeProps,
|
|
cylinderShapeProps,
|
|
dottedCylinderShapeProps,
|
|
sheetShapeProps
|
|
} from '../utils/node-shape-utils';
|
|
import { encodeIdAttribute } from '../utils/dom-utils';
|
|
|
|
|
|
function NodeShape(shapeType, shapeElement, shapeProps, {
|
|
id, highlighted, color, metric
|
|
}) {
|
|
const { height, hasMetric, formattedValue } = getMetricValue(metric);
|
|
const className = classNames('shape', `shape-${shapeType}`, { metrics: hasMetric });
|
|
const metricStyle = { fill: getMetricColor(metric) };
|
|
const clipId = encodeIdAttribute(`metric-clip-${id}`);
|
|
|
|
return (
|
|
<g className={className}>
|
|
{highlighted && shapeElement({
|
|
className: 'highlight-border',
|
|
transform: `scale(${NODE_BASE_SIZE * 0.5})`,
|
|
...shapeProps,
|
|
})}
|
|
{highlighted && shapeElement({
|
|
className: 'highlight-shadow',
|
|
transform: `scale(${NODE_BASE_SIZE * 0.5})`,
|
|
...shapeProps,
|
|
})}
|
|
{shapeElement({
|
|
className: 'background',
|
|
transform: `scale(${NODE_BASE_SIZE * 0.48})`,
|
|
...shapeProps,
|
|
})}
|
|
{hasMetric && getClipPathDefinition(clipId, height, 0.48)}
|
|
{hasMetric && shapeElement({
|
|
className: 'metric-fill',
|
|
transform: `scale(${NODE_BASE_SIZE * 0.48})`,
|
|
clipPath: `url(#${clipId})`,
|
|
style: metricStyle,
|
|
...shapeProps,
|
|
})}
|
|
{shapeElement({
|
|
className: 'shadow',
|
|
transform: `scale(${NODE_BASE_SIZE * 0.49})`,
|
|
...shapeProps,
|
|
})}
|
|
{shapeElement({
|
|
className: 'border',
|
|
transform: `scale(${NODE_BASE_SIZE * 0.5})`,
|
|
stroke: color,
|
|
...shapeProps,
|
|
})}
|
|
{hasMetric && highlighted ?
|
|
<text>{formattedValue}</text> :
|
|
<circle className="node" r={NODE_BASE_SIZE * 0.1} />
|
|
}
|
|
</g>
|
|
);
|
|
}
|
|
|
|
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 NodeShapeOctagon = props => NodeShape('octagon', pathElement, octagonShapeProps, props);
|
|
export const NodeShapeCloud = props => NodeShape('cloud', pathElement, cloudShapeProps, props);
|
|
export const NodeShapeCylinder = props => NodeShape('cylinder', pathElement, cylinderShapeProps, props);
|
|
export const NodeShapeDottedCylinder = props => NodeShape('dottedcylinder', pathElement, dottedCylinderShapeProps, props);
|
|
export const NodeShapeSheet = props => NodeShape('sheet', pathElement, sheetShapeProps, props);
|