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 { ffrtEnumList } from './utils/PluginConvertUtils';
17
18export const SpFFRTConfigHtml = `
19<style>
20:host{
21  display: block;
22  width: 100%;
23  border-radius: 0 16px 16px 0;
24  height: 100%;
25}
26.root {
27  padding-top: 30px;
28  padding-left: 54px;
29  display: grid;
30  grid-template-columns: 1fr;
31  grid-template-rows: min-content 1fr min-content;
32  width: 81%;
33  border-radius: 0 16px 16px 0;
34  margin-bottom: 30px;
35  margin-right: 30px;
36}
37.input-select-item-content{
38  display: flex;
39  flex-direction: column;
40  grid-gap: 15px;
41  margin-top: 40px;
42  grid-column: 1 / 3;
43  width: 100%;
44}
45
46.switch-item-content{
47  margin-top: 40px;
48  width: 92%;
49}
50input {
51  width: 72%;
52  height: 25px;
53  border:0;
54  outline:none;
55  border-radius: 16px;
56  text-indent:2%
57}
58input::-webkit-input-placeholder{
59  color:var(--bark-prompt,#999999);
60}
61
62input::-webkit-input-placeholder{
63  background: var(--dark-background5,#FFFFFF);
64}
65.item-title {
66  font-family: Helvetica,serif;
67  text-align: left;
68  line-height: 40px;
69  font-weight: 700;
70  margin-right: 10px;
71  opacity: 0.9;
72  font-size: 18px;
73}
74input:disabled {
75  cursor: no-drop;
76}
77.title {
78  grid-column: span 2 / auto;
79  margin-top: 5vh;
80}
81#switch-disabled, .lts {
82  display: inline;
83  float: right;
84}
85.processSelect {
86  border-radius: 15px;
87  width: 92%;
88  height: 27px;
89}
90.input-item-content {
91  flex-wrap: wrap;
92  display: flex;
93  flex-direction: row;
94  align-items: center;
95  width: 92%;
96  grid-column: 1 / 3;
97  margin-top: 40px;
98}
99.clock-type-select {
100  border-radius: 15px;
101  width: 50%;
102}
103.clock-item-content {
104  flex-wrap: wrap;
105  display: flex;
106  flex-direction: row;
107  align-items: center;
108  margin-top: 40px;
109  width: 92%;
110  grid-column: 1 / 3;
111}
112.item-description {
113  opacity: 0.6;
114  font-family: Helvetica;
115  line-height: 35px;
116  text-align: left;
117  font-weight: 400;
118  font-size: 14px;
119}
120.input-content{
121  background: var(--dark-background5,#FFFFFF);
122  border: 1px solid var(--dark-background5,#ccc);
123  font-family: Helvetica;
124  font-size: 14px;
125  color: var(--dark-color1,#212121);
126  text-align: left;
127  line-height: 16px;
128  font-weight: 400;
129}
130
131input::-webkit-input-placeholder{
132  background: var(--dark-background5,#FFFFFF);
133}
134
135:host([startSamp]) .input-content {
136  background: var(--dark-background5,#FFFFFF);
137}
138
139:host(:not([startSamp])) .input-content {
140  color: #b7b7b7;
141  background: var(--dark-background1,#f5f5f5);
142}
143
144</style>
145<div class="root">
146  <div class="title" style="width: 92%;">
147    <span class="item-title">Start FFRT Record</span>
148    <lit-switch id="switch-disabled"></lit-switch>
149  </div>
150  <!-- process id -->
151  <div class="input-select-item-content" id="process-div" style="grid-column: 1 / 3;">
152    <div>
153      <span class="item-title">Process</span>
154      <span class="item-description">Record process id</span>
155    </div>
156    <lit-select-v class="processSelect" id="process-ids" rounded mode="multiple" default-value="" id="pid"
157    placement="bottom" title="process" placeholder="please select process id">
158    </lit-select-v>
159  </div>
160  <!-- Startup Process -->
161  <div class="input-select-item-content" id="startup-process-div" style="grid-column: 1 / 3;">
162    <div>
163      <span class="item-title">Startup Process</span>
164      <span class="item-description">Record startup package name</span>
165    </div>
166    <lit-select-v default-value="" rounded="" class="processSelect" canInsert="" id="startup-process-names"
167    title="package" rounded placement = "bottom" placeholder="please select package name" showSearchInput>
168    </lit-select-v>
169  </div>
170  <!-- Restart Process -->
171  <div class="input-select-item-content" id="restart-process-div" style="grid-column: 1 / 3;">
172    <div>
173      <span class="item-title">Restart Process</span>
174      <span class="item-description">Record restart process name</span>
175    </div>
176    <lit-select-v class="processSelect" id="restart-process-names" rounded mode="multiple" default-value="" id="pid"
177    placement="bottom" title="process" placeholder="please select restart process name">
178    </lit-select-v>
179  </div>
180  <!-- Use block -->
181  <div class="switch-item-content" id="block-div" style="align-items: center;grid-column: 1 / 3;">
182    <span class="item-title">Use Block</span>
183    <lit-switch class="lts" id="use_block_switch" title="block model" checked="true"></lit-switch>
184  </div>
185  <!-- Smb Pages -->
186  <div class="input-item-content" id="smb-pages-div">
187    <span class="item-title">Smb Pages Size</span>
188    <span class="item-description" style="margin-right: auto;">Range is 0 - 131072, default 16384 page (One page equals 4 KB)</span>
189    <input id = "smb-pages" style="width: auto;" class="input-content" type="text"
190      placeholder="Enter the Smb Pages Size" 
191      oninput="if(this.value > 131072){this.value = '131072'} if(this.value > 0 &&
192      this.value.toString().startsWith('0')){ this.value = Number(this.value) }"
193      onkeyup="this.value=this.value.replace(/\\D/g,'')" value="16384">
194  </div>
195  <!-- Flush Interval -->
196  <div class="input-item-content" id="flush-interval-div">
197    <span class="item-title" >flush interval</span>
198    <span class="item-description" style="margin-right: auto;">Rang is 0 - 20, default 5</span>
199    <input id= "flush-interval" style="width: auto;" class="input-content" type="text"
200    placeholder="Enter the flush interval" 
201    oninput="if(this.value > 20){this.value = '20'} if(this.value > 0 && 
202    this.value.toString().startsWith('0')){ this.value = Number(this.value) }"
203    onkeyup="this.value=this.value.replace(/\\D/g,'')" value="5">
204  </div>
205  <!-- Clock Id -->
206  <div class="clock-item-content">
207    <div style="margin-right: auto;">
208      <span class="item-title">Clock Id</span>
209      <span class="item-description">Record clock type id</span>
210    </div>
211    <lit-select default-value="" rounded="" id="clock-type" class="clock-type-select" canInsert="" 
212    title="Select Clock Id" rounded placement = "top" placeholder="BOOTTIME">
213      ${ffrtEnumList.map((clockId): string => `<lit-select-option class="div-button" 
214      value="${clockId}">${clockId}</lit-select-option>`).join('')}
215    </lit-select>
216  </div>
217</div>
218`;
219
220