add broker details page

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { DetailsPage, ListPage } from '@console/internal/components/factory';
+import { navFactory, Kebab, Page } from '@console/internal/components/utils';
+
+import { DetailsForKind } from '@console/internal/components/default-resource';
+import { EventingBrokerModel, EventingTriggerModel } from '../../models';
+import TriggerList from './triggers-list/TriggerList';
+import { referenceForModel } from '@console/internal/module/k8s';
+// import BrokerTriggers from './BrokerTriggers';
+
+const BrokerDetailsPage: React.FC<React.ComponentProps<typeof DetailsPage>> = (props) => {
+  const pages: Page[] = [
+    navFactory.details(DetailsForKind(props.kind)),
+    navFactory.editYaml(),
+    {
+      href: 'triggers',
+      name: 'Triggers',
+      component: ListPage,
+      pageData: {
+        canCreate: false,
+        showTitle: false,
+        kind: referenceForModel(EventingTriggerModel),
+        ListComponent: TriggerList,
+      },
+    },
+  ];
+
+  const customData = {
+    broker: props.name,
+  };
+
+  const commonActions = Kebab.factory.common.map((action) => action);
+  const menuActionsCreator = [
+    ...Kebab.getExtensionsActionsForKind(EventingBrokerModel),
+    ...commonActions,
+  ];
+
+  return (
+    <DetailsPage
+      {...props}
+      pages={pages}
+      menuActions={menuActionsCreator}
+      customData={customData}
+    />
+  );
+};
+
+export default BrokerDetailsPage;

frontend/packages/knative-plugin/src/components/eventing/triggers-list/TriggerHeaders.tsx

@@ -0,0 +1,49 @@
+import { sortable } from '@patternfly/react-table';
+import { tableColumnClasses } from './trigger-table';
+
+const TriggerHeaders = () => {
+  return [
+    {
+      id: 'name',
+      title: 'Name',
+      sortField: 'metadata.name',
+      transforms: [sortable],
+      props: { className: tableColumnClasses[0] },
+    },
+    {
+      id: 'namespace',
+      title: 'Namespace',
+      sortField: 'metadata.namespace',
+      transforms: [sortable],
+      props: { className: tableColumnClasses[1] },
+    },
+    {
+      id: 'ready',
+      title: 'Ready',
+      props: { className: tableColumnClasses[2] },
+    },
+    {
+      id: 'condition',
+      title: 'Condition',
+      props: { className: tableColumnClasses[3] },
+    },
+    {
+      id: 'filters',
+      title: 'Filters',
+      props: { className: tableColumnClasses[4] },
+    },
+    {
+      id: 'subscriber',
+      title: 'Subscriber',
+      props: { className: tableColumnClasses[5] },
+    },
+    {
+      title: 'Created',
+      sortField: 'metadata.creationTimestamp',
+      transforms: [sortable],
+      props: { className: tableColumnClasses[6] },
+    },
+  ];
+};
+
+export default TriggerHeaders;

frontend/packages/knative-plugin/src/components/eventing/triggers-list/TriggerList.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Table, TableProps } from '@console/internal/components/factory';
+import TriggerHeaders from './TriggerHeaders';
+import TriggerRow from './TriggerRow';
+
+const TriggerList: React.FC<TableProps> = (props) => (
+  <Table {...props} aria-label="Triggers" Header={TriggerHeaders} Row={TriggerRow} virtualize />
+);
+
+export default TriggerList;

frontend/packages/knative-plugin/src/components/eventing/triggers-list/TriggerListPage.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ListPage } from '@console/internal/components/factory';
+import { referenceForModel } from '@console/internal/module/k8s';
+import { EventingTriggerModel } from '../../../models';
+import TriggerList from './TriggerList';
+
+const TriggerListPage: React.FC<React.ComponentProps<typeof ListPage>> = (props) => (
+  <ListPage
+    canCreate={false}
+    {...props}
+    kind={referenceForModel(EventingTriggerModel)}
+    ListComponent={TriggerList}
+  />
+);
+
+export default TriggerListPage;

