EventListener details paneling first pass

[ncskier]

This work is under epic https://github.com/tektoncd/dashboard/issues/509

Expected Behavior

I expect to be able to view the details of an EventListener resource in the Dashboard.

This panel should have two tabs, Details and YAML.

YAML view

The YAML view should display the YAML definition of the EventListener resource (kubectl get eventlistener EL_NAME -oyaml). The YAML should be formatted like a code snippet.

Here is the latest wireframe from #509 for the YAML view.

Details view

The Details view should be a nicely formatted representation of the important information in the EventListener's YAML. The Details view must include the following information:

• Labels
• ServiceAccount
• list of triggers each with the following:
  • name
  • TriggerTemplate (this should be a hyperlink to the TriggerTemplate details view)
  • TriggerBinding (this should be a hyperlink to the TriggerBinding details view)
  • list of params each with the following
  • name
  • value
  • Interceptor
  • ObjectRef
    • name
    • kind
    • namespace
  • list of headers each with the following:
    • name
    • value

Here is the latest wireframe from #509 for the Details view.

Actual Behavior

We have no paneling for viewing EventListener resource details.

Additional Info

• EventListeners README: eventlisteners.md
• EventListener type definition: event_listener_types.yaml
• EventListener example: eventlistener.yaml

[mii-w]

/assign

[mii-w]

[mii-w]

[mii-w]

Above wires were based off discussion with design team- another variation to consider

[ncskier]

@mii-w the split-window is interesting. Just to clarify, when the user selects another Trigger from the accordion list, will the right pane with Parameters and Interceptor change its content? Each Trigger has its own Interceptor & Parameters, so the YAML split-window view doesn't really make sense to me; I don't think we would want the Parameters and Interceptor window to still be there.

[kimholmes]

Agree with @ncskier. And for the layout, it will come out in the wash when we hand these to Carrie but we need to stick with the existing pattern re: the YAML should appear in a separate tab than the Details etc. Also, per @ncskier 's comment above, the full YAML is for the Event Listener itself, not each trigger (which should have a snippit of the YAML), correct? Making sure we're on the same page.

[mii-w]

yeah, I can see why it wouldn't make sense, because the Parameters and Interceptor are specific to a Trigger. I also flipped the order, Interceptor on top (to keep layout kind of consistent with resource templates and Parameters)

In regards to displaying the YAML, I think we should keep it consistent throughout all.

[ncskier]

To avoid confusion between overlapping implementation and design iterations, I've created issue #726 to track the design work, and this issue (#671) will only handle the "first pass" implementation.

If you assign yourself to this issue, please coordinate with @mii-w about which design to implement for the "first pass."

[a-roberts]

We want to start working on our 0.3 release for Triggers, I reckon the last wireframe looks good apart from the interceptor panel which confused me.

I propose interceptor information should display:

• the image it's using
• the header names and values

Here's my full EventListener for a working set up with one webhook:

