Some improvements to scorecard viewer (#1075)

Signed-off-by: Cintia Sanchez Garcia <[email protected]>
cncf · May 10, 2023 · 759b19a · 759b19a
1 parent ed38352
commit 759b19a
Showing 1 changed file with 143 additions and 18 deletions.
diff --git a/web/public/scorecard.html b/web/public/scorecard.html
@@ -36,6 +36,7 @@
       [data-theme='light'] {
         --body-bg: #fff;
         --bg-color: #f9f9f9;
+        --bg-table: #fff;
         --color-font: #38383f;
         --default-border: #dee2e6;
         --muted: #6c757d;
@@ -49,7 +50,8 @@
       [data-theme='dark'] {
         --body-bg: #222529;
         --bg-color: #2c2e31;
-        --color-font: #a3a3a6;
+        --bg-table: #222529;
+        --color-font: #cbd3da;
         --default-border: #676869;
         --muted: #a0a0a0;
         --color-black-5: rgba(255, 255, 255, 0.05);
@@ -93,6 +95,10 @@
         display: block;
       }
 
+      .d-inline-block {
+        display: inline-block;
+      }
+
       .d-none {
         display: none;
       }
@@ -134,6 +140,10 @@
         text-align: right;
       }
 
+      .text-start {
+        text-align: left;
+      }
+
       .ps-0 {
         padding-left: 0 !important;
       }
@@ -229,6 +239,7 @@
 
       .repo-name {
         margin-left: 0.5rem;
+        font-size: 1rem !important;
       }
 
       .chart {
@@ -370,7 +381,7 @@
       }
 
       .table {
-        background-color: var(--color-white);
+        background-color: var(--bg-table);
         border: 1px solid var(--default-border);
         border-collapse: collapse;
         width: 100%;
@@ -400,11 +411,16 @@
         line-height: 2;
       }
 
+      .check-title {
+        margin-right: 25px;
+      }
+
       .check-info {
         max-width: calc(100% - 40px);
       }
 
       .table-cell {
+        position: relative;
         display: table;
         table-layout: fixed;
         width: 100%;
@@ -474,9 +490,20 @@
         margin-left: 0.5rem;
       }
 
+      .error-cell {
+        padding: 2.5rem !important;
+      }
+
       .error-content {
-        font-size: 1.5rem;
-        margin: 2.5rem;
+        font-size: 1.25rem;
+      }
+
+      .error-code {
+        background-color: var(--bg-color);
+        overflow-x: scroll;
+        width: 100%;
+        padding: 0 1rem;
+        font-size: 0.9rem;
       }
 
       @media (prefers-reduced-motion: no-preference) {
@@ -491,11 +518,33 @@
         }
       }
 
-      @media screen and (max-width: 576px) {
+      @media screen and (min-width: 576px) {
+        .d-md-inline-block {
+          display: inline-block !important;
+        }
+
+        .d-md-none {
+          display: none !important;
+        }
+      }
+
+      @media screen and (max-width: 575.98px) {
         #scorecard-report {
           font-size: 0.9rem;
         }
 
+        .error-cell {
+          padding: 1.25rem !important;
+        }
+
+        .error-content {
+          font-size: 1rem;
+        }
+
+        .error-code {
+          font-size: 0.8rem;
+        }
+
         .table td {
           padding: 0.75rem;
         }
@@ -519,8 +568,34 @@
           font-size: 12px;
         }
 
+        .repo-icon {
+          font-size: 1rem !important;
+        }
+
+        .repo-name {
+          font-size: 0.9rem !important;
+        }
+
         .details {
-          margin-right: 1.5rem;
+          margin-left: -3.25rem;
+          margin-right: 0.5rem;
+        }
+
+        .check-info {
+          max-width: 100%;
+        }
+
+        .caret {
+          position: absolute;
+          right: 0;
+          margin-top: 0.4rem;
+        }
+
+        /* No truncate */
+        .description {
+          text-overflow: unset !important;
+          white-space: normal;
+          font-size: 0.7rem;
         }
       }
     </style>
@@ -594,9 +669,16 @@
     <!-- Error template -->
     <script id="error-template" type="text/x-handlebars-template">
       <tr>
-        <td class="text-center" colspan="2">
-          <div class="error-content">
+        <td class="error-cell {{#if aligment}}text-{{alignment}}{{/if}}" colspan="2">
+          <div class="table-cell error-content">
             {{error}}
