fix: [devops 3.4.1] fix devops pipeline run log (#1772)

server/proxy.js

@@ -36,6 +36,50 @@ const k8sResourceProxy = {
 
       NEED_OMIT_HEADERS.forEach(key => proxyReq.removeHeader(key))
     },
+    proxyRes(proxyRes, req, client_res) {
+      let maxBufferSize = req.headers['x-file-size-limit']
+      if (maxBufferSize) {
+        maxBufferSize = Number(maxBufferSize)
+        let body = Buffer.alloc(maxBufferSize)
+        let offset = 0
+        let end = false
+        proxyRes.on('data', chunk => {
+          if (end) {
+            return
+          }
+          if (offset >= maxBufferSize) {
+            if (!client_res.getHeader('x-file-size-limit-out')) {
+              client_res.setHeader('x-file-size-limit-out', 'true')
+            }
+            proxyRes.emit('end')
+            end = true
+            return
+          }
+          chunk.copy(body, offset)
+
+          offset += chunk.length
+        })
+        proxyRes.pipe = function(res) {
+          proxyRes.on('end', () => {
+            end = true
+            const offset1 = Math.min(offset, maxBufferSize)
+            body = body.slice(0, offset1)
+            res.writeHead(proxyRes.statusCode, {
+              ...proxyRes.headers,
+              'x-file-size': offset1,
+            })
+            res.end(body)
+          })
+        }
+      }
+      let addHeaders = req.headers['x-add-res-header']
+      if (addHeaders) {
+        addHeaders = JSON.parse(addHeaders)
+        Object.keys(addHeaders).forEach(key => {
+          proxyRes.headers[key] = addHeaders[key]
+        })
+      }
+    },
   },
 }
 

src/pages/devops/containers/Pipelines/Detail/PipelineLogDialog/FullLogs/index.jsx

@@ -36,9 +36,9 @@ export default class FullLogs extends React.Component {
   }
 
   @action
