feat/cyclops-ui: Add support to fetch Deployment/StatefulSet logs

cyclops-ctrl/internal/handler/handler.go

@@ -1,10 +1,11 @@
 package handler
 
 import (
+	"net/http"
+
 	"github.com/cyclops-ui/cyclops/cyclops-ctrl/internal/controller/sse"
 	"github.com/cyclops-ui/cyclops/cyclops-ctrl/internal/integrations/helm"
 	"github.com/gin-gonic/gin"
-	"net/http"
 
 	"github.com/cyclops-ui/cyclops/cyclops-ctrl/internal/controller"
 	"github.com/cyclops-ui/cyclops/cyclops-ctrl/internal/prometheus"
@@ -96,6 +97,8 @@ func (h *Handler) Start() error {
 	h.router.GET("/resources/pods/:namespace/:name/:container/logs", modulesController.GetLogs)
 	h.router.GET("/resources/pods/:namespace/:name/:container/logs/stream", sse.HeadersMiddleware(), modulesController.GetLogsStream)
 	h.router.GET("/resources/pods/:namespace/:name/:container/logs/download", modulesController.DownloadLogs)
+	h.router.GET("/resources/deployments/:namespace/:deployment/:container/logs", modulesController.GetDeploymentLogs)
+	h.router.GET("/resources/statefulsets/:namespace/:name/:container/logs", modulesController.GetStatefulSetsLogs)
 
 	h.router.GET("/manifest", modulesController.GetManifest)
 	h.router.GET("/resources", modulesController.GetResource)

cyclops-ui/src/components/k8s-resources/Deployment.tsx

@@ -1,17 +1,20 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { Col, Divider, Row, Alert } from "antd";
+import React, { useCallback, useEffect, useState, useRef } from "react";
+import { Col, Divider, Row, Alert, TabsProps, Button, Tabs, Modal } from "antd";
 import axios from "axios";
 import { mapResponseError } from "../../utils/api/errors";
 import PodTable from "./common/PodTable/PodTable";
 import { isStreamingEnabled } from "../../utils/api/common";
+import { logStream } from "../../utils/api/sse/logs";
+import ReactAce from "react-ace/lib/ace";
+import { ReadOutlined } from "@ant-design/icons";
 
 interface Props {
   name: string;
   namespace: string;
   workload: any;
 }
 
-const Deployment = ({ name, namespace, workload }: Props) => {
+export const Deployment = ({ name, namespace, workload }: Props) => {
   const [deployment, setDeployment] = useState({
     status: "",
     pods: [],
@@ -108,4 +111,267 @@ const Deployment = ({ name, namespace, workload }: Props) => {
   );
 };
 
-export default Deployment;
+export const DeploymentLogsButton = ({ name, namespace, workload }: Props) => {
+  const [logs, setLogs] = useState<string[]>([]);
+  const [logsModal, setLogsModal] = useState({
+    on: false,
+    containers: [],
+    initContainers: [],
+  });
+
+  const logsSignalControllerRef = useRef<AbortController | null>(null);
+
+  const [error, setError] = useState({
+    message: "",
+    description: "",
+  });
+
+  const handleCancelLogs = () => {
+    setLogsModal({
+      on: false,
+      containers: [],
+      initContainers: [],
+    });
+    setLogs([]);
+
+    // send the abort signal
+    if (logsSignalControllerRef.current !== null) {
+      logsSignalControllerRef.current.abort();
+    }
+  };
+
+  const getTabItems = () => {
+    let items: TabsProps["items"] = [];
+
+    let container: any;
+
+    if (logsModal.containers !== null) {
+      for (container of logsModal.containers) {
+        items.push({
+          key: container.name,
+          label: container.name,
+          children: (
+            <Col>
+              <Button
+                type="primary"
+                // icon={<DownloadOutlined />}
+                onClick={downloadLogs(container.name)}
+                disabled={logs.length === 0}
+              >
+                Download
+              </Button>
+              <Divider style={{ marginTop: "16px", marginBottom: "16px" }} />
+              <ReactAce
+                style={{ width: "100%" }}
+                mode={"sass"}
+                value={
+                  logs.length === 0 ? "No logs available" : logs.join("\n")
+                }
+                readOnly={true}
+              />
+            </Col>
+          ),
+        });
+      }
+    }
+
+    if (logsModal.initContainers !== null) {
+      for (container of logsModal.initContainers) {
+        items.push({
+          key: container.name,
+          label: "(init container) " + container.name,
+          children: (
+            <Col>
+              <Button
+                type="primary"
+                // icon={<DownloadOutlined />}
+                onClick={downloadLogs(container.name)}
+                disabled={logs.length === 0}
+              >
+                Download
+              </Button>
+              <Divider style={{ marginTop: "16px", marginBottom: "16px" }} />
+              <ReactAce
+                style={{ width: "100%" }}
+                mode={"sass"}
+                value={
+                  logs.length === 0 ? "No logs available" : logs.join("\n")
+                }
+                readOnly={true}
+              />
+            </Col>
+          ),
+        });
+      }
+    }
+
+    return items;
+  };
+
+  const onLogsTabsChange = () => {
+    const controller = new AbortController();
+    if (logsSignalControllerRef.current !== null) {
+      logsSignalControllerRef.current.abort();
+    }
+    logsSignalControllerRef.current = controller; // store the controller to be able to abort the request
+    setLogs(() => []);
+
+    if (isStreamingEnabled()) {
+      logStream(
+        name,
+        namespace,
+        workload.pods[0].containers[0].name,
+        (log, isReset = false) => {
+          if (isReset) {
+            setLogs(() => []);
+          } else {
+            setLogs((prevLogs) => {
+              return [...prevLogs, log];
+            });
+          }
+        },
+        (err, isReset = false) => {
+          if (isReset) {
+            setError({
+              message: "",
+              description: "",
+            });
+          } else {
+            setError(mapResponseError(err));
+          }
+        },
+        controller,
+      );
+    } else {
+      axios
+        .get(
+          "/api/resources/deployments/" +
+            namespace +
+            "/" +
+            name +
+            "/" +
+            workload.pods[0].containers[0].name +
+            "/logs",
+        )
+        .then((res) => {
+          if (res.data) {
+            setLogs(res.data);
+          } else {
+            setLogs(() => []);
+          }
+        })
+        .catch((error) => {
+          setError(mapResponseError(error));
+        });
+    }
+  };
+
+  const downloadLogs = (container: string) => {
+    return function () {
+      window.location.href =
+        "/api/resources/pods/" +
+        namespace +
+        "/" +
+        workload.pods[0].name +
+        "/" +
+        container +
+        "/logs/download";
+    };
+  };
+
+  return (
+    <>
+      <Button
+        style={{ width: "100%" }}
+        onClick={function () {
+          if (isStreamingEnabled()) {
+            const controller = new AbortController();
+            logsSignalControllerRef.current = controller; // store the controller to be able to abort the request
+
+            logStream(
+              workload.pods[0].name,
+              namespace,
+              workload.pods[0].containers[0].name,
+              (log, isReset = false) => {
+                if (isReset) {
+                  setLogs(() => []);
+                } else {
+                  setLogs((prevLogs) => {
+                    return [...prevLogs, log];
+                  });
+                }
+              },
+              (err, isReset = false) => {
+                if (isReset) {
+                  setError({
+                    message: "",
+                    description: "",
+                  });
+                } else {
+                  setError(mapResponseError(err));
+                }
+              },
+              controller,
+            );
+          } else {
+            axios
+              .get(
+                "/api/resources/deployments/" +
+                  namespace +
+                  "/" +
+                  name +
+                  "/" +
+                  workload.pods[0].containers[0].name +
+                  "/logs",
+              )
+              .then((res) => {
+                if (res.data) {
+                  setLogs(res.data);
+                } else {
+                  setLogs(() => []);
+                }
+              })
+              .catch((error) => {
+                setError(mapResponseError(error));
+              });
+          }
+
+          setLogsModal({
+            on: true,
+            containers: workload.pods[0].containers,
+            initContainers: workload.pods[0].initContainers,
+          });
+        }}
+      >
+        <ReadOutlined style={{ paddingRight: "5px" }} />
+        Deployment Logs
+      </Button>
+      <Modal
+        title="Deployment Logs"
+        open={logsModal.on}
+        onOk={handleCancelLogs}
+        onCancel={handleCancelLogs}
+        cancelButtonProps={{ style: { display: "none" } }}
+        style={{ zIndex: 100 }}
+        width={"80%"}
+      >
+        {error.message.length !== 0 && (
+          <Alert
+            message={error.message}
+            description={error.description}
+            type="error"
+            closable
+            afterClose={() => {
+              setError({
+                message: "",
+                description: "",
+              });
+            }}
+            style={{ marginBottom: "20px" }}
+          />
+        )}
+        <Tabs items={getTabItems()} onChange={onLogsTabsChange} />
+      </Modal>
+    </>
+  );
+};

cyclops-ui/src/components/k8s-resources/ResourceList/ResourceList.tsx

@@ -20,11 +20,11 @@ import {
   ResourceRef,
   resourceRefKey,
 } from "../../../utils/resourceRef";
-import Deployment from "../Deployment";
+import { Deployment, DeploymentLogsButton } from "../Deployment";
 import CronJob from "../CronJob";
 import Job from "../Job";
 import DaemonSet from "../DaemonSet";
-import StatefulSet from "../StatefulSet";
+import { StatefulSet, StatefulSetLogsButton } from "../StatefulSet";
 import Pod from "../Pod";
 import Service from "../Service";
 import ClusterRole from "../ClusterRole";
@@ -564,6 +564,24 @@ const ResourceList = ({
               />
             </Col>
           )}
+          {resource.kind === "Deployment" && (
+            <Col style={{ float: "right" }}>
+              <DeploymentLogsButton
+                name={resource.name}
+                namespace={resource.namespace}
+                workload={getWorkload(resourceRef)}
+              />
+            </Col>
+          )}
+          {resource.kind === "StatefulSet" && (
+            <Col style={{ float: "right" }}>
+              <StatefulSetLogsButton
+                name={resource.name}
+                namespace={resource.namespace}
+                workload={getWorkload(resourceRef)}
+              />
+            </Col>
+          )}
         </Row>
         {resourceDetails}
       </Collapse.Panel>,