Adding functionality to download component table data as a csv

src/i18n/locales/de.json

@@ -419,6 +419,7 @@
     "create_vulnerability": "Schwachstelle schaffen",
     "created": "Erstellt",
     "credits": "Credits",
+    "csv_filetype": "CSV",
     "custom_license": "Benutzerdefinierte Lizenz",
     "custom_license_deleted": "Benutzerdefinierte Lizenz gelöscht",
     "cvss": "CVSS",
@@ -475,6 +476,7 @@
     "direct_only": "Nur Direkt",
     "direction": "Richtung",
     "download_bom": "BOM herunterladen",
+    "download_component": "Komponenten herunterladen",
     "email": "E-Mail",
     "empty_selection": "Keine Elemente ausgewählt",
     "endpoints": "Endpunkte",

src/i18n/locales/en.json

@@ -419,6 +419,7 @@
     "create_vulnerability": "Create Vulnerability",
     "created": "Created",
     "credits": "Credits",
+    "csv_filetype": "CSV ",
     "custom_license": "Custom License",
     "custom_license_deleted": "Custom License Deleted",
     "cvss": "CVSS",
@@ -475,6 +476,7 @@
     "direct_only": "Direct only",
     "direction": "Direction",
     "download_bom": "Download BOM",
+    "download_component": "Download Components",
     "email": "Email",
     "empty_selection": "No items selected",
     "endpoints": "Endpoints",

src/i18n/locales/es.json

@@ -419,6 +419,7 @@
     "create_vulnerability": "Crear vulnerabilidad",
     "created": "Creado",
     "credits": "Créditos",
+    "csv_filetype": "CSV",
     "custom_license": "Licencia personalizada",
     "custom_license_deleted": "Licencia personalizada eliminada",
     "cvss": "cvss",
@@ -475,6 +476,7 @@
     "direct_only": "Solo directo",
     "direction": "Dirección",
     "download_bom": "Descargar lista de materiales",
+    "download_component": "Descargar componentes",
     "email": "Correo electrónico",
     "empty_selection": "No hay elementos seleccionados",
     "endpoints": "Puntos finales",

src/i18n/locales/fr.json

@@ -419,6 +419,7 @@
     "create_vulnerability": "Créer une vulnérabilité",
     "created": "Créé(e)",
     "credits": "Crédits",
+    "csv_filetype": "CSV",
     "custom_license": "Licence personnalisée",
     "custom_license_deleted": "Licence personnalisée supprimée",
     "cvss": "CVSS",
@@ -475,6 +476,7 @@
     "direct_only": "Direct uniquement",
     "direction": "Direction",
     "download_bom": "Télécharger la nomenclature",
+    "download_component": "Télécharger les composants",
     "email": "Courriel",
     "empty_selection": "Aucun élément sélectionné",
     "endpoints": "Points de terminaison",

src/i18n/locales/hi.json

@@ -419,6 +419,7 @@
     "create_vulnerability": "भेद्यता बनाएँ",
     "created": "बनाया था",
     "credits": "क्रेडिट",
+    "csv_filetype": "CSV",
     "custom_license": "कस्टम लाइसेंस",
     "custom_license_deleted": "कस्टम लाइसेंस हटाया गया",
     "cvss": "सीवीएसएस",
@@ -475,6 +476,7 @@
     "direct_only": "केवल प्रत्यक्ष",
     "direction": "दिशा",
     "download_bom": "BOM डाउनलोड करें",
+    "download_component": "घटक डाउनलोड करें",
     "email": "ईमेल",
     "empty_selection": "कोई आइटम चयनित नहीं",
     "endpoints": "अंतिमबिंदुओं",

src/i18n/locales/it.json

@@ -419,6 +419,7 @@
     "create_vulnerability": "Crea vulnerabilità",
     "created": "Creato",
     "credits": "Crediti",
+    "csv_filetype": "CSV",
     "custom_license": "Licenza personalizzata",
     "custom_license_deleted": "Licenza personalizzata eliminata",
     "cvss": "CVSS",
