Skip to content

Commit

Permalink
Added support for extra sizes (#23)
Browse files Browse the repository at this point in the history 
* Added support for extra sizes

* Update image with examples
  • Loading branch information
@rajbos
rajbos authored Sep 20, 2023
1 parent 1b800b1 commit f07cc7d
Show file tree
Hide file tree
Showing 7 changed files with 62 additions and 35 deletions.
19 changes: 11 additions & 8 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@

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.
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.
Install the extension from the Azure DevOps marketplace: https://marketplace.visualstudio.com/items?itemName=RobBos.GHAzDoWidget

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

# Things that I can think of to add:
## Widgets:
* Show all three alert counts in one widget in 2 by 1 layout
* Split it into three separate widgets with just the single value you scan for (1x1 or 2x1)
* Show a trend line of all alerts in the last 3 weeks (2x2,3x2,4x2)

![Screenshot of the widget showing the repository name and the alert count for dependencies, secrets, and code scanning](/img/overview_600.png)

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

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

## How to build the package

Expand Down
12 changes: 6 additions & 6 deletions chart/chart.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
function (WidgetHelpers, Services, context) {
WidgetHelpers.IncludeWidgetStyles();
VSS.register("GHAzDoWidget.Chart", function () {
async function renderTrendLine(organization, projectName, repoId, $container, chartService) {
async function renderTrendLine(organization, projectName, repoId, $container, chartService, widgetSize) {
consoleLog('renderTrendLine');
try {
// get the trend data for alerts first
Expand All @@ -31,20 +31,20 @@
consoleLog('Code scanning AlertTrend: ' + JSON.stringify(alertTrendLines.codeAlertsTrend));
consoleLog('Secrets AlertTrend: ' + JSON.stringify(alertTrendLines.secretAlertsTrend));

createChart($container, chartService, alertTrendLines);
createChart($container, chartService, alertTrendLines, widgetSize);
}
catch (err) {
consoleLog(`Error loading the alerts trend: ${err}`);
}
}

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

createPieChart($container, chartService, alertSeverityCount);
createPieChart($container, chartService, alertSeverityCount, widgetSize);
}
catch (err) {
consoleLog(`Error loading the alerts pie: ${err}`);
Expand Down Expand Up @@ -104,15 +104,15 @@
try {
const alertType = GetAlertTypeFromValue(alertTypeConfig);
$title.text(`${alertType.display} Alerts by Severity`)
renderPieChart(organization, projectName, repoId, $container, chartService, alertType);
renderPieChart(organization, projectName, repoId, $container, chartService, alertType, widgetSettings.size);
}
catch (err) {
consoleLog(`Error loading the alerts pie: ${err}`);
}
break;
default:
$title.text(`Advanced Security Alerts Trend`)
renderTrendLine(organization, projectName, repoId, $container, chartService);
renderTrendLine(organization, projectName, repoId, $container, chartService, widgetSettings.size);
break;
}
}
Expand Down
13 changes: 9 additions & 4 deletions chart/chart.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
async function createChart($container, chartService, alertTrendLines){
async function createChart($container, chartService, alertTrendLines, widgetSize) {

const datePoints = getDatePoints();
var chartOptions = {
"hostOptions": {
"height": "290",
"width": "300"
"width": getChartWidthFromWidgetSize(widgetSize)
},
"chartType": "line",
"series":
Expand Down Expand Up @@ -39,7 +39,12 @@ async function createChart($container, chartService, alertTrendLines){
}
}

async function createPieChart($container, chartService, alertSeverityCount) {
function getChartWidthFromWidgetSize(widgetSize) {
// a column is 160px wide, and gutters are 10px wide, and there is 1 14px margins on the right side to handle
return 160 * widgetSize.columnSpan + (10 * (widgetSize.columnSpan -1)) - (1 * 14);
}

async function createPieChart($container, chartService, alertSeverityCount, widgetSize) {
// convert alertSeverityCount to two arrays, one for the labels and one for the data
consoleLog(`createPieChart for alertSeverityCount: ${JSON.stringify(alertSeverityCount)}`);
const labels = [];
Expand All @@ -53,7 +58,7 @@ async function createPieChart($container, chartService, alertSeverityCount) {
var chartOptions = {
"hostOptions": {
"height": "290",
"width": "300"
"width": getChartWidthFromWidgetSize(widgetSize)
},
"chartType": "pie",
"series": [{
Expand Down
Binary file added img/overview_600.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 5 additions & 9 deletions overview.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,12 @@ Extension for Azure DevOps that shows the number of open security alerts for the

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

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

### Show all three alert counts in one widget in 2 by 1 layout:
![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)

### Split it into three separate widgets (1 by 1) with just the single value you scan for:
![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)

### Show a trend line (2 by 2) of all alerts in the last 3 weeks:
![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)
![Screenshot of the all the widgets with alert count for dependencies, secrets, and code scanning](/img/overview_600.png)

## GitHub repo
Please report issues, feature request, and feedback here: https://github.com/rajbos/GHAzDo-widget.
Expand Down
23 changes: 17 additions & 6 deletions vss-extension-dev.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"manifestVersion": 1,
"id": "GHAzDoWidget-DEV",
"version": "0.0.1.112",
"version": "0.0.1.119",
"public": false,
"name": "Advanced Security dashboard Widgets [DEV]",
"description": "[DEV] GitHub Advanced Security for Azure DevOps dashboard widgets",
Expand Down Expand Up @@ -87,11 +87,14 @@
"previewImageUrl": "img/preview.png",
"uri": "widget_1x1/widget_1x1.html",
"supportedSizes": [
{
"rowSpan": 1,
"columnSpan": 1
}
],
{
"rowSpan": 1,
"columnSpan": 1
},
{
"rowSpan": 1,
"columnSpan": 2
}],
"supportedScopes": ["project_team"]
}
},
Expand Down Expand Up @@ -121,6 +124,14 @@
{
"rowSpan": 2,
"columnSpan": 2
},
{
"rowSpan": 2,
"columnSpan": 3
},
{
"rowSpan": 2,
"columnSpan": 4
}
],
"supportedScopes": [
Expand Down
16 changes: 14 additions & 2 deletions vss-extension.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"manifestVersion": 1,
"id": "GHAzDoWidget",
"version": "0.0.1.7",
"version": "0.0.1.8",
"public": true,
"name": "Advanced Security dashboard Widgets",
"description": "GitHub Advanced Security for Azure DevOps dashboard widgets",
Expand Down Expand Up @@ -87,9 +87,13 @@
"previewImageUrl": "img/preview.png",
"uri": "widget_1x1/widget_1x1.html",
"supportedSizes": [
{
{
"rowSpan": 1,
"columnSpan": 1
},
{
"rowSpan": 1,
"columnSpan": 2
}
],
"supportedScopes": ["project_team"]
Expand Down Expand Up @@ -121,6 +125,14 @@
{
"rowSpan": 2,
"columnSpan": 2
},
{
"rowSpan": 2,
"columnSpan": 3
},
{
"rowSpan": 2,
"columnSpan": 4
}
],
"supportedScopes": [
Expand Down

0 comments on commit f07cc7d

Please sign in to comment.