Skip to content

Commit 72f16c6

Browse files
rajbosrajbos
authored
Merge pull request #12 from rajbos/chart-bugfix
Fix opening issues on Chart widget
2 parents fb6047a + 16c54f7 commit 72f16c6

10 files changed

+68
-64
lines changed

‎chart/chart.html

+14-57
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<script src="../lib/VSS.SDK.min.js"></script>
55
<script src="../library.js"></script>
6+
<script src="chart.js"></script>
67
<link rel="stylesheet" href="../styles.css" />
78
</head>
89
<body>
@@ -26,7 +27,7 @@
2627
return Services.ChartsService.getService().then(async function(chartService){
2728
consoleLog("Starting to create chart");
2829
var $container = $('#Chart-Container');
29-
var $title = $('h2.title');
30+
var $title = $('h2.ghazdo-title');
3031

3132
const webContext = VSS.getWebContext();
3233
const project = webContext.project;
@@ -46,21 +47,27 @@
4647

4748
let repoName
4849
let repoId
49-
if (data && data.repo) {
50+
// init empty object first
51+
let alertTrendLines = {secretAlertTrend: [], dependencyAlertTrend: [], codeAlertsTrend: []};
52+
if (data && data.repo && data.repo !== "") {
5053
repoName = data.repo;
5154
repoId = data.repoId;
5255
consoleLog('loaded repoName from widgetSettings: ' + repoName);
5356

5457
$title.text(`Advanced Security Alerts Trend`)
5558
$container.text(`${data.repo}`)
5659

57-
// load the alerts for the selected repo
5860
try {
59-
alerts = await getAlerts(organization, projectName, repoId);
60-
consoleLog('alerts: ' + JSON.stringify(alerts));
61+
// get the trend data for alerts first
62+
alertTrendLines = await getAlertsTrendLines(organization, projectName, repoId)
63+
consoleLog('Dependencies AlertTrend: ' + JSON.stringify(alertTrendLines.dependencyAlertsTrend));
64+
consoleLog('Code scanning AlertTrend: ' + JSON.stringify(alertTrendLines.codeAlertsTrend));
65+
consoleLog('Secrets AlertTrend: ' + JSON.stringify(alertTrendLines.secretAlertsTrend));
66+
67+
createChart($container, chartService, alertTrendLines);
6168
}
6269
catch (err) {
63-
consoleLog(`Error loading the grouped alerts: ${err}`);
70+
consoleLog(`Error loading the alerts trend: ${err}`);
6471
}
6572
}
6673
else {
@@ -69,56 +76,6 @@
6976
$title.text(`Configure the widget to get Advanced Security alerts trend information`);
7077
}
7178

72-
// init empty object first
73-
let alertTrendLines = {secretAlertTrend: [], dependencyAlertTrend: [], codeAlertsTrend: []};
74-
try {
75-
// get the trend data for alerts first
76-
alertTrendLines = await getAlertsTrendLines(organization, projectName, repoId)
77-
consoleLog('Dependencies AlertTrend: ' + JSON.stringify(alertTrendLines.dependencyAlertsTrend));
78-
consoleLog('Code scanning AlertTrend: ' + JSON.stringify(alertTrendLines.codeAlertsTrend));
79-
consoleLog('Secrets AlertTrend: ' + JSON.stringify(alertTrendLines.secretAlertsTrend));
80-
}
81-
catch (err) {
82-
consoleLog(`Error loading the alerts trend: ${err}`);
83-
}
84-
85-
const datePoints = getDatePoints();
86-
var chartOptions = {
87-
"hostOptions": {
88-
"height": "290",
89-
"width": "300"
90-
},
91-
"chartType": "line",
92-
"series":
93-
[
94-
{
95-
"name": "Dependencies",
96-
"data": alertTrendLines.dependencyAlertsTrend
97-
},
98-
{
99-
"name": "Code scanning",
100-
"data": alertTrendLines.codeAlertsTrend
101-
},
102-
{
103-
"name": "Secrets",
104-
"data": alertTrendLines.secretAlertsTrend
105-
}
106-
],
107-
"xAxis": {
108-
"labelValues": datePoints,
109-
"labelFormatMode": "dateTime", // format is 2023-09-17
110-
},
111-
"specializedOptions": {
112-
"includeMarkers": "true"
113-
}
114-
};
115-
116-
try {
117-
chartService.createChart($container, chartOptions);
118-
}
119-
catch (err) {
120-
console.log(`Error creating chart: ${err}`);
121-
}
12279
return WidgetHelpers.WidgetStatusHelper.Success();
12380
});
12481
}
@@ -133,7 +90,7 @@
13390
</script>
13491

13592
<div class="widget">
136-
<h2 class="title">Chart Widget</h2>
93+
<h2 class="ghazdo-title">GHAzDo Chart Widget</h2>
13794
<div id="Chart-Container"></div>
13895
</div>
13996
</body>

