Focus on components in dependency graph and hide other nodes

src/i18n/locales/en.json

@@ -408,6 +408,9 @@
     "component_firmware": "Firmware",
     "component_file": "File",
     "dates": "Dates",
+    "show_in_dependency_graph": "Show in dependency graph",
+    "show_complete_graph": "Show complete graph",
+    "not_found_in_dependency_graph": "Dependency could not be found in dependency graph",
     "reindex": "Rebuild index(es)"
   },
   "admin": {

src/router/index.js

@@ -68,6 +68,19 @@ function configRoutes() {
             sectionPath: '/projects'
           }
         },
+        {
+          path: 'projects/:uuid/dependencyGraph/:componentUuid',
+          name: 'Dependency Graph Component Lookup',
+          props: (route) => ( {
+            uuid: route.params.uuid,
+            componentUuid: route.params.componentUuid
+          } ),
+          component: Project,
+          meta: {
+            i18n: 'message.projects',
+            sectionPath: '/projects'
+          }
+        },
         {
           path: 'components',
           name: 'Component Lookup',

src/views/portfolio/projects/Component.vue

@@ -6,6 +6,7 @@
           <b-col>
             <i class="fa fa-cube bg-primary p-3 font-2xl mr-3 float-left"></i>
             <div class="h5 mb-0 mt-2">{{ componentLabel }}</div>
+            <i class="fa fa-sitemap" style="cursor: pointer;" aria-hidden="true" @click="this.redirectToDependencyGraph" v-b-tooltip.hover.bottom :title="$t('message.show_in_dependency_graph')"></i>
           </b-col>
           <b-col>
             <b-row class="d-none d-md-flex float-right">
@@ -164,7 +165,10 @@
       syncComponentFields: function(component) {
         this.component = component;
         EventBus.$emit('addCrumb', this.componentLabel);
-      }
+      },
+      redirectToDependencyGraph: function (){
+        this.$router.push({path: "/projects/" + this.component.project.uuid + "/dependencyGraph/" + this.component.uuid})
+      },
     },
     beforeMount() {
       this.uuid = this.$route.params.uuid;

src/views/portfolio/projects/Project.vue

@@ -108,7 +108,7 @@
         <template v-slot:title><i class="fa fa-exchange"></i> {{ $t('message.services') }} <b-badge variant="tab-total">{{ totalServices }}</b-badge></template>
         <project-services :key="this.uuid" :uuid="this.uuid" v-on:total="totalServices = $event" />
       </b-tab>
-      <b-tab>
+      <b-tab ref="tabDependencyGraph">
         <template v-slot:title><i class="fa fa-sitemap"></i> {{ $t('message.dependency_graph') }} <b-badge variant="tab-total">{{ totalDependencyGraphs }}</b-badge></template>
         <project-dependency-graph :key="this.uuid" :uuid="this.uuid" :project="this.project" v-on:total="totalDependencyGraphs = $event" />
       </b-tab>
@@ -204,7 +204,8 @@
         totalDependencyGraphs: 0,
         totalFindings: 0,
         totalEpss: 0,
-        totalViolations: 0
+        totalViolations: 0,
+        tabIndex: 0
       }
     },
     methods: {
@@ -249,10 +250,18 @@
       this.uuid = this.$route.params.uuid;
       this.initialize();
     },
+    mounted() {
+      if (this.$route.params.componentUuid){
+        this.$refs.tabDependencyGraph.active = true
+      }
+    },
     watch:{
       $route (to, from){
         this.uuid = this.$route.params.uuid;
         this.initialize();
+        if (this.$route.params.componentUuid){
+          this.$refs.tabDependencyGraph.activate()
+        }
       }
     },
     destroyed() {

src/views/portfolio/projects/ProjectComponents.vue

@@ -71,9 +71,10 @@
             title: this.$t('message.component'),
             field: "name",
             sortable: true,
-            formatter(value, row, index) {
-              let url = xssFilters.uriInUnQuotedAttr("../components/" + row.uuid);
-              return `<a href="${url}">${xssFilters.inHTMLData(value)}</a>`;
+            formatter: (value, row, index) => {
+              let url = xssFilters.uriInUnQuotedAttr("../../../components/" + row.uuid);
+              let dependencyGraphUrl = xssFilters.uriInUnQuotedAttr("../../../projects/" + this.uuid + "/dependencyGraph/" + row.uuid)
+              return `<a href="${dependencyGraphUrl}"<i class="fa fa-sitemap" aria-hidden="true" style="float:right; padding-top: 4px; cursor:pointer" data-toggle="tooltip" data-placement="bottom" title="Show in dependency graph"></i></a> ` + `<a href="${url}">${xssFilters.inHTMLData(value)}</a>`;
             }
           },
           {
@@ -126,7 +127,7 @@
             sortable: false,
             formatter(value, row, index) {
               if (Object.prototype.hasOwnProperty.call(row, "resolvedLicense")) {
-                let licenseurl = "../licenses/" + row.resolvedLicense.licenseId;
+                let licenseurl = "../../../licenses/" + row.resolvedLicense.licenseId;
                 return "<a href=\"" + licenseurl + "\">" + xssFilters.inHTMLData(row.resolvedLicense.licenseId) + "</a>";
               } else {
                 return xssFilters.inHTMLData(common.valueWithDefault(value, ""));
@@ -190,7 +191,9 @@
     },
     methods: {
       initializeTooltips: function () {
-        $('[data-toggle="tooltip"]').tooltip();
+        $('[data-toggle="tooltip"]').tooltip({
+          trigger: "hover"
+        });
       },
       removeDependencies: function () {
         let selections = this.$refs.table.getSelections();