Merge pull request #12 from rajbos/chart-bugfix

Fix opening issues on Chart widget
rajbos · Sep 18, 2023 · 72f16c6 · 72f16c6
2 parents fb6047a + 16c54f7
commit 72f16c6
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 64 deletions.
diff --git a/chart/chart.html b/chart/chart.html
@@ -3,6 +3,7 @@
 <head>
     <script src="../lib/VSS.SDK.min.js"></script>
     <script src="../library.js"></script>
+    <script src="chart.js"></script>
     <link rel="stylesheet" href="../styles.css" />
 </head>
 <body>
@@ -26,7 +27,7 @@
                         return Services.ChartsService.getService().then(async function(chartService){
                             consoleLog("Starting to create chart");
                             var $container = $('#Chart-Container');
-                            var $title = $('h2.title');
+                            var $title = $('h2.ghazdo-title');
 
                             const webContext = VSS.getWebContext();
                             const project = webContext.project;
@@ -46,21 +47,27 @@
 
                             let repoName
                             let repoId
-                            if (data && data.repo) {
+                            // init empty object first
+                            let alertTrendLines = {secretAlertTrend: [], dependencyAlertTrend: [], codeAlertsTrend: []};
+                            if (data && data.repo && data.repo !== "") {
                                 repoName = data.repo;
                                 repoId = data.repoId;
                                 consoleLog('loaded repoName from widgetSettings: ' + repoName);
 
                                 $title.text(`Advanced Security Alerts Trend`)
                                 $container.text(`${data.repo}`)
 
-                                // load the alerts for the selected repo
                                 try {
-                                    alerts = await getAlerts(organization, projectName, repoId);
-                                    consoleLog('alerts: ' +  JSON.stringify(alerts));
+                                    // get the trend data for alerts first
+                                    alertTrendLines = await getAlertsTrendLines(organization, projectName, repoId)
+                                    consoleLog('Dependencies AlertTrend: ' +  JSON.stringify(alertTrendLines.dependencyAlertsTrend));
+                                    consoleLog('Code scanning AlertTrend: ' +  JSON.stringify(alertTrendLines.codeAlertsTrend));
+                                    consoleLog('Secrets AlertTrend: ' +  JSON.stringify(alertTrendLines.secretAlertsTrend));
+
+                                    createChart($container, chartService, alertTrendLines);
                                 }
                                 catch (err) {
-                                    consoleLog(`Error loading the grouped alerts: ${err}`);
+                                    consoleLog(`Error loading the alerts trend: ${err}`);
                                 }
                             }
                             else {
@@ -69,56 +76,6 @@
                                 $title.text(`Configure the widget to get Advanced Security alerts trend information`);
                             }
 
-                            // init empty object first
-                            let alertTrendLines = {secretAlertTrend: [], dependencyAlertTrend: [], codeAlertsTrend: []};
-                            try {
-                                // get the trend data for alerts first
-                                alertTrendLines = await getAlertsTrendLines(organization, projectName, repoId)
-                                consoleLog('Dependencies AlertTrend: ' +  JSON.stringify(alertTrendLines.dependencyAlertsTrend));
-                                consoleLog('Code scanning AlertTrend: ' +  JSON.stringify(alertTrendLines.codeAlertsTrend));
-                                consoleLog('Secrets AlertTrend: ' +  JSON.stringify(alertTrendLines.secretAlertsTrend));
-                            }
-                            catch (err) {
-                                consoleLog(`Error loading the alerts trend: ${err}`);
-                            }
-
-                            const datePoints = getDatePoints();
-                            var chartOptions = {
-                                "hostOptions": {
-                                    "height": "290",
-                                    "width": "300"
-                                },
-                                "chartType": "line",
-                                "series":
-                                [
-                                    {
-                                        "name": "Dependencies",
-                                        "data": alertTrendLines.dependencyAlertsTrend
-                                    },
-                                    {
-                                        "name": "Code scanning",
-                                        "data": alertTrendLines.codeAlertsTrend
-                                    },
-                                    {
-                                        "name": "Secrets",
-                                        "data": alertTrendLines.secretAlertsTrend
-                                    }
-                                ],
-                                "xAxis": {
-                                    "labelValues": datePoints,
-                                    "labelFormatMode": "dateTime", // format is 2023-09-17
-                                },
-                                "specializedOptions": {
-                                    "includeMarkers": "true"
-                                }
-                            };
-
-                            try {
-                                chartService.createChart($container, chartOptions);
-                            }
-                            catch (err) {
-                                console.log(`Error creating chart: ${err}`);
-                            }
                             return WidgetHelpers.WidgetStatusHelper.Success();
                         });
                         }
@@ -133,7 +90,7 @@
     </script>
 
     <div class="widget">
-        <h2 class="title">Chart Widget</h2>
+        <h2 class="ghazdo-title">GHAzDo Chart Widget</h2>
         <div id="Chart-Container"></div>
     </div>
 </body>

