From b8980d67053a167357e173f0532e8be836457a0d Mon Sep 17 00:00:00 2001 From: "Thomas.G" Date: Sun, 26 Nov 2023 23:03:58 +0100 Subject: [PATCH] feat: add scorecard to the home view (#261) * feat: add scorecard to the home view --- esbuild.config.js | 1 + public/css/views/home.css | 75 +++++++++++++++--- public/img/scorecard.png | Bin 0 -> 20371 bytes public/js/components/home.js | 23 ++++++ .../components/package/pannels/scorecard.js | 51 ++---------- public/js/scorecard.js | 45 +++++++++++ public/js/utils.js | 9 +++ views/index.html | 23 ++++-- 8 files changed, 165 insertions(+), 62 deletions(-) create mode 100644 public/img/scorecard.png create mode 100644 public/js/scorecard.js diff --git a/esbuild.config.js b/esbuild.config.js index 7b295479..a06a59d7 100644 --- a/esbuild.config.js +++ b/esbuild.config.js @@ -45,6 +45,7 @@ await Promise.all([ "snyk.png", "sonatype.png", "avatar-default.png", + "scorecard.png", "ext-link.svg" ].map((name) => fs.copyFile(path.join(kImagesDir, name), path.join(kOutDir, name))), fs.copyFile(path.join(kPublicDir, "favicon.ico"), path.join(kOutDir, "favicon.ico")) diff --git a/public/css/views/home.css b/public/css/views/home.css index 7353dfe8..a10ba381 100644 --- a/public/css/views/home.css +++ b/public/css/views/home.css @@ -9,10 +9,65 @@ #home--view .home--header { display: flex; +} + +.home--header--scorecard { + display: none; + flex-shrink: 0; + margin-left: 40px; + overflow: hidden; + border-radius: 4px; + font-family: 'mononoki'; + letter-spacing: 1px; + cursor: pointer; +} + +.home--header--scorecard .description { + width: 190px; + background: linear-gradient(to bottom, #37474f 0%,#263238 100%); + display: flex; + align-items: center; +} + +.home--header--scorecard .description > img { + height: 73px; +} + +.home--header--scorecard .description > p { + margin-left: 10px; +} + +.home--header--scorecard .score { + width: 73px; + color: #FFF; + display: flex; + font-size: 20px; flex-direction: column; + justify-content: center; + align-items: center; + text-shadow: 1px 1px 5px #0000007a; + box-shadow: 2px 2px 10px #1e1e1e69 inset; +} +.home--header--scorecard .score.green { + background-color: rgb(113 203 45); +} +.home--header--scorecard .score.red { + background-color: rgb(219 80 58); +} +.home--header--scorecard .score.orange { + background-color: rgb(252 196 39); +} +.home--header--scorecard .score.blue { + background-color: rgb(39 144 252); +} + +.home--header--title { + display: flex; + flex-direction: column; + flex-grow: 1; } -#home--view .home--header>.top { +.home--header--title .top { display: flex; height: 40px; align-items: center; @@ -21,37 +76,37 @@ border-bottom: 2px solid #cecec9; } -#home--view .home--header>.top #project-name { +.home--header--title .top #project-name { color: var(--primary-lighter); } -#home--view .home--header>.top #project-version { +.home--header--title .top #project-version { color: var(--secondary-darker); margin-left: 15px; font-size: 20px; margin-top: 5px; } -#home--view .home--header>.bottom { +.home--header--title .bottom { display: flex; height: 26px; align-items: center; margin-top: 5px; } -#home--view .home--header>.bottom #project-description { +.home--header--title .bottom #project-description { color: var(--primary); letter-spacing: 1px; font-family: system-ui; } -#home--view .home--header>.bottom>ul { +.home--header--title .bottom>ul { margin-left: auto; height: inherit; display: flex; } -#home--view .home--header>.bottom>ul li { +.home--header--title .bottom>ul li { display: flex; align-items: center; color: #425964; @@ -59,18 +114,18 @@ letter-spacing: 0.5px; } -#home--view .home--header>.bottom>ul li:hover { +.home--header--title .bottom>ul li:hover { text-decoration: underline; cursor: pointer; } -#home--view .home--header>.bottom>ul li img { +.home--header--title .bottom>ul li img { width: 20px; height: 20px; margin-right: 5px; } -#home--view .home--header>.bottom>ul li+li { +.home--header--title .bottom>ul li+li { margin-left: 40px; } diff --git a/public/img/scorecard.png b/public/img/scorecard.png new file mode 100644 index 0000000000000000000000000000000000000000..9a9b8d54e459eadcd68326b92b68301c0342a610 GIT binary patch literal 20371 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 literal 0 HcmV?d00001 diff --git a/public/js/components/home.js b/public/js/components/home.js index 85910370..a00f7e84 100644 --- a/public/js/components/home.js +++ b/public/js/components/home.js @@ -4,6 +4,7 @@ import { NodeSecureDataSet, getJSON } from "@nodesecure/vis-network"; // Import Internal Dependencies import * as utils from "../utils.js"; import { Gauge } from "./gauge.js"; +import { fetchScorecardData, getScoreColor, getScorecardLink } from "../scorecard.js"; export class HomeView { /** @@ -12,6 +13,7 @@ export class HomeView { constructor(secureDataSet) { this.secureDataSet = secureDataSet; + this.generateScorecard(); this.generateHeader(); this.generateOverview(); this.generateWarnings(); @@ -20,6 +22,27 @@ export class HomeView { this.generateMaintainers(); } + generateScorecard() { + const { repository } = this.secureDataSet.linker.get(0); + const repoName = utils.getGithubRepositoryPath( + utils.parseRepositoryUrl(repository) + ) + + fetchScorecardData(repoName).then((data) => { + if (data !== null) { + document + .querySelector(".home--header--scorecard .score") + .classList.add(getScoreColor(data.score)); + document.getElementById("home-scorecard-score").innerHTML = data.score; + const scorescardElement = document.querySelector(".home--header--scorecard"); + scorescardElement.addEventListener("click", () => { + window.open(getScorecardLink(repoName), "_blank"); + }); + scorescardElement.style.display = "flex"; + } + }); + } + generateHeader() { const { name, version, description, repository } = this.secureDataSet.linker.get(0); diff --git a/public/js/components/package/pannels/scorecard.js b/public/js/components/package/pannels/scorecard.js index ed1cdd59..a0f26c83 100644 --- a/public/js/components/package/pannels/scorecard.js +++ b/public/js/components/package/pannels/scorecard.js @@ -1,34 +1,12 @@ -// Import Third-party Dependencies -import { getJSON } from "@nodesecure/vis-network"; - // Import Internal Dependencies import * as utils from "../../../utils.js"; +import { fetchScorecardData, getScoreColor, getScorecardLink } from "../../../scorecard.js"; export class Scorecard { - static ExternalLinks = { - visualizer: "https://kooltheba.github.io/openssf-scorecard-api-visualizer/#/projects/github.com/" - } - constructor(pkg) { this.package = pkg; } - async fetchScorecardData(repoName) { - try { - const { data } = (await getJSON(`/scorecard/${repoName}`)); - if (!data) { - return null; - } - - return data; - } - catch (error) { - console.error(error); - - return null; - } - } - hide() { const scorecardMenu = document.getElementById('scorecard-menu'); if (scorecardMenu) { @@ -45,14 +23,9 @@ export class Scorecard { return this.hide(); } - const github = new URL(githubURL.href); - const repoName = github.pathname.slice( - 1, - github.pathname.includes(".git") ? -4 : github.pathname.length - ); - + const repoName = utils.getGithubRepositoryPath(githubURL.href); const pannel = clone.getElementById("pan-scorecard"); - this.fetchScorecardData(repoName).then((data) => { + fetchScorecardData(repoName).then((data) => { if (!data) { return this.hide(); } @@ -62,20 +35,6 @@ export class Scorecard { }); } - getScoreColor(score) { - if (score < 4) { - return "red"; - } - if (score < 6.5) { - return "orange"; - } - if (score < 8.5) { - return "blue"; - } - - return "green"; - } - renderScorecard(data, repoName) { const { score, checks } = data; @@ -89,12 +48,12 @@ export class Scorecard { document.getElementById('ossf-score').innerText = score; document.getElementById('scorecard-menu').classList.add( - this.getScoreColor(score) + getScoreColor(score) ); document.getElementById('head-score').innerText = score; document .querySelector(".score-header .visualizer a") - .setAttribute('href', Scorecard.ExternalLinks.visualizer + repoName); + .setAttribute('href', getScorecardLink(repoName)); container.childNodes.forEach((check, checkKey) => { check.addEventListener('click', () => { diff --git a/public/js/scorecard.js b/public/js/scorecard.js new file mode 100644 index 00000000..6ebf0dcf --- /dev/null +++ b/public/js/scorecard.js @@ -0,0 +1,45 @@ +// Import Third-party Dependencies +import { getJSON } from "@nodesecure/vis-network"; + +/** + * @param {!string} repoName + */ +export async function fetchScorecardData(repoName) { + try { + const { data } = (await getJSON(`/scorecard/${repoName}`)); + if (!data) { + return null; + } + + return data; + } + catch (error) { + console.error(error); + + return null; + } +} + +/** + * @param {!number} score + * @returns {string} + */ +export function getScoreColor(score) { + if (score < 4) { + return "red"; + } + if (score < 6.5) { + return "orange"; + } + if (score < 8.5) { + return "blue"; + } + + return "green"; +} + +export function getScorecardLink( + repoName +) { + return `https://kooltheba.github.io/openssf-scorecard-api-visualizer/#/projects/github.com/` + repoName; +} diff --git a/public/js/utils.js b/public/js/utils.js index 6624af6a..d867ca13 100644 --- a/public/js/utils.js +++ b/public/js/utils.js @@ -3,6 +3,15 @@ import avatarURL from "../img/avatar-default.png"; window.activeLegendElement = null; +export function getGithubRepositoryPath(url) { + const github = new URL(url); + + return github.pathname.slice( + 1, + github.pathname.includes(".git") ? -4 : github.pathname.length + ); +} + /** * @param {keyof HTMLElementTagNameMap} kind * @param {object} [options] diff --git a/views/index.html b/views/index.html index 8faf64ec..f5379fbc 100644 --- a/views/index.html +++ b/views/index.html @@ -59,13 +59,24 @@