‎chart/chart.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
async function createChart($container, chartService, alertTrendLines){
2+
3+
const datePoints = getDatePoints();
4+
var chartOptions = {
5+
"hostOptions": {
6+
"height": "290",
7+
"width": "300"
8+
},
9+
"chartType": "line",
10+
"series":
11+
[
12+
{
13+
"name": "Dependencies",
14+
"data": alertTrendLines.dependencyAlertsTrend
15+
},
16+
{
17+
"name": "Code scanning",
18+
"data": alertTrendLines.codeAlertsTrend
19+
},
20+
{
21+
"name": "Secrets",
22+
"data": alertTrendLines.secretAlertsTrend
23+
}
24+
],
25+
"xAxis": {
26+
"labelValues": datePoints,
27+
"labelFormatMode": "dateTime", // format is 2023-09-17
28+
},
29+
"specializedOptions": {
30+
"includeMarkers": "true"
31+
}
32+
};
33+
34+
try {
35+
chartService.createChart($container, chartOptions);
36+
}
37+
catch (err) {
38+
console.log(`Error creating chart: ${err}`);
39+
}
40+
}

‎chart/configuration_2x2.html

+2
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@
4040
const repos = await getRepos();
4141
// add all repos as selection options to the dropdown
4242
if (repos) {
43+
// add a top option to select no repo
44+
$repoDropdown.append(`<option value="">Select a repository</option>`);
4345
// sort the repo alphabetically
4446
repos.sort((a, b) => a.name.localeCompare(b.name));
4547
repos.forEach(r => {

‎styles.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,11 @@
2020
text-decoration: none !important;
2121
}
2222

23-
.title {
23+
.ghazdo-title {
2424
font-size: 1rem;
2525
text-align: left;
2626
text-wrap: balance;
27+
margin: 0 0 10px;
2728
}
2829

2930
.alertValue {

‎vss-extension-dev.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"manifestVersion": 1,
33
"id": "GHAzDoWidget-DEV",
4-
"version": "0.0.1.67",
4+
"version": "0.0.1.73",
55
"public": false,
66
"name": "Advanced Security dashboard Widgets [DEV]",
77
"description": "[DEV] GitHub Advanced Security for Azure DevOps dashboard widgets",

‎vss-extension.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"manifestVersion": 1,
33
"id": "GHAzDoWidget",
4-
"version": "0.0.1.5",
4+
"version": "0.0.1.6",
55
"public": true,
66
"name": "Advanced Security dashboard Widgets",
77
"description": "GitHub Advanced Security for Azure DevOps dashboard widgets",

‎widget_1x1/configuration_1x1.html

+2
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,8 @@
6060
const repos = await getRepos();
6161
// add all repos as selection options to the dropdown
6262
if (repos) {
63+
// add a top option to select no repo
64+
$repoDropdown.append(`<option value="">Select a repository</option>`);
6365
// sort the repo alphabetically
6466
repos.sort((a, b) => a.name.localeCompare(b.name));
6567
repos.forEach(r => {

‎widget_1x1/widget_1x1.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
consoleLog('loaded repoName from widgetSettings_1x1: ' + repoName);
4949

5050
// set the tile
51-
var title = $('h2.title');
51+
var title = $('h2.ghazdo-title');
5252
title.text(`${repoName}`);
5353
alerts = await getAlerts(organization, projectName, repoId);
5454
consoleLog('alerts: ' + JSON.stringify(alerts));
@@ -138,7 +138,7 @@
138138
</head>
139139
<body>
140140
<div class="widget GHAzDo-widget">
141-
<h2 class="title">GitHub Advanced Security Alerts</h2>
141+
<h2 class="ghazdo-title">GitHub Advanced Security Alerts</h2>
142142
<div id="query-info-container" class="column-container">
143143

144144
<a class="link bolt-link alert-link" target="_parent" href="">

‎widget_2x1/configuration_2x1.html

+2
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@
4040
const repos = await getRepos();
4141
// add all repos as selection options to the dropdown
4242
if (repos) {
43+
// add a top option to select no repo
44+
$repoDropdown.append(`<option value="">Select a repository</option>`);
4345
// sort the repo alphabetically
4446
repos.sort((a, b) => a.name.localeCompare(b.name));
4547
repos.forEach(r => {

‎widget_2x1/widget_2x1.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
consoleLog('loaded repoName from widgetSettings: ' + repoName);
4949

5050
// set the tile
51-
var title = $('h2.title');
51+
var title = $('h2.ghazdo-title');
5252
title.text(`Security Alerts for ${repoName}`);
5353
alerts = await getAlerts(organization, projectName, repoId);
5454
consoleLog('alerts: ' + JSON.stringify(alerts));
@@ -108,7 +108,7 @@
108108
</head>
109109
<body>
110110
<div class="widget GHAzDo-widget">
111-
<h2 class="title">GitHub Advanced Security Alerts</h2>
111+
<h2 class="ghazdo-title">GitHub Advanced Security Alerts</h2>
112112
<div id="query-info-container" class="column-container">
113113

114114
<a class="link bolt-link dependency-link" target="_parent" href="">

0 commit comments

Comments
 (0)