diff --git a/chart/chart.js b/chart/chart.js
@@ -0,0 +1,40 @@
+async function createChart($container, chartService, alertTrendLines){
+
+    const datePoints = getDatePoints();
+    var chartOptions = {
+        "hostOptions": {
+            "height": "290",
+            "width": "300"
+        },
+        "chartType": "line",
+        "series":
+        [
+            {
+                "name": "Dependencies",
+                "data": alertTrendLines.dependencyAlertsTrend
+            },
+            {
+                "name": "Code scanning",
+                "data": alertTrendLines.codeAlertsTrend
+            },
+            {
+                "name": "Secrets",
+                "data": alertTrendLines.secretAlertsTrend
+            }
+        ],
+        "xAxis": {
+            "labelValues": datePoints,
+            "labelFormatMode": "dateTime", // format is 2023-09-17
+        },
+        "specializedOptions": {
+            "includeMarkers": "true"
+        }
+    };
+
+    try {
+        chartService.createChart($container, chartOptions);
+    }
+    catch (err) {
+        console.log(`Error creating chart: ${err}`);
+    }
+}
diff --git a/chart/configuration_2x2.html b/chart/configuration_2x2.html
@@ -40,6 +40,8 @@
                                 const repos = await getRepos();
                                 // add all repos as selection options to the dropdown
                                 if (repos) {
+                                    // add a top option to select no repo
+                                    $repoDropdown.append(`<option value="">Select a repository</option>`);
                                     // sort the repo alphabetically
                                     repos.sort((a, b) => a.name.localeCompare(b.name));
                                     repos.forEach(r => {

diff --git a/styles.css b/styles.css
@@ -20,10 +20,11 @@
         text-decoration: none !important;
 }
 
-.title {
+.ghazdo-title {
     font-size: 1rem;
     text-align: left;
     text-wrap: balance;
+    margin: 0 0 10px;
 }
 
 .alertValue {

diff --git a/vss-extension-dev.json b/vss-extension-dev.json
@@ -1,7 +1,7 @@
 {
     "manifestVersion": 1,
     "id": "GHAzDoWidget-DEV",
-    "version": "0.0.1.67",
+    "version": "0.0.1.73",
     "public": false,
     "name": "Advanced Security dashboard Widgets [DEV]",
     "description": "[DEV] GitHub Advanced Security for Azure DevOps dashboard widgets",

diff --git a/vss-extension.json b/vss-extension.json
@@ -1,7 +1,7 @@
 {
     "manifestVersion": 1,
     "id": "GHAzDoWidget",
-    "version": "0.0.1.5",
+    "version": "0.0.1.6",
     "public": true,
     "name": "Advanced Security dashboard Widgets",
     "description": "GitHub Advanced Security for Azure DevOps dashboard widgets",

diff --git a/widget_1x1/configuration_1x1.html b/widget_1x1/configuration_1x1.html
@@ -60,6 +60,8 @@
                                 const repos = await getRepos();
                                 // add all repos as selection options to the dropdown
                                 if (repos) {
+                                    // add a top option to select no repo
+                                    $repoDropdown.append(`<option value="">Select a repository</option>`);
                                     // sort the repo alphabetically
                                     repos.sort((a, b) => a.name.localeCompare(b.name));
                                     repos.forEach(r => {

diff --git a/widget_1x1/widget_1x1.html b/widget_1x1/widget_1x1.html
@@ -48,7 +48,7 @@
                                 consoleLog('loaded repoName from widgetSettings_1x1: ' + repoName);
 
                                 // set the tile
-                                var title = $('h2.title');
+                                var title = $('h2.ghazdo-title');
                                 title.text(`${repoName}`);
                                 alerts = await getAlerts(organization, projectName, repoId);
                                 consoleLog('alerts: ' +  JSON.stringify(alerts));
@@ -138,7 +138,7 @@
     </head>
     <body>
         <div class="widget GHAzDo-widget">
-            <h2 class="title">GitHub Advanced Security Alerts</h2>
+            <h2 class="ghazdo-title">GitHub Advanced Security Alerts</h2>
             <div id="query-info-container" class="column-container">
 
                 <a class="link bolt-link alert-link" target="_parent" href="">

diff --git a/widget_2x1/configuration_2x1.html b/widget_2x1/configuration_2x1.html
@@ -40,6 +40,8 @@
                                 const repos = await getRepos();
                                 // add all repos as selection options to the dropdown
                                 if (repos) {
+                                    // add a top option to select no repo
+                                    $repoDropdown.append(`<option value="">Select a repository</option>`);
                                     // sort the repo alphabetically
                                     repos.sort((a, b) => a.name.localeCompare(b.name));
                                     repos.forEach(r => {

diff --git a/widget_2x1/widget_2x1.html b/widget_2x1/widget_2x1.html
@@ -48,7 +48,7 @@
                                 consoleLog('loaded repoName from widgetSettings: ' + repoName);
 
                                 // set the tile
-                                var title = $('h2.title');
+                                var title = $('h2.ghazdo-title');
                                 title.text(`Security Alerts for ${repoName}`);
                                 alerts = await getAlerts(organization, projectName, repoId);
                                 consoleLog('alerts: ' +  JSON.stringify(alerts));
@@ -108,7 +108,7 @@
     </head>
     <body>
         <div class="widget GHAzDo-widget">
-            <h2 class="title">GitHub Advanced Security Alerts</h2>
+            <h2 class="ghazdo-title">GitHub Advanced Security Alerts</h2>
             <div id="query-info-container" class="column-container">
 
                 <a class="link bolt-link dependency-link" target="_parent" href="">