Add Broker details page

frontend/packages/knative-plugin/locales/en/knative-plugin.json

@@ -80,6 +80,18 @@
   "Service Account Name": "Service Account Name",
   "Select a Service Account Name": "Select a Service Account Name",
   "The name of Service Account use to run this": "The name of Service Account use to run this",
+  "Event Source": "Event Source",
+  "Brokers": "Brokers",
+  "Triggers": "Triggers",
+  "Channels": "Channels",
+  "Eventing": "Eventing",
+  "Namespace": "Namespace",
+  "Ready": "Ready",
+  "Conditions": "Conditions",
+  "Filters": "Filters",
+  "Broker": "Broker",
+  "Subscriber": "Subscriber",
+  "Created": "Created",
   "Configurations": "Configurations",
   "No Configurations found for this resource.": "No Configurations found for this resource.",
   "Latest Created Revision name:": "Latest Created Revision name:",
@@ -89,8 +101,6 @@
   "Hide filters": "Hide filters",
   "Show filters": "Show filters",
   "No {{title}} found for this resource.": "No {{title}} found for this resource.",
-  "Broker": "Broker",
-  "Subscriber": "Subscriber",
   "Pods": "Pods",
   "Deployments": "Deployments",
   "No Subscribers found for this resource.": "No Subscribers found for this resource.",
@@ -99,7 +109,6 @@
   "Filter": "Filter",
   "Autoscaled to 0": "Autoscaled to 0",
   "Subscriptions": "Subscriptions",
-  "Triggers": "Triggers",
   "Location:": "Location:",
   "Revisions": "Revisions",
   "View all ({{revLength}})": "View all ({{revLength}})",
@@ -135,7 +144,6 @@
   "Add Revision": "Add Revision",
   "Select a revision": "Select a revision",
   "Set traffic distribution for the Revisions of the Knative Service": "Set traffic distribution for the Revisions of the Knative Service",
-  "Event Source": "Event Source",
   "No Revisions": "No Revisions",
   "Move sink to {{resourceObjKind}}": "Move sink to {{resourceObjKind}}",
   "Move sink to URI": "Move sink to URI",

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

@@ -0,0 +1,25 @@
+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 './triggers-list/TriggerList';
+
+type BrokerTriggerTabProps = {
+  obj: EventBrokerKind;
+};
+
+const BrokerTriggerTab: React.FC<BrokerTriggerTabProps> = ({ obj }) => (
+  <ListPage
+    canCreate={false}
+    showTitle={false}
+    kind={referenceForModel(EventingTriggerModel)}
+    ListComponent={TriggerList}
+    namespace={obj.metadata.namespace}
+    customData={{
+      broker: obj.metadata.name,
+    }}
+  />
+);
+
+export default BrokerTriggerTab;

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

@@ -1,29 +1,35 @@
 import * as React from 'react';
 import { match as Rmatch } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { Page } from '@console/internal/components/utils';
 import { NamespaceBar } from '@console/internal/components/namespace';
 import { MenuActions, MultiTabListPage } from '@console/shared';
 import EventSourceListPage from './eventsource-list/EventSourceListPage';
 import BrokerListPage from './brokers-list/BrokerListPage';
 import ChannelListPage from './channels-list/ChannelListPage';
