Topology: Expand/Collapse of Helm Releases

openshift · Jan 23, 2020 · 6ddecb5 · 6ddecb5
1 parent caee2f6
commit 6ddecb5
Show file tree

Hide file tree

Showing 9 changed files with 190 additions and 61 deletions.
diff --git a/...nd/packages/dev-console/src/components/topology/__tests__/TopologyDataController.spec.tsx b/...nd/packages/dev-console/src/components/topology/__tests__/TopologyDataController.spec.tsx
@@ -29,6 +29,7 @@ describe('TopologyDataController', () => {
             knativeServices: true,
             appGrouping: true,
             operatorGrouping: true,
+            helmGrouping: true,
           },
           searchQuery: null,
         }}

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
@@ -1,73 +1,28 @@
 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 { Node, observer } 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';
+import HelmReleaseNode from './HelmReleaseNode';
+import HelmReleaseGroup from './HelmReleaseGroup';
 
 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}
-          typeIconClass="icon-helm"
-        >
-          {element.getLabel()}
-        </SvgBoxedText>
-      )}
-    </g>
-  );
+const HelmRelease: React.FC<HelmReleaseProps> = (props) => {
+  if (
+    props.element.isCollapsed() ||
+    !props.element.getData().groupResources ||
+    !props.element.getData().groupResources.length
+  ) {
+    return <HelmReleaseNode {...props} />;
+  }
+
+  return <HelmReleaseGroup {...props} />;
 };
 
 const HelmReleaseState = (state: RootState) => ({

diff --git a/frontend/packages/dev-console/src/components/topology/components/groups/HelmReleaseGroup.tsx b/frontend/packages/dev-console/src/components/topology/components/groups/HelmReleaseGroup.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import * as classNames from 'classnames';
+import {
+  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 { TopologyFilters } from '../../filters/filter-utils';
+import useFilter from '../../filters/useFilter';
+
+export type HelmReleaseGroupProps = {
+  element: Node;
+  dragging?: boolean;
+  filters: TopologyFilters;
+};
+
+const HelmReleaseGroup: React.FC<HelmReleaseGroupProps> = ({ 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}
+          typeIconClass="icon-helm"
+        >
+          {element.getLabel()}
+        </SvgBoxedText>
+      )}
+    </g>
+  );
+};
+
+export default observer(HelmReleaseGroup);
diff --git a/frontend/packages/dev-console/src/components/topology/components/groups/HelmReleaseNode.tsx b/frontend/packages/dev-console/src/components/topology/components/groups/HelmReleaseNode.tsx
@@ -0,0 +1,94 @@
+import * as React from 'react';
+import * as classNames from 'classnames';
+import {
+  useAnchor,
+  RectAnchor,
+  useHover,
+  useSize,
+  Node,
+  createSvgIdUrl,
+  useDragNode,
+  observer,
+  useCombineRefs,
+} from '@console/topology';
+import NodeShadows, { NODE_SHADOW_FILTER_ID_HOVER, NODE_SHADOW_FILTER_ID } from '../NodeShadows';
+import { TopologyFilters } from '../../filters/filter-utils';
+import useFilter from '../../filters/useFilter';
+import SvgResourceIcon from '../nodes/ResourceIcon';
+import ResourceKindsInfo from '../nodes/ResourceKindsInfo';
+
+export type HelmReleaseNodeProps = {
+  element: Node;
+  dragging?: boolean;
+  filters: TopologyFilters;
+};
+
+const TOP_MARGIN = 20;
+const LEFT_MARGIN = 20;
+const TEXT_MARGIN = 10;
+const RESOURCES_MARGIN = 40;
+
+const HelmReleaseNode: React.FC<HelmReleaseNodeProps> = ({ element, dragging, filters }) => {
+  useAnchor((e: Node) => new RectAnchor(e, 4));
+  const [hover, hoverRef] = useHover();
+  const [labelHover, labelHoverRef] = useHover();
+  const dragNodeRef = useDragNode()[1];
+  const refs = useCombineRefs<SVGRectElement>(dragNodeRef, hoverRef);
+  const filtered = useFilter(filters, { metadata: { name: element.getLabel() } });
+  const kind = 'HelmRelease';
+  const [iconSize, iconRef] = useSize([kind]);
+  const iconWidth = iconSize ? iconSize.width : 0;
+  const iconHeight = iconSize ? iconSize.height : 0;
+
+  const rectClasses = classNames('odc-helm-release', {
+    'is-hover': hover || labelHover,
+    'is-filtered': filtered,
+  });
+
+  const { width, height } = element.getBounds();
+
+  const title = (
+    <g ref={labelHoverRef} className="odc-application-group__node-title">
+      <SvgResourceIcon ref={iconRef} x={TOP_MARGIN} y={LEFT_MARGIN} kind={kind} leftJustified />
+      <text
+        x={LEFT_MARGIN + iconWidth + TEXT_MARGIN}
+        y={TOP_MARGIN + iconHeight}
+        textAnchor="start"
+        dy="-0.25em"
+      >
+        {element.getLabel()}
+      </text>
+    </g>
+  );
+
+  return (
+    <>
+      <NodeShadows />
+      <g ref={hoverRef}>
+        <rect
+          ref={refs}
+          filter={createSvgIdUrl(
+            hover || labelHover || dragging ? NODE_SHADOW_FILTER_ID_HOVER : NODE_SHADOW_FILTER_ID,
+          )}
+          className={rectClasses}
+          x={0}
+          y={0}
+          width={width}
+          height={height}
+          rx="5"
+          ry="5"
+        />
+      </g>
+      <g>
+        {title}
+        <ResourceKindsInfo
+          groupResources={element.getData().groupResources}
+          offsetX={LEFT_MARGIN + iconWidth}
+          offsetY={TOP_MARGIN + iconHeight + RESOURCES_MARGIN}
+        />
+      </g>
+    </>
+  );
+};
+
+export default observer(HelmReleaseNode);
diff --git a/...nd/packages/dev-console/src/components/topology/filters/__tests__/FilterDropdown.spec.tsx b/...nd/packages/dev-console/src/components/topology/filters/__tests__/FilterDropdown.spec.tsx
@@ -10,6 +10,7 @@ const VALID_FILTERS = {
   knativeServices: true,
   appGrouping: true,
   operatorGrouping: true,
+  helmGrouping: true,
 };
 
 describe(FilterDropdown.displayName, () => {
@@ -25,7 +26,7 @@ describe(FilterDropdown.displayName, () => {
     expect(wrapper.exists()).toBeTruthy();
   });
 
-  it('should have 5 filters in total', () => {
+  it('should have 6 filters in total', () => {
     const wrapper = shallow(<FilterDropdown filters={dropdownFilter} onChange={onChange} />);
     expect(wrapper.find(SelectOption)).toHaveLength(Object.keys(VALID_FILTERS).length);
   });

diff --git a/frontend/packages/dev-console/src/components/topology/filters/__tests__/useFilter.spec.tsx b/frontend/packages/dev-console/src/components/topology/filters/__tests__/useFilter.spec.tsx
@@ -16,6 +16,7 @@ describe('useFilter', () => {
         knativeServices: true,
         appGrouping: true,
         operatorGrouping: true,
+        helmGrouping: true,
       },
       searchQuery: '',
     };

diff --git a/frontend/packages/dev-console/src/components/topology/filters/filter-utils.ts b/frontend/packages/dev-console/src/components/topology/filters/filter-utils.ts
@@ -6,8 +6,9 @@ export enum ShowFiltersKeyValue {
 }
 
 export enum ExpandFiltersKeyValue {
-  knativeServices = 'Knative Services',
   appGrouping = 'Application Groupings',
+  helmGrouping = 'Helm Releases',
+  knativeServices = 'Knative Services',
   operatorGrouping = 'Operator Groupings',
 }
 
@@ -30,4 +31,5 @@ export type DisplayFilters = {
   knativeServices: boolean;
   appGrouping: boolean;
   operatorGrouping: boolean;
+  helmGrouping: boolean;
 };
diff --git a/frontend/packages/dev-console/src/components/topology/redux/const.ts b/frontend/packages/dev-console/src/components/topology/redux/const.ts
@@ -6,6 +6,7 @@ export const DEFAULT_TOPOLOGY_FILTERS = {
     knativeServices: true,
     appGrouping: true,
     operatorGrouping: true,
+    helmGrouping: true,
   },
   searchQuery: '',
 };
diff --git a/frontend/packages/dev-console/src/components/topology/topology-utils.ts b/frontend/packages/dev-console/src/components/topology/topology-utils.ts
@@ -517,6 +517,7 @@ export const topologyModelFromDataModel = (
         type: d.type,
         label: dataModel.topology[d.id].name,
         data,
+        collapsed: filters && !filters.display.knativeServices,
         children: (d as any).children,
         group: true,
         shape: NodeShape.rect,
@@ -544,7 +545,10 @@ export const topologyModelFromDataModel = (
       id: d.id,
       group: true,
       type: d.type,
-      collapsed: filters && d.type === TYPE_APPLICATION_GROUP && !filters.display.appGrouping,
+      collapsed:
+        filters &&
+        ((d.type === TYPE_HELM_RELEASE && !filters.display.helmGrouping) ||
+          (d.type === TYPE_APPLICATION_GROUP && !filters.display.appGrouping)),
       data,
       children: d.nodes,
       label: d.name,