frontend/packages/knative-plugin/src/components/eventing/triggers-list/TriggerRow.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { TableRow, TableData, RowFunction } from '@console/internal/components/factory';
+import { Kebab, ResourceKebab, ResourceLink, Timestamp } from '@console/internal/components/utils';
+import { referenceFor } from '@console/internal/module/k8s';
+import { EventingTriggerModel } from '../../../models';
+import { getConditionString, getCondition } from '../../../utils/condition-utils';
+import { EventTriggerKind, TriggerConditionTypes } from '../../../types';
+import { tableColumnClasses } from './trigger-table';
+
+type TriggerRowType = {
+  broker?: string;
+};
+const TriggerRow: RowFunction<EventTriggerKind, TriggerRowType> = ({
+  obj,
+  index,
+  key,
+  style,
+  customData,
+}) => {
+  const {
+    metadata: { name, namespace, creationTimestamp, uid },
+    spec: { subscriber, filter, broker: connectedBroker },
+  } = obj;
+
+  if (customData?.broker && customData.broker === connectedBroker) {
+    return null;
+  }
+
+  const objReference = referenceFor(obj);
+  const menuActions = [
+    ...Kebab.getExtensionsActionsForKind(EventingTriggerModel),
+    ...Kebab.factory.common,
+  ];
+  const readyCondition = obj.status
+    ? getCondition(obj.status.conditions, TriggerConditionTypes.Ready)
+    : null;
+  return (
+    <TableRow id={uid} index={index} trKey={key} style={style}>
+      <TableData columnID="name" className={tableColumnClasses[0]}>
+        <ResourceLink kind={objReference} name={name} namespace={namespace} title={uid} />
+      </TableData>
+      <TableData columnID="namespace" className={tableColumnClasses[1]}>
+        <ResourceLink kind="Namespace" name={namespace} />
+      </TableData>
+      <TableData columnID="ready" className={tableColumnClasses[2]}>
+        {(readyCondition && readyCondition.status) || '-'}
+      </TableData>
+      <TableData columnID="condition" className={tableColumnClasses[3]}>
+        {obj.status ? getConditionString(obj.status.conditions) : '-'}
+      </TableData>
+      <TableData columnID="filters" className={tableColumnClasses[4]}>
+        {filter.attributes
+          ? Object.entries(filter.attributes).map(([fkey, val]) => (
+              <div key={fkey}>{`${fkey}:${val}`}</div>
+            ))
+          : '-'}
+      </TableData>
+      <TableData columnID="subscriber" className={tableColumnClasses[5]}>
+        <ResourceLink kind={subscriber.ref.kind} name={subscriber.ref.name} namespace={namespace} />
+      </TableData>
+      <TableData columnID="created" className={tableColumnClasses[6]}>
+        <Timestamp timestamp={creationTimestamp} />
+      </TableData>
+      <TableData className={tableColumnClasses[7]}>
+        <ResourceKebab actions={menuActions} kind={objReference} resource={obj} />
+      </TableData>
+    </TableRow>
+  );
+};
+
+export default TriggerRow;

frontend/packages/knative-plugin/src/components/eventing/triggers-list/trigger-table.ts

@@ -0,0 +1,13 @@
+import * as cx from 'classnames';
+import { Kebab } from '@console/internal/components/utils';
+
+export const tableColumnClasses = [
+  '', // name
+  '', // namespace
+  cx('pf-m-hidden', 'pf-m-visible-on-xl'), // ready
+  cx('pf-m-hidden', 'pf-m-visible-on-xl'), // condition
+  cx('pf-m-hidden', 'pf-m-visible-on-sm'), // filters
+  '', // subscriber
+  cx('pf-m-hidden', 'pf-m-visible-on-lg'), // created
+  Kebab.columnClass, // kebab menu
+];

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

@@ -351,6 +351,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,
 ];
 

frontend/packages/knative-plugin/src/types.ts

@@ -85,6 +85,18 @@ export type EventBrokerKind = {
   };
 } & K8sResourceKind;
 
+export enum TriggerConditionTypes {
+  Ready = 'Ready',
+  brokerReady = 'BrokerReady',
+  dependencyReady = 'DependencyReady',
+  subscriptionReady = 'SubscriptionReady',
+  subscriberResolved = 'SubscriberResolved',
+}
+
+export type TriggerCondition = {
+  type: keyof typeof TriggerConditionTypes;
+} & K8sResourceCondition;
+
 export type EventTriggerKind = {
   metadata?: {
     generation?: number;
@@ -104,4 +116,7 @@ export type EventTriggerKind = {
       };
     };
   };
+  status?: {
+    conditions?: TriggerCondition[];
+  };
 } & K8sResourceKind;