@@ -475,6 +476,7 @@
     "direct_only": "Solo diretto",
     "direction": "Direzione",
     "download_bom": "Scarica distinta base",
+    "download_component": "Scarica Componenti",
     "email": "E-mail",
     "empty_selection": "Nessun elemento selezionato",
     "endpoints": "Endpoint",

src/i18n/locales/ja.json

@@ -419,6 +419,7 @@
     "create_vulnerability": "脆弱性の追加",
     "created": "作成日",
     "credits": "クレジット",
+    "csv_filetype": "CSV",
     "custom_license": "カスタムライセンス",
     "custom_license_deleted": "カスタムライセンスが削除されました",
     "cvss": "CVSS",
@@ -475,6 +476,7 @@
     "direct_only": "直接のみ",
     "direction": "方向",
     "download_bom": "BOMをダウンロード",
+    "download_component": "コンポーネントをダウンロードする",
     "email": "Eメール",
     "empty_selection": "項目が選択されていません",
     "endpoints": "エンドポイント",

src/i18n/locales/pl.json

@@ -419,6 +419,7 @@
     "create_vulnerability": "Utwórz lukę",
     "created": "Utworzony",
     "credits": "Kredyty",
+    "csv_filetype": "CSV",
     "custom_license": "Licencja niestandardowa",
     "custom_license_deleted": "Usunięto licencję niestandardową",
     "cvss": "CVSS",
@@ -475,6 +476,7 @@
     "direct_only": "Tylko bezpośrednie",
     "direction": "Kierunek",
     "download_bom": "Pobierz BOM",
+    "download_component": "Pobierz komponenty",
     "email": "E-mail",
     "empty_selection": "Nie wybrano żadnych elementów",
     "endpoints": "Punkty końcowe",

src/i18n/locales/pt-BR.json

@@ -419,6 +419,7 @@
     "create_vulnerability": "Criar vulnerabilidade",
     "created": "Criada",
     "credits": "Créditos",
+    "csv_filetype": "CSV",
     "custom_license": "Licença personalizada",
     "custom_license_deleted": "Licença personalizada excluída",
     "cvss": "CVSS",
@@ -475,6 +476,7 @@
     "direct_only": "Somente direto",
     "direction": "Direção",
     "download_bom": "Baixe a lista técnica",
+    "download_component": "Baixar componentes",
     "email": "E-mail",
     "empty_selection": "Nenhum item selecionado",
     "endpoints": "Pontos finais",

src/i18n/locales/pt.json

@@ -419,6 +419,7 @@
     "create_vulnerability": "Criar vulnerabilidade",
     "created": "Criada",
     "credits": "Créditos",
+    "csv_filetype": "CSV",
     "custom_license": "Licença personalizada",
     "custom_license_deleted": "Licença personalizada excluída",
     "cvss": "CVSS",
@@ -475,6 +476,7 @@
     "direct_only": "Somente direto",
     "direction": "Direção",
     "download_bom": "Baixe a lista técnica",
+    "download_component": "Baixar componentes",
     "email": "E-mail",
     "empty_selection": "Nenhum item selecionado",
     "endpoints": "Pontos finais",

src/i18n/locales/ru.json

@@ -419,6 +419,7 @@
     "create_vulnerability": "Создать уязвимость",
     "created": "Созданный",
     "credits": "Кредиты",
+    "csv_filetype": "CSV",
     "custom_license": "Пользовательская лицензия",
     "custom_license_deleted": "Пользовательская лицензия удалена",
     "cvss": "CVSS",
@@ -475,6 +476,7 @@
     "direct_only": "Только прямой",
     "direction": "Направление",
     "download_bom": "Скачать спецификацию",
+    "download_component": "Загрузить компоненты",
     "email": "Электронная почта",
     "empty_selection": "Элементы не выбраны",
     "endpoints": "Конечные точки",

src/i18n/locales/uk-UA.json

