• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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