Add the component and utility for helm release grouping

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,21 +55,25 @@ 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
+          ref={labelRef}
           filter={createSvgIdUrl(FILTER_ID)}
           x={x - paddingX - textSize.width / 2 - iconSpace / 2}
-          width={textSize.width + paddingX * 2 + iconSpace}
+          width={textSize.width + labelSizeWidth}
           y={y - paddingY - textSize.height / 2}
           height={textSize.height + paddingY * 2}
           rx={cornerRadius}
@@ -73,12 +82,13 @@ const SvgBoxedText: React.FC<SvgBoxedTextProps> = ({
       )}
       {textSize && kind && (
         <SvgResourceIcon
-          ref={iconRef}
+          ref={badgeRef}
           x={x - textSize.width / 2 - paddingX / 2}
           y={y}
           kind={kind}
         />
       )}
+
       <text
         {...other}
         ref={textRef}
@@ -95,6 +105,28 @@ const SvgBoxedText: React.FC<SvgBoxedTextProps> = ({
             : truncateEnd(children, truncate)
           : children}
       </text>
+      {icon && textSize && badgeSize && labelSize && (
+        <>
+          <SvgDropShadowFilter id={iconFilterID} />
+          <rect
+            x={x + labelSize.width / 2 + paddingX - iconSize / 2}
+            y={y}
+            width={iconSize}
+            height={iconSize}
+            fill="#fff"
+            rx={cornerRadius}
+            ry={cornerRadius}
+            filter={createSvgIdUrl(iconFilterID)}
+          />
+          <image
+            x={x + labelSize.width / 2 + paddingX - iconSize / 2 + iconPadding}
+            y={y + iconPadding}
+            width={30}
+            height={30}
+            xlinkHref={getImageForIconClass(`icon-${icon}`)}
+          />
+        </>
+      )}
     </g>
   );
 };

frontend/packages/dev-console/src/components/topology/__tests__/__snapshots__/topology-utils.spec.ts.snap

@@ -19,13 +19,15 @@ Object {
           "5ca9ae28-680d-11e9-8c69-5254003f9382",
           "60a9b423-680d-11e9-8c69-5254003f9382",
         ],
+        "type": "part-of",
       },
       Object {
         "id": "group:jaeger",
         "name": "jaeger",
         "nodes": Array [
           "c73277f2-e85c-477c-a43d-330a5d0b2cf6",
         ],
+        "type": "part-of",
       },
     ],
     "nodes": Array [

frontend/packages/dev-console/src/components/topology/__tests__/topology-test-data.ts

@@ -2110,6 +2110,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,

frontend/packages/dev-console/src/components/topology/__tests__/topology-utils.spec.ts

@@ -14,16 +14,21 @@ import {
   topologyModelFromDataModel,
   getTopologyResourceObject,
   createTopologyResourceConnection,
+  isHelmReleaseNode,
+  getTopologyHelmReleaseGroupItem,
 } from '../topology-utils';
 import { DEFAULT_TOPOLOGY_FILTERS } from '../redux/const';
 import { TopologyFilters } from '../filters/filter-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';
@@ -299,6 +304,34 @@ describe('TopologyUtils ', () => {
       'event-source',
     );
   });
+  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', () => {

frontend/packages/dev-console/src/components/topology/componentFactory.ts

@@ -48,13 +48,16 @@ import {
   TYPE_REVISION_TRAFFIC,
   TYPE_SERVICE_BINDING,
   TYPE_KNATIVE_REVISION,
+  TYPE_HELM_RELEASE,
+  TYPE_HELM_WORKLOAD,
 } 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 { createConnection, createSinkConnection } from './components/createConnection';
 import { withEditReviewAccess } from './withEditReviewAccess';
