Add the component and utility for helm release group

initial implementation initial implementation remove styles for selected and fine tune
openshift · Jan 9, 2020 · b3213b0 · b3213b0
1 parent 91fb810
commit b3213b0
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 6 deletions.
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,63 @@
+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}
+        >
+          {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';
diff --git a/frontend/packages/dev-console/src/components/topology/topology-utils.ts b/frontend/packages/dev-console/src/components/topology/topology-utils.ts
@@ -34,7 +34,7 @@ import {
   Group,
   TopologyOverviewItem,
 } from './topology-types';
-import { TYPE_APPLICATION_GROUP, TYPE_KNATIVE_SERVICE } from './const';
+import { TYPE_APPLICATION_GROUP, TYPE_KNATIVE_SERVICE, TYPE_HELM_RELEASE } from './const';
 
 export const allowedResources = ['deployments', 'deploymentConfigs', 'daemonSets', 'statefulSets'];
 
@@ -261,6 +261,32 @@ export const getTopologyEdgeItems = (
   return edges;
 };
 
+export const isHelmReleaseNode = (obj: K8sResourceKind): boolean => {
+  return (
+    _.get(obj, ['metadata', 'labels', 'heritage'], null) === 'Helm' ||
+    !!_.get(obj, ['metadata', 'labels', 'chart'], false)
+  );
+};
+
+export const getTopologyHelmReleaseGroupItem = (obj: K8sResourceKind, groups: Group[]): Group[] => {
+  const releaseLabel = _.get(obj, ['metadata', 'labels', 'release'], null);
+  const uid = _.get(obj, ['metadata', 'uid'], null);
+  if (!releaseLabel) return groups;
+  const releaseExists = _.some(groups, { name: releaseLabel });
+  if (!releaseExists) {
+    groups.push({
+      id: `group:${releaseLabel}`,
+      type: TYPE_HELM_RELEASE,
+      name: releaseLabel,
+      nodes: [uid],
+    });
+  } else {
+    const gIndex = _.findIndex(groups, { name: releaseLabel });
+    groups[gIndex].nodes.push(uid);
+  }
+  return groups;
+};
+
 /**
  * create groups data for graph
  * @param dc
@@ -280,6 +306,7 @@ export const getTopologyGroupItems = (dc: K8sResourceKind, groups: Group[]): Gro
     if (!groupExists) {
       groups.push({
         id: `group:${label}`,
+        type: TYPE_APPLICATION_GROUP,
         name: label,
         nodes: [uid],
       });
@@ -419,9 +446,18 @@ export const transformTopologyData = (
               application,
             ),
           ];
-          groupsData = [
-            ...getTopologyGroupItems(deploymentConfig, topologyGraphAndNodeData.graph.groups),
-          ];
+          if (isHelmReleaseNode(deploymentConfig)) {
+            groupsData = [
+              ...getTopologyHelmReleaseGroupItem(
+                deploymentConfig,
+                topologyGraphAndNodeData.graph.groups,
+              ),
+            ];
+          } else {
+            groupsData = [
+              ...getTopologyGroupItems(deploymentConfig, topologyGraphAndNodeData.graph.groups),
+            ];
+          }
         }
       });
       const {
@@ -473,7 +509,7 @@ export const topologyModelFromDataModel = (dataModel: TopologyDataModel): Model
     return {
       id: d.id,
       group: true,
-      type: TYPE_APPLICATION_GROUP,
+      type: d.type,
       data: dataModel.topology[d.id],
       children: d.nodes,
       label: d.name,

diff --git a/frontend/packages/knative-plugin/src/utils/knative-topology-utils.ts b/frontend/packages/knative-plugin/src/utils/knative-topology-utils.ts
@@ -28,6 +28,8 @@ import {
   getTopologyNodeItem,
   getTopologyEdgeItems,
   filterBasedOnActiveApplication,
+  getTopologyHelmReleaseGroupItem,
+  isHelmReleaseNode,
 } from '@console/dev-console/src/components/topology/topology-utils';
 import { TopologyFilters } from '@console/dev-console/src/components/topology/filters/filter-utils';
 import { DeploymentModel } from '@console/internal/models';
@@ -386,7 +388,13 @@ export const tranformKnNodeData = (
           );
           nodesData = [...nodesData, ...getKnativeTopologyNodeItems(res, type, resources)];
           edgesData = [...edgesData, ...getTrafficTopologyEdgeItems(res, resources.revisions)];
-          groupsData = [...getTopologyGroupItems(res, topologyGraphAndNodeData.graph.groups)];
+          if (isHelmReleaseNode(res)) {
+            groupsData = [
+              ...getTopologyHelmReleaseGroupItem(res, topologyGraphAndNodeData.graph.groups),
+            ];
+          } else {
+            groupsData = [...getTopologyGroupItems(res, topologyGraphAndNodeData.graph.groups)];
+          }
           break;
         }
         default: