From 516eae8d5cb5dc35f0b515e5d851f9799ce27015 Mon Sep 17 00:00:00 2001 From: Liu Xin Date: Thu, 19 Oct 2023 11:33:16 +0800 Subject: [PATCH 01/27] fix: fix project gateway not display in cluster (#4209) Signed-off-by: harrisonliu5 --- .../Gateway/Components/ProjectGatewayList/index.jsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/pages/clusters/containers/Gateway/Components/ProjectGatewayList/index.jsx b/src/pages/clusters/containers/Gateway/Components/ProjectGatewayList/index.jsx index 23a5a6775f8..4fc37d6b082 100644 --- a/src/pages/clusters/containers/Gateway/Components/ProjectGatewayList/index.jsx +++ b/src/pages/clusters/containers/Gateway/Components/ProjectGatewayList/index.jsx @@ -37,16 +37,11 @@ export default class ProjectGatewayCard extends React.Component { await store.fetchList({ ...this.props.match.params, ...params, - labelSelector: this.labelSelector, }) store.list.silent = false } - get labelSelector() { - return `kubesphere.io/gateway-type=${this.props.type}` - } - get routing() { return this.props.rootStore.routing } From eb6a5df22b7d554ed6c3faf543a00e1539ba5587 Mon Sep 17 00:00:00 2001 From: Liu Xin Date: Thu, 19 Oct 2023 11:46:16 +0800 Subject: [PATCH 02/27] style: Update dashboard history card style (#4210) Signed-off-by: harrisonliu5 --- .../Dashboard/Admin/History/Card.jsx | 10 +++-- .../Dashboard/Admin/History/index.jsx | 2 +- .../Dashboard/Admin/History/index.scss | 45 ++++++++++--------- 3 files changed, 31 insertions(+), 26 deletions(-) diff --git a/src/pages/console/containers/Dashboard/Admin/History/Card.jsx b/src/pages/console/containers/Dashboard/Admin/History/Card.jsx index d6b733acaa7..6ac09d30525 100644 --- a/src/pages/console/containers/Dashboard/Admin/History/Card.jsx +++ b/src/pages/console/containers/Dashboard/Admin/History/Card.jsx @@ -82,7 +82,7 @@ export default class Card extends Component { ) { return ( - + + {getDisplayName(data)} + {this.renderTags()} + + } description={t( `WORKBENCH_${data.type.replace(/[-\s+]/g, '_').toUpperCase()}` )} ellipsis /> - {this.renderTags()} {data.isFedManaged && ( +
{histories.map(item => ( ))} diff --git a/src/pages/console/containers/Dashboard/Admin/History/index.scss b/src/pages/console/containers/Dashboard/Admin/History/index.scss index 3c7e22efb44..f4657a5ccdb 100644 --- a/src/pages/console/containers/Dashboard/Admin/History/index.scss +++ b/src/pages/console/containers/Dashboard/Admin/History/index.scss @@ -8,30 +8,23 @@ background-color: #ffffff; } -.histories { - margin-bottom: -12px; +.historiesNew { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + row-gap: 12px; + column-gap: 12px; +} +.historiesNew, +.histories { & > a { - display: inline-block; - vertical-align: middle; position: relative; - width: calc(20% - 11px); - margin-bottom: 12px; - margin-right: 12px; - padding: 11px 12px; + padding: 12px; border-radius: 3px; background-color: $card-bg-color; transition: all $trans-speed ease-in-out; - &:nth-child(5n + 5) { - margin-right: 0; - } - .tagWrapper { - position: absolute; - top: 12px; - right: 12px; - left: 100px; text-align: right; > span { max-width: 100%; @@ -41,11 +34,24 @@ background: #fff; } .tag { - max-width: 100%; overflow: hidden; word-break: break-all; white-space: nowrap; text-overflow: ellipsis; + max-width: 100px; + } + } + .textTitle { + display: grid; + grid-template-columns: auto 1fr; + gap: 8px; + & > span:first-child { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + & > span:last-child { + display: inherit; } } @@ -54,11 +60,6 @@ & > div > div { color: $primary; } - - :global .kubed-icon { - color: #00aa72; - fill: #90e0c5; - } } } } From 16b4f87d5f41dc59ff31f4ea1bae5ed137debbed Mon Sep 17 00:00:00 2001 From: Liu Xin Date: Fri, 20 Oct 2023 14:36:18 +0800 Subject: [PATCH 03/27] fix: Count table body height for filter button's dropdown content (#4211) Signed-off-by: harrisonliu5 --- src/components/Tables/Base/CustomColumns/index.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Tables/Base/CustomColumns/index.jsx b/src/components/Tables/Base/CustomColumns/index.jsx index b78465bd6be..7795136b3c5 100644 --- a/src/components/Tables/Base/CustomColumns/index.jsx +++ b/src/components/Tables/Base/CustomColumns/index.jsx @@ -102,7 +102,11 @@ class CustomColumns extends Component { } return ( - +
- + ) + } + return ( + + + + + ) + } + render() { const { nodes } = this.props const _nodes = toJS(nodes) @@ -215,8 +250,7 @@ export default class PipelineLog extends React.Component { // ) // } - const time = this.activeStage?.durationInMillis ?? '' - + // const time = this.activeStage?.durationInMillis ?? '' return ( <>
@@ -226,13 +260,16 @@ export default class PipelineLog extends React.Component {
- {t('DURATION_VALUE', { - value: time ? formatUsedTime(time) : '-', - })} + - + {this.renderLogButton()}
{this.renderLogContent()}
diff --git a/src/stores/devops/log.js b/src/stores/devops/log.js index 62fc445111b..e484e3db25b 100644 --- a/src/stores/devops/log.js +++ b/src/stores/devops/log.js @@ -29,26 +29,47 @@ 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 + ? {} + : { + 'x-file-size-limit': 1024 * 1024 * 5, + } const result = await request.defaults({ url: `${this.getDevopsUrlV2({ cluster, 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) { return resp.text().then(res => ({ data: res, headers: resp.headers })) } }, }) - const prevLog = this.stepLogData.log + const prevLog = !this.stepLogData.start ? '' : this.stepLogData.log this.stepLogData = { log: prevLog + get(result, 'data', ''), start: result.headers.get('x-text-size'), hasMore: Boolean(result.headers.get('x-more-data')), } + if ( + result.headers.get('X-File-Size-Limit-Out') === 'true' || + this.log?.length > 1024 * 1024 * 5 + ) { + this.stepLogData.hasMore = false + this.stepLogData.log += `\n +***************************************************************** +* * +* The log is too large, please download it to view the details. * +* * +***************************************************************** + ` + } } @action diff --git a/src/stores/devops/run.js b/src/stores/devops/run.js index 1b25249a469..a019457aa0f 100644 --- a/src/stores/devops/run.js +++ b/src/stores/devops/run.js @@ -81,6 +81,9 @@ export default class PipelineRunStore extends BaseStore { @observable logSize = 0 + @observable + overflow = false + @observable hasMore = false @@ -329,7 +332,7 @@ export default class PipelineRunStore extends BaseStore { this.runStartDetailLogs = '' this.hasMore = false } - if (this.logSize >= 1024 * 1024 * 20) { + if (this.overflow) { const result = await request.get( `${this.getRunUrl({ cluster, @@ -350,6 +353,8 @@ 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, @@ -357,33 +362,68 @@ ${result}` name, branch, runId, - })}log/?start=${this.logSize}`, + })}log/${params}`, {}, { headers: { - 'x-file-size-limit': 1024 * 100, + // 'x-file-size-limit': 1024 * 1024 * 10, 'x-with-headers': true, }, } ) - this.logSize += Number(result.headers.get('X-File-Size')) - this.hasMore = result.headers.get('X-File-Size-Limit-Out') !== 'true' + const size = result.headers.get('x-text-size') + if (size) { + this.logSize = Number(size) + this.hasMore = Boolean(result.headers.get('x-more-data')) + } else { + this.logSize += Number(result.headers.get('x-text-size')) + this.hasMore = Boolean(result.headers.get('x-more-data')) + } + this.overflow = + Boolean(result.headers.get('X-File-Size-Limit-Out')) || + this.logSize >= 1024 * 1024 * 10 + result.text().then(text => { - this.runStartDetailLogs += this.removeSameWords( - this.runStartDetailLogs, - text - ) + if (start === 0) { + this.runStartDetailLogs = text + return + } + // console.log(this.runStartDetailLogs.slice(-100).split('\n')) + const arr = this.runStartDetailLogs.slice(-100).split('\n') + if (arr.length >= 2) { + arr.pop() + if (arr.length && arr.pop().startsWith('Finished:')) { + // + } else { + this.runStartDetailLogs += text + } + } else { + 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) + // removeSameWords = (str1, str2) => { + // const end = str1.slice(-100) + // const index = str2.indexOf(end) + // if (index === -1) { + // return str2 + // } + // 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 }) { @@ -470,4 +510,4 @@ ${result}` } ) } -} +} \ No newline at end of file From ec9b2c45840e24da982151cdaaf09d7615cbdc8e Mon Sep 17 00:00:00 2001 From: Liu Xin Date: Mon, 23 Oct 2023 16:29:22 +0800 Subject: [PATCH 17/27] fix: Optimize the tag input to automatically fill in the value when it loses focus (#4225) Signed-off-by: harrisonliu5 --- package.json | 2 +- .../BaseForm/ConditionSelect/index.jsx | 25 ++++++++++++++++--- .../Inputs/TagInput/autosuggest.jsx | 16 ++++++++++++ src/components/Inputs/TagInput/index.scss | 5 ++-- yarn.lock | 8 +++--- 5 files changed, 44 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 6a93ea5547f..cd3a67e2fde 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "license": "AGPL-3.0", "dependencies": { "@babel/polyfill": "^7.12.1", - "@kube-design/components": "^1.27.1", + "@kube-design/components": "^1.32.0", "ace-builds": "^1.4.7", "ansi_up": "^5.0.0", "async-validator": "^1.8.5", diff --git a/src/components/Forms/Notification/BaseForm/ConditionSelect/index.jsx b/src/components/Forms/Notification/BaseForm/ConditionSelect/index.jsx index c6475c0c56c..7ff5355aa1d 100644 --- a/src/components/Forms/Notification/BaseForm/ConditionSelect/index.jsx +++ b/src/components/Forms/Notification/BaseForm/ConditionSelect/index.jsx @@ -134,7 +134,13 @@ export default class ConditionSelect extends React.Component { } handleOperatorChange = operator => { - this.setState({ operator }, () => this.handleChange()) + let values = this.state.values + + if (['Exists', 'DoesNotExist'].includes(operator)) { + values = undefined + } + + this.setState({ operator, values }, () => this.handleChange()) } handleValueChange = values => { @@ -143,12 +149,20 @@ export default class ConditionSelect extends React.Component { handleChange = () => { const { key, operator, values } = this.state + const _values = ['Exists', 'DoesNotExist'].includes(operator) + ? undefined + : values || [] - this.props.onChange({ + const data = { key, operator, - values: ['Exists', 'DoesNotExist'].includes(operator) ? [] : values, - }) + } + + if (_values) { + data.values = _values + } + + this.props.onChange(data) } dorpdownRender = options => { @@ -173,9 +187,11 @@ export default class ConditionSelect extends React.Component { renderValues() { const { key, operator, values } = this.state + if (operator === 'Exists' || operator === 'DoesNotExist') { return null } + if (key === 'severity') { return (