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.js"; 17import "../../../base-ui/radiobox/LitRadioBox.js"; 18import {LitRadioBox} from "../../../base-ui/radiobox/LitRadioBox.js"; 19import "../../../base-ui/slider/LitSlider.js"; 20import {LitSlider} from "../../../base-ui/slider/LitSlider.js"; 21import "../../../base-ui/popover/LitPopover.js" 22import {info} from "../../../log/Log.js"; 23 24@element('record-setting') 25export class SpRecordSetting extends BaseElement { 26 private memoryBufferSlider: LitSlider | undefined; 27 private maxDurationSliders: LitSlider | undefined; 28 private radioBox: LitRadioBox | undefined 29 private bufferNumber: HTMLElement | undefined 30 private durationNumber: HTMLElement | undefined 31 private outputPath: HTMLInputElement | undefined 32 private lastMemoryValue: string | undefined; 33 private lastDurationValue: string | undefined; 34 35 get recordMod(): boolean { 36 if (this.radioBox) { 37 return this.radioBox.checked 38 } 39 return false; 40 } 41 42 get output(): string { 43 if (this.outputPath && this.outputPath.value != '') { 44 return "/data/local/tmp/" + this.outputPath.value 45 } 46 return "/data/local/tmp/hiprofiler_data.htrace"; 47 } 48 49 get bufferSize(): number { 50 if (this.bufferNumber?.hasAttribute('percent')) { 51 info("bufferSize is : ", this.bufferNumber!.getAttribute("percent")) 52 return Number(this.bufferNumber!.getAttribute("percent")); 53 } 54 return 64 55 } 56 57 get maxDur(): number { 58 if (this.durationNumber?.hasAttribute('percent')) { 59 info("maxDur is : ", this.durationNumber!.getAttribute("percent")) 60 return Number(this.durationNumber!.getAttribute("percent")); 61 } 62 return 50 63 } 64 65 resetValue(): void{ 66 let bufferInput = this.shadowRoot?.querySelector('.memory_buffer_result') as HTMLInputElement; 67 let parentElement = this.memoryBufferSlider!.parentNode as Element; 68 if (bufferInput.style.color != 'var(--dark-color1,#000000)' && this.lastMemoryValue) { 69 bufferInput.value = this.lastMemoryValue + ''; 70 this.memoryBufferSlider!.percent = this.lastMemoryValue + ''; 71 this.memoryBufferSlider!.sliderStyle = { 72 minRange: 4, 73 maxRange: 512, 74 defaultValue: this.lastMemoryValue + '', 75 resultUnit: "MB", 76 stepSize: 2, 77 lineColor: "var(--dark-color3,#46B1E3)", 78 buttonColor: "#999999" 79 }; 80 parentElement.setAttribute('percent', this.lastMemoryValue + ''); 81 this.lastMemoryValue = this.lastMemoryValue + '' 82 bufferInput.style.color = 'var(--dark-color1,#000000)'; 83 } 84 85 let durationInput = this.shadowRoot?.querySelector('.max_duration_result') as HTMLInputElement; 86 let durationEl = this.maxDurationSliders!.parentNode as Element; 87 if (durationInput.style.color != 'var(--dark-color1,#000000)' && this.lastDurationValue) { 88 durationInput.style.color = 'var(--dark-color1,#000000)'; 89 let durationList = this.lastDurationValue.split(":"); 90 let resultDuration = Number(durationList[0]) * 3600 + Number(durationList[1]) * 60 + Number(durationList[2]); 91 92 durationInput.value = this.lastDurationValue 93 this.maxDurationSliders!.sliderStyle = { 94 minRange: 10, 95 maxRange: 3600, 96 defaultValue: this.lastDurationValue!, 97 resultUnit: "h:m:s", 98 stepSize: 1, 99 lineColor: "var(--dark-color4,#61CFBE)", 100 buttonColor: "#999999" 101 } 102 durationEl.setAttribute('percent', resultDuration.toString()); 103 } 104 } 105 106 initElements(): void { 107 this.bufferNumber = this.shadowRoot?.querySelector(".buffer-size") as HTMLElement 108 this.durationNumber = this.shadowRoot?.querySelector(".max-duration") as HTMLElement 109 let bu = this.shadowRoot?.querySelector('.record') as HTMLDivElement 110 this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.MenuButton').forEach(button => { 111 112 button!.addEventListener('mouseenter', e => { 113 button.style.backgroundColor = '#EFEFEF' 114 }) 115 116 button!.addEventListener('mouseout', e => { 117 button.style.backgroundColor = '#E4E3E9' 118 }) 119 }) 120 121 this.radioBox = this.shadowRoot?.querySelector("#litradio") as LitRadioBox 122 this.outputPath = this.shadowRoot?.querySelector<HTMLInputElement>('#trace_path') as HTMLInputElement; 123 124 this.initLitSlider() 125 } 126 127 initLitSlider() { 128 this.memoryBufferSlider = this.shadowRoot?.querySelector<LitSlider>('#memory-buffer') as LitSlider; 129 this.memoryBufferSlider.sliderStyle = { 130 minRange: 4, 131 maxRange: 512, 132 defaultValue: "64", 133 resultUnit: "MB", 134 stepSize: 2, 135 lineColor: "var(--dark-color3,#46B1E3)", 136 buttonColor: "#999999" 137 }; 138 this.lastMemoryValue = '64' 139 let parentElement = this.memoryBufferSlider!.parentNode as Element; 140 let bufferInput = this.shadowRoot?.querySelector('.memory_buffer_result') as HTMLInputElement; 141 bufferInput.value = this.memoryBufferSlider.sliderStyle.defaultValue; 142 this.memoryBufferSlider.addEventListener('input', evt => { 143 bufferInput.value = this.bufferSize.toString(); 144 }) 145 parentElement.setAttribute('percent', '64'); 146 bufferInput.style.color = 'var(--dark-color1,#000000)'; 147 bufferInput.addEventListener('input', ev => { 148 if (this.bufferNumber!.hasAttribute('percent')) { 149 this.bufferNumber!.removeAttribute('percent'); 150 } 151 bufferInput.style.color = 'var(--dark-color1,#000000)'; 152 bufferInput.parentElement!.style.backgroundColor = "var(--dark-background5,#F2F2F2)"; 153 bufferInput.style.backgroundColor = "var(--dark-background5,#F2F2F2)"; 154 if (bufferInput.value.trim() == '') { 155 bufferInput.style.color = 'red'; 156 parentElement.setAttribute('percent', '64'); 157 return 158 } 159 let memorySize = Number(bufferInput.value); 160 if (!memorySize || memorySize < this.memoryBufferSlider!.sliderStyle.minRange || 161 memorySize > this.memoryBufferSlider!.sliderStyle.maxRange) { 162 bufferInput.style.color = 'red'; 163 parentElement.setAttribute('percent', '64'); 164 } else { 165 this.memoryBufferSlider!.percent = bufferInput.value; 166 let htmlInputElement = this.memoryBufferSlider!.shadowRoot?.querySelector("#slider") as HTMLInputElement; 167 htmlInputElement.value = bufferInput.value; 168 this.memoryBufferSlider!.sliderStyle = { 169 minRange: 4, 170 maxRange: 512, 171 defaultValue: bufferInput.value, 172 resultUnit: "MB", 173 stepSize: 2, 174 lineColor: "var(--dark-color3,#46B1E3)", 175 buttonColor: "#999999" 176 }; 177 parentElement.setAttribute('percent', bufferInput.value); 178 this.lastMemoryValue = bufferInput.value 179 } 180 }) 181 182 let memoryBufferInput = this.memoryBufferSlider!.shadowRoot?.querySelector('#slider') as HTMLInputElement; 183 184 memoryBufferInput.addEventListener('input', ev => { 185 bufferInput.style.color = 'var(--dark-color1,#000000)'; 186 bufferInput.parentElement!.style.backgroundColor = "var(--dark-background5,#F2F2F2)"; 187 bufferInput.style.backgroundColor = "var(--dark-background5,#F2F2F2)"; 188 }) 189 190 this.maxDurationSliders = this.shadowRoot?.querySelector<LitSlider>('#max-duration') as LitSlider; 191 this.maxDurationSliders.sliderStyle = { 192 minRange: 10, 193 maxRange: 3600, 194 defaultValue: '00:00:50', 195 resultUnit: "h:m:s", 196 stepSize: 1, 197 lineColor: "var(--dark-color4,#61CFBE)", 198 buttonColor: "#999999" 199 } 200 this.lastDurationValue = '00:00:50' 201 let durationParentElement = this.maxDurationSliders!.parentNode as Element; 202 let durationInput = this.shadowRoot?.querySelector('.max_duration_result') as HTMLInputElement; 203 durationInput.value = this.maxDurationSliders.sliderStyle.defaultValue; 204 this.maxDurationSliders.addEventListener('input', evt => { 205 durationInput.value = this.maxDurationSliders!.formatSeconds(this.maxDur.toString()); 206 }) 207 208 durationInput.style.color = 'var(--dark-color1,#000000)'; 209 durationInput.addEventListener('input', ev => { 210 if (this.durationNumber!.hasAttribute('percent')) { 211 this.durationNumber!.removeAttribute('percent'); 212 } 213 durationInput.style.color = 'var(--dark-color1,#000000)'; 214 durationInput.parentElement!.style.backgroundColor = "var(--dark-background5,#F2F2F2)"; 215 durationInput.style.backgroundColor = "var(--dark-background5,#F2F2F2)"; 216 let regExpMatchArray = durationInput.value.trim(); 217 if (regExpMatchArray == '') { 218 durationInput.style.color = 'red'; 219 durationParentElement.setAttribute('percent', '50'); 220 return 221 } 222 let regExpMatch = durationInput.value.trim().match(`^\\d{1,2}\\:\\d{1,2}\\:\\d{1,2}$`); 223 if (regExpMatch) { 224 let durationList = regExpMatchArray.split(":"); 225 let resultDuration = Number(durationList[0]) * 3600 + Number(durationList[1]) * 60 + Number(durationList[2]); 226 if (Number(durationList[0]) > 60 || Number(durationList[1]) > 60 || Number(durationList[2]) > 60 || 227 resultDuration > this.maxDurationSliders!.sliderStyle.maxRange || 228 resultDuration < this.maxDurationSliders!.sliderStyle.minRange) { 229 durationInput.style.color = 'red'; 230 durationParentElement.setAttribute('percent', '50'); 231 } else { 232 durationInput.style.color = 'var(--dark-color1,#000000)'; 233 durationInput.parentElement!.style.backgroundColor = "var(--dark-background5,#F2F2F2)"; 234 durationInput.style.backgroundColor = "var(--dark-background5,#F2F2F2)"; 235 let htmlInputElement = this.maxDurationSliders!.shadowRoot?.querySelector("#slider") as HTMLInputElement; 236 htmlInputElement.value = resultDuration + ''; 237 this.maxDurationSliders!.sliderStyle = { 238 minRange: 10, 239 maxRange: 3600, 240 defaultValue: Number(durationList[0]) + ':' + Number(durationList[1]) + ':' + Number(durationList[2]), 241 resultUnit: "h:m:s", 242 stepSize: 1, 243 lineColor: "var(--dark-color4,#61CFBE)", 244 buttonColor: "#999999" 245 } 246 durationParentElement.setAttribute('percent', resultDuration.toString()); 247 this.lastDurationValue = regExpMatchArray 248 } 249 } else { 250 durationInput.style.color = 'red'; 251 durationParentElement.setAttribute('percent', '50'); 252 } 253 }) 254 255 let maxDurationInput = this.maxDurationSliders!.shadowRoot?.querySelector('#slider') as HTMLInputElement; 256 maxDurationInput.addEventListener('input', ev => { 257 durationInput.style.color = 'var(--dark-color1,#000000)'; 258 durationInput.parentElement!.style.backgroundColor = "var(--dark-background5,#F2F2F2)" 259 durationInput.style.backgroundColor = "var(--dark-background5,#F2F2F2)" 260 }) 261 } 262 263 initHtml(): string { 264 return ` 265 <style> 266 :host{ 267 display: block; 268 width: 100%; 269 height: 100%; 270 position: relative; 271 background: background: var(--dark-background3,#FFFFFF); 272 border-radius: 0px 16px 16px 0px; 273 } 274 .root { 275 display: grid; 276 grid-template-columns: repeat(1, 1fr); 277 grid-template-rows: min-content min-content min-content; 278 grid-gap: 50px; 279 padding-top: 45px; 280 padding-left: 41px; 281 background: var(--dark-background3,#FFFFFF); 282 font-size:16px; 283 border-radius: 0px 16px 16px 0px; 284 overflow-y: auto; 285 } 286 .record-mode{ 287 font-family: Helvetica-Bold; 288 font-size: 16px; 289 color: var(--dark-color1,#000000); 290 line-height: 28px; 291 font-weight: 700; 292 margin-bottom: 16px; 293 grid-column: span 1; 294 } 295 .record{ 296 display:flex; 297 flex-direction: column; 298 } 299 300 .output{ 301 display:grid; 302 } 303 304 .trace_file_span { 305 width: 20%; 306 height: 1em; 307 margin: 0; 308 } 309 310 #trace_path { 311 background-color: var(--dark-background5,#FFFFFF) 312 font-family: Helvetica-Bold; 313 color: var(--dark-color1,#8f8c8c); 314 margin: 0; 315 width: 25%; 316 height: 25px; 317 border-radius: 8px; 318 outline: none; 319 border: 1px solid #ccc; 320 } 321 .buffer-size{ 322 height: min-content; 323 display: grid; 324 grid-template-rows: 1fr; 325 grid-template-columns: 1fr min-content; 326 } 327 328 .max-duration{ 329 height: min-content; 330 display: grid; 331 grid-template-rows: 1fr 1fr; 332 grid-template-columns: 1fr 1fr min-content; 333 } 334 335 #litradio{ 336 opacity: 0.9; 337 font-family: Helvetica; 338 font-size: 14px; 339 color: var(--dark-color1,#000000); 340 text-align: left; 341 line-height: 16px; 342 font-weight: 400; 343 } 344 345 button{ 346 height: 25px; 347 width: 100%; 348 border: 0; 349 text-align: left; 350 padding-left: 20px; 351 margin-top: 10px; 352 background-color: #E4E3E9; 353 } 354 355 .line{ 356 border-top: 1px solid #C5C7CF; 357 background: #E4E3E9; 358 margin-top: 4px; 359 display: inline-block; 360 width: 100%; 361 height: 1px; 362 overflow: hidden; 363 vertical-align: middle; 364 } 365 366 .max_duration_result, .memory_buffer_result{ 367 margin: 5px 0 5px 5px; 368 background-color: var(--dark-background5,#F2F2F2); 369 -webkit-appearance:none; 370 outline:0; 371 font-size:14px; 372 color:var(--dark-color,#6a6f77); 373 border: none; 374 text-align: center; 375 width: 90px; 376 } 377 378 .resultValue, .resultSize{ 379 margin: 0 30px 0 0; 380 height: 40px; 381 background-color: var(--dark-background5,#F2F2F2); 382 -webkit-appearance:none; 383 outline:0; 384 border:1px solid var(--dark-border,#c8cccf); 385 color:var(--dark-color,#6a6f77); 386 border-radius:20px; 387 display: grid; 388 grid-template-rows: 1fr; 389 grid-template-columns: min-content min-content; 390 width: 150px; 391 } 392 393 #memory-buffer, #max-duration { 394 margin: 0 8px; 395 grid-column: span 2; 396 } 397 398 .record-title{ 399 margin-bottom: 16px; 400 grid-column: span 3; 401 } 402 403 .record-prompt{ 404 opacity: 0.6; 405 font-family: Helvetica; 406 font-size: 14px; 407 text-align: center; 408 line-height: 35px; 409 font-weight: 400; 410 } 411 412 </style> 413 <div class="root"> 414 <div class="record"> 415 <span class="record-mode">Record mode</span> 416 <lit-radio name="Stop when full" dis="round" id="litradio" checked>Stop when full</lit-radio> 417 </div> 418 <div class="output"> 419 <span class="record-mode">output file path</span> 420 <div> 421 <span class="trace_file_span">/data/local/tmp/</span> 422 <input id="trace_path" type="text" value='hiprofiler_data.htrace'onkeydown="this.value.length >= 100 ? this.value = this.value.substring(0,99): 0" oninput="this.value= this.value.replace('__','_')" onkeyup="this.value=this.value.replace(/[^\\w\\.]/g,'')"> 423 </div> 424 </div> 425 <div class="buffer-size"> 426 <div class="record-title"> 427 <span class="record-mode">In-memory buffer size</span> 428 <span class="record-prompt"> (max memory buffer size is 512 MB) </span> 429 </div> 430 <lit-slider id="memory-buffer" defaultColor="var(--dark-color3,#46B1E3)" open dir="right"> 431 </lit-slider> 432 <div class='resultSize'> 433 <input class="memory_buffer_result" type="text" value='64' onkeyup="this.value=this.value.replace(/\\D/g,'')"> 434 <span style="text-align: center; margin: 8px"> MB </span> 435 </div> 436 </div> 437 <div class="max-duration"> 438 <div class="record-title"> 439 <span class="record-mode" >Max duration</span> 440 <span class="record-prompt"> (max duration value is 01:00:00) </span> 441 </div> 442 <lit-slider id="max-duration" defaultColor="var(--dark-color4,#61CFBE)" open dir="right"> 443 </lit-slider> 444 <div class='resultValue'> 445 <input class="max_duration_result" type="text" value = '00:00:50' > 446 <span style="text-align: center; margin: 8px 8px 8px 0"> h:m:s </span> 447 </div> 448 449 </div> 450 </div> 451 `; 452 } 453}