From b50693abf125f286d64cd8c9cde8456740ab96b1 Mon Sep 17 00:00:00 2001
From: Brandon Walker <bcwalker@ibm.com>
Date: Wed, 5 Feb 2020 17:51:15 -0500
Subject: [PATCH] Support Triggers 0.2 features in the Dashboard

Fixes #944

Updates the EventListener details page with the following:
- Multiple Interceptors
- Multiple TriggerBindings
- No more params
- Display all 4 built-in types of Interceptors (Webhook, GitHub, GitLab,
and CEL)
---
 .../src/components/Trigger/Trigger.js         | 313 ++++++++++++------
 .../src/components/Trigger/Trigger.scss       |  53 ++-
 .../src/components/Trigger/Trigger.stories.js | 145 ++++++++
 .../src/components/Trigger/Trigger.test.js    | 263 ++++++++++-----
 src/containers/EventListener/EventListener.js | 128 ++++---
 .../EventListener/EventListener.scss          |  18 +
 .../EventListener/EventListener.stories.js    | 192 +++++++++++
 .../EventListener/EventListener.test.js       | 208 +++++++++---
 .../TriggerBinding/TriggerBinding.js          |  80 ++---
 .../TriggerTemplate/TriggerTemplate.js        |  80 ++---
 src/nls/messages_en.json                      |  42 ++-
 src/scss/Triggers.scss                        |   6 +
 12 files changed, 1137 insertions(+), 391 deletions(-)
 create mode 100644 packages/components/src/components/Trigger/Trigger.stories.js
 create mode 100644 src/containers/EventListener/EventListener.scss
 create mode 100644 src/containers/EventListener/EventListener.stories.js

diff --git a/packages/components/src/components/Trigger/Trigger.js b/packages/components/src/components/Trigger/Trigger.js
index e65a262d07..63ed0c614e 100644
--- a/packages/components/src/components/Trigger/Trigger.js
+++ b/packages/components/src/components/Trigger/Trigger.js
@@ -11,14 +11,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Launch16 as LinkIcon } from '@carbon/icons-react';
 import { injectIntl } from 'react-intl';
 import React from 'react';
 import { urls } from '@tektoncd/dashboard-utils';
 import { Link } from 'react-router-dom';
-import './Trigger.scss';
+import { Accordion, AccordionItem } from 'carbon-components-react';
 import { Table } from '@tektoncd/dashboard-components';
 
