Add the component and utility for helm release group

initial implementation initial implementation remove styles for selected and fine tune initial implementation align the item to UX designs add tests for utility and update test use fill attribute istead of styles
openshift · Jan 14, 2020 · 4dc667a · 4dc667a
1 parent 91fb810
commit 4dc667a
Show file tree

Hide file tree

Showing 12 changed files with 287 additions and 44 deletions.
diff --git a/frontend/packages/dev-console/src/components/svg/SvgBoxedText.tsx b/frontend/packages/dev-console/src/components/svg/SvgBoxedText.tsx
@@ -6,6 +6,7 @@ import {
   useCombineRefs,
   createSvgIdUrl,
 } from '@console/topology';
+import { getImageForIconClass } from '@console/internal/components/catalog/catalog-item-icon';
 import SvgResourceIcon from '../topology/components/nodes/ResourceIcon';
 import SvgDropShadowFilter from './SvgDropShadowFilter';
 
@@ -20,12 +21,16 @@ export interface SvgBoxedTextProps {
   kind?: string;
   truncate?: number;
   dragRef?: WithDndDragProps['dndDragRef'];
+  icon?: string;
   // TODO remove with 2.0
   onMouseEnter?: React.MouseEventHandler<SVGGElement>;
   onMouseLeave?: React.MouseEventHandler<SVGGElement>;
 }
 
 const FILTER_ID = 'SvgBoxedTextDropShadowFilterId';
