Move loading to functions

rajbos · Dec 3, 2023 · 725d991 · 725d991
1 parent 458c19f
commit 725d991
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 81 deletions.
diff --git a/vss-extension-dev.json b/vss-extension-dev.json
@@ -1,7 +1,7 @@
 {
   "manifestVersion": 1,
   "id": "GHAzDoWidget-DEV",
-  "version": "0.2.300",
+  "version": "0.2.306",
   "public": false,
   "name": "Advanced Security dashboard Widgets [DEV]",
   "description": "[DEV] GitHub Advanced Security for Azure DevOps dashboard widgets",

diff --git a/widgets/widgets/hub/hub.html b/widgets/widgets/hub/hub.html
@@ -19,107 +19,129 @@
                     "VSS/Context",
                     "VSS/Authentication/Services"
                 ],
-                async function (WidgetHelpers, Services, context) {
-                    consoleLog('VSS.require function');
-                    try {
-                        consoleLog('VSS.register Hub function');
-
-                        const chartService = await Services.ChartsService.getService();
-                        consoleLog("Starting to create chart");
-                        var $container = $('#Chart-Container');
-                        var $title = $('h2.ghazdo-title');
-
-                        if (!chartService) {
-                            consoleLog("chartService is null");
-                        }
 
-                        const webContext = VSS.getWebContext();
-                        const project = webContext.project;
-                        const organization = webContext.account.name;
-                        const projectId = project.id;
-                        // convert project.name to url encoding
-                        const projectName = project.name.replace(/ /g, "%20").replace(/&/g, "%26");
+            // top level function
+            async function (WidgetHelpers, Services, context) {
+
+                async function createCharts(chartService, organization, projectName) {
+
+                    const containerName = "#Chart-Container";
+                    var title = $('h2.ghazdoTitle');
+                    createChart(chartService, containerName, title, organization, projectName);
+                }
+
+                async function createChart(chartService, containerName, title, organization, projectName) {
 
-                        consoleLog('project id: ' + projectId);
-                        consoleLog('project name: ' + projectName);
-                        consoleLog('organization name: ' + organization);
+                    consoleLog("Starting to create chart");
+                    var $container = $(containerName);
 
-                        const data = {
+                    if (!chartService) {
+                        consoleLog("chartService is null");
+                        return;
+                    }
+
+                    const data = {
                             chartType: 1,
                             alertType: 1,
                             repo: "eShopOnWeb",
                             repoId: "5e5195e1-1b44-4d4b-9310-5d33ee2c4d6c"
                         }
 
-                        let repoName
-                        let repoId
-                        // init empty object first
-                        let alertTrendLines = {secretAlertTrend: [], dependencyAlertTrend: [], codeAlertsTrend: []};
-                        let chartType = 1;
-                        let alertTypeConfig = 1;
-                        if (data && data.chartType && data.chartType !== "") {
-                            chartType = data.chartType;
-                            consoleLog('loaded chartType from widgetSettings: ' + chartType);
-                        }
-                        else {
-                            consoleLog('chartType is not set, using default value: ' + chartType);
+                    let repoName
+                    let repoId
+                    // init empty object first
+                    let alertTrendLines = {secretAlertTrend: [], dependencyAlertTrend: [], codeAlertsTrend: []};
+                    let chartType = 1;
+                    let alertTypeConfig = 1;
+                    if (data && data.chartType && data.chartType !== "") {
+                        chartType = data.chartType;
+                        consoleLog('loaded chartType from widgetSettings: ' + chartType);
+                    }
+                    else {
+                        consoleLog('chartType is not set, using default value: ' + chartType);
+                    }
+
+                    if (data && data.alertType) {
+                        alertTypeConfig = data.alertType;
+                        consoleLog('loaded alertType from widgetSettings: ' + alertTypeConfig);
+                    }
+
+                    if (data && data.repo && data.repo !== "") {
+                        repoName = data.repo;
+                        repoId = data.repoId;
+
+                        $container.text(`${data.repo}`)
+
+                        const chartSize = {
+                            columnSpan: 2
                         }
 
-                        if (data && data.alertType) {
-                            alertTypeConfig = data.alertType;
-                            consoleLog('loaded alertType from widgetSettings: ' + alertTypeConfig);
+                        switch (chartType) {
+                            case "2":
+                                try {
+                                    const alertType = GetAlertTypeFromValue(alertTypeConfig);
+                                    title.text(`${alertType.display} Alerts by Severity`)
+                                    renderPieChart(organization, projectName, repoId, $container, chartService, alertType, chartSize);
+                                }
+                                catch (err) {
+                                    consoleLog(`Error loading the alerts pie: ${err}`);
+                                }
+                                break;
+                            default:
+                                try {
+                                    title.text(`Advanced Security Alerts Trend`)
+                                    renderTrendLine(organization, projectName, repoId, $container, chartService, chartSize);
+                                }
+                                catch (err) {
+                                    consoleLog(`Error loading the alerts trend: ${err}`);
+                                }
+                                break;
                         }
+                        consoleLog('rendered chart');
+                    }
+                    else {
+                        consoleLog('configuration is needed first, opening with empty values');
+                        // set the tile to indicate config is needed
+                        title.text(`Configure the widget to get Advanced Security alerts trend information`);
+                    }
 
-                        if (data && data.repo && data.repo !== "") {
-                            repoName = data.repo;
-                            repoId = data.repoId;
-
-                            $container.text(`${data.repo}`)
-
-                            const chartSize = {
-                                columnSpan: 2
-                            }
-
-                            switch (chartType) {
-                                case "2":
-                                    try {
-                                        const alertType = GetAlertTypeFromValue(alertTypeConfig);
-                                        $title.text(`${alertType.display} Alerts by Severity`)
-                                        renderPieChart(organization, projectName, repoId, $container, chartService, alertType, chartSize);
-                                    }
-                                    catch (err) {
-                                        consoleLog(`Error loading the alerts pie: ${err}`);
-                                    }
-                                    break;
-                                default:
-                                    try {
-                                        $title.text(`Advanced Security Alerts Trend`)
-                                        renderTrendLine(organization, projectName, repoId, $container, chartService, chartSize);
-                                    }
-                                    catch (err) {
-                                        consoleLog(`Error loading the alerts trend: ${err}`);
-                                    }
-                                    break;
-                            }
-                            consoleLog('rendered chart');
-                        }
-                        else {
-                            consoleLog('configuration is needed first, opening with empty values');
-                            // set the tile to indicate config is needed
-                            $title.text(`Configure the widget to get Advanced Security alerts trend information`);
-                        }
+                }
+
+                consoleLog('VSS.require function');
+                try {
+                    consoleLog('VSS.register Hub function');
+
+                    const chartService = await Services.ChartsService.getService();
+                    const webContext = VSS.getWebContext();
+                    const project = webContext.project;
+                    const organization = webContext.account.name;
+                    const projectId = project.id;
+                    // convert project.name to url encoding
+                    const projectName = project.name.replace(/ /g, "%20").replace(/&/g, "%26");
+
+                    consoleLog('project id: ' + projectId);
+                    consoleLog('project name: ' + projectName);
+                    consoleLog('organization name: ' + organization);
 
-                        consoleLog('returning WidgetStatusHelper.Success()');
+                    createCharts(chartService, organization, projectName);
+
+                    consoleLog('returning WidgetStatusHelper.Success()');
                 }
                 catch (err) {
                     consoleLog(`Error loading the page contents: ${JSON.stringify(err)}`);
                 }
-            VSS.notifyLoadSucceeded();
-        });
+                VSS.notifyLoadSucceeded();
+            }
+        );
     </script>
 
     <div class="widget">
-        <h2 class="ghazdo-title">GHAzDo Hub test from Rob Bos's widget</h2>
+        <h2 class="loadingTitle">Loading information div</h2>
+        <div id="LoadingInfoContainer"></div>
+    </div>
+
+    <div class="widget">
+        <h2 class="ghazdoTitle">GHAzDo Hub test from Rob Bos's widget</h2>
         <div id="Chart-Container"></div>
     </div>