-  getPipelineIndexLog() {
+  getPipelineIndexLog(refresh = false) {
     const { params } = this.props
-    this.store.getRunStatusLogs(params)
+    this.store.getRunStatusLogs(params, refresh)
   }
 
   @computed
@@ -84,7 +84,8 @@ export default class FullLogs extends React.Component {
   }
 
   handleRefreshLogs = async () => {
-    await this.getPipelineIndexLog()
+    await this.getPipelineIndexLog(true)
+    await this.handleRealtime()
     this.scrollToBottom()
   }
 

src/pages/devops/containers/Pipelines/Detail/PipelineLogDialog/index.scss

@@ -2,7 +2,8 @@
 @import '~scss/mixins';
 
 .container {
-  display: flex;
+  display: grid;
+  grid-template-columns: 215px 1fr;
   height: 100%;
 }
 
@@ -17,13 +18,16 @@
 }
 
 .left {
-  flex-basis: 215px;
   height: 500px;
   overflow: auto;
 }
 
 .right {
-  flex-grow: 1;
+  // max-height: calc(100vh - 200px);
+  overflow-y: auto;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: 12px;
 }
 
 .cutTitle {
@@ -71,7 +75,6 @@
 
 .header {
   height: 32px;
-  margin-bottom: 12px;
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
@@ -93,7 +96,6 @@
 
 .logContainer {
   width: 100%;
-  height: 100%;
   padding: 12px;
   border-radius: 4px;
   background-color: #242e42;

src/pages/devops/containers/Pipelines/Detail/TaskStatus/index.jsx

@@ -256,7 +256,7 @@ export default class TaskStatus extends React.Component {
               />
             </div>
 
-            <Button icon="restart" type="flat" onClick={this.handleRefresh} />
+            <Button icon="refresh" type="flat" onClick={this.handleRefresh} />
           </div>
           {this.state.activeTab === 'pipeline' && (
             <div

src/pages/devops/containers/layout.jsx

@@ -110,10 +110,9 @@ export default class Layout extends Component {
       `clusterConfig.${params.cluster}`,
       this.clusterStore.detail.configz
     )
-
     globals.app.cacheHistory(this.props.match.url, {
       type: 'DevOps',
-      name: this.devops,
+      name: this.store.data.name,
       aliasName: this.store.data.aliasName,
       cluster: pick(this.clusterStore.detail, [
         'name',

src/stores/devops/run.js

@@ -18,9 +18,9 @@
 
 import { omit, isArray, get, isEmpty } from 'lodash'
 import { saveAs } from 'file-saver'
-import { action, observable, toJS } from 'mobx'
+import { action, computed, observable, toJS } from 'mobx'
 import { Notify } from '@kube-design/components'
-import { safeParseJSON } from 'utils'
+import { getClusterUrl, safeParseJSON } from 'utils'
 
 import BaseStore from '../devops'
 
@@ -76,7 +76,23 @@ export default class PipelineRunStore extends BaseStore {
 
   // entire run log
   @observable
-  runDetailLogs = ''
+  runStartDetailLogs = ''
+
+  @observable
+  logSize = 0
+
+  @observable
+  hasMore = false
+
+  hasMoreNotify = false
+
+  @observable
+  lastDetailLogs = ''
+
+  @computed
+  get runDetailLogs() {
+    return this.runStartDetailLogs + this.lastDetailLogs
+  }
 
   getUrl({ cluster, devops, name }) {
     return `${this.getDevopsUrlV2({
@@ -304,30 +320,92 @@ export default class PipelineRunStore extends BaseStore {
   }
 
   @action
-  async getRunStatusLogs({ devops, name, branch, runId, cluster }) {
-    // TODO: use response headers offset
-    const result = await request.get(
-      `${this.getRunUrl({
+  async getRunStatusLogs(
+    { devops, name, branch, runId, cluster },
+    refresh = false
+  ) {
+    if (refresh) {
+      this.logSize = 0
+      this.runStartDetailLogs = ''
+      this.hasMore = false
+    }
+    if (this.logSize >= 1024 * 1024 * 20) {
+      const result = await request.get(
+        `${this.getRunUrl({
+          cluster,
+          devops,
+          name,
+          branch,
+          runId,
+        })}log/?thresholdInKB=150`
+      )
+      this.hasMore = true
+      this.lastDetailLogs = `
+
+*****************************************************************    
+* The log is too large, please download it to view the details. *
+*                                                               * 
+* The following is the latest 150KB log.                        * 
+*****************************************************************    
+
+${result}`
+    } else {
+      const result = await request.get(
+        `${this.getRunUrl({
+          cluster,
+          devops,
+          name,
+          branch,
+          runId,
+        })}log/?start=${this.logSize}`,
+        {},
+        {
+          headers: {
+            'x-file-size-limit': 1024 * 100,
+            'x-with-headers': true,
+          },
+        }
+      )
+      this.logSize += Number(result.headers.get('X-File-Size'))
+      this.hasMore = result.headers.get('X-File-Size-Limit-Out') !== 'true'
+      result.text().then(text => {
+        this.runStartDetailLogs += this.removeSameWords(
+          this.runStartDetailLogs,
+          text
+        )
+      })
+    }
+  }
+
+  removeSameWords = (str1, str2) => {
+    const end = str1.slice(-100)
+    const index = str2.indexOf(end)
+    if (index === -1) {
+      return str2
+    }
+    return str2.slice(index + end.length)
+  }
+
+  async handleDownloadLogs({ devops, name, branch, cluster }) {
+    name = decodeURIComponent(name)
+    const url = getClusterUrl(
+      `${window.location.protocol}//${window.location.host}/${this.getRunUrl({
         cluster,
         devops,
         name,
         branch,
-        runId,
-      })}log/?start=0`
+        runId: this.runDetail.id,
+      })}log/?start=0&download=true`
     )
-    this.runDetailLogs = result
-  }
-
-  async handleDownloadLogs({ devops, name, branch, cluster }) {
-    name = decodeURIComponent(name)
-    await this.getRunStatusLogs({
-      devops,
-      name,
-      branch,
-      runId: this.runDetail.id,
-      cluster,
-    })
-    this.saveAsFile(this.runDetailLogs, 'log.txt')
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `${name}-${this.runDetail.id}-${this.runDetail.name}.log`
+    a.headers = {
+      'x-add-res-header': JSON.stringify({
+        'Content-Disposition': `attachment; filename=${name}-${this.runDetail.name}.log`,
+      }),
+    }
+    a.click()
   }
 
   saveAsFile = (text = '', fileName = 'default.txt') => {

src/utils/request.js

@@ -111,7 +111,7 @@ function buildRequest({
   }
 
   return fetch(getClusterUrl(requestURL), request).then(resp =>
-    responseHandler(resp, reject)
+    responseHandler(resp, reject, request)
   )
 }
 
@@ -151,7 +151,7 @@ function createURL(path) {
  * @returns {Promise}
  * @private
  */
-function handleResponse(response, reject) {
+function handleResponse(response, reject, request = {}) {
   const redirect = response.redirected
   if (redirect) {
     window.location.replace(response.url)
@@ -184,6 +184,9 @@ function handleResponse(response, reject) {
   }
 
   if (response.status === 200 || response.status === 204) {
+    if (request.headers?.['x-with-headers'] === true) {
+      return response
+    }
     return response.text()
   }