Add topology sidebar to Operator Backed Service

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

@@ -81,6 +81,7 @@ import { updateModelFromFilters } from './data-transforms';
 import { setSupportedTopologyFilters, setTopologyFilters } from './redux/action';
 import { odcElementFactory } from './elements';
 import KnativeTopologyEdgePanel from '@console/knative-plugin/src/components/overview/KnativeTopologyEdgePanel';
+import TopologyOperatorBackedPanel from './operators/TopologyOperatorBackedPanel';
 
 export const FILTER_ACTIVE_CLASS = 'odc-m-filter-active';
 
@@ -444,7 +445,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,58 @@
+import * as React from 'react';
+import {
+  ResourceIcon,
+  ResourceLink,
+  SimpleTabNav,
+  ResourceSummary,
+  SectionHeading,
+} from '@console/internal/components/utils';
+import { referenceFor } from '@console/internal/module/k8s';
+import TopologyOperatorBackedResources from './TopologyOperatorBackedResources';
+import { TopologyDataObject } from '../topology-types';
+
+export type TopologyOperatorBackedPanelProps = {
+  item: TopologyDataObject<string>;
+};
+
+const TopologyOperatorBackedPanel: React.FC<TopologyOperatorBackedPanelProps> = ({ item }) => {
+  const {
+    name,
+    resources: { obj },
+  } = item;
+
+  const ResourcesSection = () => <TopologyOperatorBackedResources item={item} />;
+  const DetailsSection = () => (
+    <div className="co-m-pane__body">
+      <SectionHeading text="Operator Details" />
+      <ResourceSummary resource={obj} />
+    </div>
+  );
+
+  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={obj.metadata.namespace}
+              hideIcon
+            />
+          </div>
+        </h1>
+      </div>
+      <SimpleTabNav
+        tabs={[
+          { name: 'Details', component: DetailsSection },
+          { 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,35 @@
+import * as React from 'react';
+import OperatorBackedOwnerReferences from '@console/internal/components/utils';
+import { TopologyDataObject } from '../topology-types';
+import TopologyHelmReleaseResourcesPanel from '../helm/TopologyHelmReleaseResourcesPanel';
+import { OverviewItem } from '@console/shared';
+
+type TopologyOperatorBackedResourcesProps = {
+  item: TopologyDataObject;
+};
+
+const TopologyOperatorBackedResources: React.FC<TopologyOperatorBackedResourcesProps> = ({
+  item,
+}) => {
+  const { groupResources = [] } = item;
+  const finalRes = groupResources.map((val) => val.resources.obj);
+  const ownerReferencedResources = groupResources.reduce(
+    (acc, val) => {
+      acc.obj = { ...val.resources.obj, ...acc.obj };
+      return acc;
+    },
+    { obj: {}, isOperatorBackedService: true },
+  );
+
+  return (
+    <div className="overview__sidebar-pane-body">
+      <OperatorBackedOwnerReferences item={ownerReferencedResources as OverviewItem} />
+      <TopologyHelmReleaseResourcesPanel
+        manifestResources={finalRes}
+        releaseNamespace={item.resources.obj.metadata.namespace}
+      />
+    </div>
+  );
+};
+
+export default TopologyOperatorBackedResources;