From dfc5117d8507a0061d4d7abc04f650b383e0bb0a Mon Sep 17 00:00:00 2001 From: chuaizhzh Date: Wed, 17 Apr 2024 15:50:50 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E2=80=98fix:TS=E4=BB=A3=E7=A0=81=E6=95=B4?= =?UTF-8?q?=E6=94=B9=E2=80=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: chuaizhzh --- ide/README_zh.md | 2 +- ide/server/main.go | 24 +- ide/src/base-ui/button/LitButton.ts | 2 +- .../base-ui/chart/column/LitChartColumn.ts | 16 +- .../base-ui/chart/pagenation/PageNation.ts | 14 +- ide/src/base-ui/chart/pie/LitChartPie.ts | 14 +- .../base-ui/chart/scatter/LitChartScatter.ts | 77 +- .../chart/scatter/LitChartScatterConfig.ts | 1 + ide/src/base-ui/drawer/LitDrawer.ts | 11 +- ide/src/base-ui/menu/LitMainMenu.ts | 16 +- ide/src/base-ui/menu/LitMainMenuGroup.ts | 2 +- ide/src/base-ui/menu/LitMainMenuItem.ts | 2 +- ide/src/base-ui/popover/LitPopover.ts | 2 +- ide/src/base-ui/popover/LitPopoverV.ts | 4 +- ide/src/base-ui/radiobox/LitRadioBox.ts | 1 + ide/src/base-ui/select/LitSelect.ts | 1 + ide/src/base-ui/select/LitSelectV.ts | 4 +- ide/src/base-ui/slicer/lit-slicer.ts | 2 +- ide/src/base-ui/switch/lit-switch.ts | 8 +- ide/src/base-ui/table/lit-table.ts | 2 - ide/src/base-ui/tabs/lit-tabs.html.ts | 2 +- ide/src/base-ui/tabs/lit-tabs.ts | 14 +- ide/src/base-ui/tree/LitTree.ts | 22 +- ide/src/base-ui/tree/LitTreeNode.html.ts | 2 +- ide/src/base-ui/tree/LitTreeNode.ts | 2 +- ide/src/base-ui/utils/CSVFormater.ts | 7 +- ide/src/base-ui/utils/ExcelFormater.ts | 30 +- ide/src/doc/compile_trace_streamer.html | 9 +- ide/src/doc/des_binder.html | 9 +- ide/src/doc/des_stat.html | 3 +- ide/src/doc/des_tables.html | 165 +- ide/src/doc/des_wakup.html | 6 +- ...quickstart_Application_operation_skills.md | 5 - .../doc/md/quickstart_ability_monitor.html | 48 +- ide/src/doc/md/quickstart_device_record.md | 2 +- ide/src/doc/md/quickstart_native_memory.md | 2 +- ide/src/doc/md/quickstart_parsing_ability.md | 1 + ide/src/doc/md/quickstart_systemtrace.md | 21 +- ...ickstart_Application_operation_skills.html | 126 +- ide/src/doc/quickstart_Frametimeline.html | 30 +- ide/src/doc/quickstart_Import_so.html | 81 +- ide/src/doc/quickstart_Js_memory.html | 33 +- ide/src/doc/quickstart_ability_monitor.html | 48 +- ide/src/doc/quickstart_app_startup.html | 42 +- ide/src/doc/quickstart_bio.html | 61 +- ide/src/doc/quickstart_device_record.html | 33 +- ide/src/doc/quickstart_filesystem.html | 85 +- ide/src/doc/quickstart_hilog.html | 12 +- ide/src/doc/quickstart_hiperf.html | 100 +- ide/src/doc/quickstart_hisystemevent.html | 56 +- ide/src/doc/quickstart_native_memory.html | 82 +- ide/src/doc/quickstart_page_fault.html | 72 +- ide/src/doc/quickstart_parsing_ability.html | 25 +- .../doc/quickstart_schedulinganalysis.html | 69 +- ide/src/doc/quickstart_sdk.html | 3 +- ...ickstart_smartperflinux_compile_guide.html | 41 +- ide/src/doc/quickstart_sql_metrics.html | 12 +- ide/src/doc/quickstart_systemtrace.html | 145 +- ide/src/doc/quickstart_taskpool.html | 27 +- ide/src/doc/quickstart_web_record.html | 39 +- .../OperationSkills/Tabskillsubsystem.jpg | Bin 25100 -> 0 bytes .../OperationSkills/Tabskilltemple.jpg | Bin 145063 -> 136725 bytes .../OperationSkills/Tabskilltempleshow.jpg | Bin 5534 -> 0 bytes .../OperationSkills/subsystemdownload.jpg | Bin 822 -> 0 bytes .../OperationSkills/subsystemsconfig.jpg | Bin 46936 -> 0 bytes .../OperationSkills/subsystemupload.jpg | Bin 940 -> 0 bytes ide/src/js-heap/LoadDatabase.ts | 8 +- .../statistics/util/SpStatisticsHttpUtil.ts | 6 +- ide/src/trace/SpApplication.ts | 240 +-- ide/src/trace/SpApplicationPublicFunc.ts | 22 +- ide/src/trace/bean/BinderProcessThread.ts | 13 +- ide/src/trace/bean/BoxSelection.ts | 24 +- ide/src/trace/bean/FpsStruct.ts | 2 +- ide/src/trace/bean/FrameChartStruct.ts | 39 +- ide/src/trace/bean/GpufreqBean.ts | 11 +- ide/src/trace/bean/NativeHook.ts | 3 + ide/src/trace/bean/NumBean.ts | 2 +- ide/src/trace/bean/ProcessMemStruct.ts | 1 + ide/src/trace/bean/ProcessStruct.ts | 1 + ide/src/trace/bean/SchedSwitchStruct.ts | 5 +- ide/src/trace/bean/StateModle.ts | 62 +- ide/src/trace/bean/ThreadStruct.ts | 2 +- ide/src/trace/component/SpFlags.ts | 21 +- ide/src/trace/component/SpHelp.ts | 114 +- ide/src/trace/component/SpInfoAndStas.html.ts | 2 +- ide/src/trace/component/SpKeyboard.ts | 2 +- ide/src/trace/component/SpMetrics.html.ts | 2 +- ide/src/trace/component/SpQuerySQL.html.ts | 2 +- ide/src/trace/component/SpQuerySQL.ts | 2 +- .../trace/component/SpRecordConfigModel.ts | 72 +- ide/src/trace/component/SpRecordTrace.ts | 65 +- .../trace/component/SpSystemTrace.event.ts | 255 +-- ide/src/trace/component/SpSystemTrace.html.ts | 2 +- ide/src/trace/component/SpSystemTrace.init.ts | 1817 ++++++++--------- ide/src/trace/component/SpSystemTrace.line.ts | 29 +- ide/src/trace/component/SpSystemTrace.ts | 94 +- ide/src/trace/component/SpThirdParty.ts | 11 +- ide/src/trace/component/Utils.ts | 8 +- ide/src/trace/component/chart/FrameChart.ts | 39 +- .../trace/component/chart/PerfDataQuery.ts | 2 +- .../trace/component/chart/SpAllAppStartups.ts | 2 +- .../trace/component/chart/SpBpftraceChart.ts | 182 +- .../trace/component/chart/SpChartManager.ts | 11 +- ide/src/trace/component/chart/SpClockChart.ts | 22 +- ide/src/trace/component/chart/SpEBPFChart.ts | 2 +- ide/src/trace/component/chart/SpFpsChart.ts | 2 +- .../trace/component/chart/SpFrameTimeChart.ts | 33 +- ide/src/trace/component/chart/SpFreqChart.ts | 1 + ide/src/trace/component/chart/SpHiPerf.ts | 82 +- .../component/chart/SpHiSysEnergyChart.ts | 131 +- .../component/chart/SpHiSysEventChart.ts | 2 +- ide/src/trace/component/chart/SpIrqChart.ts | 20 +- ide/src/trace/component/chart/SpLTPO.ts | 318 ++- ide/src/trace/component/chart/SpLogChart.ts | 2 +- .../component/chart/SpNativeMemoryChart.ts | 8 +- .../component/chart/SpPerfOutputDataChart.ts | 159 -- .../trace/component/chart/SpProcessChart.ts | 370 ++-- ide/src/trace/component/chart/SpSdkChart.ts | 77 +- .../component/chart/SpSegmentationChart.ts | 182 +- .../component/chart/SpVirtualMemChart.ts | 5 +- .../trace/component/chart/SpVmTrackerChart.ts | 12 +- ide/src/trace/component/chart/VSync.ts | 40 +- .../CheckCpuSetting.html.ts | 2 +- .../schedulingAnalysis/TabCpuAnalysis.html.ts | 2 +- .../TabCpuDetailsFrequency.html.ts | 2 +- .../TabCpuDetailsIdle.html.ts | 2 +- .../schedulingAnalysis/TabCpuDetailsIdle.ts | 4 +- .../TabCpuDetailsIrq.html.ts | 2 +- .../TabCpuDetailsThreads.html.ts | 2 +- .../TabThreadAnalysis.html.ts | 2 +- .../Top20FrequencyThread.html.ts | 2 +- .../Top20FrequencyThread.ts | 2 +- .../Top20ThreadCpuUsage.html.ts | 2 +- .../component/setting/SpAllocation.html.ts | 507 ++--- .../trace/component/setting/SpAllocations.ts | 421 ++-- .../component/setting/SpHilogRecord.html.ts | 9 +- .../trace/component/setting/SpProbesConfig.ts | 149 +- .../trace/component/setting/SpRecordPerf.ts | 21 +- .../component/setting/SpRecordSetting.ts | 8 +- .../trace/component/setting/SpSdkConfig.ts | 1 + .../trace/component/setting/SpWebHdcShell.ts | 3 +- .../setting/bean/ProfilerServiceTypes.ts | 8 +- .../setting/utils/PluginConvertUtils.ts | 46 +- ide/src/trace/component/trace/SpChartList.ts | 12 +- .../component/trace/TimerShaftElement.html.ts | 4 +- .../component/trace/TimerShaftElement.ts | 39 +- .../trace/base/CustomThemeColor.html.ts | 2 +- .../trace/component/trace/base/Extension.ts | 8 +- .../trace/component/trace/base/RangeSelect.ts | 180 +- .../trace/component/trace/base/TraceRow.ts | 126 +- .../component/trace/base/TraceRowConfig.ts | 90 +- .../component/trace/base/TraceRowObject.ts | 4 +- .../trace/component/trace/base/TraceSheet.ts | 222 +- .../component/trace/base/TraceSheetConfig.ts | 13 +- ide/src/trace/component/trace/base/Utils.ts | 3 +- .../component/trace/search/Search.html.ts | 2 +- .../trace/component/trace/search/Search.ts | 3 +- .../trace/sheet/TabPaneCurrent.html.ts | 2 +- .../sheet/TabPaneCurrentSelection.html.ts | 2 +- .../trace/sheet/TabPaneCurrentSelection.ts | 373 +--- .../component/trace/sheet/TabPaneDataCut.ts | 40 +- .../trace/sheet/TabPaneFilter.html.ts | 4 +- .../component/trace/sheet/TabPaneFilter.ts | 16 +- .../trace/sheet/TabPaneJsMemoryFilter.ts | 3 +- .../trace/sheet/ability/TabPaneCpuAbility.ts | 48 +- .../trace/sheet/ability/TabPaneDiskAbility.ts | 44 +- .../trace/sheet/ability/TabPaneDmaAbility.ts | 75 +- .../sheet/ability/TabPaneDmaSelectAbility.ts | 8 +- .../ability/TabPaneGpuMemoryComparison.ts | 2 +- .../ability/TabPaneGpuMemorySelectAbility.ts | 2 +- .../sheet/ability/TabPaneHistoryProcesses.ts | 8 +- .../sheet/ability/TabPaneLiveProcesses.ts | 2 +- .../sheet/ability/TabPaneMemoryAbility.ts | 16 +- .../sheet/ability/TabPaneNetworkAbility.ts | 35 +- .../trace/sheet/ability/TabPanePurgPin.ts | 6 +- .../sheet/ability/TabPanePurgPinSelection.ts | 4 +- .../trace/sheet/ability/TabPanePurgTotal.ts | 2 +- .../ability/TabPanePurgTotalSelection.ts | 4 +- .../sheet/ark-ts/TabPaneJsCpuStatistics.ts | 7 +- .../trace/sheet/ark-ts/TabPaneSummary.ts | 80 +- .../sheet/binder/TabPaneBinderDataCut.ts | 103 +- .../trace/sheet/binder/TabPaneBinders.ts | 1 + .../bpftrace/TabPaneSampleInstruction.ts | 123 +- .../TabPaneSampleInstructionDistributions.ts | 142 +- .../TabPaneSampleInstructionSelection.ts | 150 +- ...PaneSampleInstructionSelectionTotalTime.ts | 180 +- .../trace/sheet/clock/TabPaneClockCounter.ts | 6 +- .../trace/sheet/cpu/TabPaneBoxChild.ts | 2 +- .../trace/sheet/cpu/TabPaneCounterSample.ts | 4 +- .../trace/sheet/cpu/TabPaneCpuByProcess.ts | 2 +- .../trace/sheet/cpu/TabPaneCpuByThread.ts | 5 +- .../trace/sheet/cpu/TabPaneCpuUsage.ts | 2 +- .../trace/sheet/cpu/TabPaneFrequencySample.ts | 30 +- .../component/trace/sheet/cpu/TabPanePTS.ts | 4 +- .../component/trace/sheet/cpu/TabPaneSPT.ts | 4 +- .../trace/sheet/cpu/TabPaneSchedPriority.ts | 11 +- .../sheet/energy/TabPaneEnergyAnomaly.ts | 32 +- .../trace/sheet/energy/TabPanePowerBattery.ts | 2 +- .../trace/sheet/energy/TabPanePowerDetails.ts | 29 +- .../sheet/energy/TabPaneSystemDetails.ts | 19 +- .../sheet/file-system/TabPaneCallTree.html.ts | 6 +- .../sheet/file-system/TabPaneCallTree.ts | 11 +- .../TabPaneFileSystemCalltree.html.ts | 6 +- .../file-system/TabPaneFileSystemCalltree.ts | 11 +- .../TabPaneFileSystemDescHistory.html.ts | 2 +- .../TabPaneFileSystemDescTimeSlice.html.ts | 2 +- .../TabPaneFileSystemDescTimeSlice.ts | 25 +- .../TabPaneFileSystemEvents.html.ts | 2 +- .../file-system/TabPaneFileSystemEvents.ts | 6 +- ...abPaneFilesystemStatisticsAnalysis.html.ts | 2 +- .../TabPaneIOTierStatisticsAnalysis.html.ts | 2 +- .../TabPaneIOTierStatisticsAnalysis.ts | 38 +- .../file-system/TabPaneIoCompletionTimes.ts | 55 +- .../sheet/file-system/TabPaneVMEvents.ts | 17 +- .../component/trace/sheet/fps/TabPaneFps.ts | 2 +- .../trace/sheet/freq/TabPaneCpuFreqLimits.ts | 2 +- .../sheet/frequsage/TabPaneFreqDataCut.ts | 1006 +++------ .../trace/sheet/frequsage/TabPaneFreqUsage.ts | 518 ++--- .../sheet/frequsage/TabPaneFreqUsageConfig.ts | 22 +- .../sheet/gpu/TabPaneGpuTotalBoxSelect.ts | 2 +- .../component/trace/sheet/gpu/TabPaneGraph.ts | 2 +- .../sheet/gpufreq/TabPaneGpufreqDataCut.ts | 215 +- .../sheet/gpufreq/TabPaneGpufreqUsage.ts | 136 +- .../trace/sheet/hilog/TabPaneHiLogSummary.ts | 10 +- .../trace/sheet/hilog/TabPaneHiLogs.ts | 4 +- .../trace/sheet/hiperf/TabPerfProfile.html.ts | 2 +- .../trace/sheet/hiperf/TabPerfProfile.ts | 3 +- .../trace/sheet/hiperf/TabPerfSampleList.ts | 34 +- .../TabPaneHiSysEventSummary.html.ts | 28 +- .../hisysevent/TabPaneHiSysEventSummary.ts | 34 +- .../hisysevent/TabPaneHisysEvents.html.ts | 26 +- .../sheet/hisysevent/TabPaneHisysEvents.ts | 17 +- .../trace/sheet/irq/TabPaneIrqCounter.ts | 6 +- .../trace/sheet/jank/TabPaneFrames.ts | 6 +- .../native-memory/TabPaneNMCallTree.html.ts | 8 +- .../sheet/native-memory/TabPaneNMCallTree.ts | 11 +- .../native-memory/TabPaneNMSampleList.ts | 32 +- .../TabPaneNMStatisticAnalysis.html.ts | 2 +- .../sheet/native-memory/TabPaneNMStatstics.ts | 15 +- .../native-memory/TabPaneNMemory.html.ts | 4 +- .../sheet/native-memory/TabPaneNMemory.ts | 24 +- .../trace/sheet/process/TabPaneCounter.ts | 24 +- .../trace/sheet/process/TabPaneSlices.ts | 124 +- .../sheet/process/TabPaneThreadStates.ts | 19 +- .../trace/sheet/process/TabPaneThreadUsage.ts | 39 +- .../sheet/schedswitch/TabPaneSchedSwitch.ts | 190 +- .../trace/sheet/sdk/TabPaneSdkCounter.ts | 8 +- .../trace/sheet/sdk/TabPaneSdkSlice.ts | 40 +- .../sheet/smaps/TabPaneSmapsComparison.ts | 2 +- .../trace/sheet/smaps/TabPaneSmapsRecord.ts | 2 +- .../trace/sheet/smaps/TabPaneSmapsSample.ts | 10 +- .../sheet/smaps/TabPaneSmapsStatistics.ts | 13 +- .../sheet/states/TabPaneFreqStatesDataCut.ts | 212 +- .../trace/sheet/task/TabPaneTaskFrames.ts | 10 +- .../vmtracker/TabPaneDmaSelectVmTracker.ts | 20 +- .../sheet/vmtracker/TabPaneDmaVmTracker.ts | 2 +- .../TabPaneDmaVmTrackerComparison.ts | 2 +- .../TabPaneGpuMemorySelectVmTracker.ts | 2 +- .../vmtracker/TabPaneGpuMemoryVmTracker.ts | 2 +- .../TabPaneGpuMemoryVmTrackerComparison.ts | 2 +- .../vmtracker/TabPaneGpuResourceVmTracker.ts | 2 +- .../vmtracker/TabPanePurgPinComparisonVM.ts | 2 +- .../sheet/vmtracker/TabPaneVmTrackerShm.ts | 2 +- .../TabPaneVmTrackerShmSelection.html.ts | 2 +- .../vmtracker/TabPaneVmTrackerShmSelection.ts | 22 +- .../component/trace/timer-shaft/RangeRuler.ts | 68 +- .../trace/component/trace/timer-shaft/Rect.ts | 8 +- .../component/trace/timer-shaft/SportRuler.ts | 17 +- .../component/trace/timer-shaft/TimeRuler.ts | 2 +- ide/src/trace/config/custom_temp_config.json | 106 +- ide/src/trace/database/ConvertTraceWorker.ts | 45 +- ide/src/trace/database/LongTraceDBUtils.ts | 12 +- ide/src/trace/database/StateBusyTimeWorker.ts | 15 +- ide/src/trace/database/TraceWorker.ts | 398 ++-- .../database/data-trafic/ArkTsReceiver.ts | 2 +- .../database/data-trafic/ClockDataReceiver.ts | 22 +- .../database/data-trafic/ClockDataSender.ts | 10 +- .../database/data-trafic/CpuDataReceiver.ts | 17 +- .../database/data-trafic/CpuDataSender.ts | 54 +- .../database/data-trafic/EBPFReceiver.ts | 23 +- .../data-trafic/EnergySysEventReceiver.ts | 55 +- .../data-trafic/FrameDynamicEffectSender.ts | 97 +- .../database/data-trafic/FrameJanksSender.ts | 2 +- .../data-trafic/HiSysEventDataReceiver.ts | 36 +- .../database/data-trafic/IrqDataReceiver.ts | 8 +- .../database/data-trafic/IrqDataSender.ts | 2 +- .../database/data-trafic/LogDataReceiver.ts | 24 +- .../database/data-trafic/LostFrameReceiver.ts | 34 +- .../database/data-trafic/LostFrameSender.ts | 32 +- .../data-trafic/NativeMemoryDataReceiver.ts | 12 +- .../database/data-trafic/SliceReceiver.ts | 22 +- .../trace/database/data-trafic/SliceSender.ts | 46 +- .../cpu/CpuFreqLimitDataReceiver.ts | 26 +- .../hiperf/HiperfCallChartReceiver.ts | 4 +- .../hiperf/HiperfCallChartSender.ts | 2 +- .../hiperf/HiperfCpuDataReceiver.ts | 2 +- .../hiperf/HiperfProcessDataReceiver.ts | 2 +- .../hiperf/HiperfThreadDataReceiver.ts | 7 +- .../data-trafic/process/FuncDataReceiver.ts | 40 +- .../data-trafic/process/FuncDataSender.ts | 10 +- .../process/ProcessDataReceiver.ts | 2 +- .../process/ProcessExpectedDataReceiver.ts | 4 +- .../process/ProcessMemDataReceiver.ts | 2 +- .../data-trafic/process/ThreadDataSender.ts | 12 +- .../database/data-trafic/utils/DataFilter.ts | 58 +- .../data-trafic/utils/ExecProtoForWorker.ts | 9 +- .../ProcedureLogicWorkerCommon.ts | 34 +- .../ProcedureLogicWorkerFileSystem.ts | 23 +- .../ProcedureLogicWorkerNativeNemory.ts | 29 +- .../logic-worker/ProcedureLogicWorkerPerf.ts | 17 +- ide/src/trace/database/sql/Ability.sql.ts | 19 +- ide/src/trace/database/sql/Clock.sql.ts | 15 +- ide/src/trace/database/sql/Cpu.sql.ts | 23 +- ide/src/trace/database/sql/Dma.sql.ts | 8 +- ide/src/trace/database/sql/Func.sql.ts | 235 ++- ide/src/trace/database/sql/Gpu.sql.ts | 7 +- ide/src/trace/database/sql/Irq.sql.ts | 6 +- ide/src/trace/database/sql/Janks.sql.ts | 14 +- ide/src/trace/database/sql/Ltpo.sql.ts | 32 +- ide/src/trace/database/sql/Memory.sql.ts | 10 +- ide/src/trace/database/sql/NativeHook.sql.ts | 6 +- .../trace/database/sql/ProcessThread.sql.ts | 79 +- ide/src/trace/database/sql/Sdk.sql.ts | 8 +- ide/src/trace/database/sql/Smaps.sql.ts | 6 +- ide/src/trace/database/sql/SqlLite.sql.ts | 119 +- .../database/ui-worker/ProcedureWorker.ts | 7 +- .../ui-worker/ProcedureWorkerAllAppStartup.ts | 12 +- .../ui-worker/ProcedureWorkerAppStartup.ts | 18 +- .../ui-worker/ProcedureWorkerBpftrace.ts | 105 +- .../ui-worker/ProcedureWorkerClock.ts | 5 +- .../ui-worker/ProcedureWorkerCommon.ts | 88 +- .../ui-worker/ProcedureWorkerCpuProfiler.ts | 5 +- .../ProcedureWorkerFrameAnimation.ts | 23 +- .../ui-worker/ProcedureWorkerFrameDynamic.ts | 9 +- .../ui-worker/ProcedureWorkerFrameSpacing.ts | 9 +- .../database/ui-worker/ProcedureWorkerFreq.ts | 4 +- .../ui-worker/ProcedureWorkerFreqExtend.ts | 89 +- .../database/ui-worker/ProcedureWorkerFunc.ts | 59 +- .../database/ui-worker/ProcedureWorkerHeap.ts | 6 +- .../ui-worker/ProcedureWorkerHeapSnapshot.ts | 12 +- .../ui-worker/ProcedureWorkerHitchTime.ts | 34 +- .../database/ui-worker/ProcedureWorkerIrq.ts | 6 +- .../database/ui-worker/ProcedureWorkerJank.ts | 18 +- .../database/ui-worker/ProcedureWorkerLTPO.ts | 32 +- .../ui-worker/ProcedureWorkerPerfTool.ts | 108 - .../ui-worker/ProcedureWorkerSnapshot.ts | 91 +- .../ui-worker/ProcedureWorkerSoInit.ts | 10 +- .../ui-worker/ProcedureWorkerThread.ts | 87 +- .../ui-worker/cpu/ProcedureWorkerCPU.ts | 5 +- .../cpu/ProcedureWorkerCpuFreqLimits.ts | 25 +- .../ui-worker/cpu/ProcedureWorkerCpuState.ts | 4 +- .../ui-worker/procedureWorkerBinder.ts | 63 +- ide/src/trace/enums/helpDocEnums.ts | 181 -- .../trace/component/SpSystemTrace.test.ts | 4 + trace_streamer/README.md | 6 +- trace_streamer/gn/BUILD.gn | 6 +- trace_streamer/gn/CONFIG.gn | 7 +- trace_streamer/gn/wasm.gni | 2 +- .../sdk/demo_sdk/doc/TraceStreamerSDK.md | 18 +- .../plugin/sdk_plugin_data_parser.cpp | 23 +- .../demo_sdk/plugin/sdk_plugin_data_parser.h | 6 +- .../sdk/demo_sdk/rpc/demo_rpc_server.cpp | 20 +- .../sdk/demo_sdk/sdk/sdk_data_parser.cpp | 2 +- .../sdk/demo_sdk/sdk/sdk_data_parser.h | 2 +- .../sdk/demo_sdk/sdk/ts_sdk_api.cpp | 12 +- trace_streamer/sdk/demo_sdk/sdk/ts_sdk_api.h | 10 +- trace_streamer/sdk/demo_sdk/sdk/wasm_func.cpp | 16 +- .../sdk/demo_sdk/table/demo_meta_table.h | 2 +- .../sdk/demo_sdk/table/demo_table_base.h | 6 +- .../sdk/demo_sdk/table/gpu_counter_table.cpp | 6 +- .../sdk/demo_sdk/table/gpu_counter_table.h | 2 +- .../sdk/demo_sdk/table/slice_object_table.cpp | 6 +- .../sdk/demo_sdk/table/slice_object_table.h | 2 +- .../sdk/demo_sdk/table/slice_table.cpp | 6 +- .../sdk/demo_sdk/table/slice_table.h | 2 +- .../demo_sdk/test/unittest/sdk_api_test.cpp | 68 +- .../sdk/demo_sdk/trace_data/trace_stdtype.h | 2 +- trace_streamer/sdk/demo_sdk/version.cpp | 4 +- trace_streamer/sdk/demo_sdk/version.h | 4 +- .../filter/hook_filter/native_hook_filter.h | 9 +- trace_streamer/src/filter/slice_filter.cpp | 7 +- trace_streamer/src/main.cpp | 14 +- .../parser/ebpf_parser/ebpf_data_reader.cpp | 19 +- .../src/parser/ebpf_parser/ebpf_data_reader.h | 7 +- .../src/parser/ebpf_parser/ebpf_splitter.cpp | 12 +- .../parser/hiperf_parser/perf_data_parser.cpp | 14 +- .../pbreader_parser/pbreader_parser.cpp | 6 +- .../bytrace_parser/bytrace_event_parser.cpp | 1 - trace_streamer/src/proto_reader/BUILD.gn | 5 +- .../proto_reader/include/proto_reader_help.h | 18 +- .../src/proto_reader/proto_reader_help.cpp | 37 + trace_streamer/src/rpc/rpc_server.cpp | 8 +- trace_streamer/src/rpc/rpc_server.h | 2 +- trace_streamer/src/rpc/wasm_func.cpp | 32 +- trace_streamer/src/rpc/wasm_func.h | 6 +- .../trace_data/sqllite_prepar_cache_data.h | 2 +- .../src/trace_data/trace_data_cache.h | 2 +- .../trace_stdtype/htrace/arkts_stdtype.cpp | 7 +- trace_streamer/src/version.cpp | 4 +- trace_streamer/src/version.h | 4 +- .../interface/split_file_data_test.cpp | 2 +- .../ptreader_parser/event_parser_test.cpp | 8 +- .../unittest/query/query_metrics_test.cpp | 9 +- .../rawtrace/rawtrace_parser_test.cpp | 12 +- 404 files changed, 6621 insertions(+), 10092 deletions(-) delete mode 100644 ide/src/figures/OperationSkills/Tabskillsubsystem.jpg delete mode 100644 ide/src/figures/OperationSkills/Tabskilltempleshow.jpg delete mode 100644 ide/src/figures/OperationSkills/subsystemdownload.jpg delete mode 100644 ide/src/figures/OperationSkills/subsystemsconfig.jpg delete mode 100644 ide/src/figures/OperationSkills/subsystemupload.jpg delete mode 100644 ide/src/trace/component/chart/SpPerfOutputDataChart.ts delete mode 100644 ide/src/trace/database/ui-worker/ProcedureWorkerPerfTool.ts delete mode 100644 ide/src/trace/enums/helpDocEnums.ts create mode 100644 trace_streamer/src/proto_reader/proto_reader_help.cpp diff --git a/ide/README_zh.md b/ide/README_zh.md index c0c03824..73bb4675 100644 --- a/ide/README_zh.md +++ b/ide/README_zh.md @@ -65,7 +65,7 @@ ``` ![](./src/figures/deploy/yum_install_go.png) -- windows 系统下 从官网下载安装包， 一路next 完成 安装即可 +- windows 系统下 从 https://golang.google.cn/dl/ 下载安装包， 一路next 完成 安装即可 - 安装完成后 命令行运行验证是否安装成功 diff --git a/ide/server/main.go b/ide/server/main.go index a8c8af50..4f2aebf2 100644 --- a/ide/server/main.go +++ b/ide/server/main.go @@ -42,7 +42,6 @@ import ( "strconv" "strings" "time" - "flag" ) const HttpPort = 9000 @@ -113,16 +112,7 @@ func genSSL() { keyOut.Close() } func main() { - port := HttpPort - isOpen := 1 - flag.IntVar(&port, "p", HttpPort, "The port number used") - flag.IntVar(&isOpen, "o", 1 , "Whether to immediately open the website in your browser; 1 is true; 0 is false") - flag.Parse() - if isOpen < 0 || isOpen > 1 { - fmt.Println("Error: -o must be 0 or 1") - return - } - checkPort(port) + checkPort(HttpPort) genSSL() exPath = getCurrentAbPath() fmt.Println(exPath) @@ -147,25 +137,23 @@ func main() { mux.Handle("/application/", http.StripPrefix("/application/", cors(fs, version))) go func() { ser := &http.Server{ - Addr: fmt.Sprintf(":%d", port), + Addr: fmt.Sprintf(":%d", HttpPort), Handler: mux, } - log.Println(fmt.Sprintf("HTTPS[%d]服务启动", port)) + log.Println(fmt.Sprintf("HTTPS[%d]服务启动", HttpPort)) err := ser.ListenAndServeTLS("cert/certFile.pem", "cert/keyFile.key") CheckErr(err) }() go func() { ser := &http.Server{ - Addr: fmt.Sprintf(":%d", port+1), + Addr: fmt.Sprintf(":%d", HttpPort+1), Handler: mux, } - log.Println(fmt.Sprintf("HTTP[%d]服务启动", port)) + log.Println(fmt.Sprintf("HTTP[%d]服务启动", HttpPort)) err := ser.ListenAndServe() CheckErr(err) }() - if (isOpen == 1){ - open(fmt.Sprintf("https://localhost:%d/application", port)) - } + open(fmt.Sprintf("https://localhost:%d/application", HttpPort)) }() select {} } diff --git a/ide/src/base-ui/button/LitButton.ts b/ide/src/base-ui/button/LitButton.ts index 18d67031..e04eb065 100644 --- a/ide/src/base-ui/button/LitButton.ts +++ b/ide/src/base-ui/button/LitButton.ts @@ -183,7 +183,7 @@ export class LitButton extends BaseElement { opacity: 0.1; } - `; + ` } initElements(): void { diff --git a/ide/src/base-ui/chart/column/LitChartColumn.ts b/ide/src/base-ui/chart/column/LitChartColumn.ts index 6178925f..7aff26a1 100644 --- a/ide/src/base-ui/chart/column/LitChartColumn.ts +++ b/ide/src/base-ui/chart/column/LitChartColumn.ts @@ -193,7 +193,7 @@ export class LitChartColumn extends BaseElement { return this.litChartColumnCfg?.data || []; } - dataSort(): void { + dataSort():void{ if (!this.litChartColumnCfg!.notSort) { this.litChartColumnCfg?.data.sort( (a, b) => b[this.litChartColumnCfg!.yField] - a[this.litChartColumnCfg!.yField] @@ -201,7 +201,7 @@ export class LitChartColumn extends BaseElement { } } - haveSeriesField(): void { + haveSeriesField():void{ let maxValue = Math.max(...this.litChartColumnCfg!.data.map((it) => it[this.litChartColumnCfg!.yField])); maxValue = Math.ceil(maxValue * 0.1) * 10; let partWidth = (this.clientWidth - this.offset!.x!) / this.litChartColumnCfg!.data.length; @@ -249,15 +249,7 @@ export class LitChartColumn extends BaseElement { }); } - noSeriesField( - itemEl: any, - y: number, - initH: number, - maxValue: number, - partWidth: number, - partHeight: number, - reduceGroupIndex: number - ): void { + noSeriesField(itemEl:any,y:number,initH:number,maxValue:number,partWidth:number,partHeight:number,reduceGroupIndex:number):void{ this.data.push({ color: this.litChartColumnCfg!.color(itemEl), obj: itemEl, @@ -326,7 +318,7 @@ export class LitChartColumn extends BaseElement { let elements = reduceGroup[reduceGroupKey]; let initH = 0; elements.forEach((itemEl: any, y: number) => { - this.noSeriesField(itemEl, y, initH, maxValue, partWidth, partHeight, reduceGroupIndex); + this.noSeriesField(itemEl,y,initH,maxValue,partWidth,partHeight,reduceGroupIndex); initH += (itemEl[this.litChartColumnCfg!.yField] * partHeight) / maxValue; }); }); diff --git a/ide/src/base-ui/chart/pagenation/PageNation.ts b/ide/src/base-ui/chart/pagenation/PageNation.ts index 16cfd6c2..5c6da0e9 100644 --- a/ide/src/base-ui/chart/pagenation/PageNation.ts +++ b/ide/src/base-ui/chart/pagenation/PageNation.ts @@ -91,7 +91,7 @@ export class PageNation { }); } - createElement(jumpDiv: HTMLElement): void { + createElement(jumpDiv:HTMLElement):void{ // Create input field this.inputBox = document.createElement('input'); this.inputBox.value = this.pageInfo.current; @@ -210,8 +210,8 @@ export class PageNation { } bindPageList() { - this.list.innerHTML = ''; // clear ul its contents - const { pageSize, current, totalpage } = this.pageInfo; //Clean the ul before each load + this.list.innerHTML = '';// clear ul its contents + const { pageSize, current, totalpage } = this.pageInfo;//Clean the ul before each load const origin = document.createElement('li'); origin.dataset.name = 'item'; this.setElementStyles(origin, { @@ -308,13 +308,13 @@ export class PageNation { } if (current == totalpage - 4) { // 左边5个 中间 ... 右边2个 - this.nodeAppendChild(origin, current, span, totalpage); + this.nodeAppendChild(origin,current,span,totalpage); return true; } return false; } - nodeAppendChild(origin: HTMLElement, current: number, span: any, totalpage: number): void { + nodeAppendChild(origin: HTMLElement,current: number,span: any,totalpage: number):void{ for (let i = 0; i < 2; i++) { this.buildLi(origin, i, current); } @@ -360,13 +360,13 @@ export class PageNation { ); } - targetName(event: { + targetName(event:{ target: { name: string; dataset: { name: string }; innerText: number; }; - }): void { + }):void{ if (event.target.name === 'first') { if (this.pageInfo.current === 1) return; this.pageInfo.current = 1; diff --git a/ide/src/base-ui/chart/pie/LitChartPie.ts b/ide/src/base-ui/chart/pie/LitChartPie.ts index e3216705..ffa1e6c9 100644 --- a/ide/src/base-ui/chart/pie/LitChartPie.ts +++ b/ide/src/base-ui/chart/pie/LitChartPie.ts @@ -134,7 +134,7 @@ const initHtmlStyle = ` margin-right: 5px; } - `; + ` @element('lit-chart-pie') export class LitChartPie extends BaseElement { @@ -189,7 +189,7 @@ export class LitChartPie extends BaseElement { this.render(); } - measureInitialize(): void { + measureInitialize():void{ this.data = []; this.radius = (Math.min(this.clientHeight, this.clientWidth) * 0.65) / 2 - 10; this.labelsEL!.textContent = ''; @@ -249,7 +249,7 @@ export class LitChartPie extends BaseElement { return this.litChartPieConfig; } - addCanvasOnmousemoveEvent(): void { + addCanvasOnmousemoveEvent():void{ this.canvas!.onmousemove = (ev) => { let rect = this.getBoundingClientRect(); let x = ev.pageX - rect.left - this.centerX!; @@ -353,7 +353,7 @@ export class LitChartPie extends BaseElement { }).observe(this); } - handleData(): void { + handleData():void{ this.textRects = []; if (this.litChartPieConfig!.showChartLine) { this.data.forEach((dataItem) => { @@ -422,7 +422,7 @@ export class LitChartPie extends BaseElement { this.setData(ease); } - setData(ease: boolean): void { + setData(ease: boolean):void{ this.data .filter((it) => it.hover) .forEach((it) => { @@ -514,7 +514,7 @@ export class LitChartPie extends BaseElement { direction = 'Left-Top'; } } else { - direction = this.rectSuperposition(rect, r1); + direction = this.rectSuperposition(rect,r1); } return { cross, @@ -524,7 +524,7 @@ export class LitChartPie extends BaseElement { }; } - rectSuperposition(rect: Rectangle, r1: Rectangle): string { + rectSuperposition(rect: Rectangle,r1: Rectangle):string{ if (rect.y > r1.y) { return 'Bottom'; } else if (rect.y == r1.y) { diff --git a/ide/src/base-ui/chart/scatter/LitChartScatter.ts b/ide/src/base-ui/chart/scatter/LitChartScatter.ts index a18416fb..2abbb7c2 100644 --- a/ide/src/base-ui/chart/scatter/LitChartScatter.ts +++ b/ide/src/base-ui/chart/scatter/LitChartScatter.ts @@ -59,7 +59,14 @@ export class LitChartScatter extends BaseElement { drawBackground(): void { let w: number = this.clientWidth; let h: number = this.clientHeight; - let color: CanvasGradient = this.ctx?.createRadialGradient(w / 2, h / 2, 0.2 * w, w / 2, h / 2, 0.5 * w)!; + let color: CanvasGradient = this.ctx?.createRadialGradient( + w / 2, + h / 2, + 0.2 * w, + w / 2, + h / 2, + 0.5 * w + )!; color?.addColorStop(0, '#eaeaea'); color?.addColorStop(1, '#ccc'); if (this.options) { @@ -133,7 +140,8 @@ export class LitChartScatter extends BaseElement { // 画Y轴坐标尺 for (let i = 0; i < yAxis.length; i++) { let length1: number = - (this.originY - this.finalY - ((this.originY - this.finalY) % QUYU)) * (yAxis[i] / yAxis[yAxis.length - 1]); + (this.originY - this.finalY - ((this.originY - this.finalY) % QUYU)) * + (yAxis[i] / yAxis[yAxis.length - 1]); let length2: number = this.originY - length1; let text: string = yAxis[i].toString(); let x: number = this.originX - this.ctx?.measureText(text).width! - AXAIS_DELTA; @@ -159,7 +167,8 @@ export class LitChartScatter extends BaseElement { } for (let i = 0; i < xAxis.length; i++) { let length3: number = - (this.finalX - this.originX - ((this.finalX - this.originX) % QUYU)) * (xAxis[i] / xAxis[xAxis.length - 1]); + (this.finalX - this.originX - ((this.finalX - this.originX) % QUYU)) * + (xAxis[i] / xAxis[xAxis.length - 1]); let length4: number = this.originX + length3; this.ctx?.beginPath(); this.ctx?.moveTo(length4, this.originY); @@ -220,14 +229,20 @@ export class LitChartScatter extends BaseElement { if (data[i].length) { rectY = rectY + 20; this.ctx?.fillText(colorPoolText[i] + ': ', this.clientWidth - WIDTH_DELTA, rectY + 4); - this.drawCycle(this.clientWidth - QUYU / 5, rectY, 7.5, 0.8, colorPool[i]); + this.drawCycle(this.clientWidth - (QUYU / 5), rectY, 7.5, 0.8, colorPool[i]); } } } /** * 画圆点 */ - drawCycle(x: number, y: number, r: number, transparency: number, color: string): void { + drawCycle( + x: number, + y: number, + r: number, + transparency: number, + color: string + ): void { this.ctx!.fillStyle = color; this.ctx?.beginPath(); this.ctx!.globalAlpha = transparency; @@ -248,8 +263,11 @@ export class LitChartScatter extends BaseElement { } // data[1]用来标注n Hz负载线 let addr1: number = - this.originX + (this.finalX - this.originX - ((this.finalX - this.originX) % QUYU)) * (data[0] / maxXAxis); - let addr2: number = (this.originY - this.finalY - ((this.originY - this.finalY) % QUYU)) / FOR_VALUE; + this.originX + + (this.finalX - this.originX - ((this.finalX - this.originX) % QUYU)) * + (data[0] / maxXAxis); + let addr2: number = + (this.originY - this.finalY - ((this.originY - this.finalY) % QUYU)) / FOR_VALUE; let y: number = this.originY; this.ctx!.strokeStyle = '#ff0000'; for (let i = 0; i < FOR_VALUE; i++) { @@ -271,7 +289,11 @@ export class LitChartScatter extends BaseElement { this.ctx!.fillStyle = '#000000'; this.ctx?.fillText('过供给区', addr1 / 2, y + FOR_VALUE / 2); this.ctx?.fillText('欠供给区', addr1 / 2, this.originY - this.finalY); - this.ctx?.fillText('超负载区', addr1 + FOR_VALUE / 3, (this.finalY + this.originY) / 2); + this.ctx?.fillText( + '超负载区', + addr1 + FOR_VALUE / 3, + (this.finalY + this.originY) / 2 + ); } /** @@ -286,8 +308,10 @@ export class LitChartScatter extends BaseElement { } // data[1]用来标注n Hz均衡线 let addr1: number = - ((this.finalX - this.originX - ((this.finalX - this.originX) % QUYU)) * (data[0] / maxXAxis)) / FOR_VALUE; - let addr2: number = (this.originY - this.finalY - ((this.originY - this.finalY) % QUYU)) / FOR_VALUE; + ((this.finalX - this.originX - ((this.finalX - this.originX) % QUYU)) * + (data[0] / maxXAxis)) / FOR_VALUE; + let addr2: number = + (this.originY - this.finalY - ((this.originY - this.finalY) % QUYU)) / FOR_VALUE; let x: number = this.originX; let y: number = this.originY; this.ctx!.strokeStyle = '#00ff00'; @@ -311,7 +335,10 @@ export class LitChartScatter extends BaseElement { } /*检测是否hover在散点之上*/ - checkHover(options: LitChartScatterConfig | undefined, pos: Object): Object | boolean { + checkHover( + options: LitChartScatterConfig | undefined, + pos: Object + ): Object | boolean { let data: Array = []; if (options) { data = options.paintingData; @@ -400,21 +427,10 @@ export class LitChartScatter extends BaseElement { * 显示提示框 */ showTip(data: any): void { - const minWidth: number = 160; - const miniHeight: number = 70; - const canvasWidth: number = Number(this.canvas?.style.width.replace('px', '')); - const canvasHeight: number = Number(this.canvas?.style.height.replace('px', '')); + const Y_DELTA: number = 70; this.scatterTipEL!.style.display = 'flex'; - if (canvasWidth - data.x < minWidth && canvasHeight - data.y >= miniHeight) { - this.scatterTipEL!.style.top = `${data.y}px`; - this.scatterTipEL!.style.left = `${data.x - minWidth}px`; - } else if (canvasHeight - data.y < miniHeight && canvasWidth - data.x > minWidth) { - this.scatterTipEL!.style.top = `${data.y - miniHeight}px`; - this.scatterTipEL!.style.left = `${data.x}px`; - } else { - this.scatterTipEL!.style.top = `${data.y}px`; - this.scatterTipEL!.style.left = `${data.x}px`; - } + this.scatterTipEL!.style.top = `${data.y - Y_DELTA}px`; + this.scatterTipEL!.style.left = `${data.x}px`; this.scatterTipEL!.innerHTML = this.options!.tip(data); // @ts-ignore this.options!.hoverEvent('CPU-FREQ', true, data.c[2] - 1); @@ -453,7 +469,8 @@ export class LitChartScatter extends BaseElement { */ if (hoverPoint) { this.showTip(hoverPoint); - let samePoint: boolean = this.options!.hoverData === hoverPoint ? true : false; + let samePoint: boolean = + this.options!.hoverData === hoverPoint ? true : false; if (!samePoint) { this.resetHoverWithOffScreen(); this.options!.hoverData = hoverPoint; @@ -482,8 +499,7 @@ export class LitChartScatter extends BaseElement { } initHtml(): string { - return ( - ` + return ` -`; +` const initHtmlStyle = (wid: string) => { - return replacePlaceholders(css, wid); + return replacePlaceholders(css,wid); }; @element('lit-popover') diff --git a/ide/src/base-ui/radiobox/LitRadioBox.ts b/ide/src/base-ui/radiobox/LitRadioBox.ts index 0fb53e20..21fab3d4 100644 --- a/ide/src/base-ui/radiobox/LitRadioBox.ts +++ b/ide/src/base-ui/radiobox/LitRadioBox.ts @@ -167,6 +167,7 @@ export class LitRadioBox extends BaseElement { return this.getAttribute('disabled') !== null; } + get checked() { return this.getAttribute('checked') !== null; } diff --git a/ide/src/base-ui/select/LitSelect.ts b/ide/src/base-ui/select/LitSelect.ts index 33a08b06..1f46499e 100644 --- a/ide/src/base-ui/select/LitSelect.ts +++ b/ide/src/base-ui/select/LitSelect.ts @@ -162,6 +162,7 @@ export class LitSelect extends BaseElement { } set dataSource(selectDataSource: any) { + this.innerHTML = ``; if (selectDataSource.length > 0) { this.bodyEl!.style.display = 'flex'; diff --git a/ide/src/base-ui/select/LitSelectV.ts b/ide/src/base-ui/select/LitSelectV.ts index f2f96fbc..dc87e875 100644 --- a/ide/src/base-ui/select/LitSelectV.ts +++ b/ide/src/base-ui/select/LitSelectV.ts @@ -15,7 +15,7 @@ import { BaseElement, element } from '../BaseElement'; import { LitSelectOption } from './LitSelectOption'; -import { selectHtmlStr, selectVHtmlStr } from './LitSelectHtml'; +import {selectHtmlStr, selectVHtmlStr} from './LitSelectHtml'; @element('lit-select-v') export class LitSelectV extends BaseElement { @@ -197,7 +197,7 @@ export class LitSelectV extends BaseElement { this.setEvent(); } - setEvent(): void { + setEvent():void{ this.onmouseout = this.onblur = (ev) => { this.focused = false; }; diff --git a/ide/src/base-ui/slicer/lit-slicer.ts b/ide/src/base-ui/slicer/lit-slicer.ts index 17e18f8c..89c77d87 100644 --- a/ide/src/base-ui/slicer/lit-slicer.ts +++ b/ide/src/base-ui/slicer/lit-slicer.ts @@ -162,7 +162,7 @@ export class LitSlicerTrack extends HTMLElement { } } - isDirection() { + isDirection(){ this.line!.className = 'rootV'; let previousElementSibling = this.previousElementSibling as HTMLElement; let preY: number, preHeight: number; diff --git a/ide/src/base-ui/switch/lit-switch.ts b/ide/src/base-ui/switch/lit-switch.ts index 6db8caa7..725f10df 100644 --- a/ide/src/base-ui/switch/lit-switch.ts +++ b/ide/src/base-ui/switch/lit-switch.ts @@ -15,7 +15,7 @@ import { BaseElement, element } from '../BaseElement'; -const initHtmlStyle: string = ` +const initHtmlStyle:string = ` - `; + `; \ No newline at end of file diff --git a/ide/src/base-ui/tree/LitTreeNode.ts b/ide/src/base-ui/tree/LitTreeNode.ts index a85af650..87f85875 100644 --- a/ide/src/base-ui/tree/LitTreeNode.ts +++ b/ide/src/base-ui/tree/LitTreeNode.ts @@ -17,7 +17,7 @@ import '../icon/LitIcon'; import { BaseElement, element } from '../BaseElement'; import { type LitIcon } from '../icon/LitIcon'; import { type TreeItemData } from './LitTree'; -import { LitTreeNodeHtmlStyle } from './LitTreeNode.html'; +import {LitTreeNodeHtmlStyle} from "./LitTreeNode.html"; @element('lit-tree-node') export class LitTreeNode extends BaseElement { diff --git a/ide/src/base-ui/utils/CSVFormater.ts b/ide/src/base-ui/utils/CSVFormater.ts index dd34c2ee..3b23a86a 100644 --- a/ide/src/base-ui/utils/CSVFormater.ts +++ b/ide/src/base-ui/utils/CSVFormater.ts @@ -51,7 +51,7 @@ export class JSONToCSV { row = ''; // 如果存在自定义key值 if (columns.key.length) { - row = that.getCsvStr(columns, obj, n, row); + row = that.getCsvStr(columns,obj,n,row); } else { for (key in n) { row += @@ -67,7 +67,7 @@ export class JSONToCSV { this.saveCsvFile(fileName, csv); } - static getCsvStr(columns: any, obj: any, n: any, row: string) { + static getCsvStr(columns: any,obj: any,n: any,row: string){ let that = this; columns.key.map(function (m: any, idx: number) { let strItem: any = ''; @@ -91,7 +91,8 @@ export class JSONToCSV { (typeof columns.formatter === 'function' ? columns.formatter(m, n[m]) || n[m] : strItem) + '",'; } else { - row += '"' + (typeof columns.formatter === 'function' ? columns.formatter(m, n[m]) || n[m] : strItem) + '",'; + row += + '"' + (typeof columns.formatter === 'function' ? columns.formatter(m, n[m]) || n[m] : strItem) + '",'; } }); return row; diff --git a/ide/src/base-ui/utils/ExcelFormater.ts b/ide/src/base-ui/utils/ExcelFormater.ts index c939f03e..a251b19d 100644 --- a/ide/src/base-ui/utils/ExcelFormater.ts +++ b/ide/src/base-ui/utils/ExcelFormater.ts @@ -16,11 +16,11 @@ const htmlStr = () => { const html_start = ``; return { - uri: 'data:application/vnd.ms-excel;base64,', - template_ExcelWorksheet: `{SheetName}`, - template_ListWorksheet: ``, - template_WorkBook: - `MIME-Version: 1.0 + uri : 'data:application/vnd.ms-excel;base64,', + template_ExcelWorksheet : `{SheetName}`, + template_ListWorksheet : ``, + template_WorkBook : + `MIME-Version: 1.0 X-Document-Type: Workbook Content-Type: multipart/related; boundary="----=_NextPart_dummy" @@ -29,8 +29,8 @@ Content-Location: WorkBook.htm Content-Type: text/html; charset=windows-1252 ` + - html_start + - ` + html_start + + ` @@ -57,9 +57,9 @@ Content-Type: text/xml; charset="utf-8" ------=_NextPart_dummy-- -`, - }; -}; +` + } +} export class ExcelFormater { static tmplCellXML = '{data}'; @@ -184,16 +184,16 @@ export class ExcelFormater { dataSource: { columns: any[]; tables: any[]; sheetName: string }[] ) { const html_start = ``; - let { uri, template_ExcelWorksheet, template_ListWorksheet, template_WorkBook } = htmlStr(); - let template_HTMLWorksheet = - ` + let {uri,template_ExcelWorksheet,template_ListWorksheet,template_WorkBook} = htmlStr(); + let template_HTMLWorksheet = + ` ------=_NextPart_dummy Content-Location: sheet{SheetIndex}.htm Content-Type: text/html; charset=windows-1252 ` + - html_start + - ` + html_start + + ` diff --git a/ide/src/doc/compile_trace_streamer.html b/ide/src/doc/compile_trace_streamer.html index a377d38b..677e50de 100644 --- a/ide/src/doc/compile_trace_streamer.html +++ b/ide/src/doc/compile_trace_streamer.html @@ -799,10 +799,8 @@

准备工作

- 在码云上添加ssh公钥。 -
- 本工具工程组织方式是gn。编译需要对应的编译器，编译前请自行配置本地编译器。 -
+ 在码云上添加ssh公钥。
+ 本工具工程组织方式是gn。编译需要对应的编译器，编译前请自行配置本地编译器。
所需编译器和版本如下表所示：

@@ -843,8 +841,7 @@ 
./build.sh

- 本脚本会下载和准备本地依赖的环境，并编译目标。 -
+ 本脚本会下载和准备本地依赖的环境，并编译目标。
在不同的平台上编译后的目标在不同的文件夹，如下所示：

diff --git a/ide/src/doc/des_binder.html b/ide/src/doc/des_binder.html index 749a5d37..0c9e8cba 100644 --- a/ide/src/doc/des_binder.html +++ b/ide/src/doc/des_binder.html @@ -782,12 +782,9 @@

binder事件上下文如何关联

- binder事件相对复杂，这里是从ftrace事件中抽离出来的binder相关消息，用来作为开发者或用户追踪binder事件的参考 -
- a binder event is identified by the sender and receive device, and a reply message only end -
- the last binder msg which reply the calling one. -
+ binder事件相对复杂，这里是从ftrace事件中抽离出来的binder相关消息，用来作为开发者或用户追踪binder事件的参考
+ a binder event is identified by the sender and receive device, and a reply message only end
+ the last binder msg which reply the calling one.
the alloc_buf msg can always flow the binder_transaction, so we no need to identify the alloc msg with transactionID

diff --git a/ide/src/doc/des_stat.html b/ide/src/doc/des_stat.html index e9271123..df51e09f 100644 --- a/ide/src/doc/des_stat.html +++ b/ide/src/doc/des_stat.html @@ -771,8 +771,7 @@

TraceStreamer 解析数据状态表

- TraceStreamer使用stat表统计解析trace数据源过程遇到的重要事件状态。通过stat表可以对trace数据源中各个类型事件的数据的数量，数据质量有一个基本了解。 -
+ TraceStreamer使用stat表统计解析trace数据源过程遇到的重要事件状态。通过stat表可以对trace数据源中各个类型事件的数据的数量，数据质量有一个基本了解。
我们对不同类型的数据，统计了收到多少条，数据逻辑是否匹配，是否有不合法数据，是否有数据丢失情况，所有这些，是基于对数据格式本身和数据前后关系的主观认识。欢迎开发者提供更多的思路来帮我们完善数据本身的校验工作。

stat表支持统计的事件列表如下：

diff --git a/ide/src/doc/des_tables.html b/ide/src/doc/des_tables.html index 3cf6ddbe..2bacf2fe 100644 --- a/ide/src/doc/des_tables.html +++ b/ide/src/doc/des_tables.html @@ -800,23 +800,19 @@
  • - 常规泳道图数据表 -
    + 常规泳道图数据表
    GitHub Logo
  • - native memory数据源相关表 -
    + native memory数据源相关表
    GitHub Logo
  • - perf相关数据表 -
    + perf相关数据表
    GitHub Logo
  • - hisysevent相关数据表 -
    + hisysevent相关数据表
    GitHub Logo
@@ -1624,47 +1620,41 @@

进程表与线程表关系

- 当一个进程或者线程结束后，系统可能再次将该进程号或者线程号分配给其他进程或者线程，造成一个进程号或线程号代表多个进程或线程的情况。 -
- Process和Thread表中的id字段可以唯一标识进程和线程。process表中的id在其他表中用作ipid字段。thread表中的id在其他表中用作itid字段。 -
- thread表通过ipid字段关联process表的id字段，可以查询线程归属进程。 -
+ 当一个进程或者线程结束后，系统可能再次将该进程号或者线程号分配给其他进程或者线程，造成一个进程号或线程号代表多个进程或线程的情况。
+ Process和Thread表中的id字段可以唯一标识进程和线程。process表中的id在其他表中用作ipid字段。thread表中的id在其他表中用作itid字段。
+ thread表通过ipid字段关联process表的id字段，可以查询线程归属进程。
GitHub Logo

查询举例

  • - 已知pid = 123,查看当前进程下的所有线程信息,可以使用如下SQL语句： -
    - - select thread.* from thread, process where process.pid = 123 and thread.ipid = process.id - + 已知pid = 123,查看当前进程下的所有线程信息,可以使用如下SQL语句：
    + select thread.* from thread, process where process.pid = 123 and thread.ipid = process.id

线程表与线程运行状态表关系图

thread_state表记录所有线程的运行状态信息，包含ts(状态起始时间)，dur(状态持续时间)，cpu, itid, - state（线程状态）。 thread表的id字段与thread_state表的itid字段相关联。 -
+ state（线程状态）。 thread表的id字段与thread_state表的itid字段相关联。
GitHub Logo

查询举例

  • - 已知tid = 123, 查看当前线程的所有运行状态信息，可以使用如下SQL语句： -
    - - select thread_state.* from thread, thread_state where thread.tid = 123 and thread.id = thread_state.itid - + 已知tid = 123, 查看当前线程的所有运行状态信息，可以使用如下SQL语句：
    + select thread_state.* from thread, thread_state where thread.tid = 123 and thread.id = + thread_state.itid

堆内存数据变化表关系图

- native_hook表记录堆内存申请(AllocEvent)和释放(FreeEvent)数据。native_hook表通过ipid和itid字段分别与process和thread表的id字段关联，通过callChainId与native_hook_frame表的callChainId字段相关联。 -
+ native_hook表记录堆内存申请(AllocEvent)和释放(FreeEvent)数据。native_hook表通过ipid和itid字段分别与process和thread表的id字段关联，通过callChainId与native_hook_frame表的callChainId字段相关联。
native_hook表字段解释如下：

    @@ -1676,47 +1666,40 @@
  • native_hook_size：堆内存申请/释放的大小。

- native_hook_frame表记录内存申请/释放的调用堆栈。通过callChainId区分一组调用堆栈，depth为堆栈深度，depth为0时，表示当前行为栈顶数据。 -
+ native_hook_frame表记录内存申请/释放的调用堆栈。通过callChainId区分一组调用堆栈，depth为堆栈深度，depth为0时，表示当前行为栈顶数据。
GitHub Logo

- native_hook_statistic表记录内存申请/释放的统计信息。通过callChainId区分一组调用堆栈。每个统计事件将记录当前事件的callChainId，并统计当前调用栈内存分配/释放的总次数和总大小。 -
+ native_hook_statistic表记录内存申请/释放的统计信息。通过callChainId区分一组调用堆栈。每个统计事件将记录当前事件的callChainId，并统计当前调用栈内存分配/释放的总次数和总大小。
GitHub Logo

查询举例

  • - 已知tid = 123，查看当前线程的所有堆内存变化信息，可以使用如下SQL语句： -
    - - select native_hook.* from thread, native_hook where thread.tid = 123 and thread.id = native_hook.itid - + 已知tid = 123，查看当前线程的所有堆内存变化信息，可以使用如下SQL语句：
    + select native_hook.* from thread, native_hook where thread.tid = 123 and thread.id = native_hook.itid
  • - 已知callchainid = 1, 查看当前内存变化调用堆栈 -
    + 已知callchainid = 1, 查看当前内存变化调用堆栈
    select * from native_hook_frame where callchain_id = 1
  • - 已知callchainid = 1, 查看当前内存变化调用堆栈对应的统计信息 -
    + 已知callchainid = 1, 查看当前内存变化调用堆栈对应的统计信息
    select * from native_hook_statistic where callchain_id = 1

日志表与进程线程表关系图

- log表记录日志信息。可以根据seq字段的连续性，来判断是否存在日志丢失的情况。 -
+ log表记录日志信息。可以根据seq字段的连续性，来判断是否存在日志丢失的情况。
GitHub Logo

查询举例

  • - 已知tid = 123，查看当前线程的所有error级别的日志，可以使用如下SQL语句： -
    + 已知tid = 123，查看当前线程的所有error级别的日志，可以使用如下SQL语句：
    select * from log where tid = 123 and level = "error"
@@ -1739,67 +1722,59 @@

  • - 已知同步后的时间戳为28463134340470，查询采样数据 -
    + 已知同步后的时间戳为28463134340470，查询采样数据
    select * from perf_sample where timestamp_trace = 28463134340470

  • - 已知同步后的时间戳为28463134340470，查询采样数据对应的的调用栈信息 -
    - - select A.* from perf_callchain as A, perf_sample as B where B.timestamp_trace = 28463134340470 and - A.sample_id = B.sample_id - + 已知同步后的时间戳为28463134340470，查询采样数据对应的的调用栈信息
    + select A.* from perf_callchain as A, perf_sample as B where B.timestamp_trace = 28463134340470 and + A.sample_id = B.sample_id

  • - 已知同步后的时间戳为28463134277762，查询采样数据的函数名及文件路径 -
    - - select A.*, B.name, C.path from perf_sample as A, perf_callchain as B, perf_files as C where + 已知同步后的时间戳为28463134277762，查询采样数据的函数名及文件路径
    + select A.*, B.name, C.path from perf_sample as A, perf_callchain as B, perf_files as C where A.timestamp_trace = 28463134277762 and B.sample_id = A.sample_id and B.callchain_id = 0 and B.file_id = - C.file_id and C.serial_id = 0 - + C.file_id and C.serial_id = 0

  • - 已知线程号为6700，查询所有的采样记录 -
    + 已知线程号为6700，查询所有的采样记录
    select * from perf_sample where thread_id = 6700

  • - 已知进程号为7863，查询所有的采样记录 -
    - - select A.* from perf_sample as A, perf_thread as B where B.process_id = 7863 and A.thread_id = B.thread_id - + 已知进程号为7863，查询所有的采样记录
    + select A.* from perf_sample as A, perf_thread as B where B.process_id = 7863 and A.thread_id = + B.thread_id

  • - 查询所有采样对应的事件类型 -
    - - select A.*, B.report_value from perf_sample as A, perf_report as B where A.event_type_id = B.id - + 查询所有采样对应的事件类型
    + select A.*, B.report_value from perf_sample as A, perf_report as B where A.event_type_id = B.id

帧渲染表之间的关系图

- frame_slice: 记录RS(RenderService)和应用的帧渲染。 -
- gpu_slice: 记录RS的帧对应的gpu渲染时长。 -
- frame_maps:记录应用到RS的帧的映射关系。 -
+ frame_slice: 记录RS(RenderService)和应用的帧渲染。
+ gpu_slice: 记录RS的帧对应的gpu渲染时长。
+ frame_maps:记录应用到RS的帧的映射关系。
GitHub Logo

查询示例

@@ -1807,22 +1782,19 @@

  • - 已知进程，查询进程对应的实际渲染帧 -
    + 已知进程，查询进程对应的实际渲染帧
    select * from frame_slice where ipid = 1

  • - 已知进程的实际渲染帧的dst为12，求其对应的RS进程的渲染帧 -
    + 已知进程的实际渲染帧的dst为12，求其对应的RS进程的渲染帧
    select * from frame_slice where id = 12

  • - 已知RS的渲染帧在frame_slice中所在行是14，求其对应的GPU渲染时长 -
    + 已知RS的渲染帧在frame_slice中所在行是14，求其对应的GPU渲染时长
    select * from gpu_slice where frame_row = 14

    • @@ -1831,14 +1803,10 @@

    js_heap_files：记录js内存数据的文件名和文件索引

    - js_heap_nodes:记录js内存类对象数据 -
    - js_heap_edges:记录js内存类对象的成员数据 -
    - js_heap_trace_node:记录timeline的调用栈信息 -
    - js_heap_sample:记录timeline的时间轴信息 -
    + js_heap_nodes:记录js内存类对象数据
    + js_heap_edges:记录js内存类对象的成员数据
    + js_heap_trace_node:记录timeline的调用栈信息
    + js_heap_sample:记录timeline的时间轴信息

    TraceStreamer输出数据库表格详细介绍

    @@ -3603,8 +3571,7 @@

    字段详细描述

    - 过滤分类（type），过滤名称（key2），数据ID(key1)。 -
    + 过滤分类（type），过滤名称（key2），数据ID(key1)。
    数据ID在process_measure_filter, sys_event_filter中作为id。

    meta表

    @@ -4960,12 +4927,9 @@
  • clock_id：时钟号
  • ts：时钟快照报的时间
  • - clock_name：时钟号对应的时钟名字 -
    - 时钟快照是用来对齐不同时钟号的时间 -
    - 比如，时钟号1的时间100，和时钟号2的时间200对齐 -
    + clock_name：时钟号对应的时钟名字
    + 时钟快照是用来对齐不同时钟号的时间
    + 比如，时钟号1的时间100，和时钟号2的时间200对齐
    则时钟号为2 的250，转换为时钟号1的时间后，为150
@@ -4995,8 +4959,7 @@
  • data_source_name：数据源的名称，和数据源的插件名保持一致
  • - clock_id：时钟号，对应clock_snapshot中的时钟号 -
    + clock_id：时钟号，对应clock_snapshot中的时钟号
    这个表是用来告诉IDE，不同的事件源的事件，原始时钟号是多少，在数据库中保存的事件，通常是转换为boottime后的时间，但有些情况下，IDE仍然需要知道原始的时钟号是怎样的
diff --git a/ide/src/doc/des_wakup.html b/ide/src/doc/des_wakup.html index 47e01a39..1a586723 100644 --- a/ide/src/doc/des_wakup.html +++ b/ide/src/doc/des_wakup.html @@ -780,10 +780,8 @@

- 各应用程序对于trace事件的waking和wakeup处理是略有区别的。 -
- waking是开始唤醒线程，wakeup是线程正式被唤醒，进入runnable（可运行状态） -
+ 各应用程序对于trace事件的waking和wakeup处理是略有区别的。
+ waking是开始唤醒线程，wakeup是线程正式被唤醒，进入runnable（可运行状态）
我们的策略是：被唤醒才是真正进入runnable状态，在没有wakeup事件的情况下，以waking为准。

diff --git a/ide/src/doc/md/quickstart_Application_operation_skills.md b/ide/src/doc/md/quickstart_Application_operation_skills.md index d984f28d..6e564184 100644 --- a/ide/src/doc/md/quickstart_Application_operation_skills.md +++ b/ide/src/doc/md/quickstart_Application_operation_skills.md @@ -59,11 +59,6 @@ 导入 trace 文件后，页面右上角的出现漏斗图标，点击会出现 Display Template 页面，Template Select 区域显示已经添加到显示模板中的泳道图，每类泳道图后面会有一个多选框，默认不勾选，如果勾选页面上就只保留勾选的泳道图。 ![GitHub Logo](../../figures/OperationSkills/Tabskilltemple.jpg) -点击![GitHub Logo](../../figures/OperationSkills/Tabskilltempleshow.jpg)图标会以子系统-->部件-->泳道层级去显示： -![GitHub Logo](../../figures/OperationSkills/Tabskillsubsystem.jpg) -点击![GitHub Logo](../../figures/OperationSkills/subsystemupload.jpg)导入模板的 json 配置，点击![GitHub Logo](../../figures/OperationSkills/subsystemdownload.jpg)下载模板的 json 配置，模板的配置文件格式如下： -![GitHub Logo](../../figures/OperationSkills/subsystemsconfig.jpg) - ### 所有进程的用户输入事件归一显示，观察操作事件和对象 对于用户 InputEvent 会绘制到固定的泳道图。 diff --git a/ide/src/doc/md/quickstart_ability_monitor.html b/ide/src/doc/md/quickstart_ability_monitor.html index 016e5eb9..cde6491b 100644 --- a/ide/src/doc/md/quickstart_ability_monitor.html +++ b/ide/src/doc/md/quickstart_ability_monitor.html @@ -749,35 +749,26 @@

Ability Monitor 的抓取

Ability Monitor 抓取界面配置说明

- 点击 Probes config，如选择抓取 AbilityMonitor。 -
+ 点击 Probes config，如选择抓取 AbilityMonitor。
GitHub Logo

Ability Monitor 文件的抓取

点击 Record setting，在 output file path 输入文件名 hiprofiler_data_abilitymonitor.htrace，拖动滚动条设置 buffer - size 大小是 64M，抓取时长是 50s。 -
- GitHub Logo -
- 点击 Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。 -
- GitHub Logo -
- 输入 hdc_shell，进入设备，执行命令。 -
- GitHub Logo -
- 进入指定目录，cd /data/local/tmp 进入到目录，会看到生成的 trace 文件。 -
+ size 大小是 64M，抓取时长是 50s。
+ GitHub Logo
+ 点击 Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。
+ GitHub Logo
+ 输入 hdc_shell，进入设备，执行命令。
+ GitHub Logo
+ 进入指定目录，cd /data/local/tmp 进入到目录，会看到生成的 trace 文件。
GitHub Logo

Ability Monitor 功能介绍

将抓取的文件导入到 smartperf 工具查看，能了解 CPU，内存，磁盘 IO 和网络的使用情况。

Ability Monitor 泳道图展示

- Ability Monitor 展开就可以看到泳道图，包括 CPU，内存，磁盘 IO，网络的使用情况。 -
+ Ability Monitor 展开就可以看到泳道图，包括 CPU，内存，磁盘 IO，网络的使用情况。
GitHub Logo

    @@ -869,10 +860,8 @@ Network Packets Out/Sec： 每秒发送的网络数据包数。

    Ability Monitor 泳道图的框选功能

    可以对 CPU，内存，磁盘 IO 和网络的数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有六个 tab - 页。 -
    - Live Processes 的 Tab 页如图： -
    + 页。
    + Live Processes 的 Tab 页如图：
    GitHub Logo

      @@ -935,8 +924,7 @@ Disk Writes(B)：磁盘读入的字节数。 Disk Reads(B)：磁盘写入的字节数。 - Processes History 的 Tab 页如图： -
      + Processes History 的 Tab 页如图：
      GitHub Logo
    • @@ -986,8 +974,7 @@ User ID：用户ID。 CPU Time：CPU运行时间。 - 框选 CPU Total Load，CPU User Load，CPU System Load 三个区域的泳道图，会展示 System CPU Summary 的 Tab 页。 -
      + 框选 CPU Total Load，CPU User Load，CPU System Load 三个区域的泳道图，会展示 System CPU Summary 的 Tab 页。
      GitHub Logo
    • @@ -1025,8 +1012,7 @@ SystemLoad%：CPU在内核空间运行的使用率。 Process：进程号。 - 框选 MemoryTotal，Cached，SwapTota 三个区域的泳道图，会展示 System Memory Summary 的 Tab 页。 -
      + 框选 MemoryTotal，Cached，SwapTota 三个区域的泳道图，会展示 System Memory Summary 的 Tab 页。
      GitHub Logo
    • @@ -1155,8 +1141,7 @@ CmaFree：空闲的可用内存。 框选 Disk Bytes Read/Sec，Disk Bytes Written/Sec，Disk Read Ops/Sec，Disk Written Ops/Sec - 四个区域的泳道图，会展示 System Disk Summary 的 Tab 页。 -
      + 四个区域的泳道图，会展示 System Disk Summary 的 Tab 页。
      GitHub Logo
    • @@ -1219,8 +1204,7 @@ Write Out/sec：每秒写入的字节数。 框选 Network Bytes In/Sec，Network Bytes Out/Sec，Network Packets In/Sec，Network Packets Out/Sec - 四个区域的泳道图，会展示 System Network Summary 的 Tab 页。 -
      + 四个区域的泳道图，会展示 System Network Summary 的 Tab 页。
      GitHub Logo
    • diff --git a/ide/src/doc/md/quickstart_device_record.md b/ide/src/doc/md/quickstart_device_record.md index 1ddd0f14..9a1f750a 100644 --- a/ide/src/doc/md/quickstart_device_record.md +++ b/ide/src/doc/md/quickstart_device_record.md @@ -13,7 +13,7 @@ - Native Memory: NativeMemory 数据的抓取参数配置。 - Hiperf: Hiperf 数据的抓取参数配置。 - eBPF Config: ebpf 数据的抓取参数配置。 -- VM Tracker: Smaps 数据的抓取参数配置。 +- VM Tracker: Smaps数据的抓取参数配置。 - HiSystemEvent: HiSystemEvent 数据抓取参数配置。 - SDK Config: SDK 数据抓取参数配置。 diff --git a/ide/src/doc/md/quickstart_native_memory.md b/ide/src/doc/md/quickstart_native_memory.md index 6727ef5f..ac216a72 100644 --- a/ide/src/doc/md/quickstart_native_memory.md +++ b/ide/src/doc/md/quickstart_native_memory.md @@ -141,7 +141,7 @@ Call Info 的 Tab 页，主要显示了调用树详细类型。 ### 搜索框支持表达式输入 -调用栈默认会显示火焰图，新增搜索框表达式输入。表达式作用范围为 nativehook 的统计与非统计模式。其中处理的为 Responsible Library 与 Responsible Caller，其中 Responsible Library 和 Responsible Caller 表示从下往上非 libc++ musl 的第一条调用栈的 lib 跟 symbol，如下图所示，由于最后一条 [ operator new(unsigned long) ] libc++.so 为 libc++.so 的函数，故跳过，所以该条调用栈的 Responsible Library 为 libhilog.so，Responsible Caller 为 OHOS::HiviewDFX::GetDomainLevel(unsigned int) 。 +调用栈默认会显示火焰图，新增搜索框表达式输入。表达式作用范围为 nativehook 的统计与非统计模式。其中处理的为 Responsible Library 与 Responsible Caller，其中 Responsible Library 和Responsible Caller 表示从下往上非 libc++ musl 的第一条调用栈的 lib 跟 symbol，如下图所示，由于最后一条 [ operator new(unsigned long) ] libc++.so 为 libc++.so 的函数，故跳过，所以该条调用栈的 Responsible Library 为 libhilog.so，Responsible Caller 为 OHOS::HiviewDFX::GetDomainLevel(unsigned int) 。 ![GitHub Logo](../../figures/NativeMemory/framecaller.jpg) 表达式说明: 在 InputFilter 输入框可以进行搜索过滤和表达式过滤，其中表达式必须以@开头，英文括号包起所需要过滤的内容，每个括号必须包括 （Responsible Library，Responsible Caller）匹配全量以\*表示，否则认为该输入为搜索过滤。 diff --git a/ide/src/doc/md/quickstart_parsing_ability.md b/ide/src/doc/md/quickstart_parsing_ability.md index 9a9b440c..e39a320a 100644 --- a/ide/src/doc/md/quickstart_parsing_ability.md +++ b/ide/src/doc/md/quickstart_parsing_ability.md @@ -29,6 +29,7 @@ Trace 解析能力增强主要是提高 Trace 的解析能力。 ##### 配置完成后, 查看【用户配置路径】是否是配置的路径 edge浏览器: edge://version/ + chrome浏览器: chrome://version/ #### 超大 trace 抓取配置说明 diff --git a/ide/src/doc/md/quickstart_systemtrace.md b/ide/src/doc/md/quickstart_systemtrace.md index ec574a05..b4f52d8d 100644 --- a/ide/src/doc/md/quickstart_systemtrace.md +++ b/ide/src/doc/md/quickstart_systemtrace.md @@ -97,25 +97,18 @@ Thread States、Thread Switches 的 2 个 Tab 页，点击移动到某一行， 点击画红框处的带箭头的标志，会从 CPU 的线程概览视图跳转到线程的详情视图，同时从线程的详情视图也能跳转到 CPU 的线程概览视图。 ![GitHub Logo](../../figures/Web/jumpthread.jpg) -#### 获取频点的 busy_time - -框选 Cpu Frequency 泳道的 Tab 页有 GetBusyTime 的按钮，该按钮获取每个频点在 Cpu State 等于 0 时的时间信息，体现频点的忙碌时间。 +#### 获取频点的busy_time +框选Cpu Frequency泳道的Tab页有GetBusyTime的按钮，该按钮获取每个频点在Cpu State等于0时的时间信息，体现频点的忙碌时间。 ![GitHub Logo](../../figures/Web/getbusytime.jpg) - -#### CPU 频点数据切割 - -框选区域内所有 running 状态的频点数据，以用户输入的某一方法作为切割依据，将频点数据以 Single 和 Loop 两种方式切割后展示在 Tab 标签页的表格中。 +#### CPU频点数据切割 +框选区域内所有running状态的频点数据，以用户输入的某一方法作为切割依据，将频点数据以Single和Loop两种方式切割后展示在Tab标签页的表格中。 ![GitHub Logo](../../figures/Web/Singe_loop.jpg) - #### 关键路径标识 - -在 ftrace 数据中的 cpu 泳道的区域，在界面顶部增加 json 文件导入按钮，导入 json 文件后，根据线程号跟对应的时间，在 cpu 区域高亮该时间的线程色块，点击界面上的 x,可以取消高亮。json 格式如下： +在ftrace数据中的cpu泳道的区域，在界面顶部增加json文件导入按钮，导入json文件后，根据线程号跟对应的时间，在cpu区域高亮该时间的线程色块，点击界面上的x,可以取消高亮。json格式如下： ![GitHub Logo](../../figures/Web/json.jpg) -导入 json 文件以后，会将 ACCS0 [2716]线程对应时间点的 slice 色块高亮显示 +导入json文件以后，会将ACCS0 [2716]线程对应时间点的slice色块高亮显示 ![GitHub Logo](../../figures/Web/keyslice.jpg) - -### trace 的其他功能 - +### trace的其他功能 #### 小旗标志的功能 将选中数据的时间点通过小旗的方式在时间轴上展示，直观的展示选中数据的时间。 diff --git a/ide/src/doc/quickstart_Application_operation_skills.html b/ide/src/doc/quickstart_Application_operation_skills.html index b287169a..2ecbbf6f 100644 --- a/ide/src/doc/quickstart_Application_operation_skills.html +++ b/ide/src/doc/quickstart_Application_operation_skills.html @@ -794,172 +794,128 @@

      可导入符号表

      - 符号表导入适用于所有支持调用栈的 Tab 页，选择一个文件夹，获取文件下及其子文件夹的所有 so - 文件，更新数据库中符号数据。文件夹内 so 的格式需要与在设备上的路径一致，例如下图中，选择的文件夹为 - import，选择导入的 libnative_hook.z.so，在设备上的路径是/system/lib64/，那么在本地选择的文件夹内也需要保证路径是 - import/system/lib64/libnative_hook.z.so。 -
      - GitHub Logo -
      - 以 NativeMemory 举例，导入 NativeMemory 文件，点击 Call info 的 Tab 页，在搜索框中输入 - libnative_hook.z.so，会发现该 so 下的调用栈没有符号化完全。 -
      - GitHub Logo -
      - 将本地编译的 so 通过导入按钮导入，本地导入路径是 import/system/lib64/libnative_hook.z.so，红框处是导入按钮。 -
      - GitHub Logo -
      - 导入 so 以后，在搜索框中输入 libnative_hook.z.so，会发现符号化数据已经更新。 -
      + 符号表导入适用于所有支持调用栈的Tab页，选择一个文件夹，获取文件下及其子文件夹的所有so文件，更新数据库中符号数据。文件夹内so的格式需要与在设备上的路径一致，并且导入的so需要是有符号的，例如下图中，选择的文件夹为import，选择导入的libnative_hook.z.so，在设备上的路径是/system/lib64/，那么在本地选择的文件夹内也需要保证路径是import/system/lib64/libnative_hook.z.so。
      + GitHub Logo
      + 以NativeMemory举例，导入NativeMemory文件，点击Call + info的Tab页，在搜索框中输入libnative_hook.z.so，会发现该so下的调用栈没有符号化完全。
      + GitHub Logo
      + 将本地编译的so通过导入按钮导入，本地导入路径是import/system/lib64/libnative_hook.z.so，红框处是导入按钮。
      + GitHub Logo
      + 导入so以后，在搜索框中输入libnative_hook.z.so，会发现符号化数据已经更新。
      GitHub Logo

      -

      网页连接文件打开接口

      +

      网页链接文件打开接口

      - 网页连接文件打开接口可以在网址后增加文件地址，打开后直接打开 trace。 -
      - 接口的 url 路径如下： -
      + 网页链接文件打开接口可以在网址后增加文件地址，打开后直接打开trace。
      + 接口的url路径如下：
      GitHub Logo 

      •  蓝色框：是Smartperf工具的url(https://localhost:9000/application/)。
-
        + 
      •  绿色框：trace文件的url，其中
-                        第一部分是?trace=(固定格式)。
-                        第二部分是trace文件的url(https://iot.itocm.com:9001/upload/ftrace_small.txt),此处根据文件的url实际地址填写。
-                        第三部分,&link=true(固定格式)。
-
        + 第一部分是?trace=(固定格式)。 + 第二部分是trace文件的url(https://iot.itocm.com:9001/upload/ftrace_small.txt),此处根据文件的url实际地址填写。 + 第三部分,&link=true(固定格式)。 +

      内容支持宽度可伸缩

      - 在表格每行的表头添加一个灰色竖线，拖动时单元格宽度随之改变。 -
      + 在表格每行的表头添加一个灰色竖线，拖动时单元格宽度随之改变。
      GitHub Logo

      一键展开和收起，逐级展开和收起

      - 将树形表格全部改为默认收起，在表头左上角添加双尖箭头图标,默认箭头朝外，点击图标，表格的每一层都展开，图标上的箭头改为朝里面，再次点击表格每一层都收起，图标上的箭头改为朝外面。 -
      + 将树形表格全部改为默认收起，在表头左上角添加双尖箭头图标,默认箭头朝外，点击图标，表格的每一层都展开，图标上的箭头改为朝里面，再次点击表格每一层都收起，图标上的箭头改为朝外面。
      GitHub Logo

      - 支持 shift+m 多次框选，框选列表显示和操作（跳转，取消）,快捷键跳转 ctrl+[/]和一键取消 + 支持shift+m多次框选，框选列表显示和操作（跳转，取消）,快捷键跳转ctrl+[/]和一键取消

      - 每次框选泳道图后，按下 shift+m 键，在当前框选的开始和结束位置出现卡尺，如果只按下 m 键，会将上一次按 m - 键出现的卡尺清除，在当前框选位置画卡尺，页面上每个卡尺都放进 tab 页中，在 tab - 页中可以给卡尺改变颜色和移除旗子。用快捷键改变当前选中的卡尺。按下快捷键“ctrl+[”或“ctrl+]”的时候，会跳转到当前选中卡尺的上\下一个卡尺上，也就是上\下一个卡尺两侧变为实心，对应表格中的那行背景颜色变浅蓝色。 + 每次框选泳道图后，按下shift+m键，在当前框选的开始和结束位置出现卡尺，如果只按下m键，会将上一次按m键出现的卡尺清除，在当前框选位置画卡尺，页面上每个卡尺都放进tab页中，在tab页中可以给卡尺改变颜色和移除旗子。用快捷键改变当前选中的卡尺。按下快捷键“ctrl+[”或“ctrl+]”的时候，会跳转到当前选中卡尺的上\下一个卡尺上，也就是上\下一个卡尺两侧变为实心，对应表格中的那行背景颜色变浅蓝色。

      - 旗子标记可快速跳转，框选列表显示和操作（跳转，取消）,快捷跳转 ctrl+,/.和一键取消 + 旗子标记可快速跳转，框选列表显示和操作（跳转，取消）,快捷跳转ctrl+,/.和一键取消

      - 在时间刻度下方点击会出现旗子和 tab 页，每次点击都将旗子都放进 tab 页中，在 tab - 页中可以给旗子改变颜色和移除旗子。用快捷键改变当前选中的旗子。按下快捷键“ctrl+，”或“ctrl+.”的时候，会跳转到当前选中旗子的上\下一个旗子上，也就是上\下一个旗子变为实心有旗杆，对应表格中的那行背景颜色变浅蓝色。 -
      + 在时间刻度下方点击会出现旗子和tab页，每次点击都将旗子都放进tab页中，在tab页中可以给旗子改变颜色和移除旗子。用快捷键改变当前选中的旗子。按下快捷键“ctrl+，”或“ctrl+.”的时候，会跳转到当前选中旗子的上\下一个旗子上，也就是上\下一个旗子变为实心有旗杆，对应表格中的那行背景颜色变浅蓝色。
      GitHub Logo

      泳道图支持一键收起和展开（收起前的状态）

      - 点击时间刻度的最左边的双箭头，可以对已展开的泳道图进行一键收起和展开。 -
      + 点击时间刻度的最左边的双箭头，可以对已展开的泳道图进行一键收起和展开。
      GitHub Logo

      -

      单个泳道图显示为多行时可折叠为 1 行（收藏和非收藏）

      +

      单个泳道图显示为多行时可折叠为1行（收藏和非收藏）

      - 单个泳道图点击会将泳道图折叠为一行，折腾后的字体是蓝色。 -
      + 单个泳道图点击会将泳道图折叠为一行，折叠后的字体是蓝色。
      GitHub Logo

      已支持的泳道图按照模板分类显示，NaitveMemory，Hisysevent，应用内存等

      - 导入 trace 文件后，页面右上角的出现漏斗图标，点击会出现 Display Template 页面，Template Select - 区域显示已经添加到显示模板中的泳道图，每类泳道图后面会有一个多选框，默认不勾选，如果勾选页面上就只保留勾选的泳道图。 -
      + 导入trace文件后，页面右上角的出现漏斗图标，点击会出现Display Template页面，Template + Select区域显示已经添加到显示模板中的泳道图，每类泳道图后面会有一个多选框，默认不勾选，如果勾选页面上就只保留勾选的泳道图。
      GitHub Logo

      -

      - 点击 - GitHub Logo - 图标会以子系统-->部件-->泳道层级去显示： -
      - GitHub Logo -
      - 点击 - GitHub Logo - 导入模板的json配置，点击 - GitHub Logo - 下载模板的json配置，模板的配置文件格式如下： -
      - GitHub Logo -

      所有进程的用户输入事件归一显示，观察操作事件和对象

      - 对于用户 InputEvent 会绘制到固定的泳道图。 -
      + 对于用户InputEvent会绘制到固定的泳道图。
      GitHub Logo

      支持收藏的泳道图整体画布可伸缩

      - 收藏以后的泳道图可以在红线位置处上下伸缩拖动。 -
      + 收藏以后的泳道图可以在红线位置处上下伸缩拖动。
      GitHub Logo

      -

      用户自定义分组化收藏（2 组），及一键取消所有收藏

      +

      用户自定义分组化收藏（2组），及一键取消所有收藏

      - 选择界面上的 G1 和 G2，可以根据自己的需求将泳道图收藏到对应 G1 或者 G2 中，点击 G1 和 G2 - 旁边的星号可以一键取消所有收藏。 -
      + 选择界面上的G1和G2，可以根据自己的需求将泳道图收藏到对应G1或者G2中，点击G1和G2旁边的星号可以一键取消所有收藏。
      GitHub Logo

      -

      trace 顶部的 cpu 负载预览颜色随着负载降低，亮度降低的能力对比度提升

      +

      trace顶部的cpu负载预览颜色随着负载降低，亮度降低的能力对比度提升

      - CPU 负载颜色的亮度，负载越大颜色更深，负载越小颜色越浅。 -
      + CPU负载颜色的亮度，负载越大颜色更深，负载越小颜色越浅。
      GitHub Logo

      - 导航栏/泳道图背景颜色支持颜色可选，字体颜色可感知 slice 的颜色而进行变化，颜色动态可配 + 导航栏/泳道图背景颜色支持颜色可选，字体颜色可感知slice的颜色而进行变化，颜色动态可配

      - 给用户提供两种模式，浅色模式（导航栏白底黑字，泳道图颜色偏淡）和深色模式（导航栏黑底白字，泳道图颜色偏深），点击最左下方的小桶标志用户可以按需选择，并且用户可以自定义 - systemTrace 页面的颜色，给用户更多自由，自己动手设置自己喜欢的颜色，提升用户体验。 -
      + 给用户提供两种模式，浅色模式（导航栏白底黑字，泳道图颜色偏淡）和深色模式（导航栏黑底白字，泳道图颜色偏深），点击最左下方的小桶标志用户可以按需选择，并且用户可以自定义systemTrace页面的颜色，给用户更多自由，自己动手设置自己喜欢的颜色，提升用户体验。
      GitHub Logo

      -

      Trace 抓取动态可停

      +

      Trace抓取动态可停

      - 在抓取 trace 过程中，点击 StopRecord - 按钮会对抓取命令进行启停,等待抓取停止命令返回后,将生成的文件拉取下来进行文件的解析。 -
      + 在抓取trace过程中，点击StopRecord按钮会对抓取命令进行启停,等待抓取停止命令返回后,将生成的文件拉取下来进行文件的解析。
      GitHub Logo

      -

      Smartperf web 端集成 hdc 命令能力

      +

      Smartperf web端集成hdc命令能力

      - 在现有的配置界面上，新增一个 Web 版本的 shell 界面，可以支持 shell 命令。 -
      + 在现有的配置界面上，新增一个Web版本的shell界面，可以支持shell命令。
      GitHub Logo

      diff --git a/ide/src/doc/quickstart_Frametimeline.html b/ide/src/doc/quickstart_Frametimeline.html index 8bfedf6e..f52ac9b4 100644 --- a/ide/src/doc/quickstart_Frametimeline.html +++ b/ide/src/doc/quickstart_Frametimeline.html @@ -799,20 +799,16 @@

      Frame timeline抓取界面配置说明

      - 打开Frame timeline开关抓取Frametimeline数据。 -
      + 打开Frame timeline开关抓取Frametimeline数据。
      GitHub Logo

      Frame timeline文件的抓取

      点击Record setting，在output file path输入文件名hiprofiler_dataframe.htrace，拖动滚动条设置buffer - size大小是64M，抓取时长是50s。 -
      - GitHub Logo -
      - 点击Trace command，就会根据上面的配置生成抓取命令，点击Record抓取，抓取过程中会显示抓取时长。 -
      + size大小是64M，抓取时长是50s。
      + GitHub Logo
      + 点击Trace command，就会根据上面的配置生成抓取命令，点击Record抓取，抓取过程中会显示抓取时长。
      GitHub Logo

      Frame timeline功能介绍

      @@ -821,8 +817,7 @@

      Frame timeline泳道图展示

      - Frame timeline展开就可以看到泳道图，泳道图上可以显示帧编号。 -
      + Frame timeline展开就可以看到泳道图，泳道图上可以显示帧编号。
      GitHub Logo

        @@ -842,10 +837,8 @@ Actual Timeline：真实帧泳道图。

        Frame timeline泳道图的框选功能

        - 可以对真实帧数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格。 -
        - Frames的Tab页如图： -
        + 可以对真实帧数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格。
        + Frames的Tab页如图：
        GitHub Logo

          @@ -883,10 +876,8 @@ Occurrences：事件数。

          Frame timeline泳道图的点选功能

          - 通过点选理想帧和真实帧展示Tab页(Current Selection)。 -
          - 理想帧Tab页如下图： -
          + 通过点选理想帧和真实帧展示Tab页(Current Selection)。
          + 理想帧Tab页如下图：
          GitHub Logo

            @@ -922,8 +913,7 @@ Process：进程名。

          - 真实帧Tab页如下图： -
          + 真实帧Tab页如下图：
          GitHub Logo

            diff --git a/ide/src/doc/quickstart_Import_so.html b/ide/src/doc/quickstart_Import_so.html index 0553b1a0..fa16d879 100644 --- a/ide/src/doc/quickstart_Import_so.html +++ b/ide/src/doc/quickstart_Import_so.html @@ -798,10 +798,8 @@

            Native - Memory分为三级统计，分别按照内存分配的类型(Alloc/Mmap)，lib库，函数进行统计分析。其中lib跟函数为每一条调用栈，从栈顶往下查找，非musl库与c++库的第一条函数及其lib为每次分配归属的函数及lib库。 -
            - 点击Analysis的Tab页，先以内存分配的类型去统计。 -
            + Memory分为三级统计，分别按照内存分配的类型(Alloc/Mmap)，lib库，函数进行统计分析。其中lib跟函数为每一条调用栈，从栈顶往下查找，非musl库与c++库的第一条函数及其lib为每次分配归属的函数及lib库。
            + 点击Analysis的Tab页，先以内存分配的类型去统计。
            GitHub Logo

              @@ -855,8 +853,7 @@ Transient：框选区域内释放的大小。

            - 以lib库去统计，如图显示的是AllocEvent的so占比的饼图和Table表。 -
            + 以lib库去统计，如图显示的是AllocEvent的so占比的饼图和Table表。
            GitHub Logo

              @@ -910,8 +907,7 @@ Transient：框选区域内释放的大小。

            - 以函数去统计，如图显示的是AllocEvent/libmali-bifrost-g52-g2p0-ohos.so的函数占比的饼图和Table表。 -
            + 以函数去统计，如图显示的是AllocEvent/libmali-bifrost-g52-g2p0-ohos.so的函数占比的饼图和Table表。
            GitHub Logo

              @@ -967,10 +963,8 @@ Transient：框选区域内释放的大小。

              Hiperf文件的不同库函数占比

              - Hiperf分为四级统计，分别按照进程，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈的栈顶函数及其lib。 -
              - 点击Analysis的Tab页，先以进程去统计。 -
              + Hiperf分为四级统计，分别按照进程，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈的栈顶函数及其lib。
              + 点击Analysis的Tab页，先以进程去统计。
              GitHub Logo

                @@ -994,8 +988,7 @@ Weight：该进程下的调用方法的执行次数。

              - 以线程统计，如图显示的是hiperf进程下的线程的饼图和Table表。 -
              + 以线程统计，如图显示的是hiperf进程下的线程的饼图和Table表。
              GitHub Logo

                @@ -1019,8 +1012,7 @@ Weight：该线程下的调用方法的执行次数。

              - 以lib库统计，如图显示的是hiperf线程下的各so占比饼图和Table表。 -
              + 以lib库统计，如图显示的是hiperf线程下的各so占比饼图和Table表。
              GitHub Logo

                @@ -1044,8 +1036,7 @@ Weight：该so的调用方法的执行次数。

              - 以函数统计，如图显示的是ld-musl-aarch64.so.1下的各函数占比饼图和Table表。 -
              + 以函数统计，如图显示的是ld-musl-aarch64.so.1下的各函数占比饼图和Table表。
              GitHub Logo

                @@ -1071,10 +1062,8 @@ Weight：该so的调用方法的执行次数。

                FileSystem文件的不同库函数占比

                - FileSystem分为五级统计，分别按照进程，系统调用类型，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈，从栈顶往下查找，非musl库与c++库的第一条函数及其lib为每次分配归属的函数及lib库。 -
                - 点击Analysis的Tab页，先以进程去统计。 -
                + FileSystem分为五级统计，分别按照进程，系统调用类型，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈，从栈顶往下查找，非musl库与c++库的第一条函数及其lib为每次分配归属的函数及lib库。
                + 点击Analysis的Tab页，先以进程去统计。
                GitHub Logo

                  @@ -1098,8 +1087,7 @@ Duration：总时长。

                - 以系统调用类型统计，如图显示的是grep进程下的Read和Write系统调用的时长占比饼图和Table表。 -
                + 以系统调用类型统计，如图显示的是grep进程下的Read和Write系统调用的时长占比饼图和Table表。
                GitHub Logo

                  @@ -1123,8 +1111,7 @@ Duration：系统调用的总时长。

                - 以线程统计，如图显示的是系统调用是Read类型的线程的占比饼图和Table表。 -
                + 以线程统计，如图显示的是系统调用是Read类型的线程的占比饼图和Table表。
                GitHub Logo

                  @@ -1148,8 +1135,7 @@ Duration：该线程的系统调用的总时长。

                - 以lib库统计，如图显示toybox的lib库的占比饼图和Table表。 -
                + 以lib库统计，如图显示toybox的lib库的占比饼图和Table表。
                GitHub Logo

                  @@ -1173,8 +1159,7 @@ Duration：该so的系统调用的总时长。

                - 以函数统计，如图显示0x558111afbc (toybox)的函数占比饼图和Table表。 -
                + 以函数统计，如图显示0x558111afbc (toybox)的函数占比饼图和Table表。
                GitHub Logo

                  @@ -1200,10 +1185,8 @@ Duration：该函数的系统调用的总时长。

                  Bio文件的不同库函数占比

                  - Bio分为五级统计，分别按照进程，系统调用类型，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈，从栈顶往下查找，非submit_bio第一条函数及其lib为每次分配归属的函数及lib库。 -
                  - 点击Analysis的Tab页，先以进程去统计。 -
                  + Bio分为五级统计，分别按照进程，系统调用类型，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈，从栈顶往下查找，非submit_bio第一条函数及其lib为每次分配归属的函数及lib库。
                  + 点击Analysis的Tab页，先以进程去统计。
                  GitHub Logo

                    @@ -1227,8 +1210,7 @@ Duration：总时长。

                  - 以系统调用类型统计，如图显示的是jbd2/mmcblk0p11进程下的DATA_WRITE系统调用的时长占比饼图和Table表。 -
                  + 以系统调用类型统计，如图显示的是jbd2/mmcblk0p11进程下的DATA_WRITE系统调用的时长占比饼图和Table表。
                  GitHub Logo

                    @@ -1252,8 +1234,7 @@ Duration：系统调用的总时长。

                  - 以线程统计，如图显示的是系统调用是DATA_WRITE类型的线程的占比饼图和Table表。 -
                  + 以线程统计，如图显示的是系统调用是DATA_WRITE类型的线程的占比饼图和Table表。
                  GitHub Logo

                    @@ -1277,8 +1258,7 @@ Duration：该线程的系统调用的总时长。

                  - 以lib库统计，如图显示kallsyms的lib库的占比饼图和Table表。 -
                  + 以lib库统计，如图显示kallsyms的lib库的占比饼图和Table表。
                  GitHub Logo

                    @@ -1302,8 +1282,7 @@ Duration：该so的系统调用的总时长。

                  - 以函数统计，如图显示submit_bh的函数占比饼图和Table表。 -
                  + 以函数统计，如图显示submit_bh的函数占比饼图和Table表。
                  GitHub Logo

                    @@ -1330,10 +1309,8 @@ Duration：该函数的系统调用的总时长。

                    Page - Fault分为五级统计，分别按照进程，系统调用类型，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈，从栈顶往下查找，非musl库与c++库的第一条函数及其lib为每次分配归属的函数及lib库。 -
                    - 点击Analysis的Tab页，先以进程去统计。 -
                    + Fault分为五级统计，分别按照进程，系统调用类型，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈，从栈顶往下查找，非musl库与c++库的第一条函数及其lib为每次分配归属的函数及lib库。
                    + 点击Analysis的Tab页，先以进程去统计。
                    GitHub Logo

                      @@ -1357,8 +1334,7 @@ Duration：总时长。

                    - 以系统调用类型统计，如图显示的是1.ui进程下的File Backed In和Copy On Writer系统调用的时长占比饼图和Table表。 -
                    + 以系统调用类型统计，如图显示的是1.ui进程下的File Backed In和Copy On Writer系统调用的时长占比饼图和Table表。
                    GitHub Logo

                      @@ -1382,8 +1358,7 @@ Duration：系统调用的总时长。

                    - 以线程统计，如图显示的是系统调用是File Backed In类型的线程的占比饼图和Table表。 -
                    + 以线程统计，如图显示的是系统调用是File Backed In类型的线程的占比饼图和Table表。
                    GitHub Logo

                      @@ -1407,8 +1382,7 @@ Duration：该线程的系统调用的总时长。

                    - 以lib库统计，如图显示各lib库的占比饼图和Table表。 -
                    + 以lib库统计，如图显示各lib库的占比饼图和Table表。
                    GitHub Logo

                      @@ -1432,8 +1406,7 @@ Duration：该so的系统调用的总时长。

                    - 以函数统计，如图显示各函数占比饼图和Table表。 -
                    + 以函数统计，如图显示各函数占比饼图和Table表。
                    GitHub Logo

                      diff --git a/ide/src/doc/quickstart_Js_memory.html b/ide/src/doc/quickstart_Js_memory.html index 5a382fce..b2ef07c0 100644 --- a/ide/src/doc/quickstart_Js_memory.html +++ b/ide/src/doc/quickstart_Js_memory.html @@ -797,8 +797,7 @@

                      Js Memory抓取配置参数

                      - GitHub Logo -
                      + GitHub Logo
                      配置参数说明：

                        @@ -813,13 +812,11 @@

                      再点击Record setting，在output file path输入文件名hiprofiler_data_jsmemory.htrace，拖动滚动条设置buffer - size大小是64M，抓取时长是30s。 -
                      + size大小是64M，抓取时长是30s。
                      GitHub Logo

                      - 点击Trace command，就会根据上面的配置生成抓取命令，点击Record抓取，抓取过程中会显示抓取时长。 -
                      + 点击Trace command，就会根据上面的配置生成抓取命令，点击Record抓取，抓取过程中会显示抓取时长。
                      GitHub Logo

                      Js Memory展示说明

                      @@ -828,8 +825,7 @@

                      Js Memory泳道图展示类型

                      - 堆快照类型文件的泳道图展示。 -
                      + 堆快照类型文件的泳道图展示。
                      GitHub Logo

                        @@ -841,8 +837,7 @@ Heapsnapshot：堆快照性能分析会显示网页的JavaScript对象和相关D

                      - 时间轴上分配插桩类型文件的泳道图展示。 -
                      + 时间轴上分配插桩类型文件的泳道图展示。
                      GitHub Logo

                        @@ -856,10 +851,8 @@ Heaptimeline：分配时间轴显示了插桩的JavaScript内存分配随时间

                        Js Memory泳道图的框选功能

                        - 可以对内存的数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有两个tab页。 -
                        - Summary的Tab页，主要显示了总览视图，通过类的名称来分组显示对象。 -
                        + 可以对内存的数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有两个tab页。
                        + Summary的Tab页，主要显示了总览视图，通过类的名称来分组显示对象。
                        GitHub Logo

                          @@ -882,8 +875,7 @@ Distance：使用节点的最短简单路径显示到根的距离。 Root为根节点，distance为0,G为上次GC之后新申请内存的实例，distance为100000000。在界面上显示为-，A、B、C、D、E、F、H为调用节点；以E为例，从A->D->F>E,distance为4，从A->D->E，distance为3;从B->E,distance为2,遵循最小distance原则，E的distance为2,同理D的distance为2,F的distance为2,H的distance也为2。

                          - 其中第一层类的distance为该类所有实例中最小的distance,如果有实例的distance为-，类的distance也为-(-表示没有被root节点引用的实例，如下图的G) -
                          + 其中第一层类的distance为该类所有实例中最小的distance,如果有实例的distance为-，类的distance也为-(-表示没有被root节点引用的实例，如下图的G)
                          GitHub Logo

                          @@ -942,8 +934,7 @@ RetainedSize：Retained Size含义为表示当一个实例被GC回收时, 可以

                        - Comparison的Tab页，主要显示了比较视图，显示两份快照间的不同之处，主要比较类创建与释放的实例数量。 -
                        + Comparison的Tab页，主要显示了比较视图，显示两份快照间的不同之处，主要比较类创建与释放的实例数量。
                        GitHub Logo

                          @@ -996,8 +987,7 @@ Size Delta：Delta的Size。

                          Js Memory的辅助信息功能

                          - 在Summary和Comparison的Tab页，选中左边实例，右边Retainers的Tab页会显示多少个实例引用了左边选中的实例。 -
                          + 在Summary和Comparison的Tab页，选中左边实例，右边Retainers的Tab页会显示多少个实例引用了左边选中的实例。
                          GitHub Logo

                            @@ -1029,8 +1019,7 @@ RetainedSize：对象以及其相关的对象一起被删除后所释放的内

                            Js Memory详细显示的过滤功能

                            - 在下方的Class Filter中输入类名，可以对类名进行过滤，如下图输入array，会过滤出类名是array的相关数据。 -
                            + 在下方的Class Filter中输入类名，可以对类名进行过滤，如下图输入array，会过滤出类名是array的相关数据。
                            GitHub Logo

                            diff --git a/ide/src/doc/quickstart_ability_monitor.html b/ide/src/doc/quickstart_ability_monitor.html index 7c902bfb..b74904ec 100644 --- a/ide/src/doc/quickstart_ability_monitor.html +++ b/ide/src/doc/quickstart_ability_monitor.html @@ -798,28 +798,20 @@

                            Ability Monitor抓取界面配置说明

                            - 点击Probes config，如选择抓取AbilityMonitor。 -
                            + 点击Probes config，如选择抓取AbilityMonitor。
                            GitHub Logo

                            Ability Monitor文件的抓取

                            点击Record setting，在output file path输入文件名hiprofiler_data_abilitymonitor.htrace，拖动滚动条设置buffer - size大小是64M，抓取时长是50s。 -
                            - GitHub Logo -
                            - 点击Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。 -
                            - GitHub Logo -
                            - 输入hdc_shell，进入设备，执行命令。 -
                            - GitHub Logo -
                            - 进入指定目录，cd /data/local/tmp进入到目录，会看到生成的trace文件。 -
                            + size大小是64M，抓取时长是50s。
                            + GitHub Logo
                            + 点击Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。
                            + GitHub Logo
                            + 输入hdc_shell，进入设备，执行命令。
                            + GitHub Logo
                            + 进入指定目录，cd /data/local/tmp进入到目录，会看到生成的trace文件。
                            GitHub Logo

                            Ability Monitor功能介绍

                            @@ -828,8 +820,7 @@

                            Ability Monitor泳道图展示

                            - Ability Monitor展开就可以看到泳道图，包括CPU，内存，磁盘IO，网络的使用情况。 -
                            + Ability Monitor展开就可以看到泳道图，包括CPU，内存，磁盘IO，网络的使用情况。
                            GitHub Logo

                              @@ -921,10 +912,8 @@ Network Packets Out/Sec： 每秒发送的网络数据包数。

                              Ability Monitor泳道图的框选功能

                              - 可以对CPU，内存，磁盘IO和网络的数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有六个tab页。 -
                              - Live Processes的Tab页如图： -
                              + 可以对CPU，内存，磁盘IO和网络的数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有六个tab页。
                              + Live Processes的Tab页如图：
                              GitHub Logo

                                @@ -990,8 +979,7 @@ Disk Reads(B)：磁盘写入的字节数。

                              - Processes History的Tab页如图： -
                              + Processes History的Tab页如图：
                              GitHub Logo

                                @@ -1045,8 +1033,7 @@ CPU Time：CPU运行时间。

                              - 框选CPU Total Load，CPU User Load，CPU System Load三个区域的泳道图，会展示System CPU Summary的Tab页。 -
                              + 框选CPU Total Load，CPU User Load，CPU System Load三个区域的泳道图，会展示System CPU Summary的Tab页。
                              GitHub Logo

                                @@ -1088,8 +1075,7 @@ Process：进程号。

                              - 框选MemoryTotal，Cached，SwapTota三个区域的泳道图，会展示System Memory Summary的Tab页。 -
                              + 框选MemoryTotal，Cached，SwapTota三个区域的泳道图，会展示System Memory Summary的Tab页。
                              GitHub Logo

                                @@ -1222,8 +1208,7 @@ CmaFree：空闲的可用内存。

                              框选Disk Bytes Read/Sec，Disk Bytes Written/Sec，Disk Read Ops/Sec，Disk Written - Ops/Sec四个区域的泳道图，会展示System Disk Summary的Tab页。 -
                              + Ops/Sec四个区域的泳道图，会展示System Disk Summary的Tab页。
                              GitHub Logo

                                @@ -1290,8 +1275,7 @@ Write Out/sec：每秒写入的字节数。

                              框选Network Bytes In/Sec，Network Bytes Out/Sec，Network Packets In/Sec，Network Packets - Out/Sec四个区域的泳道图，会展示System Network Summary的Tab页。 -
                              + Out/Sec四个区域的泳道图，会展示System Network Summary的Tab页。
                              GitHub Logo

                                diff --git a/ide/src/doc/quickstart_app_startup.html b/ide/src/doc/quickstart_app_startup.html index 36ebbe24..6f03b5c9 100644 --- a/ide/src/doc/quickstart_app_startup.html +++ b/ide/src/doc/quickstart_app_startup.html @@ -797,8 +797,7 @@

                                App startup抓取参数的配置

                                - GitHub Logo -
                                + GitHub Logo
                                配置项说明：

                                  @@ -815,10 +814,8 @@ App startup：配置项的总开关。解析时请打开对应的Flags标记(Dis

                                  App startup泳道图展示

                                  - App startup的泳道图展示： -
                                  - GitHub Logo -
                                  + App startup的泳道图展示：
                                  + GitHub Logo
                                  应用启动包括六个阶段，分别是Process Creating(应用进程创建阶段)、Application Launching(加载应用阶段)、UI Ability Launching(加载UI Ability)、UI Ability OnForeground(应用进入前台)、First Frame - APP Phase(首帧渲染提交-应用)、First Frame - Render Phase(首帧渲染提交-Render @@ -827,10 +824,8 @@ App startup：配置项的总开关。解析时请打开对应的Flags标记(Dis

                                  App startup泳道图点选功能

                                  - 可以对启动各个阶段的Slice进行点选，点选后在最下方的弹出层中会展示点选数据的统计的tab页。 -
                                  - 以Process Creating的Slice点选为例： -
                                  + 可以对启动各个阶段的Slice进行点选，点选后在最下方的弹出层中会展示点选数据的统计的tab页。
                                  + 以Process Creating的Slice点选为例：
                                  GitHub Logo

                                    @@ -868,12 +863,9 @@ Duration：应用启动的持续时间。

                                    App startup泳道图Tab页跳转功能

                                    - 点击各阶段的起始或者结束时间后面的跳转图标，跳转至关联Slice，并显示该Slice的详细信息。 -
                                    - 以Process Creating的跳转为例： -
                                    - GitHub Logo -
                                    + 点击各阶段的起始或者结束时间后面的跳转图标，跳转至关联Slice，并显示该Slice的详细信息。
                                    + 以Process Creating的跳转为例：
                                    + GitHub Logo
                                    跳转说明：

                                      @@ -893,8 +885,7 @@ EndTime(Relative)的跳转： 跳转到H:virtual void OHOS::AppExecFwk::AppMgrSe

                                      App startup泳道图的框选功能

                                      - 应用启动阶段泳道图框选功能主要是框选启动分析泳道图之后，统计应用各个启动阶段的耗费时长信息。 -
                                      + 应用启动阶段泳道图框选功能主要是框选启动分析泳道图之后，统计应用各个启动阶段的耗费时长信息。
                                      GitHub Logo

                                        @@ -920,15 +911,13 @@ Duration：应用各阶段启动时长。

                                        So初始化泳道图展示

                                        - So初始化的泳道图展示： -
                                        + So初始化的泳道图展示：
                                        GitHub Logo

                                        So初始化泳道图的点选功能

                                        - 点选So初始化的Slice，展示该so初始化信息的tab页。 -
                                        + 点选So初始化的Slice，展示该so初始化信息的tab页。
                                        GitHub Logo

                                          @@ -960,10 +949,8 @@ Duration：So初始化耗时。

                                          So初始化泳道图Tab页跳转功能

                                          - 点击So初始化开始时间后面的跳转图标，跳转至关联Slice，并显示该Slice的详细信息。 -
                                          - GitHub Logo -
                                          + 点击So初始化开始时间后面的跳转图标，跳转至关联Slice，并显示该Slice的详细信息。
                                          + GitHub Logo
                                          跳转说明：

                                            @@ -977,8 +964,7 @@ StartTime(Relative)的跳转： 跳转到dlopen: system/lib64/extensionability/

                                            So初始化泳道图的框选功能

                                            - So初始化泳道图框选功能主要是框选So初始化泳道图之后，统计各个进程下各个So的初始化耗费时长信息。 -
                                            + So初始化泳道图框选功能主要是框选So初始化泳道图之后，统计各个进程下各个So的初始化耗费时长信息。
                                            GitHub Logo

                                              diff --git a/ide/src/doc/quickstart_bio.html b/ide/src/doc/quickstart_bio.html index fe222c99..6ed54a19 100644 --- a/ide/src/doc/quickstart_bio.html +++ b/ide/src/doc/quickstart_bio.html @@ -799,8 +799,7 @@

                                              Bio抓取配置参数

                                              - GitHub Logo -
                                              + GitHub Logo
                                              配置项说明：

                                                @@ -825,19 +824,15 @@ Max Unwind Level：配置抓取调用栈的最大深度。

                                              再点击Record setting，在output file path输入文件名hiprofiler_data_bio.htrace，拖动滚动条设置buffer - size大小是64M，抓取时长是50s。 -
                                              - GitHub Logo -
                                              - 点击Trace command，就会根据上面的配置生成抓取命令，点击Record抓取，抓取过程中会显示抓取时长。 -
                                              + size大小是64M，抓取时长是50s。
                                              + GitHub Logo
                                              + 点击Trace command，就会根据上面的配置生成抓取命令，点击Record抓取，抓取过程中会显示抓取时长。
                                              GitHub Logo

                                              Bio展示说明

                                              - 抓取结束后Bio的trace会自动加载展示。 -
                                              + 抓取结束后Bio的trace会自动加载展示。
                                              GitHub Logo

                                              界面布局介绍：页内存整体界面布局分为3个部分：

                                              @@ -864,17 +859,14 @@ Max Unwind Level：配置抓取调用栈的最大深度。

                                              Bio泳道图展示

                                              - Bio泳道图鼠标悬浮以10ms为区间展示该周期内最大的读或者写延迟。 -
                                              + Bio泳道图鼠标悬浮以10ms为区间展示该周期内最大的读或者写延迟。
                                              GitHub Logo

                                              Bio泳道图的框选功能

                                              - 可以对泳道图进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有三个tab页。 -
                                              - Disk I/O Tier Statistics的Tab页如图： -
                                              + 可以对泳道图进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有三个tab页。
                                              + Disk I/O Tier Statistics的Tab页如图：
                                              GitHub Logo

                                                @@ -916,8 +908,7 @@ Max Total Latency：最大延迟时间。

                                              - Disk I/O Latency CallTree的Tab页如图： -
                                              + Disk I/O Latency CallTree的Tab页如图：
                                              GitHub Logo

                                                @@ -941,8 +932,7 @@ Weight：调用方法的执行占比。

                                              - Trace Completion Times的Tab页如图： -
                                              + Trace Completion Times的Tab页如图：
                                              GitHub Logo

                                                @@ -1016,8 +1006,7 @@ BackTrace：调用栈顶部函数，并显示调用栈深度。

                                                Bio支持多种Options展示风格

                                                - 点击Disk I/O Latency CallTree的Tab页底部的Options，会有两个CheckBox复选框。 -
                                                + 点击Disk I/O Latency CallTree的Tab页底部的Options，会有两个CheckBox复选框。
                                                GitHub Logo

                                                  @@ -1038,8 +1027,7 @@ Hide System so：隐藏系统库文件 。

                                                  点击Disk I/O Latency CallTree的Tab页底部的Sample Count - Filter，可以填上区间值。过滤出符合该区间值调用次数的调用栈信息。 -
                                                  + Filter，可以填上区间值。过滤出符合该区间值调用次数的调用栈信息。
                                                  GitHub Logo

                                                  Bio功能的调用栈Group展示-数据分析支持剪裁功能

                                                  @@ -1062,38 +1050,29 @@ Hide System so：隐藏系统库文件 。

                                                  Bio功能的调用栈Group展示支持按条件过滤

                                                  - 在Input Filter输入关键字，会显示出带有该关键字的展示信息。 -
                                                  + 在Input Filter输入关键字，会显示出带有该关键字的展示信息。
                                                  GitHub Logo

                                                  Bio辅助信息区展示调用栈

                                                  - 当在详细信息区选择一个符号时，将展示与该符号相关的完整的调用栈。如下图的Heaviest Stack Trace： -
                                                  + 当在详细信息区选择一个符号时，将展示与该符号相关的完整的调用栈。如下图的Heaviest Stack Trace：
                                                  GitHub Logo

                                                  Bio的Tier的过滤

                                                  - 通过选择根据Tier去过滤。 -
                                                  + 通过选择根据Tier去过滤。
                                                  GitHub Logo

                                                  Bio的火焰图功能

                                                  - 点击Disk I/O Latency CallTree左下角的柱状图的图标，会切换到火焰图页面。 -
                                                  - GitHub Logo -
                                                  - 进入到火焰图页面，火焰图的展示跟 Disk I/O Latency CallTree - 的tab页的调用栈显示一致，鼠标放到色块上，悬浮框可以显示调用栈名称和Duration时长。 -
                                                  - GitHub Logo -
                                                  - 鼠标点击火焰图，会进入下一级界面，点击上级则返回上一级界面。 -
                                                  + 点击Disk I/O Latency CallTree左下角的柱状图的图标，会切换到火焰图页面。
                                                  + GitHub Logo
                                                  + 进入到火焰图页面，火焰图的展示跟 Disk I/O Latency CallTree 的tab页的调用栈显示一致，鼠标放到色块上，悬浮框可以显示调用栈名称和Duration时长。
                                                  + GitHub Logo
                                                  + 鼠标点击火焰图，会进入下一级界面，点击上级则返回上一级界面。
                                                  GitHub Logo

                                                  diff --git a/ide/src/doc/quickstart_device_record.html b/ide/src/doc/quickstart_device_record.html index dc000ca4..5e2b90e0 100644 --- a/ide/src/doc/quickstart_device_record.html +++ b/ide/src/doc/quickstart_device_record.html @@ -797,8 +797,7 @@

                                                  界面配置说明

                                                  - GitHub Logo -
                                                  + GitHub Logo
                                                  说明：

                                                    @@ -815,19 +814,13 @@

                                                    命令行的生成和trace文件的抓取

                                                    - 点击Probes config，如选择抓取Scheduling details。 -
                                                    - GitHub Logo -
                                                    + 点击Probes config，如选择抓取Scheduling details。
                                                    + GitHub Logo
                                                    再点击Record setting，在output file path输入文件名hiprofiler_data_example.htrace，拖动滚动条设置buffer - size大小是64M，抓取时长是50s。 -
                                                    - GitHub Logo -
                                                    - 点击Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。 -
                                                    - GitHub Logo -
                                                    + size大小是64M，抓取时长是50s。
                                                    + GitHub Logo
                                                    + 点击Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。
                                                    + GitHub Logo
                                                    命令参数说明：

                                                      @@ -842,17 +835,13 @@
                                                    • hitrace_time:hitrace命令行抓取时间，与hiprofiler_cmd下发的-t配置联动。

                                                    - 输入hdc_std shell，进入设备，执行命令。 -
                                                    + 输入hdc_std shell，进入设备，执行命令。
                                                    GitHub Logo

                                                    - 执行完成后，命令行会给出提示。 -
                                                    - GitHub Logo -
                                                    - 进入指定目录，cd /data/local/tmp 进入到目录，会看到生成的trace文件。 -
                                                    + 执行完成后，命令行会给出提示。
                                                    + GitHub Logo
                                                    + 进入指定目录，cd /data/local/tmp 进入到目录，会看到生成的trace文件。
                                                    GitHub Logo

                                                    diff --git a/ide/src/doc/quickstart_filesystem.html b/ide/src/doc/quickstart_filesystem.html index d85c7fc6..e85cb2dd 100644 --- a/ide/src/doc/quickstart_filesystem.html +++ b/ide/src/doc/quickstart_filesystem.html @@ -799,8 +799,7 @@

                                                    FileSystem抓取配置参数

                                                    - GitHub Logo -
                                                    + GitHub Logo
                                                    配置项说明：

                                                      @@ -825,27 +824,19 @@ Max Unwind Level：配置抓取调用栈的最大深度。

                                                    再点击Record setting，在output file path输入文件名hiprofiler_data_filesystem.htrace，拖动滚动条设置buffer - size大小是64M，抓取时长是50s。 -
                                                    - GitHub Logo -
                                                    - 点击Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。 -
                                                    - GitHub Logo -
                                                    - 输入hdc_std shell，进入设备，执行命令。 -
                                                    - GitHub Logo -
                                                    - 执行完成后，进入指定目录查看，在/data/local/tmp下就会生成trace文件。 -
                                                    + size大小是64M，抓取时长是50s。
                                                    + GitHub Logo
                                                    + 点击Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。
                                                    + GitHub Logo
                                                    + 输入hdc_std shell，进入设备，执行命令。
                                                    + GitHub Logo
                                                    + 执行完成后，进入指定目录查看，在/data/local/tmp下就会生成trace文件。
                                                    GitHub Logo

                                                    FileSystem展示说明

                                                    - 将抓取的trace文件导入smartperf界面查看。 -
                                                    + 将抓取的trace文件导入smartperf界面查看。
                                                    GitHub Logo

                                                    界面布局介绍：FileSystem整体界面布局分为3个部分：

                                                    @@ -872,21 +863,16 @@ Max Unwind Level：配置抓取调用栈的最大深度。

                                                    FileSystem泳道图展示

                                                    - FileSystem泳道图按照读操作和写操作展示，鼠标移动都泳道图上，悬浮框会以10ms为周期展示读，写类型系统调用的次数。 -
                                                    - GitHub Logo -
                                                    - 按住w键放大界面，悬浮框会显示当前时刻的文件读写次数。 -
                                                    + FileSystem泳道图按照读操作和写操作展示，鼠标移动都泳道图上，悬浮框会以10ms为周期展示读，写类型系统调用的次数。
                                                    + GitHub Logo
                                                    + 按住w键放大界面，悬浮框会显示当前时刻的文件读写次数。
                                                    GitHub Logo

                                                    FileSystem泳道图的框选功能

                                                    - 可以对读写操作泳道图进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有五个tab页。 -
                                                    - FileSystem statistics的Tab页如图： -
                                                    + 可以对读写操作泳道图进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有五个tab页。
                                                    + FileSystem statistics的Tab页如图：
                                                    GitHub Logo

                                                      @@ -946,8 +932,7 @@ Max Duration：最大时长。

                                                    - FileSystem Calltree的Tab页如图： -
                                                    + FileSystem Calltree的Tab页如图：
                                                    GitHub Logo

                                                      @@ -971,8 +956,7 @@ Weight：调用方法的执行占比。

                                                    - FileSystem Events的Tab页如图： -
                                                    + FileSystem Events的Tab页如图：
                                                    GitHub Logo

                                                      @@ -1062,8 +1046,7 @@ Backtrace：调用栈顶部函数，并显示调用栈深度。

                                                    - File Descriptor History的Tab页如图： -
                                                    + File Descriptor History的Tab页如图：
                                                    GitHub Logo

                                                      @@ -1105,8 +1088,7 @@ Backtrace：调用栈顶部函数，并显示调用栈深度。

                                                    - File Descriptor Time Slice的Tab页如图： -
                                                    + File Descriptor Time Slice的Tab页如图：
                                                    GitHub Logo

                                                      @@ -1144,8 +1126,7 @@ Backtrace：调用栈顶部函数，并显示调用栈深度。

                                                      FileSystem支持多种Options展示风格

                                                      - 点击FileSystem Calltree的Tab页底部的Options，会有两个CheckBox复选框。 -
                                                      + 点击FileSystem Calltree的Tab页底部的Options，会有两个CheckBox复选框。
                                                      GitHub Logo

                                                        @@ -1166,8 +1147,7 @@ Hide System so：隐藏系统库文件。

                                                        点击FileSystem Calltree的Tab页底部的Sample Count - Filter，可以填上区间值。过滤出符合该区间值调用次数的调用栈信息。 -
                                                        + Filter，可以填上区间值。过滤出符合该区间值调用次数的调用栈信息。
                                                        GitHub Logo

                                                        FileSystem功能的调用栈Group展示-数据分析支持剪裁功能

                                                        @@ -1190,38 +1170,29 @@ Hide System so：隐藏系统库文件。

                                                        FileSystem功能的调用栈Group展示支持按条件过滤

                                                        - 在Input Filter输入关键字，会显示出带有该关键字的展示信息。 -
                                                        + 在Input Filter输入关键字，会显示出带有该关键字的展示信息。
                                                        GitHub Logo

                                                        FileSystem辅助信息区展示调用栈

                                                        - 当在详细信息区选择一个符号时，将展示与该符号相关的完整的调用栈。如下图的Heaviest Stack Trace： -
                                                        + 当在详细信息区选择一个符号时，将展示与该符号相关的完整的调用栈。如下图的Heaviest Stack Trace：
                                                        GitHub Logo

                                                        FileSystem的事件类型的过滤

                                                        - 通过选择可以过滤是Open类型，还是Close类型事件。 -
                                                        + 通过选择可以过滤是Open类型，还是Close类型事件。
                                                        GitHub Logo

                                                        FileSystem的火焰图功能

                                                        - 点击FileSystem Calltre左下角的柱状图的图标，会切换到火焰图页面。 -
                                                        - GitHub Logo -
                                                        - 进入到火焰图页面，火焰图的展示跟 Filesystem Calltree - 的tab页的调用栈显示一致，鼠标放到色块上，悬浮框可以显示调用栈名称和Duration时长。 -
                                                        - GitHub Logo -
                                                        - 鼠标点击火焰图，会进入下一级界面，点击上级则返回上一级界面。 -
                                                        + 点击FileSystem Calltre左下角的柱状图的图标，会切换到火焰图页面。
                                                        + GitHub Logo
                                                        + 进入到火焰图页面，火焰图的展示跟 Filesystem Calltree 的tab页的调用栈显示一致，鼠标放到色块上，悬浮框可以显示调用栈名称和Duration时长。
                                                        + GitHub Logo
                                                        + 鼠标点击火焰图，会进入下一级界面，点击上级则返回上一级界面。
                                                        GitHub Logo

                                                        diff --git a/ide/src/doc/quickstart_hilog.html b/ide/src/doc/quickstart_hilog.html index a4d66d89..3eee1b29 100644 --- a/ide/src/doc/quickstart_hilog.html +++ b/ide/src/doc/quickstart_hilog.html @@ -799,22 +799,19 @@

                                                        Hilog的抓取配置参数

                                                        - 打开Hilog开关抓取Hilog数据。 -
                                                        + 打开Hilog开关抓取Hilog数据。
                                                        GitHub Logo

                                                        Hilog展示说明

                                                        - 将抓取的hilog文件导入到smartperf中，查看日志信息。 -
                                                        + 将抓取的hilog文件导入到smartperf中，查看日志信息。
                                                        GitHub Logo

                                                        Hilog泳道图的框选功能

                                                        - 框选Hilog的泳道图，展示Hilog的tab页,Log Level可以选择日志级别，也能根据Tag，Process name，Message去搜索。 -
                                                        + 框选Hilog的泳道图，展示Hilog的tab页,Log Level可以选择日志级别，也能根据Tag，Process name，Message去搜索。
                                                        GitHub Logo

                                                          @@ -856,8 +853,7 @@ Message：日志具体信息。

                                                        - 框选Hilog的泳道图，展示Summary的tab页。 -
                                                        + 框选Hilog的泳道图，展示Summary的tab页。
                                                        GitHub Logo

                                                          diff --git a/ide/src/doc/quickstart_hiperf.html b/ide/src/doc/quickstart_hiperf.html index 92114d79..0dcaf7d9 100644 --- a/ide/src/doc/quickstart_hiperf.html +++ b/ide/src/doc/quickstart_hiperf.html @@ -799,8 +799,7 @@

                                                          HiPerf抓取配置参数

                                                          - GitHub Logo -
                                                          + GitHub Logo
                                                          配置项说明：

                                                            @@ -837,27 +836,19 @@ Advance Options：更多的抓取配置项。

                                                          再点击Record setting，在output file path输入文件名hiprofiler_data_perf.htrace，拖动滚动条设置buffer - size大小是64M，抓取时长是50s。 -
                                                          - GitHub Logo -
                                                          - 点击Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。 -
                                                          - GitHub Logo -
                                                          - 输入hdc_shell，进入设备，执行命令。 -
                                                          - GitHub Logo -
                                                          - 执行完成后，进入指定目录查看，在/data/local/tmp下就会生成trace文件。 -
                                                          + size大小是64M，抓取时长是50s。
                                                          + GitHub Logo
                                                          + 点击Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。
                                                          + GitHub Logo
                                                          + 输入hdc_shell，进入设备，执行命令。
                                                          + GitHub Logo
                                                          + 执行完成后，进入指定目录查看，在/data/local/tmp下就会生成trace文件。
                                                          GitHub Logo

                                                          HiPerf展示说明

                                                          - 将抓取的trace文件导入smartperf界面查看。 -
                                                          + 将抓取的trace文件导入smartperf界面查看。
                                                          GitHub Logo

                                                          界面布局介绍：Perf整体界面布局分为3个部分：

                                                          @@ -884,25 +875,18 @@ Advance Options：更多的抓取配置项。

                                                          HiPerf泳道图展示

                                                          - Perf泳道图展示按照CPU使用量和线程和进程展示，鼠标移动到泳道图上，悬浮框会显示CPU的使用量。 -
                                                          - GitHub Logo -
                                                          - 按住w键放大界面，泳道图会出现P的标志，鼠标移动到P图标上，悬浮框会显示每个callstack和调用的深度如下图。 -
                                                          - GitHub Logo -
                                                          - Perf泳道图上浅色表示无效调用栈的采样点，抓取时由于设备上的对应的so无符号信息，函数跟地址都无法获取到，固该采样点在tab页中不做显示。 -
                                                          + Perf泳道图展示按照CPU使用量和线程和进程展示，鼠标移动到泳道图上，悬浮框会显示CPU的使用量。
                                                          + GitHub Logo
                                                          + 按住w键放大界面，泳道图会出现P的标志，鼠标移动到P图标上，悬浮框会显示每个callstack和调用的深度如下图。
                                                          + GitHub Logo
                                                          + Perf泳道图上浅色表示无效调用栈的采样点，抓取时由于设备上的对应的so无符号信息，函数跟地址都无法获取到，固该采样点在tab页中不做显示。
                                                          GitHub Logo

                                                          HiPerf泳道图的框选功能

                                                          - 可以对CPU使用量区，线程和进程区数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有四个tab页。 -
                                                          - Perf Profile的Tab页如图： -
                                                          + 可以对CPU使用量区，线程和进程区数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有四个tab页。
                                                          + Perf Profile的Tab页如图：
                                                          GitHub Logo

                                                            @@ -932,8 +916,7 @@ Event Count：事件数量。

                                                          - Sample List的Tab页如图： -
                                                          + Sample List的Tab页如图：
                                                          GitHub Logo

                                                            @@ -977,8 +960,7 @@ Backtrace：栈顶的调用栈名称。

                                                            HiPerf支持多种Options展示风格

                                                            - 点击Perf Profile的Tab页底部的Options，会有四个CheckBox复选框。 -
                                                            + 点击Perf Profile的Tab页底部的Options，会有四个CheckBox复选框。
                                                            GitHub Logo

                                                              @@ -1010,8 +992,7 @@ Hide Thread State：隐藏线程状态。

                                                              HiPerf支持过滤调用栈调用次数的展示风格

                                                              - 点击Perf Profile的Tab页底部的Sample Count Filter，可以填上区间值。过滤出符合该区间值调用次数的调用栈信息。 -
                                                              + 点击Perf Profile的Tab页底部的Sample Count Filter，可以填上区间值。过滤出符合该区间值调用次数的调用栈信息。
                                                              GitHub Logo

                                                              HiPerf功能的调用栈Group展示-数据分析支持剪裁功能

                                                              @@ -1034,39 +1015,32 @@ Hide Thread State：隐藏线程状态。

                                                              HiPerf功能的调用栈Group展示支持按条件过滤

                                                              - 在Input Filter输入关键字，会显示出带有该关键字的展示信息。 -
                                                              + 在Input Filter输入关键字，会显示出带有该关键字的展示信息。
                                                              GitHub Logo

                                                              HiPerf辅助信息区展示调用栈

                                                              当在详细信息区选择一个符号时，将展示与该符号相关的完整的调用栈。对上展示到根节点，对下则展示CPU占用率最大的调用栈。调用栈右侧有Sliding - bar可以滚动。 -
                                                              - 如下图的Heaviest Stack Trace： -
                                                              + bar可以滚动。
                                                              + 如下图的Heaviest Stack Trace：
                                                              GitHub Logo

                                                              HiPerf的火焰图功能

                                                              - 点击Perf Profile左下角的柱状图的图标，会切换到火焰图页面。 -
                                                              - GitHub Logo -
                                                              - 进入到火焰图页面，火焰图的展示跟 Perf Profile - 的tab页的调用栈显示一致，鼠标放到色块上，悬浮框可以显示调用栈名称，lib，addr，Count，%in current thread，%in - current process，&in all process。 -
                                                              + 点击Perf Profile左下角的柱状图的图标，会切换到火焰图页面。
                                                              + GitHub Logo
                                                              + 进入到火焰图页面，火焰图的展示跟 Perf Profile 的tab页的调用栈显示一致，鼠标放到色块上，悬浮框可以显示调用栈名称，lib，addr，Count，%in + current thread，%in current process，&in all process。
                                                              GitHub Logo

                                                              HiPerf的show event count功能

                                                              在Hiperf的父级泳道图上增加筛选功能，可在Cpu Usage 和各种event - type之间选择，切换选择之后即可将Hiperf下级各个泳道图数据更新，悬浮框可以根据选择的事件名显示对应的event count。 -
                                                              + type之间选择，切换选择之后即可将Hiperf下级各个泳道图数据更新，悬浮框可以根据选择的事件名显示对应的event + count。
                                                              GitHub Logo

                                                              @@ -1075,8 +1049,7 @@ Hide Thread State：隐藏线程状态。

                                                              根据Hiperf父级泳道图所筛选的类型，来显示各个CPU或者线程的时序火焰图，用户可根据自己的需要，点击泳道图旁边的齿轮标志筛选出某个cpu - 或者线程的火焰时序图数据。 -
                                                              + 或者线程的火焰时序图数据。
                                                              GitHub Logo

                                                              @@ -1084,16 +1057,11 @@ Hide Thread State：隐藏线程状态。

                                                              - HiPerf分为process、thread、library、function四层，调用栈均可在每层的表格上鼠标点击右键跳转到对应的火焰图Tab页。火焰图上方标题显示是由哪一层跳转而来，点击关闭图标火焰图重置为当前框选范围的所有数据。 -
                                                              - GitHub Logo -
                                                              - 如上图，右键点击hiprofiler_plugins可以跳转到下图 -
                                                              - GitHub Logo -
                                                              - 筛选面板新增Hide Thread、Hide Thread State筛选选项，Hiperf可隐藏线程和状态。 -
                                                              + HiPerf分为process、thread、library、function四层，调用栈均可在每层的表格上鼠标点击右键跳转到对应的火焰图Tab页。火焰图上方标题显示是由哪一层跳转而来，点击关闭图标火焰图重置为当前框选范围的所有数据。
                                                              + GitHub Logo
                                                              + 如上图，右键点击hiprofiler_plugins可以跳转到下图
                                                              + GitHub Logo
                                                              + 筛选面板新增Hide Thread、Hide Thread State筛选选项，Hiperf可隐藏线程和状态。
                                                              GitHub Logo

                                                              diff --git a/ide/src/doc/quickstart_hisystemevent.html b/ide/src/doc/quickstart_hisystemevent.html index f8209b52..e723184e 100644 --- a/ide/src/doc/quickstart_hisystemevent.html +++ b/ide/src/doc/quickstart_hisystemevent.html @@ -801,25 +801,16 @@

                                                              HiSystemEvent抓取配置参数

                                                              - 打开Start Hisystem Event Tracker Record开关抓取HiSystemEvent数据。 -
                                                              - GitHub Logo -
                                                              + 打开Start Hisystem Event Tracker Record开关抓取HiSystemEvent数据。
                                                              + GitHub Logo
                                                              再点击Record setting，在output file path输入文件名hiprofiler_data_hisystemevent.htrace，拖动滚动条设置buffer - size大小是64M，抓取时长是50s。 -
                                                              - GitHub Logo -
                                                              - 点击Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。 -
                                                              - GitHub Logo -
                                                              - 输入hdc_std shell，进入设备，执行上述生成的命令。 -
                                                              - GitHub Logo -
                                                              - 执行完成后，进入指定目录查看，在/data/local/tmp下就会生成trace文件。 -
                                                              + size大小是64M，抓取时长是50s。
                                                              + GitHub Logo
                                                              + 点击Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。
                                                              + GitHub Logo
                                                              + 输入hdc_std shell，进入设备，执行上述生成的命令。
                                                              + GitHub Logo
                                                              + 执行完成后，进入指定目录查看，在/data/local/tmp下就会生成trace文件。
                                                              GitHub Logo

                                                              HiSystemEvent展示说明

                                                              @@ -827,10 +818,8 @@

                                                              HiSystemEvent的Energy泳道图展示

                                                              - 将抓取的trace文件导入smartperf界面查看。 -
                                                              - GitHub Logo -
                                                              + 将抓取的trace文件导入smartperf界面查看。
                                                              + GitHub Logo
                                                              泳道图说明：

                                                                @@ -898,15 +887,13 @@ Location Switch State泳道：鼠标悬浮可以显示GPS开关状态(enable：

                                                                HiSystemEvent的Energy泳道图的框选功能

                                                                - 可以对Energy各泳道图进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格。 -
                                                                - System Details的Tab页如图： -
                                                                + 可以对Energy各泳道图进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格。
                                                                + System Details的Tab页如图：
                                                                GitHub Logo

                                                                • - Event Name： 事件名称，事件包括后台任务，应用锁，GPS定位。 + Event Name： 事件名称，事件包括后台任务，应用锁，GPS定位。 
                                                                • @@ -916,8 +903,7 @@ Time： 时间戳信息。

                                                                - 点击事件名会显示该事件的详细信息的Tab页。 -
                                                                + 点击事件名会显示该事件的详细信息的Tab页。
                                                                GitHub Logo

                                                                  @@ -977,8 +963,7 @@ TAG：锁名。

                                                                - Power Battery的Tab页如图： -
                                                                + Power Battery的Tab页如图：
                                                                GitHub Logo

                                                                  @@ -1026,8 +1011,7 @@ APP Name：应用包名。

                                                                - Power Details的Tab页如图： -
                                                                + Power Details的Tab页如图：
                                                                GitHub Logo

                                                                  @@ -1183,8 +1167,7 @@ Energy Percent(%)：功耗占比。

                                                                  框选Hisysevent的泳道图，展示Hisysevents的tab页,有Filter by Domain，Filter by eventname，Filter by - contents输入框。All下拉框可以选择level级别 -
                                                                  + contents输入框。All下拉框可以选择level级别
                                                                  GitHub Logo

                                                                    @@ -1262,8 +1245,7 @@ contents：抓取内容。

                                                                  - 框选Hisysevent的泳道图，展示Statistics的tab页。 -
                                                                  + 框选Hisysevent的泳道图，展示Statistics的tab页。
                                                                  GitHub Logo

                                                                    diff --git a/ide/src/doc/quickstart_native_memory.html b/ide/src/doc/quickstart_native_memory.html index 16eb6705..5f6d8223 100644 --- a/ide/src/doc/quickstart_native_memory.html +++ b/ide/src/doc/quickstart_native_memory.html @@ -796,8 +796,7 @@

                                                                    Native Memory抓取配置参数

                                                                    - GitHub Logo -
                                                                    + GitHub Logo
                                                                    配置参数说明：

                                                                      @@ -813,13 +812,11 @@

                                                                    再点击Record setting，在output file path输入文件名hiprofiler_data_nativememory.htrace，拖动滚动条设置buffer - size大小是64M，抓取时长是50s。 -
                                                                    + size大小是64M，抓取时长是50s。
                                                                    GitHub Logo

                                                                    - 点击Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。 -
                                                                    + 点击Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。
                                                                    GitHub Logo

                                                                    命令行参数说明：

                                                                    @@ -838,12 +835,9 @@
                                                                  • startup_mode: 是否需要抓取应用启动阶段内存。

                                                                  - 输入hdc_std shell，进入设备，执行命令。 -
                                                                  - GitHub Logo -
                                                                  - 执行完成后，进入指定目录查看，在/data/local/tmp下就会生成trace文件。 -
                                                                  + 输入hdc_std shell，进入设备，执行命令。
                                                                  + GitHub Logo
                                                                  + 执行完成后，进入指定目录查看，在/data/local/tmp下就会生成trace文件。
                                                                  GitHub Logo

                                                                  Native Memory展示说明

                                                                  @@ -852,8 +846,7 @@

                                                                  Native Memory泳道图展示类型

                                                                  - 点击齿轮状的图标可以设置内存的展示单位。 -
                                                                  + 点击齿轮状的图标可以设置内存的展示单位。
                                                                  GitHub Logo

                                                                    @@ -891,10 +884,8 @@ All Anonymous VM：mmap分配的内存。

                                                                    Native Memory泳道图的框选功能

                                                                    - 可以对内存的数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有四个tab页。 -
                                                                    - Statistics的Tab页，主要显示了统计明细类型。 -
                                                                    + 可以对内存的数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有四个tab页。
                                                                    + Statistics的Tab页，主要显示了统计明细类型。
                                                                    GitHub Logo

                                                                      @@ -954,8 +945,7 @@ Existing/Total：框选区间内剩余的内存比上申请的内存，其中浅

                                                                    - Call Info的Tab页，主要显示了调用树详细类型。 -
                                                                    + Call Info的Tab页，主要显示了调用树详细类型。
                                                                    GitHub Logo

                                                                      @@ -979,8 +969,7 @@ Count：相同调用栈出现的次数。

                                                                    - Native Memory的Tab页，主要显示了单次分配信息列表。 -
                                                                    + Native Memory的Tab页，主要显示了单次分配信息列表。
                                                                    GitHub Logo

                                                                      @@ -1028,8 +1017,7 @@ Responsible Caller ：调用该函数的方法。

                                                                    - Snapshot List的Tab页，主要显示了各时刻内存的增长的差值。 -
                                                                    + Snapshot List的Tab页，主要显示了各时刻内存的增长的差值。
                                                                    GitHub Logo

                                                                      @@ -1067,16 +1055,14 @@ Total Growth ：自从上次Snapshot的增长量，是计算的每一次分配

                                                                      Native Memory的辅助信息功能

                                                                      - 在Call Info和Native Memory的Tab页，点击选中某一行，右边画红线处会显示出该行调用栈的树结构信息。 -
                                                                      + 在Call Info和Native Memory的Tab页，点击选中某一行，右边画红线处会显示出该行调用栈的树结构信息。
                                                                      GitHub Logo

                                                                      Native Memory详细显示的过滤功能

                                                                      点击下方的All Allocations可以对Allocation lifeSpan进行过滤，有三个选择：All Allocations，Created & - Existing，Created & Destroyed。 -
                                                                      + Existing，Created & Destroyed。
                                                                      GitHub Logo

                                                                        @@ -1100,8 +1086,7 @@ Total Growth ：自从上次Snapshot的增长量，是计算的每一次分配

                                                                      - 点击下方的All Heap&Anonymous VM可以对内存类型进行过滤。 -
                                                                      + 点击下方的All Heap&Anonymous VM可以对内存类型进行过滤。
                                                                      GitHub Logo

                                                                        @@ -1126,22 +1111,19 @@ All Anonymous VM：mmap的匿名页。

                                                                      点击下方的Mark Snapshot可以在时间轴上打标签。出现小旗的标志，通过标注多个时间点。点击到Snapshot - List标签页可以看到各个时间点的内存的增长值。 -
                                                                      + List标签页可以看到各个时间点的内存的增长值。
                                                                      GitHub Logo

                                                                      Native Memory的火焰图功能

                                                                      - 火焰图的展示跟Callinfo的tab页的调用栈显示一致，鼠标放到色块上，悬浮框可以显示调用栈名称，栈的所在库名，地址，size大小，栈的个数。 -
                                                                      + 火焰图的展示跟Callinfo的tab页的调用栈显示一致，鼠标放到色块上，悬浮框可以显示调用栈名称，栈的所在库名，地址，size大小，栈的个数。
                                                                      GitHub Logo

                                                                      基于函数进行调用栈（单个或多个）选择后可以在时间轴上显示内存操作点

                                                                      - 点击火焰图函数时，触发火焰图点击中，显示调用栈中该函数出现在时间轴范围的分布情况。 -
                                                                      + 点击火焰图函数时，触发火焰图点击中，显示调用栈中该函数出现在时间轴范围的分布情况。
                                                                      GitHub Logo

                                                                      内存搜索大小写不敏感，上层火焰图的大小和总内存需要根据搜索内容动态调整

                                                                      @@ -1152,8 +1134,7 @@ All Anonymous VM：mmap的匿名页。

                                                                      焦点函数火焰图详细展开：选中函数的全部调用栈展示

                                                                      - 点击调用栈某个函数，点击函数调用的函数对应铺满画布，点击函数的parent，显示以及绘制的大小变化为点击函数的大小，如下图点击OHOS::EglCoreInit()函数，会显示该函数的全部调用栈。 -
                                                                      + 点击调用栈某个函数，点击函数调用的函数对应铺满画布，点击函数的parent，显示以及绘制的大小变化为点击函数的大小，如下图点击OHOS::EglCoreInit()函数，会显示该函数的全部调用栈。
                                                                      GitHub Logo

                                                                      搜索框支持表达式输入

                                                                      @@ -1163,11 +1144,9 @@ All Anonymous VM：mmap的匿名页。 Library与Responsible Caller，其中Responsible Library，Responsible Caller表示从下往上非libc++ musl的第一条调用栈的lib跟symbol，如下图所示，由于最后一条 [ operator new(unsigned long) ] libc++.so为libc++.so的函数，固跳过，所以该条调用栈的Responsible Library为 - libhilog.so - ，Responsible Caller为OHOS::HiviewDFX::GetDomainLevel(unsigned int) 。 -
                                                                      - GitHub Logo -
                                                                      + libhilog.so，Responsible Caller为OHOS::HiviewDFX::GetDomainLevel(unsigned int) + 。
                                                                      + GitHub Logo
                                                                      表达式说明:在InputFilter输入框可以进行搜索过滤和表达式过滤，其中表达式必须以@开头，英文括号包起所需要过滤的内容，每个括号必须包括 （Responsible Library，Responsible Caller）匹配全量以*表示，否则认为该输入为搜索过滤。

                                                                      @@ -1205,11 +1184,7 @@ All Anonymous VM：mmap的匿名页。
- + @@ -1225,10 +1200,7 @@ All Anonymous VM：mmap的匿名页。 - + @@ -1253,15 +1225,13 @@ All Anonymous VM：mmap的匿名页。

选择Use Record Statistics和statistics interval配置项抓取的数据，只会显示Call Info的Tab页，Call - Info相关功能同上。 -
+ Info相关功能同上。
GitHub Logo

Native Memory多进程数据显示

- 前端可以支持多进程数据的展示，通过在tab页切换不同进程，可以显示不同进程的hook数据。 -
+ 前端可以支持多进程数据的展示，通过在tab页切换不同进程，可以显示不同进程的hook数据。
GitHub Logo

diff --git a/ide/src/doc/quickstart_page_fault.html b/ide/src/doc/quickstart_page_fault.html index af872898..bfaa5e4d 100644 --- a/ide/src/doc/quickstart_page_fault.html +++ b/ide/src/doc/quickstart_page_fault.html @@ -799,8 +799,7 @@

页内存抓取配置参数

- GitHub Logo -
+ GitHub Logo
配置项说明：

    @@ -825,19 +824,15 @@ Max Unwind Level：配置抓取调用栈的最大深度。

再点击Record setting，在output file path输入文件名hiprofiler_data_ebpf.htrace，拖动滚动条设置buffer - size大小是64M，抓取时长是50s。 -
- GitHub Logo -
- 点击Trace command，就会根据上面的配置生成抓取命令，点击Record抓取，抓取过程中会显示抓取时长。 -
+ size大小是64M，抓取时长是50s。
+ GitHub Logo
+ 点击Trace command，就会根据上面的配置生成抓取命令，点击Record抓取，抓取过程中会显示抓取时长。
GitHub Logo

页内存展示说明

- 抓取结束后页内存的trace会自动加载展示。 -
+ 抓取结束后页内存的trace会自动加载展示。
GitHub Logo

界面布局介绍：页内存整体界面布局分为3个部分：

@@ -864,21 +859,16 @@ Max Unwind Level：配置抓取调用栈的最大深度。

页内存泳道图展示

- 页内存泳道图展示事件(Operation)发生的次数，每个事件都有持续时间，鼠标悬浮以10ms为区间进行次数统计。 -
- GitHub Logo -
- 按住w键放大界面，悬浮框会显示当前时刻的事件发生次数。 -
+ 页内存泳道图展示事件(Operation)发生的次数，每个事件都有持续时间，鼠标悬浮以10ms为区间进行次数统计。
+ GitHub Logo
+ 按住w键放大界面，悬浮框会显示当前时刻的事件发生次数。
GitHub Logo

页内存泳道图的框选功能

- 可以对泳道图进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有三个tab页。 -
- Page Fault Statistics的Tab页如图： -
+ 可以对泳道图进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有三个tab页。
+ Page Fault Statistics的Tab页如图：
GitHub Logo

    @@ -920,12 +910,9 @@ Max Duration：最大时长。

- 点击下方的Statistics by Thread，可以切换到按照Thread为基点显示数据。 -
- GitHub Logo -
- Page Fault Calltree的Tab页如图： -
+ 点击下方的Statistics by Thread，可以切换到按照Thread为基点显示数据。
+ GitHub Logo
+ Page Fault Calltree的Tab页如图：
GitHub Logo

    @@ -949,8 +936,7 @@ Weight：调用方法的执行占比。

- Page Fault Events的Tab页如图： -
+ Page Fault Events的Tab页如图：
GitHub Logo

' + ''; + values[1] + ''; } // @ts-ignore if (tempSet.has(Object.values(bean[index])[0])) { let appValues = values[TabPaneEnergyAnomaly.VALUE_INDEX].split(','); htmlText += - ""; + ''; } if (index + 1 < bean.length) { // @ts-ignore @@ -83,13 +78,13 @@ export class TabPaneEnergyAnomaly extends BaseElement { } } - private spliceHtmlText(findAppNameIndex: number, nextValues: any[], htmlText: string, tempSet: Set): string { + private spliceHtmlText(findAppNameIndex: number, nextValues: any[], htmlText: string, tempSet: Set): string{ let appValues = nextValues[TabPaneEnergyAnomaly.VALUE_INDEX].split(','); if (tempSet.has(nextValues[0])) { htmlText += - "'; htmlText += '
只显示Responsible Library路径/data/user且symbol为任意值的数据
- @( - mali.so - *,libGLES_mali.so *) - @(mali.so *,libGLES_mali.so *) 只显示Responsible Library包含mali.so或者libGLES_mali.so的数据
不显示Responsible Library包含libark且Responsible Caller包含jsvm或者table的数据
- @-(librender picture, libskia picture) -
- 		@-(librender picture, libskia picture)
不显示Responsible Library包含librender或者libskia且Responsible Caller中包含picture的数据
' + - values[1] + - '
" + + '
' + values[TabPaneEnergyAnomaly.KEY_INDEX] + - "" + - (findAppNameIndex >= 0 - ? appValues.length > 1 - ? appValues[findAppNameIndex] - : values[TabPaneEnergyAnomaly.VALUE_INDEX] - : values[TabPaneEnergyAnomaly.VALUE_INDEX]) + + '' + + (findAppNameIndex >= 0 ? appValues.length > 1 ? appValues[findAppNameIndex] : + values[TabPaneEnergyAnomaly.VALUE_INDEX] : values[TabPaneEnergyAnomaly.VALUE_INDEX]) + TabPaneEnergyAnomaly.getUnit(values[TabPaneEnergyAnomaly.KEY_INDEX]) + - "" + + '' + nextValues[TabPaneEnergyAnomaly.KEY_INDEX] + - "" + + '' + (findAppNameIndex >= 0 ? appValues.length > 1 ? appValues[findAppNameIndex] @@ -100,9 +95,9 @@ export class TabPaneEnergyAnomaly extends BaseElement { } else { htmlText += '
'; - return htmlText; + return htmlText } - return htmlText; + return htmlText } private setFilterAppMapByAnomalyData(bean: EnergyAnomalyStruct[]): Map { @@ -151,7 +146,8 @@ export class TabPaneEnergyAnomaly extends BaseElement { initElements(): void { this.tblAnomaly = this.shadowRoot?.querySelector('#anomalyselectionTbl'); - this.tblAnomaly?.addEventListener('column-click', (ev: any) => {}); + this.tblAnomaly?.addEventListener('column-click', (ev: any) => { + }); } connectedCallback() { diff --git a/ide/src/trace/component/trace/sheet/energy/TabPanePowerBattery.ts b/ide/src/trace/component/trace/sheet/energy/TabPanePowerBattery.ts index 7593069c..130029e9 100644 --- a/ide/src/trace/component/trace/sheet/energy/TabPanePowerBattery.ts +++ b/ide/src/trace/component/trace/sheet/energy/TabPanePowerBattery.ts @@ -19,7 +19,7 @@ import { SelectionParam } from '../../../../bean/BoxSelection'; import { SpHiSysEnergyChart } from '../../../chart/SpHiSysEnergyChart'; import '../../../../../base-ui/table/lit-table'; import { resizeObserver } from '../SheetUtils'; -import { getTabPowerBatteryData } from '../../../../database/sql/ProcessThread.sql'; +import {getTabPowerBatteryData} from "../../../../database/sql/ProcessThread.sql"; @element('tabpane-power-battery') export class TabPanePowerBattery extends BaseElement { diff --git a/ide/src/trace/component/trace/sheet/energy/TabPanePowerDetails.ts b/ide/src/trace/component/trace/sheet/energy/TabPanePowerDetails.ts index 8b8c44a4..242c8c51 100644 --- a/ide/src/trace/component/trace/sheet/energy/TabPanePowerDetails.ts +++ b/ide/src/trace/component/trace/sheet/energy/TabPanePowerDetails.ts @@ -128,7 +128,7 @@ export class TabPanePowerDetails extends BaseElement { time_type: [], duration_type: [], energy_type: [], - count_type: [], + count_type: [] }; this.itemType.time_type = this.getTimeTypeValue(); this.itemType.duration_type = this.getDurationTypeValue(); @@ -151,8 +151,7 @@ export class TabPanePowerDetails extends BaseElement { } getTotalEnergy(powerData: any) { - return ( - powerData.POWER_IDE_CPU.getTotalEnergy(false) + + return powerData.POWER_IDE_CPU.getTotalEnergy(false) + powerData.POWER_IDE_LOCATION.getTotalEnergy(false) + powerData.POWER_IDE_GPU.getTotalEnergy(true) + powerData.POWER_IDE_DISPLAY.getTotalEnergy(true) + @@ -160,8 +159,7 @@ export class TabPanePowerDetails extends BaseElement { powerData.POWER_IDE_BLUETOOTH.getTotalEnergy(false) + powerData.POWER_IDE_FLASHLIGHT.getTotalEnergy(false) + powerData.POWER_IDE_AUDIO.getTotalEnergy(false) + - powerData.POWER_IDE_WIFISCAN.getTotalEnergy(false) - ); + powerData.POWER_IDE_WIFISCAN.getTotalEnergy(false); } queryDataByDB(val: SelectionParam | any): void { @@ -184,14 +182,9 @@ export class TabPanePowerDetails extends BaseElement { tsMax = 0; } else if (currentAppIndex > -1 && (set.has(item.appKey) ? item.startNS >= tsMax : true)) { if (set.has(item.appKey)) { - powerDatum[item.appKey.toLocaleLowerCase()] = - item.startNS >= tsMax - ? ((tsMax = item.startNS), item.eventValue) - : powerDatum[item.appKey.toLocaleLowerCase()]; + powerDatum[item.appKey.toLocaleLowerCase()] = item.startNS >= tsMax ? (tsMax = item.startNS , item.eventValue) : powerDatum[item.appKey.toLocaleLowerCase()]; } else { - powerDatum[item.appKey.toLocaleLowerCase()] = - (powerDatum[item.appKey.toLocaleLowerCase()] || 0) + - parseInt(item.eventValue.split(',')[currentAppIndex]); + powerDatum[item.appKey.toLocaleLowerCase()] = (powerDatum[item.appKey.toLocaleLowerCase()] || 0) + parseInt(item.eventValue.split(',')[currentAppIndex]); } } }); @@ -268,13 +261,13 @@ export class TabPanePowerDetails extends BaseElement { if (type === 'number') { return sort === 2 ? // @ts-ignore - parseFloat(bPowerDetails[property] === '-' ? 0 : bPowerDetails[property]) - - // @ts-ignore - parseFloat(aPowerDetails[property] === '-' ? 0 : aPowerDetails[property]) + parseFloat(bPowerDetails[property] === '-' ? 0 : bPowerDetails[property]) - + // @ts-ignore + parseFloat(aPowerDetails[property] === '-' ? 0 : aPowerDetails[property]) : // @ts-ignore - parseFloat(aPowerDetails[property] === '-' ? 0 : aPowerDetails[property]) - - // @ts-ignore - parseFloat(bPowerDetails[property] === '-' ? 0 : bPowerDetails[property]); + parseFloat(aPowerDetails[property] === '-' ? 0 : aPowerDetails[property]) - + // @ts-ignore + parseFloat(bPowerDetails[property] === '-' ? 0 : bPowerDetails[property]); } else { // @ts-ignore if (bPowerDetails[property] > aPowerDetails[property]) { diff --git a/ide/src/trace/component/trace/sheet/energy/TabPaneSystemDetails.ts b/ide/src/trace/component/trace/sheet/energy/TabPaneSystemDetails.ts index 9e30a8f9..9f460a56 100644 --- a/ide/src/trace/component/trace/sheet/energy/TabPaneSystemDetails.ts +++ b/ide/src/trace/component/trace/sheet/energy/TabPaneSystemDetails.ts @@ -23,8 +23,8 @@ import { type LitSlicerTrack } from '../../../../../base-ui/slicer/lit-slicer'; import { querySysLocationDetailsData, querySysLockDetailsData, - querySystemWorkData, -} from '../../../../database/sql/SqlLite.sql'; + querySystemWorkData +} from "../../../../database/sql/SqlLite.sql"; @element('tabpane-system-details') export class TabPaneSystemDetails extends BaseElement { @@ -101,10 +101,10 @@ export class TabPaneSystemDetails extends BaseElement { this.detailsTbl!.dataSource = this.detailsSource; this.boxDetails!.style.width = '65%'; } - this.detailsTblStyle(); + this.detailsTblStyle(); } - detailsTblStyle() { + detailsTblStyle(){ this.detailsTbl!.shadowRoot?.querySelectorAll('.tr').forEach((tr) => { tr.style.gridTemplateColumns = '120px 1fr'; }); @@ -173,7 +173,7 @@ export class TabPaneSystemDetails extends BaseElement { }); } - tblSystemDetailsStyle() { + tblSystemDetailsStyle(){ this.tblSystemDetails?.shadowRoot?.querySelectorAll('.td').forEach((td) => { td.style.fontSize = '14px'; if (td.getAttribute('title') === 'Event Name' || td.getAttribute('title') === 'Time') { @@ -213,7 +213,7 @@ export class TabPaneSystemDetails extends BaseElement { watchIndex[number] = number + filterData.ts; } } else { - lifeCycleData = this.getSysDataExtend(rightNs, watchIndex, filterData, lifeCycleData); + lifeCycleData = this.getSysDataExtend(rightNs, watchIndex, filterData, lifeCycleData) } } } @@ -235,7 +235,12 @@ export class TabPaneSystemDetails extends BaseElement { return resultData; } - getSysDataExtend(rightNs: number, watchIndex: Array, filterData: any, lifeCycleData: any[]): any[] { + getSysDataExtend( + rightNs: number, + watchIndex: Array, + filterData: any, + lifeCycleData: any[] + ): any[]{ let number = watchIndex.indexOf(filterData.workId); if (number > -1) { lifeCycleData[number].rangeData.push(filterData); diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneCallTree.html.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneCallTree.html.ts index 5b51903c..588cfa52 100644 --- a/ide/src/trace/component/trace/sheet/file-system/TabPaneCallTree.html.ts +++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneCallTree.html.ts @@ -56,7 +56,7 @@ export const TabPaneCallTreeHtml = `
- + @@ -72,7 +72,7 @@ export const TabPaneCallTreeHtml = ` - +
@@ -83,4 +83,4 @@ export const TabPaneCallTreeHtml = `
- `; + `; \ No newline at end of file diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneCallTree.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneCallTree.ts index e989a6af..7bcc472a 100644 --- a/ide/src/trace/component/trace/sheet/file-system/TabPaneCallTree.ts +++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneCallTree.ts @@ -288,7 +288,8 @@ export class TabPaneCallTree extends BaseElement { this.getChildTree(bean.children as Array, maxId, children); let callTreeArr = parents.reverse().concat(children.reverse()); for (let data of callTreeArr) { - data.type = data.lib.endsWith('.so.1') || data.lib.endsWith('.dll') || data.lib.endsWith('.so') ? 0 : 1; + data.type = + data.libName.endsWith('.so.1') || data.libName.endsWith('.dll') || data.libName.endsWith('.so') ? 0 : 1; } let len = callTreeArr.length; this.callTreeRightSource = callTreeArr; @@ -405,10 +406,10 @@ export class TabPaneCallTree extends BaseElement { } private handleSymbolCase(data: any, callTreeFuncArgs: any[]): void { - this.callTreeFilter!.addDataMining({ name: this.callTreeSelectedData.symbol }, data.item); + this.callTreeFilter!.addDataMining({ name: this.callTreeSelectedData.symbolName }, data.item); callTreeFuncArgs.push({ funcName: 'splitTree', - funcArgs: [this.callTreeSelectedData.symbol, false, true], + funcArgs: [this.callTreeSelectedData.symbolName, false, true], }); } @@ -452,10 +453,10 @@ export class TabPaneCallTree extends BaseElement { funcName: 'resetAllNode', funcArgs: [], }); - list.forEach((symbol: string) => { + list.forEach((symbolName: string) => { callTreeFuncArgs.push({ funcName: 'clearSplitMapData', - funcArgs: [symbol], + funcArgs: [symbolName], }); }); } diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemCalltree.html.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemCalltree.html.ts index 72c9406b..7ba23a15 100644 --- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemCalltree.html.ts +++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemCalltree.html.ts @@ -59,7 +59,7 @@ export const TabPaneFileSystemCalltreeHtml = `
- + @@ -76,7 +76,7 @@ export const TabPaneFileSystemCalltreeHtml = ` - +
@@ -87,4 +87,4 @@ export const TabPaneFileSystemCalltreeHtml = `
- `; + `; \ No newline at end of file diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemCalltree.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemCalltree.ts index ccae08aa..8e47b5b9 100644 --- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemCalltree.ts +++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemCalltree.ts @@ -265,7 +265,8 @@ export class TabpaneFilesystemCalltree extends BaseElement { this.getChildTree(merageBean.children as Array, maxId, children); let fsMerageParentsList = parents.reverse().concat(children.reverse()); for (let data of fsMerageParentsList) { - data.type = data.lib.endsWith('.so.1') || data.lib.endsWith('.dll') || data.lib.endsWith('.so') ? 0 : 1; + data.type = + data.libName.endsWith('.so.1') || data.libName.endsWith('.dll') || data.libName.endsWith('.so') ? 0 : 1; } let len = fsMerageParentsList.length; this.fsCallTreeRightSource = fsMerageParentsList; @@ -334,10 +335,10 @@ export class TabpaneFilesystemCalltree extends BaseElement { } private handleSymbolCase(data: any, fsCallTreeFuncArgs: any[]): void { - this.fsCallTreeFilter!.addDataMining({ name: this.fsCallTreeCurrentSelectedData.symbol }, data.item); + this.fsCallTreeFilter!.addDataMining({ name: this.fsCallTreeCurrentSelectedData.symbolName }, data.item); fsCallTreeFuncArgs.push({ funcName: 'splitTree', - funcArgs: [this.fsCallTreeCurrentSelectedData.symbol, false, true], + funcArgs: [this.fsCallTreeCurrentSelectedData.symbolName, false, true], }); } @@ -491,10 +492,10 @@ export class TabpaneFilesystemCalltree extends BaseElement { funcName: 'resetAllNode', funcArgs: [], }); - list.forEach((symbol: string) => { + list.forEach((symbolName: string) => { fsCallTreeFuncArgs.push({ funcName: 'clearSplitMapData', - funcArgs: [symbol], + funcArgs: [symbolName], }); }); } diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescHistory.html.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescHistory.html.ts index 83717e14..dff44cc6 100644 --- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescHistory.html.ts +++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescHistory.html.ts @@ -84,4 +84,4 @@ export const TabPaneFileSystemDescHistoryHtml = `
-`; +`; \ No newline at end of file diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescTimeSlice.html.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescTimeSlice.html.ts index 28c4b961..a8fccd66 100644 --- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescTimeSlice.html.ts +++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescTimeSlice.html.ts @@ -83,4 +83,4 @@ export const TabPaneFileSystemDescTimeSliceHtml = `
-`; +`; \ No newline at end of file diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescTimeSlice.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescTimeSlice.ts index 96c76558..24403958 100644 --- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescTimeSlice.ts +++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescTimeSlice.ts @@ -46,9 +46,8 @@ export class TabPaneFileSystemDescTimeSlice extends BaseElement { } if (this.fsDescTimeSliceTblData) { // @ts-ignore - this.fsDescTimeSliceTblData.shadowRoot.querySelector('.table').style.height = `${ - this.parentElement!.clientHeight - 20 - 31 - }px`; + this.fsDescTimeSliceTblData.shadowRoot.querySelector('.table').style.height = + `${this.parentElement!.clientHeight - 20 - 31 }px`; } this.fsDescTimeSliceTbl!.recycleDataSource = []; this.fsDescTimeSliceTblData!.recycleDataSource = []; @@ -124,19 +123,17 @@ export class TabPaneFileSystemDescTimeSlice extends BaseElement { if (this.parentElement?.clientHeight != 0) { if (this.fsDescTimeSliceTbl) { // @ts-ignore - this.fsDescTimeSliceTbl.shadowRoot.querySelector('.table').style.height = `${ - this.parentElement!.clientHeight - 10 - 31 - }px`; + this.fsDescTimeSliceTbl.shadowRoot.querySelector('.table').style.height = + `${this.parentElement!.clientHeight - 10 - 31 }px`; this.fsDescTimeSliceTbl.reMeauseHeight(); } - if (this.fsDescTimeSliceTblData) { - // @ts-ignore - this.fsDescTimeSliceTblData.shadowRoot.querySelector('.table').style.height = `${ - this.parentElement!.clientHeight - 10 - 31 - }px`; - this.fsDescTimeSliceTblData.reMeauseHeight(); - this.fsDescTimeSliceLoadingPage.style.height = `${this.parentElement!.clientHeight - 24}px`; - } + if (this.fsDescTimeSliceTblData) { + // @ts-ignore + this.fsDescTimeSliceTblData.shadowRoot.querySelector('.table').style.height = + `${this.parentElement!.clientHeight - 10 - 31 }px`; + this.fsDescTimeSliceTblData.reMeauseHeight(); + this.fsDescTimeSliceLoadingPage.style.height = `${this.parentElement!.clientHeight - 24 }px`; + } } }).observe(this.parentElement!); } diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemEvents.html.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemEvents.html.ts index 89aa33ae..16fd24f6 100644 --- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemEvents.html.ts +++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemEvents.html.ts @@ -91,4 +91,4 @@ export const TabPaneFileSystemEventsHtml = `
-`; +`; \ No newline at end of file diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemEvents.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemEvents.ts index d5b6be16..83ac450a 100644 --- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemEvents.ts +++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemEvents.ts @@ -246,9 +246,9 @@ export class TabPaneFileSystemEvents extends BaseElement { let arr = Array.from(this.fsSysEventFilterSource); arr.sort((fsEventA, fsEventB): number => { if (key == 'startTsStr') { - return type === 1 ? fsEventA.startTs - fsEventB.startTs : fsEventB.startTs - fsEventA.startTs; + return (type === 1) ? (fsEventA.startTs - fsEventB.startTs) : (fsEventB.startTs - fsEventA.startTs); } else if (key == 'durStr') { - return type === 1 ? fsEventA.dur - fsEventB.dur : fsEventB.dur - fsEventA.dur; + return (type === 1) ? (fsEventA.dur - fsEventB.dur) : (fsEventB.dur - fsEventA.dur); } else if (key == 'process') { return this.sortProcessCase(fsEventA, fsEventB, type); } else if (key == 'thread') { @@ -256,7 +256,7 @@ export class TabPaneFileSystemEvents extends BaseElement { } else if (key == 'typeStr') { return this.sortTypeCase(fsEventA, fsEventB, type); } else if (key == 'fd') { - return type === 1 ? (fsEventA.fd || 0) - (fsEventB.fd || 0) : (fsEventB.fd || 0) - (fsEventA.fd || 0); + return (type === 1) ? ((fsEventA.fd || 0) - (fsEventB.fd || 0)) : ((fsEventB.fd || 0) - (fsEventA.fd || 0)); } else if (key == 'path') { return this.sortPathCase(fsEventA, fsEventB, type); } else { diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneFilesystemStatisticsAnalysis.html.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneFilesystemStatisticsAnalysis.html.ts index e69eec0c..8cd91e7e 100644 --- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFilesystemStatisticsAnalysis.html.ts +++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFilesystemStatisticsAnalysis.html.ts @@ -106,4 +106,4 @@ export const TabPaneFilesystemStatisticsAnalysisHtml = ` -`; +`; \ No newline at end of file diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.html.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.html.ts index f3988085..181e7513 100644 --- a/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.html.ts +++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.html.ts @@ -106,4 +106,4 @@ export const TabPaneIOTierStatisticsAnalysisHtml = ` -`; +`; \ No newline at end of file diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.ts index ca9a07a1..5fccecc8 100644 --- a/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.ts +++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.ts @@ -78,7 +78,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement { for (let ioTable of this.ioTableArray) { initSort(ioTable!, this.ioSortColumn, this.ioSortType); } - } + } this.reset(this.ioTierTableProcess!, false); this.hideProcessCheckBox!.checked = false; this.hideThreadCheckBox!.checked = false; @@ -108,7 +108,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement { this.disableCheckBox(); this.getIOTierProcess(this.processData); } - ); + ); } initElements(): void { @@ -188,12 +188,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement { this.hideProcess(); } else { this.reset(this.ioTierTableProcess!, false); - this.showAssignLevel( - this.ioTierTableProcess!, - this.ioTierTableThread!, - 1, - this.tierTableType!.recycleDataSource - ); + this.showAssignLevel(this.ioTierTableProcess!, this.ioTierTableThread!, 1, this.tierTableType!.recycleDataSource); this.getIOTierProcess(this.processData); } }); @@ -263,7 +258,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement { tierTable.style.display = 'grid'; tierTable!.removeAttribute('hideDownload'); } else { - tierTable!.style.display = 'none'; + tierTable!.style.display = 'none'; tierTable.setAttribute('hideDownload', ''); } } @@ -279,12 +274,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement { this.tableFunction!.recycleDataSource = []; } - private showAssignLevel( - showIoTable: LitTable, - hideIoTable: LitTable, - currentLevel: number, - currentLevelData: Array - ): void { + private showAssignLevel(showIoTable: LitTable, hideIoTable: LitTable, currentLevel: number,currentLevelData: Array): void { showIoTable!.style.display = 'grid'; hideIoTable!.style.display = 'none'; hideIoTable.setAttribute('hideDownload', ''); @@ -297,12 +287,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement { this.iOTierStatisticsAnalysisBack!.addEventListener('click', () => { if (this.tabName!.textContent === 'Statistic By type AllDuration') { this.iOTierStatisticsAnalysisBack!.style.visibility = 'hidden'; - this.showAssignLevel( - this.ioTierTableProcess!, - this.tierTableType!, - 0, - this.ioTierTableProcess!.recycleDataSource - ); + this.showAssignLevel(this.ioTierTableProcess!, this.tierTableType!, 0, this.ioTierTableProcess!.recycleDataSource); this.processPieChart(); } else if (this.tabName!.textContent === 'Statistic By Thread AllDuration') { if (this.hideProcessCheckBox?.checked) { @@ -320,12 +305,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement { this.showAssignLevel(this.tierTableType!, this.ioTierTableSo!, 1, this.tierTableType!.recycleDataSource); this.typePieChart(); } else { - this.showAssignLevel( - this.ioTierTableThread!, - this.ioTierTableSo!, - 2, - this.ioTierTableThread!.recycleDataSource - ); + this.showAssignLevel(this.ioTierTableThread!, this.ioTierTableSo!, 2, this.ioTierTableThread!.recycleDataSource); this.threadPieChart(); } } else if (this.tabName!.textContent === 'Statistic By Function AllDuration') { @@ -866,9 +846,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement { for (let item of value) { dur += item.dur; tName = item.threadName = - item.threadName === null || item.threadName === undefined - ? `Thread(${item.tid})` - : `${item.threadName}(${item.tid})`; + item.threadName === null || item.threadName === undefined ? `Thread(${item.tid})` : `${item.threadName}(${item.tid})`; } const threadData = { tableName: tName, diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneIoCompletionTimes.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneIoCompletionTimes.ts index a8ea69dc..b0cf348a 100644 --- a/ide/src/trace/component/trace/sheet/file-system/TabPaneIoCompletionTimes.ts +++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneIoCompletionTimes.ts @@ -53,18 +53,16 @@ export class TabPaneIoCompletionTimes extends BaseElement { }); if (this.ioCompletionTimesTbl) { // @ts-ignore - this.ioCompletionTimesTbl.shadowRoot.querySelector('.table').style.height = `${ - this.parentElement!.clientHeight - 20 - 31 - }px`; + this.ioCompletionTimesTbl.shadowRoot.querySelector('.table').style.height = + `${this.parentElement!.clientHeight - 20 - 31 }px`; this.ioCompletionTimesTbl.recycleDataSource = []; } - if (this.ioCompletionTimesTblData) { - // @ts-ignore - this.ioCompletionTimesTblData.shadowRoot.querySelector('.table').style.height = `${ - this.parentElement!.clientHeight - 20 - 31 - }px`; - this.ioCompletionTimesTblData.recycleDataSource = []; - } + if (this.ioCompletionTimesTblData) { + // @ts-ignore + this.ioCompletionTimesTblData.shadowRoot.querySelector('.table').style.height = + `${this.parentElement!.clientHeight - 20 - 31 }px`; + this.ioCompletionTimesTblData.recycleDataSource = []; + } } connectedCallback() { @@ -72,19 +70,17 @@ export class TabPaneIoCompletionTimes extends BaseElement { if (this.parentElement?.clientHeight != 0) { if (this.ioCompletionTimesTbl) { // @ts-ignore - this.ioCompletionTimesTbl.shadowRoot.querySelector('.table').style.height = `${ - this.parentElement!.clientHeight - 10 - 33 - }px`; + this.ioCompletionTimesTbl.shadowRoot.querySelector('.table').style.height = + `${this.parentElement!.clientHeight - 10 - 33 }px`; this.ioCompletionTimesTbl.reMeauseHeight(); } if (this.ioCompletionTimesTblData) { // @ts-ignore - this.ioCompletionTimesTblData.shadowRoot.querySelector('.table').style.height = `${ - this.parentElement!.clientHeight - 10 - 33 - }px`; + this.ioCompletionTimesTblData.shadowRoot.querySelector('.table').style.height = + `${this.parentElement!.clientHeight - 10 - 33 }px`; this.ioCompletionTimesTblData.reMeauseHeight(); } - this.ioCompletionTimesLoadingPage.style.height = `${this.parentElement!.clientHeight - 24}px`; + this.ioCompletionTimesLoadingPage.style.height = `${this.parentElement!.clientHeight - 24 }px`; } }).observe(this.parentElement!); } @@ -159,14 +155,14 @@ export class TabPaneIoCompletionTimes extends BaseElement { if (this.currentSelection != ioCompletionTimeParam) { this.currentSelection = ioCompletionTimeParam; filter!.setSelectList(this.native_type, null, 'Tier'); - filter!.firstSelect = `${typeIndexOf}`; + filter!.firstSelect = `${typeIndexOf }`; this.queryData(ioCompletionTimeParam); } else { if (typeIndexOf == parseInt(filter!.firstSelect)) { return; } filter!.setSelectList(this.native_type, null, 'Tier'); - filter!.firstSelect = `${typeIndexOf}`; + filter!.firstSelect = `${typeIndexOf }`; this.filterTypeData(ioCompletionTimeParam?.fileSystemIoData?.path || undefined); ioCompletionTimeParam.fileSystemIoData = undefined; this.ioCompletionTimesTbl!.recycleDataSource = this.ioCompletionTimesSource; @@ -285,11 +281,8 @@ export class TabPaneIoCompletionTimes extends BaseElement { }); } - private sortOperationCase( - ioCompletionTimesA: IoCompletionTimes, - ioCompletionTimesB: IoCompletionTimes, - type: number - ): number { + private sortOperationCase(ioCompletionTimesA: IoCompletionTimes, + ioCompletionTimesB: IoCompletionTimes, type: number): number { if (ioCompletionTimesA.operation > ioCompletionTimesB.operation) { return type === 2 ? 1 : -1; } else if (ioCompletionTimesA.operation == ioCompletionTimesB.operation) { @@ -299,11 +292,8 @@ export class TabPaneIoCompletionTimes extends BaseElement { } } - private sortThreadCase( - ioCompletionTimesA: IoCompletionTimes, - ioCompletionTimesB: IoCompletionTimes, - type: number - ): number { + private sortThreadCase(ioCompletionTimesA: IoCompletionTimes, + ioCompletionTimesB: IoCompletionTimes, type: number): number { if (ioCompletionTimesA.thread > ioCompletionTimesB.thread) { return type === 2 ? 1 : -1; } else if (ioCompletionTimesA.thread == ioCompletionTimesB.thread) { @@ -313,11 +303,8 @@ export class TabPaneIoCompletionTimes extends BaseElement { } } - private sortProcessCase( - ioCompletionTimesA: IoCompletionTimes, - ioCompletionTimesB: IoCompletionTimes, - type: number - ): number { + private sortProcessCase(ioCompletionTimesA: IoCompletionTimes, + ioCompletionTimesB: IoCompletionTimes, type: number): number { if (ioCompletionTimesA.process > ioCompletionTimesB.process) { return type === 2 ? 1 : -1; } else if (ioCompletionTimesA.process == ioCompletionTimesB.process) { diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneVMEvents.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneVMEvents.ts index 60b9b372..71912250 100644 --- a/ide/src/trace/component/trace/sheet/file-system/TabPaneVMEvents.ts +++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneVMEvents.ts @@ -21,7 +21,7 @@ import { LitProgressBar } from '../../../../../base-ui/progress-bar/LitProgressB import { procedurePool } from '../../../../database/Procedure'; import { VirtualMemoryEvent, VM_TYPE_MAP } from '../../../../database/logic-worker/ProcedureLogicWorkerFileSystem'; import { FilterData, TabPaneFilter } from '../TabPaneFilter'; -import { getTabVirtualMemoryType } from '../../../../database/sql/Memory.sql'; +import {getTabVirtualMemoryType} from '../../../../database/sql/Memory.sql'; import { TabPaneVMEventsHtml } from './TabPaneVMEvents.html'; @element('tabpane-virtualmemory-event') @@ -49,8 +49,7 @@ export class TabPaneVirtualMemoryEvents extends BaseElement { }); if (this.vmEventTbl) { // @ts-ignore - this.vmEventTbl.shadowRoot.querySelector('.table').style.height = - this.parentElement!.clientHeight - 20 - 31 + 'px'; + this.vmEventTbl.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px'; this.vmEventTbl.recycleDataSource = []; } if (this.vmEventTblData) { @@ -70,12 +69,12 @@ export class TabPaneVirtualMemoryEvents extends BaseElement { this.parentElement!.clientHeight - 10 - 33 + 'px'; this.vmEventTbl.reMeauseHeight(); } - if (this.vmEventTblData) { - // @ts-ignore - this.vmEventTblData.shadowRoot.querySelector('.table').style.height = - this.parentElement!.clientHeight - 10 - 33 + 'px'; - this.vmEventTblData.reMeauseHeight(); - } + if (this.vmEventTblData) { + // @ts-ignore + this.vmEventTblData.shadowRoot.querySelector('.table').style.height = + this.parentElement!.clientHeight - 10 - 33 + 'px'; + this.vmEventTblData.reMeauseHeight(); + } this.loadingPage.style.height = this.parentElement!.clientHeight - 24 + 'px'; } }).observe(this.parentElement!); diff --git a/ide/src/trace/component/trace/sheet/fps/TabPaneFps.ts b/ide/src/trace/component/trace/sheet/fps/TabPaneFps.ts index 8d725173..59af7ad2 100644 --- a/ide/src/trace/component/trace/sheet/fps/TabPaneFps.ts +++ b/ide/src/trace/component/trace/sheet/fps/TabPaneFps.ts @@ -19,7 +19,7 @@ import { SelectionParam } from '../../../../bean/BoxSelection'; import { Utils } from '../../base/Utils'; import { log } from '../../../../../log/Log'; import { resizeObserver } from '../SheetUtils'; -import { getTabFps } from '../../../../database/sql/SqlLite.sql'; +import {getTabFps} from "../../../../database/sql/SqlLite.sql"; @element('tabpane-fps') export class TabPaneFps extends BaseElement { diff --git a/ide/src/trace/component/trace/sheet/freq/TabPaneCpuFreqLimits.ts b/ide/src/trace/component/trace/sheet/freq/TabPaneCpuFreqLimits.ts index e526ce98..fc9a8cbc 100644 --- a/ide/src/trace/component/trace/sheet/freq/TabPaneCpuFreqLimits.ts +++ b/ide/src/trace/component/trace/sheet/freq/TabPaneCpuFreqLimits.ts @@ -20,7 +20,7 @@ import { Utils } from '../../base/Utils'; import { ColorUtils } from '../../base/ColorUtils'; import { CpuFreqLimitsStruct } from '../../../../database/ui-worker/cpu/ProcedureWorkerCpuFreqLimits'; import { resizeObserver } from '../SheetUtils'; -import { getCpuLimitFreqBoxSelect } from '../../../../database/sql/Cpu.sql'; +import { getCpuLimitFreqBoxSelect } from "../../../../database/sql/Cpu.sql"; @element('tabpane-cpu-freq-limits') export class TabPaneCpuFreqLimits extends BaseElement { diff --git a/ide/src/trace/component/trace/sheet/frequsage/TabPaneFreqDataCut.ts b/ide/src/trace/component/trace/sheet/frequsage/TabPaneFreqDataCut.ts index a98bc0b2..9a0c10b0 100644 --- a/ide/src/trace/component/trace/sheet/frequsage/TabPaneFreqDataCut.ts +++ b/ide/src/trace/component/trace/sheet/frequsage/TabPaneFreqDataCut.ts @@ -1,3 +1,4 @@ + /* * Copyright (C) 2023 Huawei Device Co., Ltd. * Licensed under the Apache License, Version 2.0 (the "License"); @@ -23,7 +24,7 @@ import { Utils } from '../../base/Utils'; import { resizeObserver } from '../SheetUtils'; import { LitChartScatter } from '../../../../../base-ui/chart/scatter/LitChartScatter'; import { SpSegmentationChart } from '../../../chart/SpSegmentationChart'; -import { TabPaneFreqUsageConfig, type TabPaneRunningConfig, TabPaneCpuFreqConfig } from './TabPaneFreqUsageConfig'; +import { TabPaneFreqUsageConfig, type TabPaneRunningConfig, TabPaneCpuFreqConfig} from './TabPaneFreqUsageConfig'; @element('tabpane-freqdatacut') export class TabPaneFreqDataCut extends BaseElement { private threadStatesTbl: LitTable | null | undefined; @@ -54,19 +55,7 @@ export class TabPaneFreqDataCut extends BaseElement { pidArr.push( new TabPaneFreqUsageConfig( Utils.PROCESS_MAP.get(i) === null ? 'Process ' + i : Utils.PROCESS_MAP.get(i) + ' ' + i, - '', - i, - '', - 0, - '', - '', - 0, - '', - 0, - 'process', - -1, - [] - ) + '', i, '', 0, '', '', 0, '', 0, 'process', -1, []) ); } // 拷贝给私有属性，以便后续进行数据切割时免除整理进程层级数据 @@ -76,14 +65,14 @@ export class TabPaneFreqDataCut extends BaseElement { * 初始化数据 */ async init(threadStatesParam: SelectionParam): Promise { - let { - runningMap, - sum, - }: { - runningMap: Map>; - sum: number; - } = await this.queryRunningData(threadStatesParam); - let cpuFreqData: Array = await this.queryCpuFreqData(threadStatesParam); + let {runningMap, sum}: { + runningMap: Map>, + sum: number + } + = await this.queryRunningData(threadStatesParam); + let cpuFreqData: Array = await this.queryCpuFreqData( + threadStatesParam + ); if (runningMap.size > 0) { // 将cpu频点数据与running状态数据整合，保证其上该段时长内有对应的cpu频点数据 this.mergeFreqData(runningMap, cpuFreqData, sum); @@ -144,59 +133,42 @@ export class TabPaneFreqDataCut extends BaseElement { startNS: number; filter_id: number; value: number; - dur: number; - }> = await queryCpuFreqUsageData(queryId); + dur: number} + > = await queryCpuFreqUsageData(queryId); for (let i of res) { dealArr.push( - new TabPaneCpuFreqConfig(i.startNS + threadStatesParam.recordStartNs, idMap.get(i.filter_id)!, i.value, i.dur) - ); + new TabPaneCpuFreqConfig( + i.startNS + threadStatesParam.recordStartNs, + idMap.get(i.filter_id)!, + i.value, + i.dur + )); } return dealArr; } /** * 查询框选区域内的所有running状态数据 */ - async queryRunningData( - threadStatesParam: SelectionParam - ): Promise<{ runningMap: Map>; sum: number }> { - let result: Array = await getTabRunningPercent( - threadStatesParam.threadIds, - threadStatesParam.leftNs, - threadStatesParam.rightNs - ); + async queryRunningData(threadStatesParam: SelectionParam): + Promise<{runningMap: Map>; sum: number}> { + let result: Array + = await getTabRunningPercent(threadStatesParam.threadIds, threadStatesParam.leftNs, threadStatesParam.rightNs); let needDeal: Map> = new Map(); let sum: number = 0; if (result !== null && result.length > 0) { - let processArr: Array = - threadStatesParam.processIds.length > 1 - ? [...new Set(threadStatesParam.processIds)] - : threadStatesParam.processIds; + let processArr: Array = threadStatesParam.processIds.length > 1 + ? [...new Set(threadStatesParam.processIds)] : threadStatesParam.processIds; for (let e of result) { if (processArr.includes(e.pid)) { if (needDeal.get(e.pid + '_' + e.tid) === undefined) { this.threadArr.push( - new TabPaneFreqUsageConfig( - Utils.THREAD_MAP.get(e.tid) + ' ' + e.tid, - '', - e.pid, - e.tid, - 0, - '', - '', - 0, - '', - 0, - 'thread', - -1, - [] - ) + new TabPaneFreqUsageConfig(Utils.THREAD_MAP.get(e.tid) + ' ' + e.tid, + '', e.pid, e.tid, 0, '', '', 0, '', 0, 'thread', -1, []) ); needDeal.set(e.pid + '_' + e.tid, new Array()); } - if ( - e.ts < threadStatesParam.leftNs + threadStatesParam.recordStartNs && - e.ts + e.dur > threadStatesParam.leftNs + threadStatesParam.recordStartNs - ) { + if (e.ts < threadStatesParam.leftNs + threadStatesParam.recordStartNs && + e.ts + e.dur > threadStatesParam.leftNs + threadStatesParam.recordStartNs) { const ts = e.ts; e.ts = threadStatesParam.leftNs + threadStatesParam.recordStartNs; e.dur = ts + e.dur - (threadStatesParam.leftNs + threadStatesParam.recordStartNs); @@ -212,7 +184,7 @@ export class TabPaneFreqDataCut extends BaseElement { } } } - return { runningMap: needDeal, sum: sum }; + return {'runningMap': needDeal, 'sum': sum}; } /** * 将cpu频点数据与running状态数据整合，保证其上该段时长内有对应的cpu频点数据 @@ -229,122 +201,42 @@ export class TabPaneFreqDataCut extends BaseElement { // 只需要判断running状态数据与频点数据cpu相同的情况 if (value[i].cpu === dealArr[j].cpu) { // running状态数据的开始时间大于频点数据开始时间，小于频点结束时间。且running状态数据的持续时间小于频点结束时间减去running状态数据开始时间的情况 - if ( - value[i].ts > dealArr[j].startNS && + if (value[i].ts > dealArr[j].startNS && value[i].ts < dealArr[j].startNS + dealArr[j].dur && - value[i].dur < dealArr[j].startNS + dealArr[j].dur - value[i].ts - ) { - resultList.push( - new TabPaneFreqUsageConfig( - value[i].thread, - value[i].ts, - value[i].pid, - value[i].tid, - 0, - value[i].cpu, - dealArr[j].value, - value[i].dur, - '', - (value[i].dur / sum) * 100, - 'freqdata', - -1, - undefined - ) - ); + value[i].dur < dealArr[j].startNS + dealArr[j].dur - value[i].ts) { + resultList.push(new TabPaneFreqUsageConfig(value[i].thread, value[i].ts, value[i].pid, + value[i].tid, 0, value[i].cpu,dealArr[j].value, value[i].dur, '', (value[i].dur / sum) * 100, + 'freqdata', -1, undefined)); break; } // running状态数据的开始时间大于频点数据开始时间，小于频点结束时间。且running状态数据的持续时间大于频点结束时间减去running状态数据开始时间的情况 - if ( - value[i].ts > dealArr[j].startNS && + if (value[i].ts > dealArr[j].startNS && value[i].ts < dealArr[j].startNS + dealArr[j].dur && - value[i].dur > dealArr[j].startNS + dealArr[j].dur - value[i].ts - ) { - resultList.push( - new TabPaneFreqUsageConfig( - value[i].thread, - value[i].ts, - value[i].pid, - value[i].tid, - 0, - value[i].cpu, - dealArr[j].value, - dealArr[j].startNS + dealArr[j].dur - value[i].ts, - '', - ((dealArr[j].startNS + dealArr[j].dur - value[i].ts) / sum) * 100, - 'freqdata', - -1, - undefined - ) - ); + value[i].dur > dealArr[j].startNS + dealArr[j].dur - value[i].ts) { + resultList.push(new TabPaneFreqUsageConfig(value[i].thread, value[i].ts, value[i].pid, + value[i].tid, 0, value[i].cpu, dealArr[j].value, dealArr[j].startNS + dealArr[j].dur - value[i].ts, '', + ((dealArr[j].startNS + dealArr[j].dur - value[i].ts) / sum) * 100, 'freqdata', -1, undefined)); } // running状态数据的开始时间小于频点数据开始时间，running状态数据的结束时间大于频点数据开始时间。且running状态数据在频点数据开始时间后的持续时间小于频点数据持续时间的情况 - if ( - value[i].ts < dealArr[j].startNS && + if (value[i].ts < dealArr[j].startNS && value[i].ts + value[i].dur > dealArr[j].startNS && - value[i].dur + value[i].ts - dealArr[j].startNS < dealArr[j].dur - ) { - resultList.push( - new TabPaneFreqUsageConfig( - value[i].thread, - dealArr[j].startNS, - value[i].pid, - value[i].tid, - 0, - value[i].cpu, - dealArr[j].value, - value[i].dur + value[i].ts - dealArr[j].startNS, - '', - ((value[i].dur + value[i].ts - dealArr[j].startNS) / sum) * 100, - 'freqdata', - -1, - undefined - ) - ); + value[i].dur + value[i].ts - dealArr[j].startNS < dealArr[j].dur) { + resultList.push(new TabPaneFreqUsageConfig(value[i].thread, dealArr[j].startNS, value[i].pid, + value[i].tid, 0, value[i].cpu, dealArr[j].value, value[i].dur + value[i].ts - dealArr[j].startNS, '', + ((value[i].dur + value[i].ts - dealArr[j].startNS) / sum) * 100, 'freqdata', -1, undefined )); break; } // running状态数据的开始时间小于频点数据开始时间，running状态数据的结束时间大于频点数据开始时间。且running状态数据在频点数据开始时间后的持续时间大于频点数据持续时间的情况 - if ( - value[i].ts < dealArr[j].startNS && + if (value[i].ts < dealArr[j].startNS && value[i].ts + value[i].dur > dealArr[j].startNS && - value[i].dur + value[i].ts - dealArr[j].startNS > dealArr[j].dur - ) { - resultList.push( - new TabPaneFreqUsageConfig( - value[i].thread, - dealArr[j].startNS, - value[i].pid, - value[i].tid, - 0, - value[i].cpu, - dealArr[j].value, - dealArr[j].dur, - '', - (dealArr[j].dur / sum) * 100, - 'freqdata', - -1, - undefined - ) - ); + value[i].dur + value[i].ts - dealArr[j].startNS > dealArr[j].dur) { + resultList.push(new TabPaneFreqUsageConfig( value[i].thread, dealArr[j].startNS, value[i].pid, value[i].tid, + 0, value[i].cpu, dealArr[j].value, dealArr[j].dur, '', (dealArr[j].dur / sum) * 100, 'freqdata', -1, undefined)); } // running状态数据的开始时间小于频点数据开始时间，running状态数据的持续时间小于频点数据开始时间的情况 if (value[i].ts < dealArr[j].startNS && value[i].ts + value[i].dur < dealArr[j].startNS) { - resultList.push( - new TabPaneFreqUsageConfig( - value[i].thread, - value[i].ts, - value[i].pid, - value[i].tid, - 0, - value[i].cpu, - 'unknown', - value[i].dur, - '', - (value[i].dur / sum) * 100, - 'freqdata', - -1, - undefined - ) - ); + resultList.push(new TabPaneFreqUsageConfig(value[i].thread, value[i].ts, value[i].pid, value[i].tid, + 0, value[i].cpu, 'unknown', value[i].dur, '', (value[i].dur / sum) * 100, 'freqdata', -1, undefined)); break; } } @@ -369,46 +261,44 @@ export class TabPaneFreqDataCut extends BaseElement { this.threadStatesTbl.value = []; if (threadIdValue !== '' && threadFuncName !== '') { // 根据用户输入的线程ID，方法名去查询数据库，得到对应的方法起始时间，持续时间等数据，以便作为依据进行后续数据切割 - querySearchFuncData(threadFuncName, Number(threadIdValue), this.currentSelectionParam.leftNs, rightNS).then( - (result) => { - if (result !== null && result.length > 0) { - // targetMap为全局initData的拷贝对象，dealArr数组用来存放周期切割依据数据 - let targetMap: Map> = new Map(); - let dealArr: Array<{ ts: number; dur: number }> = []; - // 新创建map对象接收传过来的实参map - resultList.forEach((item: Array, key: string) => { - targetMap.set(key, JSON.parse(JSON.stringify(item))); - }); - // 整理周期切割依据的数据 - for (let i of result) { - if (i.startTime! + recordStartNs + i.dur! < rightNS + recordStartNs) { - dealArr.push({ ts: i.startTime! + recordStartNs, dur: i.dur! }); - } + querySearchFuncData(threadFuncName, Number(threadIdValue), this.currentSelectionParam.leftNs, rightNS).then((result) => { + if (result !== null && result.length > 0) { + // targetMap为全局initData的拷贝对象，dealArr数组用来存放周期切割依据数据 + let targetMap: Map> = new Map(); + let dealArr: Array<{ts: number, dur: number}> = []; + // 新创建map对象接收传过来的实参map + resultList.forEach((item: Array, key: string) => { + targetMap.set(key, JSON.parse(JSON.stringify(item))); + }); + // 整理周期切割依据的数据 + for (let i of result) { + if (i.startTime! + recordStartNs + i.dur! < rightNS + recordStartNs) { + dealArr.push({ts: i.startTime! + recordStartNs, dur: i.dur!}); } - let cycleMap: Map> = new Map(); - let totalList: Map> = new Map(); - this.mergeSingleData(dealArr, targetMap, cycleMap, totalList); - // 拷贝线程数组，防止数据污染 - let threadArr: Array = JSON.parse(JSON.stringify(this.threadArr)); - // 拷贝进程数组，防止数据污染 - let processArr: Array = JSON.parse(JSON.stringify(this.processArr)); - // 将周期层级防止到线程层级下 - this.mergeThreadData(threadArr, cycleMap); - // 将原始数据放置到对应的线程层级下，周期数据前 - this.mergeTotalData(threadArr, this.merge(totalList)); - // 合并数据到进程层级下 - this.mergePidData(processArr, threadArr); - this.fixedDeal(processArr); - this.threadStatesTblSource = processArr; - this.threadStatesTbl!.recycleDataSource = processArr; - this.threadClick(processArr); - } else { - this.threadStatesTblSource = []; - this.threadStatesTbl!.recycleDataSource = []; } - this.threadStatesTbl!.loading = false; + let cycleMap: Map> = new Map(); + let totalList: Map> = new Map(); + this.mergeSingleData(dealArr, targetMap, cycleMap, totalList); + // 拷贝线程数组，防止数据污染 + let threadArr: Array = JSON.parse(JSON.stringify(this.threadArr)); + // 拷贝进程数组，防止数据污染 + let processArr: Array = JSON.parse(JSON.stringify(this.processArr)); + // 将周期层级防止到线程层级下 + this.mergeThreadData(threadArr, cycleMap); + // 将原始数据放置到对应的线程层级下，周期数据前 + this.mergeTotalData(threadArr, this.merge(totalList)); + // 合并数据到进程层级下 + this.mergePidData(processArr, threadArr); + this.fixedDeal(processArr); + this.threadStatesTblSource = processArr; + this.threadStatesTbl!.recycleDataSource = processArr; + this.threadClick(processArr); + } else { + this.threadStatesTblSource = []; + this.threadStatesTbl!.recycleDataSource = []; } - ); + this.threadStatesTbl!.loading = false; + }); } else { this.threadStatesTbl!.loading = false; if (threadIdValue === '') { @@ -423,7 +313,7 @@ export class TabPaneFreqDataCut extends BaseElement { * 整合Single切割方式中的频点数据与方法周期数据 */ mergeSingleData( - dealArr: Array<{ ts: number; dur: number }>, + dealArr: Array<{ts: number, dur: number}>, targetMap: Map>, cycleMap: Map>, totalList: Map> @@ -440,25 +330,10 @@ export class TabPaneFreqDataCut extends BaseElement { const countMutiple: number = 1000000; const MIN_NUM: number = 3; cpuMap.set(key, new Array()); - cycleMap - .get(key) - ?.push( - new TabPaneFreqUsageConfig( - 'cycle' + (i + 1) + '—' + value[0].thread, - ((dealArr[i].ts - timeDur) / countMutiple).toFixed(MIN_NUM), - key.split('_')[0], - key.split('_')[1], - 0, - '', - '', - 0, - (dealArr[i].dur / countMutiple).toFixed(MIN_NUM), - 0, - 'cycle', - i + 1, - [] - ) - ); + cycleMap.get(key)?.push( + new TabPaneFreqUsageConfig('cycle' + (i + 1) + '—' + value[0].thread, + ((dealArr[i].ts - timeDur) / countMutiple).toFixed(MIN_NUM), key.split('_')[0], key.split('_')[1], + 0, '', '', 0, (dealArr[i].dur / countMutiple).toFixed(MIN_NUM), 0, 'cycle', i + 1, [] )); this.dismantlingSingle( value, dealArr[i], @@ -467,7 +342,7 @@ export class TabPaneFreqDataCut extends BaseElement { key: key, countMutiple: countMutiple, cpuArr, - cpuMap, + cpuMap }, resList, totalList @@ -489,18 +364,11 @@ export class TabPaneFreqDataCut extends BaseElement { * @param totalList total数组 */ dismantlingSingle( - value: Array, - funData: { ts: number; dur: number }, - constant: { - i: number; - key: string; - countMutiple: number; - cpuArr: Array; - cpuMap: Map>; - }, + value: Array, funData: {ts: number, dur: number}, + constant: {i: number, key: string, countMutiple: number, cpuArr: Array, cpuMap: Map>}, resList: Array, totalList: Map> - ): void { + ): void{ // 判断若用户导入json文件，则替换为对应cpu下的对应频点的算力值进行算力消耗计算 for (let j = 0; j < value.length; j++) { let startTime = Number(value[j].ts); @@ -509,145 +377,48 @@ export class TabPaneFreqDataCut extends BaseElement { let consumptionMap: Map = SpSegmentationChart.freqInfoMapData.size > 0 && SpSegmentationChart.freqInfoMapData.get(Number(value[j].cpu)); // 若存在算力值，则直接取值做计算。若不存在算力值，且频点值不为unknown的情况，则取频点值做计算，若为unknown，则取0做兼容 - const consumption: number = Number( - consumptionMap && consumptionMap.get(Number(value[j].freq)) - ? consumptionMap.get(Number(value[j].freq)) - : value[j].freq === 'unknown' - ? 0 - : value[j].freq - ); + const consumption: number = Number(consumptionMap && consumptionMap.get(Number(value[j].freq)) + ? consumptionMap.get(Number(value[j].freq)) : (value[j].freq === 'unknown' ? 0 : value[j].freq)); if (!constant.cpuArr.includes(Number(value[j].cpu))) { constant.cpuArr.push(Number(value[j].cpu)); - constant.cpuMap - .get(constant.key) - ?.push( - new TabPaneFreqUsageConfig( - 'cycle' + (constant.i + 1) + '—' + value[j].thread, - '', - value[j].pid, - value[j].tid, - 0, - value[j].cpu, - '', - 0, - '', - 0, - 'cpu', - -1, - [] - ) - ); + constant.cpuMap.get(constant.key)?.push( + new TabPaneFreqUsageConfig('cycle' + (constant.i + 1) + '—' + value[j].thread, '', + value[j].pid, value[j].tid, 0, value[j].cpu, '', 0, '', 0, 'cpu', -1, [])); } // 以下为频点数据按Single周期切割数据如何取舍的判断条件，dealArr为周期切割依据，value为某一线程下的频点汇总数据 // 如果频点数据开始时间大于某一周期起始时间，小于该周期的结束时间。且频点数据结束时间小于周期结束时间的情况 - if ( - funData.ts < startTime && - funData.ts + funData.dur > startTime && - funData.ts + funData.dur > startTime + value[j].dur - ) { - resList.push( - this.returnSingleObj( - 'cycle' + (constant.i + 1) + '—' + value[j].thread, - { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple }, - value[j], - funData, - 1 - )! - ); - totalList - .get(constant.key) - ?.push( - this.returnSingleObj( - value[j].thread, - { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple }, - value[j], - funData, - 1 - )! - ); + if (funData.ts < startTime && funData.ts + funData.dur > startTime && + funData.ts + funData.dur > startTime + value[j].dur) { + resList.push(this.returnSingleObj('cycle' + (constant.i + 1) + '—' + value[j].thread, + {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], funData, 1)!); + totalList.get(constant.key)?.push(this.returnSingleObj(value[j].thread, + {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], funData, 1)!); } // 如果频点数据开始时间大于某一周期起始时间，小于该周期的结束时间。且频点数据结束时间大于等于周期结束时间的情况 - if ( - funData.ts < startTime && - funData.ts + funData.dur > startTime && - funData.ts + funData.dur <= startTime + value[j].dur - ) { - resList.push( - this.returnSingleObj( - 'cycle' + (constant.i + 1) + '—' + value[j].thread, - { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple }, - value[j], - funData, - 2 - )! - ); - totalList - .get(constant.key) - ?.push( - this.returnSingleObj( - value[j].thread, - { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple }, - value[j], - funData, - 2 - )! - ); + if (funData.ts < startTime && funData.ts + funData.dur > startTime && + funData.ts + funData.dur <= startTime + value[j].dur) { + resList.push(this.returnSingleObj('cycle' + (constant.i + 1) + '—' + value[j].thread, + {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], funData, 2)!); + totalList.get(constant.key)?.push(this.returnSingleObj(value[j].thread, + {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], funData, 2)!); break; } // 如果频点数据开始时间小于某一周期起始时间，结束时间大于该周期的开始时间。且频点数据结束时间大于周期结束时间的情况 - if ( - funData.ts > startTime && - startTime + value[j].dur > funData.ts && - startTime + value[j].dur > funData.ts + funData.dur - ) { - resList.push( - this.returnSingleObj( - 'cycle' + (constant.i + 1) + '—' + value[j].thread, - { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple }, - value[j], - funData, - 3 - )! - ); - totalList - .get(constant.key) - ?.push( - this.returnSingleObj( - value[j].thread, - { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple }, - value[j], - funData, - 3 - )! - ); + if (funData.ts > startTime && startTime + value[j].dur > funData.ts && + startTime + value[j].dur > funData.ts + funData.dur) { + resList.push(this.returnSingleObj('cycle' + (constant.i + 1) + '—' + value[j].thread, + {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], funData, 3)!); + totalList.get(constant.key)?.push(this.returnSingleObj(value[j].thread, + {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], funData, 3)!); break; } // 如果频点数据开始时间小于某一周期起始时间，结束时间大于该周期的开始时间。且频点数据结束时间小于等于周期结束时间的情况 - if ( - funData.ts > startTime && - startTime + value[j].dur > funData.ts && - startTime + value[j].dur <= funData.ts + funData.dur - ) { - resList.push( - this.returnSingleObj( - 'cycle' + (constant.i + 1) + '—' + value[j].thread, - { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple }, - value[j], - funData, - 4 - )! - ); - totalList - .get(constant.key) - ?.push( - this.returnSingleObj( - value[j].thread, - { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple }, - value[j], - funData, - 4 - )! - ); + if (funData.ts > startTime && startTime + value[j].dur > funData.ts && + startTime + value[j].dur <= funData.ts + funData.dur) { + resList.push(this.returnSingleObj('cycle' + (constant.i + 1) + '—' + value[j].thread, + {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], funData, 4)!); + totalList.get(constant.key)?.push(this.returnSingleObj(value[j].thread, + {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], funData, 4)!); } } } @@ -662,76 +433,28 @@ export class TabPaneFreqDataCut extends BaseElement { */ returnSingleObj( str: string, - arg: { i: number; percent: number; startTime: number; consumption: number; countMutiple: number }, + arg: {i: number, percent: number, startTime: number, consumption: number, countMutiple: number}, value: TabPaneFreqUsageConfig, - funData: { ts: number; dur: number }, + funData: {ts: number, dur: number}, flag: number - ): TabPaneFreqUsageConfig | undefined { + ): TabPaneFreqUsageConfig | undefined{ switch (flag) { case 1: - return new TabPaneFreqUsageConfig( - str, - '', - value.pid, - value.tid, - (arg.consumption * value.dur) / arg.countMutiple, - value.cpu, - value.freq, - value.dur, - '', - arg.percent, - 'freqdata', - arg.i, - undefined - ); + return new TabPaneFreqUsageConfig(str, '', value.pid, value.tid, (arg.consumption * value.dur) / arg.countMutiple, + value.cpu, value.freq, value.dur, '', arg.percent, 'freqdata', arg.i, undefined); case 2: - return new TabPaneFreqUsageConfig( - str, - '', - value.pid, - value.tid, - ((funData.ts + funData.dur - arg.startTime) * arg.consumption) / arg.countMutiple, - value.cpu, - value.freq, - funData.ts + funData.dur - arg.startTime, - '', - ((funData.ts + funData.dur - arg.startTime) / value.dur) * arg.percent, - 'freqdata', - arg.i, - undefined - ); + return new TabPaneFreqUsageConfig(str,'', value.pid, value.tid, ((funData.ts + funData.dur - arg.startTime) + * arg.consumption) / arg.countMutiple, value.cpu, value.freq, funData.ts + funData.dur - arg.startTime, '', + ((funData.ts + funData.dur - arg.startTime) / value.dur) * arg.percent, 'freqdata', arg.i, undefined); case 3: - return new TabPaneFreqUsageConfig( - str, - '', - value.pid, - value.tid, - (funData.dur * arg.consumption) / arg.countMutiple, - value.cpu, - value.freq, - funData.dur, - '', - (funData.dur / value.dur) * arg.percent, - 'freqdata', - arg.i, - undefined - ); + return new TabPaneFreqUsageConfig(str, '', value.pid, value.tid, (funData.dur * arg.consumption) / arg.countMutiple, value.cpu, + value.freq, funData.dur, '', (funData.dur / value.dur) * arg.percent, 'freqdata', arg.i, undefined); case 4: - return new TabPaneFreqUsageConfig( - str, - '', - value.pid, - value.tid, + return new TabPaneFreqUsageConfig(str, '', value.pid, value.tid, ((arg.startTime + value.dur - funData.ts) * arg.consumption) / arg.countMutiple, - value.cpu, - value.freq, - arg.startTime + value.dur - funData.ts, - '', + value.cpu, value.freq, arg.startTime + value.dur - funData.ts, '', ((arg.startTime + value.dur - funData.ts) / value.dur) * arg.percent, - 'freqdata', - arg.i, - undefined - ); + 'freqdata', arg.i, undefined); default: break; } @@ -751,42 +474,38 @@ export class TabPaneFreqDataCut extends BaseElement { // @ts-ignore this.threadStatesTbl.value = []; if (threadIdValue !== '' && threadFuncName !== '') { - querySearchFuncData(threadFuncName, Number(threadIdValue), this.currentSelectionParam.leftNs, rightNS).then( - (res) => { - if (res !== null && res.length > 0) { - // targetMap为全局initData的拷贝对象，cutArr数组用来存放周期切割依据数据 - let targetMap: Map> = new Map(); - let cutArr: Array<{ ts: number; dur?: number }> = []; - // 新创建map对象接收传过来的实参map - resultList.forEach((item: Array, key: string) => { - targetMap.set(key, JSON.parse(JSON.stringify(item))); - }); - // 根据线程id及方法名获取的数据，处理后用作切割时间依据，时间跨度为整个方法开始时间到末个方法开始时间 - for (let i of res) { - cutArr[cutArr.length - 1] && - (cutArr[cutArr.length - 1].dur = i.startTime - ? i.startTime + recordStartNs - cutArr[cutArr.length - 1].ts - : 0); - cutArr.push({ ts: i.startTime! + recordStartNs }); - } - let cycleMap: Map> = new Map(); - let totalList: Map> = new Map(); - this.mergeLoopData(cutArr, targetMap, cycleMap, totalList); - let threadArr: Array = JSON.parse(JSON.stringify(this.threadArr)); - let processArr: Array = JSON.parse(JSON.stringify(this.processArr)); - this.mergeThreadData(threadArr, cycleMap); - this.mergeTotalData(threadArr, this.merge(totalList)); - this.mergePidData(processArr, threadArr); - this.fixedDeal(processArr); - this.threadStatesTblSource = processArr; - this.threadStatesTbl!.recycleDataSource = processArr; - this.threadClick(processArr); - } else { - this.threadStatesTblSource = []; - this.threadStatesTbl!.recycleDataSource = []; + querySearchFuncData(threadFuncName, Number(threadIdValue), this.currentSelectionParam.leftNs, rightNS).then((res) => { + if (res !== null && res.length > 0) { + // targetMap为全局initData的拷贝对象，cutArr数组用来存放周期切割依据数据 + let targetMap: Map> = new Map(); + let cutArr: Array<{ts: number, dur?: number}> = []; + // 新创建map对象接收传过来的实参map + resultList.forEach((item: Array, key: string) => { + targetMap.set(key, JSON.parse(JSON.stringify(item))); + }); + // 根据线程id及方法名获取的数据，处理后用作切割时间依据，时间跨度为整个方法开始时间到末个方法开始时间 + for (let i of res) { + cutArr[cutArr.length - 1] && (cutArr[cutArr.length - 1].dur = i.startTime ? i.startTime + + recordStartNs - cutArr[cutArr.length - 1].ts : 0); + cutArr.push({ts: i.startTime! + recordStartNs}); } + let cycleMap: Map> = new Map(); + let totalList: Map> = new Map(); + this.mergeLoopData(cutArr, targetMap, cycleMap, totalList); + let threadArr: Array = JSON.parse(JSON.stringify(this.threadArr)); + let processArr: Array = JSON.parse(JSON.stringify(this.processArr)); + this.mergeThreadData(threadArr, cycleMap); + this.mergeTotalData(threadArr, this.merge(totalList)); + this.mergePidData(processArr, threadArr); + this.fixedDeal(processArr); + this.threadStatesTblSource = processArr; + this.threadStatesTbl!.recycleDataSource = processArr; + this.threadClick(processArr); + } else { + this.threadStatesTblSource = []; + this.threadStatesTbl!.recycleDataSource = []; } - ); + }); this.threadStatesTbl!.loading = false; } else { this.threadStatesTbl!.loading = false; @@ -802,7 +521,7 @@ export class TabPaneFreqDataCut extends BaseElement { * 整合Loop切割方式中的频点数据与方法周期数据 */ mergeLoopData( - cutArr: Array<{ ts: number; dur?: number }>, + cutArr: Array<{ts: number, dur?: number}>, targetMap: Map>, cycleMap: Map>, totalList: Map> @@ -820,25 +539,9 @@ export class TabPaneFreqDataCut extends BaseElement { const MIN_NUM: number = 3; cpuMap.set(key, new Array()); // 创建周期层级数据 - cycleMap - .get(key) - ?.push( - new TabPaneFreqUsageConfig( - 'cycle' + (i + 1) + '—' + value[0].thread, - ((cutArr[i].ts - timeDur) / countMutiple).toFixed(MIN_NUM), - key.split('_')[0], - key.split('_')[1], - 0, - '', - '', - 0, - (cutArr[i].dur! / countMutiple).toFixed(MIN_NUM), - 0, - 'cycle', - i + 1, - [] - ) - ); + cycleMap.get(key)?.push(new TabPaneFreqUsageConfig('cycle' + (i + 1) + '—' + value[0].thread, + ((cutArr[i].ts - timeDur) / countMutiple).toFixed(MIN_NUM), key.split('_')[0], key.split('_')[1], 0, '', + '', 0, (cutArr[i].dur! / countMutiple).toFixed(MIN_NUM), 0, 'cycle', i + 1, [])); this.dismantlingLoop( value, cutArr, @@ -847,7 +550,7 @@ export class TabPaneFreqDataCut extends BaseElement { key: key, countMutiple: countMutiple, cpuArr, - cpuMap, + cpuMap }, resList, totalList @@ -870,18 +573,10 @@ export class TabPaneFreqDataCut extends BaseElement { * @param totalList total数组 */ dismantlingLoop( - value: Array, - cutArr: Array<{ ts: number; dur?: number }>, - constant: { - i: number; - key: string; - countMutiple: number; - cpuArr: Array; - cpuMap: Map>; - }, + value: Array, cutArr:Array<{ts: number, dur?: number}>, + constant: {i: number, key: string, countMutiple: number, cpuArr: Array, cpuMap: Map>}, resList: Array, - totalList: Map> - ): void { + totalList: Map>): void { for (let j = 0; j < value.length; j++) { // 判断若用户导入json文件，则替换为对应cpu下的对应频点的算力值进行算力消耗计算 let startTime = Number(value[j].ts); @@ -890,135 +585,46 @@ export class TabPaneFreqDataCut extends BaseElement { let consumptionMap: Map = SpSegmentationChart.freqInfoMapData.size > 0 && SpSegmentationChart.freqInfoMapData.get(Number(value[j].cpu)); // 若存在算力值，则直接取值做计算。若不存在算力值，且频点值不为unknown的情况，则取频点值做计算，若为unknown，则取0做兼容 - const consumption: number = Number( - consumptionMap && consumptionMap.get(Number(value[j].freq)) - ? consumptionMap.get(Number(value[j].freq)) - : value[j].freq === 'unknown' - ? 0 - : value[j].freq - ); + const consumption: number = Number(consumptionMap && consumptionMap.get(Number(value[j].freq)) + ? consumptionMap.get(Number(value[j].freq)) : (value[j].freq === 'unknown' ? 0 : value[j].freq)); if (!constant.cpuArr.includes(Number(value[j].cpu))) { constant.cpuArr.push(Number(value[j].cpu)); // 创建cpu层级数据，以便后续生成树结构 - constant.cpuMap - .get(constant.key) - ?.push( - new TabPaneFreqUsageConfig( - 'cycle' + (constant.i + 1) + '—' + value[j].thread, - '', - value[j].pid, - value[j].tid, - 0, - value[j].cpu, - '', - 0, - '', - 0, - 'cpu', - -1, - [] - ) - ); + constant.cpuMap.get(constant.key)?.push(new TabPaneFreqUsageConfig('cycle' + (constant.i + 1) + '—' + value[j].thread, + '', value[j].pid, value[j].tid, 0, value[j].cpu, '', 0, '', 0, 'cpu', -1, [])); } // 以下为频点数据按Loop周期切割数据如何取舍的判断条件，cutArr为周期切割依据，value为某一线程下的频点汇总数据 // 如果频点数据开始时间大于某一周期起始时间，且结束时间小于等于下一同名方法开始时间的情况 if (startTime >= cutArr[constant.i].ts && startTime + value[j].dur <= cutArr[constant.i + 1].ts) { - resList.push( - this.returnLoopObj( - 'cycle' + (constant.i + 1) + '—' + value[j].thread, - { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple }, - value[j], - cutArr, - 1 - )! - ); - totalList - .get(constant.key) - ?.push( - this.returnLoopObj( - value[j].thread, - { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple }, - value[j], - cutArr, - 1 - )! - ); + resList.push(this.returnLoopObj('cycle' + (constant.i + 1) + '—' + value[j].thread, + {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], cutArr, 1)!); + totalList.get(constant.key)?.push(this.returnLoopObj(value[j].thread, + {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], cutArr, 1)!); } // 如果频点数据开始时间大于某一周期起始时间，且结束时间大于下一同名方法开始时间的情况 if (startTime >= cutArr[constant.i].ts && startTime + value[j].dur > cutArr[constant.i + 1].ts) { if (cutArr[constant.i + 1].ts - startTime > 0) { - resList.push( - this.returnLoopObj( - 'cycle' + (constant.i + 1) + '—' + value[j].thread, - { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple }, - value[j], - cutArr, - 2 - )! - ); - totalList - .get(constant.key) - ?.push( - this.returnLoopObj( - value[j].thread, - { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple }, - value[j], - cutArr, - 2 - )! - ); + resList.push(this.returnLoopObj('cycle' + (constant.i + 1) + '—' + value[j].thread, + {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], cutArr, 2)!); + totalList.get(constant.key)?.push(this.returnLoopObj(value[j].thread, + {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], cutArr, 2)!); break; } } // 如果频点数据开始时间小于某一周期起始时间，且结束时间大于下一同名方法开始时间的情况 if (startTime < cutArr[constant.i].ts && startTime + value[j].dur > cutArr[constant.i + 1].ts) { - resList.push( - this.returnLoopObj( - 'cycle' + (constant.i + 1) + '—' + value[j].thread, - { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple }, - value[j], - cutArr, - 3 - )! - ); - totalList - .get(constant.key) - ?.push( - this.returnLoopObj( - value[j].thread, - { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple }, - value[j], - cutArr, - 3 - )! - ); + resList.push(this.returnLoopObj('cycle' + (constant.i + 1) + '—' + value[j].thread, + {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], cutArr, 3)!); + totalList.get(constant.key)?.push(this.returnLoopObj(value[j].thread, + {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], cutArr, 3)!); } // 如果频点数据开始时间小于某一周期起始时间，结束时间大于该方法开始时间。且频点数据结束时间小于下一同名方法开始时间 - if ( - startTime < cutArr[constant.i].ts && - startTime + value[j].dur > cutArr[constant.i].ts && - startTime + value[j].dur < cutArr[constant.i + 1].ts - ) { - resList.push( - this.returnLoopObj( - 'cycle' + (constant.i + 1) + '—' + value[j].thread, - { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple }, - value[j], - cutArr, - 4 - )! - ); - totalList - .get(constant.key) - ?.push( - this.returnLoopObj( - value[j].thread, - { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple }, - value[j], - cutArr, - 4 - )! - ); + if (startTime < cutArr[constant.i].ts && + startTime + value[j].dur > cutArr[constant.i].ts && startTime + value[j].dur < cutArr[constant.i + 1].ts) { + resList.push(this.returnLoopObj('cycle' + (constant.i + 1) + '—' + value[j].thread, + {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], cutArr, 4)!); + totalList.get(constant.key)?.push(this.returnLoopObj(value[j].thread, + {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], cutArr, 4)!); } } } @@ -1033,76 +639,30 @@ export class TabPaneFreqDataCut extends BaseElement { */ returnLoopObj( str: string, - arg: { i: number; percent: number; startTime: number; consumption: number; countMutiple: number }, + arg: {i: number, percent: number, startTime: number, consumption: number, countMutiple: number}, value: TabPaneFreqUsageConfig, - cutArr: Array<{ ts: number; dur?: number }>, + cutArr: Array<{ts: number, dur?: number}>, flag: number - ): TabPaneFreqUsageConfig | undefined { + ): TabPaneFreqUsageConfig | undefined{ switch (flag) { case 1: - return new TabPaneFreqUsageConfig( - str, - '', - value.pid, - value.tid, - (arg.consumption * value.dur) / arg.countMutiple, - value.cpu, - value.freq, - value.dur, - '', - value.percent, - 'freqdata', - arg.i, - undefined - ); + return new TabPaneFreqUsageConfig(str, '', value.pid, + value.tid, (arg.consumption * value.dur) / arg.countMutiple, value.cpu, value.freq, + value.dur, '', value.percent, 'freqdata', arg.i, undefined); case 2: - return new TabPaneFreqUsageConfig( - str, - '', - value.pid, - value.tid, - (arg.consumption * (cutArr[arg.i + 1].ts - arg.startTime)) / arg.countMutiple, - value.cpu, - value.freq, - cutArr[arg.i + 1].ts - arg.startTime, - '', - arg.percent * ((cutArr[arg.i + 1].ts - arg.startTime) / value.dur), - 'freqdata', - arg.i, - undefined - ); + return new TabPaneFreqUsageConfig(str, '', value.pid, value.tid, + (arg.consumption * (cutArr[arg.i + 1].ts - arg.startTime)) / arg.countMutiple, value.cpu, value.freq, + cutArr[arg.i + 1].ts - arg.startTime, '', arg.percent * ((cutArr[arg.i + 1].ts - arg.startTime) / value.dur), + 'freqdata', arg.i, undefined); case 3: - return new TabPaneFreqUsageConfig( - str, - '', - value.pid, - value.tid, - (arg.consumption * (cutArr[arg.i + 1].ts - cutArr[arg.i].ts)) / arg.countMutiple, - value.cpu, - value.freq, - cutArr[arg.i + 1].ts - cutArr[arg.i].ts, - '', - arg.percent * ((cutArr[arg.i + 1].ts - cutArr[arg.i].ts) / value.dur), - 'freqdata', - arg.i, - undefined - ); + return new TabPaneFreqUsageConfig(str, '', value.pid, value.tid, + (arg.consumption * (cutArr[arg.i + 1].ts - cutArr[arg.i].ts)) / arg.countMutiple, value.cpu, value.freq, + cutArr[arg.i + 1].ts - cutArr[arg.i].ts, '', arg.percent * ((cutArr[arg.i + 1].ts - cutArr[arg.i].ts) / value.dur), + 'freqdata', arg.i, undefined); case 4: - return new TabPaneFreqUsageConfig( - str, - '', - value.pid, - value.tid, - (arg.consumption * (value.dur + arg.startTime - cutArr[arg.i].ts)) / arg.countMutiple, - value.cpu, - value.freq, - value.dur + arg.startTime - cutArr[arg.i].ts, - '', - arg.percent * ((value.dur + arg.startTime - cutArr[arg.i].ts) / value.dur), - 'freqdata', - arg.i, - undefined - ); + return new TabPaneFreqUsageConfig(str, '', value.pid, value.tid, (arg.consumption * (value.dur + arg.startTime - cutArr[arg.i].ts)) + / arg.countMutiple, value.cpu, value.freq, value.dur + arg.startTime - cutArr[arg.i].ts, '', arg.percent + * ((value.dur + arg.startTime - cutArr[arg.i].ts) / value.dur), 'freqdata', arg.i, undefined); default: break; } @@ -1115,7 +675,9 @@ export class TabPaneFreqDataCut extends BaseElement { cycleMap: Map> ): void { for (let i = 0; i < threadArr.length; i++) { - let cycleMapData: Array = cycleMap.get(threadArr[i].pid + '_' + threadArr[i].tid)!; + let cycleMapData: Array = cycleMap.get( + threadArr[i].pid + '_' + threadArr[i].tid + )!; for (let j = 0; j < cycleMapData!.length; j++) { threadArr[i].children?.push(cycleMapData![j]); threadArr[i].count += cycleMapData![j].count; @@ -1128,7 +690,10 @@ export class TabPaneFreqDataCut extends BaseElement { /** * 切割后整合好的线程级频点数据放置到对应的进程 */ - mergePidData(pidArr: Array, threadArr: Array): void { + mergePidData( + pidArr: Array, + threadArr: Array + ): void { for (let i = 0; i < pidArr.length; i++) { for (let j = 0; j < threadArr.length; j++) { if (pidArr[i].pid === threadArr[j].pid) { @@ -1166,7 +731,10 @@ export class TabPaneFreqDataCut extends BaseElement { /** * 将cpu层级数据放到对应的周期层级下 */ - mergeCycleData(obj: TabPaneFreqUsageConfig, arr: Array): void { + mergeCycleData( + obj: TabPaneFreqUsageConfig, + arr: Array + ): void { for (let i = 0; i < arr!.length; i++) { if (arr![i].count === 0 && arr![i].dur === 0) { continue; @@ -1181,7 +749,10 @@ export class TabPaneFreqDataCut extends BaseElement { /** * 将切割好的不区分周期的数据作为total数据放到对应的线程层级下，周期数据前 */ - mergeTotalData(threadArr: Array, totalData: Array): void { + mergeTotalData( + threadArr: Array, + totalData: Array + ): void { for (let i = 0; i < threadArr.length; i++) { for (let j = 0; j < totalData.length; j++) { if ( @@ -1198,11 +769,17 @@ export class TabPaneFreqDataCut extends BaseElement { /** * 整理排序相同周期下的数据 */ - mergeCpuData(cpuArray: Array, resList: Array): void { + mergeCpuData( + cpuArray: Array, + resList: Array + ): void { // 以算力消耗降序排列 resList.sort((a, b) => b.count - a.count); // 以cpu升序排列 - cpuArray.sort((a: TabPaneFreqUsageConfig, b: TabPaneFreqUsageConfig) => Number(a.cpu) - Number(b.cpu)); + cpuArray.sort(( + a: TabPaneFreqUsageConfig, + b: TabPaneFreqUsageConfig + ) => Number(a.cpu) - Number(b.cpu)); cpuArray.forEach((item: TabPaneFreqUsageConfig) => { for (let s = 0; s < resList.length; s++) { if (item.cpu === resList[s].cpu) { @@ -1218,11 +795,15 @@ export class TabPaneFreqDataCut extends BaseElement { /** * 切割好的不区分周期的数据，以相同cpu相同频点的进行整合 */ - merge(totalList: Map>): Array { + merge( + totalList: Map> + ): Array { let result: Array = new Array(); totalList.forEach((value: Array, key: string) => { let countNum = result.push( - new TabPaneFreqUsageConfig('', '', key.split('_')[0], key.split('_')[1], 0, '', '', 0, '', 0, 'cycle', 0, []) + new TabPaneFreqUsageConfig('', '', key.split('_')[0], key.split('_')[1], + 0, '', '', 0, '', 0, 'cycle', 0, [] + ) ); let cpuArr: Array = []; let flagArr: Array = []; @@ -1230,20 +811,8 @@ export class TabPaneFreqDataCut extends BaseElement { if (!flagArr.includes(value[i].cpu)) { flagArr.push(value[i].cpu); let flag = cpuArr.push( - new TabPaneFreqUsageConfig( - value[i].thread, - '', - value[i].pid, - value[i].tid, - 0, - value[i].cpu, - '', - 0, - '', - 0, - 'cpu', - -1, - [] + new TabPaneFreqUsageConfig(value[i].thread, '', value[i].pid, value[i].tid, + 0, value[i].cpu, '', 0, '', 0, 'cpu', -1, [] ) ); result[countNum - 1].children?.push(cpuArr[flag - 1]); @@ -1259,9 +828,7 @@ export class TabPaneFreqDataCut extends BaseElement { } } } - result[countNum - 1].children?.sort( - (a: TabPaneFreqUsageConfig, b: TabPaneFreqUsageConfig) => Number(a.cpu) - Number(b.cpu) - ); + result[countNum - 1].children?.sort((a: TabPaneFreqUsageConfig, b: TabPaneFreqUsageConfig) => Number(a.cpu) - Number(b.cpu)); for (let i = 0; i < cpuArr.length; i++) { for (let j = 0; j < value.length; j++) { if (cpuArr[i].cpu === value[j].cpu) { @@ -1334,7 +901,7 @@ export class TabPaneFreqDataCut extends BaseElement { this.threadStatesTbl!.setStatus(item.children, false); } } - this.threadStatesTbl!.recycleDs = this.threadStatesTbl!.meauseTreeRowElement(data, RedrawTreeForm.Retract); + this.threadStatesTbl!.recycleDs = this.threadStatesTbl!.meauseTreeRowElement( data, RedrawTreeForm.Retract); } else if (label.includes('Cycle') && i === 2) { for (let item of data) { // @ts-ignore @@ -1396,12 +963,11 @@ export class TabPaneFreqDataCut extends BaseElement { // @ts-ignore this.shadowRoot?.querySelector('#cycleQuery')!.style.display = 'block'; // @ts-ignore - let freq: Map = - SpSegmentationChart.freqInfoMapData.size > 0 && + let freq: Map = SpSegmentationChart.freqInfoMapData.size > 0 && SpSegmentationChart.freqInfoMapData.get(SpSegmentationChart.freqInfoMapData.size - 1); // @ts-ignore - let yAxis: number = - freq && freq.get(Number(maxFreqValue) * 1000) ? freq.get(Number(maxFreqValue) * 1000) : Number(maxFreqValue); + let yAxis: number = freq && freq.get(Number(maxFreqValue) * 1000) + ? freq.get(Number(maxFreqValue) * 1000) : Number(maxFreqValue); let xAxis: number = (yAxis * 1000) / Number(maxHzValue); // 需要做筛选时，会利用下面的cycleA、cycleB数组 let scatterArr: Array> = []; @@ -1441,14 +1007,8 @@ export class TabPaneFreqDataCut extends BaseElement { /** * 配置散点图 */ - setConfig( - maxHz: number, - str: string, - scatterArr: Array>, - yAxis: number, - xAxis: number, - cycleA: Array>, - cycleB: Array> + setConfig(maxHz: number, str: string, scatterArr: Array>, + yAxis: number, xAxis: number, cycleA: Array>, cycleB: Array> ): void { const DELTA: number = 5; this.statisticsScatter!.config = { @@ -1491,7 +1051,7 @@ export class TabPaneFreqDataCut extends BaseElement { // 散点图title title: str, colorPoolText: (): Array => ['Total', 'CycleA', 'CycleB'], - tip: (data: { c: Array }): string => { + tip: (data: {c: Array}): string => { return `
Cycle: ${data.c[2]};
@@ -1520,17 +1080,10 @@ export class TabPaneFreqDataCut extends BaseElement { str = evt.detail.thread; this.render(scatterData, str, []); } - - if ( - // @ts-ignore - evt.detail.flag === 'cycle' && - // @ts-ignore - evt.detail.pid === scatterData[evt.detail.id - 1].pid && - // @ts-ignore - evt.detail.tid === scatterData[evt.detail.id - 1].tid && + // @ts-ignore + if (evt.detail.flag === 'cycle' && evt.detail.pid === scatterData[evt.detail.id - 1].pid // @ts-ignore - evt.detail.id > 0 - ) { + && evt.detail.tid === scatterData[evt.detail.id - 1].tid && evt.detail.id > 0) { // @ts-ignore SpSegmentationChart.tabHover('CPU-FREQ', true, evt.detail.id - 1); } @@ -1545,12 +1098,7 @@ export class TabPaneFreqDataCut extends BaseElement { let cycleBStartValue = this.shadowRoot?.querySelector('#cycle-b-start-range')!.value; // @ts-ignore let cycleBEndValue = this.shadowRoot?.querySelector('#cycle-b-end-range')!.value; - let queryCycleScatter = [ - Number(cycleAStartValue), - Number(cycleAEndValue), - Number(cycleBStartValue), - Number(cycleBEndValue), - ]; + let queryCycleScatter = [Number(cycleAStartValue), Number(cycleAEndValue), Number(cycleBStartValue), Number(cycleBEndValue)]; this.render(scatterData, str, queryCycleScatter); }); } @@ -1561,23 +1109,27 @@ export class TabPaneFreqDataCut extends BaseElement { // 绑定single、loop按钮点击事件 this.threadStatesDIV = this.shadowRoot?.querySelector('#dataCut'); this.threadStatesDIV?.children[2].children[0].addEventListener('click', (e) => { - this.threadStatesTbl!.loading = true; - // @ts-ignore - this.dataSingleCut(this.threadStatesDIV?.children[0]!, this.threadStatesDIV?.children[1]!, this.initData); - }); + this.threadStatesTbl!.loading = true; + // @ts-ignore + this.dataSingleCut(this.threadStatesDIV?.children[0]!, this.threadStatesDIV?.children[1]!, this.initData); + } + ); this.threadStatesDIV?.children[2].children[1].addEventListener('click', (e) => { - this.threadStatesTbl!.loading = true; - // @ts-ignore - this.dataLoopCut(this.threadStatesDIV?.children[0]!, this.threadStatesDIV?.children[1]!, this.initData); - }); + this.threadStatesTbl!.loading = true; + // @ts-ignore + this.dataLoopCut(this.threadStatesDIV?.children[0]!, this.threadStatesDIV?.children[1]!, this.initData); + } + ); this.threadStatesDIV?.children[0].addEventListener('focus', (e) => { - // @ts-ignore - this.threadStatesDIV?.children[0]!.style.border = '1px solid rgb(151,151,151)'; - }); + // @ts-ignore + this.threadStatesDIV?.children[0]!.style.border = '1px solid rgb(151,151,151)'; + } + ); this.threadStatesDIV?.children[1].addEventListener('focus', (e) => { - // @ts-ignore - this.threadStatesDIV?.children[1]!.style.border = '1px solid rgb(151,151,151)'; - }); + // @ts-ignore + this.threadStatesDIV?.children[1]!.style.border = '1px solid rgb(151,151,151)'; + } + ); this.shadowRoot?.querySelector('#maxFreq')?.addEventListener('focus', (e) => { // @ts-ignore this.shadowRoot?.querySelector('#maxFreq')!.style.border = '1px solid rgb(151,151,151)'; @@ -1592,8 +1144,7 @@ export class TabPaneFreqDataCut extends BaseElement { resizeObserver(this.parentElement!, this.threadStatesTbl!); } initHtml(): string { - return ( - ` + return ` - ` + - this.htmlUp() + - this.htmlDown() - ); + ` + this.htmlUp() + this.htmlDown(); } htmlUp(): string { return ` diff --git a/ide/src/trace/component/trace/sheet/frequsage/TabPaneFreqUsage.ts b/ide/src/trace/component/trace/sheet/frequsage/TabPaneFreqUsage.ts index 3d57edee..a4847f09 100644 --- a/ide/src/trace/component/trace/sheet/frequsage/TabPaneFreqUsage.ts +++ b/ide/src/trace/component/trace/sheet/frequsage/TabPaneFreqUsage.ts @@ -22,13 +22,17 @@ import { queryCpuFreqUsageData, queryCpuFreqFilterId } from '../../../../databas import { Utils } from '../../base/Utils'; import { resizeObserver } from '../SheetUtils'; import { SpSegmentationChart } from '../../../chart/SpSegmentationChart'; -import { type CpuFreqData, type RunningFreqData, type RunningData, type CpuFreqTd } from './TabPaneFreqUsageConfig'; +import { + type CpuFreqData, + type RunningFreqData, + type RunningData, + type CpuFreqTd, +} from './TabPaneFreqUsageConfig'; @element('tabpane-frequsage') export class TabPaneFreqUsage extends BaseElement { private threadStatesTbl: LitTable | null | undefined; private currentSelectionParam: SelectionParam | undefined; - private result: Array = []; set data(threadStatesParam: SelectionParam) { if (this.currentSelectionParam === threadStatesParam) { @@ -39,7 +43,9 @@ export class TabPaneFreqUsage extends BaseElement { this.threadStatesTbl!.recycleDataSource = []; // @ts-ignore this.threadStatesTbl.value = []; - this.result = []; + this.init(threadStatesParam); + } + init(threadStatesParam: SelectionParam): void { this.queryAllData(threadStatesParam); } async queryAllData(threadStatesParam: SelectionParam): Promise { @@ -71,86 +77,77 @@ export class TabPaneFreqUsage extends BaseElement { const LEFT_TIME: number = threadStatesParam.leftNs + threadStatesParam.recordStartNs; const RIGHT_TIME: number = threadStatesParam.rightNs + threadStatesParam.recordStartNs; let resultArr: Array = orgnazitionMap(runningResult, cpuFreqData, LEFT_TIME, RIGHT_TIME); - // 递归拿出来最底层的数据，并以进程层级的数据作为分割 - this.recursion(resultArr); - this.result = JSON.parse(JSON.stringify(this.result)); - mergeTotal(resultArr, fixTotal(this.result)); this.fixedDeal(resultArr); this.threadClick(resultArr); this.threadStatesTbl!.recycleDataSource = resultArr; this.threadStatesTbl!.loading = false; } - + /** * 递归整理数据小数位 */ fixedDeal(arr: Array): void { - if (arr == undefined) { - return; - } - const TIME_MUTIPLE: number = 1000000; - // KHz->MHz * ns->ms - const CONS_MUTIPLE: number = 1000000000; - const FREQ_MUTIPLE: number = 1000; - const MIN_PERCENT: number = 2; - const MIN_FREQ: number = 3; - for (let i = 0; i < arr.length; i++) { - let trackId: number; - // 若存在空位元素则进行删除处理 - if (arr[i] === undefined) { - arr.splice(i, 1); - i--; - continue; - } - if (arr[i].thread?.indexOf('P') !== -1) { - trackId = Number(arr[i].thread?.slice(1)!); - arr[i].thread = - Utils.PROCESS_MAP.get(trackId) === null - ? 'Process ' + trackId - : Utils.PROCESS_MAP.get(trackId)! + ' ' + trackId; - } else if (arr[i].thread === 'summary data') { - } else { - trackId = Number(arr[i].thread!.split('_')[1]); - arr[i].thread = - Utils.THREAD_MAP.get(trackId) === null ? 'Thread ' + trackId : Utils.THREAD_MAP.get(trackId)! + ' ' + trackId; + if (arr == undefined) { + return; } - if (arr[i].cpu < 0) { - // @ts-ignore - arr[i].cpu = ''; - } - // @ts-ignore - if (arr[i].frequency < 0) { - arr[i].frequency = ''; - } - // @ts-ignore - arr[i].percent = arr[i].percent.toFixed(MIN_PERCENT); - // @ts-ignore - arr[i].dur = (arr[i].dur / TIME_MUTIPLE).toFixed(MIN_FREQ); - // @ts-ignore - arr[i].consumption = (arr[i].consumption / CONS_MUTIPLE).toFixed(MIN_FREQ); - if (arr[i].frequency !== '') { - if (arr[i].frequency === 'unknown') { - arr[i].frequency = 'unknown'; + const TIME_MUTIPLE: number = 1000000; + // KHz->MHz * ns->ms + const CONS_MUTIPLE: number = 1000000000; + const FREQ_MUTIPLE: number = 1000; + const MIN_PERCENT: number = 2; + const MIN_FREQ: number = 3; + for (let i = 0; i < arr.length; i++) { + let str: number; + if (arr[i].thread?.indexOf('P') !== -1) { + str = Number(arr[i].thread?.slice(1)!); + arr[i].thread = Utils.PROCESS_MAP.get(str) === null ? 'Process ' + str : Utils.PROCESS_MAP.get(str)! + ' ' + str; } else { - arr[i].frequency = Number(arr[i].frequency) / FREQ_MUTIPLE; + str = Number(arr[i].thread!.split('_')[1]); + arr[i].thread = Utils.THREAD_MAP.get(str) === null ? 'Thread ' + str : Utils.THREAD_MAP.get(str)! + ' ' + str; + } + if (arr[i].cpu < 0 ) { + // @ts-ignore + arr[i].cpu = ''; } + // @ts-ignore + if (arr[i].frequency < 0 ) { + arr[i].frequency = ''; + } + // @ts-ignore + arr[i].percent = arr[i].percent.toFixed(MIN_PERCENT); + // @ts-ignore + arr[i].dur = (arr[i].dur / TIME_MUTIPLE).toFixed(MIN_FREQ); + // @ts-ignore + arr[i].consumption = (arr[i].consumption / CONS_MUTIPLE).toFixed(MIN_FREQ); + if (arr[i].frequency !== '') { + if (arr[i].frequency === 'unknown') { + arr[i].frequency = 'unknown'; + } else { + arr[i].frequency = Number(arr[i].frequency) / FREQ_MUTIPLE; + } + } + this.fixedDeal(arr[i].children!); } - this.fixedDeal(arr[i].children!); - } } /** * 表头点击事件 */ private threadClick(data: Array): void { - let labels = this.threadStatesTbl?.shadowRoot?.querySelector('.th > .td')!.querySelectorAll('label'); + let labels = this.threadStatesTbl?.shadowRoot + ?.querySelector('.th > .td')! + .querySelectorAll('label'); if (labels) { for (let i = 0; i < labels.length; i++) { let label = labels[i].innerHTML; labels[i].addEventListener('click', (e) => { if (label.includes('Process') && i === 0) { this.threadStatesTbl!.setStatus(data, false); - this.threadStatesTbl!.recycleDs = this.threadStatesTbl!.meauseTreeRowElement(data, RedrawTreeForm.Retract); + this.threadStatesTbl!.recycleDs = + this.threadStatesTbl!.meauseTreeRowElement( + data, + RedrawTreeForm.Retract + ); } else if (label.includes('Thread') && i === 1) { for (let item of data) { // @ts-ignore @@ -159,35 +156,28 @@ export class TabPaneFreqUsage extends BaseElement { this.threadStatesTbl!.setStatus(item.children, false); } } - this.threadStatesTbl!.recycleDs = this.threadStatesTbl!.meauseTreeRowElement(data, RedrawTreeForm.Retract); + this.threadStatesTbl!.recycleDs = + this.threadStatesTbl!.meauseTreeRowElement( + data, + RedrawTreeForm.Retract + ); } else if (label.includes('CPU') && i === 2) { this.threadStatesTbl!.setStatus(data, true); - this.threadStatesTbl!.recycleDs = this.threadStatesTbl!.meauseTreeRowElement(data, RedrawTreeForm.Expand); + this.threadStatesTbl!.recycleDs = + this.threadStatesTbl!.meauseTreeRowElement( + data, + RedrawTreeForm.Expand + ); } }); } } } - /** - * - * @param arr 待整理的数组，会经过递归取到最底层的数据 - */ - recursion(arr: Array): void { - for (let idx = 0; idx < arr.length; idx++) { - if (arr[idx].cpu === -1) { - this.result.push(arr[idx]); - } - if (arr[idx].children) { - this.recursion(arr[idx].children!); - } else { - this.result.push(arr[idx]); - } - } - } - initElements(): void { - this.threadStatesTbl = this.shadowRoot?.querySelector('#tb-running-percent'); + this.threadStatesTbl = this.shadowRoot?.querySelector( + "#tb-running-percent" + ); } connectedCallback(): void { super.connectedCallback(); @@ -221,60 +211,56 @@ export class TabPaneFreqUsage extends BaseElement { } /** - * + * * @param runData 数据库查询上来的running数据，此函数会将数据整理成map结构，分组规则：'pid_tid'为键，running数据数字为值 * @returns 返回map对象及所有running数据的dur和，后续会依此计算百分比 */ function orgnazitionMap( runData: Array, - cpuFreqData: Array, - leftNs: number, + cpuFreqData: Array, + leftNs: number, rightNs: number ): Array { - let result: Map> = new Map(); - let sum: number = 0; - // 循环分组 - for (let i = 0; i < runData.length; i++) { - let mapKey: string = runData[i].pid + '_' + runData[i].tid; - // 该running数据若在map对象中不包含其'pid_tid'构成的键，则新加key-value值 - if (!result.has(mapKey)) { - result.set(mapKey, new Array()); - } - // 整理左右边界数据问题, 因为涉及多线程，所以必须放在循环里 - if (runData[i].ts < leftNs && runData[i].ts + runData[i].dur > leftNs) { - runData[i].dur = runData[i].ts + runData[i].dur - leftNs; - runData[i].ts = leftNs; - } - if (runData[i].ts + runData[i].dur > rightNs) { - runData[i].dur = rightNs - runData[i].ts; - } - // 特殊处理数据表中dur为负值的情况 - if (runData[i].dur < 0) { - runData[i].dur = 0; + let result: Map> = new Map(); + let sum: number = 0; + // 循环分组 + for (let i = 0; i < runData.length; i++) { + let mapKey: string = runData[i].pid + '_' + runData[i].tid; + // 该running数据若在map对象中不包含其'pid_tid'构成的键，则新加key-value值 + if (!result.has(mapKey)) { + result.set(mapKey, new Array()); + } + // 整理左右边界数据问题, 因为涉及多线程，所以必须放在循环里 + if (runData[i].ts < leftNs && runData[i].ts + runData[i].dur > leftNs) { + runData[i].dur = runData[i].ts + runData[i].dur - leftNs; + runData[i].ts = leftNs; + } + if (runData[i].ts + runData[i].dur > rightNs) { + runData[i].dur = rightNs - runData[i].ts; + } + // 分组整理数据 + result.get(mapKey)?.push({ + pid: runData[i].pid, + tid: runData[i].tid, + cpu: runData[i].cpu, + dur: runData[i].dur, + ts: runData[i].ts + }); + sum += runData[i].dur; } - // 分组整理数据 - result.get(mapKey)?.push({ - pid: runData[i].pid, - tid: runData[i].tid, - cpu: runData[i].cpu, - dur: runData[i].dur, - ts: runData[i].ts, - }); - sum += runData[i].dur; - } - return dealCpuFreqData(cpuFreqData, result, sum); + return dealCpuFreqData(cpuFreqData, result, sum); } /** - * + * * @param cpuFreqData cpu频点数据的数组 * @param result running数据的map对象 * @param sum running数据的时间和 * @returns 返回cpu频点数据map，'pid_tid'为键，频点算力值数据的数组为值 */ function dealCpuFreqData( - cpuFreqData: Array, - result: Map>, + cpuFreqData: Array, + result: Map>, sum: number ): Array { let runningFreqData: Map> = new Map(); @@ -283,168 +269,148 @@ function dealCpuFreqData( for (let i = 0; i < item.length; i++) { for (let j = 0; j < cpuFreqData.length; j++) { if (item[i].cpu == cpuFreqData[j].cpu) { - let flag: number; - // 当running状态数据的开始时间大于频点数据开始时间,小于频点结束时间。且running数据的持续时间小于频点结束时间减去running数据开始时间的差值的情况 - if ( - item[i].ts > cpuFreqData[j].ts && - item[i].ts < cpuFreqData[j].ts + cpuFreqData[j].dur && - item[i].dur < cpuFreqData[j].ts + cpuFreqData[j].dur - item[i].ts - ) { - resultList.push(returnObj(item[i], cpuFreqData[j], sum, (flag = 1))!); - item.splice(i, 1); - i--; - break; - } - if ( - item[i].ts > cpuFreqData[j].ts && - item[i].ts < cpuFreqData[j].ts + cpuFreqData[j].dur && - item[i].dur >= cpuFreqData[j].ts + cpuFreqData[j].dur - item[i].ts - ) { - // 当running状态数据的开始时间大于频点数据开始时间,小于频点结束时间。且running数据的持续时间大于等于频点结束时间减去running数据开始时间的差值的情况 - resultList.push(returnObj(item[i], cpuFreqData[j], sum, (flag = 2))!); - } - // 当running状态数据的开始时间小于等于频点数据开始时间,结束时间大于频点开始时间。且running数据的持续时间减去频点数据开始时间的差值小于频点数据持续时间的情况 - if ( - item[i].ts <= cpuFreqData[j].ts && - item[i].ts + item[i].dur > cpuFreqData[j].ts && - item[i].dur + item[i].ts - cpuFreqData[j].ts < cpuFreqData[j].dur - ) { - resultList.push(returnObj(item[i], cpuFreqData[j], sum, (flag = 3))!); - item.splice(i, 1); - i--; - break; - } - if ( - item[i].ts <= cpuFreqData[j].ts && - item[i].ts + item[i].dur > cpuFreqData[j].ts && - item[i].dur + item[i].ts - cpuFreqData[j].ts >= cpuFreqData[j].dur - ) { - // 当running状态数据的开始时间小于等于频点数据开始时间,结束时间大于频点开始时间。且running数据的持续时间减去频点数据开始时间的差值大于等于频点数据持续时间的情况 - resultList.push(returnObj(item[i], cpuFreqData[j], sum, (flag = 4))!); - } - if (item[i].ts <= cpuFreqData[j].ts && item[i].ts + item[i].dur <= cpuFreqData[j].ts) { - // 当running状态数据的开始时间小于等于频点数据开始时间,结束时间小于等于频点开始时间的情况 - resultList.push(returnObj(item[i], cpuFreqData[j], sum, (flag = 5))!); - item.splice(i, 1); - i--; - break; + let flag: number; + // 当running状态数据的开始时间大于频点数据开始时间,小于频点结束时间。且running数据的持续时间小于频点结束时间减去running数据开始时间的差值的情况 + if (item[i].ts > cpuFreqData[j].ts && item[i].ts < cpuFreqData[j].ts + cpuFreqData[j].dur && + item[i].dur < cpuFreqData[j].ts + cpuFreqData[j].dur - item[i].ts) { + resultList.push(returnObj(item[i], cpuFreqData[j], sum, flag = 1)!); + item.splice(i, 1); + i--; + break; + } + if (item[i].ts > cpuFreqData[j].ts && item[i].ts < cpuFreqData[j].ts + cpuFreqData[j].dur && + item[i].dur >= cpuFreqData[j].ts + cpuFreqData[j].dur - item[i].ts) { + // 当running状态数据的开始时间大于频点数据开始时间,小于频点结束时间。且running数据的持续时间大于等于频点结束时间减去running数据开始时间的差值的情况 + resultList.push(returnObj(item[i], cpuFreqData[j], sum, flag = 2)!); + } + // 当running状态数据的开始时间小于等于频点数据开始时间,结束时间大于频点开始时间。且running数据的持续时间减去频点数据开始时间的差值小于频点数据持续时间的情况 + if (item[i].ts <= cpuFreqData[j].ts && (item[i].ts + item[i].dur) > cpuFreqData[j].ts && + item[i].dur + item[i].ts - cpuFreqData[j].ts < cpuFreqData[j].dur) { + resultList.push(returnObj(item[i], cpuFreqData[j], sum, flag = 3)!); + item.splice(i, 1); + i--; + break; + } + if (item[i].ts <= cpuFreqData[j].ts && (item[i].ts + item[i].dur) > cpuFreqData[j].ts && + item[i].dur + item[i].ts - cpuFreqData[j].ts >= cpuFreqData[j].dur) { + // 当running状态数据的开始时间小于等于频点数据开始时间,结束时间大于频点开始时间。且running数据的持续时间减去频点数据开始时间的差值大于等于频点数据持续时间的情况 + resultList.push(returnObj(item[i], cpuFreqData[j], sum, flag = 4)!); + } + if (item[i].ts <= cpuFreqData[j].ts && (item[i].ts + item[i].dur) <= cpuFreqData[j].ts) { + // 当running状态数据的开始时间小于等于频点数据开始时间,结束时间小于等于频点开始时间的情况 + resultList.push(returnObj(item[i], cpuFreqData[j], sum, flag = 5)!); + item.splice(i, 1); + i--; + break; } - } + } } } runningFreqData.set(key, mergeSameData(resultList)); }); - return dealTree(runningFreqData); + return dealTree(runningFreqData);; } /** - * + * * @param item running数据 * @param cpuFreqData 频点数据 * @param sum running总和 * @param flag 标志位，根据不同值返回不同结果 * @returns 返回新的对象 */ -function returnObj( - item: RunningData, - cpuFreqData: CpuFreqData, - sum: number, - flag: number -): RunningFreqData | undefined { +function returnObj(item: RunningData, cpuFreqData: CpuFreqData, sum: number, flag: number): RunningFreqData | undefined { const PERCENT: number = 100; - const consumption: number = ( - SpSegmentationChart.freqInfoMapData.size > 0 - ? SpSegmentationChart.freqInfoMapData.get(item.cpu)?.get(cpuFreqData.value) - : cpuFreqData.value - )!; + const consumption: number = (SpSegmentationChart.freqInfoMapData.size > 0 + ? SpSegmentationChart.freqInfoMapData.get(item.cpu)?.get(cpuFreqData.value) : cpuFreqData.value)!; switch (flag) { case 1: return { - thread: item.pid + '_' + item.tid, - consumption: consumption * item.dur, - cpu: item.cpu, - frequency: cpuFreqData.value, - dur: item.dur, - percent: (item.dur / sum) * PERCENT, + 'thread': item.pid + '_' + item.tid, + 'consumption': (consumption * item.dur), + 'cpu': item.cpu, + 'frequency': cpuFreqData.value, + 'dur': item.dur, + 'percent': item.dur / sum * PERCENT }; case 2: return { - thread: item.pid + '_' + item.tid, - consumption: consumption * (cpuFreqData.ts + cpuFreqData.dur - item.ts), - cpu: item.cpu, - frequency: cpuFreqData.value, - dur: cpuFreqData.ts + cpuFreqData.dur - item.ts, - percent: ((cpuFreqData.ts + cpuFreqData.dur - item.ts) / sum) * PERCENT, + 'thread': item.pid + '_' + item.tid, + 'consumption': consumption * (cpuFreqData.ts + cpuFreqData.dur - item.ts), + 'cpu': item.cpu, + 'frequency': cpuFreqData.value, + 'dur': (cpuFreqData.ts + cpuFreqData.dur - item.ts), + 'percent': (cpuFreqData.ts + cpuFreqData.dur - item.ts) / sum *PERCENT }; case 3: return { - thread: item.pid + '_' + item.tid, - consumption: consumption * (item.dur + item.ts - cpuFreqData.ts), - cpu: item.cpu, - frequency: cpuFreqData.value, - dur: item.dur + item.ts - cpuFreqData.ts, - percent: ((item.dur + item.ts - cpuFreqData.ts) / sum) * PERCENT, + 'thread': item.pid + '_' + item.tid, + 'consumption': consumption * (item.dur + item.ts - cpuFreqData.ts), + 'cpu': item.cpu, + 'frequency': cpuFreqData.value, + 'dur': (item.dur + item.ts - cpuFreqData.ts), + 'percent': (item.dur + item.ts - cpuFreqData.ts) / sum * PERCENT }; - case 4: + case 4: return { - thread: item.pid + '_' + item.tid, - consumption: consumption * cpuFreqData.dur, - cpu: item.cpu, - frequency: cpuFreqData.value, - dur: cpuFreqData.dur, - percent: (cpuFreqData.dur / sum) * PERCENT, + 'thread': item.pid + '_' + item.tid, + 'consumption': consumption * cpuFreqData.dur, + 'cpu': item.cpu, + 'frequency': cpuFreqData.value, + 'dur': cpuFreqData.dur, + 'percent': cpuFreqData.dur / sum * PERCENT }; - case 5: + case 5: return { - thread: item.pid + '_' + item.tid, - consumption: 0, - cpu: item.cpu, - frequency: 'unknown', - dur: item.dur, - percent: (item.dur / sum) * PERCENT, + 'thread': item.pid + '_' + item.tid, + 'consumption': 0, + 'cpu': item.cpu, + 'frequency': 'unknown', + 'dur': item.dur, + 'percent': item.dur / sum * PERCENT }; } } /** - * + * * @param resultList 单线程内running数据与cpu频点数据整合成的数组 */ function mergeSameData(resultList: Array): Array { let cpuFreqArr: Array = []; let cpuArr: Array = []; //合并同一线程内，当运行所在cpu和频点相同时，dur及percent进行累加求和 - for (let i = 0; i < resultList.length; i++) { - if (!cpuArr.includes(resultList[i].cpu)) { - cpuArr.push(resultList[i].cpu); - cpuFreqArr.push(creatNewObj(resultList[i].cpu)); - } - for (let j = i + 1; j < resultList.length; j++) { - if (resultList[i].cpu === resultList[j].cpu && resultList[i].frequency === resultList[j].frequency) { - resultList[i].dur += resultList[j].dur; - resultList[i].percent += resultList[j].percent; - resultList[i].consumption += resultList[j].consumption; - resultList.splice(j, 1); - j--; + for (let i = 0; i < resultList.length; i++) { + if (!cpuArr.includes(resultList[i].cpu)) { + cpuArr.push(resultList[i].cpu); + cpuFreqArr.push(creatNewObj(resultList[i].cpu)); } - } - cpuFreqArr.find(function (item) { - if (item.cpu === resultList[i].cpu) { - item.children?.push(resultList[i]); - item.children?.sort((a, b) => b.consumption - a.consumption); - item.dur += resultList[i].dur; - item.percent += resultList[i].percent; - item.consumption += resultList[i].consumption; - item.thread = resultList[i].thread; + for (let j = i + 1; j < resultList.length; j++) { + if (resultList[i].cpu === resultList[j].cpu && resultList[i].frequency === resultList[j].frequency) { + resultList[i].dur += resultList[j].dur; + resultList[i].percent += resultList[j].percent; + resultList[i].consumption += resultList[j].consumption; + resultList.splice(j, 1); + j--; + } } - }); - } - cpuFreqArr.sort((a, b) => a.cpu - b.cpu); - return cpuFreqArr; + cpuFreqArr.find(function (item) { + if (item.cpu === resultList[i].cpu) { + item.children?.push(resultList[i]); + item.children?.sort((a, b) => b.consumption - a.consumption); + item.dur += resultList[i].dur; + item.percent += resultList[i].percent; + item.consumption += resultList[i].consumption; + item.thread = resultList[i].thread; + } + }); + } + cpuFreqArr.sort((a, b) => a.cpu - b.cpu); + return cpuFreqArr; } /** - * + * * @param params cpu层级的数据 * @returns 整理好的进程级数据 */ @@ -475,7 +441,7 @@ function dealTree(params: Map>): Array>): Arraycpu->频点的三级树结构数组 - */ -function fixTotal(arr: Array): Array { - let result: Array = []; - let flag: number = -1; - // 数据入参的情况是，第一条为进程数据，其后是该进程下所有线程的数据。以进程数据做分割 - for (let i = 0; i < arr.length; i++) { - // 判断如果是进程数据，则将其children的数组清空，并以其作为最顶层数据 - if (arr[i].thread?.indexOf('P') !== -1) { - arr[i].children = []; - arr[i].thread = arr[i].thread + '-summary data'; - result.push(arr[i]); - // 标志判定当前数组的长度，也可用.length判断 - flag++; - } else { - // 非进程数据会进入到else中，去判断当前线程数据的cpu分组是否存在，不存在则进行创建 - if (result[flag].children![arr[i].cpu] === undefined) { - result[flag].children![arr[i].cpu] = { - thread: 'summary data', - consumption: 0, - cpu: arr[i].cpu, - frequency: -1, - dur: 0, - percent: 0, - children: [], - }; - } - // 每有一条数据要放到cpu分组下时，则将该cpu分组的各项数据累和 - result[flag].children![arr[i].cpu].consumption += arr[i].consumption; - result[flag].children![arr[i].cpu].dur += arr[i].dur; - result[flag].children![arr[i].cpu].percent += arr[i].percent; - // 查找当前cpu分组下是否存在与当前数据的频点相同的数据，返回相同数据的索引值 - let index: number = result[flag].children![arr[i].cpu].children?.findIndex( - (item) => item.frequency === arr[i].frequency - )!; - // 若存在相同频点的数据，则进行合并，不同直接push - if (index === -1) { - arr[i].thread = 'summary data'; - result[flag].children![arr[i].cpu].children?.push(arr[i]); - } else { - result[flag].children![arr[i].cpu].children![index].consumption += arr[i].consumption; - result[flag].children![arr[i].cpu].children![index].dur += arr[i].dur; - result[flag].children![arr[i].cpu].children![index].percent += arr[i].percent; - } - } - } - return result; -} - -/** - * - * @param arr1 前次整理好的区分线程的数据 - * @param arr2 不区分线程的Total数据 - */ -function mergeTotal(arr1: Array, arr2: Array): void { - for (var i = 0; i < arr1.length; i++) { - const num: number = arr2.findIndex((item) => item.thread?.includes(arr1[i].thread!)); - arr2[num].thread = 'summary data'; - arr1[i].children?.unshift(arr2[num]); - arr2.splice(num, 1); - } -} diff --git a/ide/src/trace/component/trace/sheet/frequsage/TabPaneFreqUsageConfig.ts b/ide/src/trace/component/trace/sheet/frequsage/TabPaneFreqUsageConfig.ts index c1b929cc..047a5286 100644 --- a/ide/src/trace/component/trace/sheet/frequsage/TabPaneFreqUsageConfig.ts +++ b/ide/src/trace/component/trace/sheet/frequsage/TabPaneFreqUsageConfig.ts @@ -14,7 +14,7 @@ */ export class TabPaneFreqUsageConfig { - thread: string = ''; + thread: string = ""; ts: number | string; pid: number | string; tid: number | string; @@ -22,9 +22,9 @@ export class TabPaneFreqUsageConfig { cpu: number | string; freq: number | string; dur: number = 0; - cdur: string = ''; + cdur: string = ""; percent: number | string; - flag: string = ''; + flag: string = ""; id: number = -1; children: Array | undefined; constructor( @@ -59,14 +59,22 @@ export class TabPaneFreqUsageConfig { } export class TabPaneRunningConfig { - thread: string = ''; - process: string = ''; + thread: string = ""; + process: string = ""; ts: number = 0; pid: number = 0; tid: number = 0; cpu: number = -1; dur: number = 0; - constructor(process: string, thread: string, ts: number, pid: number, tid: number, cpu: number, dur: number) { + constructor( + process: string, + thread: string, + ts: number, + pid: number, + tid: number, + cpu: number, + dur: number + ) { this.process = process; this.thread = thread; this.ts = ts; @@ -119,4 +127,4 @@ export interface CpuFreqTd { filter_id: number; value: number; dur: number; -} +} \ No newline at end of file diff --git a/ide/src/trace/component/trace/sheet/gpu/TabPaneGpuTotalBoxSelect.ts b/ide/src/trace/component/trace/sheet/gpu/TabPaneGpuTotalBoxSelect.ts index 7b36bdf5..245b54fa 100644 --- a/ide/src/trace/component/trace/sheet/gpu/TabPaneGpuTotalBoxSelect.ts +++ b/ide/src/trace/component/trace/sheet/gpu/TabPaneGpuTotalBoxSelect.ts @@ -22,7 +22,7 @@ import { resizeObserver } from '../SheetUtils'; import { SpSystemTrace } from '../../../SpSystemTrace'; import { MemoryConfig } from '../../../../bean/MemoryConfig'; import { Utils } from '../../base/Utils'; -import { queryGpuDataByRange } from '../../../../database/sql/Gpu.sql'; +import {queryGpuDataByRange} from "../../../../database/sql/Gpu.sql"; interface GpuTotal { startTs: number; diff --git a/ide/src/trace/component/trace/sheet/gpu/TabPaneGraph.ts b/ide/src/trace/component/trace/sheet/gpu/TabPaneGraph.ts index f186da13..824a820f 100644 --- a/ide/src/trace/component/trace/sheet/gpu/TabPaneGraph.ts +++ b/ide/src/trace/component/trace/sheet/gpu/TabPaneGraph.ts @@ -21,7 +21,7 @@ import { getProbablyTime } from '../../../../database/logic-worker/ProcedureLogi import { resizeObserver } from '../SheetUtils'; import { Utils } from '../../base/Utils'; import { MemoryConfig } from '../../../../bean/MemoryConfig'; -import { queryGpuDataTab } from '../../../../database/sql/Gpu.sql'; +import {queryGpuDataTab} from "../../../../database/sql/Gpu.sql"; interface Graph { startTs: number; diff --git a/ide/src/trace/component/trace/sheet/gpufreq/TabPaneGpufreqDataCut.ts b/ide/src/trace/component/trace/sheet/gpufreq/TabPaneGpufreqDataCut.ts index 82bd6f63..49ba4927 100644 --- a/ide/src/trace/component/trace/sheet/gpufreq/TabPaneGpufreqDataCut.ts +++ b/ide/src/trace/component/trace/sheet/gpufreq/TabPaneGpufreqDataCut.ts @@ -18,13 +18,7 @@ import { SelectionParam } from '../../../../bean/BoxSelection'; import { getGpufreqData, getGpufreqDataCut } from '../../../../database/sql/Perf.sql'; import { resizeObserver } from '../SheetUtils'; import { SpSegmentationChart } from '../../../chart/SpSegmentationChart'; -import { - GpuCountBean, - TreeDataBean, - type SearchGpuFuncBean, - CycleDataBean, - TreeDataStringBean, -} from '../../../../bean/GpufreqBean'; +import { GpuCountBean, TreeDataBean, type SearchGpuFuncBean, CycleDataBean, TreeDataStringBean } from '../../../../bean/GpufreqBean'; @element('tabpane-gpufreqdatacut') export class TabPaneGpufreqDataCut extends BaseElement { @@ -47,35 +41,27 @@ export class TabPaneGpufreqDataCut extends BaseElement { return; } else { SpSegmentationChart.setChartData('GPU-FREQ', []); - } + }; this.currentSelectionParam = threadStatesParam; this.threadStatesTbl!.recycleDataSource = []; this.threadStatesTbl!.loading = true; this.getGpufreqData(threadStatesParam.leftNs, threadStatesParam.rightNs, false).then((result) => { if (result !== null && result.length > 0) { let resultList: Array = JSON.parse(JSON.stringify(result)); - resultList[0].dur = resultList[1] - ? resultList[1].startNS - threadStatesParam.leftNs - : threadStatesParam.rightNs - threadStatesParam.leftNs; + resultList[0].dur = resultList[1] ? resultList[1].startNS - threadStatesParam.leftNs : threadStatesParam.rightNs - threadStatesParam.leftNs; resultList[0].value = resultList[0].dur * resultList[0].val; - resultList[resultList.length - 1].dur = - resultList.length - 1 !== 0 - ? threadStatesParam.rightNs - resultList[resultList.length - 1].startNS - : resultList[0].dur; - resultList[resultList.length - 1].value = - resultList.length - 1 !== 0 - ? resultList[resultList.length - 1].dur * resultList[resultList.length - 1].val - : resultList[0].value; + resultList[resultList.length - 1].dur = resultList.length - 1 !== 0 ? threadStatesParam.rightNs - resultList[resultList.length - 1].startNS : resultList[0].dur; + resultList[resultList.length - 1].value = resultList.length - 1 !== 0 ? resultList[resultList.length - 1].dur * resultList[resultList.length - 1].val : resultList[0].value; this.initData = resultList; this.threadStatesTbl!.loading = false; } else { this.threadStatesTbl!.recycleDataSource = []; this.threadStatesTbl!.loading = false; - } + }; }); this._threadId!.style.border = '1px solid rgb(151, 151, 151)'; this._threadFunc!.style.border = '1px solid rgb(151, 151, 151)'; - } + }; initElements(): void { this.threadStatesTbl = this.shadowRoot?.querySelector('#tb-gpufreq-percent'); @@ -100,33 +86,26 @@ export class TabPaneGpufreqDataCut extends BaseElement { if (event.detail.level === EVENT_LEVEL && event.detail.thread.includes('cycle')) { // @ts-ignore SpSegmentationChart.tabHover('GPU-FREQ', true, event.detail.data.cycle); - } + }; }); this.addInputBorderEvent(this._threadId!); this.addInputBorderEvent(this._threadFunc!); - } + }; async getGpufreqData(leftNs: number, rightNs: number, isTrue: boolean): Promise> { let result: Array = await getGpufreqData(leftNs, rightNs, isTrue); return result; - } - async getGpufreqDataCut( - tIds: string, - funcName: string, - leftNS: number, - rightNS: number, - single: boolean, - loop: boolean - ): Promise> { + }; + async getGpufreqDataCut(tIds: string, funcName: string, leftNS: number, rightNS: number, single: boolean, loop: boolean): Promise> { let result: Array = await getGpufreqDataCut(tIds, funcName, leftNS, rightNS, single, loop); return result; - } + }; private clickFun(fun: string): void { this.threadIdValue = this._threadId!.value.trim(); this.threadFuncName = this._threadFunc!.value.trim(); this.threadStatesTbl!.loading = true; SpSegmentationChart.tabHover('GPU-FREQ', false, -1); this.validationFun(this.threadIdValue, this.threadFuncName, fun); - } + }; private addInputBorderEvent(inputElement: HTMLInputElement): void { if (inputElement) { inputElement.addEventListener('change', function () { @@ -135,7 +114,7 @@ export class TabPaneGpufreqDataCut extends BaseElement { } }); } - } + }; private validationFun(threadIdValue: string, threadFuncName: string, fun: string): void { if (threadIdValue === '') { this.handleEmptyInput(this._threadId!); @@ -146,30 +125,27 @@ export class TabPaneGpufreqDataCut extends BaseElement { this._threadFunc!.style.border = '1px solid rgb(151, 151, 151)'; if (fun === 'Single') { this.isTrue(threadIdValue, threadFuncName, true, false); - } + }; if (fun === 'Loop') { this.isTrue(threadIdValue, threadFuncName, false, true); - } - } - } + }; + }; + }; private handleEmptyInput(input: HTMLInputElement): void { this.threadStatesTbl!.loading = false; input!.style.border = '1px solid rgb(255,0,0)'; this.threadStatesTbl!.recycleDataSource = []; - } + }; private isTrue(threadIdValue: string, threadFuncName: string, single: boolean, loop: boolean): void { - this.getGpufreqDataCut( - threadIdValue, - threadFuncName, + this.getGpufreqDataCut(threadIdValue, threadFuncName, this.currentSelectionParam!.leftNs, this.currentSelectionParam!.rightNs, - single, - loop + single, loop ).then((result: Array) => { let _initData = JSON.parse(JSON.stringify(this.initData)); this.handleDataCut(_initData, result); }); - } + }; private handleDataCut(initData: Array, dataCut: Array): void { if (initData.length > 0 && dataCut.length > 0) { let finalGpufreqData: Array = new Array(); @@ -184,24 +160,25 @@ export class TabPaneGpufreqDataCut extends BaseElement { let initItem: GpuCountBean = initData[j]; _lastList.push(...this.segmentationData(initItem, dataItem, i)); j++; - currentIndex++; + currentIndex++; if (currentIndex === initData.length) { i++; j = 0; - currentIndex = 0; - } - } + currentIndex = 0; + }; + }; let tree: TreeDataStringBean = this.createTree(_lastList); finalGpufreqData.push(tree); this.threadStatesTbl!.recycleDataSource = finalGpufreqData; this.threadStatesTbl!.loading = false; this.clickTableHeader(finalGpufreqData); + } else { this.threadStatesTbl!.recycleDataSource = []; this.threadStatesTbl!.loading = false; SpSegmentationChart.setChartData('GPU-FREQ', []); - } - } + }; + }; private segmentationData(j: GpuCountBean, e: SearchGpuFuncBean, i: number): Array { let lastList: Array = []; if (j.startNS <= e.startTime && j.endTime >= e.startTime) { @@ -231,7 +208,7 @@ export class TabPaneGpufreqDataCut extends BaseElement { i ) ); - } + }; } else if (j.startNS >= e.startTime && j.endTime <= e.endTime) { lastList.push( new GpuCountBean( @@ -258,10 +235,10 @@ export class TabPaneGpufreqDataCut extends BaseElement { i ) ); - } + }; return lastList; - } - // 创建树形结构 + }; + // 创建树形结构 private createTree(data: Array): TreeDataStringBean { if (data.length > 0) { const root: { @@ -270,9 +247,9 @@ export class TabPaneGpufreqDataCut extends BaseElement { dur: number; percent: number; level: number; - children: TreeDataBean[]; + children: TreeDataBean[]; } = { - thread: 'gpufreq Frequency', + thread: 'gpufreq Frequency', value: 0, dur: 0, percent: 100, @@ -287,48 +264,43 @@ export class TabPaneGpufreqDataCut extends BaseElement { item.level = 4; this.updateValueMap(item, parentIndex, freq, valueMap); }); - Object.values(valueMap).forEach((node: TreeDataBean) => { - const parentNode: TreeDataBean = valueMap[node.freq! - 1]; + Object.values(valueMap).forEach((node: TreeDataBean) => { + const parentNode: TreeDataBean = valueMap[node.freq! - 1]; if (parentNode) { parentNode.children.push(node); parentNode.dur += node.dur; parentNode.value += node.value; } else { - root.children.push(node); - root.dur += node.dur; + root.children.push(node); + root.dur += node.dur; root.value += node.value; } }); this.flattenAndCalculate(root, root); const firstLevelChildren = this.getFirstLevelChildren(root); SpSegmentationChart.setChartData('GPU-FREQ', firstLevelChildren); - let _root = this.RetainDecimals(root); + let _root = this.RetainDecimals(root) return _root; } else { return new TreeDataStringBean('', '', '', '', '', ''); - } - } - private updateValueMap( - item: GpuCountBean, - parentIndex: number, - freq: number, - valueMap: { [parentIndex: string]: TreeDataBean } - ): void { + }; + }; + private updateValueMap(item: GpuCountBean, parentIndex: number, freq: number, valueMap: { [parentIndex: string]: TreeDataBean }): void { if (!valueMap[parentIndex]) { valueMap[parentIndex] = { thread: `cycle ${parentIndex + 1} ${item.thread}`, value: item.value, dur: item.dur, startNS: item.startNS, - percent: 100, + percent: 100, level: 2, cycle: parentIndex + 1, children: [], }; - } else { + } else { valueMap[parentIndex].dur += item.dur; valueMap[parentIndex].value += item.value; - } + }; if (!valueMap[parentIndex].children[freq]) { valueMap[parentIndex].children[freq] = { thread: item.thread, @@ -341,67 +313,41 @@ export class TabPaneGpufreqDataCut extends BaseElement { } else { valueMap[parentIndex].children[freq].dur += item.dur; valueMap[parentIndex].children[freq].value += item.value; - } + }; valueMap[parentIndex].children[freq].children.push(item as unknown as TreeDataBean); - } + }; private getFirstLevelChildren(obj: TreeDataBean): Array { const result: Array = []; if (Array.isArray(obj.children)) { - obj.children.forEach((child) => { - if ( - child.cycle !== undefined && - child.dur !== undefined && - child.value !== undefined && - child.startNS !== undefined - ) { - result.push( - new CycleDataBean( - 7, - child.dur, - Number((child.value / this.KUNIT).toFixed(3)), - child.startNS, - child.cycle, - '', - 1 - ) - ); - } + obj.children.forEach((child) => { + if (child.cycle !== undefined && child.dur !== undefined && child.value !== undefined && child.startNS !== undefined) { + result.push(new CycleDataBean(7,child.dur, child.value, child.startNS, child.cycle,'',1)); + }; }); - } + }; return result; - } + }; private flattenAndCalculate(node: TreeDataBean, root: TreeDataBean): void { - node.percent = (node.value / root.value) * 100; + node.percent = node.value / root.value * 100; if (node.children) { node.children = node.children.flat(); node.children.forEach((childNode) => this.flattenAndCalculate(childNode, root)); - } - } + }; + }; private RetainDecimals(root: TreeDataBean): TreeDataStringBean { - const treeDataString: TreeDataStringBean = new TreeDataStringBean( - root.thread!, - (root.value / this.KUNIT).toFixed(this.SUB_LENGTH), - (root.dur / this.UNIT).toFixed(this.SUB_LENGTH), - root.percent!.toFixed(this.PERCENT_SUB_LENGTH), - String(root.level), - '', - 0, - [], - '', - false - ); + const treeDataString: TreeDataStringBean = new TreeDataStringBean(root.thread!, (root.value / this.KUNIT).toFixed(this.SUB_LENGTH), (root.dur / this.UNIT).toFixed(this.SUB_LENGTH), root.percent!.toFixed(this.PERCENT_SUB_LENGTH), String(root.level), '', 0, [], '', false); if (root.children) { for (const child of root.children) { treeDataString.children!.push(this.convertChildToString(child) as TreeDataStringBean); - } - } + }; + }; return treeDataString; - } + }; private convertChildToString(child: TreeDataBean | TreeDataBean[]): TreeDataStringBean | TreeDataStringBean[] { - if (Array.isArray(child)) { - if (child.length > 0) { - return child.map((c) => this.convertChildToString(c) as TreeDataStringBean); - } else { + if (Array.isArray(child)) { + if (child.length > 0) { + return child.map(c => this.convertChildToString(c) as TreeDataStringBean); + } else { return []; } } else if (child && child.children) { @@ -413,7 +359,7 @@ export class TabPaneGpufreqDataCut extends BaseElement { dur: (child.dur / this.UNIT).toFixed(this.SUB_LENGTH), percent: child.percent ? child.percent.toFixed(this.PERCENT_SUB_LENGTH) : '', level: String(child.level), - startNS: child.startNS ? (child.startNS / this.UNIT).toFixed(this.SUB_LENGTH) : '', + startNS: child.startNS ? child.startNS.toFixed(this.SUB_LENGTH) : '', children: this.convertChildToString(child.children) as unknown as TreeDataStringBean[], }; } else { @@ -423,11 +369,12 @@ export class TabPaneGpufreqDataCut extends BaseElement { freq: child.freq ? child.freq!.toFixed(this.SUB_LENGTH) : '', dur: (child.dur / this.UNIT).toFixed(this.SUB_LENGTH), percent: child.percent ? child.percent.toFixed(this.PERCENT_SUB_LENGTH) : '', - level: String(child.level), + level: String(child.level) }; } - } - // 表头点击事件 + + }; + // 表头点击事件 private clickTableHeader(data: Array): void { let labels = this.threadStatesTbl?.shadowRoot?.querySelector('.th > .td')!.querySelectorAll('label'); const THREAD_INDEX: number = 0; @@ -445,8 +392,8 @@ export class TabPaneGpufreqDataCut extends BaseElement { item.status = true; if (item.children !== undefined && item.children.length > 0) { this.threadStatesTbl!.setStatus(item.children, false); - } - } + }; + }; this.threadStatesTbl!.recycleDs = this.threadStatesTbl!.meauseTreeRowElement(data, RedrawTreeForm.Retract); } else if (label.includes('Freq') && i === FREQ_INDEX) { for (let item of data) { @@ -455,20 +402,20 @@ export class TabPaneGpufreqDataCut extends BaseElement { e.status = true; if (e.children !== undefined && e.children.length > 0) { this.threadStatesTbl!.setStatus(e.children, true); - } - } - } + }; + }; + }; this.threadStatesTbl!.recycleDs = this.threadStatesTbl!.meauseTreeRowElement(data, RedrawTreeForm.Expand); - } + }; }); - } - } - } + }; + }; + }; connectedCallback(): void { super.connectedCallback(); resizeObserver(this.parentElement!, this.threadStatesTbl!); - } + }; initHtml(): string { return ` - ` + `; } initElements(): void { this.slotHtml = this.shadowRoot?.querySelector('#sl') as HTMLElement; this.button = this.shadowRoot?.querySelector('#custom-button'); this.litIcon = this.shadowRoot?.querySelector('#button-icon') as LitButton; - if (this.litIcon.getAttribute('name') == '') { + if (this.litIcon.getAttribute('name') === '') { this.litIcon!.style.display = 'none'; } } - attributeChangedCallback(name: string, oldValue: string, value: string) { + attributeChangedCallback(name: string, oldValue: string, value: string): void { switch (name) { case 'text': this.slotHtml!.innerText = value; diff --git a/ide/src/base-ui/chart/column/LitChartColumn.ts b/ide/src/base-ui/chart/column/LitChartColumn.ts index 7aff26a1..214c2e18 100644 --- a/ide/src/base-ui/chart/column/LitChartColumn.ts +++ b/ide/src/base-ui/chart/column/LitChartColumn.ts @@ -60,19 +60,19 @@ export class LitChartColumn extends BaseElement { data: Pillar[] = []; rowLines: RLine[] = []; - connectedCallback() { + connectedCallback(): void { super.connectedCallback(); this.litChartColumnTipEL = this.shadowRoot!.querySelector('#tip'); this.litChartColumnCanvas = this.shadowRoot!.querySelector('#canvas'); this.litChartColumnCtx = this.litChartColumnCanvas!.getContext('2d', { alpha: true }); resizeCanvas(this.litChartColumnCanvas!); this.offset = { x: 60, y: 20 }; - this.litChartColumnCanvas!.onmouseout = (e) => { + this.litChartColumnCanvas!.onmouseout = (e): void => { this.hideTip(); this.data.forEach((it) => (it.hover = false)); this.render(); }; - this.litChartColumnCanvas!.onmousemove = (ev) => { + this.litChartColumnCanvas!.onmousemove = (ev): void => { let rect = this.getBoundingClientRect(); let x = ev.pageX - rect.left; let y = ev.pageY - rect.top; @@ -103,14 +103,14 @@ export class LitChartColumn extends BaseElement { } } - if (this.data.filter((it) => it.process).length == 0) { + if (this.data.filter((it) => it.process).length === 0) { this.render(); } }; this.render(); } - private tipTypeShow(x: number, y: number, pillars: Pillar[], innerHtml: string) { + private tipTypeShow(x: number, y: number, pillars: Pillar[], innerHtml: string): void { if (x >= this.clientWidth - this.litChartColumnTipEL!.clientWidth) { this.showTip( x - this.litChartColumnTipEL!.clientWidth - 10, @@ -122,7 +122,7 @@ export class LitChartColumn extends BaseElement { } } - showHoverColumn(index: number) { + showHoverColumn(index: number): void { this.data.forEach((it) => { if (it.obj.no === index) { it.hover = true; @@ -159,7 +159,7 @@ export class LitChartColumn extends BaseElement { } } - if (this.data.filter((it) => it.process).length == 0) { + if (this.data.filter((it) => it.process).length === 0) { this.render(); } } @@ -175,7 +175,9 @@ export class LitChartColumn extends BaseElement { } set config(litChartColumnConfig: LitChartColumnConfig | null | undefined) { - if (!litChartColumnConfig) return; + if (!litChartColumnConfig) { + return; + } this.litChartColumnCfg = litChartColumnConfig; this.measure(); this.render(); @@ -189,11 +191,11 @@ export class LitChartColumn extends BaseElement { } } - get dataSource() { + get dataSource(): any[] { return this.litChartColumnCfg?.data || []; } - dataSort():void{ + dataSort(): void { if (!this.litChartColumnCfg!.notSort) { this.litChartColumnCfg?.data.sort( (a, b) => b[this.litChartColumnCfg!.yField] - a[this.litChartColumnCfg!.yField] @@ -201,7 +203,7 @@ export class LitChartColumn extends BaseElement { } } - haveSeriesField():void{ + haveSeriesField(): void { let maxValue = Math.max(...this.litChartColumnCfg!.data.map((it) => it[this.litChartColumnCfg!.yField])); maxValue = Math.ceil(maxValue * 0.1) * 10; let partWidth = (this.clientWidth - this.offset!.x!) / this.litChartColumnCfg!.data.length; @@ -211,10 +213,7 @@ export class LitChartColumn extends BaseElement { for (let i = 0; i <= 5; i++) { this.rowLines.push({ y: gap * i, - label: - this.litChartColumnCfg!.removeUnit === true - ? `${maxValue - valGap * i}` - : `${getProbablyTime(maxValue - valGap * i)}`, + label: this.litChartColumnCfg!.removeUnit === true ? `${maxValue - valGap * i}` : `${getProbablyTime(maxValue - valGap * i)}`, }); } this.dataSort(); @@ -249,7 +248,15 @@ export class LitChartColumn extends BaseElement { }); } - noSeriesField(itemEl:any,y:number,initH:number,maxValue:number,partWidth:number,partHeight:number,reduceGroupIndex:number):void{ + noSeriesField( + itemEl: any, + y: number, + initH: number, + maxValue: number, + partWidth: number, + partHeight: number, + reduceGroupIndex: number + ): void { this.data.push({ color: this.litChartColumnCfg!.color(itemEl), obj: itemEl, @@ -281,8 +288,10 @@ export class LitChartColumn extends BaseElement { }); } - measure() { - if (!this.litChartColumnCfg) return; + measure(): void { + if (!this.litChartColumnCfg) { + return; + } this.data = []; this.rowLines = []; if (!this.litChartColumnCfg.seriesField) { @@ -318,7 +327,7 @@ export class LitChartColumn extends BaseElement { let elements = reduceGroup[reduceGroupKey]; let initH = 0; elements.forEach((itemEl: any, y: number) => { - this.noSeriesField(itemEl,y,initH,maxValue,partWidth,partHeight,reduceGroupIndex); + this.noSeriesField(itemEl, y, initH, maxValue, partWidth, partHeight, reduceGroupIndex); initH += (itemEl[this.litChartColumnCfg!.yField] * partHeight) / maxValue; }); }); @@ -329,8 +338,10 @@ export class LitChartColumn extends BaseElement { return this.litChartColumnCfg; } - render(ease: boolean = true) { - if (!this.litChartColumnCanvas || !this.litChartColumnCfg) return; + render(ease: boolean = true): void { + if (!this.litChartColumnCanvas || !this.litChartColumnCfg) { + return; + } this.litChartColumnCtx!.clearRect(0, 0, this.clientWidth, this.clientHeight); this.drawLine(this.litChartColumnCtx!); this.data?.forEach((it) => this.drawColumn(this.litChartColumnCtx!, it, ease)); @@ -341,7 +352,7 @@ export class LitChartColumn extends BaseElement { } } - drawLine(c: CanvasRenderingContext2D) { + drawLine(c: CanvasRenderingContext2D): void { c.strokeStyle = '#dfdfdf'; c.lineWidth = 1; c.beginPath(); @@ -349,7 +360,7 @@ export class LitChartColumn extends BaseElement { this.rowLines.forEach((it, i) => { c.moveTo(this.offset!.x!, it.y); c.lineTo(this.clientWidth, it.y); - if (i == 0) { + if (i === 0) { c.fillText(it.label, this.offset!.x! - c.measureText(it.label).width - 2, it.y + 11); } else { c.fillText(it.label, this.offset!.x! - c.measureText(it.label).width - 2, it.y + 4); @@ -359,7 +370,7 @@ export class LitChartColumn extends BaseElement { c.closePath(); } - drawColumn(c: CanvasRenderingContext2D, it: Pillar, ease: boolean) { + drawColumn(c: CanvasRenderingContext2D, it: Pillar, ease: boolean): void { if (it.hover) { c.globalAlpha = 0.2; c.fillStyle = '#999999'; @@ -410,7 +421,7 @@ export class LitChartColumn extends BaseElement { c.closePath(); } - beginPath(stroke: boolean, fill: boolean) { + beginPath(stroke: boolean, fill: boolean): (fn: (c: CanvasRenderingContext2D) => void) => void { return (fn: (c: CanvasRenderingContext2D) => void) => { this.litChartColumnCtx!.beginPath(); fn?.(this.litChartColumnCtx!); @@ -424,14 +435,14 @@ export class LitChartColumn extends BaseElement { }; } - showTip(x: number, y: number, msg: string) { + showTip(x: number, y: number, msg: string): void { this.litChartColumnTipEL!.style.display = 'flex'; this.litChartColumnTipEL!.style.top = `${y}px`; this.litChartColumnTipEL!.style.left = `${x}px`; this.litChartColumnTipEL!.innerHTML = msg; } - hideTip() { + hideTip(): void { this.litChartColumnTipEL!.style.display = 'none'; } diff --git a/ide/src/base-ui/chart/helper.ts b/ide/src/base-ui/chart/helper.ts index 2fd7479c..413544f8 100644 --- a/ide/src/base-ui/chart/helper.ts +++ b/ide/src/base-ui/chart/helper.ts @@ -13,7 +13,7 @@ * limitations under the License. */ -export const resizeCanvas = (c: HTMLCanvasElement) => { +export const resizeCanvas = (c: HTMLCanvasElement): void => { let el: Element = (c.getRootNode({ composed: false }) as ShadowRoot).host; let dpr = window.devicePixelRatio || 1; c.width = Math.ceil(el.clientWidth * dpr); diff --git a/ide/src/base-ui/chart/pagenation/PageNation.ts b/ide/src/base-ui/chart/pagenation/PageNation.ts index 5c6da0e9..5f64d54b 100644 --- a/ide/src/base-ui/chart/pagenation/PageNation.ts +++ b/ide/src/base-ui/chart/pagenation/PageNation.ts @@ -54,7 +54,7 @@ export class PageNation { this.bindPageEvent(); } - setPageOptions(options: any) { + setPageOptions(options: any): void { // 当前页 this.pageInfo.current = options.current || 1; // 一页显示多少条 @@ -73,16 +73,16 @@ export class PageNation { } } this.pageInfo.first = options.first || '<<'; - this.pageInfo.change = options.change || function () {}; + this.pageInfo.change = options.change || function (): void {}; } - setElementStyles(ele: any, styles: any) { + setElementStyles(ele: any, styles: any): void { for (let key in styles) { ele.style[key] = styles[key]; } } - setItemStyles() { + setItemStyles(): void { this.setElementStyles(this.element, { margin: '18px auto', display: 'flex', @@ -91,7 +91,7 @@ export class PageNation { }); } - createElement(jumpDiv:HTMLElement):void{ + createElement(jumpDiv: HTMLElement): void { // Create input field this.inputBox = document.createElement('input'); this.inputBox.value = this.pageInfo.current; @@ -123,14 +123,14 @@ export class PageNation { border: '0', 'border-radius': '5px', }); - this.btn.style.background = `url('img/arrowright.png') no-repeat 98% center var(--dark-background3,#FFFFFF)`; + this.btn.style.background = 'url("img/arrowright.png") no-repeat 98% center var(--dark-background3,#FFFFFF)'; this.btn.style.backgroundPosition = 'center'; jumpDiv.appendChild(this.btn); this.element.appendChild(jumpDiv); } // 创建元素 首页 上一页 按钮组 下一页 尾页 输入框 按钮 - createPageElement() { + createPageElement(): void { //首页 this.origin = document.createElement('p'); this.setElementStyles(this.origin, { @@ -180,7 +180,7 @@ export class PageNation { } // 判断首页 上一页 下一页 尾页 是否可以点击 - bindPageHtml() { + bindPageHtml(): void { const { current, totalpage } = this.pageInfo; const disable = { color: '#999999', cursor: 'not-allowed' }; const enable = { @@ -209,9 +209,9 @@ export class PageNation { this.pageInfo.change(this.pageInfo.current); } - bindPageList() { - this.list.innerHTML = '';// clear ul its contents - const { pageSize, current, totalpage } = this.pageInfo;//Clean the ul before each load + bindPageList(): void { + this.list.innerHTML = ''; // clear ul its contents + const { pageSize, current, totalpage } = this.pageInfo; //Clean the ul before each load const origin = document.createElement('li'); origin.dataset.name = 'item'; this.setElementStyles(origin, { @@ -250,7 +250,7 @@ export class PageNation { } } - private buildLi(origin: HTMLElement, i: number, current: number) { + private buildLi(origin: HTMLElement, i: number, current: number): void { const li = origin.cloneNode(true); // @ts-ignore li.innerText = i + 1; @@ -278,7 +278,7 @@ export class PageNation { } return true; } - if (current == 5) { + if (current === 5) { // 左边5个 中间 ... 右边2个 for (let i = 0; i < 7; i++) { this.buildLi(origin, i, current); @@ -306,15 +306,15 @@ export class PageNation { } return true; } - if (current == totalpage - 4) { + if (current === totalpage - 4) { // 左边5个 中间 ... 右边2个 - this.nodeAppendChild(origin,current,span,totalpage); + this.nodeAppendChild(origin, current, span, totalpage); return true; } return false; } - nodeAppendChild(origin: HTMLElement,current: number,span: any,totalpage: number):void{ + nodeAppendChild(origin: HTMLElement, current: number, span: any, totalpage: number): void { for (let i = 0; i < 2; i++) { this.buildLi(origin, i, current); } @@ -326,7 +326,7 @@ export class PageNation { } } - bindPageEvent() { + bindPageEvent(): void { this.element.addEventListener( 'click', (event: { @@ -360,30 +360,38 @@ export class PageNation { ); } - targetName(event:{ + targetName(event: { target: { name: string; dataset: { name: string }; innerText: number; }; - }):void{ + }): void { if (event.target.name === 'first') { - if (this.pageInfo.current === 1) return; + if (this.pageInfo.current === 1) { + return; + } this.pageInfo.current = 1; this.bindPageHtml(); } if (event.target.name === 'prev') { - if (this.pageInfo.current === 1) return; + if (this.pageInfo.current === 1) { + return; + } this.pageInfo.current--; this.bindPageHtml(); } if (event.target.name === 'next') { - if (this.pageInfo.current === this.pageInfo.totalpage) return; + if (this.pageInfo.current === this.pageInfo.totalpage) { + return; + } this.pageInfo.current++; this.bindPageHtml(); } if (event.target.name === 'last') { - if (this.pageInfo.current === this.pageInfo.totalpage) return; + if (this.pageInfo.current === this.pageInfo.totalpage) { + return; + } this.pageInfo.current = this.pageInfo.totalpage; this.bindPageHtml(); } diff --git a/ide/src/base-ui/chart/pagenation/PaginationBox.ts b/ide/src/base-ui/chart/pagenation/PaginationBox.ts index 8c455d3a..8b974095 100644 --- a/ide/src/base-ui/chart/pagenation/PaginationBox.ts +++ b/ide/src/base-ui/chart/pagenation/PaginationBox.ts @@ -19,11 +19,11 @@ import { BaseElement, element } from '../../BaseElement'; export class PaginationBox extends BaseElement { private paginationBoxPage: any; - static get observedAttributes() { + static get observedAttributes(): string[] { return ['text', 'height', 'width']; } - get text() { + get text(): string { return this.getAttribute('text') || ''; } @@ -31,7 +31,7 @@ export class PaginationBox extends BaseElement { this.setAttribute('text', text); } - get height() { + get height(): string { return this.getAttribute('height') || ''; } @@ -58,7 +58,7 @@ export class PaginationBox extends BaseElement { this.paginationBoxPage = this.shadowRoot?.querySelector('#box'); } - attributeChangedCallback(name: string, oldValue: string, value: string) { + attributeChangedCallback(name: string, oldValue: string, value: string): void { switch (name) { } } diff --git a/ide/src/base-ui/chart/pie/LitChartPie.ts b/ide/src/base-ui/chart/pie/LitChartPie.ts index ffa1e6c9..cdf86323 100644 --- a/ide/src/base-ui/chart/pie/LitChartPie.ts +++ b/ide/src/base-ui/chart/pie/LitChartPie.ts @@ -134,7 +134,7 @@ const initHtmlStyle = ` margin-right: 5px; } - ` + `; @element('lit-chart-pie') export class LitChartPie extends BaseElement { @@ -151,7 +151,9 @@ export class LitChartPie extends BaseElement { private textRects: Rectangle[] = []; set config(litChartPieCfg: LitChartPieConfig | null | undefined) { - if (!litChartPieCfg) return; + if (!litChartPieCfg) { + return; + } this.litChartPieConfig = litChartPieCfg; (this.shadowRoot!.querySelector('#root') as HTMLDivElement).className = litChartPieCfg && litChartPieCfg.data.length > 0 ? 'bg_hasdata' : 'bg_nodata'; @@ -167,7 +169,7 @@ export class LitChartPie extends BaseElement { } } - showHover() { + showHover(): void { let hasHover = false; this.data.forEach((it) => { it.hover = it.obj.isHover; @@ -189,14 +191,16 @@ export class LitChartPie extends BaseElement { this.render(); } - measureInitialize():void{ + measureInitialize(): void { this.data = []; this.radius = (Math.min(this.clientHeight, this.clientWidth) * 0.65) / 2 - 10; this.labelsEL!.textContent = ''; } - measure() { - if (!this.litChartPieConfig) return; + measure(): void { + if (!this.litChartPieConfig) { + return; + } this.measureInitialize(); let pieCfg = this.litChartPieConfig!; let startAngle = 0; @@ -211,9 +215,7 @@ export class LitChartPie extends BaseElement { this.litChartPieConfig.data.forEach((pieItem, index) => { let item: Sector = { id: `id-${Utils.uuid()}`, - color: this.litChartPieConfig!.label.color - ? this.litChartPieConfig!.label.color(pieItem) - : pieChartColors[index % pieChartColors.length], + color: this.litChartPieConfig!.label.color ? this.litChartPieConfig!.label.color(pieItem) : pieChartColors[index % pieChartColors.length], obj: pieItem, key: pieItem[pieCfg.colorField], value: pieItem[pieCfg.angleField], @@ -249,8 +251,8 @@ export class LitChartPie extends BaseElement { return this.litChartPieConfig; } - addCanvasOnmousemoveEvent():void{ - this.canvas!.onmousemove = (ev) => { + addCanvasOnmousemoveEvent(): void { + this.canvas!.onmousemove = (ev): void => { let rect = this.getBoundingClientRect(); let x = ev.pageX - rect.left - this.centerX!; let y = ev.pageY - rect.top - this.centerY!; @@ -281,7 +283,7 @@ export class LitChartPie extends BaseElement { this.render(); }; } - connectedCallback() { + connectedCallback(): void { super.connectedCallback(); this.eleShape = this.shadowRoot!.querySelector('#shape'); this.pieTipEL = this.shadowRoot!.querySelector('#tip'); @@ -293,7 +295,7 @@ export class LitChartPie extends BaseElement { this.centerX = this.clientWidth / 2; this.centerY = this.clientHeight / 2 - 40; this.ctx?.translate(this.centerX, this.centerY); - this.canvas!.onmouseout = (e) => { + this.canvas!.onmouseout = (e): void => { this.hideTip(); this.data.forEach((it) => { it.hover = false; @@ -302,7 +304,7 @@ export class LitChartPie extends BaseElement { this.render(); }; //增加点击事件 - this.canvas!.onclick = (ev) => { + this.canvas!.onclick = (ev): void => { let rect = this.getBoundingClientRect(); let x = ev.pageX - rect.left - this.centerX!; let y = ev.pageY - rect.top - this.centerY!; @@ -319,14 +321,14 @@ export class LitChartPie extends BaseElement { this.render(); } - updateHoverItemStatus(item: any) { + updateHoverItemStatus(item: any): void { let label = this.shadowRoot!.querySelector(`#${item.id}`); if (label) { (label as HTMLLabelElement).style.boxShadow = item.hover ? '0 0 5px #22ffffff' : ''; } } - computeDegree(x: number, y: number) { + computeDegree(x: number, y: number): number { let degree = (360 * Math.atan(y / x)) / (2 * Math.PI); if (x >= 0 && y >= 0) { degree = degree; @@ -353,7 +355,7 @@ export class LitChartPie extends BaseElement { }).observe(this); } - handleData():void{ + handleData(): void { this.textRects = []; if (this.litChartPieConfig!.showChartLine) { this.data.forEach((dataItem) => { @@ -387,9 +389,13 @@ export class LitChartPie extends BaseElement { } } - render(ease: boolean = true) { - if (!this.canvas || !this.litChartPieConfig) return; - if (this.radius! <= 0) return; + render(ease: boolean = true): void { + if (!this.canvas || !this.litChartPieConfig) { + return; + } + if (this.radius! <= 0) { + return; + } this.ctx?.clearRect(0 - this.centerX!, 0 - this.centerY!, this.clientWidth, this.clientHeight); this.data.forEach((it) => { this.ctx!.beginPath(); @@ -422,7 +428,7 @@ export class LitChartPie extends BaseElement { this.setData(ease); } - setData(ease: boolean):void{ + setData(ease: boolean): void { this.data .filter((it) => it.hover) .forEach((it) => { @@ -443,32 +449,32 @@ export class LitChartPie extends BaseElement { } correctRect(pieRect: Rectangle): Rectangle { - if (this.textRects.length == 0) { + if (this.textRects.length === 0) { this.textRects.push(pieRect); return pieRect; } else { let rectangles = this.textRects.filter((it) => this.intersect(it, pieRect).cross); - if (rectangles.length == 0) { + if (rectangles.length === 0) { this.textRects.push(pieRect); return pieRect; } else { let it = rectangles[0]; let inter = this.intersect(it, pieRect); - if (inter.direction == 'Right') { + if (inter.direction === 'Right') { pieRect.x += inter.crossW; - } else if (inter.direction == 'Bottom') { + } else if (inter.direction === 'Bottom') { pieRect.y += inter.crossH; - } else if (inter.direction == 'Left') { + } else if (inter.direction === 'Left') { pieRect.x -= inter.crossW; - } else if (inter.direction == 'Top') { + } else if (inter.direction === 'Top') { pieRect.y -= inter.crossH; - } else if (inter.direction == 'Right-Top') { + } else if (inter.direction === 'Right-Top') { pieRect.y -= inter.crossH; - } else if (inter.direction == 'Right-Bottom') { + } else if (inter.direction === 'Right-Bottom') { pieRect.y += inter.crossH; - } else if (inter.direction == 'Left-Top') { + } else if (inter.direction === 'Left-Top') { pieRect.y -= inter.crossH; - } else if (inter.direction == 'Left-Bottom') { + } else if (inter.direction === 'Left-Bottom') { pieRect.y += inter.crossH; } this.textRects.push(pieRect); @@ -500,7 +506,7 @@ export class LitChartPie extends BaseElement { if (rect.x > r1.x) { if (rect.y > r1.y) { direction = 'Right-Bottom'; - } else if (rect.y == r1.y) { + } else if (rect.y === r1.y) { direction = 'Right'; } else { direction = 'Right-Top'; @@ -508,13 +514,13 @@ export class LitChartPie extends BaseElement { } else if (rect.x < r1.x) { if (rect.y > r1.y) { direction = 'Left-Bottom'; - } else if (rect.y == r1.y) { + } else if (rect.y === r1.y) { direction = 'Left'; } else { direction = 'Left-Top'; } } else { - direction = this.rectSuperposition(rect,r1); + direction = this.rectSuperposition(rect, r1); } return { cross, @@ -524,24 +530,24 @@ export class LitChartPie extends BaseElement { }; } - rectSuperposition(rect: Rectangle,r1: Rectangle):string{ + rectSuperposition(rect: Rectangle, r1: Rectangle): string { if (rect.y > r1.y) { return 'Bottom'; - } else if (rect.y == r1.y) { + } else if (rect.y === r1.y) { return 'Right'; //superposition default right } else { return 'Top'; } } - showTip(x: number, y: number, msg: string) { + showTip(x: number, y: number, msg: string): void { this.pieTipEL!.style.display = 'flex'; this.pieTipEL!.style.top = `${y}px`; this.pieTipEL!.style.left = `${x}px`; this.pieTipEL!.innerHTML = msg; } - hideTip() { + hideTip(): void { this.pieTipEL!.style.display = 'none'; } diff --git a/ide/src/base-ui/chart/pie/LitChartPieData.ts b/ide/src/base-ui/chart/pie/LitChartPieData.ts index af3a4b8e..8af427c0 100644 --- a/ide/src/base-ui/chart/pie/LitChartPieData.ts +++ b/ide/src/base-ui/chart/pie/LitChartPieData.ts @@ -13,7 +13,7 @@ * limitations under the License. */ -export function randomRgbColor() { +export function randomRgbColor(): string { const letters = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { diff --git a/ide/src/base-ui/chart/scatter/LitChartScatter.ts b/ide/src/base-ui/chart/scatter/LitChartScatter.ts index 2abbb7c2..0927b24d 100644 --- a/ide/src/base-ui/chart/scatter/LitChartScatter.ts +++ b/ide/src/base-ui/chart/scatter/LitChartScatter.ts @@ -59,14 +59,7 @@ export class LitChartScatter extends BaseElement { drawBackground(): void { let w: number = this.clientWidth; let h: number = this.clientHeight; - let color: CanvasGradient = this.ctx?.createRadialGradient( - w / 2, - h / 2, - 0.2 * w, - w / 2, - h / 2, - 0.5 * w - )!; + let color: CanvasGradient = this.ctx?.createRadialGradient(w / 2, h / 2, 0.2 * w, w / 2, h / 2, 0.5 * w)!; color?.addColorStop(0, '#eaeaea'); color?.addColorStop(1, '#ccc'); if (this.options) { @@ -140,8 +133,7 @@ export class LitChartScatter extends BaseElement { // 画Y轴坐标尺 for (let i = 0; i < yAxis.length; i++) { let length1: number = - (this.originY - this.finalY - ((this.originY - this.finalY) % QUYU)) * - (yAxis[i] / yAxis[yAxis.length - 1]); + (this.originY - this.finalY - ((this.originY - this.finalY) % QUYU)) * (yAxis[i] / yAxis[yAxis.length - 1]); let length2: number = this.originY - length1; let text: string = yAxis[i].toString(); let x: number = this.originX - this.ctx?.measureText(text).width! - AXAIS_DELTA; @@ -167,8 +159,7 @@ export class LitChartScatter extends BaseElement { } for (let i = 0; i < xAxis.length; i++) { let length3: number = - (this.finalX - this.originX - ((this.finalX - this.originX) % QUYU)) * - (xAxis[i] / xAxis[xAxis.length - 1]); + (this.finalX - this.originX - ((this.finalX - this.originX) % QUYU)) * (xAxis[i] / xAxis[xAxis.length - 1]); let length4: number = this.originX + length3; this.ctx?.beginPath(); this.ctx?.moveTo(length4, this.originY); @@ -229,20 +220,14 @@ export class LitChartScatter extends BaseElement { if (data[i].length) { rectY = rectY + 20; this.ctx?.fillText(colorPoolText[i] + ': ', this.clientWidth - WIDTH_DELTA, rectY + 4); - this.drawCycle(this.clientWidth - (QUYU / 5), rectY, 7.5, 0.8, colorPool[i]); + this.drawCycle(this.clientWidth - QUYU / 5, rectY, 7.5, 0.8, colorPool[i]); } } } /** * 画圆点 */ - drawCycle( - x: number, - y: number, - r: number, - transparency: number, - color: string - ): void { + drawCycle(x: number, y: number, r: number, transparency: number, color: string): void { this.ctx!.fillStyle = color; this.ctx?.beginPath(); this.ctx!.globalAlpha = transparency; @@ -263,11 +248,8 @@ export class LitChartScatter extends BaseElement { } // data[1]用来标注n Hz负载线 let addr1: number = - this.originX + - (this.finalX - this.originX - ((this.finalX - this.originX) % QUYU)) * - (data[0] / maxXAxis); - let addr2: number = - (this.originY - this.finalY - ((this.originY - this.finalY) % QUYU)) / FOR_VALUE; + this.originX + (this.finalX - this.originX - ((this.finalX - this.originX) % QUYU)) * (data[0] / maxXAxis); + let addr2: number = (this.originY - this.finalY - ((this.originY - this.finalY) % QUYU)) / FOR_VALUE; let y: number = this.originY; this.ctx!.strokeStyle = '#ff0000'; for (let i = 0; i < FOR_VALUE; i++) { @@ -289,11 +271,7 @@ export class LitChartScatter extends BaseElement { this.ctx!.fillStyle = '#000000'; this.ctx?.fillText('过供给区', addr1 / 2, y + FOR_VALUE / 2); this.ctx?.fillText('欠供给区', addr1 / 2, this.originY - this.finalY); - this.ctx?.fillText( - '超负载区', - addr1 + FOR_VALUE / 3, - (this.finalY + this.originY) / 2 - ); + this.ctx?.fillText('超负载区', addr1 + FOR_VALUE / 3, (this.finalY + this.originY) / 2); } /** @@ -308,10 +286,8 @@ export class LitChartScatter extends BaseElement { } // data[1]用来标注n Hz均衡线 let addr1: number = - ((this.finalX - this.originX - ((this.finalX - this.originX) % QUYU)) * - (data[0] / maxXAxis)) / FOR_VALUE; - let addr2: number = - (this.originY - this.finalY - ((this.originY - this.finalY) % QUYU)) / FOR_VALUE; + ((this.finalX - this.originX - ((this.finalX - this.originX) % QUYU)) * (data[0] / maxXAxis)) / FOR_VALUE; + let addr2: number = (this.originY - this.finalY - ((this.originY - this.finalY) % QUYU)) / FOR_VALUE; let x: number = this.originX; let y: number = this.originY; this.ctx!.strokeStyle = '#00ff00'; @@ -335,10 +311,7 @@ export class LitChartScatter extends BaseElement { } /*检测是否hover在散点之上*/ - checkHover( - options: LitChartScatterConfig | undefined, - pos: Object - ): Object | boolean { + checkHover(options: LitChartScatterConfig | undefined, pos: Object): Object | boolean { let data: Array = []; if (options) { data = options.paintingData; @@ -427,10 +400,21 @@ export class LitChartScatter extends BaseElement { * 显示提示框 */ showTip(data: any): void { - const Y_DELTA: number = 70; + const minWidth: number = 140; + const miniHeight: number = 60; + const canvasWidth: number = Number(this.canvas?.style.width.replace('px', '')); + const canvasHeight: number = Number(this.canvas?.style.height.replace('px', '')); this.scatterTipEL!.style.display = 'flex'; - this.scatterTipEL!.style.top = `${data.y - Y_DELTA}px`; - this.scatterTipEL!.style.left = `${data.x}px`; + if (canvasWidth - data.x < minWidth && canvasHeight - data.y >= miniHeight) { + this.scatterTipEL!.style.top = `${data.y}px`; + this.scatterTipEL!.style.left = `${data.x - minWidth}px`; + } else if (canvasHeight - data.y < miniHeight && canvasWidth - data.x > minWidth) { + this.scatterTipEL!.style.top = `${data.y - miniHeight}px`; + this.scatterTipEL!.style.left = `${data.x}px`; + } else { + this.scatterTipEL!.style.top = `${data.y}px`; + this.scatterTipEL!.style.left = `${data.x}px`; + } this.scatterTipEL!.innerHTML = this.options!.tip(data); // @ts-ignore this.options!.hoverEvent('CPU-FREQ', true, data.c[2] - 1); @@ -469,8 +453,7 @@ export class LitChartScatter extends BaseElement { */ if (hoverPoint) { this.showTip(hoverPoint); - let samePoint: boolean = - this.options!.hoverData === hoverPoint ? true : false; + let samePoint: boolean = this.options!.hoverData === hoverPoint ? true : false; if (!samePoint) { this.resetHoverWithOffScreen(); this.options!.hoverData = hoverPoint; @@ -499,7 +482,8 @@ export class LitChartScatter extends BaseElement { } initHtml(): string { - return ` + return ( + ` `; -const initHtmlStyle = (padding: string, width: string) => { +const initHtmlStyle = (padding: string, width: string): string => { return replacePlaceholders(css, padding, width); }; @element('lit-drawer') export class LitDrawer extends BaseElement { - static get observedAttributes() { - return ['drawer-title', 'visible', 'placement', 'mask', 'mask-closable', 'closeable', 'content-padding', 'content-width']; + static get observedAttributes(): string[] { + return [ + 'drawer-title', + 'visible', + 'placement', + 'mask', + 'mask-closable', + 'closeable', + 'content-padding', + 'content-width', + ]; } initHtml(): string { @@ -234,34 +243,34 @@ export class LitDrawer extends BaseElement { `; } - get contentWidth() { + get contentWidth(): string { return this.getAttribute('content-width') || '400px'; } set contentWidth(value) { this.shadowRoot!.querySelector('.drawer')!.style.width = value; this.setAttribute('content-width', value); } - get contentPadding() { + get contentPadding(): string { return this.getAttribute('content-padding') || '20px'; } set contentPadding(value) { this.shadowRoot!.querySelector('slot')!.style.padding = value; this.setAttribute('content-padding', value); } - get placement() { + get placement(): string | null { return this.getAttribute('placement'); } set placement(value: any) { this.setAttribute('placement', value); } - get drawerTitle() { + get drawerTitle(): string { return this.getAttribute('drawer-title') || ''; } set drawerTitle(value) { this.shadowRoot!.querySelector('#drawer-tittle-text')!.textContent = value; this.setAttribute('drawer-title', value); } - get visible() { + get visible(): boolean { return this.getAttribute('visible') !== null; } set visible(value: any) { @@ -271,7 +280,7 @@ export class LitDrawer extends BaseElement { this.removeAttribute('visible'); } } - get mask() { + get mask(): boolean { return this.getAttribute('mask') !== null; } set mask(value) { @@ -281,7 +290,7 @@ export class LitDrawer extends BaseElement { this.removeAttribute('mask'); } } - get maskCloseable() { + get maskCloseable(): boolean { return this.getAttribute('mask-closeable') !== null; } set maskCloseable(value) { @@ -291,7 +300,7 @@ export class LitDrawer extends BaseElement { this.removeAttribute('mask-closeable'); } } - get closeable() { + get closeable(): boolean { return this.getAttribute('closeable') !== null; } @@ -307,14 +316,14 @@ export class LitDrawer extends BaseElement { initElements(): void { let bg: HTMLDivElement | null = this.shadowRoot!.querySelector('.bg'); if (this.maskCloseable) { - bg!.onclick = (e: any) => { + bg!.onclick = (e: any): void => { e.stopPropagation(); this.visible = false; this.dispatchEvent(new CustomEvent('onClose', e)); }; } if (this.closeable) { - (this.shadowRoot!.querySelector('.close-icon') as any).onclick = (e: any) => { + (this.shadowRoot!.querySelector('.close-icon') as any).onclick = (e: any): void => { this.visible = false; this.dispatchEvent(new CustomEvent('onClose', e)); }; @@ -324,13 +333,13 @@ export class LitDrawer extends BaseElement { this.addEventListener('onClose', fn); } //当 custom element从文档DOM中删除时，被调用。 - disconnectedCallback() {} + disconnectedCallback(): void {} //当 custom element被移动到新的文档时，被调用。 - adoptedCallback() {} + adoptedCallback(): void {} //当 custom element增加、删除、修改自身属性时，被调用。 - attributeChangedCallback(name: string, oldValue: string, newValue: string) { + attributeChangedCallback(name: string, oldValue: string, newValue: string): void { if (this.mask) { if (name === 'visible') { if (newValue !== null) { diff --git a/ide/src/base-ui/icon/LitIcon.ts b/ide/src/base-ui/icon/LitIcon.ts index 0ef82237..92312d0d 100644 --- a/ide/src/base-ui/icon/LitIcon.ts +++ b/ide/src/base-ui/icon/LitIcon.ts @@ -26,7 +26,7 @@ export class LitIcon extends BaseElement { private _color?: string; private _path?: string; - static get observedAttributes() { + static get observedAttributes(): string[] { return ['name', 'size', 'color', 'path']; } @@ -88,7 +88,7 @@ export class LitIcon extends BaseElement { `; } - initElements() { + initElements(): void { if (this.shadowRoot) { this.icon = this.shadowRoot.getElementById('icon'); this.use = this.shadowRoot.querySelector('use'); @@ -96,20 +96,27 @@ export class LitIcon extends BaseElement { } } - attributeChangedCallback(name: string, oldValue: string, value: string) { + attributeChangedCallback(name: string, oldValue: string, value: string): void { switch (name) { case 'name': - if (this.use) + if (this.use) { this.use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `./base-ui/icon.svg#icon-${value}`); + } break; case 'path': - if (this.d) this.d.setAttribute('d', value); + if (this.d) { + this.d.setAttribute('d', value); + } break; case 'color': - if (this.icon) this.icon.style.color = value as string; + if (this.icon) { + this.icon.style.color = value as string; + } break; case 'size': - if (this.icon) this.icon.style.fontSize = `${value}px`; + if (this.icon) { + this.icon.style.fontSize = `${value}px`; + } break; } } diff --git a/ide/src/base-ui/menu/LitMainMenu.ts b/ide/src/base-ui/menu/LitMainMenu.ts index e8884aad..d94ef109 100644 --- a/ide/src/base-ui/menu/LitMainMenu.ts +++ b/ide/src/base-ui/menu/LitMainMenu.ts @@ -19,7 +19,7 @@ import './LitMainMenuGroup'; import { LitMainMenuGroup } from './LitMainMenuGroup'; import { LitMainMenuItem } from './LitMainMenuItem'; -const initHtmlStyle:string = ` +const initHtmlStyle: string = ` -` -const initHtmlStyle = (wid: string) => { - return replacePlaceholders(css,wid); +`; +const initHtmlStyle = (wid: string): string => { + return replacePlaceholders(css, wid); }; @element('lit-popover') export class LitPopover extends BaseElement { - static get observedAttributes() { + static get observedAttributes(): string[] { return ['title', 'trigger', 'width', 'placement', 'visible']; } - get visible() { + get visible(): string { return this.getAttribute('visible') || 'false'; } @@ -387,11 +387,11 @@ export class LitPopover extends BaseElement { this.setAttribute('placement', value || 'bottomLeft'); } - get placement() { + get placement(): string | null { return this.getAttribute('placement'); } - get trigger() { + get trigger(): string { return this.getAttribute('trigger') || 'hover'; } @@ -399,15 +399,15 @@ export class LitPopover extends BaseElement { this.setAttribute('trigger', value); } - get title() { - return this.getAttribute('title'); + get title(): string { + return this.getAttribute('title') || ''; } - set title(value: any) { + set title(value: string) { this.setAttribute('title', value); } - get width() { + get width(): string { return this.getAttribute('width') || 'max-content'; } @@ -415,13 +415,13 @@ export class LitPopover extends BaseElement { this.setAttribute('width', value); } - get haveRadio() { + get haveRadio(): string | null { return this.getAttribute('haveRadio'); } initElements(): void {} - initHtml() { + initHtml(): string { return ` ${initHtmlStyle(this.width)} @@ -433,17 +433,17 @@ export class LitPopover extends BaseElement { `; } - connectedCallback() { + connectedCallback(): void { let popover: any = this.shadowRoot!.querySelector('.popover'); let checkbox: any = this.shadowRoot!.querySelector('.trigger-click'); this.setAttribute('tabindex', '1'); - popover.onclick = (e: any) => { + popover.onclick = (e: any): void => { e.stopPropagation(); }; popover.addEventListener('mousemove', (e: any) => { e.stopPropagation(); }); - this.onclick = (e: any) => { + this.onclick = (e: any): void => { e.stopPropagation(); if (e.relatedTarget?.hasAttribute('not-close')) { this.focus(); @@ -451,10 +451,10 @@ export class LitPopover extends BaseElement { checkbox.checked = !checkbox.checked; this.visible = checkbox.checked; }; - popover.onmouseleave = () => { + popover.onmouseleave = (): void => { this.focus(); }; - this.onblur = (ev: any) => { + this.onblur = (ev: any): void => { if (ev.relatedTarget && this.haveRadio) { if (ev.relatedTarget.hasAttribute('not-close')) { } else if (ev.relatedTarget.type === 'radio') { @@ -470,11 +470,11 @@ export class LitPopover extends BaseElement { }; } - disconnectedCallback() {} + disconnectedCallback(): void {} - adoptedCallback() {} + adoptedCallback(): void {} - attributeChangedCallback(name: any, oldValue: any, newValue: any) { + attributeChangedCallback(name: any, oldValue: any, newValue: any): void { if (name === 'visible') { if (newValue === 'false') { // @ts-ignore diff --git a/ide/src/base-ui/progress-bar/LitProgressBar.ts b/ide/src/base-ui/progress-bar/LitProgressBar.ts index bd6050a8..52f9fb39 100644 --- a/ide/src/base-ui/progress-bar/LitProgressBar.ts +++ b/ide/src/base-ui/progress-bar/LitProgressBar.ts @@ -17,7 +17,7 @@ import { BaseElement, element } from '../BaseElement'; @element('lit-progress-bar') export class LitProgressBar extends BaseElement { - static get observedAttributes() { + static get observedAttributes(): string[] { return ['loading']; } diff --git a/ide/src/base-ui/radiobox/LitRadioBox.ts b/ide/src/base-ui/radiobox/LitRadioBox.ts index 21fab3d4..93e003a7 100644 --- a/ide/src/base-ui/radiobox/LitRadioBox.ts +++ b/ide/src/base-ui/radiobox/LitRadioBox.ts @@ -159,20 +159,19 @@ export class LitRadioBox extends BaseElement { private parent: LitRadioGroup | undefined | null; private radio: HTMLInputElement | undefined | null; - static get observedAttributes() { + static get observedAttributes(): string[] { return ['checked', 'value', 'disabled']; } - get disabled() { + get disabled(): boolean { return this.getAttribute('disabled') !== null; } - - get checked() { + get checked(): boolean { return this.getAttribute('checked') !== null; } - get name() { + get name(): string | null { return this.getAttribute('name'); } @@ -184,7 +183,7 @@ export class LitRadioBox extends BaseElement { } } - get value() { + get value(): string { let slot = this.shadowRoot?.getElementById('slot'); return slot!.textContent || this.textContent || ''; } @@ -223,13 +222,13 @@ export class LitRadioBox extends BaseElement { this.radio = this.shadowRoot?.getElementById('radio') as HTMLInputElement; } - connectedCallback() { + connectedCallback(): void { this.group = this.closest('lit-radio-group') as LitRadioGroup; this.parent = this.group || this.getRootNode(); this.radio = this.shadowRoot?.getElementById('radio') as HTMLInputElement; this.checked = this.checked; this.radio.addEventListener('change', () => { - const selector = this.group ? `lit-radio[checked]` : `lit-radio[name="${this.name}"][checked]`; + const selector = this.group ? 'lit-radio[checked]' : 'lit-radio[name="${this.name}"][checked]'; const siblingNode = this.parent?.querySelector(selector) as LitRadioBox; if (siblingNode) { siblingNode.checked = false; @@ -238,11 +237,11 @@ export class LitRadioBox extends BaseElement { }); } - attributeChangedCallback(name: string, oldValue: string, newValue: string) { - if (name == 'checked' && this.radio) { + attributeChangedCallback(name: string, oldValue: string, newValue: string): void { + if (name === 'checked' && this.radio) { this.radio.checked = newValue !== null; } - if (name == 'value') { + if (name === 'value') { let slot = this.shadowRoot?.getElementById('slot'); slot!.textContent = newValue; } diff --git a/ide/src/base-ui/radiobox/LitRadioGroup.ts b/ide/src/base-ui/radiobox/LitRadioGroup.ts index dfa2e280..38c6cd95 100644 --- a/ide/src/base-ui/radiobox/LitRadioGroup.ts +++ b/ide/src/base-ui/radiobox/LitRadioGroup.ts @@ -18,7 +18,7 @@ import { LitRadioBox } from './LitRadioBox'; @element('lit-radio-group') export class LitRadioGroup extends BaseElement { - static get observedAttributes() { + static get observedAttributes(): string[] { return ['direction']; } @@ -26,7 +26,7 @@ export class LitRadioGroup extends BaseElement { this.setAttribute('layout', vale); } - get direction() { + get direction(): string | null { return this.getAttribute('direction'); } diff --git a/ide/src/base-ui/select/LitAllocationSelect.ts b/ide/src/base-ui/select/LitAllocationSelect.ts index 10c6d03f..99e75afd 100644 --- a/ide/src/base-ui/select/LitAllocationSelect.ts +++ b/ide/src/base-ui/select/LitAllocationSelect.ts @@ -113,15 +113,15 @@ export class LitAllocationSelect extends BaseElement { private selectAllocationOptions: any; private processDataList: Array = []; - static get observedAttributes() { + static get observedAttributes(): string[] { return ['value', 'disabled', 'placeholder']; } - get defaultPlaceholder() { + get defaultPlaceholder(): string { return this.getAttribute('placeholder') || ''; } - get placeholder() { + get placeholder(): string { return this.getAttribute('placeholder') || this.defaultPlaceholder; } @@ -129,7 +129,7 @@ export class LitAllocationSelect extends BaseElement { this.setAttribute('placeholder', selectAllocationValue); } - get value() { + get value(): string { return this.getAttribute('value') || ''; } @@ -162,7 +162,7 @@ export class LitAllocationSelect extends BaseElement { } } - get listHeight() { + get listHeight(): string { return this.getAttribute('list-height') || '256px'; } @@ -170,7 +170,7 @@ export class LitAllocationSelect extends BaseElement { this.setAttribute('list-height', value); } - attributeChangedCallback(name: any, oldValue: any, newValue: any) { + attributeChangedCallback(name: any, oldValue: any, newValue: any): void { switch (name) { case 'value': this.selectAllocationInputEl!.value = newValue; @@ -184,7 +184,7 @@ export class LitAllocationSelect extends BaseElement { initElements(): void { this.selectAllocationInputContent = this.shadowRoot!.querySelector('.multipleSelect') as HTMLDivElement; this.addEventListener('click', () => { - if (this.selectAllocationOptions.style.visibility == 'visible') { + if (this.selectAllocationOptions.style.visibility === 'visible') { this.selectAllocationOptions.style.visibility = 'hidden'; this.selectAllocationOptions.style.opacity = '0'; } else { @@ -199,7 +199,7 @@ export class LitAllocationSelect extends BaseElement { this.initData(); } - showProcessList() { + showProcessList(): void { setTimeout(() => { if (this.processDataList.length > 0) { this.selectAllocationOptions.style.visibility = 'visible'; @@ -208,7 +208,7 @@ export class LitAllocationSelect extends BaseElement { }, 200); } - initHtml() { + initHtml(): string { return ` ${initHtmlStyle(this.listHeight)}
@@ -224,7 +224,7 @@ export class LitAllocationSelect extends BaseElement { `; } - connectedCallback() { + connectedCallback(): void { this.selectAllocationInputEl!.onkeydown = (ev): void => { // @ts-ignore if (ev.key === '0' && ev.target.value.length === 1 && ev.target.value === '0') { @@ -233,7 +233,7 @@ export class LitAllocationSelect extends BaseElement { }; } - initData() { + initData(): void { this.selectAllocationInputEl = this.shadowRoot!.querySelector('input'); this.selectAllocationOptions = this.shadowRoot!.querySelector('.body') as HTMLDivElement; this.selectAllocationInputEl?.addEventListener('input', () => { diff --git a/ide/src/base-ui/select/LitSelect.ts b/ide/src/base-ui/select/LitSelect.ts index 1f46499e..19ce944d 100644 --- a/ide/src/base-ui/select/LitSelect.ts +++ b/ide/src/base-ui/select/LitSelect.ts @@ -30,7 +30,7 @@ export class LitSelect extends BaseElement { private selectSearchEl: any; private selectMultipleRootEl: any; - static get observedAttributes() { + static get observedAttributes(): string[] { return [ 'value', 'default-value', @@ -46,7 +46,7 @@ export class LitSelect extends BaseElement { ]; } - get value() { + get value(): string { return this.getAttribute('value') || this.defaultValue; } @@ -54,7 +54,7 @@ export class LitSelect extends BaseElement { this.setAttribute('value', selectValue); } - get rounded() { + get rounded(): boolean { return this.hasAttribute('rounded'); } @@ -78,7 +78,7 @@ export class LitSelect extends BaseElement { } } - get border() { + get border(): string { return this.getAttribute('border') || 'true'; } @@ -90,7 +90,7 @@ export class LitSelect extends BaseElement { } } - get listHeight() { + get listHeight(): string { return this.getAttribute('list-height') || '256px'; } @@ -98,7 +98,7 @@ export class LitSelect extends BaseElement { this.setAttribute('list-height', selectListHeight); } - get defaultPlaceholder() { + get defaultPlaceholder(): string { return this.getAttribute('placeholder') || '请选择'; } @@ -110,14 +110,14 @@ export class LitSelect extends BaseElement { } } - get canInsert() { + get canInsert(): boolean { return this.hasAttribute('canInsert'); } - get showSearch() { + get showSearch(): boolean { return this.hasAttribute('show-search'); } - get defaultValue() { + get defaultValue(): string { return this.getAttribute('default-value') || ''; } @@ -125,7 +125,7 @@ export class LitSelect extends BaseElement { this.setAttribute('default-value', selectDefaultValue); } - get placeholder() { + get placeholder(): string { return this.getAttribute('placeholder') || this.defaultPlaceholder; } @@ -133,7 +133,7 @@ export class LitSelect extends BaseElement { this.setAttribute('placeholder', selectPlaceHolder); } - get loading() { + get loading(): boolean { return this.hasAttribute('loading'); } @@ -145,7 +145,7 @@ export class LitSelect extends BaseElement { } } - get showSearchInput() { + get showSearchInput(): boolean { return this.hasAttribute('showSearchInput'); } @@ -162,8 +162,7 @@ export class LitSelect extends BaseElement { } set dataSource(selectDataSource: any) { - - this.innerHTML = ``; + this.innerHTML = ''; if (selectDataSource.length > 0) { this.bodyEl!.style.display = 'flex'; this.querySelectorAll('lit-select-option').forEach((a) => this.removeChild(a)); @@ -212,14 +211,13 @@ export class LitSelect extends BaseElement { } } - initHtml() { + initHtml(): string { return ` ${selectHtmlStr(this.listHeight)}
-
+ +
@@ -237,11 +235,11 @@ export class LitSelect extends BaseElement { `; } - isMultiple() { + isMultiple(): boolean { return this.hasAttribute('mode') && this.getAttribute('mode') === 'multiple'; } - newTag(value: any, text: any) { + newTag(value: any, text: any): HTMLDivElement { let tag: any = document.createElement('div'); let icon: any = document.createElement('lit-icon'); icon.classList.add('tag-close'); @@ -252,10 +250,10 @@ export class LitSelect extends BaseElement { span.textContent = text; tag.append(span); tag.append(icon); - icon.onclick = (ev: any) => { + icon.onclick = (ev: any): void => { tag.parentElement.removeChild(tag); this.querySelector(`lit-select-option[value=${value}]`)!.removeAttribute('selected'); - if (this.shadowRoot!.querySelectorAll('.tag').length == 0) { + if (this.shadowRoot!.querySelectorAll('.tag').length === 0) { this.selectInputEl.style.width = 'auto'; this.selectInputEl.placeholder = this.defaultPlaceholder; } @@ -268,7 +266,7 @@ export class LitSelect extends BaseElement { return tag; } - connectedCallback() { + connectedCallback(): void { this.tabIndex = 0; this.focused = false; this.bodyEl = this.shadowRoot!.querySelector('.body'); @@ -280,8 +278,10 @@ export class LitSelect extends BaseElement { this.selectOptions = this.shadowRoot!.querySelector('.body-opt') as HTMLDivElement; this.setEventClick(); this.setEvent(); - this.selectInputEl.onblur = (ev: any) => { - if (this.hasAttribute('disabled')) return; + this.selectInputEl.onblur = (ev: any): void => { + if (this.hasAttribute('disabled')) { + return; + } if (this.isMultiple()) { if (this.hasAttribute('show-search')) { this.selectSearchEl.style.display = 'none'; @@ -303,7 +303,7 @@ export class LitSelect extends BaseElement { } setOninput(): void { - this.selectInputEl.oninput = (ev: any) => { + this.selectInputEl.oninput = (ev: any): void => { let els: Element[] = [...this.querySelectorAll('lit-select-option')]; if (this.hasAttribute('show-search')) { if (!ev.target.value) { @@ -332,7 +332,7 @@ export class LitSelect extends BaseElement { } setEventClick(): void { - this.selectClearEl.onclick = (ev: any) => { + this.selectClearEl.onclick = (ev: any): void => { if (this.isMultiple()) { let delNodes: Array = []; this.selectMultipleRootEl.childNodes.forEach((a: any) => { @@ -343,7 +343,7 @@ export class LitSelect extends BaseElement { for (let i = 0; i < delNodes.length; i++) { delNodes[i].remove(); } - if (this.shadowRoot!.querySelectorAll('.tag').length == 0) { + if (this.shadowRoot!.querySelectorAll('.tag').length === 0) { this.selectInputEl.style.width = 'auto'; this.selectInputEl.placeholder = this.defaultPlaceholder; } @@ -357,7 +357,7 @@ export class LitSelect extends BaseElement { this.dispatchEvent(new CustomEvent('onClear', { detail: ev })); }; this.initOptions(); - this.onclick = (ev: any) => { + this.onclick = (ev: any): void => { if (ev.target.tagName === 'LIT-SELECT') { if (this.focused === false) { this.selectInputEl.focus(); @@ -371,7 +371,7 @@ export class LitSelect extends BaseElement { } setEvent(): void { - this.onmouseover = this.onfocus = (ev) => { + this.onmouseover = this.onfocus = (ev): void => { if (this.focused === false && this.hasAttribute('adaptive-expansion')) { if (this.parentElement!.offsetTop < this.bodyEl!.clientHeight) { this.bodyEl!.classList.add('body-bottom'); @@ -389,15 +389,17 @@ export class LitSelect extends BaseElement { } } }; - this.onmouseout = this.onblur = (ev) => { + this.onmouseout = this.onblur = (ev): void => { if (this.hasAttribute('allow-clear')) { this.selectClearEl.style.display = 'none'; this.selectIconEl.style.display = 'flex'; } this.focused = false; }; - this.selectInputEl.onfocus = (ev: any) => { - if (this.hasAttribute('disabled')) return; + this.selectInputEl.onfocus = (ev: any): void => { + if (this.hasAttribute('disabled')) { + return; + } if (this.selectInputEl.value.length > 0) { this.selectInputEl.placeholder = this.selectInputEl.value; this.selectInputEl.value = ''; @@ -414,14 +416,14 @@ export class LitSelect extends BaseElement { } setOnkeydown(): void { - this.selectInputEl.onkeydown = (ev: any) => { + this.selectInputEl.onkeydown = (ev: any): void => { if (ev.key === 'Backspace') { if (this.isMultiple()) { let tag = this.selectMultipleRootEl.lastElementChild.previousElementSibling; if (tag) { this.querySelector(`lit-select-option[value=${tag.value}]`)?.removeAttribute('selected'); tag.remove(); - if (this.shadowRoot!.querySelectorAll('.tag').length == 0) { + if (this.shadowRoot!.querySelectorAll('.tag').length === 0) { this.selectInputEl.style.width = 'auto'; this.selectInputEl.placeholder = this.defaultPlaceholder; } @@ -456,7 +458,7 @@ export class LitSelect extends BaseElement { }; } - initOptions() { + initOptions(): void { this.querySelectorAll('lit-select-option').forEach((a) => { if (this.isMultiple()) { a.setAttribute('check', ''); @@ -500,7 +502,7 @@ export class LitSelect extends BaseElement { this.selectInputEl.value = ''; this.selectInputEl.style.width = '1px'; } - if (this.shadowRoot!.querySelectorAll('.tag').length == 0) { + if (this.shadowRoot!.querySelectorAll('.tag').length === 0) { this.selectInputEl.style.width = 'auto'; this.selectInputEl.placeholder = this.defaultPlaceholder; } @@ -524,12 +526,12 @@ export class LitSelect extends BaseElement { }); } - clear() { + clear(): void { this.selectInputEl.value = ''; this.selectInputEl.placeholder = this.defaultPlaceholder; } - reset() { + reset(): void { this.querySelectorAll('lit-select-option').forEach((a) => { [...this.querySelectorAll('lit-select-option')].forEach((a) => a.removeAttribute('selected')); if (a.getAttribute('value') === this.defaultValue) { @@ -539,11 +541,11 @@ export class LitSelect extends BaseElement { }); } - disconnectedCallback() {} + disconnectedCallback(): void {} - adoptedCallback() {} + adoptedCallback(): void {} - attributeChangedCallback(name: any, oldValue: any, newValue: any) { + attributeChangedCallback(name: any, oldValue: any, newValue: any): void { if (name === 'value' && this.selectInputEl) { if (newValue) { [...this.querySelectorAll('lit-select-option')].forEach((a) => { diff --git a/ide/src/base-ui/select/LitSelectOption.ts b/ide/src/base-ui/select/LitSelectOption.ts index a9f58c3c..8dbe1a34 100644 --- a/ide/src/base-ui/select/LitSelectOption.ts +++ b/ide/src/base-ui/select/LitSelectOption.ts @@ -67,11 +67,11 @@ const initHtmlStyle: string = ` `; export class LitSelectOption extends BaseElement { - static get observedAttributes() { + static get observedAttributes(): string[] { return ['selected', 'disabled', 'check']; } - initHtml() { + initHtml(): string { return ` ${initHtmlStyle}
@@ -85,9 +85,9 @@ export class LitSelectOption extends BaseElement { initElements(): void {} //当 custom element首次被插入文档DOM时，被调用。 - connectedCallback() { + connectedCallback(): void { if (!this.hasAttribute('disabled')) { - this.onclick = (ev) => { + this.onclick = (ev): void => { this.dispatchEvent( new CustomEvent('onSelected', { detail: { @@ -103,13 +103,13 @@ export class LitSelectOption extends BaseElement { } //当 custom element从文档DOM中删除时，被调用。 - disconnectedCallback() {} + disconnectedCallback(): void {} //当 custom element被移动到新的文档时，被调用。 - adoptedCallback() {} + adoptedCallback(): void {} //当 custom element增加、删除、修改自身属性时，被调用。 - attributeChangedCallback(name: any, oldValue: any, newValue: any) {} + attributeChangedCallback(name: any, oldValue: any, newValue: any): void {} } if (!customElements.get('lit-select-option')) { diff --git a/ide/src/base-ui/select/LitSelectV.ts b/ide/src/base-ui/select/LitSelectV.ts index dc87e875..cd92a723 100644 --- a/ide/src/base-ui/select/LitSelectV.ts +++ b/ide/src/base-ui/select/LitSelectV.ts @@ -15,7 +15,7 @@ import { BaseElement, element } from '../BaseElement'; import { LitSelectOption } from './LitSelectOption'; -import {selectHtmlStr, selectVHtmlStr} from './LitSelectHtml'; +import { selectHtmlStr, selectVHtmlStr } from './LitSelectHtml'; @element('lit-select-v') export class LitSelectV extends BaseElement { @@ -31,15 +31,15 @@ export class LitSelectV extends BaseElement { private valueStr: string = ''; - static get observedAttributes() { + static get observedAttributes(): string[] { return ['value', 'default-value', 'placeholder', 'disabled', 'show-search', 'border', 'mode']; } - get value() { + get value(): string { return this.selectVInputEl!.value || this.defaultValue; } - get rounded() { + get rounded(): boolean { return this.hasAttribute('rounded'); } @@ -63,7 +63,7 @@ export class LitSelectV extends BaseElement { } } - get border() { + get border(): string { return this.getAttribute('border') || 'true'; } @@ -75,11 +75,11 @@ export class LitSelectV extends BaseElement { } } - get defaultPlaceholder() { + get defaultPlaceholder(): string { return this.getAttribute('placeholder') || ''; } - get defaultValue() { + get defaultValue(): string { return this.getAttribute('default-value') || ''; } @@ -87,7 +87,7 @@ export class LitSelectV extends BaseElement { this.setAttribute('default-value', selectVDefaultValue); } - get placeholder() { + get placeholder(): string { return this.getAttribute('placeholder') || this.defaultPlaceholder; } @@ -103,17 +103,17 @@ export class LitSelectV extends BaseElement { } } - get all() { + get all(): boolean { return this.hasAttribute('is-all'); } - dataSource(selectVData: Array, valueStr: string) { + dataSource(selectVData: Array, valueStr: string): void { this.selectVOptions!.innerHTML = ''; if (selectVData.length > 0) { this.selectVBody!.style.display = 'block'; this.valueStr = valueStr; this.itemValue = selectVData; - if (valueStr != '') { + if (valueStr !== '') { let option = document.createElement('lit-select-option'); if (this.all) { option.setAttribute('selected', ''); @@ -131,13 +131,13 @@ export class LitSelectV extends BaseElement { } else { this.selectVBody!.style.display = 'none'; } - if (this.title == 'Event List') { + if (this.title === 'Event List') { let inputElement = this.shadowRoot?.querySelector('input') as HTMLInputElement; inputElement.readOnly = false; } } - initDataItem(selectVDataItem: Array) { + initDataItem(selectVDataItem: Array): void { selectVDataItem.forEach((item) => { let selectVOption = document.createElement('lit-select-option'); if (this.showItems.indexOf(item) > -1 || this.all) { @@ -158,7 +158,7 @@ export class LitSelectV extends BaseElement { this.selectVBody = this.shadowRoot!.querySelector('.body') as HTMLDivElement; this.selectVOptions = this.shadowRoot!.querySelector('.body-opt') as HTMLDivElement; this.selectVIconEl = this.shadowRoot!.querySelector('.icon'); - this.selectVInputEl!.oninput = (ev: InputEvent) => { + this.selectVInputEl!.oninput = (ev: InputEvent): void => { // @ts-ignore if (this.selectVInputEl!.value === '00') { this.selectVInputEl!.value = '0'; @@ -171,13 +171,13 @@ export class LitSelectV extends BaseElement { }); } }; - this.selectVSearchInputEl!.onkeydown = (ev: KeyboardEvent) => { + this.selectVSearchInputEl!.onkeydown = (ev: KeyboardEvent): void => { // @ts-ignore if (ev.key === '0' && ev.target.value.length === 1 && ev.target.value === '0') { ev.preventDefault(); } }; - this.onclick = (ev: any) => { + this.onclick = (ev: any): void => { if (this.focused === false) { this.focused = true; } else { @@ -197,19 +197,23 @@ export class LitSelectV extends BaseElement { this.setEvent(); } - setEvent():void{ - this.onmouseout = this.onblur = (ev) => { + setEvent(): void { + this.onmouseout = this.onblur = (ev): void => { this.focused = false; }; - this.selectVInputEl.onfocus = (ev: any) => { - if (this.hasAttribute('disabled')) return; + this.selectVInputEl.onfocus = (ev: any): void => { + if (this.hasAttribute('disabled')) { + return; + } }; - this.selectVInputEl.onblur = (ev: any) => { - if (this.hasAttribute('disabled')) return; + this.selectVInputEl.onblur = (ev: any): void => { + if (this.hasAttribute('disabled')) { + return; + } }; } - initHtml() { + initHtml(): string { return ` ${selectVHtmlStr}
@@ -228,9 +232,9 @@ export class LitSelectV extends BaseElement { `; } - connectedCallback() {} + connectedCallback(): void {} - initCustomOptions() { + initCustomOptions(): void { let querySelector = this.shadowRoot?.querySelector( `lit-select-option[value="${this.valueStr}"]` ) as LitSelectOption; @@ -250,7 +254,7 @@ export class LitSelectV extends BaseElement { } else { let index = this.itemValue.indexOf(a.textContent!); let value = this.showItems.indexOf(a.textContent!); - if (index > -1 && value == -1) { + if (index > -1 && value === -1) { this.showItems.push(a.textContent!); this.selectVInputEl!.value = this.showItems; } @@ -268,7 +272,7 @@ export class LitSelectV extends BaseElement { this.selectAll(querySelector); } - initOptions() { + initOptions(): void { this.shadowRoot?.querySelectorAll('lit-select-option').forEach((a) => { a.setAttribute('check', ''); a.addEventListener('onSelected', (e: any) => { @@ -288,9 +292,9 @@ export class LitSelectV extends BaseElement { let items = this.selectVInputEl!.value.split(','); this.customItem = []; items.forEach((item: string) => { - if (item.trim() != '') { + if (item.trim() !== '') { let indexItem = this.itemValue.indexOf(item.trim()); - if (indexItem == -1) { + if (indexItem === -1) { this.customItem.push(item.trim()); } } @@ -304,7 +308,7 @@ export class LitSelectV extends BaseElement { }); } - selectAll(querySelector: LitSelectOption) { + selectAll(querySelector: LitSelectOption): void { querySelector?.addEventListener('click', (ev) => { if (querySelector.hasAttribute('selected')) { this.shadowRoot?.querySelectorAll('lit-select-option').forEach((a) => { @@ -326,5 +330,5 @@ export class LitSelectV extends BaseElement { }); } - attributeChangedCallback(name: any, oldValue: any, newValue: any) {} + attributeChangedCallback(name: any, oldValue: any, newValue: any): void {} } diff --git a/ide/src/base-ui/slicer/lit-slicer.ts b/ide/src/base-ui/slicer/lit-slicer.ts index 89c77d87..70133942 100644 --- a/ide/src/base-ui/slicer/lit-slicer.ts +++ b/ide/src/base-ui/slicer/lit-slicer.ts @@ -14,7 +14,7 @@ */ export class LitSlicer extends HTMLElement { - static get observedAttributes() { + static get observedAttributes(): string[] { return ['direction']; //direction = 'horizontal'或者'vertical' } @@ -48,11 +48,11 @@ export class LitSlicer extends HTMLElement { } } - connectedCallback() {} + connectedCallback(): void {} - disconnectedCallback() {} + disconnectedCallback(): void {} - attributeChangedCallback(name: any, oldValue: any, newValue: any) { + attributeChangedCallback(name: any, oldValue: any, newValue: any): void { (this as any)[name] = newValue; } @@ -68,11 +68,11 @@ export class LitSlicerTrack extends HTMLElement { private draging: boolean = false; private normalWidth: number = 0; - static get observedAttributes() { + static get observedAttributes(): string[] { return ['range-left', 'range-right']; } - get rangeLeft() { + get rangeLeft(): number { return parseInt(this.getAttribute('range-left') || '200'); } @@ -80,7 +80,7 @@ export class LitSlicerTrack extends HTMLElement { this.setAttribute('range-left', `${val}`); } - get rangeRight() { + get rangeRight(): number { return parseInt(this.getAttribute('range-right') || '300'); } @@ -115,24 +115,28 @@ export class LitSlicerTrack extends HTMLElement { } //当 custom element首次被插入文档DOM时，被调用。 - connectedCallback() { + connectedCallback(): void { this.line = this.shadowRoot?.querySelector('#root'); let parentDirection = this.parentElement!.getAttribute('direction') || 'horizontal'; if (parentDirection.startsWith('h')) { this.line!.className = 'rootH'; let previousElementSibling = this.previousElementSibling as HTMLElement; - let preX: number, preY: number, preWidth: number; - this.line!.onmousedown = (e) => { + let preX: number; + let preY: number; + let preWidth: number; + this.line!.onmousedown = (e): void => { this.draging = true; preX = e.pageX; preWidth = previousElementSibling!.clientWidth; - if (this.normalWidth == 0) this.normalWidth = previousElementSibling!.clientWidth; + if (this.normalWidth === 0) { + this.normalWidth = previousElementSibling!.clientWidth; + } previousElementSibling!.style.width = preWidth + 'px'; document.body.style.userSelect = 'none'; document.body.style.webkitUserSelect = 'none'; // @ts-ignore document.body.style.msUserSelect = 'none'; - document.onmousemove = (e1) => { + document.onmousemove = (e1): void => { if (this.draging) { if ( preWidth + e1.pageX - preX >= this.normalWidth - this.rangeLeft && @@ -142,14 +146,14 @@ export class LitSlicerTrack extends HTMLElement { } } }; - document.onmouseleave = (e2) => { + document.onmouseleave = (e2): void => { this.draging = false; document.body.style.userSelect = 'auto'; document.body.style.webkitUserSelect = 'auto'; // @ts-ignore document.body.style.msUserSelect = 'auto'; }; - document.onmouseup = (e3) => { + document.onmouseup = (e3): void => { this.draging = false; document.body.style.userSelect = 'auto'; document.body.style.webkitUserSelect = 'auto'; @@ -162,39 +166,40 @@ export class LitSlicerTrack extends HTMLElement { } } - isDirection(){ + isDirection(): void { this.line!.className = 'rootV'; let previousElementSibling = this.previousElementSibling as HTMLElement; - let preY: number, preHeight: number; - this.line!.onmousedown = (e) => { + let preY: number; + let preHeight: number; + this.line!.onmousedown = (e): void => { this.draging = true; preY = e.pageY; preHeight = previousElementSibling?.clientHeight; previousElementSibling!.style!.height = preHeight + 'px'; - document.onmousemove = (e1) => { + document.onmousemove = (e1): void => { if (this.draging) { previousElementSibling.style.height = preHeight + e1.pageY - preY + 'px'; } }; - document.onmouseleave = (e2) => { + document.onmouseleave = (e2): void => { this.draging = false; }; - document.onmouseup = (e3) => { + document.onmouseup = (e3): void => { this.draging = false; }; }; } //当 custom element从文档DOM中删除时，被调用。 - disconnectedCallback() { + disconnectedCallback(): void { this.line!.onmousedown = null; } //当 custom element被移动到新的文档时，被调用。 - adoptedCallback() {} + adoptedCallback(): void {} //当 custom element增加、删除、修改自身属性时，被调用。 - attributeChangedCallback(name: any, oldValue: any, newValue: any) {} + attributeChangedCallback(name: any, oldValue: any, newValue: any): void {} } if (!customElements.get('lit-slicer-track')) { diff --git a/ide/src/base-ui/slider/LitSlider.ts b/ide/src/base-ui/slider/LitSlider.ts index 6074efe6..719a695f 100644 --- a/ide/src/base-ui/slider/LitSlider.ts +++ b/ide/src/base-ui/slider/LitSlider.ts @@ -115,7 +115,7 @@ let css = ` } `; -const initHtmlStyle = (str: string | null, text: string | null) => { +const initHtmlStyle = (str: string | null, text: string | null): string => { return replacePlaceholders(css, str!, text!); }; @@ -129,7 +129,7 @@ export class LitSlider extends BaseElement { private currentValue: number = 0; private defaultTimeText: string | undefined | null; - static get observedAttributes() { + static get observedAttributes(): string[] { return ['percent', 'disabled-X', 'custom-slider', 'custom-line', 'custom-button', 'disabled']; } @@ -157,7 +157,7 @@ export class LitSlider extends BaseElement { } } - get disabled() { + get disabled(): boolean { return this.getAttribute('disabled') !== null; } @@ -194,7 +194,7 @@ export class LitSlider extends BaseElement { } } - get disabledX() { + get disabledX(): string { return this.getAttribute('disabled-X') || ''; } @@ -206,7 +206,7 @@ export class LitSlider extends BaseElement { } } - get customSlider() { + get customSlider(): string { return this.getAttribute('custom-slider') || ''; } @@ -218,7 +218,7 @@ export class LitSlider extends BaseElement { } } - get customLine() { + get customLine(): string { return this.getAttribute('custom-line') || ''; } @@ -226,7 +226,7 @@ export class LitSlider extends BaseElement { this.setAttribute('custom-line', value); } - get customButton() { + get customButton(): string { return this.getAttribute('custom-button') || ''; } @@ -234,7 +234,7 @@ export class LitSlider extends BaseElement { this.setAttribute('custom-button', value); } - get percent() { + get percent(): string { return this.getAttribute('percent') || ''; } @@ -245,7 +245,7 @@ export class LitSlider extends BaseElement { this.litSlider!.style.backgroundSize = resultNumber + '%'; } - get resultUnit() { + get resultUnit(): string { return this.getAttribute('resultUnit') || ''; } @@ -258,11 +258,12 @@ export class LitSlider extends BaseElement { } initHtml(): string { + let htmlStyle = initHtmlStyle( + this.getAttribute('defaultColor') ? this.getAttribute('defaultColor') : '#46B1E3', + this.getAttribute('defaultColor') ? this.getAttribute('defaultColor') : '#46B1E3' + ); return ` - ${initHtmlStyle( - this.getAttribute('defaultColor') ? this.getAttribute('defaultColor') : '#46B1E3', - this.getAttribute('defaultColor') ? this.getAttribute('defaultColor') : '#46B1E3' - )} + ${htmlStyle}
@@ -271,7 +272,7 @@ export class LitSlider extends BaseElement { } // It is called when the custom element is first inserted into the document DOM. - connectedCallback() { + connectedCallback(): void { this.slotEl = this.shadowRoot?.querySelector('#slot'); this.litSliderCon = this.shadowRoot?.querySelector('#slider-con'); // Add a slider for input event listeners @@ -282,13 +283,13 @@ export class LitSlider extends BaseElement { } // @ts-ignore - inputKeyDownEvent = (ev) => { + inputKeyDownEvent = (ev): void => { if (ev.key === '0' && ev.target.value.length === 1 && ev.target.value === '0') { ev.preventDefault(); } }; - inputChangeEvent = (event: any) => { + inputChangeEvent = (event: any): void => { if (this.litSlider) { this.currentValue = parseInt(this.litSlider?.value); let resultNumber = @@ -307,15 +308,15 @@ export class LitSlider extends BaseElement { } }; - disconnectedCallback() { + disconnectedCallback(): void { this.litSlider?.removeEventListener('input', this.inputChangeEvent); this.litSlider?.removeEventListener('change', this.inputChangeEvent); this.litSlider?.removeEventListener('change', this.inputKeyDownEvent); } - adoptedCallback() {} + adoptedCallback(): void {} - attributeChangedCallback(name: string, oldValue: string, newValue: string) { + attributeChangedCallback(name: string, oldValue: string, newValue: string): void { switch (name) { case 'percent': if (newValue === null || newValue === '0%') { @@ -330,7 +331,7 @@ export class LitSlider extends BaseElement { } } - formatSeconds(value: string) { + formatSeconds(value: string): string { let result = parseInt(value); let hours = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600); let minute = @@ -338,12 +339,12 @@ export class LitSlider extends BaseElement { let second = Math.floor(result % 60) < 10 ? '0' + Math.floor(result % 60) : Math.floor(result % 60); let resultTime = ''; if (hours === '00') { - resultTime += `00:`; + resultTime += '00:'; } else { resultTime += `${hours}:`; } if (minute === '00') { - resultTime += `00:`; + resultTime += '00:'; } else { resultTime += `${minute}:`; } diff --git a/ide/src/base-ui/switch/lit-switch.ts b/ide/src/base-ui/switch/lit-switch.ts index 725f10df..4d05fb11 100644 --- a/ide/src/base-ui/switch/lit-switch.ts +++ b/ide/src/base-ui/switch/lit-switch.ts @@ -15,7 +15,7 @@ import { BaseElement, element } from '../BaseElement'; -const initHtmlStyle:string = ` +const initHtmlStyle: string = ` - `; \ No newline at end of file + `; diff --git a/ide/src/base-ui/tree/LitTreeNode.ts b/ide/src/base-ui/tree/LitTreeNode.ts index 87f85875..a85af650 100644 --- a/ide/src/base-ui/tree/LitTreeNode.ts +++ b/ide/src/base-ui/tree/LitTreeNode.ts @@ -17,7 +17,7 @@ import '../icon/LitIcon'; import { BaseElement, element } from '../BaseElement'; import { type LitIcon } from '../icon/LitIcon'; import { type TreeItemData } from './LitTree'; -import {LitTreeNodeHtmlStyle} from "./LitTreeNode.html"; +import { LitTreeNodeHtmlStyle } from './LitTreeNode.html'; @element('lit-tree-node') export class LitTreeNode extends BaseElement { diff --git a/ide/src/base-ui/utils/CSVFormater.ts b/ide/src/base-ui/utils/CSVFormater.ts index 3b23a86a..fd7f1b9c 100644 --- a/ide/src/base-ui/utils/CSVFormater.ts +++ b/ide/src/base-ui/utils/CSVFormater.ts @@ -29,9 +29,9 @@ export class JSONToCSV { formatter: undefined, }; let showLabel = typeof isShowLabel === 'undefined' ? true : isShowLabel; - let row = '', - csv = '', - key; + let row = ''; + let csv = ''; + let key: string; // 如果要现实表头文字 if (showLabel) { // 如果有传入自定义的表头文字 @@ -41,7 +41,9 @@ export class JSONToCSV { }); } else { // 如果没有，就直接取数据第一条的对象的属性 - for (key in data[0]) row += key + ','; + for (key in data[0]) { + row += key + ','; + } } row = row.slice(0, -1); csv += row + '\r\n'; @@ -51,7 +53,7 @@ export class JSONToCSV { row = ''; // 如果存在自定义key值 if (columns.key.length) { - row = that.getCsvStr(columns,obj,n,row); + row = that.getCsvStr(columns, obj, n, row); } else { for (key in n) { row += @@ -67,7 +69,7 @@ export class JSONToCSV { this.saveCsvFile(fileName, csv); } - static getCsvStr(columns: any,obj: any,n: any,row: string){ + static getCsvStr(columns: any, obj: any, n: any, row: string): string { let that = this; columns.key.map(function (m: any, idx: number) { let strItem: any = ''; @@ -78,21 +80,20 @@ export class JSONToCSV { } else { strItem = n[m]; } - if (typeof strItem == 'undefined') { + if (typeof strItem === 'undefined') { strItem = ''; - } else if (typeof strItem == 'object') { + } else if (typeof strItem === 'object') { strItem = JSON.stringify(strItem); strItem = strItem.replaceAll('"', ''); } - if (idx === 0 && typeof n['depthCSV'] !== 'undefined') { + if (idx === 0 && typeof n.depthCSV !== 'undefined') { row += '"' + - that.treeDepth(n['depthCSV']) + + that.treeDepth(n.depthCSV) + (typeof columns.formatter === 'function' ? columns.formatter(m, n[m]) || n[m] : strItem) + '",'; } else { - row += - '"' + (typeof columns.formatter === 'function' ? columns.formatter(m, n[m]) || n[m] : strItem) + '",'; + row += '"' + (typeof columns.formatter === 'function' ? columns.formatter(m, n[m]) || n[m] : strItem) + '",'; } }); return row; @@ -125,7 +126,7 @@ export class JSONToCSV { } } - static getDownloadUrl(csvData: any) { + static getDownloadUrl(csvData: any): string | undefined { if (window.Blob && window.URL && (window.URL as any).createObjectURL) { return URL.createObjectURL( new Blob(['\uFEFF' + csvData], { @@ -139,15 +140,13 @@ export class JSONToCSV { let type: any = {}; let agent = navigator.userAgent.toLowerCase(); let has; - (has = agent.indexOf('edge') !== -1 ? (type.edge = 'edge') : agent.match(/rv:([\d.]+)\) like gecko/)) - ? (type.ie = has[1]) - : (has = agent.match(/msie ([\d.]+)/)) - ? (type.ie = has[1]) - : 0; + (has = agent.indexOf('edge') !== -1 ? (type.edge = 'edge') : + agent.match(/rv:([\d.]+)\) like gecko/)) ? (type.ie = has[1]) : + (has = agent.match(/msie ([\d.]+)/)) ? (type.ie = has[1]) : 0; return type; } - static treeDepth(depth: number) { + static treeDepth(depth: number): string { let str = ''; for (let i = 0; i < depth; i++) { str += ' '; @@ -155,11 +154,11 @@ export class JSONToCSV { return str; } - static treeToArr(data: any) { + static treeToArr(data: any): any[] { const result: Array = []; data.forEach((item: any) => { let depthCSV = 0; - const loop = (data: any, depth: any) => { + const loop = (data: any, depth: any): void => { result.push({ depthCSV: depth, ...data }); let child = data.children; if (child) { @@ -182,8 +181,8 @@ export class JSONToCSV { columns.forEach((column) => { let dataIndex = column.getAttribute('data-index'); let columnName = column.getAttribute('title'); - if (columnName == '') { - columnName = dataIndex == 'busyTimeStr' ? 'GetBusyTime(ms)' : dataIndex; + if (columnName === '') { + columnName = dataIndex === 'busyTimeStr' ? 'GetBusyTime(ms)' : dataIndex; } if (columnName !== ' ') { titleList.push(columnName); diff --git a/ide/src/base-ui/utils/ExcelFormater.ts b/ide/src/base-ui/utils/ExcelFormater.ts index a251b19d..70760718 100644 --- a/ide/src/base-ui/utils/ExcelFormater.ts +++ b/ide/src/base-ui/utils/ExcelFormater.ts @@ -13,14 +13,14 @@ * limitations under the License. */ -const htmlStr = () => { - const html_start = ``; +const htmlStr = (): any => { + const html_start = ''; return { - uri : 'data:application/vnd.ms-excel;base64,', - template_ExcelWorksheet : `{SheetName}`, - template_ListWorksheet : ``, - template_WorkBook : - `MIME-Version: 1.0 + uri: 'data:application/vnd.ms-excel;base64,', + template_ExcelWorksheet: '{SheetName}', + template_ListWorksheet: '', + template_WorkBook: + `MIME-Version: 1.0 X-Document-Type: Workbook Content-Type: multipart/related; boundary="----=_NextPart_dummy" @@ -29,8 +29,8 @@ Content-Location: WorkBook.htm Content-Type: text/html; charset=windows-1252 ` + - html_start + - ` + html_start + + ` @@ -57,13 +57,13 @@ Content-Type: text/xml; charset="utf-8" ------=_NextPart_dummy-- -` - } -} +`, + }; +}; export class ExcelFormater { static tmplCellXML = '{data}'; - static base64 = function (s: any) { + static base64 = function (s: any): string { return window.btoa(unescape(encodeURIComponent(s))); }; @@ -79,7 +79,7 @@ export class ExcelFormater { for (let k = 0; k < columns.length; k++) { let dataIndex = columns[k].getAttribute('data-index'); let columnName = columns[k].getAttribute('title'); - if (columnName == '') { + if (columnName === '') { columnName = dataIndex; } let ctx = { @@ -91,7 +91,7 @@ export class ExcelFormater { rowsXML += this.format(this.tmplCellXML, ctx); } rowsXML += ''; - if (data && data.children != undefined && data.children.length > 0) { + if (data && data.children !== undefined && data.children.length > 0) { data.children.forEach((child: any) => { rowsXML += this.createExcelRow(columns, child); }); @@ -99,7 +99,7 @@ export class ExcelFormater { return rowsXML; } - static addImage(baseStr: string) { + static addImage(baseStr: string): string { return `${this.format(this.tmplCellXML, { attributeStyleID: '', nameType: 'String', @@ -108,7 +108,7 @@ export class ExcelFormater { })}`; } - static testExport(dataSource: { columns: any[]; tables: any[]; sheetName: string }[], fileName: string) { + static testExport(dataSource: { columns: any[]; tables: any[]; sheetName: string }[], fileName: string): void { this.tablesToHtmlExcelMultipleSheet(dataSource, fileName); } @@ -116,20 +116,20 @@ export class ExcelFormater { dataSource: { columns: any[]; tables: any[]; sheetName: string }[], fileName: string, image?: string - ) { + ): void { let sheets: any[] = []; - dataSource.forEach((data) => { + dataSource.forEach((data): void => { sheets.push(this.createTableData(data.columns, data.tables, image)); }); this.tablesToExcelTestSheet(sheets, fileName, dataSource); } - static createTableData(columns: any[], dataSource: any[], image?: string) { + static createTableData(columns: any[], dataSource: any[], image?: string): string { let tableData = ''; let columnDatas = columns.map((column) => { let dataIndex = column.getAttribute('data-index'); let columnName = column.getAttribute('title'); - if (columnName == '') { + if (columnName === '') { columnName = dataIndex; } return { @@ -144,7 +144,7 @@ export class ExcelFormater { ); let columnDataIndexes = columnDatas.map((item) => item.dataIndex); dataSource.forEach((data, index) => { - if (index == 0 && image) { + if (index === 0 && image) { tableData += this.createTableRow(columnDataIndexes, data, image); } else { tableData += this.createTableRow(columnDataIndexes, data); @@ -153,7 +153,7 @@ export class ExcelFormater { return tableData; } - static createTHead(columns: any[]) { + static createTHead(columns: any[]): string { let header = ''; columns.forEach((column) => { header += `${column}`; @@ -162,7 +162,7 @@ export class ExcelFormater { return header; } - static createTableRow(columns: any[], data: any, image?: any) { + static createTableRow(columns: any[], data: any, image?: any): string { let childrenData = ''; if (data.children !== undefined) { data.children.forEach((child: any) => { @@ -182,18 +182,18 @@ export class ExcelFormater { tables: any[], filename: string, dataSource: { columns: any[]; tables: any[]; sheetName: string }[] - ) { - const html_start = ``; - let {uri,template_ExcelWorksheet,template_ListWorksheet,template_WorkBook} = htmlStr(); - let template_HTMLWorksheet = - ` + ): void { + const html_start = ''; + let { uri, template_ExcelWorksheet, template_ListWorksheet, template_WorkBook } = htmlStr(); + let template_HTMLWorksheet = + ` ------=_NextPart_dummy Content-Location: sheet{SheetIndex}.htm Content-Type: text/html; charset=windows-1252 ` + - html_start + - ` + html_start + + ` diff --git a/ide/src/base-ui/utils/Template.ts b/ide/src/base-ui/utils/Template.ts index dbfd161e..844b2298 100644 --- a/ide/src/base-ui/utils/Template.ts +++ b/ide/src/base-ui/utils/Template.ts @@ -19,7 +19,7 @@ declare interface HTMLTemplateElement { render(data: any): any; } -(HTMLTemplateElement as any).prototype.render = function (data: any) { +(HTMLTemplateElement as any).prototype.render = function (data: any): HTMLElement { if (!this.$fragment) { const rule = this.getAttribute('rule') || 'v-'; this.$fragment = this.cloneNode(true); @@ -76,7 +76,7 @@ declare interface HTMLTemplateElement { return this.fragment; }; -function parseFor(strFor: String) { +function parseFor(strFor: String): { isArray: boolean, items: string | String, params: string[] } { // Whether it is an object const isObject = strFor.includes(' of '); const reg = /\s(?:in|of)\s/g; @@ -87,7 +87,7 @@ function parseFor(strFor: String) { } // String to template string -(String as any).prototype.interpolate = function (params: any) { +(String as any).prototype.interpolate = function (params: any): Function { const names = Object.keys(params); // @ts-ignore const vals = Object.values(params); @@ -96,7 +96,7 @@ function parseFor(strFor: String) { }; // HTML Character inversion meaning < => < -function escape2Html(str: string) { +function escape2Html(str: string): string { let arrEntities: any = { lt: '<', gt: '>', nbsp: ' ', amp: '&', quot: '"' }; return str.replace(/&(lt|gt|nbsp|amp|quot);/gi, function (all, t) { return arrEntities[t]; diff --git a/ide/src/command/Cmd.ts b/ide/src/command/Cmd.ts index 94a9417f..b92a7b6f 100644 --- a/ide/src/command/Cmd.ts +++ b/ide/src/command/Cmd.ts @@ -18,7 +18,7 @@ import { CmdConstant } from './CmdConstant'; import { HdcDeviceManager } from '../hdc/HdcDeviceManager'; export class Cmd { - static CmdSendPostUtils(uri: string, callback: Function, requestData: any) { + static CmdSendPostUtils(uri: string, callback: Function, requestData: any): void { // @ts-ignore if (window.useWb) { return; @@ -29,7 +29,7 @@ export class Cmd { 'Content-Type': 'application/json', }, body: JSON.stringify(requestData), - }).then((response) => { + }).then((response): void => { if (response.ok) { let result = response.text(); result.then((output) => { @@ -45,7 +45,7 @@ export class Cmd { * @param addr addr of select line * @param callback result callback */ - static execObjDump(command: string, addr: string, callback: Function) { + static execObjDump(command: string, addr: string, callback: Function): void { // @ts-ignore if (window.useWb) { return; @@ -55,7 +55,7 @@ export class Cmd { Cmd.CmdSendPostUtils(uri, callback, data); } - static execHdcCmd(command: string, callback: Function) { + static execHdcCmd(command: string, callback: Function): void { // @ts-ignore if (window.useWb) { return; @@ -68,7 +68,7 @@ export class Cmd { Cmd.CmdSendPostUtils(uri, callback, data); } - static async execFileRecv(command: string, filePath: string, callback: Function) { + static async execFileRecv(command: string, filePath: string, callback: Function): Promise { // @ts-ignore if (window.useWb) { return; @@ -90,7 +90,7 @@ export class Cmd { callback(buf); } - static execHdcTraceCmd(command: string, serialNumber: string, callback: Function) { + static execHdcTraceCmd(command: string, serialNumber: string, callback: Function): void { // @ts-ignore if (window.useWb) { return; @@ -104,7 +104,7 @@ export class Cmd { Cmd.CmdSendPostUtils(uri, callback, data); } - static formatString(string: string, params: string[]) { + static formatString(string: string, params: string[]): string { if (params.length === 0) { return string; } @@ -114,7 +114,7 @@ export class Cmd { return string; } - static showSaveFile(callback: Function) { + static showSaveFile(callback: Function): void { // @ts-ignore if (window.useWb) { return; @@ -132,7 +132,7 @@ export class Cmd { }); } - static uploadFile(fd: FormData, callback: Function) { + static uploadFile(fd: FormData, callback: Function): void { // @ts-ignore if (window.useWb) { return; @@ -141,12 +141,12 @@ export class Cmd { fetch(uri, { method: 'POST', body: fd, - }).then((response) => { + }).then((response): void => { callback(response); }); } - static copyFile(fileName: string, distFile: string, callback: Function) { + static copyFile(fileName: string, distFile: string, callback: Function): void { // @ts-ignore if (window.useWb) { return; @@ -162,12 +162,12 @@ export class Cmd { 'Content-Type': 'application/json', }, body: JSON.stringify(data), - }).then((response) => { + }).then((response): void => { callback(response); }); } - static async openFileDialog() { + static async openFileDialog(): Promise { // @ts-ignore if (window.useWb) { return ''; @@ -189,7 +189,7 @@ export class Cmd { } else { let process: string[] = lineVal.split(' '); if (process.length === 2) { - processData.push(process[1] + '(' + process[0] + ')'); + processData.push(`${process[1]}(${process[0]})`); } } } @@ -225,16 +225,16 @@ export class Cmd { } static getProcess(): Promise { - return new Promise((resolve, reject) => { + return new Promise((resolve, reject): void => { if (SpRecordTrace.isVscode) { let cmd = Cmd.formatString(CmdConstant.CMD_GET_PROCESS_DEVICES, [SpRecordTrace.serialNumber]); - Cmd.execHdcCmd(cmd, (res: string) => { + Cmd.execHdcCmd(cmd, (res: string): void => { resolve(Cmd.convertOutProcessList(res)); }); } else { - HdcDeviceManager.connect(SpRecordTrace.serialNumber).then((conn) => { + HdcDeviceManager.connect(SpRecordTrace.serialNumber).then((conn): void => { if (conn) { - HdcDeviceManager.shellResultAsString(CmdConstant.CMD_GET_PROCESS, false).then((res) => { + HdcDeviceManager.shellResultAsString(CmdConstant.CMD_GET_PROCESS, false).then((res): void => { resolve(Cmd.convertOutProcessList(res)); }); } else { @@ -245,10 +245,10 @@ export class Cmd { }); } static getPackage(): Promise { - return new Promise((resolve, reject) => { + return new Promise((resolve, reject): void => { HdcDeviceManager.connect(SpRecordTrace.serialNumber).then((conn) => { if (conn) { - HdcDeviceManager.shellResultAsString(CmdConstant.CMD_GET_PACKAGE, false).then((res) => { + HdcDeviceManager.shellResultAsString(CmdConstant.CMD_GET_PACKAGE, false).then((res): void => { resolve(Cmd.convertOutPackageList(res)); }); } else { diff --git a/ide/src/doc/compile_trace_streamer.html b/ide/src/doc/compile_trace_streamer.html index 677e50de..a377d38b 100644 --- a/ide/src/doc/compile_trace_streamer.html +++ b/ide/src/doc/compile_trace_streamer.html @@ -799,8 +799,10 @@

准备工作

- 在码云上添加ssh公钥。
- 本工具工程组织方式是gn。编译需要对应的编译器，编译前请自行配置本地编译器。
+ 在码云上添加ssh公钥。 +
+ 本工具工程组织方式是gn。编译需要对应的编译器，编译前请自行配置本地编译器。 +
所需编译器和版本如下表所示：

@@ -841,7 +843,8 @@ 
./build.sh

- 本脚本会下载和准备本地依赖的环境，并编译目标。
+ 本脚本会下载和准备本地依赖的环境，并编译目标。 +
在不同的平台上编译后的目标在不同的文件夹，如下所示：

diff --git a/ide/src/doc/des_binder.html b/ide/src/doc/des_binder.html index 0c9e8cba..7bd62212 100644 --- a/ide/src/doc/des_binder.html +++ b/ide/src/doc/des_binder.html @@ -782,9 +782,12 @@

binder事件上下文如何关联

- binder事件相对复杂，这里是从ftrace事件中抽离出来的binder相关消息，用来作为开发者或用户追踪binder事件的参考
- a binder event is identified by the sender and receive device, and a reply message only end
- the last binder msg which reply the calling one.
+ binder事件相对复杂，这里是从ftrace事件中抽离出来的binder相关消息，用来作为开发者或用户追踪binder事件的参考 +
+ a binder event is identified by the sender and receive device, and a reply message only end +
+ the last binder msg which reply the calling one. +
the alloc_buf msg can always flow the binder_transaction, so we no need to identify the alloc msg with transactionID

@@ -860,10 +863,10 @@ Binder:506_2-537 ( 506) [003] ...1 168766.128413: binder_transaction_alloc_bu