• 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 { BaseElement, element } from '../../../../../base-ui/BaseElement';
17import { type LitTable } from '../../../../../base-ui/table/lit-table';
18import { type Dma } from '../../../../bean/AbilityMonitor';
19import { ns2s } from '../../../../database/ui-worker/ProcedureWorkerCommon';
20import { SpSystemTrace } from '../../../SpSystemTrace';
21import { Utils } from '../../base/Utils';
22import { getTabDmaAbilityClickData } from '../../../../database/sql/Dma.sql';
23
24@element('tabpane-dma-selection-ability')
25export class TabPaneDmaSelectAbility extends BaseElement {
26  private damClickTable: LitTable | null | undefined;
27  private dmaClickSource: Array<Dma> = [];
28  private tableThead: HTMLDivElement | undefined | null;
29  private table: HTMLDivElement | undefined | null;
30
31  initElements(): void {
32    this.damClickTable = this.shadowRoot?.querySelector<LitTable>('#damClickTable');
33    this.tableThead = this.damClickTable?.shadowRoot?.querySelector('.thead') as HTMLDivElement;
34    this.damClickTable!.addEventListener('column-click', (e) => {
35      // @ts-ignore
36      this.sortDmaByColumn(e.detail.key, e.detail.sort);
37    });
38  }
39
40  private init(): void {
41    const thTable = this.tableThead!.querySelector('.th');
42    const dmaSelectTblNodes = thTable!.querySelectorAll('div');
43    if (this.tableThead!.hasAttribute('sort')) {
44      this.tableThead!.removeAttribute('sort');
45      dmaSelectTblNodes.forEach((item) => {
46        item.querySelectorAll('svg').forEach((svg) => {
47          svg.style.display = 'none';
48        });
49      });
50    }
51  }
52
53  connectedCallback(): void {
54    super.connectedCallback();
55    new ResizeObserver(() => {
56      if (this.parentElement?.clientHeight !== 0 && this.damClickTable) {
57        // @ts-ignore
58        this.damClickTable.shadowRoot.querySelector('.table').style.height =
59          this.parentElement!.clientHeight - 18 + 'px';
60        this.parentElement!.style.overflow = 'hidden';
61        this.damClickTable?.reMeauseHeight();
62      }
63    }).observe(this.parentElement!);
64  }
65
66  queryDmaClickDataByDB(startNs: number): void {
67    this.init();
68    getTabDmaAbilityClickData(startNs).then((data) => {
69      if (data.length !== null && data.length > 0) {
70        data.forEach((item) => {
71          item.bufName = SpSystemTrace.DATA_DICT.get(item.bufName as number) || '-';
72          item.expName = SpSystemTrace.DATA_DICT.get(item.expName as number) || '-';
73          item.expTaskComm = SpSystemTrace.DATA_DICT.get(item.expTaskComm as number) || '-';
74          if (item.processName !== null) {
75            item.process = `${item.processName}(${item.processId})`;
76          } else {
77            item.process = `Process(${item.processId})`;
78          }
79          item.sizes = Utils.getBinaryByteWithUnit(item.size);
80          item.timeStamp = ns2s(item.startNs);
81          this.damClickTable!.getItemTextColor = (dmaItem: Dma): any => {
82            if (dmaItem.flag === 1) {
83              return '#d4b550';
84            } else if (dmaItem.flag === 2) {
85              return '#f86b6b';
86            } else {
87              return '#000000';
88            }
89          };
90        });
91        this.damClickTable!.snapshotDataSource = data.sort(function (
92          dmaAbilityLeftData: Dma,
93          dmaAbilityRightData: Dma
94        ) {
95          return dmaAbilityRightData.size - dmaAbilityLeftData.size;
96        });
97        this.dmaClickSource = data;
98      } else {
99        this.damClickTable!.snapshotDataSource = [];
100        this.dmaClickSource = [];
101      }
102    });
103  }
104
105  initHtml(): string {
106    return `
107<style>
108.damClickTable{
109    height: auto;
110}
111:host{
112    display: flex;
113    padding: 10px 10px;
114    flex-direction: column;
115}
116</style>
117<lit-table id="damClickTable" class="damClickTable">
118    <lit-table-column order title="TimeStamp" data-index="timeStamp" key="startNs" align="flex-start" width="1fr" >
119    </lit-table-column>
120    <lit-table-column order title="Process(pid)" data-index="process" key="process" align="flex-start" width="2fr" >
121    </lit-table-column>
122    <lit-table-column order title="Fd" data-index="fd" key="fd" align="flex-start" width="1fr" >
123    </lit-table-column>
124    <lit-table-column order title="Size" data-index="sizes" key="size" align="flex-start" width="1fr" >
125    </lit-table-column>
126    <lit-table-column order title="Ino" data-index="ino" key="ino" align="flex-start" width="1fr" >
127    </lit-table-column>
128    <lit-table-column order title="ExpPid" data-index="expPid" key="expPid" align="flex-start" width="1fr" >
129    </lit-table-column>
130    <lit-table-column order title="ExpTaskComm" data-index="expTaskComm" key="expTaskComm" align="flex-start" width="2fr" >
131    </lit-table-column>
132    <lit-table-column order title="BufName" data-index="bufName" key="bufName" align="flex-start" width="2fr" >
133    </lit-table-column>
134    <lit-table-column order title="ExpName" data-index="expName" key="expName" align="flex-start" width="2fr" >
135    </lit-table-column>
136    <lit-table-column order title="Flag" data-index="flag" key="flag" align="flex-start" width="1fr" >
137    </lit-table-column>
138</lit-table>
139        `;
140  }
141
142  sortDmaByColumn(column: string, sort: number): void {
143    const sortFunction = function (leftData: any, rightData: any, sortType: number, property: string): number {
144      if (sortType === 1) {
145        return typeof leftData[property] === 'string'
146          ? `${leftData[property]}`.localeCompare(`${rightData[property]}`)
147          : leftData[property] - rightData[property];
148      } else {
149        return typeof rightData[property] === 'string'
150          ? `${rightData[property]}`.localeCompare(`${leftData[property]}`)
151          : rightData[property] - leftData[property];
152      }
153    };
154
155    switch (sort) {
156      case 0:
157        this.damClickTable!.recycleDataSource = this.dmaClickSource;
158        break;
159      default:
160        this.sortByColumn(column, sort, sortFunction);
161        break;
162    }
163  }
164
165  sortByColumn(column: string, sort: number, sortFunction: Function): void {
166    let array = [...this.dmaClickSource];
167    switch (column) {
168      case 'process':
169      case 'expTaskComm':
170      case 'bufName':
171      case 'expName':
172        this.damClickTable!.recycleDataSource = array.sort((leftData, rightData) => sortFunction(leftData, rightData, sort, column));
173        break;
174      case 'startNs':
175      case 'fd':
176      case 'size':
177      case 'ino':
178      case 'expPid':
179      case 'flag':
180        this.damClickTable!.recycleDataSource = array.sort((leftData, rightData) => sortFunction(leftData, rightData, sort, column));
181        break;
182    }
183  }
184}
185