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 LitSwitch, { LitSwitchChangeEvent } from '../../../base-ui/switch/lit-switch'; 18import '../../../base-ui/select/LitAllocationSelect'; 19import '../../../base-ui/switch/lit-switch'; 20import { SpRecordTrace } from '../SpRecordTrace'; 21import { HdcDeviceManager } from '../../../hdc/HdcDeviceManager'; 22import { LitAllocationSelect } from '../../../base-ui/select/LitAllocationSelect'; 23 24@element('sp-hisys-event') 25export class SpHisysEvent extends BaseElement { 26 private domainInputEL: LitAllocationSelect | undefined | null; 27 private eventNameInputEL: LitAllocationSelect | undefined | null; 28 private sysEventConfigList: NodeListOf<LitAllocationSelect> | undefined | null; 29 private sysEventSwitch: LitSwitch | undefined | null; 30 private domainInputEl: HTMLInputElement | undefined | null; 31 private nameInputEl: HTMLInputElement | undefined | null; 32 private eventConfig: any = {}; 33 34 set startSamp(start: boolean) { 35 if (start) { 36 this.setAttribute('startSamp', ''); 37 this.domainInputEL!.removeAttribute('readonly'); 38 this.eventNameInputEL!.removeAttribute('readonly'); 39 } else { 40 this.removeAttribute('startSamp'); 41 this.domainInputEL!.setAttribute('readonly', 'readonly'); 42 this.eventNameInputEL!.setAttribute('readonly', 'readonly'); 43 this.domainInputEL!.value = ''; 44 this.eventNameInputEL!.value = ''; 45 } 46 } 47 48 get domain(): string { 49 if (this.domainInputEL!.value.length > 0 && this.domainInputEL!.value !== 'ALL-Domain') { 50 return this.domainInputEL!.value; 51 } 52 return ''; 53 } 54 55 get eventName(): string { 56 if (this.eventNameInputEL!.value.length > 0 && this.eventNameInputEL!.value !== 'ALL-Event') { 57 return this.eventNameInputEL!.value; 58 } 59 return ''; 60 } 61 62 get startSamp(): boolean { 63 return this.hasAttribute('startSamp'); 64 } 65 66 get sysEventConfigPath(): string { 67 return '/system/etc/hiview/hisysevent.def'; 68 } 69 70 initElements(): void { 71 this.domainInputEL = this.shadowRoot?.querySelector<LitAllocationSelect>('.record-domain-input'); 72 this.eventNameInputEL = this.shadowRoot?.querySelector<LitAllocationSelect>('.record-event-input'); 73 this.sysEventConfigList = this.shadowRoot?.querySelectorAll<LitAllocationSelect>('.record-input'); 74 this.sysEventSwitch = this.shadowRoot?.querySelector('lit-switch') as LitSwitch; 75 this.sysEventSwitch?.addEventListener('change', (event: CustomEventInit<LitSwitchChangeEvent>) => { 76 let detail = event.detail; 77 this.startSamp = detail!.checked; 78 this.updateDisable(detail!.checked); 79 }); 80 this.updateDisable(false); 81 this.domainInputEl = this.domainInputEL?.shadowRoot?.querySelector('.multipleSelect') as HTMLInputElement; 82 this.nameInputEl = this.eventNameInputEL?.shadowRoot?.querySelector('.multipleSelect') as HTMLInputElement; 83 this.domainInputEl.addEventListener('valuable', () => { 84 this.eventNameInputEL!.value = ''; 85 }); 86 } 87 88 connectedCallback(): void { 89 super.connectedCallback(); 90 this.domainInputEl?.addEventListener('mousedown', this.domainInputEvent); 91 this.nameInputEl?.addEventListener('mousedown', this.nameInputEvent); 92 } 93 94 disconnectedCallback(): void { 95 super.disconnectedCallback(); 96 this.domainInputEl?.removeEventListener('mousedown', this.domainInputEvent); 97 this.nameInputEl?.removeEventListener('mousedown', this.nameInputEvent); 98 } 99 100 domainInputEvent = (): void => { 101 if (SpRecordTrace.serialNumber === '') { 102 this.domainInputEL!.processData = []; 103 this.domainInputEL!.initData(); 104 } else { 105 HdcDeviceManager.fileRecv(this.sysEventConfigPath, () => {}).then((pullRes) => { 106 pullRes.arrayBuffer().then((buffer) => { 107 if (buffer.byteLength > 0) { 108 let dec = new TextDecoder(); 109 this.eventConfig = JSON.parse(dec.decode(buffer)); 110 let domainList = Object.keys(this.eventConfig!); 111 if (domainList.length > 0 && this.startSamp) { 112 this.domainInputEl!.setAttribute('readonly', 'readonly'); 113 domainList.unshift('ALL-Domain'); 114 } 115 this.domainInputEL!.processData = domainList; 116 this.domainInputEL!.initData(); 117 } 118 }); 119 }); 120 } 121 }; 122 123 nameInputEvent = (): void => { 124 if (SpRecordTrace.serialNumber === '') { 125 this.eventNameInputEL!.processData = []; 126 this.eventNameInputEL!.initData(); 127 } else { 128 let domain = this.domainInputEL?.value; 129 // @ts-ignore 130 let eventConfigElement = this.eventConfig[domain]; 131 if (eventConfigElement) { 132 let eventNameList = Object.keys(eventConfigElement); 133 if (eventNameList?.length > 0 && this.startSamp) { 134 this.nameInputEl!.setAttribute('readonly', 'readonly'); 135 eventNameList.unshift('ALL-Event'); 136 this.eventNameInputEL!.processData = eventNameList; 137 this.eventNameInputEL!.initData(); 138 } 139 } else { 140 let currentData: string[] = []; 141 if (domain === '' || domain === 'ALL-Domain') { 142 let domainKey = Object.keys(this.eventConfig); 143 domainKey.forEach((item) => { 144 let currentEvent = this.eventConfig[item]; 145 let eventList = Object.keys(currentEvent); 146 currentData.push(...eventList); 147 }); 148 currentData.unshift('ALL-Event'); 149 } 150 this.eventNameInputEL!.processData = currentData; 151 this.eventNameInputEL!.initData(); 152 } 153 } 154 }; 155 156 private updateDisable(isDisable: boolean): void { 157 this.sysEventConfigList!.forEach((configEL) => { 158 if (isDisable) { 159 configEL.removeAttribute('disabled'); 160 } else { 161 configEL.setAttribute('disabled', ''); 162 } 163 }); 164 } 165 166 private getCssStyle(): string { 167 return ` 168 <style> 169 :host{ 170 background: var(--dark-background3,#FFFFFF); 171 display: inline-block; 172 width: 100%; 173 height: 100%; 174 border-radius: 0px 16px 16px 0px; 175 } 176 :host([startSamp]) .record-input { 177 background: var(--dark-background5,#FFFFFF); 178 } 179 :host(:not([startSamp])) .record-input { 180 color: #999999; 181 } 182 .root { 183 margin-bottom: 30px; 184 padding-top: 30px; 185 padding-left: 54px; 186 margin-right: 30px; 187 font-size:16px; 188 } 189 .hisys-event-config { 190 width: 80%; 191 display: flex; 192 flex-direction: column; 193 gap: 25px; 194 margin-top: 5vh; 195 margin-bottom: 5vh; 196 } 197 .event-title { 198 font-weight: 700; 199 opacity: 0.9; 200 font-family: Helvetica-Bold; 201 font-size: 18px; 202 text-align: center; 203 line-height: 40px; 204 margin-right: 10px; 205 } 206 .event-des { 207 font-size: 14px; 208 opacity: 0.6; 209 line-height: 35px; 210 font-family: Helvetica; 211 text-align: center; 212 font-weight: 400; 213 } 214 lit-switch { 215 height: 38px; 216 margin-top: 10px; 217 display:inline; 218 float: right; 219 } 220 .record-input { 221 line-height: 20px; 222 font-weight: 400; 223 border: 1px solid var(--dark-background5,#ccc); 224 font-family: Helvetica; 225 font-size: 14px; 226 color: var(--dark-color1,#212121); 227 text-align: left; 228 width: auto; 229 } 230 </style>`; 231 } 232 233 initHtml(): string { 234 return ` 235 ${this.getCssStyle()} 236 <div class="root"> 237 <div class="hisys-event-config"> 238 <div> 239 <span class="event-title">Start Hisystem Event Tracker Record</span> 240 <lit-switch></lit-switch> 241 </div> 242 </div> 243 <div class="hisys-event-config"> 244 <div> 245 <span class="event-title">Domain</span> 246 <span class="event-des">Record Domain Name</span> 247 </div> 248 <lit-allocation-select default-value="" rounded="" class="record-domain-input record-input" 249 mode="multiple" canInsert="" title="Select Proces" placement="bottom" placeholder="ALL-Domain" readonly="readonly"> 250 </lit-allocation-select> 251 </div> 252 <div class="hisys-event-config"> 253 <div> 254 <span class="event-title">EventName</span> 255 <span class="event-des">Record Event Name</span> 256 </div> 257 <lit-allocation-select default-value="" rounded="" class="record-event-input record-input" 258 mode="multiple" canInsert="" title="Select Proces" placement="bottom" placeholder="ALL-Event" readonly="readonly"> 259 </lit-allocation-select> 260 </div> 261 </div> 262 `; 263 } 264} 265