+import HelmRelease from './components/groups/HelmRelease';
 
 type NodeProps = {
   element: Node;
@@ -74,6 +77,32 @@ class ComponentFactory {
   getFactory = (): TopologyComponentFactory => {
     return (kind, type): ComponentType<{ element: GraphElement }> | undefined => {
       switch (type) {
+        case TYPE_HELM_RELEASE:
+          return HelmRelease;
+        case TYPE_HELM_WORKLOAD:
+          return withCreateConnector(createConnectorCallback(this.hasServiceBinding))(
+            withDndDrop<
+              any,
+              any,
+              { droppable?: boolean; hover?: boolean; canDrop?: boolean },
+              NodeProps
+            >(nodeDropTargetSpec)(
+              withEditReviewAccess('patch')(
+                withDragNode(nodeDragSourceSpec(type, false))(
+                  withSelection(
+                    false,
+                    true,
+                  )(
+                    withContextMenu(
+                      workloadContextMenu,
+                      document.getElementById('modal-container'),
+                      'odc-topology-context-menu',
+                    )(WorkloadNode),
+                  ),
+                ),
+              ),
+            ),
+          );
         case TYPE_APPLICATION_GROUP:
           return withDndDrop(groupWorkloadDropTargetSpec)(
             withSelection(

frontend/packages/dev-console/src/components/topology/components/groups/HelmRelease.scss

@@ -0,0 +1,33 @@
+.odc-helm-release {
+  fill: #e2e2e2;
+  stroke: #bbbbbb;
+  stroke-width: 4px;
+  stroke-dasharray: 9;
+  cursor: pointer;
+
+  &__label {
+    cursor: pointer;
+  }
+}
+
+.odc-m-filter-active {
+  .odc-helm-release {
+    &__label {
+      opacity: 0.3;
+      &.is-filtered {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.odc-m-drag-active {
+  .odc-helm-release {
+    &__label {
+      opacity: 0.3;
+      &.is-dragging {
+        opacity: 1;
+      }
+    }
+  }
+}

frontend/packages/dev-console/src/components/topology/components/groups/HelmRelease.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import * as classNames from 'classnames';
+import { connect } from 'react-redux';
+import {
+  Layer,
+  useHover,
+  Node,
+  createSvgIdUrl,
+  useDragNode,
+  observer,
+  useCombineRefs,
+} from '@console/topology';
+import { RootState } from '@console/internal/redux';
+import NodeShadows, { NODE_SHADOW_FILTER_ID_HOVER, NODE_SHADOW_FILTER_ID } from '../NodeShadows';
+import SvgBoxedText from '../../../svg/SvgBoxedText';
+import './HelmRelease.scss';
+import { getTopologyFilters, TopologyFilters } from '../../filters/filter-utils';
+import useFilter from '../../filters/useFilter';
+
+export type HelmReleaseProps = {
+  element: Node;
+  dragging?: boolean;
+  filters: TopologyFilters;
+};
+
+const HelmRelease: React.FC<HelmReleaseProps> = ({ element, dragging, filters }) => {
+  const [hover, hoverRef] = useHover();
+  const { x, y, width, height } = element.getBounds();
+  const dragNodeRef = useDragNode()[1];
+  const dragLabelRef = useDragNode()[1];
+  const refs = useCombineRefs(dragNodeRef, hoverRef);
+  const filtered = useFilter(filters, { metadata: { name: element.getLabel() } });
+  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={classNames('odc-base-node__label', 'odc-helm-release__label', {
+            'is-filtered': filtered,
+            'is-dragging': dragging,
+          })}
+          x={x + width / 2}
+          y={y + height + 20}
+          paddingX={8}
+          paddingY={4}
+          kind="HelmRelease"
+          truncate={16}
+          dragRef={dragLabelRef}
+          icon="helm"
+        >
+          {element.getLabel()}
+        </SvgBoxedText>
+      )}
+    </g>
+  );
+};
+
+const HelmReleaseState = (state: RootState) => ({
+  filters: getTopologyFilters(state),
+});
+
+export default connect(HelmReleaseState)(observer(HelmRelease));

frontend/packages/dev-console/src/components/topology/const.ts

@@ -7,3 +7,5 @@ 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';
+export const TYPE_HELM_WORKLOAD = 'helm-workload';