+import './Trigger.scss';
+
 const Trigger = ({ intl, eventListenerNamespace, trigger }) => {
   const tableHeaders = [
     {
@@ -37,120 +38,228 @@ const Trigger = ({ intl, eventListenerNamespace, trigger }) => {
     }
   ];
 
-  let triggerParams = [];
-
-  if (trigger.params) {
-    triggerParams = trigger.params.map(param => ({
-      id: param.name,
-      name: param.name,
-      value: param.value
-    }));
-  }
-
-  let interceptorValues = [];
-
-  if (trigger.interceptor) {
-    if (trigger.interceptor.header) {
-      interceptorValues = trigger.interceptor.header.map(header => ({
-        id: header.name,
-        name: header.name,
-        value: header.value
-      }));
-    }
-  }
-
   return (
     <>
-      <div className="triggermain">
-        <h3>Trigger: {trigger.name}</h3>
-        <div className="triggerresourcelinks">
-          <span className="resourcekind">TriggerBinding</span>
-          <Link
-            to={urls.triggerBindings.byName({
-              namespace: eventListenerNamespace,
-              triggerBindingName: trigger.binding.name
-            })}
-          >
-            <span className="linkicon">
-              <LinkIcon />
-            </span>
-            <span className="truncate-text-end" title={trigger.binding.name}>
-              {trigger.binding.name}
+      <h3>Trigger: {trigger.name}</h3>
+      <div className="triggerdetails">
+        {trigger.bindings && trigger.bindings.length !== 0 && (
+          <div className="triggerresourcelinks">
+            <span className="resourcekind">
+              {intl.formatMessage({
+                id: 'dashboard.triggerDetails.triggerBindings',
+                defaultMessage: 'TriggerBindings:'
+              })}
             </span>
-          </Link>
-        </div>
+            <div>
+              {trigger.bindings.map((binding, index) => (
+                <span key={binding.name}>
+                  <Link
+                    className="triggerresourcelink"
+                    to={urls.triggerBindings.byName({
+                      namespace: eventListenerNamespace,
+                      triggerBindingName: binding.name
+                    })}
+                  >
+                    <span title={binding.name}>{binding.name}</span>
+                  </Link>
+                  {index !== trigger.bindings.length - 1 && <span>, </span>}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
         <div className="triggerresourcelinks">
-          <span className="resourcekind">TriggerTemplate</span>
+          <span className="resourcekind">
+            {intl.formatMessage({
+              id: 'dashboard.triggerDetails.triggerTemplate',
+              defaultMessage: 'TriggerTemplate:'
+            })}
+          </span>
 
           <Link
+            className="triggerresourcelink"
             to={urls.triggerTemplates.byName({
               namespace: eventListenerNamespace,
               triggerTemplateName: trigger.template.name
             })}
           >
-            <span className="linkicon">
-              <LinkIcon />
-            </span>
-            <span className="truncate-text-end" title={trigger.template.name}>
-              {trigger.template.name}
-            </span>
+            <span title={trigger.template.name}>{trigger.template.name}</span>
           </Link>
         </div>
+      </div>
 
-        <div className="triggerinfo">
-          <h3>
-            {intl.formatMessage({
-              id: 'dashboard.parameters.title',
-              defaultMessage: 'Parameters'
-            })}
-          </h3>
-
-          <Table
-            className="parameterstable"
-            headers={tableHeaders}
-            rows={triggerParams}
-            emptyTextAllNamespaces={intl.formatMessage({
-              id: 'dashboard.trigger.noParams',
-              defaultMessage: 'No parameters found for this Trigger.'
-            })}
-            emptyTextSelectedNamespace={intl.formatMessage({
-              id: 'dashboard.trigger.noParams',
-              defaultMessage: 'No parameters found for this Trigger.'
-            })}
-          />
-          {trigger.interceptor && (
-            <>
-              <div className="interceptor">
-                <h3>
-                  {intl.formatMessage({
-                    id: 'dashboard.triggerDetails.interceptorName',
-                    defaultMessage: 'Interceptor: '
-                  })}
-                  {trigger.interceptor.objectRef.name}
-                </h3>
-                <h3>
-                  {intl.formatMessage({
-                    id: 'dashboard.triggerDetails.interceptorHeaders',
-                    defaultMessage: 'Headers'
-                  })}
-                </h3>
-              </div>
-              <Table
-                headers={tableHeaders}
-                rows={interceptorValues}
-                emptyTextAllNamespaces={intl.formatMessage({
-                  id: 'dashboard.trigger.noHeaders',
-                  defaultMessage: 'No headers found for this interceptor.'
-                })}
-                emptyTextSelectedNamespace={intl.formatMessage({
-                  id: 'dashboard.trigger.noHeaders',
-                  defaultMessage: 'No headers found for this interceptor.'
-                })}
-                isSortable={false}
-              />
-            </>
-          )}
-        </div>
+      <div className="trigger--interceptors">
+        {trigger.interceptors && trigger.interceptors.length !== 0 && (
+          <>
+            <span className="resourcekind">
+              {intl.formatMessage({
+                id: 'dashboard.triggerDetails.interceptors',
+                defaultMessage: 'Interceptors:'
+              })}
+            </span>
+            <Accordion
+              className="trigger--interceptors-accordian"
+              title="Interceptors"
+            >
+              {trigger.interceptors.map((interceptor, index) => {
+                let interceptorName;
+                let interceptorType;
+                let content;
+                const namespaceText = intl.formatMessage({
+                  id: 'dashboard.triggerDetails.interceptorNamespace',
+                  defaultMessage: 'Namespace:'
+                });
+                const nameText = intl.formatMessage({
+                  id: 'dashboard.triggerDetails.interceptorName',
+                  defaultMessage: 'Name:'
+                });
+                if (interceptor.webhook) {
+                  // Webhook Interceptor
+                  if (!interceptor.webhook.objectRef) {
+                    return null;
+                  }
+                  interceptorType = 'Webhook';
+                  interceptorName = interceptor.webhook.objectRef.name;
+                  let headerValues = [];
+                  if (interceptor.webhook.header) {
+                    headerValues = interceptor.webhook.header.map(header => {
+                      const headerValue = {
+                        id: header.name,
+                        name: header.name,
+                        value: header.value
+                      };
+                      // Concatenate values with a comma if value is an array
+                      if (Array.isArray(header.value)) {
+                        headerValue.value = header.value.join(', ');
+                      }
+                      return headerValue;
+                    });
+                  }
+                  const serviceText = intl.formatMessage({
+                    id: 'dashboard.triggerDetails.webhookInterceptorService',
+                    defaultMessage: 'Service:'
+                  });
+                  content = (
+                    <>
+                      <p>{serviceText}</p>
+                      <div className="interceptor--service-details">
+                        <p>
+                          {nameText} {interceptor.webhook.objectRef.name}
+                        </p>
+                        {interceptor.webhook.objectRef.namespace && (
+                          <p>
+                            {namespaceText}{' '}
+                            {interceptor.webhook.objectRef.namespace}
+                          </p>
+                        )}
+                      </div>
+                      {headerValues.length !== 0 && (
+                        <>
+                          <p>
+                            {intl.formatMessage({
+                              id: 'dashboard.triggerDetails.interceptorHeader',
+                              defaultMessage: 'Header:'
+                            })}
+                          </p>
+                          <Table
+                            headers={tableHeaders}
+                            rows={headerValues}
+                            emptyTextAllNamespaces={intl.formatMessage({
+                              id: 'dashboard.trigger.noHeaders',
+                              defaultMessage:
+                                'No headers found for this interceptor.'
+                            })}
+                            emptyTextSelectedNamespace={intl.formatMessage({
+                              id: 'dashboard.trigger.noHeaders',
+                              defaultMessage:
+                                'No headers found for this interceptor.'
+                            })}
+                            isSortable={false}
+                          />
+                        </>
+                      )}
+                    </>
+                  );
+                } else if (interceptor.github || interceptor.gitlab) {
+                  let data;
+                  if (interceptor.github) {
+                    // GitHub Interceptor
+                    interceptorType = 'GitHub';
+                    data = interceptor.github;
+                  } else {
+                    // GitLab Interceptor
+                    interceptorType = 'GitLab';
+                    data = interceptor.gitlab;
+                  }
+                  const eventTypes = data.eventTypes.join(', ');
+                  interceptorName = eventTypes;
+                  const secretText = intl.formatMessage({
+                    id: 'dashboard.triggerDetails.webhookInterceptorSecret',
+                    defaultMessage: 'Secret:'
+                  });
+                  const secretKeyText = intl.formatMessage({
+                    id: 'dashboard.triggerDetails.webhookInterceptorSecretKey',
+                    defaultMessage: 'Key:'
+                  });
+                  content = (
+                    <>
+                      <p>{secretText}</p>
+                      <div className="interceptor--secret-details">
+                        <p>
+                          {nameText} {data.secretRef.secretName}
+                        </p>
+                        <p>
+                          {secretKeyText} {data.secretRef.secretKey}
+                        </p>
+                        {data.secretRef.namespace && (
+                          <p>
+                            {namespaceText} {data.secretRef.namespace}
+                          </p>
+                        )}
+                      </div>
+                      <p>Event Types: {eventTypes}</p>
+                    </>
+                  );
+                } else if (interceptor.cel) {
+                  // CEL Interceptor
+                  interceptorType = 'CEL';
+                  interceptorName = interceptor.cel.filter;
+                  const filter = intl.formatMessage({
+                    id: 'dashboard.triggerDetails.celInterceptorFilter',
+                    defaultMessage: 'Filter: '
+                  });
+                  content = (
+                    <>
+                      <p>{filter}</p>
+                      <code className="bx--snippet--multi interceptor--cel-filter">
+                        {interceptor.cel.filter}
+                      </code>
+                    </>
+                  );
+                } else {
+                  return null;
+                }
+                const title = intl.formatMessage(
+                  {
+                    id: 'dashboard.triggerDetails.interceptorTitle',
+                    defaultMessage:
+                      '{interceptorNumber}. ({interceptorType}) {interceptorName}'
+                  },
+                  {
+                    interceptorNumber: index + 1,
+                    interceptorType,
+                    interceptorName
+                  }
+                );
+                return (
+                  <AccordionItem key={title} title={title}>
+                    {content}
+                  </AccordionItem>
+                );
+              })}
+            </Accordion>
+          </>
+        )}
       </div>
     </>
   );
diff --git a/packages/components/src/components/Trigger/Trigger.scss b/packages/components/src/components/Trigger/Trigger.scss
index 7845f9800d..98395d508b 100644
--- a/packages/components/src/components/Trigger/Trigger.scss
+++ b/packages/components/src/components/Trigger/Trigger.scss
@@ -13,48 +13,43 @@ limitations under the License.
 
 @import '~carbon-components/scss/globals/scss/vars';
 
-.triggermain {
-  padding: 25px;
-  padding-left: 0px;
-  margin-bottom: 20px;
-  border-bottom: 0.5px dotted grey;
-}
+.trigger--interceptors {
+  margin-top: $spacing-05;
 
-.interceptor h3 {
-  margin: 5px;
-  padding: 10px;
+  .trigger--interceptors-accordian {
+    margin-top: $spacing-03;
+  }
 }
 
-.triggerinfo h3 {
-  margin: 5px;
-  padding: 10px;
+.triggerdetails {
+  margin-top: $spacing-05;
 }
 
 .triggerresourcelinks {
-  margin: 10px;
-  padding: 10px;
   display: grid;
-  grid-template-columns: 100px 500px 100px;
+  margin-top: $spacing-03;
+  grid-template-columns: 100px 500px;
   grid-gap: 30px;
-
-  .linkicon {
-    margin-right: 1rem;
-  }
+  line-height: 1.5rem;
 
   .resourcekind {
-    font-weight: bold;
+    font-weight: auto;
   }
-  
-  a {
-    display: flex;
-    overflow: hidden;
-    white-space: nowrap;
+
+  .triggerresourcelink {
+    display: inline-block;
+    overflow: visible;
   }
 }
 
-.truncate-text-end {
+.interceptor--cel-filter {
   display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+}
+
+.interceptor--secret-details {
+  margin-left: $spacing-04;
+}
+
+.interceptor--service-details {
+  margin-left: $spacing-04;
 }
diff --git a/packages/components/src/components/Trigger/Trigger.stories.js b/packages/components/src/components/Trigger/Trigger.stories.js
new file mode 100644
index 0000000000..a8287a26e1
--- /dev/null
+++ b/packages/components/src/components/Trigger/Trigger.stories.js
@@ -0,0 +1,145 @@
+/*
+Copyright 2019 The Tekton Authors
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { Router } from 'react-router-dom';
+import { IntlProvider } from 'react-intl';
+import { createMemoryHistory } from 'history';
+import Trigger from './Trigger';
+
+const route = '/';
+const history = createMemoryHistory({ initialEntries: [route] });
+const props = {
+  eventListenerNamespace: 'default',
+  trigger: {
+    name: 'my-trigger',
+    bindings: [
+      { name: 'triggerbinding0' },
+      { name: 'triggerbinding1' },
+      { name: 'triggerbinding2' }
+    ],
+    template: {
+      name: 'triggertemplate'
+    },
+    interceptors: [
+      {
+        webhook: {
+          header: [
+            {
+              name: 'header0',
+              value: 'value0'
+            },
+            {
+              name: 'header1',
+              value: ['value1-0', 'value1-1', 'value1-2']
+            }
+          ],
+          objectRef: {
+            apiVersion: 'v1',
+            kind: 'Service',
+            name: 'interceptor-service0',
+            namespace: 'foo'
+          }
+        }
+      },
+      {
+        github: {
+          secretRef: {
+            secretName: 'github-secret',
+            secretKey: 'secret'
+          },
+          eventTypes: ['push', 'pull_request']
+        }
+      },
+      {
+        gitlab: {
+          secretRef: {
+            secretName: 'gitlab-secret',
+            secretKey: 'secret',
+            namespace: 'foo'
+          },
+          eventTypes: ['Push Hook']
+        }
+      },
+      {
+        cel: {
+          filter: "body.matches('foo', 'bar')"
+        }
+      }
+    ]
+  }
+};
+
+storiesOf('Trigger', module)
+  .add('default', () => (
+    <Router history={history}>
+      <IntlProvider locale="en" defaultLocale="en" messages={{}}>
+        <Trigger {...props} />
+      </IntlProvider>
+    </Router>
+  ))
+  .add('no name', () => (
+    <Router history={history}>
+      <IntlProvider locale="en" defaultLocale="en" messages={{}}>
+        <Trigger
+          {...{ ...props, trigger: { ...props.trigger, name: undefined } }}
+        />
+      </IntlProvider>
+    </Router>
+  ))
+  .add('no bindings', () => (
+    <Router history={history}>
+      <IntlProvider locale="en" defaultLocale="en" messages={{}}>
+        <Trigger
+          {...{ ...props, trigger: { ...props.trigger, bindings: undefined } }}
+        />
+      </IntlProvider>
+    </Router>
+  ))
+  .add('no interceptors', () => (
+    <Router history={history}>
+      <IntlProvider locale="en" defaultLocale="en" messages={{}}>
+        <Trigger
+          {...{
+            ...props,
+            trigger: { ...props.trigger, interceptors: undefined }
+          }}
+        />
+      </IntlProvider>
+    </Router>
+  ))
+  .add('no headers in webhook interceptor', () => (
+    <Router history={history}>
+      <IntlProvider locale="en" defaultLocale="en" messages={{}}>
+        <Trigger
+          {...{
+            ...props,
+            trigger: {
+              ...props.trigger,
+              interceptors: [
+                {
+                  ...props.trigger.interceptors[0],
+                  webhook: {
+                    ...props.trigger.interceptors[0].webhook,
+                    header: undefined
+                  }
+                }
+              ]
+            }
+          }}
+        />
+      </IntlProvider>
+    </Router>
+  ));
diff --git a/packages/components/src/components/Trigger/Trigger.test.js b/packages/components/src/components/Trigger/Trigger.test.js
index fc7776130e..30bfe8bf07 100644
--- a/packages/components/src/components/Trigger/Trigger.test.js
+++ b/packages/components/src/components/Trigger/Trigger.test.js
@@ -16,131 +16,234 @@ import Trigger from './Trigger';
 import { renderWithRouter } from '../../utils/test';
 
 const fakeTrigger = {
-  binding: {
-    apiversion: 'v1alpha1',
-    name: 'simple-pipeline-push-binding'
-  },
-  interceptor: {
-    header: [
-      {
-        name: 'Wext-Trigger-Name',
-        value: 'mytrigger-tekton-pipelines-push-event'
-      },
-      {
-        name: 'Wext-Repository-Url',
-        value: 'https://github.com/myorg/myrepo'
-      },
-      {
-        name: 'Wext-Incoming-Event',
-        value: 'push'
-      },
-      {
-        name: 'Wext-Secret-Name',
-        value: 'mytoken'
-      }
-    ],
-    objectRef: {
-      apiVersion: 'v1',
-      kind: 'Service',
-      name: 'tekton-webhooks-extension-validator',
-      namespace: 'tekton-pipelines'
-    }
-  },
-  name: 'mytrigger-tekton-pipelines-push-event',
-  params: [
+  name: 'my-fake-trigger',
+  bindings: [
     {
-      name: 'webhooks-tekton-release-name',
-      value: 'myreleasename'
+      apiversion: 'v1alpha1',
+      name: 'triggerbinding-0'
     },
     {
-      name: 'webhooks-tekton-target-namespace',
-      value: 'tekton-pipelines'
+      apiversion: 'v1alpha1',
+      name: 'triggerbinding-1'
     },
     {
-      name: 'webhooks-tekton-service-account',
-      value: 'tekton-dashboard'
-    },
+      apiversion: 'v1alpha1',
+      name: 'triggerbinding-2'
+    }
+  ],
+  template: {
+    apiversion: 'v1alpha1',
+    name: 'simple-pipeline-template'
+  },
+  interceptors: [
     {
-      name: 'webhooks-tekton-git-server',
-      value: 'github.com'
+      webhook: {
+        header: [
+          {
+            name: 'Wext-Repository-Url',
+            value: 'https://github.com/myorg/myrepo'
+          },
+          {
+            name: 'Wext-Incoming-Event',
+            value: 'wext-incoming-event-value'
+          },
+          {
+            name: 'Wext-Secret-Name',
+            value: 'wext-secret-name-value'
+          },
+          {
+            name: 'Array-Header-Name',
+            value: [
+              'array-header-value-0',
+              'array-header-value-1',
+              'array-header-value-2'
+            ]
+          }
+        ],
+        objectRef: {
+          apiVersion: 'v1',
+          kind: 'Service',
+          name: 'webhook-service-name',
+          namespace: 'webhook-service-namespace'
+        }
+      }
     },
     {
-      name: 'webhooks-tekton-git-org',
-      value: 'myorg'
+      github: {
+        secretRef: {
+          secretName: 'my-github-secret',
+          secretKey: 'github-secret-key',
+          namespace: 'github-secret-namespace'
+        },
+        eventTypes: ['github-event-0', 'github-event-1', 'github-event-2']
+      }
     },
     {
-      name: 'webhooks-tekton-git-repo',
-      value: 'myrepo'
+      gitlab: {
+        secretRef: {
+          secretName: 'my-gitlab-secret',
+          secretKey: 'gitlab-secret-key',
+          namespace: 'gitlab-secret-namespace'
+        },
+        eventTypes: ['gitlab-event-0', 'gitlab-event-1', 'gitlab-event-2']
+      }
     },
     {
-      name: 'webhooks-tekton-docker-registry',
-      value: 'myregistry'
+      cel: {
+        filter: 'cel-filter'
+      }
     }
-  ],
-  template: {
-    apiversion: 'v1alpha1',
-    name: 'simple-pipeline-template'
-  }
+  ]
 };
 
 describe('Trigger', () => {
-  it('should render all details', () => {
+  it('renders all details', () => {
     const props = {
       eventListenerNamespace: 'tekton-pipelines',
       trigger: fakeTrigger
     };
     const { queryByText } = renderWithRouter(<Trigger {...props} />);
     expect(queryByText(/Name/i)).toBeTruthy();
+    expect(queryByText(/my-fake-trigger/i)).toBeTruthy();
     expect(queryByText(/TriggerBinding/i)).toBeTruthy();
+    expect(queryByText(/triggerbinding-0/i)).toBeTruthy();
+    expect(queryByText(/triggerbinding-1/i)).toBeTruthy();
+    expect(queryByText(/triggerbinding-2/i)).toBeTruthy();
     expect(queryByText(/TriggerTemplate/i)).toBeTruthy();
-    expect(queryByText(/Interceptor/i)).toBeTruthy();
-    expect(queryByText(/Headers/i)).toBeTruthy();
-    expect(queryByText(/Parameters/i)).toBeTruthy();
-    expect(queryByText(/webhooks-tekton-release-name/i)).toBeTruthy();
-    expect(queryByText(/webhooks-tekton-target-namespace/i)).toBeTruthy();
-    expect(queryByText(/webhooks-tekton-service-account/i)).toBeTruthy();
-    expect(queryByText(/webhooks-tekton-git-server/i)).toBeTruthy();
-    expect(queryByText(/webhooks-tekton-git-org/i)).toBeTruthy();
-    expect(queryByText(/webhooks-tekton-git-repo/i)).toBeTruthy();
-    expect(queryByText(/mytrigger-tekton-pipelines-push-event/i)).toBeTruthy();
-    expect(queryByText(/myreleasename/i)).toBeTruthy();
-    expect(queryByText(/tekton-pipelines/i)).toBeTruthy();
-    expect(queryByText(/myregistry/i)).toBeTruthy();
-    expect(queryByText(/myrepo/i)).toBeTruthy();
-    expect(queryByText(/myorg/i)).toBeTruthy();
-    expect(queryByText(/github.com/i)).toBeTruthy();
     expect(queryByText(/simple-pipeline-template/i)).toBeTruthy();
-    expect(queryByText(/Wext-Trigger-Name/i)).toBeTruthy();
+    expect(queryByText(/Interceptors/i)).toBeTruthy();
+    // Check Webhook Interceptor
+    expect(queryByText(/(webhook)/i)).toBeTruthy();
+    expect(queryByText(/webhook-service-name/i)).toBeTruthy();
+    expect(queryByText(/Header/i)).toBeTruthy();
+    expect(queryByText(/webhook-service-namespace/i)).toBeTruthy();
     expect(queryByText(/Wext-Repository-Url/i)).toBeTruthy();
+    expect(queryByText(/https:\/\/github.com\/myorg\/myrepo/i)).toBeTruthy();
     expect(queryByText(/Wext-Incoming-Event/i)).toBeTruthy();
+    expect(queryByText(/wext-incoming-event-value/i)).toBeTruthy();
     expect(queryByText(/Wext-Secret-Name/i)).toBeTruthy();
+    expect(queryByText(/wext-secret-name-value/i)).toBeTruthy();
+    expect(queryByText(/Array-Header-Name/i)).toBeTruthy();
+    expect(queryByText(/array-header-value-0/i)).toBeTruthy();
+    expect(queryByText(/array-header-value-1/i)).toBeTruthy();
+    expect(queryByText(/array-header-value-2/i)).toBeTruthy();
+    // Check GitHub Interceptor
+    expect(queryByText(/(github)/i)).toBeTruthy();
+    expect(queryByText(/my-github-secret/i)).toBeTruthy();
+    expect(queryByText(/github-secret-key/i)).toBeTruthy();
+    expect(queryByText(/github-secret-namespace/i)).toBeTruthy();
+    expect(queryByText(/github-event-0/i)).toBeTruthy();
+    expect(queryByText(/github-event-1/i)).toBeTruthy();
+    expect(queryByText(/github-event-2/i)).toBeTruthy();
+    // Check GitLab Interceptor
+    expect(queryByText(/(gitlab)/i)).toBeTruthy();
+    expect(queryByText(/my-gitlab-secret/i)).toBeTruthy();
+    expect(queryByText(/gitlab-secret-key/i)).toBeTruthy();
+    expect(queryByText(/gitlab-secret-namespace/i)).toBeTruthy();
+    expect(queryByText(/gitlab-event-0/i)).toBeTruthy();
+    expect(queryByText(/gitlab-event-1/i)).toBeTruthy();
+    expect(queryByText(/gitlab-event-2/i)).toBeTruthy();
+    // Check CEL Interceptor
+    expect(queryByText(/(cel)/i)).toBeTruthy();
+    expect(queryByText(/cel-filter/i)).toBeTruthy();
   });
 
-  it('should handle missing params and interceptor', () => {
+  it('handles no objectRef in webhook Interceptor', () => {
     const props = {
       eventListenerNamespace: 'tekton-pipelines',
       trigger: {
         ...fakeTrigger,
-        params: undefined,
-        interceptor: undefined
+        interceptors: [
+          {
+            webhook: {}
+          }
+        ]
       }
     };
     const { queryByText } = renderWithRouter(<Trigger {...props} />);
-    expect(queryByText(/Name/i)).toBeTruthy();
+    expect(queryByText(/1./i)).toBeFalsy();
   });
 
-  it('should handle missing interceptor headers', () => {
+  it('handles empty Interceptor', () => {
     const props = {
       eventListenerNamespace: 'tekton-pipelines',
       trigger: {
         ...fakeTrigger,
-        interceptor: {
-          ...fakeTrigger.interceptor,
-          header: undefined
-        }
+        interceptors: [{}]
+      }
+    };
+    const { queryByText } = renderWithRouter(<Trigger {...props} />);
+    expect(queryByText(/Interceptors/i)).toBeTruthy();
+  });
+
+  it('handles no Interceptors', () => {
+    const props = {
+      eventListenerNamespace: 'tekton-pipelines',
+      trigger: {
+        ...fakeTrigger,
+        interceptors: []
+      }
+    };
+    const { queryByText } = renderWithRouter(<Trigger {...props} />);
+    expect(queryByText(/Interceptors/i)).toBeFalsy();
+  });
+
+  it('handles missing Interceptors', () => {
+    const props = {
+      eventListenerNamespace: 'tekton-pipelines',
+      trigger: {
+        ...fakeTrigger,
+        interceptors: undefined
+      }
+    };
+    const { queryByText } = renderWithRouter(<Trigger {...props} />);
+    expect(queryByText(/Interceptors/i)).toBeFalsy();
+  });
+
+  it('handles webhook Interceptor without Header', () => {
+    const props = {
+      eventListenerNamespace: 'tekton-pipelines',
+      trigger: {
+        ...fakeTrigger,
+        interceptors: [
+          {
+            webhook: {
+              objectRef: {
+                apiVersion: 'v1',
+                kind: 'Service',
+                name: 'webhook-service-name',
+                namespace: 'webhook-service-namespace'
+              }
+            }
+          }
+        ]
+      }
+    };
+    const { queryByText } = renderWithRouter(<Trigger {...props} />);
+    expect(queryByText(/Header/i)).toBeFalsy();
+  });
+
+  it('handles no name', () => {
+    const props = {
+      eventListenerNamespace: 'tekton-pipelines',
+      trigger: {
+        ...fakeTrigger,
+        name: undefined
+      }
+    };
+    const { queryByText } = renderWithRouter(<Trigger {...props} />);
+    expect(queryByText(/Trigger/i)).toBeTruthy();
+  });
+
+  it('handles no bindings', () => {
+    const props = {
+      eventListenerNamespace: 'tekton-pipelines',
+      trigger: {
+        ...fakeTrigger,
+        bindings: undefined
       }
     };
     const { queryByText } = renderWithRouter(<Trigger {...props} />);
-    expect(queryByText(/Interceptor/i)).toBeTruthy();
+    expect(queryByText(/TriggerBindings/i)).toBeFalsy();
   });
 });
diff --git a/src/containers/EventListener/EventListener.js b/src/containers/EventListener/EventListener.js
index 50aab07282..2fd7ac82ef 100644
--- a/src/containers/EventListener/EventListener.js
+++ b/src/containers/EventListener/EventListener.js
@@ -14,10 +14,8 @@ limitations under the License.
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import '../../scss/Triggers.scss';
 import { injectIntl } from 'react-intl';
 import { InlineNotification, Tag } from 'carbon-components-react';
-
 import { formatLabels } from '@tektoncd/dashboard-utils';
 import {
   FormattedDate,
@@ -32,9 +30,11 @@ import {
   getSelectedNamespace,
   isWebSocketConnected
 } from '../../reducers';
-
 import { fetchEventListener } from '../../actions/eventListeners';
 
+import '../../scss/Triggers.scss';
+import './EventListener.scss';
+
 export /* istanbul ignore next */ class EventListenerContainer extends Component {
   static notification({ kind, message, intl }) {
     const titles = {
@@ -129,54 +129,82 @@ export /* istanbul ignore next */ class EventListenerContainer extends Component
             })}
           >
             <div className="details">
-              <p>
-                <span>
-                  {intl.formatMessage({
-                    id: 'dashboard.metadata.dateCreated',
-                    defaultMessage: 'Date Created:'
-                  })}
-                </span>
-                <FormattedDate
-                  date={eventListener.metadata.creationTimestamp}
-                  relative
-                />
-              </p>
-              <p>
-                <span>
-                  {intl.formatMessage({
-                    id: 'dashboard.metadata.labels',
-                    defaultMessage: 'Labels:'
-                  })}
-                </span>
-                {formattedLabelsToRender.length === 0
-                  ? intl.formatMessage({
-                      id: 'dashboard.metadata.none',
-                      defaultMessage: 'None'
-                    })
-                  : formattedLabelsToRender.map(label => (
-                      <Tag type="blue" key={label}>
-                        {label}
-                      </Tag>
-                    ))}
-              </p>
-              <p>
-                <span>
-                  {intl.formatMessage({
-                    id: 'dashboard.metadata.namespace',
-                    defaultMessage: 'Namespace:'
-                  })}
-                </span>
-                {eventListener.metadata.namespace}
-              </p>
-              {triggers.map(trigger => {
-                return (
-                  <Trigger
-                    key={trigger}
-                    eventListenerNamespace={eventListenerNamespace}
-                    trigger={trigger}
+              <div className="triggers--detail-block">
+                <p>
+                  <span>
+                    {intl.formatMessage({
+                      id: 'dashboard.metadata.dateCreated',
+                      defaultMessage: 'Date Created:'
+                    })}{' '}
+                  </span>
+                  <FormattedDate
+                    date={eventListener.metadata.creationTimestamp}
+                    relative
                   />
-                );
-              })}
+                </p>
+                <p>
+                  <span>
+                    {intl.formatMessage({
+                      id: 'dashboard.metadata.labels',
+                      defaultMessage: 'Labels:'
+                    })}{' '}
+                  </span>
+                  {formattedLabelsToRender.length === 0
+                    ? intl.formatMessage({
+                        id: 'dashboard.metadata.none',
+                        defaultMessage: 'None'
+                      })
+                    : formattedLabelsToRender.map(label => (
+                        <Tag type="blue" key={label}>
+                          {label}
+                        </Tag>
+                      ))}
+                </p>
+                <p>
+                  <span>
+                    {intl.formatMessage({
+                      id: 'dashboard.metadata.namespace',
+                      defaultMessage: 'Namespace:'
+                    })}{' '}
+                  </span>
+                  {eventListener.metadata.namespace}
+                </p>
+                {eventListener.spec.serviceAccountName && (
+                  <p>
+                    <span>
+                      {intl.formatMessage({
+                        id: 'dashboard.metadata.serviceAccount',
+                        defaultMessage: 'Service Account:'
+                      })}{' '}
+                    </span>
+                    {eventListener.spec.serviceAccountName}
+                  </p>
+                )}
+                {eventListener.spec.serviceType && (
+                  <p>
+                    <span>
+                      {intl.formatMessage({
+                        id: 'dashboard.metadata.serviceType',
+                        defaultMessage: 'Service Type:'
+                      })}{' '}
+                    </span>
+                    {eventListener.spec.serviceType}
+                  </p>
+                )}
+              </div>
+              <div className="eventlistener--triggers">
+                {triggers.map((trigger, idx) => (
+                  <div
+                    className="triggers--detail-block"
+                    key={trigger.name ? trigger.name : idx}
+                  >
+                    <Trigger
+                      eventListenerNamespace={eventListenerNamespace}
+                      trigger={trigger}
+                    />
+                  </div>
+                ))}
+              </div>
             </div>
           </Tab>
           <Tab label="YAML">
diff --git a/src/containers/EventListener/EventListener.scss b/src/containers/EventListener/EventListener.scss
new file mode 100644
index 0000000000..9475e399d5
--- /dev/null
+++ b/src/containers/EventListener/EventListener.scss
@@ -0,0 +1,18 @@
+/*
+Copyright 2019 The Tekton Authors
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@import '~carbon-components/scss/globals/scss/vars';
+
+.eventlistener--triggers {
+  margin-top: $layout-02;
+}
diff --git a/src/containers/EventListener/EventListener.stories.js b/src/containers/EventListener/EventListener.stories.js
new file mode 100644
index 0000000000..631c5d268a
--- /dev/null
+++ b/src/containers/EventListener/EventListener.stories.js
@@ -0,0 +1,192 @@
+/*
+Copyright 2019 The Tekton Authors
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { Router } from 'react-router-dom';
+import { createIntl, IntlProvider } from 'react-intl';
+import { createMemoryHistory } from 'history';
+import { EventListenerContainer } from './EventListener';
+
+const route = '/';
+const history = createMemoryHistory({ initialEntries: [route] });
+const eventListener = {
+  apiVersion: 'tekton.dev/v1alpha1',
+  kind: 'EventListener',
+  metadata: {
+    name: 'my-eventlistener',
+    namespace: 'foo',
+    creationTimestamp: '2020-01-31T16:39:21Z',
+    labels: {
+      foo: 'bar',
+      bar: 'baz'
+    }
+  },
+  spec: {
+    serviceType: 'ClusterIP',
+    serviceAccountName: 'my-serviceaccount',
+    triggers: [
+      {
+        eventListenerNamespace: 'default',
+        name: 'my-trigger',
+        bindings: [
+          { name: 'triggerbinding0' },
+          { name: 'triggerbinding1' },
+          { name: 'triggerbinding2' }
+        ],
+        template: {
+          name: 'triggertemplate'
+        },
+        interceptors: [
+          {
+            webhook: {
+              header: [
+                {
+                  name: 'header0',
+                  value: 'value0'
+                },
+                {
+                  name: 'header1',
+                  value: ['value1-0', 'value1-1', 'value1-2']
+                }
+              ],
+              objectRef: {
+                apiVersion: 'v1',
+                kind: 'Service',
+                name: 'interceptor-service0',
+                namespace: 'foo'
+              }
+            }
+          }
+        ]
+      },
+      {
+        eventListenerNamespace: 'foo',
+        name: 'my-trigger-1',
+        bindings: [{ name: 'triggerbinding1' }],
+        template: {
+          name: 'triggertemplate1'
+        },
+        interceptors: [
+          {
+            gitlab: {
+              secretRef: {
+                secretName: 'gitlab-secret',
+                secretKey: 'secret',
+                namespace: 'foo'
+              },
+              eventTypes: ['Push Hook']
+            }
+          },
+          {
+            cel: {
+              filter: "body.matches('foo', 'bar')"
+            }
+          }
+        ]
+      },
+      {
+        eventListenerNamespace: 'foo',
+        name: 'my-trigger-2',
+        bindings: [{ name: 'triggerbinding2' }],
+        template: {
+          name: 'triggertemplate2'
+        },
+        interceptors: [
+          {
+            github: {
+              secretRef: {
+                secretName: 'github-secret',
+                secretKey: 'secret'
+              },
+              eventTypes: ['push', 'pull_request']
+            }
+          }
+        ]
+      },
+      {
+        eventListenerNamespace: 'foo',
+        name: 'my-trigger-3',
+        bindings: [{ name: 'triggerbinding3' }],
+        template: {
+          name: 'triggertemplate3'
+        },
+        interceptors: []
+      }
+    ]
+  }
+};
+const match = {
+  params: {
+    eventListenerName: 'my-eventlistener'
+  }
+};
+const intl = createIntl({
+  locale: 'en',
+  defaultLocale: 'en'
+});
+const props = {
+  fetchEventListener: () => Promise.resolve(eventListener),
+  eventListener,
+  match,
+  intl
+};
+
+storiesOf('EventListenerContainer', module)
+  .add('default', () => (
+    <Router history={history}>
+      <IntlProvider locale="en" defaultLocale="en" messages={{}}>
+        <EventListenerContainer {...props} />
+      </IntlProvider>
+    </Router>
+  ))
+  .add('no triggers', () => (
+    <Router history={history}>
+      <IntlProvider locale="en" defaultLocale="en" messages={{}}>
+        <EventListenerContainer
+          {...props}
+          eventListener={{
+            ...eventListener,
+            spec: { ...eventListener.spec, triggers: [] }
+          }}
+        />
+      </IntlProvider>
+    </Router>
+  ))
+  .add('no serviceAccount', () => (
+    <Router history={history}>
+      <IntlProvider locale="en" defaultLocale="en" messages={{}}>
+        <EventListenerContainer
+          {...props}
+          eventListener={{
+            ...eventListener,
+            spec: { ...eventListener.spec, serviceAccountName: undefined }
+          }}
+        />
+      </IntlProvider>
+    </Router>
+  ))
+  .add('no service type', () => (
+    <Router history={history}>
+      <IntlProvider locale="en" defaultLocale="en" messages={{}}>
+        <EventListenerContainer
+          {...props}
+          eventListener={{
+            ...eventListener,
+            spec: { ...eventListener.spec, serviceType: undefined }
+          }}
+        />
+      </IntlProvider>
+    </Router>
+  ));
diff --git a/src/containers/EventListener/EventListener.test.js b/src/containers/EventListener/EventListener.test.js
index 18fa9ccea6..799cc9d745 100644
--- a/src/containers/EventListener/EventListener.test.js
+++ b/src/containers/EventListener/EventListener.test.js
@@ -40,80 +40,196 @@ const fakeEventListenerWithLabels = {
     }
   },
   spec: {
+    serviceType: 'NodePort',
+    serviceAccountName: 'my-serviceaccount',
     triggers: [
       {
-        binding: {
+        name: 'my-trigger-0',
+        bindings: [
+          {
+            apiversion: 'v1alpha1',
+            name: 'my-triggerbinding-0'
+          }
+        ],
+        template: {
           apiversion: 'v1alpha1',
-          name: 'simple-pipeline-push-binding'
+          name: 'my-triggertemplate-0'
         },
+        interceptors: [
+          {
+            cel: { filter: 'cel-filter-0' }
+          }
+        ]
+      },
+      {
+        name: 'my-trigger-1',
+        bindings: [
+          {
+            apiversion: 'v1alpha1',
+            name: 'my-triggerbinding-1'
+          }
+        ],
         template: {
           apiversion: 'v1alpha1',
-          name: 'simple-pipeline-template'
+          name: 'my-triggertemplate-1'
         },
-        interceptor: {
-          header: [
-            {
-              name: 'Wext-Trigger-Name',
-              value: 'mywebhook1-tekton-pipelines-push-event'
-            },
-            {
-              name: 'Wext-Repository-Url',
-              value: 'https://github.com/myorg/myrepo'
-            },
-            {
-              name: 'Wext-Incoming-Event',
-              value: 'push'
-            },
-            {
-              name: 'Wext-Secret-Name',
-              value: 'mytoken'
-            }
-          ],
-          objectRef: {
-            apiVersion: 'v1',
-            kind: 'Service',
-            name: 'tekton-webhooks-extension-validator',
-            namespace: 'tekton-pipelines'
+        interceptors: [
+          {
+            cel: { filter: 'cel-filter-1' }
+          }
+        ]
+      },
+      {
+        name: 'my-trigger-2',
+        bindings: [
+          {
+            apiversion: 'v1alpha1',
+            name: 'my-triggerbinding-2'
           }
-        }
+        ],
+        template: {
+          apiversion: 'v1alpha1',
+          name: 'my-triggertemplate-2'
+        },
+        interceptors: [
+          {
+            cel: { filter: 'cel-filter-2' }
+          }
+        ]
       }
     ]
   }
 };
 
+const match = {
+  params: {
+    eventListenerName: 'event-listener-with-labels'
+  }
+};
+
+const middleware = [thunk];
+const mockStore = configureStore(middleware);
+
+const testStore = mockStore({
+  namespaces: {
+    selected: 'tekton-pipelines'
+  },
+  eventListeners: {
+    byId: 'event-listener-with-labels',
+    byNamespace: { default: 'tekton-pipelines' },
+    errorMessage: null,
+    isFetching: false
+  }
+});
+
 it('EventListener displays with formatted labels', async () => {
-  const match = {
-    params: {
-      eventListenerName: 'event-listener-with-labels'
+  const { queryByText, getByText } = renderWithRouter(
+    <Provider store={testStore}>
+      <EventListenerContainer
+        intl={intl}
+        match={match}
+        error={null}
+        fetchEventListener={() => Promise.resolve(fakeEventListenerWithLabels)}
+        eventListener={fakeEventListenerWithLabels}
+      />
+    </Provider>
+  );
+
+  await waitForElement(() => getByText('event-listener-with-labels'));
+  expect(queryByText(/Namespace/i)).toBeTruthy();
+  expect(queryByText(/tekton-pipelines/i)).toBeTruthy();
+  expect(queryByText(/Labels/i)).toBeTruthy();
+  expect(queryByText(/foo: bar/i)).toBeTruthy();
+  expect(queryByText(/bar: baz/i)).toBeTruthy();
+  expect(queryByText(/Service Account/i)).toBeTruthy();
+  expect(queryByText(/my-serviceaccount/i)).toBeTruthy();
+  expect(queryByText(/Service Type/i)).toBeTruthy();
+  expect(queryByText(/NodePort/i)).toBeTruthy();
+  // Check Trigger 0
+  expect(queryByText(/my-trigger-0/i)).toBeTruthy();
+  expect(queryByText(/my-triggerbinding-0/i)).toBeTruthy();
+  expect(queryByText(/my-triggertemplate-0/i)).toBeTruthy();
+  expect(queryByText(/cel-filter-0/i)).toBeTruthy();
+  // Check Trigger 1
+  expect(queryByText(/my-trigger-1/i)).toBeTruthy();
+  expect(queryByText(/my-triggerbinding-1/i)).toBeTruthy();
+  expect(queryByText(/my-triggertemplate-1/i)).toBeTruthy();
+  expect(queryByText(/cel-filter-1/i)).toBeTruthy();
+  // Check Trigger 2
+  expect(queryByText(/my-trigger-2/i)).toBeTruthy();
+  expect(queryByText(/my-triggerbinding-2/i)).toBeTruthy();
+  expect(queryByText(/my-triggertemplate-2/i)).toBeTruthy();
+  expect(queryByText(/cel-filter-2/i)).toBeTruthy();
+});
+
+it('EventListener handles no serviceAccountName', async () => {
+  const eventListener = {
+    ...fakeEventListenerWithLabels,
+    spec: {
+      ...fakeEventListenerWithLabels.spec,
+      serviceAccountName: undefined
     }
   };
+  const { queryByText, getByText } = renderWithRouter(
+    <Provider store={testStore}>
+      <EventListenerContainer
+        intl={intl}
+        match={match}
+        error={null}
+        fetchEventListener={() => Promise.resolve(eventListener)}
+        eventListener={eventListener}
+      />
+    </Provider>
+  );
 
-  const middleware = [thunk];
-  const mockStore = configureStore(middleware);
+  await waitForElement(() => getByText('event-listener-with-labels'));
+  expect(queryByText(/Service Account/i)).toBeFalsy();
+});
 
-  const testStore = mockStore({
-    namespaces: {
-      selected: 'tekton-pipelines'
-    },
-    eventListeners: {
-      byId: 'event-listener-with-labels',
-      byNamespace: { default: 'tekton-pipelines' },
-      errorMessage: null,
-      isFetching: false
+it('EventListener handles no service type', async () => {
+  const eventListener = {
+    ...fakeEventListenerWithLabels,
+    spec: {
+      ...fakeEventListenerWithLabels.spec,
+      serviceType: undefined
     }
-  });
+  };
+  const { queryByText, getByText } = renderWithRouter(
+    <Provider store={testStore}>
+      <EventListenerContainer
+        intl={intl}
+        match={match}
+        error={null}
+        fetchEventListener={() => Promise.resolve(eventListener)}
+        eventListener={eventListener}
+      />
+    </Provider>
+  );
 
-  const { getByText } = renderWithRouter(
+  await waitForElement(() => getByText('event-listener-with-labels'));
+  expect(queryByText(/Service Type/i)).toBeFalsy();
+});
+
+it('EventListener handles no triggers', async () => {
+  const eventListener = {
+    ...fakeEventListenerWithLabels,
+    spec: {
+      ...fakeEventListenerWithLabels.spec,
+      triggers: []
+    }
+  };
+  const { queryByText, getByText } = renderWithRouter(
     <Provider store={testStore}>
       <EventListenerContainer
         intl={intl}
         match={match}
         error={null}
-        fetchEventListener={() => Promise.resolve(fakeEventListenerWithLabels)}
-        eventListener={fakeEventListenerWithLabels}
+        fetchEventListener={() => Promise.resolve(eventListener)}
+        eventListener={eventListener}
       />
     </Provider>
   );
 
   await waitForElement(() => getByText('event-listener-with-labels'));
+  expect(queryByText(/Trigger/i)).toBeFalsy();
 });
diff --git a/src/containers/TriggerBinding/TriggerBinding.js b/src/containers/TriggerBinding/TriggerBinding.js
index 0a3a2304ae..bf67f85cb9 100644
--- a/src/containers/TriggerBinding/TriggerBinding.js
+++ b/src/containers/TriggerBinding/TriggerBinding.js
@@ -157,45 +157,47 @@ export /* istanbul ignore next */ class TriggerBindingContainer extends Componen
             })}
           >
             <div className="details">
-              <p>
-                <span>
-                  {intl.formatMessage({
-                    id: 'dashboard.metadata.dateCreated',
-                    defaultMessage: 'Date Created:'
-                  })}
-                </span>
-                <FormattedDate
-                  date={triggerBinding.metadata.creationTimestamp}
-                  relative
-                />
-              </p>
-              <p>
-                <span>
-                  {intl.formatMessage({
-                    id: 'dashboard.metadata.labels',
-                    defaultMessage: 'Labels:'
-                  })}
-                </span>
-                {formattedLabelsToRender.length === 0
-                  ? intl.formatMessage({
-                      id: 'dashboard.metadata.none',
-                      defaultMessage: 'None'
-                    })
-                  : formattedLabelsToRender.map(label => (
-                      <Tag type="blue" key={label}>
-                        {label}
-                      </Tag>
-                    ))}
-              </p>
-              <p>
-                <span>
-                  {intl.formatMessage({
-                    id: 'dashboard.metadata.namespace',
-                    defaultMessage: 'Namespace:'
-                  })}
-                </span>
-                {triggerBinding.metadata.namespace}
-              </p>
+              <div className="triggers--detail-block">
+                <p>
+                  <span>
+                    {intl.formatMessage({
+                      id: 'dashboard.metadata.dateCreated',
+                      defaultMessage: 'Date Created:'
+                    })}
+                  </span>
+                  <FormattedDate
+                    date={triggerBinding.metadata.creationTimestamp}
+                    relative
+                  />
+                </p>
+                <p>
+                  <span>
+                    {intl.formatMessage({
+                      id: 'dashboard.metadata.labels',
+                      defaultMessage: 'Labels:'
+                    })}
+                  </span>
+                  {formattedLabelsToRender.length === 0
+                    ? intl.formatMessage({
+                        id: 'dashboard.metadata.none',
+                        defaultMessage: 'None'
+                      })
+                    : formattedLabelsToRender.map(label => (
+                        <Tag type="blue" key={label}>
+                          {label}
+                        </Tag>
+                      ))}
+                </p>
+                <p>
+                  <span>
+                    {intl.formatMessage({
+                      id: 'dashboard.metadata.namespace',
+                      defaultMessage: 'Namespace:'
+                    })}
+                  </span>
+                  {triggerBinding.metadata.namespace}
+                </p>
+              </div>
               <Table
                 title={intl.formatMessage({
                   id: 'dashboard.parameters.title',
diff --git a/src/containers/TriggerTemplate/TriggerTemplate.js b/src/containers/TriggerTemplate/TriggerTemplate.js
index 948f14c8d8..7c22163a9a 100644
--- a/src/containers/TriggerTemplate/TriggerTemplate.js
+++ b/src/containers/TriggerTemplate/TriggerTemplate.js
@@ -187,45 +187,47 @@ export /* istanbul ignore next */ class TriggerTemplateContainer extends Compone
             })}
           >
             <div className="details">
-              <p>
-                <span>
-                  {intl.formatMessage({
-                    id: 'dashboard.metadata.dateCreated',
-                    defaultMessage: 'Date Created:'
-                  })}
-                </span>
-                <FormattedDate
-                  date={triggerTemplate.metadata.creationTimestamp}
-                  relative
-                />
-              </p>
-              <p>
-                <span>
-                  {intl.formatMessage({
-                    id: 'dashboard.metadata.labels',
-                    defaultMessage: 'Labels:'
-                  })}
-                </span>
-                {formattedLabelsToRender.length === 0
-                  ? intl.formatMessage({
-                      id: 'dashboard.metadata.none',
-                      defaultMessage: 'None'
-                    })
-                  : formattedLabelsToRender.map(label => (
-                      <Tag type="blue" key={label}>
-                        {label}
-                      </Tag>
-                    ))}
-              </p>
-              <p>
-                <span>
-                  {intl.formatMessage({
-                    id: 'dashboard.metadata.namespace',
-                    defaultMessage: 'Namespace:'
-                  })}
-                </span>
-                {triggerTemplate.metadata.namespace}
-              </p>
+              <div className="triggers--detail-block">
+                <p>
+                  <span>
+                    {intl.formatMessage({
+                      id: 'dashboard.metadata.dateCreated',
+                      defaultMessage: 'Date Created:'
+                    })}
+                  </span>
+                  <FormattedDate
+                    date={triggerTemplate.metadata.creationTimestamp}
+                    relative
+                  />
+                </p>
+                <p>
+                  <span>
+                    {intl.formatMessage({
+                      id: 'dashboard.metadata.labels',
+                      defaultMessage: 'Labels:'
+                    })}
+                  </span>
+                  {formattedLabelsToRender.length === 0
+                    ? intl.formatMessage({
+                        id: 'dashboard.metadata.none',
+                        defaultMessage: 'None'
+                      })
+                    : formattedLabelsToRender.map(label => (
+                        <Tag type="blue" key={label}>
+                          {label}
+                        </Tag>
+                      ))}
+                </p>
+                <p>
+                  <span>
+                    {intl.formatMessage({
+                      id: 'dashboard.metadata.namespace',
+                      defaultMessage: 'Namespace:'
+                    })}
+                  </span>
+                  {triggerTemplate.metadata.namespace}
+                </p>
+              </div>
 
               <DashboardTable
                 title={intl.formatMessage({
diff --git a/src/nls/messages_en.json b/src/nls/messages_en.json
index f781e44631..901ef8823b 100644
--- a/src/nls/messages_en.json
+++ b/src/nls/messages_en.json
@@ -67,6 +67,7 @@
     "dashboard.errorBoundary.pageError": "Error loading page",
     "dashboard.eventListener.errorloading": "Error loading EventListener",
     "dashboard.eventListener.unavailable": "EventListener not available",
+    "dashboard.extension.error": "Error loading extension",
     "dashboard.extensions.errorLoading": "Error loading extensions",
     "dashboard.graph.pan": "Pan",
     "dashboard.graph.select": "Select",
@@ -81,13 +82,25 @@
     "dashboard.labelFilter.searchPlaceholder": "Input a label filter of the format labelKey:labelValue",
     "dashboard.labelFilter.syntaxMessage": "See the Kubernetes Label documentation for valid syntax",
     "dashboard.list.menu.tooltip": "Actions",
+    "dashboard.logo.alt": "Tekton logo",
+    "dashboard.logo.tooltip": "Meow",
     "dashboard.metadata.dateCreated": "Date Created:",
     "dashboard.metadata.labels": "Labels:",
     "dashboard.metadata.namespace": "Namespace:",
     "dashboard.metadata.none": "None",
+    "dashboard.metadata.serviceAccount": "Service Account:",
+    "dashboard.metadata.serviceType": "Service Type:",
     "dashboard.modal.cancelButton": "Cancel",
     "dashboard.notification.clear": "Clear Notification",
+    "dashboard.paramaters.title": "Parameters",
+    "dashboard.parameters.title": "Parameters",
     "dashboard.pipelineResource.createPipelineResourceTitle": "Create PipelineResource",
+    "dashboard.pipelineResource.errorLoading": "Error loading PipelineResource",
+    "dashboard.pipelineResource.failed": "Cannot load PipelineResource",
+    "dashboard.pipelineResource.failedSubtitle": "PipelineResource {pipelineResourceName} not found",
+    "dashboard.pipelineResource.fieldName": "Field Name",
+    "dashboard.pipelineResource.secretKey": "Secret Key",
+    "dashboard.pipelineResource.secretName": "Secret Name",
     "dashboard.pipelineResources.createSuccess": "Successfully created PipelineResource",
     "dashboard.pipelineResources.error": "Error loading PipelineResources",
     "dashboard.pipelineResourcesModal.heading": "Create PipelineResource",
@@ -104,6 +117,10 @@
     "dashboard.pipelineRuns.createSuccess": "Successfully created PipelineRun",
     "dashboard.pipelineRuns.error": "Error loading PipelineRuns",
     "dashboard.pipelineRuns.status.pending": "Pending",
+    "dashboard.pipelines.errorLoading": "Error loading Pipelines",
+    "dashboard.rerun.error": "An error occurred when rerunning this PipelineRun: check the dashboard and extension pod logs for details. Status code: ${statusCode}",
+    "dashboard.rerun.internalServerError": "An internal server error occurred when rerunning this PipelineRun: check the dashboard and extension pod logs for details",
+    "dashboard.rerun.success": "Rerun successful",
     "dashboard.rerunPipelineRun.actionText": "Rerun",
     "dashboard.resource.detailsTab": "Details",
     "dashboard.secrets.createSuccess": "Secret created successfully",
@@ -122,16 +139,20 @@
     "dashboard.serviceAccount.noSecrets": "No Secrets found for this ServiceAccount.",
     "dashboard.serviceAccount.secretsTableTitle": "Secrets",
     "dashboard.serviceAccount.unavailable": "ServiceAccount not available",
+    "dashboard.sideNav.importResources": "Import Tekton resources",
     "dashboard.sideNav.tektonResources": "Tekton resources",
     "dashboard.step.containerStatus": "Container status",
     "dashboard.step.definitionNotAvailable": "description: step definition not available",
     "dashboard.step.statusNotAvailable": "No status available",
     "dashboard.step.stepDefinition": "Step definition",
+    "dashboard.stepDefinition.inputResources": "Input Resources",
+    "dashboard.stepDefinition.outputResources": "Output Resources",
     "dashboard.tableHeader.annotations": "Annotations",
     "dashboard.tableHeader.createdTime": "Created",
     "dashboard.tableHeader.duration": "Duration",
     "dashboard.tableHeader.name": "Name",
     "dashboard.tableHeader.namespace": "Namespace",
+    "dashboard.tableHeader.paramName": "Param Name",
     "dashboard.tableHeader.pipeline": "Pipeline",
     "dashboard.tableHeader.serviceAccounts": "Service Accounts",
     "dashboard.tableHeader.status": "Status",
@@ -139,6 +160,7 @@
     "dashboard.tableHeader.type": "Type",
     "dashboard.tableHeader.username": "Username",
     "dashboard.tableHeader.value": "Value",
+    "dashboard.taskRun.errorLoading": "Error loading TaskRun",
     "dashboard.taskRun.logs": "Logs",
     "dashboard.taskRun.noTaskRuns": "No TaskRuns found for this PipelineRun yet…",
     "dashboard.taskRun.status": "Status",
@@ -148,21 +170,29 @@
     "dashboard.taskRun.status.running": "Running",
     "dashboard.taskRun.status.succeeded": "Completed",
     "dashboard.taskRun.status.waiting": "Waiting",
+    "dashboard.taskRun.unavailable": "TaskRun not available",
+    "dashboard.taskRuns.errorLoading": "Error loading TaskRuns",
     "dashboard.taskRuns.status.pending": "Pending",
+    "dashboard.tasks.errorLoading": "Error loading Tasks",
     "dashboard.trigger.noHeaders": "No headers found for this interceptor.",
-    "dashboard.trigger.noParams": "No parameters found for this Trigger.",
     "dashboard.triggerBinding.errorloading": "Error loading TriggerBinding",
     "dashboard.triggerBinding.noParams": "No parameters found for this TriggerBinding.",
-    "dashboard.triggerBinding.parametersTableTitle": "Parameters",
     "dashboard.triggerBinding.unavailable": "TriggerBinding not available",
-    "dashboard.triggerDetails.interceptorHeaders": "Headers",
-    "dashboard.triggerDetails.interceptorName": "Interceptor: ",
-    "dashboard.triggerDetails.triggerParameters": "Parameters",
+    "dashboard.triggerDetails.celInterceptorFilter": "Filter: ",
+    "dashboard.triggerDetails.interceptorHeader": "Header:",
+    "dashboard.triggerDetails.interceptorName": "Name:",
+    "dashboard.triggerDetails.interceptorNamespace": "Namespace:",
+    "dashboard.triggerDetails.interceptorTitle": "{interceptorNumber}. ({interceptorType}) {interceptorName}",
+    "dashboard.triggerDetails.interceptors": "Interceptors:",
+    "dashboard.triggerDetails.triggerBindings": "TriggerBindings:",
+    "dashboard.triggerDetails.triggerTemplate": "TriggerTemplate:",
+    "dashboard.triggerDetails.webhookInterceptorSecret": "Secret:",
+    "dashboard.triggerDetails.webhookInterceptorSecretKey": "Key:",
+    "dashboard.triggerDetails.webhookInterceptorService": "Service:",
     "dashboard.triggerTemplate.default": "Default",
     "dashboard.triggerTemplate.description": "Description",
     "dashboard.triggerTemplate.errorloading": "Error loading TriggerTemplate",
     "dashboard.triggerTemplate.noParams": "No parameters found for this template.",
-    "dashboard.triggerTemplate.paramaters": "Parameters",
     "dashboard.triggerTemplate.resourceNameHeader": "Resource name to create",
     "dashboard.triggerTemplate.resourceTemplates": "Resource Templates",
     "dashboard.triggerTemplate.unavailable": "TriggerTemplate not available",
diff --git a/src/scss/Triggers.scss b/src/scss/Triggers.scss
index 39c9f4d82d..db155cab73 100644
--- a/src/scss/Triggers.scss
+++ b/src/scss/Triggers.scss
@@ -31,3 +31,9 @@ limitations under the License.
     margin-top: $spacing-03
   }
 }
+
+.triggers--detail-block {
+  margin-bottom: $layout-01;
+  padding: $layout-01;
+  background-color: $ui-02;
+}
\ No newline at end of file