Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Oct 23, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
fix: [devops 3.5] fix devops pipeline run log (#1772)
* fix: fix devops pipeline run log

Signed-off-by: yazhou <yazhouhu@yunify.com>

* fix: update pipeline run log refresh icon

Signed-off-by: yazhou <yazhouhu@yunify.com>

* fix: fix devops pipeline run log refresh action

Signed-off-by: yazhou <yazhouhu@yunify.com>

* fix: fix devops history card name

Signed-off-by: yazhou <yazhouhu@yunify.com>

---------

Signed-off-by: yazhou <yazhouhu@yunify.com>
yazhouio committed Oct 20, 2023
commit 448307564ee6501b76d16460149515ea5368fdae
44 changes: 44 additions & 0 deletions server/proxy.js
Original file line number Diff line number Diff line change
@@ -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]
})
}
},
},
}

Original file line number Diff line number Diff line change
@@ -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()
}

Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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
3 changes: 1 addition & 2 deletions src/pages/devops/containers/layout.jsx
Original file line number Diff line number Diff line change
@@ -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',
122 changes: 100 additions & 22 deletions src/stores/devops/run.js
Original file line number Diff line number Diff line change
@@ -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') => {
7 changes: 5 additions & 2 deletions src/utils/request.js
Original file line number Diff line number Diff line change
@@ -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()
}