Added health metrics for application load and database load (#2257)

* Added health metrics for application load

* Added health metrics for application load

* Fix unit tests

* Added more metrics

* Added few comments

* Added DatabaseLoad Scenario and address comments

* Fix unit tests

* fix unit tests

* Fix unit tests

* fix unit tests

* fix the mock

* Fix unit tests
This commit is contained in:
sunghyunkang1111
2025-12-09 14:14:35 -06:00
committed by GitHub
parent 8c0e6da377
commit 5b7d1a74af
19 changed files with 701 additions and 2 deletions

View File

@@ -60,6 +60,10 @@ import "./Explorer/Panes/PanelComponent.less";
import { SidePanel } from "./Explorer/Panes/PanelContainerComponent";
import "./Explorer/SplashScreen/SplashScreen.less";
import "./Libs/jquery";
import MetricScenario from "./Metrics/MetricEvents";
import { MetricScenarioProvider, useMetricScenario } from "./Metrics/MetricScenarioProvider";
import { ApplicationMetricPhase } from "./Metrics/ScenarioConfig";
import { useInteractive } from "./Metrics/useMetricPhases";
import { appThemeFabric } from "./Platform/Fabric/FabricTheme";
import "./Shared/appInsights";
import { useConfig } from "./hooks/useConfig";
@@ -79,6 +83,20 @@ const App: React.FunctionComponent = () => {
StyleConstants.updateStyles();
const explorer = useKnockoutExplorer(config?.platform);
// Scenario-based health tracking: start ApplicationLoad and complete phases.
const { startScenario, completePhase } = useMetricScenario();
React.useEffect(() => {
startScenario(MetricScenario.ApplicationLoad);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
React.useEffect(() => {
if (explorer) {
completePhase(MetricScenario.ApplicationLoad, ApplicationMetricPhase.ExplorerInitialized);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [explorer]);
if (!explorer) {
return <LoadingExplorer />;
}
@@ -104,9 +122,16 @@ const App: React.FunctionComponent = () => {
};
const mainElement = document.getElementById("Main");
ReactDOM.render(<App />, mainElement);
ReactDOM.render(
<MetricScenarioProvider>
<App />
</MetricScenarioProvider>,
mainElement,
);
function DivExplorer({ explorer }: { explorer: Explorer }): JSX.Element {
useInteractive(MetricScenario.ApplicationLoad);
return (
<div id="divExplorer" className="flexContainer hideOverflows">
<div id="freeTierTeachingBubble"> </div>