add broker details page

frontend/packages/knative-plugin/src/components/eventing/BrokerDetailsPage.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { DetailsPage } from '@console/internal/components/factory';
+import { navFactory, SectionHeading, ResourceSummary } from '@console/internal/components/utils';
+import { Conditions } from '@console/internal/components/conditions';
+import { K8sKind, K8sResourceKind } from '@console/internal/module/k8s';
+import { getRevisionActions } from '../../actions/getRevisionActions';
+import BrokerTriggers from './BrokerTriggers';
+
+const BrokerDetailsPage: React.FC<React.ComponentProps<typeof DetailsPage>> = (props) => {
+  const detailsSection = ({ obj }) => (
+    <>
+      <div className="co-m-pane__body">
+        <SectionHeading text={'Broker Details'} />
+        <div className="row">
+          <div className="col-sm-6">
+            <ResourceSummary
+              resource={obj}
+              podSelector="spec.podSelector"
+              showNodeSelector={false}
+            />
+          </div>
+          <div className="col-sm-6">
+            <dl>
+              <dt>Triggers</dt>
+              <dd>
+                <BrokerTriggers broker={obj} />
+              </dd>
+            </dl>
+          </div>
+        </div>
+      </div>
+      <div className="co-m-pane__body">
+        <SectionHeading text="Conditions" />
+        <Conditions conditions={obj.status.conditions} />
+      </div>
+    </>
+  );
+  const pages = [navFactory.details(detailsSection), navFactory.editYaml()];
+  const menuActionsCreator = (kindObj: K8sKind, obj: K8sResourceKind) =>
+    getRevisionActions().map((action) => action(kindObj, obj));
+
+  return <DetailsPage {...props} pages={pages} menuActions={menuActionsCreator} />;
+};
+
+export default BrokerDetailsPage;

frontend/packages/knative-plugin/src/plugin.tsx

@@ -385,6 +385,18 @@ const plugin: Plugin<ConsumedExtensions> = [
       icon: channelIcon,
     },
   },
+  {
+    type: 'Page/Resource/Details',
+    properties: {
+      model: models.EventingBrokerModel,
+      loader: async () =>
+        (
+          await import(
+            './components/eventing/BrokerDetailsPage' /* webpackChunkName: "knative-broker-details page" */
+          )
+        ).default,
+    },
+  },
   ...topologyPlugin,
 ];