apiVersion: v1
items:
- apiVersion: tekton.dev/v1alpha1
  kind: EventListener
  metadata:
    creationTimestamp: 2019-11-26T11:20:47Z
    generation: 1
    name: tekton-webhooks-eventlistener
    namespace: tekton-pipelines
    resourceVersion: "687631"
    selfLink: /apis/tekton.dev/v1alpha1/namespaces/tekton-pipelines/eventlisteners/tekton-webhooks-eventlistener
    uid: cb80cfe6-103e-11ea-ae12-025000000001
  spec:
    serviceAccountName: tekton-webhooks-extension-eventlistener
    triggers:
    - binding:
        apiversion: v1alpha1
        name: simple-pipeline-push-binding
      interceptor:
        header:
        - name: Wext-Trigger-Name
          value: adam1-tekton-pipelines-push-event
        - name: Wext-Repository-Url
          value: https://github.ibm.com/AROBERTS/devops-world-example
        - 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: adam1-tekton-pipelines-push-event
      params:
      - name: webhooks-tekton-release-name
        value: devops-world-example
      - name: webhooks-tekton-target-namespace
        value: tekton-pipelines
      - name: webhooks-tekton-service-account
        value: tekton-dashboard
      - name: webhooks-tekton-git-server
        value: github.ibm.com
      - name: webhooks-tekton-git-org
        value: aroberts
      - name: webhooks-tekton-git-repo
        value: devops-world-example
      - name: webhooks-tekton-docker-registry
        value: adamroberts
      template:
        apiversion: v1alpha1
        name: simple-pipeline-template
    - binding:
        apiversion: v1alpha1
        name: simple-pipeline-pullrequest-binding
      interceptor:
        header:
        - name: Wext-Trigger-Name
          value: adam1-tekton-pipelines-pullrequest-event
        - name: Wext-Repository-Url
          value: https://github.ibm.com/AROBERTS/devops-world-example
        - name: Wext-Incoming-Event
          value: pull_request
        - name: Wext-Secret-Name
          value: mytoken
        - name: Wext-Incoming-Actions
          value: opened,reopened,synchronize
        objectRef:
          apiVersion: v1
          kind: Service
          name: tekton-webhooks-extension-validator
          namespace: tekton-pipelines
      name: adam1-tekton-pipelines-pullrequest-event
      params:
      - name: webhooks-tekton-release-name
        value: devops-world-example
      - name: webhooks-tekton-target-namespace
        value: tekton-pipelines
      - name: webhooks-tekton-service-account
        value: tekton-dashboard
      - name: webhooks-tekton-git-server
        value: github.ibm.com
      - name: webhooks-tekton-git-org
        value: aroberts
      - name: webhooks-tekton-git-repo
        value: devops-world-example
      - name: webhooks-tekton-docker-registry
        value: adamroberts
      template:
        apiversion: v1alpha1
        name: simple-pipeline-template
    - binding:
        apiversion: v1alpha1
        name: monitor-task-binding
      interceptor:
        header:
        - name: Wext-Trigger-Name
          value: github.ibm.com/aroberts/devops-world-example
        - name: Wext-Repository-Url
          value: https://github.ibm.com/AROBERTS/devops-world-example
        - name: Wext-Incoming-Event
          value: pull_request
        - name: Wext-Secret-Name
          value: mytoken
        - name: Wext-Incoming-Actions
          value: opened,reopened,synchronize
        objectRef:
          apiVersion: v1
          kind: Service
          name: tekton-webhooks-extension-validator
          namespace: tekton-pipelines
      name: github.ibm.com/aroberts/devops-world-example
      params:
      - name: commentsuccess
        value: Success
      - name: commentfailure
        value: Failed
      - name: commenttimeout
        value: Unknown
      - name: gitsecretname
        value: mytoken
      - name: gitsecretkeyname
        value: accessToken
      - name: dashboardurl
        value: http://tekton-dashboard:9097/v1/namespaces/tekton-pipelines/endpoints
      template:
        apiversion: v1alpha1
        name: monitor-task-template
  status:
    address:
      hostname: el-tekton-webhooks-eventlistener.tekton-pipelines.svc.cluster.local
    conditions:
    - lastTransitionTime: 2019-11-26T11:20:52Z
      message: Deployment has minimum availability.
      reason: MinimumReplicasAvailable
      status: "True"
      type: Available
    - lastTransitionTime: 2019-11-26T11:20:47Z
      message: Deployment exists
      status: "True"
      type: Deployment
    - lastTransitionTime: 2019-11-26T11:20:52Z
      message: ReplicaSet "el-tekton-webhooks-eventlistener-7b568d968" has successfully
        progressed.
      reason: NewReplicaSetAvailable
      status: "True"
      type: Progressing
    - lastTransitionTime: 2019-11-26T11:20:47Z
      message: Service exists
      status: "True"
      type: Service
    configuration:
      generatedName: el-tekton-webhooks-eventlistener
kind: List
metadata:
  resourceVersion: ""
  selfLink: ""

[mii-w]

[a-roberts]

Thanks @mii-w, so for anyone who picks this up we think the above would be an awesome thing to implement first

Update: it's me, hello

[a-roberts]

PR https://github.com/tektoncd/dashboard/pull/784

[a-roberts]

@AlanGreene has approved my PR but I've just added some more feedback in response to his and I'm done for the Christmas break now, thanks all - let's get this in (and I'd like to fix the flashing datatable on hover) later 😄

[a-roberts]

Merged, it's not perfect (initial approach was with accordions and they were awkward to use and style, then nested expandable datatables but this introduced horrible flashing behaviour and it's not something Carbon recommend or support) - either way we now have all the details pages, cheers all ⛱