Add topology sidebar to Operator Backed Service

frontend/packages/dev-console/src/components/topology/Topology.tsx

@@ -75,6 +75,7 @@ import { TYPE_OPERATOR_BACKED_SERVICE } from './operators/components/const';
 import TopologyHelmWorkloadPanel from './helm/TopologyHelmWorkloadPanel';
 import { updateModelFromFilters } from './data-transforms';
 import { setSupportedTopologyFilters, setTopologyFilters } from './redux/action';
+import TopologyOperatorBackedPanel from './operators/TopologyOperatorBackedPanel';
 
 export const FILTER_ACTIVE_CLASS = 'odc-m-filter-active';
 
@@ -437,7 +438,11 @@ const Topology: React.FC<ComponentProps> = ({
         return <TopologyHelmWorkloadPanel item={selectedEntity.getData() as TopologyDataObject} />;
       }
       if (selectedEntity.getType() === TYPE_OPERATOR_BACKED_SERVICE) {
-        return null;
+        return (
+          <TopologyOperatorBackedPanel
+            item={selectedEntity.getData() as TopologyDataObject<string>}
+          />
+        );
       }
       if (selectedEntity.getType() === TYPE_VIRTUAL_MACHINE) {
         return <TopologyVmPanel vmNode={selectedEntity} />;

frontend/packages/dev-console/src/components/topology/operators/TopologyOperatorBackedPanel.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { getActiveNamespace } from '@console/internal/actions/ui';
+import { ResourceIcon, ResourceLink, SimpleTabNav } from '@console/internal/components/utils';
+import { referenceFor } from '@console/internal/module/k8s';
+import TopologyOperatorBackedResources from './TopologyOperatorBackedResources';
+import { TopologyDataObject } from '../topology-types';
+
+export type TopologyResourcePanelProps = {
+  item: TopologyDataObject<string>;
+};
+
+const TopologyOperatorBackedPanel: React.FC<TopologyResourcePanelProps> = ({ item }) => {
+  const {
+    name,
+    resources: { obj },
+  } = item;
+
+  const ResourcesSection = () => <TopologyOperatorBackedResources item={item} />;
+
+  return (
+    <div className="overview__sidebar-pane resource-overview">
+      <div className="overview__sidebar-pane-head resource-overview__heading">
+        <h1 className="co-m-pane__heading">
+          <div className="co-m-pane__name co-resource-item">
+            <ResourceIcon kind="Operator" />
+            <ResourceLink
+              kind={referenceFor(obj)}
+              name={name}
+              namespace={getActiveNamespace()}
+              hideIcon
+            />
+          </div>
+        </h1>
+      </div>
+      <SimpleTabNav
+        selectedTab="Resources"
+        tabs={[{ name: 'Resources', component: ResourcesSection }]}
+        tabProps={null}
+        additionalClassNames="co-m-horizontal-nav__menu--within-sidebar co-m-horizontal-nav__menu--within-overview-sidebar"
+      />
+    </div>
+  );
+};
+
+export default TopologyOperatorBackedPanel;

frontend/packages/dev-console/src/components/topology/operators/TopologyOperatorBackedResources.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import OperatorBackedOwnerReferences from '@console/internal/components/utils';
+import { OverviewItem } from '@console/shared';
+import { PodsOverview } from '@console/internal/components/overview/pods-overview';
+import { BuildOverview } from '@console/internal/components/overview/build-overview';
+import { NetworkingOverview } from '@console/internal/components/overview/networking-overview';
+import { TopologyDataObject } from '../topology-types';
+
+type TopologyOperatorBackedResourcesProps = {
+  item: TopologyDataObject;
+};
+
+const TopologyOperatorBackedResources: React.FC<TopologyOperatorBackedResourcesProps> = ({
+  item,
+}) => {
+  const combinedResources = item.groupResources.reduce<OverviewItem>(
+    (acc, val) => {
+      _.keys(acc).forEach((key) => {
+        Array.isArray(acc[key])
+          ? (acc[key] = [...acc[key], ...val.resources[key]])
+          : (acc[key] = { ...acc[key], ...val.resources[key] });
+      });
+      return acc;
+    },
+    { buildConfigs: [], pods: [], obj: {}, routes: [], services: [] },
+  );
+  const { buildConfigs, pods, obj, routes, services } = combinedResources;
+  combinedResources.isOperatorBackedService = true;
+
+  return (
+    <div className="overview__sidebar-pane-body">
+      <OperatorBackedOwnerReferences item={combinedResources} />
+      <PodsOverview pods={pods} obj={obj} />
+      <BuildOverview buildConfigs={buildConfigs} />
+      <NetworkingOverview services={services} routes={routes} />
+    </div>
+  );
+};
+
+export default TopologyOperatorBackedResources;