{% extends 'layouts/master-page' %}
{% set page = "vulns" %}
{% block title %}Vulns{% endblock %}
{% block head %}
  <!-- css -->
  <style>

    .arc text {
      font: 15px sans-serif;
      text-color: white;
      text-anchor: middle;
    }

    .arc path {
      stroke: #fff;
    }

  </style>
  <!-- javascript -->
  <script type="text/javascript" src="/static/js/custom/pager.js"></script>
  
{% endblock %}
{% block content %}
  <span class="row">
      <button id="stats-toggle" type="button" class="btn btn-primary btn-xs" data-toggle="collapse" data-target="#statsdiv">
        Hide/Show stats
      </button>
  </span>
  
  <h1>{{ form.pageLength }}</h1>

  <div id='statsdiv' class="collapse in well well-small">
    <h3>Global Vulns stats</h3>
    <div class="row">
        <div class="col-sm-6 col-xs-6">
            <h4 class="text-center">Urgency</h4>
            <svg id="pie1" class="center-block" width="430" height="250"></svg>
            <table id="u_datas" class="table table-hover table-striped">
              <thead>
                <tr class="warning">
                  <td>Total Vulns</td><td>Unknown</td><td>Negligible</td><td>Low</td><td>Medium</td><td>High</td><td>Critical</td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>{{stats['nb_unknown'] + stats['nb_negligible'] + stats['nb_low'] + stats['nb_medium'] + stats['nb_high'] + stats['nb_critical'] }}</td><td>{{stats['nb_unknown']}}</td><td>{{stats['nb_negligible']}}</td><td>{{ stats['nb_low'] }}</td><td>{{stats['nb_medium']}}</td><td>{{stats['nb_high']}}</td><td>{{stats['nb_critical']}}</td>
                </tr>
              </tbody>
            </table>
        </div>
        <div class="col-sm-6 hidden-xs">
            <h4 class="text-center">Remotely Exploitable</h4>
            <svg id="pie2" class="center-block" width="430" height="250"></svg>
            <table id="r_datas" class="table table-hover table-striped">
              <thead>
                <tr class="warning">
                  <td>Remotely Exploitable</td><td>Non Remotely Exploitable</td><td>Unknown</td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>{{stats['nb_rem_exp']}}</td><td>{{stats['nb_non_rem_exp']}}</a></td><td>{{ stats['nb_rem_unknown'] }}</td>
                </tr>
              </tbody>
            </table>
        </div>
    </div>
    <script type="text/javascript" src="/static/js/vendors/d3.js"></script>
    <script>

        var svg1 = d3.select("svg#pie1"),
            width1 = +svg1.attr("width"),
            height1 = +svg1.attr("height"),
            radius1 = Math.min(width1, height1) / 2,
            g1 = svg1.append("g").attr("transform", "translate(" + width1 / 2 + "," + height1 / 2 + ")");

        //var color1 = d3.scaleOrdinal(["#848484", "#3B993B", "#E3E34A", "#FF8C00", "#CC3333", "#000000"]);
        // scaleOrdinal is not available in debian packaged version
        function color1(key) {
            if (key == "Unknown") {
                return "#848484";
            }
            else if (key == "Negligible") {
                return "#3B993B";
            }
            else if (key == "Low") {
                return "#E3E34A";
            }
            else if (key == "Medium") {
                return "#FF8C00";
            }
            else if (key == "High") {
                return "#CC3333";
            }
            else if (key == "Critical") {
                return "#000000";
            }
        }
        
        // For retrocompatibility
        if (typeof d3.pie !== "undefined") { 
            var pie1 = d3.pie()
                .sort(null)
                .value(function(d) { return d.number; });
        }
        else {
            var pie1 = d3.layout.pie()
                .sort(null)
                .value(function(d) { return d.number; });
        }


        // For retrocompatibility
        if (typeof d3.arc !== "undefined") { 
            var path1 = d3.arc()
                .outerRadius(radius1 - 10)
                .innerRadius(0);
        }
        else {
            var path1 = d3.svg.arc()
                .outerRadius(radius1 - 10)
                .innerRadius(0);
        }
        
        // For retrocompatibility
        if (typeof d3.arc !== "undefined") { 
            var label1 = d3.arc()
                .outerRadius(radius1 - 40)
                .innerRadius(radius1 - 40);
        }
        else {
            var label1 = d3.svg.arc()
                .outerRadius(radius1 - 40)
                .innerRadius(radius1 - 40);
        }
                    
        var data1 = [{type:"Unknown",number:{{stats['nb_unknown']}}},
                    {type:"Negligible",number:{{stats['nb_negligible']}}},
                    {type:"Low",number:{{stats['nb_low']}}},
                    {type:"Medium",number:{{stats['nb_medium']}}},
                    {type:"High",number:{{stats['nb_high']}}},
                    {type:"",number:{{stats['nb_critical']}}}];

          var arc1 = g1.selectAll(".arc")
            .data(pie1(data1))
            .enter().append("g")
              .attr("class", "arc");

          arc1.append("path")
              .attr("d", path1)
              .attr("fill", function(d) { return color1(d.data.type); });

          arc1.append("text")
              .attr("transform", function(d) { return "translate(" + label1.centroid(d) + ")"; })
              .attr("dy", "0.35em")
              .text(function(d) { if (d.data.number != 0) return d.data.type; });
          
        var svg2 = d3.select("svg#pie2"),
            width2 = +svg2.attr("width"),
            height2 = +svg2.attr("height"),
            radius2 = Math.min(width2, height2) / 2,
            g2 = svg2.append("g").attr("transform", "translate(" + width2 / 2 + "," + height2 / 2 + ")");

        //var color2 = d3.scaleOrdinal(["#CC3333", "#3B993B", "#848484"]);
        // scaleOrdinal is not available in debian packaged version
        function color2(key) {
            if (key == "Yes") {
                return "#CC3333";
            }
            else if (key == "No") {
                return "#3B993B";
            }
            else if (key == "Unknown") {
                return "#848484";
            }
        }

        // For retrocompatibility
        if (typeof d3.pie !== "undefined") { 
            var pie2 = d3.pie()
                .sort(null)
                .value(function(d) { return d.number; });
        }
        else {
            var pie2 = d3.layout.pie()
                .sort(null)
                .value(function(d) { return d.number; });
        }


        // For retrocompatibility
        if (typeof d3.arc !== "undefined") { 
            var path2 = d3.arc()
                .outerRadius(radius2 - 10)
                .innerRadius(0);
        }
        else {
            var path2 = d3.svg.arc()
                .outerRadius(radius2 - 10)
                .innerRadius(0);
        }
        
        // For retrocompatibility
        if (typeof d3.arc !== "undefined") { 
            var label2 = d3.arc()
                .outerRadius(radius2 - 40)
                .innerRadius(radius2 - 40);
        }
        else {
            var label2 = d3.svg.arc()
                .outerRadius(radius2 - 40)
                .innerRadius(radius2 - 40);
        }

                    
        var data2 = [{type:"Yes",number:{{stats['nb_rem_exp']}}},
                    {type:"No",number:{{stats['nb_non_rem_exp']}}},
                    {type:"Unknown",number:{{stats['nb_rem_unknown']}}}];


          var arc2 = g2.selectAll(".arc")
            .data(pie2(data2))
            .enter().append("g")
              .attr("class", "arc");

          arc2.append("path")
              .attr("d", path2)
              .attr("fill", function(d) { return color2(d.data.type); });

          arc2.append("text")
              .attr("transform", function(d) { return "translate(" + label2.centroid(d) + ")"; })
              .attr("dy", "0.35em")
              .text(function(d) { if (d.data.number != 0) return d.data.type; });

    </script>
  </div>
  
  <span class="row">
      <button id="filter-toggle" type="button" class="btn btn-primary btn-xs" data-toggle="collapse" data-target="#filterdiv">
        Hide/Show filter
      </button>
  </span>
  
  <div id="filterdiv" class="collapse well well-small">  
    <form method="POST" id="filter" class="nav form-search">
