Another set of UI improvements

app/assets/css/main.css

@@ -203,6 +203,13 @@ h3.library-identification{
 .dependencies-table .identifiers .explained{
     border-bottom: none;
 }
+.dependencies-table .vulnerabilities-details > li{
+    display: block;
+    list-style-type: none;
+    padding-left: 0;
+    margin-left: 0;
+}
+
 .expandable:before{
     font-family: 'Glyphicons Halflings';
     content: "\e114";
@@ -212,4 +219,19 @@ h3.library-identification{
 }
 .expandable.expandable-right.collapsed:before{
     content: "\e079";
-}
+}
+.cvss .tooltip-inner table {
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 10px;
+}
+.cvss .tooltip-inner {
+    max-width: 250px;
+    width: 250px;
+}
+.vulnerability-expandable{
+    margin-left: 15px;
+}
+.vulnerability-expandable .more{
+    margin: 10px;
+}

app/controllers/DependencyCheckReportsParser.scala

@@ -97,7 +97,7 @@ final case class TeamFilter(team: Team) extends Filter{
 object NoFilter extends Filter{
   override def filters: Boolean = false
   override val descriptionHtml: Html = views.html.filters.all()
-  override def descriptionText: String = "no filter selected"
+  override def descriptionText: String = "all projects"
   override def subReports(r: Result): Option[Result] = Some(r)
   override def selector: Option[String] = None
 }

app/views/dependencyDetailsInner.scala.html

@@ -20,7 +20,7 @@
         <p>
         @for(line <- descriptionParagraphLines) {
             @line<br>
-            }
+        }
         </p>
     }
     </div>
@@ -65,14 +65,13 @@
 <h4 class="expandable" data-toggle="collapse" data-target="#@depPrefix-projects-details">Affected projects (@dep.projects.size)</h4>
 <ul id="@depPrefix-projects-details" class="collapse in">@for(p <- dep.projects.toIndexedSeq.sorted){<li>@friendlyProjectName(p)</li>}</ul>
 <h4 class="expandable" data-toggle="collapse" data-target="#@depPrefix-vulnerabilities-details">Vulnerabilities (@dep.vulnerabilities.size)</h4>
-<ul id="@depPrefix-vulnerabilities-details" class="collapse in">
+<ul id="@depPrefix-vulnerabilities-details" class="collapse in vulnerabilities-details">
     @for(vuln <- dep.vulnerabilities.toSeq.sortBy(_.cvssScore.map(-_)); vulnPrefix = s"$depPrefix-vulnerabilities-details-${vuln.name}"){
         <li>
-            <h5 data-toggle="collapse" data-target="#@vulnPrefix-details">@vuln.name <a href="@routes.Statistics.vulnerability(vuln.name, selectorOption)"><span class="glyphicon glyphicon-log-out"></span></a></h5>
-            <div id="@vulnPrefix-details" class="collapse">
-                @vulnerability("h6", depPrefix, vuln)
-            <h6 data-toggle="collapse" data-target="#@(s"$depPrefix-suppression-cve-${vuln.name}")">CVE suppression</h6>
-            <div id="@(s"$depPrefix-suppression-cve-${vuln.name}")" class="collapse">@SuppressionXml.forVuln(dep, vuln)</div>
+            <h5 data-toggle="collapse" class="expandable collapsed" data-target="#@vulnPrefix-details">@vuln.name <a href="@routes.Statistics.vulnerability(vuln.name, selectorOption)" target="_blank" onclick="event.stopPropagation();"><span class="glyphicon glyphicon-new-window"></span></a></h5>
+            <div id="@vulnPrefix-details" class="collapse vulnerability-expandable">
+                @vulnerability("h6", depPrefix+"-"+vuln.name, vuln)
+                <p><a class="btn btn-primary more" target="_blank" href="@routes.Statistics.vulnerability(vuln.name, selectorOption)">Full details about this vulnerability</a></p>
             </div>
         </li>
     }

app/views/genericSection.scala.html

@@ -1,3 +1,3 @@
 @(idPrefix: String)(ht: String)(name: String, description: String)(content: Html)
-<@ht id="@idPrefix-@name-header" data-toggle="collapse" data-target="#@idPrefix-@name-details">@description</@ht>
+<@ht id="@idPrefix-@name-header" data-toggle="collapse" data-target="#@idPrefix-@name-details" class="expandable">@description</@ht>
 <div id="@idPrefix-@name-details" class="collapse in">@content</div>

app/views/vulnerability.scala.html

@@ -7,18 +7,27 @@
         </tr>
     }
 }
+@severityTable(vuln: Vulnerability) = {
+    <p>Rating of severity on scale 0–10. The total score depends on following subscores:</p>
+    <table class="vuln-details">
+        @row("authentication")(vuln.cvss.authenticationr)
+        @row("availability impact")(vuln.cvss.availabilityImpact)
+        @row("access vector")(vuln.cvss.accessVector)
+        @row("integrity impact")(vuln.cvss.integrityImpact)
+        @row("access complexity")(vuln.cvss.accessComplexity)
+        @row("confidential impact")(vuln.cvss.confidentialImpact)
+        @row("total score")(vuln.cvss.score)
+    </table>
+}
 @section = @{views.html.genericSection(idPrefix)(ht) _}
-<table class="vuln-details">
-    @row("CWE")(vuln.cweOption)
-    @row("CVSS: score")(vuln.cvss.score)
-    @row("CVSS: authenticationr")(vuln.cvss.authenticationr)
-    @row("CVSS: availability impact")(vuln.cvss.availabilityImpact)
-    @row("CVSS: access vector")(vuln.cvss.accessVector)
-    @row("CVSS: integrity impact")(vuln.cvss.integrityImpact)
-    @row("CVSS: access complexity")(vuln.cvss.accessComplexity)
-    @row("CVSS: confidential impact")(vuln.cvss.confidentialImpact)
-</table>
-@vuln.description
+<p class="cvss"><label>CVSS vulnerability score:</label> <span class="explained" title="@severityTable(vuln).toString()" onmouseover="$(this).tooltip({html: true, placement: 'right'}).tooltip('show')">
+    @vuln.cvss.score match{
+        case None => {<i>unknown</i>}
+        case Some(score) => {<b>@score</b>}
+    }
+</span></p>
+@vuln.cweOption.map{cwe =><p><label>Category:</label> <span class="explained" title="Vulnerability category according to Common Weakness Enumeration" onmouseover="$(this).tooltip({placement: 'right'}).tooltip('show')"><b>@cwe</b></span></p>}
+<label>Description:</label> @vuln.description
 @section("vuln-sw", "Vulnerable software"){
     <ul id="@idPrefix-details">
     @for(sw <- vuln.vulnerableSoftware){