+            {{#if params}}
+              <ul>
+                {{#each params}}
+                  <li>{{this}}</li>
+                {{/each}}
+              </ul>
+            {{/if}}
           </div>
         </td>
       </tr>
@@ -632,9 +714,16 @@
             <div class="d-flex flex-column justify-content-between table-cell">
               <div class="d-flex flex-row align-items-center main-title">
                 {{getRepoLogo}}
-                <div class="fw-semibold repo-name text-truncate">{{data.repo.name}}</div>
+                <div class="fw-semibold text-truncate">
+                  <a class="btn-link repo-name" href="https://{{data.repo.name}}" target="_blank" rel="noopener noreferrer">
+                    {{data.repo.name}}
+                  </a>
+                  </div>
+              </div>
+              <div class="content text-truncate"><small class="fw-semibold">COMMIT:</small>
+                <span class="d-none d-md-inline-block text-muted">{{data.repo.commit}}</span>
+                <span class="d-inline-block d-md-none text-muted">{{shortCommit data.repo.commit}}</span>
               </div>
-              <div class="content text-truncate"><small class="fw-semibold">COMMIT:</small> <span class="text-muted">{{data.repo.commit}}</span></div>
               <div class="content"><small class="fw-semibold">GENERATED AT:</small> <span class="text-muted">{{data.date}}</span></div>
             </div>
           </td>
@@ -648,8 +737,8 @@
               <div class="table-cell">
                 <div class="d-flex flex-row">
                   <div class="d-flex flex-column check-info">
-                    <div class="d-flex flex-row align-items-center">
-                      <div class="fw-semibold">{{replaceDashes name}}</div>
+                    <div class="d-flex flex-row align-items-center check-title">
+                      <div class="fw-semibold text-truncate">{{replaceDashes name}}</div>
                       {{#if (getRiskLevel name)}}
                         <div class="severity-badge fw-semibold badge-{{getRiskLevel name}}">{{getRiskLevel name}}</div>
                       {{/if}}
@@ -712,14 +801,17 @@
       });
 
       Handlebars.registerHelper('scoreFormat', (x) => {
-
         return x.toFixed(1);
       });
 
       Handlebars.registerHelper('replaceDashes', (x) => {
         return x.replace(/-/g, ' ');
       });
 
+      Handlebars.registerHelper('shortCommit', (x) => {
+        return x.slice(0, 7);
+      });
+
       Handlebars.registerHelper('getRiskLevel', (x) => {
         const riskLevel = {
           'Binary-Artifacts': 'high',
@@ -778,8 +870,23 @@
 
       async function apiFetch(platform, org, repo, commit) {
         const response = await fetch(`https://api.securityscorecards.dev/projects/${platform}/${org}/${repo}${commit ? `?commit=${commit}` : ''}`);
-        const data = await response.json();
-        return data;
+        if (response.ok) {
+          const data = await response.json();
+          return data;
+        } else {
+          if (response.status === 404) {
+            throw {
+              status: response.status,
+            }
+          } else {
+            const errorData = await response.json();
+            const error = {
+              status: response.status,
+              content: errorData,
+            }
+            throw error;
+          }
+        }
       }
 
       const params = new Proxy(new URLSearchParams(window.location.search), {
@@ -801,9 +908,27 @@
             const template = Handlebars.compile(scorecardTmpl);
             document.querySelector('#scorecard-content').innerHTML = template({ data: data });
           })
-          .catch(() => {
+          .catch((error) => {
             const template = Handlebars.compile(errorTmpl);
-            document.querySelector('#scorecard-content').innerHTML = template({ error: 'The Scorecard result requested was not found.' });
+            if (error.status === 404) {
+              document.querySelector('#scorecard-content').innerHTML = template({ error: 'The Scorecard report requested was not found', alignment: 'center' });
+            } else {
+              let code;
+              console.log(error.content)
+              if (error.content) {
+                code = `
+                  <br /><br />
+                  <div class="error-code">
+                    <pre>
+{
+  "code": ${error.content.code},
+  "message": ${error.content.message || '-'}
+}</pre>
+                  </div>
+                `;
+              }
+              document.querySelector('#scorecard-content').innerHTML = template({ error: new Handlebars.SafeString(`Something went wrong fetching the Scorecard Report data<br /><br />Status code: ${error.status}${code}`) });
+            }
           });
       } else {
         let missingParams = [];
@@ -817,7 +942,7 @@
           missingParams.push('org');
         }
         const template = Handlebars.compile(errorTmpl);
-        document.querySelector('#scorecard-content').innerHTML = template({ error: `Some of the required query string arguments were not provided: ${missingParams.join(', ')}.` });
+        document.querySelector('#scorecard-content').innerHTML = template({ error: 'Some of the required query string arguments were not provided:', params: missingParams });
       }
     </script>
   </body>