Update frontend descriptions (#27)

* remove bubble labels Signed-off-by: Hugo Queinnec <[email protected]> * update texts Signed-off-by: Hugo Queinnec <[email protected]> * remove BomRef from detection names Signed-off-by: Hugo Queinnec <[email protected]> --------- Signed-off-by: Hugo Queinnec <[email protected]>
IBM · Sep 20, 2024 · c7cc6f4 · c7cc6f4
1 parent 95397b9
commit c7cc6f4
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 68 deletions.
diff --git a/frontend/src/components/home/ExplainerView.vue b/frontend/src/components/home/ExplainerView.vue
@@ -4,7 +4,7 @@
       <div style="padding: 8px">
         <div style="display: flex; align-items: center; margin-bottom: 12px;">
           <Encryption24/>
-          <div style="font-size: large; font-weight: 400; padding-left: 8px;">
+          <div style="font-size: large; font-weight: 500; padding-left: 8px;">
             The Cryptography Bill of Materials
           </div>
         </div>

diff --git a/frontend/src/components/home/PluginExplainerView.vue b/frontend/src/components/home/PluginExplainerView.vue
@@ -1,69 +1,41 @@
 <template>
     <div style="display: flex;">
-      <cv-tile kind="standard" style="margin-right: 1.5%;">
+      <cv-tile kind="standard">
         <div class="card-container">
-          <div class="small-header">
-            AVAILABLE TODAY
-          </div>
           <div class="icon-and-title-container">
             <Script24/>
             <div class="title">
-              Generate a CBOM with our Cryptography Plugin for Sonar™
+              CBOMkit
             </div>
           </div>
           <p class="body-text">{{ textPlugin }}</p>
-          <div class="button-link-trademark">
-            <p style="padding-top: 6px; font-size: smaller; color: var(--cds-text-secondary);">
-              Sonar™ and SonarQube™ are trademarks of SonarSource SA.
-              <br/>
-              The Cryptography Plugin is not a SonarSource SA product.
-            </p>
+          <div class="button-link">
             <cv-button kind="secondary" :icon="LogoGithub20" @click="openLink()" style="margin-left: auto;">
               See on GitHub
             </cv-button>
           </div>
         </div>
       </cv-tile>
-
-      <cv-tile kind="standard" style="margin-left: 1.5%;">
-        <div class="card-container">
-          <div class="small-header">
-            COMING SOON
-          </div>
-          <div class="icon-and-title-container">
-            <SecurityServices24/>
-            <div class="title">
-              CBOM Generator Tool
-            </div>
-          </div>
-          <p class="body-text">{{ textGenerator }}</p>
-          <cv-button kind="primary" :icon="LogoGithub20" disabled style="margin-left: auto; margin-top: auto;">
-            Coming soon on GitHub
-          </cv-button>
-        </div>
-      </cv-tile>
-    </div>
+    </div> 
   </template>
 
   <script>
   import { model } from "@/model.js";
-  import { Launch20, LogoGithub20, Script24, SecurityServices24 } from "@carbon/icons-vue";
+  import { Launch20, LogoGithub20, Script24 } from "@carbon/icons-vue";
   
   export default {
     name: "PluginExplainerView",
     data() {
       return {
         model,
-        textPlugin: "Use the SonarQube™ software with our open-source plugin to scan your source code, automatically identify the use of cryptography and generate a CBOM. Currently available for Java and Python.",
-        textGenerator: "You will soon be able to generate a CBOM for open source Git repositories by running our simple CBOM Generator Tool on your device.",
-        url: "https://github.com/IBM/sonar-cryptography",
+        textPlugin: "CBOMkit is an open source toolset for working with Cryptography Bill of Materials. It can be used to generate CBOMs, visualise them, perform compliance checks and create a CBOM database. In particular, you can use it to scan source code by providing a link to a Git repository, then automatically detect the use of cryptography and generate a CBOM.",
+        url: "https://github.com/IBM/cbomkit",
         Launch20,
         LogoGithub20
       };
     },
     components: {
       Script24,
-      SecurityServices24
     },
     methods: {
       openLink: function () {
@@ -87,7 +59,7 @@
   }
   .title {
     font-size: large;
-    font-weight: 400;
+    font-weight: 500;
     padding-left: 8px;
   }
   .small-header {
@@ -98,17 +70,7 @@
   .body-text {
     padding-bottom: 16px;
   }
-  .button-link-trademark {
+  .button-link {
     display: flex;
   }
-  /* Responsive button-link-trademark and trademark text */
-  @media (max-width: 1100px) {
-    .button-link-trademark {
-      flex-direction: column;
-      gap: 14px;
-    }
-    .body-text {
-      padding-bottom: 0px;
-    }
-  }
   </style>
diff --git a/frontend/src/components/home/SearchOrUploadView.vue b/frontend/src/components/home/SearchOrUploadView.vue
@@ -4,7 +4,7 @@
             <div class="icon-and-title-container">
               <Catalog24/>
               <div class="large-title">
-                Explore our inventory of existing CBOMs
+                Explore previously scanned CBOMs
               </div>
             </div>
             <ListTable />
@@ -88,7 +88,7 @@ export default {
 }
 .title {
   font-size: large;
-  font-weight: 400;
+  font-weight: 500;
   padding-left: 8px;
 }
 .large-title {

diff --git a/frontend/src/components/results/StatisticsView.vue b/frontend/src/components/results/StatisticsView.vue
@@ -46,9 +46,9 @@
       <p
         v-if="nameNumber > 0"
         class="small-text"
-        style="padding-top: 8px;"
+        style="padding-top: 46px;"
       >
-        ({{ nameNumber }} types of crypto assets)
+        {{ nameNumber }} types of crypto assets
       </p>
     </div>
     <div style="width: 20%; margin-inline: auto">
@@ -150,7 +150,7 @@ export default {
     complianceOptions() {
       let colorScale = getColorScale();
       return {
-        // resizable: true,
+        resizable: true,
         donut: {
           center: {
             label: `Crypto Assets${isUsingLocalComplianceService() ? "*" : ""}`,
@@ -180,28 +180,16 @@ export default {
     nameNumber() {
       return countNames()[1];
     },
-    nameHeight() {
-      // Computes an estimated better height for the circle chart, considering that it needs more vertical space when the legend grows
-      if (this.nameNumber < 7) {
-        return "320px";
-      } else {
-        return (320 + 10 * (this.nameNumber - 7)).toString() + "px";
-      }
-    },
     nameOptions() {
       return {
         resizable: true,
-        height: this.nameHeight,
+        height: "230px",
         toolbar: {
           enabled: false,
         },
         theme: model.useDarkMode ? "g100" : "white",
         legend: {
-          alignment: "center",
-          truncation: {
-            numCharacter: 7,
-            threshold: 7,
-          },
+          enabled: false,
         },
       };
     },

diff --git a/frontend/src/helpers/cbom.js b/frontend/src/helpers/cbom.js
@@ -133,7 +133,18 @@ export function getDetections() {
   if (model.scanning.isScanning) {
     detections = model.scanning.liveDetections;
   }
-  return detections;
+  return removeBomRefFromDetectionNames(detections); 
+}
+
+function removeBomRefFromDetectionNames(detections) {
+  // Some detections have a name "actual-name@xxx-xxx-xxx", containing their bomRef
+  // We remove this bomRef from a cleaner visualization
+  detections.forEach(function (detection) {
+    if (Object.hasOwn(detection, "name") && detection.name.includes("@")) {
+      detection.name = detection.name.split('@')[0]
+    }
+  })
+  return detections
 }
 
 // Takes a CBOM Object and returns an array of detections