From 62bcf69639e9fccd9ec4d92ed1ea4a734871d706 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=A4=E6=9C=88?= Date: Wed, 11 Oct 2023 06:04:37 -0500 Subject: [PATCH 1/2] fix: Fix devops pipeline run logs bugs (#1900) * refactor: refactor pipeline run time Signed-off-by: yazhou * fix: fix kubeconfigFile error Signed-off-by: yazhou * fix: fix pipeline step log too big Signed-off-by: yazhou * fix: limit pipeline run logs Signed-off-by: yazhou --------- Signed-off-by: yazhou --- .../components/Pipeline/StepModals/params.jsx | 4 +- .../PipelineLogDialog/FullLogs/index.jsx | 3 + .../Detail/PipelineLogDialog/Timer.jsx | 50 +++++++ .../Detail/PipelineLogDialog/index.jsx | 20 ++- src/stores/devops/log.js | 21 ++- src/stores/devops/run.js | 140 +++++++++++++++--- 6 files changed, 206 insertions(+), 32 deletions(-) create mode 100644 src/pages/devops/containers/Pipelines/Detail/PipelineLogDialog/Timer.jsx diff --git a/src/pages/devops/components/Pipeline/StepModals/params.jsx b/src/pages/devops/components/Pipeline/StepModals/params.jsx index 6a9e4dd8ff8..435c748deb0 100644 --- a/src/pages/devops/components/Pipeline/StepModals/params.jsx +++ b/src/pages/devops/components/Pipeline/StepModals/params.jsx @@ -84,8 +84,8 @@ const setCredentialType = str => { if (type) { const credentialType = Object.entries(typesDict).find( typeArr => typeArr[1] === type - ) - return credentialType ? credentialType[0] : null + )?.[0] + return credentialType } return null } diff --git a/src/pages/devops/containers/Pipelines/Detail/PipelineLogDialog/FullLogs/index.jsx b/src/pages/devops/containers/Pipelines/Detail/PipelineLogDialog/FullLogs/index.jsx index 2af9c0d8824..51c98069bb8 100644 --- a/src/pages/devops/containers/Pipelines/Detail/PipelineLogDialog/FullLogs/index.jsx +++ b/src/pages/devops/containers/Pipelines/Detail/PipelineLogDialog/FullLogs/index.jsx @@ -43,6 +43,9 @@ export default class FullLogs extends React.Component { @computed get isLogFinish() { + if (this.store.overflow) { + return true + } const logs = this.store.runDetailLogs.split('\n') let index = logs.length - 1 let start = 0 diff --git a/src/pages/devops/containers/Pipelines/Detail/PipelineLogDialog/Timer.jsx b/src/pages/devops/containers/Pipelines/Detail/PipelineLogDialog/Timer.jsx new file mode 100644 index 00000000000..e11b3f59d0a --- /dev/null +++ b/src/pages/devops/containers/Pipelines/Detail/PipelineLogDialog/Timer.jsx @@ -0,0 +1,50 @@ +/* + * This file is part of KubeSphere Console. + * Copyright (C) 2019 The KubeSphere Console Authors. + * + * KubeSphere Console is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * KubeSphere Console is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with KubeSphere Console. If not, see . + */ + +import { useEffect, useRef, useState } from 'react' +import { formatUsedTime } from 'utils/index' + +const TimeCounter = ({ startTime, time }) => { + const [seconds, setSeconds] = useState(0) + + const timerRef = useRef(null) + + useEffect(() => { + if (startTime) { + const interval = setInterval(() => { + const endTime = new Date() + const diff = endTime.getTime() - new Date(startTime).getTime() + setSeconds(diff) + }, 300) + timerRef.current = interval + return () => clearInterval(interval) + } + }, [startTime]) + + useEffect(() => { + if (time && timerRef.current) { + clearInterval(timerRef.current) + } + }, [time]) + + return t('DURATION_VALUE', { + value: startTime ? formatUsedTime(time ?? seconds) : '-', + }) +} + +export default TimeCounter diff --git a/src/pages/devops/containers/Pipelines/Detail/PipelineLogDialog/index.jsx b/src/pages/devops/containers/Pipelines/Detail/PipelineLogDialog/index.jsx index af694a61247..73b153bd66e 100644 --- a/src/pages/devops/containers/Pipelines/Detail/PipelineLogDialog/index.jsx +++ b/src/pages/devops/containers/Pipelines/Detail/PipelineLogDialog/index.jsx @@ -18,16 +18,16 @@ import React from 'react' import classNames from 'classnames' -import { isEmpty, isArray } from 'lodash' -import { action, observable, computed, toJS, reaction } from 'mobx' +import { isArray, isEmpty } from 'lodash' +import { action, computed, observable, reaction, toJS } from 'mobx' import { observer } from 'mobx-react' import { Modal } from 'components/Base' import { Button } from '@kube-design/components' import Status from 'devops/components/Status' import { getPipelineStatus } from 'utils/status' -import { formatUsedTime } from 'utils' import RunStore from 'stores/devops/run' +import TimeCounter from 'devops/containers/Pipelines/Detail/PipelineLogDialog/Timer' import LogItem from './logItem' import styles from './index.scss' import FullLogs from './FullLogs' @@ -215,8 +215,7 @@ export default class PipelineLog extends React.Component { // ) // } - const time = this.activeStage?.durationInMillis ?? '' - + // const time = this.activeStage?.durationInMillis ?? '' return ( <>
@@ -226,9 +225,14 @@ export default class PipelineLog extends React.Component {
- {t('DURATION_VALUE', { - value: time ? formatUsedTime(time) : '-', - })} + + ) + } + return ( + + + + + ) + } + render() { const { nodes } = this.props const _nodes = toJS(nodes) @@ -234,9 +269,7 @@ export default class PipelineLog extends React.Component { } /> - + {this.renderLogButton()}
{this.renderLogContent()}
diff --git a/src/stores/devops/log.js b/src/stores/devops/log.js index 753a5a3fac8..e484e3db25b 100644 --- a/src/stores/devops/log.js +++ b/src/stores/devops/log.js @@ -29,6 +29,9 @@ export default class PipelineRunStore extends BaseStore { } async getStepLog({ devops, cluster, name, branch, runId, nodeId, stepId }) { + const params = this.stepLogData.start + ? `?start=${this.stepLogData.start}` + : '' const headers = branch ? {} : { @@ -40,8 +43,7 @@ export default class PipelineRunStore extends BaseStore { devops, })}pipelines/${decodeURIComponent(name)}${ branch ? `/branches/${encodeURIComponent(branch)}` : '' - }/runs/${runId}/nodes/${nodeId}/steps/${stepId}/log/?start=${this - .stepLogData.start || 0}`, + }/runs/${runId}/nodes/${nodeId}/steps/${stepId}/log/${params}`, options: { headers }, handler: resp => { if (resp.status === 200) { diff --git a/src/stores/devops/run.js b/src/stores/devops/run.js index 25671aa08ec..7d55bd5b5ca 100644 --- a/src/stores/devops/run.js +++ b/src/stores/devops/run.js @@ -349,6 +349,7 @@ export default class PipelineRunStore extends BaseStore { ${result}` } else { const start = this.logSize + const params = start ? `?start=${start}` : '' const result = await request.get( `${this.getRunUrl({ cluster, @@ -356,11 +357,11 @@ ${result}` name, branch, runId, - })}log/?start=${this.logSize}`, + })}log/${params}`, {}, { headers: { - 'x-file-size-limit': 1024 * 1024 * 10, + // 'x-file-size-limit': 1024 * 1024 * 10, 'x-with-headers': true, }, } @@ -406,6 +407,20 @@ ${result}` // return str2.slice(index + end.length) // } + handleJumpFullLogs({ devops, name, branch, cluster }) { + name = decodeURIComponent(name) + const url = getClusterUrl( + `${window.location.protocol}//${window.location.host}/${this.getRunUrl({ + cluster, + devops, + name, + branch, + runId: this.runDetail.id, + })}log/?start=0` + ) + window.open(url) + } + async handleDownloadLogs({ devops, name, branch, cluster }) { name = decodeURIComponent(name) const url = getClusterUrl(