<!--
      {{ form.csrf_token }}
-->
    
      {{ form.r }}
      {{ form.pageLentgh }}
      {{ form.hostname }}
      <table class="searchTable">
        <tr>
          <td class="text">{{ form.cveid.label }}</td><td>{{ form.cveid(size=20) }}</td>
          <td class="text">{{ form.package.label }}</td><td>{{ form.package(size=30) }}</td>
          <td class="text">{{ form.urgency.label }}</td><td>{{ form.urgency() }}</td>
          <td class="text">{{ form.remotely_exp.label }}</td><td>{{ form.remotely_exp() }}</td>
          <td class="text">{{ form.fixed.label }}</td><td>{{ form.fixed() }}</td>
          <td class="text">{{ form.src.label }}</td><td>{{ form.src() }}</td>
          <td class="text">{{ form.submit.label }}</td><td>{{ form.submit() }}</td>
        </tr>
      </table>
      
      <!--<input name="r" id="r" type="hidden" value=0 />
      <input name="hostname" id="hostname" type="hidden" value="all" /> 
      <input name="pageLength" id="pageLength" type="hidden" value= {% if filters is defined and filters['pageLength'] is defined %}"{{filters['pageLength']}}"{% endif %}/> 
      <table class="searchTable">
        <tr>
          <td class="text">CVEID</td>
          <td>
            <input name="cveid" id="cveid" type="text" value={% if filters is defined and filters['cveid'] != "all" %}"{{filters['cveid']}}"{% else %}"all"{% endif %}/>
          </td>
          <td class="text">Package</td>
          <td>
            <input name="package" id="package" type="text" value={% if filters is defined and filters['package'] != "all" %}"{{filters['package']}}"{% else %}"all"{% endif %}/>
          </td>
          <td>Urgency</td>
          <td>
            <select name="urgency" id="urgency">
              <option value="all">all</option>
              <option value="" {% if filters is defined and filters['urgency'] == "" %}selected{% endif %}>unknown</option>
              <option value="negligible" {% if filters is defined and filters['urgency'] == "negligible" %}selected{% endif %}>negligible</option>
              <option value="low" {% if filters is defined and filters['urgency'] == "low" %}selected{% endif %}>low</option>
              <option value="medium" {% if filters is defined and filters['urgency'] == "medium" %}selected{% endif %}>medium</option>
              <option value="high" {% if filters is defined and filters['urgency'] == "high" %}selected{% endif %}>high</option>
              <option value="critical" {% if filters is defined and filters['urgency'] == "critical" %}selected{% endif %}>critical</option>
            </select>
          </td>
          <td class="text">Remotely exp</td>
          <td>
            <select name="remotely_exp" id="remotely_exp">
              <option value="all">all</option>
              <option value="unknown" {% if filters is defined and filters['remotely_exp'] == "unknown" %}selected{% endif %}>unknown</option>
              <option value="yes" {% if filters is defined and filters['remotely_exp'] == "yes" %}selected{% endif %}>yes</option>
              <option value="no" {% if filters is defined and filters['remotely_exp'] == "no" %}selected{% endif %}>no</option>
            </select>
          </td>
          <td>Fixed</td>
          <td>
            <select name="fixed" id="fixed">
              <option value="all">all</option>
              <option value="yes" {% if filters is defined and filters['fixed'] == "yes" %}selected{% endif %}>yes</option>
              <option value="no" {% if filters is defined and filters['fixed'] == "no" %}selected{% endif %}>no</option>
            </select>
          </td>
          <td>Source</td>
          <td>
            <select name="src" id="src">
              <option value="all">all</option>
              <option value="debsecan" {% if filters is defined and filters['src'] == "debsecan" %}selected{% endif %}>debsecan</option>
              <option value="ubuntu" {% if filters is defined and filters['src'] == "ubuntu" %}selected{% endif %}>ubuntu</option>
              <option value="cve" {% if filters is defined and filters['src'] == "cve" %}selected{% endif %}>cve</option>
            </select>
          </td>
        </tr>
    </table>
    <input type="submit" value="Search"/>-->
    
  </form>
</div>
  {% if vulns != None %}
  <!-- Pager -->
  {% include 'subpages/pager.html' %}
  <!-- Search results -->
  {% include 'subpages/vulns_table.html' %}
  <!-- Pager -->
  {% include 'subpages/pager.html' %}
  {% endif %}
  
{% endblock %}
