Implement Logs column and buttons for k8s dashboard
What does this MR do and why?
This MR adds links for the Kubernetes pods logs page to the Kubernetes overview on the Environment page:
- to the pods table
- to the pods details drawer (available when clicking on a pods table row)
A pod can have one or multiple containers. The logs are available per container. We render a button to view logs if the pod has a single container. If the pod has multiple containers, we render a dropdown to select a container. In the details drawer, we list all containers.
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Screenshots are required for UI changes, and strongly recommended for all other merge requests.
| Before | After |
|---|---|
 |
 |
 |
 |
 |
 |
How to set up and validate locally
Easy way to verify without Kubernetes agent setup
- Visit the Environments page at Project -> Operate -> Environments page
- Create an environment
- Visit the Environment details page
- Apply patch ( copy and
pbpaste | git apply)
Click to expand patch
diff --git a/app/assets/javascripts/environments/environment_details/components/kubernetes/kubernetes_logs.vue b/app/assets/javascripts/environments/environment_details/components/kubernetes/kubernetes_logs.vue
index 39a42e570b6d..36cbb5d4328e 100644
--- a/app/assets/javascripts/environments/environment_details/components/kubernetes/kubernetes_logs.vue
+++ b/app/assets/javascripts/environments/environment_details/components/kubernetes/kubernetes_logs.vue
@@ -84,6 +84,7 @@ export default {
return this.k8sLogs?.error?.message || this.environmentError?.message;
},
gitlabAgentId() {
+ return '1';
return (
this.environment?.clusterAgent?.id &&
getIdFromGraphQLId(this.environment.clusterAgent.id).toString()
diff --git a/app/assets/javascripts/environments/environment_details/index.vue b/app/assets/javascripts/environments/environment_details/index.vue
index f87723b33e9a..a0a4f8217406 100644
--- a/app/assets/javascripts/environments/environment_details/index.vue
+++ b/app/assets/javascripts/environments/environment_details/index.vue
@@ -46,7 +46,32 @@ export default {
};
},
update(data) {
- return data?.project?.environment;
+ const result = data?.project?.environment;
+ if (!result.clusterAgent) {
+ const clusterAgent = {
+ __typename: 'ClusterAgent',
+ id: 'gid://gitlab/Clusters::Agent/123',
+ name: 'my-agent',
+ webPath: '/gitlab-org/cluster-integration/-/cluster_agents/my-agent',
+ tokens: {
+ __typename: 'ClusterAgentTokenConnection',
+ nodes: [
+ {
+ __typename: 'ClusterAgentToken',
+ id: 'gid://gitlab/Clusters::AgentToken/123',
+ lastUsedAt: '2023-05-30T11:47:56Z',
+ },
+ ],
+ },
+ };
+
+ return {
+ ...result,
+ clusterAgent,
+ };
+ }
+
+ return result;
},
result() {
this.updateCurrentTab();
diff --git a/app/assets/javascripts/environments/graphql/resolvers/kubernetes/k8s_logs.js b/app/assets/javascripts/environments/graphql/resolvers/kubernetes/k8s_logs.js
index fe1ffc388301..d48c0a22c730 100644
--- a/app/assets/javascripts/environments/graphql/resolvers/kubernetes/k8s_logs.js
+++ b/app/assets/javascripts/environments/graphql/resolvers/kubernetes/k8s_logs.js
@@ -58,26 +58,40 @@ export const k8sLogs = (_, { configuration, namespace, podName, containerName },
const watchQuery = { follow: true };
if (containerName) watchQuery.container = containerName;
- watchApi
- .subscribeToStream(watchPath, watchQuery)
- .then((watcher) => {
- watcher.on(EVENT_PLAIN_TEXT, (data) => {
- const logsData = cacheWrapper.readLogsData();
+ const testLogsData = [
+ {
+ id: 1,
+ content:
+ '{"level":"info","ts":"2024-06-10T11:58:54.533Z","logger":"controller-runtime.metrics","msg":"Metrics server is starting to listen","addr":":8080"}',
+ },
+ {
+ id: 2,
+ content:
+ '{"level":"info","ts":"2024-06-10T11:58:54.534Z","logger":"setup","msg":"starting manager"}',
+ },
+ ];
+ cacheWrapper.writeLogsData(testLogsData);
- const updatedLogsData = [...logsData, { id: logsData.length + 1, content: data }];
+ // watchApi
+ // .subscribeToStream(watchPath, watchQuery)
+ // .then((watcher) => {
+ // watcher.on(EVENT_PLAIN_TEXT, (data) => {
+ // const logsData = cacheWrapper.readLogsData();
- cacheWrapper.writeLogsData(updatedLogsData);
- });
+ // const updatedLogsData = [...logsData, { id: logsData.length + 1, content: data }];
- watcher.on(EVENT_TIMEOUT, (err) => {
- cacheWrapper.writeErrorData(err);
- });
+ // cacheWrapper.writeLogsData(updatedLogsData);
+ // });
- watcher.on(EVENT_ERROR, (err) => {
- cacheWrapper.writeErrorData(err);
- });
- })
- .catch((err) => {
- cacheWrapper.writeErrorData(err);
- });
+ // watcher.on(EVENT_TIMEOUT, (err) => {
+ // cacheWrapper.writeErrorData(err);
+ // });
+
+ // watcher.on(EVENT_ERROR, (err) => {
+ // cacheWrapper.writeErrorData(err);
+ // });
+ // })
+ // .catch((err) => {
+ // cacheWrapper.writeErrorData(err);
+ // });
};
diff --git a/app/assets/javascripts/kubernetes_dashboard/graphql/helpers/resolver_helpers.js b/app/assets/javascripts/kubernetes_dashboard/graphql/helpers/resolver_helpers.js
index 95acd043025d..3d30b3108d65 100644
--- a/app/assets/javascripts/kubernetes_dashboard/graphql/helpers/resolver_helpers.js
+++ b/app/assets/javascripts/kubernetes_dashboard/graphql/helpers/resolver_helpers.js
@@ -123,6 +123,205 @@ export const getK8sPods = ({
? coreV1Api.listCoreV1NamespacedPod({ namespace })
: coreV1Api.listCoreV1PodForAllNamespaces();
+ return [
+ {
+ status: {
+ phase: 'Succeeded',
+ },
+ spec: {
+ containers: [
+ {
+ name: 'helm',
+ },
+ ],
+ },
+ metadata: {
+ annotations: {
+ 'helmcharts.helm.cattle.io/configHash':
+ 'SHA256=E3B0C44298FC1C149AFBF4C8996FB92427AE41E4649B934CA495991B7852B855',
+ },
+ creationTimestamp: '2023-07-31T11:50:17.000Z',
+ labels: {
+ 'controller-uid': '6c03c7fc-663b-4054-8842-37196eeb708b',
+ 'helmcharts.helm.cattle.io/chart': 'traefik-crd',
+ 'job-name': 'helm-install-traefik-crd',
+ },
+ name: 'helm-install-traefik-crd-gsj56',
+ namespace: 'kube-system',
+ resourceVersion: '576',
+ uid: 'd58f5220-9b8f-403a-9051-530559891bd7',
+ },
+ __typename: 'LocalWorkloadItem',
+ },
+ {
+ status: {
+ phase: 'Succeeded',
+ },
+ spec: {
+ containers: [
+ {
+ name: 'helm',
+ },
+ ],
+ },
+ metadata: {
+ annotations: {
+ 'helmcharts.helm.cattle.io/configHash':
+ 'SHA256=1EF9AFCD934FEF498C2BA9787FC96FA76D94643B6A79486BF80DA848478FBAF0',
+ },
+ creationTimestamp: '2023-07-31T11:50:17.000Z',
+ labels: {
+ 'controller-uid': 'fa3d99b5-7137-4a36-b98e-bf8d9f7d1171',
+ 'helmcharts.helm.cattle.io/chart': 'traefik',
+ 'job-name': 'helm-install-traefik',
+ },
+ name: 'helm-install-traefik-csrck',
+ namespace: 'kube-system',
+ resourceVersion: '580',
+ uid: '4a25607b-91d6-4f5f-8e43-72f1f7445c4b',
+ },
+ __typename: 'LocalWorkloadItem',
+ },
+ {
+ status: {
+ phase: 'Succeeded',
+ },
+ spec: {
+ containers: [
+ {
+ name: 'local-path-provisioner',
+ },
+ ],
+ },
+ metadata: {
+ annotations: {},
+ creationTimestamp: '2023-07-31T11:50:17.000Z',
+ labels: {
+ app: 'local-path-provisioner',
+ 'pod-template-hash': '79f67d76f8',
+ },
+ name: 'local-path-provisioner-79f67d76f8-sl8jw',
+ namespace: 'kube-system',
+ resourceVersion: '23266248',
+ uid: '6c2c9ffb-f472-42f0-815c-11a266f8f2af',
+ },
+ __typename: 'LocalWorkloadItem',
+ },
+ {
+ status: {
+ phase: 'Running',
+ },
+ spec: {
+ containers: [
+ {
+ name: 'coredns',
+ },
+ ],
+ },
+ metadata: {
+ annotations: {},
+ creationTimestamp: '2023-07-31T11:50:17.000Z',
+ labels: {
+ 'k8s-app': 'kube-dns',
+ 'pod-template-hash': '597584b69b',
+ },
+ name: 'coredns-597584b69b-r6wbx',
+ namespace: 'kube-system',
+ resourceVersion: '23266286',
+ uid: '9143156d-44a0-4d22-a958-669d3d3ae96d',
+ },
+ __typename: 'LocalWorkloadItem',
+ },
+ {
+ status: {
+ phase: 'Running',
+ },
+ spec: {
+ containers: [
+ {
+ name: 'lb-tcp-80',
+ },
+ {
+ name: 'lb-tcp-443',
+ },
+ ],
+ },
+ metadata: {
+ annotations: {},
+ creationTimestamp: '2023-07-31T11:50:17.000Z',
+ labels: {
+ app: 'svclb-traefik-79ffb0a8',
+ 'controller-revision-hash': '767bb4755d',
+ 'pod-template-generation': '1',
+ 'svccontroller.k3s.cattle.io/svcname': 'traefik',
+ 'svccontroller.k3s.cattle.io/svcnamespace': 'kube-system',
+ },
+ name: 'svclb-traefik-79ffb0a8-cw5v5',
+ namespace: 'kube-system',
+ resourceVersion: '23266323',
+ uid: '23630529-6f71-40b5-9074-9fc0850ea813',
+ },
+ __typename: 'LocalWorkloadItem',
+ },
+ {
+ status: {
+ phase: 'Running',
+ },
+ spec: {
+ containers: [
+ {
+ name: 'traefik',
+ },
+ ],
+ },
+ metadata: {
+ annotations: {
+ 'prometheus.io/path': '/metrics',
+ 'prometheus.io/port': '9100',
+ 'prometheus.io/scrape': 'true',
+ },
+ creationTimestamp: '2023-07-31T11:50:17.000Z',
+ labels: {
+ 'app.kubernetes.io/instance': 'traefik-kube-system',
+ 'app.kubernetes.io/managed-by': 'Helm',
+ 'app.kubernetes.io/name': 'traefik',
+ 'helm.sh/chart': 'traefik-20.3.1_up20.3.0',
+ 'pod-template-hash': '66c46d954f',
+ },
+ name: 'traefik-66c46d954f-mdwwn',
+ namespace: 'kube-system',
+ resourceVersion: '23266369',
+ uid: '2a04dd82-809d-42a0-8439-e655bcf53056',
+ },
+ __typename: 'LocalWorkloadItem',
+ },
+ {
+ status: {
+ phase: 'Running',
+ },
+ spec: {
+ containers: [
+ {
+ name: 'metrics-server',
+ },
+ ],
+ },
+ metadata: {
+ annotations: {},
+ creationTimestamp: '2023-07-31T11:50:17.000Z',
+ labels: {
+ 'k8s-app': 'metrics-server',
+ 'pod-template-hash': '5f9f776df5',
+ },
+ name: 'metrics-server-5f9f776df5-4ts4p',
+ namespace: 'kube-system',
+ resourceVersion: '23266399',
+ uid: '847d09e2-d9c0-4a54-9e97-e3d5d273e5d6',
+ },
+ __typename: 'LocalWorkloadItem',
+ },
+ ];
+
return podsApi
.then((res) => {
const watchPath = buildWatchPath({ resource: 'pods', namespace });- Verify the
View logsbutton in the pods table. It should navigate tohttps://gdk.test:3443/<group-name>/<project-name>/-/environments/<environment-id>/k8s/namespace/<namespace-name>/pods/<pod-name>/logs?container=<container-name> - Click on a table row to verify the
Containerssection of the details drawer.
Note: You might see errors in the console and on the UI as the component will try to connect to a non-existent agent.
Verify using real data
Prerequisites:
- NGINX, loopback interface, and HTTPS set up on your GDK
- Docker instance
- KAS enabled on GDK (steps 1-2 from the guide).
-
Visit the Project -> Infrastructure -> Kubernetes clusters page and create an agent following the instructions from the modal.
- Select the "Connect a cluster" button
- The modal should pop up
- In the modal select "Select an agent or enter a name to create new"
- You probably won't have any configured agents to show up in the list, create a new one by typing the name of your choice
- The button should appear at the bottom of the list saying "Create agent:
<your-agent-name>" - Select the button and click "Register" in the next view.
- Save the token to use it in the next point.
-
Add the following configuration inside your project in
.gitlab/agents/<your-agent-name>/config.yamlfor the user_access agent:user_access: access_as: agent: {} projects: - id: <your-group>/<your-project-to-share-agent-with> -
Note that the shared agents should be connected to the cluster in order to appear in the list. Please follow points 3-8 from the guide and then the Deploy the GitLab Agent (agentk) with k3d section to create a local cluster and connect your agent with the cluster.
-
Visit Project -> Operate -> Environments
-
Create/Edit an environment using the UI
-
Select an agent from the dropdown in the Environments settings page and save the change.
-
Visit the Environments page and visit the environment details page for the environment that has an associated agent.
-
Verify the
View logsbutton in the pods table. It should navigate tohttps://gdk.test:3443/<group-name>/<project-name>/-/environments/<environment-id>/k8s/namespace/<namespace-name>/pods/<pod-name>/logs?container=<container-name> -
Click on a table row to verify the
Containerssection of the details drawer.
Related to #461013 (closed)
Edited by Anna Vovchenko