add broker details page

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,24 @@
+import * as React from 'react';
+import { ListPage } from '@console/internal/components/factory';
+import { referenceForModel } from '@console/internal/module/k8s';
+import { EventingTriggerModel } from '../../../models';
+import { EventBrokerKind } from '../../../types';
+import TriggerList from './TriggerList';
+
+type TriggerListPageProps = {
+  obj: EventBrokerKind;
+};
+
+const TriggerListPage: React.FC<TriggerListPageProps> = ({ obj }) => (
+  <ListPage
+    canCreate={false}
+    showTitle={false}
+    kind={referenceForModel(EventingTriggerModel)}
+    ListComponent={TriggerList}
+    customData={{
+      broker: obj.metadata.name,
+    }}
+  />
+);
+
+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

@@ -12,6 +12,7 @@ import {
   KebabActions,
   YAMLTemplate,
   HrefNavItem,
+  HorizontalNavTab,
 } from '@console/plugin-sdk';
 import { NamespaceRedirect } from '@console/internal/components/utils/namespace-redirect';
 import { AddAction } from '@console/dev-console/src/extensions/add-actions';
@@ -45,7 +46,8 @@ type ConsumedExtensions =
   | YAMLTemplate
   | ResourceDetailsPage
   | AddAction
-  | TopologyConsumedExtensions;
+  | TopologyConsumedExtensions
+  | HorizontalNavTab;
 
 const plugin: Plugin<ConsumedExtensions> = [
   {
@@ -409,6 +411,25 @@ const plugin: Plugin<ConsumedExtensions> = [
       icon: channelIcon,
     },
   },
+  {
+    type: 'HorizontalNavTab',
+    properties: {
+      model: models.EventingBrokerModel,
+      page: {
+        name: 'Triggers',
+        href: 'triggers',
+      },
+      loader: async () =>
+        (
+          await import(
+            './components/eventing/triggers-list/TriggerListPage' /* webpackChunkName: "knative-broker-triggers-list" */
+          )
+        ).default,
+    },
+    flags: {
+      required: [FLAG_KNATIVE_EVENTING],
+    },
+  },
   ...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;