Environment logs and events streaming visualisation - Design
<!-- This template is a great use for issues that are feature::additions or technical tasks for larger issues.--> ### Release notes While GitLab offers pod list and details views since a few milestones, until now you still had to turn to 3rd party tools for more in-depth analysis of your workloads. GitLab now ships a log streaming view for pods and containers to allow you to quickly check and troubleshoot issues across your environments without leaving your application delivery tool. https://docs.gitlab.com/ee/ci/environments/kubernetes_dashboard.html ### Problem As part of the Kubernetes overview for the environments page effort, we want to allow the user to explore related logs and events. This issue is to create the UX for the logs and events. ### UX Proposal #### Environment Details View | Screenshot | | ------ | | ![Screenshot_2024-05-07_at_8.46.01_AM](/uploads/6d1a799cdb7e85a0b44c5644109d9717/Screenshot_2024-05-07_at_8.46.01_AM.png) | - Add a logs column to the pods table. - If a pod has one container, have a button that opens to the log. - If a pod has multiple containers, let the user select a container to view logs. [Full details can be found in the user flow.](https://gitlab.com/gitlab-org/gitlab/-/issues/391514/designs/View_Log_Flow.png) #### Details Drawer | Screenshot | | ------ | | ![Screenshot_2024-03-05_at_1.22.22_PM](/uploads/ddc717ae9fe752e7371892bfd876a840/Screenshot_2024-03-05_at_1.22.22_PM.png) | - Add a list of containers to the details view, with an open log button. [Full details can be found in the user flow.](https://gitlab.com/gitlab-org/gitlab/-/issues/391514/designs/View_Log_Flow.png) #### Streaming View | Screenshot | | ------ | | ![Screenshot_2024-03-05_at_1.24.39_PM](/uploads/7c730ff20dd589c6026856f4674cd26a/Screenshot_2024-03-05_at_1.24.39_PM.png) | - Add a new page for pod logs. URL: `https://gitlab.example.com/\\<project-path\\>/-/environments/\\<env id\\>//k8s/namespace/\\<namespace-name\\>/pod/\\<pod-name\\>/logs?container=<container-name>` [Full details can be found in the user flow.](https://gitlab.com/gitlab-org/gitlab/-/issues/391514/designs/View_Log_Flow.png) <!-- Label reminders Use the following resources to find the appropriate labels: - Use only one tier label choosing the lowest tier this is intended for - https://gitlab.com/gitlab-org/gitlab/-/labels - https://about.gitlab.com/handbook/product/categories/features/ --> ## Technical proposal ### API It seems we have everything to display k8s pods logs in the UI. The logs can be accesses by the following API request: ``` GET /-/k8s-proxy/api/v1/namespaces/<namespace>/pods/<pod-name>/log?follow=true GET /-/k8s-proxy/api/v1/namespaces/<namespace>/pods/<pod-name>/log?container=<container-name>&follow=true ``` Note that `follow=true` query parameter uses the same long polling connection as `?watch=true` for getting k8s resource status and thus will be terminated in about 5 minutes. We can get container name from pods response: `data.items[0].spec.containers` ### UI We can draw inspiration from [JobLog](https://gitlab.com/gitlab-org/gitlab/-/blob/2827026adbf885bfe5369a1c6b3dc14f7a999614/app/assets/javascripts/ci/job_details/components/log/log.vue) component. Maybe we can even extract some common parts for it. Since I presume, that going from an overview view to a logs view and back could be a common user journey, we should make sure we are able to navigate to the logs view without a full page refresh. We already have a vue router integrated for environment details page, so that should not be a problem. ### Work structuring I'd suggest this issue would be implemented in separate MRs: 1. Implementing the logs view page 2. Implementing the `Logs` column and `View logs` buttons with container selection (can potentially be split in two MRs as well, adding container selection in a follow up issue
epic