+const iconFilterID = 'SVGBoxedTextRectIconFilter';
+const iconSize = 36;
+const iconPadding = 3;
 
 const truncateEnd = (text: string = '', length: number): string => {
   if (text.length <= length) {
@@ -50,52 +55,79 @@ const SvgBoxedText: React.FC<SvgBoxedTextProps> = ({
   onMouseLeave,
   truncate,
   dragRef,
+  icon,
   ...other
 }) => {
   const [labelHover, labelHoverRef] = useHover();
   const [textSize, textRef] = useSize([children, className, labelHover]);
-  const [iconSize, iconRef] = useSize([kind]);
-  const iconSpace = kind && iconSize ? iconSize.width + paddingX : 0;
+  const [badgeSize, badgeRef] = useSize([kind]);
+  const [labelSize, labelRef] = useSize([children, textSize, badgeSize]);
+  const iconSpace = kind && badgeSize ? badgeSize.width + paddingX : 0;
+  const labelSizeWidth = icon ? paddingX * 2 + iconSpace + iconSize / 2 : paddingX * 2 + iconSpace;
   const refs = useCombineRefs(dragRef, typeof truncate === 'number' ? labelHoverRef : undefined);
   return (
-    <g className={className} ref={refs}>
-      <SvgDropShadowFilter id={FILTER_ID} />
-      {textSize && (
-        <rect
-          filter={createSvgIdUrl(FILTER_ID)}
-          x={x - paddingX - textSize.width / 2 - iconSpace / 2}
-          width={textSize.width + paddingX * 2 + iconSpace}
-          y={y - paddingY - textSize.height / 2}
-          height={textSize.height + paddingY * 2}
-          rx={cornerRadius}
-          ry={cornerRadius}
-        />
-      )}
-      {textSize && kind && (
-        <SvgResourceIcon
-          ref={iconRef}
-          x={x - textSize.width / 2 - paddingX / 2}
+    <>
+      <g className={className} ref={refs}>
+        <SvgDropShadowFilter id={FILTER_ID} />
+        {textSize && (
+          <rect
+            ref={labelRef}
+            filter={createSvgIdUrl(FILTER_ID)}
+            x={x - paddingX - textSize.width / 2 - iconSpace / 2}
+            width={textSize.width + labelSizeWidth}
+            y={y - paddingY - textSize.height / 2}
+            height={textSize.height + paddingY * 2}
+            rx={cornerRadius}
+            ry={cornerRadius}
+          />
+        )}
+        {textSize && kind && (
+          <SvgResourceIcon
+            ref={badgeRef}
+            x={x - textSize.width / 2 - paddingX / 2}
+            y={y}
+            kind={kind}
+          />
+        )}
+
+        <text
+          {...other}
+          ref={textRef}
+          x={x + iconSpace / 2}
           y={y}
-          kind={kind}
-        />
+          textAnchor="middle"
+          dy="0.35em"
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+        >
+          {typeof truncate === 'number'
+            ? labelHover
+              ? children
+              : truncateEnd(children, truncate)
+            : children}
+        </text>
+      </g>
+      {icon && textSize && badgeSize && labelSize && (
+        <>
+          <SvgDropShadowFilter id={iconFilterID} />
+          <rect
+            x={x + labelSize.width / 2 + paddingX - iconSize / 2}
+            y={y}
+            width={iconSize}
+            height={iconSize}
+            fill="#fff"
+            filter={createSvgIdUrl(iconFilterID)}
+          />
+          <image
+            x={x + labelSize.width / 2 + paddingX - iconSize / 2 + iconPadding}
+            y={y + iconPadding}
+            width={30}
+            height={30}
+            xlinkHref={getImageForIconClass(`icon-${icon}`)}
+          />
+        </>
       )}
-      <text
-        {...other}
-        ref={textRef}
-        x={x + iconSpace / 2}
-        y={y}
-        textAnchor="middle"
-        dy="0.35em"
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-      >
-        {typeof truncate === 'number'
-          ? labelHover
-            ? children
-            : truncateEnd(children, truncate)
-          : children}
-      </text>
-    </g>
+    </>
   );
 };
 

diff --git a/...s/dev-console/src/components/topology/__tests__/__snapshots__/topology-utils.spec.ts.snap b/...s/dev-console/src/components/topology/__tests__/__snapshots__/topology-utils.spec.ts.snap
@@ -19,6 +19,7 @@ Object {
           "5ca9ae28-680d-11e9-8c69-5254003f9382",
           "60a9b423-680d-11e9-8c69-5254003f9382",
         ],
+        "type": "part-of",
       },
     ],
     "nodes": Array [

diff --git a/frontend/packages/dev-console/src/components/topology/__tests__/topology-test-data.ts b/frontend/packages/dev-console/src/components/topology/__tests__/topology-test-data.ts
@@ -1502,6 +1502,53 @@ export const dataModel: Model = {
   edges: [],
 };
 
+export const sampleHelmChartDeploymentConfig = {
+  kind: 'DeploymentConfig',
+  apiVersion: 'apps/v1',
+  metadata: {
+    name: 'nodejs-helm',
+    namespace: 'testproject1',
+    selfLink: '/apis/apps.openshift.io/v1/namespaces/testproject1/deploymentconfigs/nodejs',
+    uid: 'b69ey0df-3f9382-11e9-02f68-525400680f2',
+    resourceVersion: '732186',
+    generation: 2,
+    creationTimestamp: '2019-04-22T11:58:33Z',
+    labels: {
+      app: 'nodejs-helm',
+      heritage: 'Helm',
+      chart: 'Nodejs',
+      release: 'nodejs-helm-12345',
+    },
+    annotations: {
+      'app.openshift.io/vcs-uri': 'https://github.com/redhat-developer/topology-example',
+      'app.openshift.io/vcs-ref': 'master',
+    },
+  },
+  spec: {
+    strategy: {
+      type: 'Rolling',
+    },
+    template: {
+      metadata: {
+        creationTimestamp: null,
+        labels: {
+          app: 'nodejs-helm',
+          deploymentconfig: 'nodejs-helm',
+        },
+      },
+      spec: {},
+    },
+  },
+  status: {
+    availableReplicas: 1,
+    unavailableReplicas: 0,
+    latestVersion: 1,
+    updatedReplicas: 1,
+    replicas: 1,
+    readyReplicas: 1,
+  },
+};
+
 export const MockResources: TopologyDataResources = {
   deployments: sampleDeployments,
   deploymentConfigs: sampleDeploymentConfigs,

diff --git a/frontend/packages/dev-console/src/components/topology/__tests__/topology-utils.spec.ts b/frontend/packages/dev-console/src/components/topology/__tests__/topology-utils.spec.ts
@@ -13,14 +13,19 @@ import {
   topologyModelFromDataModel,
   getTopologyResourceObject,
   createTopologyResourceConnection,
+  isHelmReleaseNode,
+  getTopologyHelmReleaseGroupItem,
 } from '../topology-utils';
+import { TYPE_HELM_RELEASE } from '../const';
 import {
   resources,
   topologyData,
   MockResources,
   topologyDataModel,
   dataModel,
   sampleDeployments,
+  sampleHelmChartDeploymentConfig,
+  sampleDeploymentConfigs,
 } from './topology-test-data';
 import { MockKnativeResources } from './topology-knative-test-data';
 import { serviceBindingRequest } from './service-binding-test-data';
@@ -248,6 +253,35 @@ describe('TopologyUtils ', () => {
     ]);
     expect((topologyTransformedData[keys[0]].data as WorkloadData).editUrl).toBe(mockGitURL);
   });
+
+  it('should return true for nodes created by helm charts', () => {
+    expect(isHelmReleaseNode(sampleDeploymentConfigs.data[0])).toBe(false);
+    expect(isHelmReleaseNode(sampleHelmChartDeploymentConfig)).toBe(true);
+  });
+
+  it('should add to groups with helm grouping type for a helm chart node', () => {
+    let groups = getTopologyHelmReleaseGroupItem(sampleDeploymentConfigs.data[0], []);
+    expect(groups).toHaveLength(0);
+    groups = getTopologyHelmReleaseGroupItem(sampleHelmChartDeploymentConfig, []);
+    expect(groups).toHaveLength(1);
+    expect(groups[0].type).toEqual(TYPE_HELM_RELEASE);
+  });
+
+  it('should group into Application or Helm based on the checks on label', () => {
+    const dc = { ...sampleDeploymentConfigs.data[0] };
+    dc.metadata.labels = {
+      app: 'nodejs',
+      'app.kubernetes.io/part-of': 'app-1',
+    };
+    const fireHoseDcs = {
+      ...sampleDeploymentConfigs,
+      data: [dc, sampleHelmChartDeploymentConfig],
+    };
+    const data = { ...MockResources, deploymentConfigs: fireHoseDcs };
+    const { graphData } = getTranformedTopologyData(data, ['deploymentConfigs']);
+    expect(graphData.groups).toHaveLength(2);
+    expect(graphData.groups[1].type).toEqual(TYPE_HELM_RELEASE);
+  });
 });
 
 describe('Topology Utils', () => {

diff --git a/frontend/packages/dev-console/src/components/topology/componentFactory.ts b/frontend/packages/dev-console/src/components/topology/componentFactory.ts
@@ -40,12 +40,14 @@ import {
   TYPE_REVISION_TRAFFIC,
   TYPE_SERVICE_BINDING,
   TYPE_KNATIVE_REVISION,
+  TYPE_HELM_RELEASE,
 } from './const';
 import KnativeService from './components/nodes/KnativeService';
 import TrafficLink from './components/edges/TrafficLink';
 import ServiceBinding from './components/edges/ServiceBinding';
 import RevisionNode from './components/nodes/RevisionNode';
 import { withEditReviewAccess } from './withEditReviewAccess';
+import HelmRelease from './components/groups/HelmRelease';
 
 type NodeProps = {
   element: Node;
@@ -65,6 +67,8 @@ class ComponentFactory {
   getFactory = (): TopologyComponentFactory => {
     return (kind, type): ComponentType<{ element: GraphElement }> | undefined => {
       switch (type) {
+        case TYPE_HELM_RELEASE:
+          return withSelection(false, true)(HelmRelease);
         case TYPE_APPLICATION_GROUP:
           return withDndDrop(groupWorkoadDropTargetSpec)(
             withSelection(false, true)(

diff --git a/frontend/packages/dev-console/src/components/topology/components/groups/HelmRelease.scss b/frontend/packages/dev-console/src/components/topology/components/groups/HelmRelease.scss
@@ -0,0 +1,11 @@
+.odc-helm-release {
+  fill: #e2e2e2;
+  stroke: #bbbbbb;
+  stroke-width: 4px;
+  stroke-dasharray: 9;
+  cursor: pointer;
+
+  &__label {
+    cursor: pointer;
+  }
+}
diff --git a/frontend/packages/dev-console/src/components/topology/components/groups/HelmRelease.tsx b/frontend/packages/dev-console/src/components/topology/components/groups/HelmRelease.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import {
+  WithSelectionProps,
+  Layer,
+  useHover,
+  Node,
+  createSvgIdUrl,
+  useDragNode,
+  observer,
+  useCombineRefs,
+} from '@console/topology';
+import NodeShadows, { NODE_SHADOW_FILTER_ID_HOVER, NODE_SHADOW_FILTER_ID } from '../NodeShadows';
+import SvgBoxedText from '../../../svg/SvgBoxedText';
+import './HelmRelease.scss';
+
+export type HelmReleaseProps = {
+  element: Node;
+  dragging: boolean;
+} & WithSelectionProps;
+
+const HelmRelease: React.FC<HelmReleaseProps> = ({ element, dragging }) => {
+  const [hover, hoverRef] = useHover();
+  const { x, y, width, height } = element.getBounds();
+  const dragNodeRef = useDragNode()[1];
+  const dragLabelRef = useDragNode()[1];
+  const refs = useCombineRefs(dragNodeRef, hoverRef);
+  return (
+    <g>
+      <NodeShadows />
+      <Layer id={dragging ? undefined : 'groups'}>
+        <rect
+          ref={refs}
+          className="odc-helm-release"
+          x={x}
+          y={y}
+          width={width}
+          height={height}
+          rx="5"
+          ry="5"
+          filter={createSvgIdUrl(
+            hover || dragging ? NODE_SHADOW_FILTER_ID_HOVER : NODE_SHADOW_FILTER_ID,
+          )}
+        />
+      </Layer>
+      {element.getLabel() && (
+        <>
+          <SvgBoxedText
+            className="odc-helm-release__label odc-base-node__label"
+            x={x + width / 2}
+            y={y + height + 20}
+            paddingX={8}
+            paddingY={4}
+            kind="HelmRelease"
+            truncate={16}
+            dragRef={dragLabelRef}
+            icon="helm"
+          >
+            {element.getLabel()}
+          </SvgBoxedText>
+        </>
+      )}
+    </g>
+  );
+};
+
+export default observer(HelmRelease);
diff --git a/frontend/packages/dev-console/src/components/topology/const.ts b/frontend/packages/dev-console/src/components/topology/const.ts
@@ -7,3 +7,4 @@ export const TYPE_APPLICATION_GROUP = 'part-of';
 export const TYPE_KNATIVE_SERVICE = 'knative-service';
 export const TYPE_REVISION_TRAFFIC = 'revision-traffic';
 export const TYPE_KNATIVE_REVISION = 'knative-revision';
+export const TYPE_HELM_RELEASE = 'helm-release';