Skip to content

Commit f07cc7d

Browse files
rajbosrajbos
authored
Added support for extra sizes (#23)
* Added support for extra sizes * Update image with examples
1 parent 1b800b1 commit f07cc7d

7 files changed

+62
-35
lines changed

‎README.md

+11-8
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11

2-
Extension for Azure DevOps that shows the number of open security alerts for the configured repository. Please install it and let me know what you think! Create an issue for feedback or feature requests.
2+
Extension for Azure DevOps that shows the number of open security alerts for the configured repository. Please install it and let me know what you think! Create an issue for feedback or feature requests.
33
Install the extension from the Azure DevOps marketplace: https://marketplace.visualstudio.com/items?itemName=RobBos.GHAzDoWidget
44

5-
## Example:
6-
![Screenshot of the widget showing the repository name and the alert count for dependencies, secrets, and code scanning](/img/example_2x1.png)
75

8-
# Things that I can think of to add:
6+
## Widgets:
7+
* Show all three alert counts in one widget in 2 by 1 layout
8+
* Split it into three separate widgets with just the single value you scan for (1x1 or 2x1)
9+
* Show a trend line of all alerts in the last 3 weeks (2x2,3x2,4x2)
10+
11+
![Screenshot of the widget showing the repository name and the alert count for dependencies, secrets, and code scanning](/img/overview_600.png)
912

10-
- Think of more use cases:
11-
- show the total number of alerts for the project
12-
- show only a single number instead of all three (or add a checkbox for each alert type so users can mix and match)
13-
- Add chart with the number of alerts over time (1 line for active and maybe a line for closed?)
13+
# Things that I can think of to add:
1414

15+
- show the total number of alerts for the whole project
16+
- group trend line by months
17+
- stacked trend line (open/closed) per alert type
1518

1619
## How to build the package
1720

‎chart/chart.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
function (WidgetHelpers, Services, context) {
2323
WidgetHelpers.IncludeWidgetStyles();
2424
VSS.register("GHAzDoWidget.Chart", function () {
25-
async function renderTrendLine(organization, projectName, repoId, $container, chartService) {
25+
async function renderTrendLine(organization, projectName, repoId, $container, chartService, widgetSize) {
2626
consoleLog('renderTrendLine');
2727
try {
2828
// get the trend data for alerts first
@@ -31,20 +31,20 @@
3131
consoleLog('Code scanning AlertTrend: ' + JSON.stringify(alertTrendLines.codeAlertsTrend));
3232
consoleLog('Secrets AlertTrend: ' + JSON.stringify(alertTrendLines.secretAlertsTrend));
3333

34-
createChart($container, chartService, alertTrendLines);
34+
createChart($container, chartService, alertTrendLines, widgetSize);
3535
}
3636
catch (err) {
3737
consoleLog(`Error loading the alerts trend: ${err}`);
3838
}
3939
}
4040

41-
async function renderPieChart(organization, projectName, repoId, $container, chartService, alertType) {
41+
async function renderPieChart(organization, projectName, repoId, $container, chartService, alertType, widgetSize) {
4242
consoleLog('renderPieChart');
4343
try {
4444
// get the trend data for alerts first
4545
const alertSeverityCount = await getAlertSeverityCounts(organization, projectName, repoId, alertType);
4646

47-
createPieChart($container, chartService, alertSeverityCount);
47+
createPieChart($container, chartService, alertSeverityCount, widgetSize);
4848
}
4949
catch (err) {
5050
consoleLog(`Error loading the alerts pie: ${err}`);
@@ -104,15 +104,15 @@
104104
try {
105105
const alertType = GetAlertTypeFromValue(alertTypeConfig);
106106
$title.text(`${alertType.display} Alerts by Severity`)
107-
renderPieChart(organization, projectName, repoId, $container, chartService, alertType);
107+
renderPieChart(organization, projectName, repoId, $container, chartService, alertType, widgetSettings.size);
108108
}
109109
catch (err) {
110110
consoleLog(`Error loading the alerts pie: ${err}`);
111111
}
112112
break;
113113
default:
114114
$title.text(`Advanced Security Alerts Trend`)
115-
renderTrendLine(organization, projectName, repoId, $container, chartService);
115+
renderTrendLine(organization, projectName, repoId, $container, chartService, widgetSettings.size);
116116
break;
117117
}
118118
}

‎chart/chart.js

+9-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
async function createChart($container, chartService, alertTrendLines){
1+
async function createChart($container, chartService, alertTrendLines, widgetSize) {
22

33
const datePoints = getDatePoints();
44
var chartOptions = {
55
"hostOptions": {
66
"height": "290",
7-
"width": "300"
7+
"width": getChartWidthFromWidgetSize(widgetSize)
88
},
99
"chartType": "line",
1010
"series":
@@ -39,7 +39,12 @@ async function createChart($container, chartService, alertTrendLines){
3939
}
4040
}
4141

42-
async function createPieChart($container, chartService, alertSeverityCount) {
42+
function getChartWidthFromWidgetSize(widgetSize) {
43+
// a column is 160px wide, and gutters are 10px wide, and there is 1 14px margins on the right side to handle
44+
return 160 * widgetSize.columnSpan + (10 * (widgetSize.columnSpan -1)) - (1 * 14);
45+
}
46+
47+
async function createPieChart($container, chartService, alertSeverityCount, widgetSize) {
4348
// convert alertSeverityCount to two arrays, one for the labels and one for the data
4449
consoleLog(`createPieChart for alertSeverityCount: ${JSON.stringify(alertSeverityCount)}`);
4550
const labels = [];
@@ -53,7 +58,7 @@ async function createPieChart($container, chartService, alertSeverityCount) {
5358
var chartOptions = {
5459
"hostOptions": {
5560
"height": "290",
56-
"width": "300"
61+
"width": getChartWidthFromWidgetSize(widgetSize)
5762
},
5863
"chartType": "pie",
5964
"series": [{

‎img/overview_600.png

112 KB
Loading

‎overview.md

+5-9
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,12 @@ Extension for Azure DevOps that shows the number of open security alerts for the
22

33
Install from the marketplace: https://marketplace.visualstudio.com/items?itemName=RobBos.GHAzDoWidget
44

5-
## Examples:
5+
## Widgets:
6+
* Show all three alert counts in one widget in 2 by 1 layout
7+
* Split it into three separate widgets with just the single value you scan for (1x1 or 2x1)
8+
* Show a trend line of all alerts in the last 3 weeks (2x2,3x2,4x2)
69

7-
### Show all three alert counts in one widget in 2 by 1 layout:
8-
![Screenshot of the widget in 2 by 1 showing the repository name and the alert count for dependencies, secrets, and code scanning](/img/example_2x1.png)
9-
10-
### Split it into three separate widgets (1 by 1) with just the single value you scan for:
11-
![Screenshot of the widget in 1 by 1 showing the repository name and the alert count for dependencies, secrets, and code scanning](/img/example_1x1.png)
12-
13-
### Show a trend line (2 by 2) of all alerts in the last 3 weeks:
14-
![Screenshot of the chart widget in 2 by 2 showing the repository name and the alert count for dependencies, secrets, and code scanning](/img/example_chart_2x2.png)
10+
![Screenshot of the all the widgets with alert count for dependencies, secrets, and code scanning](/img/overview_600.png)
1511

1612
## GitHub repo
1713
Please report issues, feature request, and feedback here: https://github.com/rajbos/GHAzDo-widget.

‎vss-extension-dev.json

+17-6
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.112",
4+
"version": "0.0.1.119",
55
"public": false,
66
"name": "Advanced Security dashboard Widgets [DEV]",
77
"description": "[DEV] GitHub Advanced Security for Azure DevOps dashboard widgets",
@@ -87,11 +87,14 @@
8787
"previewImageUrl": "img/preview.png",
8888
"uri": "widget_1x1/widget_1x1.html",
8989
"supportedSizes": [
90-
{
91-
"rowSpan": 1,
92-
"columnSpan": 1
93-
}
94-
],
90+
{
91+
"rowSpan": 1,
92+
"columnSpan": 1
93+
},
94+
{
95+
"rowSpan": 1,
96+
"columnSpan": 2
97+
}],
9598
"supportedScopes": ["project_team"]
9699
}
97100
},
@@ -121,6 +124,14 @@
121124
{
122125
"rowSpan": 2,
123126
"columnSpan": 2
127+
},
128+
{
129+
"rowSpan": 2,
130+
"columnSpan": 3
131+
},
132+
{
133+
"rowSpan": 2,
134+
"columnSpan": 4
124135
}
125136
],
126137
"supportedScopes": [

‎vss-extension.json

+14-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"manifestVersion": 1,
33
"id": "GHAzDoWidget",
4-
"version": "0.0.1.7",
4+
"version": "0.0.1.8",
55
"public": true,
66
"name": "Advanced Security dashboard Widgets",
77
"description": "GitHub Advanced Security for Azure DevOps dashboard widgets",
@@ -87,9 +87,13 @@
8787
"previewImageUrl": "img/preview.png",
8888
"uri": "widget_1x1/widget_1x1.html",
8989
"supportedSizes": [
90-
{
90+
{
9191
"rowSpan": 1,
9292
"columnSpan": 1
93+
},
94+
{
95+
"rowSpan": 1,
96+
"columnSpan": 2
9397
}
9498
],
9599
"supportedScopes": ["project_team"]
@@ -121,6 +125,14 @@
121125
{
122126
"rowSpan": 2,
123127
"columnSpan": 2
128+
},
129+
{
130+
"rowSpan": 2,
131+
"columnSpan": 3
132+
},
133+
{
134+
"rowSpan": 2,
135+
"columnSpan": 4
124136
}
125137
],
126138
"supportedScopes": [

0 commit comments

Comments
 (0)