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 { replacePlaceholders } from '../../../../base-ui/utils/Template'; 17 18let html = ` 19<style> 20:host{ 21 height: 30px; 22 background: var(--dark-background4,#F2F2F2); 23 border-top: 1px solid var(--dark-border1,#c9d0da);display: flex;align-items: center;z-index: 2; 24 margin-left: -10px; 25 width: calc(100% + 20px); 26} 27 28.chosen-single { 29 position: relative; 30 display: block; 31 overflow: hidden; 32 text-decoration: none; 33 white-space: nowrap; 34 height: 34px; 35 padding: 3px 6px; 36 font-size: 14px; 37 line-height: 1.42857143; 38 color: #555; 39 background-color: #fff; 40 background-image: none; 41 border: 1px solid #ccc; 42 border-radius: 4px; 43 transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 44 box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 45} 46.disabled{ 47color: rgba(0,0,0,0.4); 48} 49#pane-filter-input{ 50background: var(--dark-background4,#FFFFFF); 51border: 1px solid var(--dark-border,rgba(0,0,0,0.60)); 52color: var(--dark-color2,#000000); 53border-radius: 8px; 54width: 200px; 55} 56#pane-filter-input:focus{ 57 outline: none; 58 box-shadow: 1px 1px 1px var(--dark-color,#bebebe); 59} 60#pane-filter-input::-webkit-input-placeholder { 61 color: var(--dark-color,#aab2bd); 62 } 63.describe{ 64 /*display: inline-block*/ 65 font-size: 0.8rem; 66 white-space: nowrap; 67 overflow: hidden; 68 text-overflow: ellipsis; 69 min-width: 50px; 70} 71 72#mark{ 73 border: 1px solid var(--bark-prompt,#999999); 74 border-radius: 1px; 75 background: var(--dark-background4,#F2F2F2); 76 color: var(--dark-color2,rgba(0,0,0,0.9)); 77 transition: all 0.1s; 78} 79#mark:hover{ 80 background: var(--dark-background1,#dfdfdf); 81} 82#mark:active{ 83 background: var(--dark-background4,#F2F2F2); 84 transition: all 0.05s; 85} 86#first-select{ 87width: 200px; 88} 89#second-select{ 90width: 200px; 91} 92.spacing{ 93margin-left: 10px; 94} 95.max-spacing{ 96margin-left: 15px; 97} 98 99:host(:not([inputLeftText])) .left-text{ 100 display: none; 101} 102:host(:not([input])) #pane-filter-input{ 103 display: none; 104} 105:host(:not([fileSystem])) .popover .tree-check:nth-child(3){ 106 display: none; 107} 108:host([fileSystem]) .popover .tree-check:nth-child(5){ 109 display: none; 110} 111:host([fileSystem]) .popover .tree-check:nth-child(6){ 112 display: none; 113 } 114:host([nativeMemory]) .popover .tree-check:nth-child(3){ 115 display:none; 116} 117:host([nativeMemory]) .popover .tree-check:nth-child(5){ 118 display:none; 119} 120:host([nativeMemory]) .popover .tree-check:nth-child(6){ 121 display:none; 122 } 123:host([isStatisticsMemory]) .popover .tree-check:nth-child(4){ 124 display:none; 125} 126:host(:not([mark])) #mark{ 127 display: none; 128} 129:host(:not([first])) #first-select{ 130 display: none; 131} 132:host(:not([second])) #second-select{ 133 display: none; 134} 135:host(:not([third])) #third-select{ 136 display: none; 137} 138:host(:not([tree])) .tree{ 139 display: none; 140} 141:host([disabledMining]) #data-mining{ 142 display: none; 143} 144:host([disabledMining]) #data-library{ 145 display: none; 146} 147:host([disableTransfer]) .transfer-text{ 148 display: none; 149} 150:host(:not([icon])) #icon{ 151 display: none; 152} 153:host(:not([options])) #check-popover{ 154 display: none; 155} 156 157:host(:not([cpu_config])) #data-core-popover{ 158 display: none; 159} 160 161:host(:not([group_config])) #group-mining-popover{ 162 display: none; 163} 164#icon[name="statistics"]{ 165 margin-left: 12px; 166} 167 168.constraints-input{ 169 background: var(--dark-border,#ffffff); 170 color: var(--dark-color1,rgba(0,0,0,0.86)); 171 border: 1px solid var(--dark-border,rgba(0,0,0,0.60)); 172 border-radius: 10px; 173 width: 40px; 174 margin-left: 10px; 175 outline: none; 176} 177.constraints-input[disabled]{ 178 background: var(--dark-background5,#ededed); 179} 180.reset-button{ 181 opacity: 0.9; 182 font-size: 13px; 183 color: #0A59F7; 184 text-align: center; 185 line-height: 16px; 186 background: var(--dark-background3,#F4F3F4); 187 border: 1px solid var(--dark-background8,#F4F3F4); 188 border-radius: 16px; 189 padding: 2px 18px; 190} 191#tb_core_setting, #tb_cpu, #tb_add_group{ 192 height: 135px; 193 width: 250px; 194 background: var(--dark-background4,#F2F2F2); 195 overflow-y: auto ; 196 border-radius: 5px; 197 border: solid 1px var(--dark-border1,#e0e0e0); 198} 199#tb_core_setting { 200 display: grid; 201 grid-template-columns: auto auto auto auto; 202} 203 204.button{ 205 opacity: 0.9; 206 font-size: 13px; 207 color: #0A59F7; 208 text-align: center; 209 line-height: 16px; 210 background: var(--dark-background3,#F4F3F4); 211 border: 1px solid var(--dark-background8,#F4F3F4); 212 border-radius: 16px; 213 padding: 2px 18px; 214} 215 216.core_line{ 217 position: fixed; 218 bottom: 0; 219 height: 35px; 220 line-height: 35px; 221 position: sticky; 222 top: 0; 223 background: var(--dark-background4,#F2F2F2); 224 z-index: 1; 225 width: 100%; 226 font-Weight:bold; 227 font-style:12px; 228 text-align:center; 229} 230.tb_setting_content { 231 display: flex; 232 justify-content: space-between; 233} 234#move { 235 display: flex; 236 flex-direction: column; 237 width: 50px; 238 justify-content: space-evenly; 239 height: 135px; 240} 241.check-content{ 242 display: flex; 243 align-content: center; 244 justify-content: center; 245} 246 247#call-tree-popover[visible="true"] #call-tree{ 248 color: #0A59F7; 249} 250#check-popover[visible="true"] #check-des{ 251 color: #0A59F7; 252} 253#tree-constraints-popover[visible="true"] #tree-constraints{ 254 color: #0A59F7; 255} 256#data-mining-popover[visible="true"] #data-mining{ 257 color: #0A59F7; 258} 259#data-core-popover[visible="true"] #core-mining{ 260 color: #0A59F7; 261} 262#group-mining-popover[visible="true"] #group-mining{ 263 color: #0A59F7; 264} 265 266.mining-checked[highlight]{ 267 color: #FFFFFF; 268 background: #0C65D1; 269} 270#data-library-popover[visible="true"] #data-library{ 271 color: #0A59F7; 272} 273.library-checked[highlight]{ 274 color: #FFFFFF; 275 background: #0C65D1; 276} 277#title{ 278 overflow: hidden; 279 white-space: nowrap; 280 text-overflow: ellipsis; 281 flex: 1; 282 text-align: left; 283} 284#mining-row{ 285 background: var(--dark-background4,#F2F2F2); 286 border-radius: 2px; 287 height: 135px; 288 width: 250px; 289 overflow-y: auto; 290} 291#library-row{ 292 background: var(--dark-background4,#F2F2F2); 293 border-radius: 2px; 294 height: 135px; 295 width: 250px; 296 overflow-y: auto; 297} 298.check-wrap, .tree-check{ 299 margin-bottom: 5px; 300 display: flex; 301 align-content: center; 302} 303.sort{ 304 display: flex; 305 align-items: center; 306 cursor: pointer; 307} 308:host(:not([sort])) .sort{ 309 display: none; 310} 311.popover{ 312 display: flex; 313} 314.lit-check-box{ 315 margin-right: 5px; 316} 317.transfer-list{ 318 display: flex; 319 flex-derection: column; 320} 321.tree-radio{ 322 margin: 5px 0; 323 cursor: pointer; 324} 325.radio{ 326 cursor: pointer; 327} 328.hide{ 329 display: none; 330} 331</style> 332<lit-icon name="menu" class="spacing" id="icon" size="20"></lit-icon> 333<span class="describe left-text spacing">Input Filter</span> 334<input id="pane-filter-input" class="spacing" placeholder={1}/> 335<button id="mark" class="spacing">Mark Snapshot</button> 336<div id="load" style="display: flex"> 337 338</div> 339<lit-popover placement="topLeft" class="popover" haveRadio="true" trigger="click" id="call-tree-popover"> 340 <div slot="content"> 341 <div class="tree-check"><lit-check-box class="lit-check-box" not-close></lit-check-box><div>Invert</div></div> 342 <div class="tree-check"><lit-check-box class="lit-check-box" not-close></lit-check-box><div>Hide System so</div></div> 343 <div class="tree-check"><lit-check-box class="lit-check-box" not-close></lit-check-box><div>Hide Event</div></div> 344 <div class="tree-check"><lit-check-box class="lit-check-box" not-close></lit-check-box><div>Hide Thread</div></div> 345 <div class="tree-check"><lit-check-box class="lit-check-box" not-close></lit-check-box><div>Hide Thread State</div></div> 346 <div class="tree-check"><lit-check-box class="lit-check-box" not-close></lit-check-box><div>Only Kernel</div></div> 347 </div> 348 <span class="describe tree max-spacing" id="call-tree">Options</span> 349</lit-popover> 350<lit-popover placement="topLeft" class="popover" haveRadio="true" trigger="click" id="check-popover"> 351 <div slot="content"></div> 352 <span class="describe max-spacing" id="check-des">Options</span> 353</lit-popover> 354<lit-popover placement="topLeft" class="popover" haveRadio="true" trigger="click" id="tree-constraints-popover"> 355 <div slot="content" style="display: flex; align-items: flex-end"> 356 <lit-check-box id="constraints-check" not-close></lit-check-box> 357 <input class="constraints-input" disabled value="0" not-close/> 358 <lit-popover placement="topLeft" class="popover" haveRadio="true" not-close> 359 <div slot="content"> 360 <div style="font-size: 0.7rem">Constraints：Only enabled with data and while stopped；</div> 361 <div style="font-size: 0.7rem">filters data to thresholds. </div> 362 </div> 363 <input class="constraints-input" disabled value="∞" not-close/> 364 </lit-popover> 365 </div> 366 <span class="describe tree max-spacing" id="tree-constraints">Sample Count Filter</span> 367</lit-popover> 368 <lit-popover placement="topLeft" class="popover" haveRadio="true" trigger="click" id="data-mining-popover"> 369 <div slot="content"> 370 <div id="mining-row"> 371 372 </div> 373 <div style="display: flex;justify-content: space-around; margin-top: 8px"> 374 <div class="mining-button reset-button">Reset</div> 375 </div> 376 </div> 377 <span class="describe tree max-spacing" id="data-mining">Symbol Filter</span> 378</lit-popover> 379<lit-popover placement="topLeft" class="popover transfer-area" haveRadio="true" trigger="click" id="call-tree-popover"> 380<div slot="content" id="transfer-list" style="display:block; height:auto; max-height: 200px; overflow-y:auto;"> 381 382</div> 383<span class="describe tree max-spacing transfer-text" id="call-tree">Transfer</span> 384</lit-popover> 385<lit-popover placement="topLeft" class="popover" haveRadio="true" trigger="click" id="data-library-popover"> 386 <div slot="content"> 387 <div id="library-row"> 388 389 </div> 390 <div style="display: flex;justify-content: space-around; margin-top: 8px"> 391 <div class="library-button reset-button">Reset</div> 392 </div> 393 </div> 394 <span class="describe tree max-spacing" id="data-library">Library Filter</span> 395</lit-popover> 396<lit-popover placement="topLeft" class="popover" haveRadio="true" trigger="click" id="data-core-popover"> 397 <div slot="content"> 398 <div class="core_setting_div" id="tb_core_setting" ></div> 399 <div style="display: flex;justify-content: space-around; margin-top: 8px"> 400 <div class="button reset-button">Reset</div> 401 <div class="button confirm-button">Confirm</div> 402 </div> 403 </div> 404 <span class="describe max-spacing" id="core-mining">CPU Setting</span> 405</lit-popover> 406<lit-popover placement="topLeft" class="popover" haveRadio="true" trigger="click" id="group-mining-popover"> 407 <div slot="content"> 408 <div class='tb_setting_content'> 409 <div id="tb_cpu" style="width: 140px;"></div> 410 <div id="move"> 411 <div class="button add_group_button"> > </div> 412 <div class="button cut_group_button"> < </div> 413 </div> 414 <div id="tb_add_group" style="width: 140px;"> 415 <div class="core_line">Group</div> 416 <div class="add_content" style="text-align: center"></div> 417 </div> 418 </div> 419 <div style="display: flex;justify-content: space-around; margin-top: 8px"> 420 <div class="button reset-group-button">Reset</div> 421 <div class="button confirm-group-button">Confirm</div> 422 </div> 423 </div> 424 <span class="describe max-spacing" id="group-mining">Group Setting</span> 425</lit-popover> 426<div class="sort"> 427 <lit-icon name="swap" class="spacing" size="16"></lit-icon> 428 <div style="margin-left: 5px" class="describe statistics-name">Statistics by Thread</div> 429</div> 430`; 431export const TabPaneFilterHtml = (input: string): string => { 432 return replacePlaceholders(html, input); 433}; 434