1/* 2 * Copyright (C) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16import { BaseElement, element } from '../../../base-ui/BaseElement'; 17import { log } from '../../../log/Log'; 18import { SpRecordTrace } from '../SpRecordTrace'; 19import { Cmd } from '../../../command/Cmd'; 20import LitSwitch from '../../../base-ui/switch/lit-switch'; 21import { LitSlider } from '../../../base-ui/slider/LitSlider'; 22import { LitSelectV } from '../../../base-ui/select/LitSelectV'; 23import { SpAllocationHtml } from './SpAllocation.html'; 24import { NUM_16384, NUM_1800, NUM_30, NUM_300, NUM_3600, NUM_450, NUM_60, NUM_600 } from '../../bean/NumBean'; 25import { LitSelect } from '../../../base-ui/select/LitSelect'; 26 27@element('sp-allocations') 28export class SpAllocations extends BaseElement { 29 // normal option 30 private processId: LitSelectV | null | undefined; 31 private packageName: LitSelect | null | undefined; 32 private unwindEL: HTMLInputElement | null | undefined; 33 private intervalResultInput: HTMLInputElement | null | undefined; 34 private fpUnWind: LitSwitch | null | undefined; 35 private statisticsSlider: LitSlider | null | undefined; 36 private useStatisticsEl: LitSwitch | null | undefined; 37 private recordStatisticsResult: HTMLDivElement | null | undefined; 38 private addOptionButton: HTMLButtonElement | undefined | null; 39 // advance option 40 private recordAccuratelyDivEl: HTMLDivElement | undefined | null; 41 private offlineSymbolizationDivEl: HTMLDivElement | undefined | null; 42 private maxUnwindLevelEl: HTMLDivElement | undefined | null; 43 private sharedMemorySizeEl: HTMLDivElement | undefined | null; 44 private filterMemorySizeEl: HTMLDivElement | undefined | null; 45 private sampleIntervalEl: HTMLDivElement | undefined | null; 46 private useStartupEl: HTMLDivElement | undefined | null; 47 private useResponseLibEl: HTMLDivElement | undefined | null; 48 private jsStackRecordDepthEl: HTMLDivElement | undefined | null; 49 private napiRecordEl: HTMLDivElement | undefined | null; 50 private advanceItems: Array<HTMLDivElement | undefined | null> = []; 51 private shareMemory: HTMLInputElement | null | undefined; 52 private shareMemoryUnit: HTMLSelectElement | null | undefined; 53 private filterMemory: HTMLInputElement | null | undefined; 54 private recordAccurately: LitSwitch | null | undefined; 55 private offlineSymbol: LitSwitch | null | undefined; 56 private startupMode: LitSwitch | null | undefined; 57 private jsStackModel: LitSwitch | null | undefined; 58 private responseLibMode: LitSwitch | null | undefined; 59 private napiName: HTMLInputElement | null | undefined; 60 private jsStackDepth: HTMLInputElement | null | undefined; 61 private statisticsIntervalInput: HTMLInputElement | null | undefined; 62 private statisticsIntervalName: HTMLSpanElement | null | undefined; 63 private statisticsIntervalRange: HTMLSpanElement | null | undefined; 64 65 set startSamp(allocationStart: boolean) { 66 if (allocationStart) { 67 this.setAttribute('startSamp', ''); 68 } else { 69 this.removeAttribute('startSamp'); 70 } 71 } 72 73 get startSamp(): boolean { 74 return this.hasAttribute('startSamp'); 75 } 76 77 get appProcess(): string { 78 return this.processId!.value || this.packageName!.value || ''; 79 } 80 81 get unwind(): number { 82 log(`unwind value is :${this.unwindEL!.value}`); 83 return Number(this.unwindEL!.value); 84 } 85 86 get shared(): number { 87 let value = this.shareMemory?.value || ''; 88 log(`shareMemory value is :${value}`); 89 if (value !== '') { 90 return Number(this.shareMemory?.value) || NUM_16384; 91 } 92 return NUM_16384; 93 } 94 95 get filter(): number { 96 let value = this.filterMemory?.value || ''; 97 log(`filter value is :${value}`); 98 if (value !== '') { 99 return Number(value); 100 } 101 return 0; 102 } 103 104 get fp_unwind(): boolean { 105 let value = this.fpUnWind?.checked; 106 if (value !== undefined) { 107 return value; 108 } 109 return true; 110 } 111 112 get record_accurately(): boolean { 113 let value = this.recordAccurately?.checked; 114 if (value !== undefined) { 115 return value; 116 } 117 return true; 118 } 119 120 get offline_symbolization(): boolean { 121 let value = this.offlineSymbol?.checked; 122 if (value !== undefined) { 123 return value; 124 } 125 return true; 126 } 127 128 get record_statistics(): boolean { 129 let value = this.useStatisticsEl!.checked; 130 if (value !== undefined) { 131 return value; 132 } 133 return true; 134 } 135 136 get statistics_interval(): number { 137 if (this.recordStatisticsResult?.hasAttribute('percentValue')) { 138 return Number(this.recordStatisticsResult?.getAttribute('percentValue')); 139 } 140 return 10; 141 } 142 143 get response_lib_mode(): boolean { 144 let value = this.responseLibMode?.checked; 145 if (value !== undefined) { 146 return value; 147 } 148 return false; 149 } 150 151 get startup_mode(): boolean { 152 let value = this.startupMode?.checked; 153 if (value !== undefined) { 154 return value; 155 } 156 return false; 157 } 158 159 set startup_mode(value: boolean) { 160 if (this.startupMode) { 161 this.startupMode.checked = value; 162 } 163 } 164 165 get recordJsStack(): boolean { 166 let value = this.jsStackModel?.checked; 167 if (value !== undefined) { 168 return value; 169 } 170 return false; 171 } 172 173 set recordJsStack(value: boolean) { 174 if (this.jsStackModel) { 175 this.jsStackModel.checked = value; 176 } 177 } 178 179 get expandPids(): number[] { 180 let allPidList: number[] = []; 181 const processIdValue = this.processId?.value; 182 if (processIdValue && processIdValue.length > 0) { 183 if (/^(?:\d+(?:,\d+)*)?$/.test(processIdValue)) { 184 allPidList = processIdValue.split(',').map(pid => pid.trim()).map(Number); 185 } else if (/\((\d+)\)(?:,\((\d+)\))*$/.test(processIdValue)) { 186 let result = processIdValue.match(/\((.+?)\)/g); 187 if (result) { 188 for (let index = 0; index < result.length; index++) { 189 let item = result[index]; 190 let currentPid = item!.replace('(', '').replace(')', ''); 191 allPidList.push(Number(currentPid)); 192 } 193 } 194 } else { 195 return []; 196 } 197 } 198 return allPidList; 199 } 200 201 get sample_interval(): number { 202 return Number(this.statisticsIntervalInput!.value); 203 } 204 205 get filter_napi_name(): string { 206 if (this.jsStackModel?.checked && !this.fp_unwind) { 207 return this.napiName!.value || ''; 208 } 209 return ''; 210 } 211 212 get max_js_stack_depth(): number { 213 if (this.jsStackModel?.checked) { 214 return Number(this.jsStackDepth!.value) || 10; 215 } 216 return 0; 217 } 218 219 initElements(): void { 220 // normal option 221 this.processId = this.shadowRoot?.getElementById('pid') as LitSelectV; 222 this.packageName = this.shadowRoot?.getElementById('packageName') as LitSelect; 223 this.unwindEL = this.shadowRoot?.getElementById('unwind') as HTMLInputElement; 224 this.fpUnWind = this.shadowRoot?.getElementById('use_fp_unwind') as LitSwitch; 225 this.statisticsSlider = this.shadowRoot?.querySelector<LitSlider>('#interval-slider') as LitSlider; 226 this.recordStatisticsResult = this.shadowRoot?.querySelector<HTMLDivElement>('.record-statistics-result'); 227 this.addOptionButton = this.shadowRoot?.querySelector<HTMLButtonElement>('#addOptions'); 228 this.intervalResultInput = this.shadowRoot?.querySelector('.interval-result') as HTMLInputElement; 229 // advance option 230 this.recordAccuratelyDivEl = this.shadowRoot?.getElementById('record_accurately_div') as HTMLDivElement; 231 this.offlineSymbolizationDivEl = this.shadowRoot?.getElementById('offline_symbolization_div') as HTMLDivElement; 232 this.jsStackRecordDepthEl = this.shadowRoot?.getElementById('js-stack-depth-div') as HTMLDivElement; 233 this.napiRecordEl = this.shadowRoot?.getElementById('napi-div') as HTMLDivElement; 234 this.maxUnwindLevelEl = this.shadowRoot?.getElementById('max-unwind-level-el') as HTMLDivElement; 235 this.sharedMemorySizeEl = this.shadowRoot?.getElementById('shared-memory-size-el') as HTMLDivElement; 236 this.filterMemorySizeEl = this.shadowRoot?.getElementById('filter-memory-size-el') as HTMLDivElement; 237 this.sampleIntervalEl = this.shadowRoot?.getElementById('sample-interval-el') as HTMLDivElement; 238 this.useStartupEl = this.shadowRoot?.getElementById('use-startup-el') as HTMLDivElement; 239 this.useResponseLibEl = this.shadowRoot?.getElementById('use-response-lib-el') as HTMLDivElement; 240 241 this.recordAccurately = this.shadowRoot?.getElementById('use_record_accurately') as LitSwitch; 242 this.shareMemory = this.shadowRoot?.getElementById('shareMemory') as HTMLInputElement; 243 this.shareMemoryUnit = this.shadowRoot?.getElementById('shareMemoryUnit') as HTMLSelectElement; 244 this.filterMemory = this.shadowRoot?.getElementById('filterSized') as HTMLInputElement; 245 this.offlineSymbol = this.shadowRoot?.getElementById('use_offline_symbolization') as LitSwitch; 246 this.startupMode = this.shadowRoot?.getElementById('use_startup_mode') as LitSwitch; 247 this.jsStackModel = this.shadowRoot?.getElementById('use_js-stack') as LitSwitch; 248 this.responseLibMode = this.shadowRoot?.getElementById('response_lib_mode') as LitSwitch; 249 this.useStatisticsEl = this.shadowRoot?.getElementById('use_statistics') as LitSwitch; 250 this.statisticsIntervalInput = this.shadowRoot?.getElementById('statistics-interval-input') as HTMLInputElement; 251 this.napiName = this.shadowRoot?.getElementById('napiName') as HTMLInputElement; 252 this.jsStackDepth = this.shadowRoot?.getElementById('jsStackDepth') as HTMLInputElement; 253 this.statisticsIntervalName = this.shadowRoot?.getElementById('statistics-interval-name') as HTMLSpanElement; 254 this.statisticsIntervalRange = this.shadowRoot?.getElementById('statistics-interval-range') as HTMLSpanElement; 255 this.initNativeSwitchOption(); 256 } 257 258 initHtml(): string { 259 return SpAllocationHtml; 260 } 261 262 connectedCallback(): void { 263 this.unwindEL?.addEventListener('keydown', this.handleInputChangeEvent); 264 this.shareMemory?.addEventListener('keydown', this.handleInputChangeEvent); 265 this.shareMemoryUnit?.addEventListener('keydown', this.handleInputChangeEvent); 266 this.filterMemory?.addEventListener('keydown', this.handleInputChangeEvent); 267 this.intervalResultInput?.addEventListener('keydown', this.handleInputChangeEvent); 268 this.statisticsSlider?.addEventListener('input', this.statisticsSliderInputEvent); 269 this.intervalResultInput?.addEventListener('input', this.statisticsValueInputEvent); 270 this.intervalResultInput?.addEventListener('focusout', this.statisticsFocusOutEvent); 271 this.statisticsSlider?.shadowRoot 272 ?.querySelector('#slider')! 273 .addEventListener('mouseup', this.statisticsSliderMouseupEvent); 274 this.startupMode?.addEventListener('change', this.startupModeChangeEvent); 275 this.jsStackModel?.addEventListener('change', this.jsStackModelChangeEvent); 276 this.addOptionButton?.addEventListener('click', this.advanceOptionClickEvent); 277 this.fpUnWind?.addEventListener('change', this.fpUnWindChangeEvent); 278 this.useStatisticsEl?.addEventListener('change', this.useStatisticsChangeEvent); 279 this.statisticsIntervalInput?.addEventListener('input', this.statisticsIntervalInputEvent); 280 this.statisticsIntervalInput?.addEventListener('keyup', this.statisticsIntervalKeyUpEvent); 281 } 282 283 disconnectedCallback(): void { 284 this.unwindEL?.removeEventListener('keydown', this.handleInputChangeEvent); 285 this.shareMemory?.removeEventListener('keydown', this.handleInputChangeEvent); 286 this.shareMemoryUnit?.removeEventListener('keydown', this.handleInputChangeEvent); 287 this.filterMemory?.removeEventListener('keydown', this.handleInputChangeEvent); 288 this.intervalResultInput?.removeEventListener('keydown', this.handleInputChangeEvent); 289 this.statisticsSlider?.removeEventListener('input', this.statisticsSliderInputEvent); 290 this.intervalResultInput?.removeEventListener('input', this.statisticsValueInputEvent); 291 this.intervalResultInput?.removeEventListener('focusout', this.statisticsFocusOutEvent); 292 this.statisticsSlider?.shadowRoot 293 ?.querySelector('#slider')! 294 .removeEventListener('mouseup', this.statisticsSliderMouseupEvent); 295 this.startupMode?.removeEventListener('change', this.startupModeChangeEvent); 296 this.jsStackModel?.removeEventListener('change', this.jsStackModelChangeEvent); 297 this.addOptionButton?.removeEventListener('click', this.advanceOptionClickEvent); 298 this.fpUnWind?.removeEventListener('change', this.fpUnWindChangeEvent); 299 this.useStatisticsEl?.removeEventListener('change', this.useStatisticsChangeEvent); 300 this.statisticsIntervalInput?.removeEventListener('input', this.statisticsIntervalInputEvent); 301 this.statisticsIntervalInput?.removeEventListener('keyup', this.statisticsIntervalKeyUpEvent); 302 } 303 304 handleInputChangeEvent = (ev: KeyboardEvent): void => { 305 // @ts-ignore 306 if (ev.key === '0' && ev.target.value.length === 1 && ev.target.value === '0') { 307 ev.preventDefault(); 308 } 309 }; 310 311 statisticsSliderInputEvent = (): void => { 312 this.statisticsSlider!.sliderStyle = { 313 minRange: 0, 314 maxRange: 3600, 315 defaultValue: `${this.recordStatisticsResult!.getAttribute('percent')}`, 316 resultUnit: 'S', 317 stepSize: 450, 318 lineColor: 'var(--dark-color3,#46B1E3)', 319 buttonColor: '#999999', 320 }; 321 this.intervalResultInput!.style.color = 'var(--dark-color1,#000000)'; 322 if (this.recordStatisticsResult!.hasAttribute('percent')) { 323 let step = Math.round(Number(this.recordStatisticsResult!.getAttribute('percent')) / NUM_450); 324 this.recordStatisticsResult!.setAttribute('percentValue', `${stepValue[step]}`); 325 this.intervalResultInput!.value = `${stepValue[step]}`; 326 } 327 }; 328 329 statisticsValueInputEvent = (): void => { 330 if (this.intervalResultInput!.value === '0') { 331 this.useStatisticsEl!.checked = false; 332 this.useStatisticsChangeHandle(false); 333 } else { 334 this.statisticsIntervalHandle(); 335 } 336 }; 337 338 statisticsFocusOutEvent = (): void => { 339 let parentElement = this.statisticsSlider!.parentNode as Element; 340 if (this.intervalResultInput!.value.trim() === '') { 341 parentElement.setAttribute('percent', '3600'); 342 this.intervalResultInput!.value = '3600'; 343 this.intervalResultInput!.style.color = 'var(--dark-color,#6a6f77)'; 344 parentElement.setAttribute('percent', this.intervalResultInput!.value); 345 parentElement.setAttribute('percentValue', this.intervalResultInput!.value); 346 this.statisticsSlider!.percent = this.intervalResultInput!.value; 347 let htmlInputElement = this.statisticsSlider!.shadowRoot?.querySelector('#slider') as HTMLInputElement; 348 htmlInputElement.value = this.intervalResultInput!.value; 349 } 350 }; 351 352 useStatisticsChangeEvent = (): void => { 353 let useStatistics = this.useStatisticsEl!.checked; 354 this.useStatisticsChangeHandle(useStatistics); 355 }; 356 357 fpUnWindChangeEvent = (): void => { 358 this.napiName!.disabled = !(!this.fp_unwind && this.recordJsStack); 359 }; 360 361 advanceOptionClickEvent = (): void => { 362 if (!this.startSamp) { 363 return; 364 } 365 this.advanceOptionHandle(this.addOptionButton!.textContent!); 366 }; 367 368 startupModeChangeEvent = (): void => { 369 let process = this.processId?.shadowRoot?.querySelector('input') as HTMLInputElement; 370 let processDiv = this.processId?.shadowRoot?.querySelector('.root') as HTMLDivElement; 371 process.value = ''; 372 let packageInput = this.packageName?.shadowRoot?.querySelector('input') as HTMLInputElement; 373 let packageDiv = this.packageName?.shadowRoot?.querySelector('.root') as HTMLDivElement; 374 packageInput.value = ''; 375 if (this.startup_mode) { 376 this.packageName!.showItem = ''; 377 this.packageName!.style.display = 'block'; 378 this.processId!.style.display = 'none'; 379 packageDiv.style.width = 'auto'; 380 packageInput!.placeholder = 'please select package'; 381 this.processId!.dataSource([], ''); 382 } else { 383 this.processId!.showItems = []; 384 this.packageName!.style.display = 'none'; 385 this.processId!.style.display = 'block'; 386 processDiv.style.width = 'auto'; 387 process!.placeholder = 'please select process'; 388 this.packageName!.dataSource = []; 389 } 390 }; 391 392 jsStackModelChangeEvent = (): void => { 393 this.jsStackDepth!.disabled = !this.recordJsStack; 394 this.napiName!.disabled = !(!this.fp_unwind && this.recordJsStack); 395 }; 396 397 statisticsSliderMouseupEvent = (): void => { 398 setTimeout((): void => { 399 let percentValue = this.recordStatisticsResult!.getAttribute('percent'); 400 let index = Math.round(Number(percentValue) / NUM_450); 401 index = index < 1 ? 0 : index; 402 this.intervalResultInput!.value = `${stepValue[index]}`; 403 this.recordStatisticsResult!.setAttribute('percentValue', `${stepValue[index]}`); 404 if (this.intervalResultInput!.value === '0') { 405 this.useStatisticsEl!.checked = false; 406 this.useStatisticsChangeHandle(false); 407 } 408 }); 409 }; 410 411 statisticsIntervalInputEvent = (): void => { 412 let intervalValue = Number(this.statisticsIntervalInput!.value); 413 if (intervalValue > 65535) { 414 this.statisticsIntervalInput!.value = '65535'; 415 } 416 if (intervalValue === 0 || this.statisticsIntervalInput!.value.startsWith('0')) { 417 let resultValue = parseInt(this.statisticsIntervalInput!.value, 10); 418 this.statisticsIntervalInput!.value = `${resultValue}`; 419 } 420 }; 421 422 statisticsIntervalKeyUpEvent = (): void => { 423 this.statisticsIntervalInput!.value = this.statisticsIntervalInput!.value.replace(/\D/g, ''); 424 }; 425 426 private useStatisticsChangeHandle(useStatistics: boolean): void { 427 if (useStatistics) { 428 this.intervalResultInput!.value = '10'; 429 this.statisticsIntervalHandle(); 430 this.statisticsIntervalName!.textContent = 'Sample Interval'; 431 this.statisticsIntervalRange!.textContent = 'Rang is 0 - 65535, default 0 byte'; 432 this.statisticsIntervalInput!.value = '0'; 433 this.statisticsSlider!.disabled = false; 434 this.intervalResultInput!.disabled = false; 435 } else { 436 this.intervalResultInput!.value = '0'; 437 this.statisticsIntervalHandle(); 438 this.statisticsIntervalName!.textContent = 'Malloc Free Matching Interval'; 439 this.statisticsIntervalRange!.textContent = 'Rang is 0 - 65535, default 10 s'; 440 this.statisticsIntervalInput!.value = '10'; 441 this.statisticsSlider!.disabled = true; 442 this.intervalResultInput!.disabled = true; 443 } 444 } 445 446 private advanceOptionHandle(textValue: string): void { 447 this.resetAdvanceItems(); 448 let displayStyle = 'none'; 449 if (textValue === 'Advance Options') { 450 this.addOptionButton!.textContent = 'Normal Options'; 451 displayStyle = 'flex'; 452 } else { 453 this.addOptionButton!.textContent = 'Advance Options'; 454 } 455 this.advanceItems.forEach((itemEl) => { 456 if (itemEl) { 457 itemEl.style.display = displayStyle; 458 } 459 }); 460 this.jsStackDepth!.disabled = !this.recordJsStack; 461 this.napiName!.disabled = !(!this.fp_unwind && this.recordJsStack); 462 } 463 464 private resetAdvanceItems(): void { 465 this.advanceItems = [ 466 this.recordAccuratelyDivEl, 467 this.recordAccuratelyDivEl, 468 this.offlineSymbolizationDivEl, 469 this.jsStackRecordDepthEl, 470 this.napiRecordEl, 471 this.maxUnwindLevelEl, 472 this.sharedMemorySizeEl, 473 this.filterMemorySizeEl, 474 this.sampleIntervalEl, 475 this.useStartupEl, 476 this.useResponseLibEl, 477 ]; 478 } 479 480 private initNativeSwitchOption(): void { 481 this.packageName!.style.display = 'none'; 482 let processInputEl = this.processId!.shadowRoot?.querySelector('input') as HTMLInputElement; 483 processInputEl.addEventListener('mousedown', (): void => { 484 this.processMouseDownHandler(processInputEl); 485 }); 486 let packageInput = this.packageName!.shadowRoot?.querySelector('input') as HTMLInputElement; 487 packageInput.addEventListener('mousedown', (): void => { 488 this.packageMouseDownHandler(packageInput); 489 }); 490 this.statisticsSlider!.sliderStyle = { 491 minRange: 0, 492 maxRange: 3600, 493 defaultValue: '900', 494 resultUnit: 'S', 495 stepSize: 450, 496 lineColor: 'var(--dark-color3,#46B1E3)', 497 buttonColor: '#999999', 498 }; 499 let parentElement = this.statisticsSlider!.parentNode as Element; 500 this.intervalResultInput!.value = '10'; 501 parentElement.setAttribute('percent', '3600'); 502 this.intervalResultInput!.style.color = 'var(--dark-color1,#000000)'; 503 let litSwitch = this.shadowRoot?.querySelector('#switch-disabled') as LitSwitch; 504 litSwitch.addEventListener('change', (event: Event): void => { 505 // @ts-ignore 506 let detail = event.detail; 507 if (detail.checked) { 508 this.unDisable(); 509 } else { 510 this.disable(); 511 } 512 this.addOptionButton!.textContent = 'Advance Options'; 513 }); 514 this.packageName!.style.display = 'none'; 515 this.processId!.style.display = 'block'; 516 let processDivEl = this.processId?.shadowRoot?.querySelector('.root') as HTMLDivElement; 517 if (processDivEl) { 518 processDivEl.style.width = 'auto'; 519 } 520 this.disable(); 521 } 522 523 private processMouseDownHandler(process: HTMLInputElement): void { 524 if (this.startSamp && !this.startup_mode) { 525 Cmd.getProcess().then((processList: string[]): void => { 526 this.processId?.dataSource(processList, ''); 527 if (processList.length > 0) { 528 this.processId?.dataSource(processList, ''); 529 } else { 530 this.processId?.dataSource([], ''); 531 } 532 }); 533 process.readOnly = false; 534 } else { 535 process.readOnly = true; 536 return; 537 } 538 if (this.startSamp && (SpRecordTrace.serialNumber === '' || this.startup_mode)) { 539 this.processId?.dataSource([], ''); 540 } else { 541 } 542 } 543 544 private packageMouseDownHandler(packageInput: HTMLInputElement): void { 545 if (this.startSamp && this.startup_mode) { 546 Cmd.getPackage().then((packageList: string[]): void => { 547 let finalDataList = packageList.map(str => str.replace(/\t/g, '')); 548 if (finalDataList.length > 0) { 549 this.packageName!.dataSource = finalDataList; 550 } else { 551 this.packageName!.dataSource = []; 552 } 553 }); 554 packageInput.readOnly = false; 555 } else { 556 packageInput.readOnly = true; 557 return; 558 } 559 } 560 561 private statisticsIntervalHandle(): void { 562 let parentElement = this.statisticsSlider!.parentNode as Element; 563 if (this.recordStatisticsResult!.hasAttribute('percent')) { 564 this.recordStatisticsResult!.removeAttribute('percent'); 565 } 566 this.intervalResultInput!.style.color = 'var(--dark-color1,#000000)'; 567 this.intervalResultInput!.parentElement!.style.backgroundColor = 'var(--dark-background5,#F2F2F2)'; 568 this.intervalResultInput!.style.backgroundColor = 'var(--dark-background5,#F2F2F2)'; 569 if (this.intervalResultInput!.value.trim() === '') { 570 this.intervalResultInput!.style.color = 'red'; 571 parentElement.setAttribute('percent', '3600'); 572 return; 573 } 574 if ( 575 Number(this.intervalResultInput!.value) < this.statisticsSlider!.sliderStyle.minRange || 576 Number(this.intervalResultInput!.value) > this.statisticsSlider!.sliderStyle.maxRange 577 ) { 578 this.intervalResultInput!.style.color = 'red'; 579 parentElement.setAttribute('percent', '3600'); 580 } else { 581 let defaultSize = 0; 582 let stepSize = 450; 583 let inputValue = Number(this.intervalResultInput!.value); 584 for (let stepIndex = 0; stepIndex < stepValue.length; stepIndex++) { 585 let currentValue = stepValue[stepIndex]; 586 if (inputValue === currentValue) { 587 defaultSize = stepIndex * stepSize; 588 break; 589 } else if (inputValue < currentValue && stepIndex !== 0) { 590 defaultSize = 591 ((inputValue - stepValue[stepIndex - 1]) / (currentValue - stepValue[stepIndex - 1])) * stepSize + 592 stepSize * (stepIndex - 1); 593 break; 594 } 595 } 596 this.statisticsSlider!.percent = `${defaultSize}`; 597 let htmlInputElement = this.statisticsSlider!.shadowRoot?.querySelector('#slider') as HTMLInputElement; 598 this.statisticsSlider!.sliderStyle = { 599 minRange: 0, 600 maxRange: 3600, 601 defaultValue: `${defaultSize}`, 602 resultUnit: 'S', 603 stepSize: 1, 604 lineColor: 'var(--dark-color3,#46B1E3)', 605 buttonColor: '#999999', 606 }; 607 htmlInputElement.value = `${defaultSize}`; 608 parentElement.setAttribute('percent', this.intervalResultInput!.value); 609 parentElement.setAttribute('percentValue', this.intervalResultInput!.value); 610 } 611 } 612 613 private unDisable(): void { 614 this.startSamp = true; 615 if (this.fpUnWind) { 616 this.fpUnWind.disabled = false; 617 } 618 if (this.recordAccurately) { 619 this.recordAccurately.disabled = false; 620 } 621 if (this.offlineSymbol) { 622 this.offlineSymbol.disabled = false; 623 } 624 if (this.startupMode) { 625 this.startupMode.disabled = false; 626 } 627 if (this.jsStackModel) { 628 this.jsStackModel.disabled = false; 629 } 630 if (this.responseLibMode) { 631 this.responseLibMode.disabled = false; 632 } 633 if (this.statisticsIntervalInput) { 634 this.statisticsIntervalInput.disabled = false; 635 } 636 if (this.useStatisticsEl) { 637 this.useStatisticsEl.disabled = false; 638 } 639 this.processId!.removeAttribute('disabled'); 640 let inputBoxes = this.shadowRoot?.querySelectorAll<HTMLInputElement>('.inputBoxes'); 641 inputBoxes!.forEach((item: HTMLInputElement): void => { 642 item.disabled = false; 643 }); 644 if (this.startup_mode) { 645 this.packageName!.removeAttribute('disabled'); 646 } else { 647 this.processId!.removeAttribute('disabled'); 648 } 649 this.statisticsSlider!.disabled = false; 650 } 651 652 private disable(): void { 653 this.startSamp = false; 654 this.advanceOptionHandle('Normal Options'); 655 if (this.fpUnWind) { 656 this.fpUnWind.disabled = true; 657 } 658 if (this.recordAccurately) { 659 this.recordAccurately.disabled = true; 660 } 661 if (this.startupMode) { 662 this.startupMode.disabled = true; 663 } 664 if (this.jsStackModel) { 665 this.jsStackModel.disabled = true; 666 } 667 if (this.offlineSymbol) { 668 this.offlineSymbol.disabled = true; 669 } 670 if (this.responseLibMode) { 671 this.responseLibMode.disabled = true; 672 } 673 if (this.statisticsIntervalInput) { 674 this.statisticsIntervalInput.disabled = true; 675 } 676 if (this.useStatisticsEl) { 677 this.useStatisticsEl.disabled = true; 678 } 679 this.processId!.setAttribute('disabled', ''); 680 let inputBoxes = this.shadowRoot?.querySelectorAll<HTMLInputElement>('.inputBoxes'); 681 inputBoxes!.forEach((item: HTMLInputElement): void => { 682 item.disabled = true; 683 }); 684 if (this.startup_mode) { 685 this.packageName!.setAttribute('disabled', ''); 686 } else { 687 this.processId!.setAttribute('disabled', ''); 688 } 689 this.statisticsSlider!.disabled = true; 690 } 691} 692 693const stepValue: number[] = [0, 1, 10, NUM_30, NUM_60, NUM_300, NUM_600, NUM_1800, NUM_3600]; 694