diff --git a/ide/src/base-ui/select/LitSelectHtml.ts b/ide/src/base-ui/select/LitSelectHtml.ts index 785ebaa12f57fa1d560dee38b7529ca21feabc04..069c8603d84d921aa75fe88a05a27a71b1e5e81f 100644 --- a/ide/src/base-ui/select/LitSelectHtml.ts +++ b/ide/src/base-ui/select/LitSelectHtml.ts @@ -258,7 +258,7 @@ export const selectVHtmlStr = ` position: relative; overflow: visible; cursor: pointer; - border-radius: 2px; + border-radius: 16px; outline: none; -webkit-user-select:none ; -moz-user-select:none; diff --git a/ide/src/base-ui/table/lit-table.ts b/ide/src/base-ui/table/lit-table.ts index 167485fff2ce473bb0d4af9db1c3865d6c3586fc..f485b256302420fecd083b2a3dc5167bae674458 100644 --- a/ide/src/base-ui/table/lit-table.ts +++ b/ide/src/base-ui/table/lit-table.ts @@ -67,6 +67,7 @@ export class LitTable extends HTMLElement { private _mode = TableMode.Expand; private columnResizeEnable: boolean = true; private _isSearch: boolean = false; + private maxLength: number = 0; constructor() { super(); @@ -164,6 +165,28 @@ export class LitTable extends HTMLElement { } set recycleDataSource(value) { + // 处理数据按小数点位置对齐 + if (value && value.length) { + // 找出数字部分的最大长度 + value.forEach((item: any) => { + // 提取数字部分（包括小数点） + if (item.durFormat) { + const match = item.durFormat.match(/^(\d+(\.\d+)?)/); + if (match && match[1]) { + // 计算长度（包括小数点） + const length = match[1].length; + this.maxLength = Math.max(this.maxLength, length); + } + } + if (item.percent) { + const match = item.percent.match(/^(\d+(\.\d+)?)/); + if (match && match[1]) { + const length = match[1].length; + this.maxLength = Math.max(this.maxLength, length); + } + } + }) + } if (this.tableElement) { this.isScrollXOutSide = this.tableElement!.scrollWidth > this.tableElement!.clientWidth; this.isRecycleList = true; @@ -1583,6 +1606,28 @@ export class LitTable extends HTMLElement { if (rowObject.data.rowName === 'cpu-profiler' && dataIndex === 'symbolName') { (child as HTMLElement).innerHTML = ''; } else { + //@ts-ignore + if (rowObject.data.durFormat) { //ebpf泳道下的analysis页 + // 提取数字部分（包括小数点） + if (dataIndex === 'durFormat') { + // @ts-ignore + const match = text.match(/^(\d+(\.\d+)?)(.*)$/); + if (match && match[1] && match[3]) { + // 计算需要添加的空格数 + const padding = '\xa0\xa0'.repeat(this.maxLength - match[1].length); + // 构造新的durFormat字符串 + text = padding + match[1] + match[3]; + } + } + if(dataIndex === 'percent'){ + // @ts-ignore + const match = text.match(/^(\d+(\.\d+)?)(.*)$/); + if (match && match[1]) { + const padding = '\xa0\xa0'.repeat(this.maxLength - match[1].length); + text = padding + match[1]; + } + } + } //@ts-ignore (child as HTMLElement).innerHTML = text; } //@ts-ignore diff --git a/ide/src/trace/component/SpFlags.ts b/ide/src/trace/component/SpFlags.ts index 980162198ebd68e6d27271b26bbbb683d90edb23..b1768ec88c3d2679a0d787822babad3148ce27d5 100644 --- a/ide/src/trace/component/SpFlags.ts +++ b/ide/src/trace/component/SpFlags.ts @@ -26,7 +26,7 @@ const CAT_SORT = { 'Thread first': 'thread' }; -const CONFIG_STATE = { +const CONFIG_STATE:unknown = { 'VSync': ['vsyncValue', 'VsyncGeneratior'], 'Start&Finish Trace Category': ['catValue', 'Business first'] }; @@ -85,19 +85,23 @@ export class SpFlags extends BaseElement { private flagSelectListener(configSelect: unknown): void { // @ts-ignore let title = configSelect.getAttribute('title'); - let listSelect = this.shadowRoot?.querySelector(`#${CONFIG_STATE[title as keyof typeof CONFIG_STATE][0]}`); + //@ts-ignore + let listSelect = this.shadowRoot?.querySelector(`#${CONFIG_STATE[title]?.[0]}`); // @ts-ignore FlagsConfig.updateFlagsConfig(title!, configSelect.selectedOptions[0].value); - if (CONFIG_STATE[title as keyof typeof CONFIG_STATE]) { + //@ts-ignore + if (listSelect) { // @ts-ignore if (configSelect.selectedOptions[0].value === 'Enabled') { listSelect?.removeAttribute('disabled'); } else { listSelect?.childNodes.forEach((child: ChildNode) => { let selectEl = child as HTMLOptionElement; - if (child.textContent === CONFIG_STATE[title as keyof typeof CONFIG_STATE][1]) { + //@ts-ignore + if (child.textContent === CONFIG_STATE[title]?.[1]) { selectEl.selected = true; - FlagsConfig.updateFlagsConfig(CONFIG_STATE[title as keyof typeof CONFIG_STATE][0], selectEl.value); + //@ts-ignore + FlagsConfig.updateFlagsConfig(CONFIG_STATE[title]?.[0], selectEl.value); } else { selectEl.selected = false; } @@ -152,13 +156,15 @@ export class SpFlags extends BaseElement { } if (config.title === 'VSync') { - let configKey = CONFIG_STATE['VSync' as keyof typeof CONFIG_STATE][0]; + //@ts-ignore + let configKey = CONFIG_STATE[config.title]?.[0]; let configFooterDiv = this.createPersonOption(VSYNC_VAL, configKey, config.addInfo!.vsyncValue, config.title); configDiv.appendChild(configFooterDiv); } if (config.title === 'Start&Finish Trace Category') { - let configKey = CONFIG_STATE['Start&Finish Trace Category' as keyof typeof CONFIG_STATE][0]; + //@ts-ignore + let configKey = CONFIG_STATE[config.title]?.[0]; let configFooterDiv = this.createPersonOption(CAT_SORT, configKey, config.addInfo!.catValue, config.title); configDiv.appendChild(configFooterDiv); } diff --git a/ide/src/trace/component/SpSystemTrace.ts b/ide/src/trace/component/SpSystemTrace.ts index 74c893600bd83d8aae2dfab66f21c91cf61dec06..0970fb159303332f92b1924587626bfb43ed6d6a 100644 --- a/ide/src/trace/component/SpSystemTrace.ts +++ b/ide/src/trace/component/SpSystemTrace.ts @@ -348,6 +348,7 @@ export class SpSystemTrace extends BaseElement { for (let i = 0; i < flagList.length; i++) { if (flagList[i].type === 'triangle') { flagList.splice(i, 1); + this.timerShaftELFlagChange(this.hoverFlag, null); i--; } } @@ -355,8 +356,10 @@ export class SpSystemTrace extends BaseElement { pushPidToSelection(selection: SelectionParam, id: string): void { let pid = parseInt(id); - if (!selection.processIds.includes(pid)) { - selection.processIds.push(pid); + if (!isNaN(pid)) { + if (!selection.processIds.includes(pid)) { + selection.processIds.push(pid); + } } } // @ts-ignore diff --git a/ide/src/trace/component/chart/SpProcessChart.ts b/ide/src/trace/component/chart/SpProcessChart.ts index e558a6243d4166a004d70bbec457b427a6c0e21c..054d97f5520a062a7d1e177d751dfc222b71809c 100644 --- a/ide/src/trace/component/chart/SpProcessChart.ts +++ b/ide/src/trace/component/chart/SpProcessChart.ts @@ -641,7 +641,6 @@ export class SpProcessChart { this.trace.linkNodes.forEach((linkNodeItem) => this.handler3(e, linkNodeItem)); }, 300); } else { - FuncStruct.selectLineFuncStruct.push(FuncStruct.selectFuncStruct); offsetYTimeOut = setTimeout(() => { this.trace.linkNodes?.forEach((linkProcessItem) => { this.handler4(e, linkProcessItem, processRow); diff --git a/ide/src/trace/component/setting/SpAllocations.ts b/ide/src/trace/component/setting/SpAllocations.ts index 52bda968653a19e998d0c602b736c9df8648776f..091d12413643ec591998f20ff0e089dd9fb89778 100644 --- a/ide/src/trace/component/setting/SpAllocations.ts +++ b/ide/src/trace/component/setting/SpAllocations.ts @@ -518,7 +518,7 @@ export class SpAllocations extends BaseElement { Cmd.getProcess().then((processList: string[]): void => { this.processId?.dataSource(processList, ''); if (processList.length > 0) { - this.processId?.dataSource(processList, 'ALL-Process'); + this.processId?.dataSource(processList, ''); } else { this.processId?.dataSource([], ''); } diff --git a/ide/src/trace/component/setting/SpArkTs.html.ts b/ide/src/trace/component/setting/SpArkTs.html.ts index ff4744845051125c41f7a71b4fc64686a80a0dd7..142fa8b46c74182a0e7666b6da479f02d47bf9ee 100644 --- a/ide/src/trace/component/setting/SpArkTs.html.ts +++ b/ide/src/trace/component/setting/SpArkTs.html.ts @@ -131,8 +131,8 @@ lit-switch { Process Record process - +
diff --git a/ide/src/trace/component/setting/SpArkTs.ts b/ide/src/trace/component/setting/SpArkTs.ts index 94629c1d04c76a9bf76dc4a1192eee7e70f15aca..fb993c35df59ffaea381d077da12a1ecf6898ce6 100644 --- a/ide/src/trace/component/setting/SpArkTs.ts +++ b/ide/src/trace/component/setting/SpArkTs.ts @@ -25,10 +25,11 @@ import { SpCheckDesBox } from './SpCheckDesBox'; import LitSwitch from '../../../base-ui/switch/lit-switch'; import { SpApplication } from '../../SpApplication'; import { SpArkTsHtml } from './SpArkTs.html'; +import { LitSelectV } from '../../../base-ui/select/LitSelectV'; @element('sp-ark-ts') export class SpArkTs extends BaseElement { - private processInput: LitAllocationSelect | undefined | null; + private processInput: LitSelectV | undefined | null; private spCheckDesBox: SpCheckDesBox | undefined | null; private radioBox: LitRadioBox | undefined | null; private interval: HTMLInputElement | undefined | null; @@ -111,24 +112,31 @@ export class SpArkTs extends BaseElement { initElements(): void { this.interval = this.shadowRoot?.querySelector('#interval'); - this.processInput = this.shadowRoot?.querySelector('lit-allocation-select'); - let processInput = this.processInput?.shadowRoot?.querySelector('.multipleSelect') as HTMLDivElement; + this.processInput = this.shadowRoot?.querySelector('lit-select-v'); + let processInput = this.processInput?.shadowRoot?.querySelector('input') as HTMLDivElement; this.cpuSwitch = this.shadowRoot?.querySelector('#cpu-switch') as LitSwitch; processInput!.addEventListener('mousedown', () => { - if (SpRecordTrace.serialNumber === '') { - this.processInput!.processData = []; - this.processInput!.initData(); + if (this.startSamp && (SpRecordTrace.serialNumber === '')) { + this.processInput!.dataSource([], ''); } }); processInput!.addEventListener('mouseup', () => { - if (SpRecordTrace.serialNumber === '') { - this.processInput!.processData = []; - this.processInput!.initData(); + if (this.startSamp) { + if (SpRecordTrace.serialNumber === '') { + this.processInput!.dataSource([], ''); + } else { + Cmd.getDebugProcess().then((processList) => { + if (processList.length > 0) { + this.processInput!.dataSource(processList, ''); + } else { + this.processInput!.dataSource([], ''); + } + }); + } + processInput!.removeAttribute('readonly'); } else { - Cmd.getDebugProcess().then((processList) => { - this.processInput!.processData = processList; - this.processInput!.initData(); - }); + processInput!.setAttribute('readonly', 'readonly'); + return; } }); this.litSwitch = this.shadowRoot?.querySelector('lit-switch') as LitSwitch; diff --git a/ide/src/trace/component/setting/SpFFRTConfig.ts b/ide/src/trace/component/setting/SpFFRTConfig.ts index 86c6e66c53c55c1d162aa7724b5d3c98161d9aa8..fc23522b80c385126f4d16908ed998431f8dd048 100644 --- a/ide/src/trace/component/setting/SpFFRTConfig.ts +++ b/ide/src/trace/component/setting/SpFFRTConfig.ts @@ -195,7 +195,6 @@ export class SpFFRTConfig extends BaseElement { Cmd.getPackage().then((packageList: string[]): void => { let finalDataList = packageList.map(str => str.replace(/\t/g, '')); if (finalDataList.length > 0) { - processInputEl.readOnly = true; startupPNameEl.dataSource(finalDataList, 'ALL-Process'); } else { startupPNameEl.dataSource([], ''); @@ -261,7 +260,6 @@ export class SpFFRTConfig extends BaseElement { Cmd.getProcess().then((processList: string[]): void => { selectInputEl.dataSource(processList, ''); if (processList.length > 0) { - processInputEl.readOnly = true; selectInputEl.dataSource(processList, 'ALL-Process'); } else { selectInputEl.dataSource([], ''); diff --git a/ide/src/trace/component/setting/SpHilogRecord.html.ts b/ide/src/trace/component/setting/SpHilogRecord.html.ts index d0454da906465c414f4ed2fa3949b04e529a37ca..a2f1c6cc890d3586e96c96ad82f78b44cac11184 100644 --- a/ide/src/trace/component/setting/SpHilogRecord.html.ts +++ b/ide/src/trace/component/setting/SpHilogRecord.html.ts @@ -92,9 +92,9 @@ export const SpHiLogRecordHtml = ` Process Record process
- - +
diff --git a/ide/src/trace/component/setting/SpHilogRecord.ts b/ide/src/trace/component/setting/SpHilogRecord.ts index 1c3f87c4b9b3c2cf0459b6016dcc1fe00e5d341c..628c23a20dd79771a547a6e77afaf47921f72f87 100644 --- a/ide/src/trace/component/setting/SpHilogRecord.ts +++ b/ide/src/trace/component/setting/SpHilogRecord.ts @@ -23,11 +23,12 @@ import { Cmd } from '../../../command/Cmd'; import { LitAllocationSelect } from '../../../base-ui/select/LitAllocationSelect'; import { LitSelect } from '../../../base-ui/select/LitSelect'; import { SpHiLogRecordHtml } from './SpHilogRecord.html'; +import { LitSelectV } from '../../../base-ui/select/LitSelectV'; @element('sp-hi-log') export class SpHilogRecord extends BaseElement { private vmTrackerSwitch: LitSwitch | undefined | null; - private processSelectEl: LitAllocationSelect | undefined | null; + private processSelectEl: LitSelectV | undefined | null; private logsSelectEl: LitSelect | undefined | null; get recordHilog(): boolean { @@ -47,7 +48,7 @@ export class SpHilogRecord extends BaseElement { initElements(): void { this.vmTrackerSwitch = this.shadowRoot?.querySelector('.hilog-switch') as LitSwitch; - this.processSelectEl = this.shadowRoot?.querySelector('.record-process-select') as LitAllocationSelect; + this.processSelectEl = this.shadowRoot?.querySelector('.record-process-select') as LitSelectV; this.logsSelectEl = this.shadowRoot?.querySelector('.record-logs-select') as LitSelect; let hiLogConfigList = this.shadowRoot?.querySelectorAll('.hilog-config-top'); this.vmTrackerSwitch.addEventListener('change', () => { @@ -62,20 +63,24 @@ export class SpHilogRecord extends BaseElement { }); } }); - let processInputEl = this.processSelectEl.shadowRoot?.querySelector('.multipleSelect') as HTMLInputElement; + let processInputEl = this.processSelectEl.shadowRoot?.querySelector('input') as HTMLInputElement; processInputEl.addEventListener('mousedown', () => { - if (SpRecordTrace.serialNumber === '') { - this.processSelectEl!.processData = []; - this.processSelectEl!.initData(); + if (this.recordHilog) { + if ((SpRecordTrace.serialNumber === '')) { + this.processSelectEl!.dataSource([], ''); + } else { + Cmd.getProcess().then((processList) => { + if (processList.length > 0) { + this.processSelectEl!.dataSource(processList, 'ALL-Process'); + } else { + this.processSelectEl!.dataSource([], ''); + } + }); + } + processInputEl!.removeAttribute('readonly'); } else { - Cmd.getProcess().then((processList) => { - if (processList.length > 0 && this.recordHilog) { - processInputEl!.setAttribute('readonly', 'readonly'); - } - processList.unshift('ALL-Process'); - this.processSelectEl!.processData = processList; - this.processSelectEl!.initData(); - }); + processInputEl!.setAttribute('readonly', 'readonly'); + return; } }); } diff --git a/ide/src/trace/component/setting/SpHisysEvent.html.ts b/ide/src/trace/component/setting/SpHisysEvent.html.ts index 6df54d17929014dc71edc203c367ffe2d13e0a60..0afe05d6f90e9d852023a850f6e058ca9097bdb3 100644 --- a/ide/src/trace/component/setting/SpHisysEvent.html.ts +++ b/ide/src/trace/component/setting/SpHisysEvent.html.ts @@ -88,17 +88,17 @@ export const SpHiSysEventHtml = `