Feat: support download pod lods in velaux (#739)

* feat: support download pod lods in velaux Signed-off-by: Basuotian <basuoluomiu@gmail.com> * make download function reusable Signed-off-by: Basuotian <basuoluomiu@gmail.com> * remove unused translation Signed-off-by: Basuotian <basuoluomiu@gmail.com> --------- Signed-off-by: Basuotian <basuoluomiu@gmail.com>
kubevela · Apr 3, 2023 · 903bcae · 903bcae
1 parent d2582ed
commit 903bcae
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 3 deletions.
diff --git a/packages/velaux-ui/src/pages/ApplicationInstanceList/components/ContainerLog/index.tsx b/packages/velaux-ui/src/pages/ApplicationInstanceList/components/ContainerLog/index.tsx
@@ -1,10 +1,11 @@
-import { Dialog, Grid, Checkbox, Dropdown, Menu } from '@alifd/next';
+import { Dialog, Grid, Checkbox, Dropdown, Menu, Button, Icon } from '@alifd/next';
 import React, { Component } from 'react';
 
 import { If } from '../../../../components/If';
 import Translation from '../../../../components/Translation';
 import type { ContainerLogResponse, PodBase } from '../../../../interface/observation';
 import { momentDate, momentShortDate } from '../../../../utils/common';
+import { downloadStringFile } from '../../../../utils/utils';
 import locale from '../../../../utils/locale';
 import './index.less';
 import { listContainerLog } from '../../../../api/observation';
@@ -115,6 +116,18 @@ class ContainerLog extends Component<Props, State> {
     }
   };
 
+  downloadLog = () => {
+    const { pod, containerName = '' } = this.props;
+    const { logs } = this.state;
+
+    let logContent: string[] = [];
+    logs.map((line) => {
+      logContent.push(line.content)
+    });
+
+    downloadStringFile(logContent.join("\n"), pod?.metadata.name + "-" + containerName);
+  };
+
   render() {
     const { logs, info, showTimestamps, autoRefresh, refreshInterval, previous } = this.state;
     return (
@@ -126,7 +139,18 @@ class ContainerLog extends Component<Props, State> {
         onClose={this.props.onClose}
         overflowScroll
         v2
-        title={<Translation>Container Log</Translation>}
+        title={
+          <Row style={{ width: '100%' }}>
+            <Col span={12}>
+              <Translation>Container Log</Translation>
+            </Col>
+            <Col span={12}>
+            <Button style={{float: "right"}} type="normal" size="small" onClick={this.downloadLog}>
+              <Icon type="download" />
+            </Button>
+            </Col>
+          </Row>
+        }
         footer={
           <Row style={{ width: '100%' }}>
             <Col span={12}>

diff --git a/packages/velaux-ui/src/pages/ApplicationLog/components/LogContainer/index.less b/packages/velaux-ui/src/pages/ApplicationLog/components/LogContainer/index.less
@@ -13,6 +13,10 @@
   }
 }
 
+.next-btn {
+  margin-right: 8px !important;
+}
+
 .logBox {
   display: flex;
   flex: 1 1 0%;

diff --git a/packages/velaux-ui/src/pages/ApplicationLog/components/LogContainer/index.tsx b/packages/velaux-ui/src/pages/ApplicationLog/components/LogContainer/index.tsx
@@ -1,11 +1,12 @@
-import { Grid, Checkbox, Dropdown, Menu, Loading } from '@alifd/next';
+import { Grid, Checkbox, Dropdown, Menu, Loading, Button, Icon } from '@alifd/next';
 import Ansi from 'ansi-to-react';
 import React, { Component, Fragment } from 'react';
 
 import { listContainerLog } from '../../../../api/observation';
 import Translation from '../../../../components/Translation';
 import type { ContainerLogResponse, PodBase } from '../../../../interface/observation';
 import { momentDate, momentShortDate } from '../../../../utils/common';
+import { downloadStringFile } from '../../../../utils/utils';
 import './index.less';
 import { If } from '../../../../components/If';
 import { FaEllipsisV } from 'react-icons/fa';
@@ -138,12 +139,27 @@ class ContainerLog extends Component<Props, State> {
     }
   };
 
+  downloadLog = () => {
+    const { pod, activeContainerName = '' } = this.props;
+    const { logs } = this.state;
+
+    let logContent: string[] = [];
+    logs.map((line) => {
+      logContent.push(line.content);
+    });
+
+    downloadStringFile(logContent.join("\n"), pod?.metadata.name + "-" + activeContainerName);
+  };
+
   render() {
     const { Row, Col } = Grid;
     const { logs, info, showTimestamps, autoRefresh, refreshInterval, previous, loading } = this.state;
     return (
       <Fragment>
         <div className="application-logs-actions">
+          <Button type="normal" size="small" onClick={this.downloadLog}>
+            <Icon type="download"/>
+          </Button>
           <Checkbox checked={showTimestamps} onChange={(v) => this.setState({ showTimestamps: v })}>
             <Translation className="font-bold font-size-14">Show timestamps</Translation>
           </Checkbox>

diff --git a/packages/velaux-ui/src/utils/utils.ts b/packages/velaux-ui/src/utils/utils.ts
@@ -210,3 +210,12 @@ export function getBrowserNameAndVersion() {
   //return eg:ie9.0 firefox34.0 chrome37.0
   return browserNV;
 }
+
+export function downloadStringFile(content: string, filename: string) {
+  const element = document.createElement("a");
+  const file = new Blob([content], {type: 'text/plain'});
+  element.href = URL.createObjectURL(file);
+  element.download = filename;
+  document.body.appendChild(element);
+  element.click();
+}