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 { ColorUtils } from "../../component/trace/base/ColorUtils.js"; 17import { 18 BaseStruct, 19 drawFlagLine, 20 drawLines, 21 drawLoading, 22 drawSelection, drawWakeUp, 23 ns2x, Render, 24 RequestMessage 25} from "./ProcedureWorkerCommon.js"; 26export class NetworkAbilityRender extends Render{ 27 render(req: RequestMessage, list: Array<any>, filter: Array<any>) { 28 if (req.lazyRefresh) { 29 networkAbility(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, req.useCache || !req.range.refresh) 30 } else { 31 if (!req.useCache) { 32 networkAbility(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, false) 33 } 34 } 35 if (req.canvas) { 36 req.context.clearRect(0, 0, req.frame.width, req.frame.height); 37 let arr = filter; 38 if (arr.length > 0 && !req.range.refresh && !req.useCache && req.lazyRefresh) { 39 drawLoading(req.context, req.startNS, req.endNS, req.totalNS, req.frame, arr[0].startNS, arr[arr.length - 1].startNS + arr[arr.length - 1].dur) 40 } 41 req.context.beginPath(); 42 let maxNetworkRate = req.params.maxNetworkRate; 43 let maxNetworkRateName = req.params.maxNetworkRateName; 44 drawLines(req.context, req.xs, req.frame.height, req.lineColor) 45 NetworkAbilityMonitorStruct.hoverNetworkAbilityStruct = undefined; 46 if (req.isHover) { 47 for (let re of filter) { 48 if (re.frame && req.hoverX >= re.frame.x && req.hoverX <= re.frame.x + re.frame.width && req.hoverY >= re.frame.y && req.hoverY <= re.frame.y + re.frame.height) { 49 NetworkAbilityMonitorStruct.hoverNetworkAbilityStruct = re; 50 break; 51 } 52 } 53 } 54 NetworkAbilityMonitorStruct.selectNetworkAbilityStruct = req.params.selectNetworkAbilityStruct; 55 for (let re of filter) { 56 NetworkAbilityMonitorStruct.draw(req.context, re, maxNetworkRate) 57 } 58 drawSelection(req.context, req.params); 59 req.context.closePath(); 60 let textMetrics = req.context.measureText(maxNetworkRateName); 61 req.context.globalAlpha = 0.8 62 req.context.fillStyle = "#f0f0f0" 63 req.context.fillRect(0, 5, textMetrics.width + 8, 18) 64 req.context.globalAlpha = 1 65 req.context.fillStyle = "#333" 66 req.context.textBaseline = "middle" 67 req.context.fillText(maxNetworkRateName, 4, 5 + 9) 68 drawWakeUp(req.context, req.wakeupBean, req.startNS, req.endNS, req.totalNS, req.frame); 69 drawFlagLine(req.context, req.flagMoveInfo, req.flagSelectedInfo, req.startNS, req.endNS, req.totalNS, req.frame, req.slicesTime); 70 } 71 // @ts-ignore 72 self.postMessage({ 73 id: req.id, 74 type: req.type, 75 results: req.canvas ? undefined : filter, 76 hover: NetworkAbilityMonitorStruct.hoverNetworkAbilityStruct 77 }); 78 } 79} 80export function networkAbility(list: Array<any>, res: Array<any>, startNS: number, endNS: number, totalNS: number, frame: any, use: boolean) { 81 if (use && res.length > 0) { 82 for (let i = 0; i < res.length; i++) { 83 let item = res[i]; 84 if ((item.startNS || 0) + (item.dur || 0) > (startNS || 0) && (item.startNS || 0) < (endNS || 0)) { 85 NetworkAbilityMonitorStruct.setNetworkFrame(item, 5, startNS || 0, endNS || 0, totalNS || 0, frame) 86 } else { 87 item.frame = null; 88 } 89 } 90 return; 91 } 92 res.length = 0; 93 if (list) { 94 for (let index = 0; index < list.length; index++) { 95 let item = list[index]; 96 if (index === list.length - 1) { 97 item.dur = (endNS || 0) - (item.startNS || 0) 98 } else { 99 item.dur = (list[index + 1].startNS || 0) - (item.startNS || 0) 100 } 101 if ((item.startNS || 0) + (item.dur || 0) > (startNS || 0) && (item.startNS || 0) < (endNS || 0)) { 102 NetworkAbilityMonitorStruct.setNetworkFrame(list[index], 5, startNS || 0, endNS || 0, totalNS || 0, frame) 103 if (index > 0 && ((list[index - 1].frame?.x || 0) == (list[index].frame?.x || 0) && (list[index - 1].frame?.width || 0) == (list[index].frame?.width || 0))) { 104 105 } else { 106 res.push(item) 107 } 108 } 109 } 110 } 111} 112 113export class NetworkAbilityMonitorStruct extends BaseStruct { 114 static maxNetworkRate: number = 0 115 static maxNetworkRateName: string = "0 KB/S" 116 static hoverNetworkAbilityStruct: NetworkAbilityMonitorStruct | undefined; 117 static selectNetworkAbilityStruct: NetworkAbilityMonitorStruct | undefined; 118 value: number | undefined 119 startNS: number | undefined 120 121 static draw(context2D: CanvasRenderingContext2D, data: NetworkAbilityMonitorStruct, maxNetworkRate: number) { 122 if (data.frame) { 123 let width = data.frame.width || 0; 124 let index = 2; 125 context2D.fillStyle = ColorUtils.colorForTid(index) 126 context2D.strokeStyle = ColorUtils.colorForTid(index) 127 if (data.startNS === NetworkAbilityMonitorStruct.hoverNetworkAbilityStruct?.startNS) { 128 context2D.lineWidth = 1; 129 context2D.globalAlpha = 0.6; 130 let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0) * 1.0) / maxNetworkRate); 131 context2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight) 132 context2D.beginPath() 133 context2D.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, 3, 0, 2 * Math.PI, true) 134 context2D.fill() 135 context2D.globalAlpha = 1.0; 136 context2D.stroke(); 137 context2D.beginPath() 138 context2D.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight + 4); 139 context2D.lineWidth = 3; 140 context2D.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight + 4) 141 context2D.stroke(); 142 } else { 143 context2D.globalAlpha = 0.6; 144 context2D.lineWidth = 1; 145 let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0)) / maxNetworkRate); 146 context2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight) 147 } 148 } 149 context2D.globalAlpha = 1.0; 150 context2D.lineWidth = 1; 151 } 152 153 static setNetworkFrame(node: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) { 154 let startPointX: number, endPointX: number 155 156 if ((node.startNS || 0) < startNS) { 157 startPointX = 0 158 } else { 159 startPointX = ns2x((node.startNS || 0), startNS, endNS, totalNS, frame); 160 } 161 if ((node.startNS || 0) + (node.dur || 0) > endNS) { 162 endPointX = frame.width; 163 } else { 164 endPointX = ns2x((node.startNS || 0) + (node.dur || 0), startNS, endNS, totalNS, frame); 165 } 166 let frameWidth: number = endPointX - startPointX <= 1 ? 1 : endPointX - startPointX; 167 if (!node.frame) { 168 node.frame = {}; 169 } 170 node.frame.x = Math.floor(startPointX); 171 node.frame.y = frame.y + padding; 172 node.frame.width = Math.ceil(frameWidth); 173 node.frame.height = Math.floor(frame.height - padding * 2); 174 } 175} 176