@@ -419,6 +419,7 @@
     "create_vulnerability": "Створити вразливість",
     "created": "Створено",
     "credits": "Кредити",
+    "csv_filetype": "CSV",
     "custom_license": "Спеціальна ліцензія",
     "custom_license_deleted": "Спеціальну ліцензію видалено",
     "cvss": "CVSS",
@@ -475,6 +476,7 @@
     "direct_only": "Тільки прямий",
     "direction": "Напрямок",
     "download_bom": "Завантажити BOM",
+    "download_component": "Завантажити компоненти",
     "email": "Електронна пошта",
     "empty_selection": "Елементи не вибрано",
     "endpoints": "Кінцеві точки",

src/i18n/locales/zh.json

@@ -419,6 +419,7 @@
     "create_vulnerability": "创建漏洞",
     "created": "创建",
     "credits": "Credits",
+    "csv_filetype": "CSV",
     "custom_license": "自定义许可证",
     "custom_license_deleted": "自定义许可证已删除",
     "cvss": "计算机视觉安全标准",
@@ -475,6 +476,7 @@
     "direct_only": "仅限直接",
     "direction": "方向",
     "download_bom": "下载 BOM",
+    "download_component": "下载组件",
     "email": "电子邮件",
     "empty_selection": "没有选择任何项目",
     "endpoints": "终结点",

src/views/portfolio/projects/ProjectComponents.vue

@@ -50,6 +50,18 @@
             >{{ $t('message.inventory_with_vulnerabilities') }}</b-dropdown-item
           >
         </b-dropdown>
+        <b-dropdown
+          variant="outline-primary"
+          v-permission="PERMISSIONS.VIEW_PORTFOLIO"
+        >
+          <template #button-content>
+            <span class="fa fa-download"></span>
+            {{ $t('message.download_component') }}
+          </template>
+          <b-dropdown-item @click="downloadTable('csv')" href="#">{{
+            $t('message.csv_filetype')
+          }}</b-dropdown-item>
+        </b-dropdown>
         <span
           id="switch-container-outdated"
           style="margin-left: 1rem; margin-right: 0.5rem"
@@ -120,6 +132,7 @@ import xssFilters from 'xss-filters';
 import permissionsMixin from '../../../mixins/permissionsMixin';
 import common from '../../../shared/common';
 import SeverityProgressBar from '../../components/SeverityProgressBar';
+import { get } from 'lodash-es';
 
 export default {
   components: {
@@ -409,6 +422,48 @@ export default {
           link.click();
         });
     },
+    buildTableFile: function (json, fileType) {
+      if (fileType == 'csv') {
+        const items = json.data;
+        const header = [
+          'name',
+          'version',
+          'group',
+          'internal',
+          'resolvedLicense.licenseId',
+          'lastInheritedRiskScore',
+          'metrics.vulnerabilities',
+        ]; //Object.keys(items[0])//as long as the structure of the json doesnt change these can be static
+        const csv = [
+          header.join(','),
+          ...items.map((row) =>
+            header.map((header) => get(row, header)).join(','),
+          ),
+        ].join('\r\n');
+
+        const url = window.URL.createObjectURL(new Blob([csv]));
+        const link = document.createElement('a');
+        link.href = url;
+        let filename = 'componentTable.csv';
+        link.setAttribute('download', filename);
+        document.body.appendChild(link);
+        link.click();
+      }
+    },
+    downloadTable: async function (fileType) {
+      const result = await this.downloadTableJson();
+      this.buildTableFile(result, fileType);
+    },
+    downloadTableJson: async function () {
+      let url = `${this.$api.BASE_URL}/${this.$api.URL_COMPONENT}/project/${this.uuid}?limit=1000000&offset=0`;
+      try {
+        let response = await this.axios.get(url);
+        return response;
+      } catch (e) {
+        console.log(e);
+        return e;
+      }
+    },
     tableLoaded: function (data) {
       loadUserPreferencesForBootstrapTable(
         this,