+import TriggerListPage from './triggers-list/TriggerListPage';
 
 interface EventingListPageProps {
   match: Rmatch<{ ns: string }>;
 }
 
 const EventingListPage: React.FC<EventingListPageProps> = ({ match }) => {
+  const { t } = useTranslation();
   const {
     params: { ns: namespace },
   } = match;
   const [showTitle, canCreate] = [false, false];
   const menuActions: MenuActions = {
-    eventSource: { label: 'Event Source', onSelection: () => `/event-source/ns/${namespace}` },
-    channels: { label: 'Channel', onSelection: () => `/channel/ns/${namespace}` },
+    eventSource: {
+      label: t('knative-plugin~Event Source'),
+      onSelection: () => `/event-source/ns/${namespace}`,
+    },
+    channels: { label: t('knative-plugin~Channel'), onSelection: () => `/channel/ns/${namespace}` },
   };
   const pages: Page[] = [
     {
       href: '',
-      name: 'Event Sources',
+      name: t('knative-plugin~Event Sources'),
       component: EventSourceListPage,
       pageData: {
         canCreate,
@@ -33,17 +39,27 @@ const EventingListPage: React.FC<EventingListPageProps> = ({ match }) => {
     },
     {
       href: 'brokers',
-      name: 'Brokers',
+      name: t('knative-plugin~Brokers'),
       component: BrokerListPage,
       pageData: {
         canCreate,
         namespace,
         showTitle,
       },
     },
+    {
+      href: 'triggers',
+      name: t('knative-plugin~Triggers'),
+      component: TriggerListPage,
+      pageData: {
+        canCreate,
+        namespace,
+        showTitle,
+      },
+    },
     {
       href: 'channels',
-      name: 'Channels',
+      name: t('knative-plugin~Channels'),
       component: ChannelListPage,
       pageData: {
         canCreate,
@@ -56,7 +72,12 @@ const EventingListPage: React.FC<EventingListPageProps> = ({ match }) => {
   return (
     <>
       <NamespaceBar />
-      <MultiTabListPage pages={pages} match={match} title="Eventing" menuActions={menuActions} />
+      <MultiTabListPage
+        pages={pages}
+        match={match}
+        title={t('knative-plugin~Eventing')}
+        menuActions={menuActions}
+      />
     </>
   );
 };

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

@@ -0,0 +1,64 @@
+import { TFunction } from 'i18next';
+import { sortable } from '@patternfly/react-table';
+import { tableColumnClasses } from './trigger-table';
+
+const getTriggerHeaders = (t: TFunction, showBroker: boolean) => {
+  const TriggerHeaders = () => [
+    {
+      id: 'name',
+      title: t('knative-plugin~Name'),
+      sortField: 'metadata.name',
+      transforms: [sortable],
+      props: { className: tableColumnClasses[0] },
+    },
+    {
+      id: 'namespace',
+      title: t('knative-plugin~Namespace'),
+      sortField: 'metadata.namespace',
+      transforms: [sortable],
+      props: { className: tableColumnClasses[1] },
+    },
+    {
+      id: 'ready',
+      title: t('knative-plugin~Ready'),
+      props: { className: tableColumnClasses[2] },
+    },
+    {
+      id: 'condition',
+      title: t('knative-plugin~Conditions'),
+      props: { className: tableColumnClasses[3] },
+    },
+    {
+      id: 'filters',
+      title: t('knative-plugin~Filters'),
+      props: { className: tableColumnClasses[4] },
+    },
+    ...(showBroker
+      ? [
+          {
+            id: 'broker',
+            title: t('knative-plugin~Broker'),
+            props: { className: tableColumnClasses[5] },
+          },
+        ]
+      : []),
+    {
+      id: 'subscriber',
+      title: t('knative-plugin~Subscriber'),
+      props: { className: tableColumnClasses[6] },
+    },
+    {
+      title: t('knative-plugin~Created'),
+      sortField: 'metadata.creationTimestamp',
+      transforms: [sortable],
+      props: { className: tableColumnClasses[7] },
+    },
+    {
+      title: '',
+      props: { className: tableColumnClasses[8] },
+    },
+  ];
+  return TriggerHeaders;
+};
+
+export default getTriggerHeaders;

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Table, TableProps } from '@console/internal/components/factory';
+import getTriggerHeaders from './TriggerHeaders';
+import TriggerRow from './TriggerRow';
+
+const TriggerList: React.FC<TableProps> = (props) => {
+  const { t } = useTranslation();
+  return (
+    <Table
+      {...props}
+      aria-label={t('knative-plugin~Triggers')}
+      Header={getTriggerHeaders(t, !props.customData?.broker)}
+      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,80 @@
+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, referenceForModel } from '@console/internal/module/k8s';
+import { EventingTriggerModel, EventingBrokerModel } 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>
+      {!customData?.broker && (
+        <TableData columnID="broker" className={tableColumnClasses[5]}>
+          <ResourceLink
+            kind={referenceForModel(EventingBrokerModel)}
+            name={connectedBroker}
+            namespace={namespace}
+          />
+        </TableData>
+      )}
+      <TableData columnID="subscriber" className={tableColumnClasses[6]}>
+        <ResourceLink kind={subscriber.ref.kind} name={subscriber.ref.name} namespace={namespace} />
+      </TableData>
+      <TableData columnID="created" className={tableColumnClasses[7]}>
+        <Timestamp timestamp={creationTimestamp} />
+      </TableData>
+      <TableData className={tableColumnClasses[8]}>
+        <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,14 @@
+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
+  '', // broker
+  '', // subscriber
+  cx('pf-m-hidden', 'pf-m-visible-on-lg'), // created
+  Kebab.columnClass, // kebab menu
+];