update

displayer.js

@@ -99,7 +99,7 @@ function display_content(s){
                 //  Repetition Check Passes
                 routineTab.add(res.subroutine+"+"+res.variate+"+"+res.filename, res.vultype);
                 obj_list.push(res);
-                all_lines += "L" + res.lineno + " - <span> " + res.filename + "</span>  <br>";
+                all_lines += `L ${res.lineno} - <span> ${res.filename}</span>  <br>`;
                 count ++;
                 if(vulTypeCount.containsKey(res.vultype)){
                     let vul_list  =  vulTypeCount.getValue(res.vultype);
@@ -121,18 +121,155 @@ function display_content(s){
             }
         }
     }
+    showToPage();
 }
 
 function showToPage() {
-    let s = "";
-    for (i = 0; i<fileCount.length; i++){
-
+    let s    = "";
+    let keys = fileCount.getKeys();
+    let one  = [];
+    let doms = "";
+    for (i = 0; i<fileCount.getSize(); i++){
+        one   = fileCount.getValue(keys[i]);
+        doms += makeOneFile(keys[i], one.length);
     }
+    $("#perfile").html(doms);
+    let bug_count = routineTab.getSize();
+    $("#risk-counter").text(bug_count);
+    $("#risky-f-counter").text(fileCount.getSize());
+    $("#f-counter").text(131);
+    $("#time-counter").text(21);
+    showFiles();
+    showVul();
 }
 
 function makeOneFile(file_name, file_count) {
-    return `<li class="list-group-item d-flex justify-content-between align-items-center">
+    return `<li class="list-group-item btn btn-outline-primary d-flex justify-content-between align-items-center"  onclick='showDetial("${file_name}")' >
                ${file_name}
                <span class="badge badge-primary badge-pill">${file_count}</span>
             </li>`;
+}
+
+
+function showVul() {
+    let vul_data  = [];
+    let i         = 0;
+    let keys      = vulTypeCount.getKeys();
+    for(i = 0 ; i < vulTypeCount.getSize(); i++){
+        vul_data.push({name: keys[i], y:vulTypeCount.getValue(keys[i]).length});
+    }
+
+    Highcharts.chart('container1', {
+        chart: {
+            plotBackgroundColor: null,
+            plotBorderWidth: null,
+            plotShadow: false,
+            type: 'pie'
+        },
+        title: {
+            text: 'Vulnerabilities Per Category'
+        },
+        tooltip: {
+            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+        },
+        plotOptions: {
+            pie: {
+                allowPointSelect: true,
+                cursor: 'pointer',
+                dataLabels: {
+                    enabled: false
+                },
+                showInLegend: true
+            }
+        },
+        series: [{
+            name: 'Category',
+            colorByPoint: true,
+            data: vul_data
+        }]
+    });
+}
+
+function showFiles() {
+
+    let vul_file  = [];
+    let vul_count = [];
+    let i         = 0;
+    let keys      = fileCount.getKeys();
+    for(i = 0 ; i < fileCount.getSize(); i++){
+        vul_file.push(keys[i]);
+        vul_count.push(fileCount.getValue(keys[i]).length);
+    }
+
+    var chart = Highcharts.chart('container2', {
+        chart: {
+            zoomType: 'xy'
+        },
+        title: {
+            text: 'Vulnerabilities Per File '
+        },
+        subtitle: {
+            text: ' AliOS-Things '
+        },
+        xAxis: [{
+            categories: vul_file,
+            crosshair: true
+        }],
+        yAxis: [{ // Primary yAxis
+            labels: {
+                format: '{value} risks',
+                style: {
+                    color: Highcharts.getOptions().colors[1]
+                }
+            },
+            title: {
+                text: 'Count',
+                style: {
+                    color: Highcharts.getOptions().colors[1]
+                }
+            }
+        }],
+        tooltip: {
+            shared: true
+        },
+        // legend: {
+        //     layout: 'vertical',
+        //     align: 'left',
+        //     verticalAlign: 'top',
+        //     y: 100,
+        //     floating: true,
+        //     backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
+        // },
+        series: [{
+            name: 'Per File',
+            type: 'column',  /**spline */
+            data: vul_count,
+            tooltip: {
+                valueSuffix: ' risks'
+            }
+        }]
+    });
+}
+
+
+
+function showDetial(file_name){
+    let vul      =  fileCount.getValue(file_name);
+    let all_html =  "";
+    $("#modal-title").text(file_name + " Detail");
+    for(i= 0 ; i < vul.length; i ++){
+        all_html += ` In function ${vul[i].subroutine},<br> Line ${vul[i].lineno}, &nbsp;&nbsp;&nbsp;  
+                       <span style="color:red"> ${vul[i].variate} </span> - 
+                      <span style="color:orange"> ${trans(vul[i].vultype)}</span> <br><br> `;
+    }
+    $("#file-detial").html(all_html);
+    $("#modal-detial").modal('show');
+}
+
+function trans(tp){
+    if(tp == "NPD"){
+        return "Null Pointer Dereference";
+    }else if(tp == "UIV"){
+        return "Uninitialized Variable";
+    }
 }

index.html

@@ -1,18 +1,20 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <meta name="description" content="Flat UI Kit Free is a Twitter Bootstrap Framework design and Theme, this responsive framework includes a PSD and HTML version."/>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <meta name="description"
+          content="Flat UI Kit Free is a Twitter Bootstrap Framework design and Theme, this responsive framework includes a PSD and HTML version."/>
 
     <meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
 
     <!-- Loading Bootstrap -->
+    <link href="bootstrap.min.css" rel="stylesheet">
     <link href="dist/css/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 
     <!-- Loading Flat UI -->
     <link href="dist/css/flat-ui.css" rel="stylesheet">
     <link href="docs/assets/css/demo.css" rel="stylesheet">
-
     <link rel="shortcut icon" href="img/favicon.ico">
 
     <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
@@ -71,8 +73,8 @@
                             <div class="input-group">
                                 <input class="form-control" id="navbarInput-01" type="search" placeholder="Search">
                                 <span class="input-group-btn">
-                      <button type="submit" class="btn"><span class="fui-search"></span></button>
-                    </span>
+                                  <button type="submit" class="btn"><span class="fui-search"></span></button>
+                                </span>
                             </div>
                         </div>
                     </form>
@@ -80,73 +82,95 @@
             </nav><!-- /navbar -->
         </div>
     </div>
-    <div class="row demo-row">
-         <div class="col-xs-3">
-             <a href="#fakelink" class="btn btn-block btn-lg btn-default">Bug Count</a>
-         </div>
-         <div class="col-xs-3">
-             <a href="#fakelink" class="btn btn-block btn-lg btn-default">Files Scanned</a>
-         </div>
-         <div class="col-xs-3">
-             <a href="#fakelink" class="btn btn-block btn-lg btn-default">Risky Files</a>
-         </div>
-         <div class="col-xs-3">
-             <a href="#fakelink" class="btn btn-block btn-lg btn-default">Time Used</a>
-         </div>
-    </div> <!-- /row -->
     <div class="row">
-         <div class="col-xs-3">
-             <div class="form-group has-error">
-                 <input type="text" value="Bug Count : 50" disabled="disabled"  class="form-control h2" style="height: 5em">
-             </div>
-         </div>
-         <div class="col-xs-3">
-             <div class="form-group has-success">
-                 <input type="text" value="Files Scanned : 50" disabled="disabled" class="form-control  h2" style="height: 5em">
-             </div>
-         </div>
-         <div class="col-xs-3">
-             <div class="form-group has-error">
-                 <input type="text" value="Risky Files : 44" disabled="disabled"  class="form-control h2" style="height: 5em">
-                 <span class="input-icon fui-check-inverted"></span>
-             </div>
-         </div>
-         <div class="col-xs-3">
-             <div class="form-group has-success">
-                 <input type="text" value="Time Used : 21" disabled="disabled" class="form-control h2" style="height: 5em">
-             </div>
-         </div>
-     </div>
+        <div class="col-sm-3">
+            <div class="card border-primary mb-3" style="max-width: 18rem;">
+                <!--<div class="card-header">Header</div>-->
+                <div class="card-body text-primary">
+                    <h5 class="card-title" id="risk-counter"></h5>
+                    <p class="card-text">Risk Count</p>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-3">
+            <div class="card border-primary mb-3" style="max-width: 18rem;">
+                <!--<div class="card-header">Header</div>-->
+                <div class="card-body text-primary">
+                    <h5 class="card-title" id="risky-f-counter">30</h5>
+                    <p class="card-text">Risky Files</p>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-3">
+            <div class="card border-primary mb-3" style="max-width: 18rem;">
+                <!--<div class="card-header">Header</div>-->
+                <div class="card-body text-primary">
+                    <h5 class="card-title" id="f-counter">30</h5>
+                    <p class="card-text">Files Scanned</p>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-3">
+            <div class="card border-primary mb-3" style="max-width: 18rem;">
+                <!--<div class="card-header">Header</div>-->
+                <div class="card-body text-primary">
+                    <h5 class="card-title" id="time-counter">30</h5>
+                    <p class="card-text">Time Used</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--<div class="row demo-row">-->
+        <!--<div class="col-xs-3">-->
+            <!--<a href="#fakelink" class="btn btn-block btn-lg btn-default">Bug Count</a>-->
+        <!--</div>-->
+        <!--<div class="col-xs-3">-->
+            <!--<a href="#fakelink" class="btn btn-block btn-lg btn-default">Files Scanned</a>-->
+        <!--</div>-->
+        <!--<div class="col-xs-3">-->
+            <!--<a href="#fakelink" class="btn btn-block btn-lg btn-default">Risky Files</a>-->
+        <!--</div>-->
+        <!--<div class="col-xs-3">-->
+            <!--<a href="#fakelink" class="btn btn-block btn-lg btn-default">Time Used</a>-->
+        <!--</div>-->
+    <!--</div> &lt;!&ndash; /row &ndash;&gt;-->
 </div>
-<!--/ background -->
+<div class="clearfix" style="height:5rem;"></div>
+<!--/ background --
 <div class="content-nd">
 
-	<div class="container">
-    	<div class="row">
-        	<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
-            	<div class="box">
-                	<i class="fa fa-tablet fa-5x"></i>
+    <div class="container">
+        <div class="row">
+            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
+                <div class="box">
+                    <i class="fa fa-tablet fa-5x"></i>
 
                     <h2>Responsive</h2>
-                    <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. ITS BETA is working hard to launch a new site that's going to revolutionize the way you do business.</p>
+                    <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic
+                        ad nauseum. ITS BETA is working hard to launch a new site that's going to revolutionize the way
+                        you do business.</p>
 
                 </div>
             </div>
             <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
-            	<div class="box">
-                	<i class="fa fa-laptop fa-5x"></i>
+                <div class="box">
+                    <i class="fa fa-laptop fa-5x"></i>
 
                     <h2>Modular</h2>
-                    <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. ITS BETA is working hard to launch a new site that's going to revolutionize the way you do business.</p>
+                    <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic
+                        ad nauseum. ITS BETA is working hard to launch a new site that's going to revolutionize the way
+                        you do business.</p>
 
                 </div>
             </div>
             <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
-            	<div class="box">
-                	<i class="fa fa-cogs fa-5x"></i>
+                <div class="box">
+                    <i class="fa fa-cogs fa-5x"></i>
 
                     <h2>Adaptive</h2>
-                    <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. ITS BETA is working hard to launch a new site that's going to revolutionize the way you do business.</p>
+                    <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic
+                        ad nauseum. ITS BETA is working hard to launch a new site that's going to revolutionize the way
+                        you do business.</p>
 
                 </div>
             </div>
@@ -154,241 +178,119 @@
     </div>
 
 </div>
-<!--/ content-nd -->
+--/ content-nd -->
 
 <!--/ content-rd -->
 
 <!--/ content-ft -->
 <div class="content-sx">
- <div class="container">
-
-     <div class="row">
-         <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
-             <div class="img-right">
-                 <div id="container1" style="min-width:400px;height:400px"></div>
-             </div>
-         </div>
-
-         <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
-
-             <div class="text-center row" style="margin: 0 auto">
-
-                     <div class="box">
-                         <i class="fa fa-laptop fa-5x"></i>
-
-                         <h2>UIV</h2>
-                         <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. ITS BETA is working hard to launch a new site that's going to revolutionize the way you do business.</p>
-                     </div>
-                 <div class="box">
-                     <i class="fa fa-laptop fa-5x"></i>
-
-                     <h2>NPD</h2>
-                     <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. ITS BETA is working hard to launch a new site that's going to revolutionize the way you do business.</p>
-                 </div>
+    <div class="container">
 
+        <div class="row">
+            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
+                <div class="img-right">
+                    <div id="container1" style="min-width:400px;height:400px"></div>
+                </div>
+            </div>
 
+            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
 
+                <div class="text-center row" style="margin: 0 auto">
+                    <div class="box col-md-12">
+                        <i class="fa fa-laptop fa-5x"></i>
+                        <h4>UIV</h4>
+                        <p>Uninitialized Variable (UIV)</p>
+                    </div>
+                    <div class="box col-md-12">
+                        <i class="fa fa-laptop fa-5x"></i>
 
-             </div>
-             <!--/ right-text -->
-         </div>
-     </div><!--/ row-->
+                        <h4>NPD</h4>
+                        <p>Null Pointer Dereference (NPD)</p>
+                    </div>
+                </div>
+                <!--/ right-text -->
+            </div>
+        </div><!--/ row-->
 
- </div>
+    </div>
 </div>
 
 <div class="content-sx">
-	<div class="container">
+    <div class="container">
 
         <div class="row">
-        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
-        	<div class="img-right">
-                <div id="container2" style="min-width:400px;height:400px"></div>
-        	</div>
-        </div>
+            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
+                <div class="img-right">
+                    <div id="container2" style="min-width:400px;height:400px"></div>
+                </div>
+            </div>
 
-        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
+            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
 
-            <div class="text-center row" style="margin: 0 auto">
+                <div class="text-center row" style="margin: 0 auto">
 
-                <div class="box">
-                    <i class="fa fa-laptop fa-5x"></i>
+                    <div class="box col-12">
+                        <i class="fa fa-laptop fa-5x"></i>
 
-                    <h2>UIV</h2>
-                    <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. ITS BETA is working hard to launch a new site that's going to revolutionize the way you do business.</p>
-                </div>
-                <div class="box">
-                    <i class="fa fa-laptop fa-5x"></i>
+                        <h4>File Detection</h4>
+                        <p>File Detection</p>
+                    </div>
+                    <div class="box col-12">
+                        <i class="fa fa-laptop fa-5x"></i>
 
-                    <h2>NPD</h2>
-                    <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. ITS BETA is working hard to launch a new site that's going to revolutionize the way you do business.</p>
-                </div>
+                        <h4>High Level Vuls</h4>
+                        <p>File Detection</p>
+                    </div>
 
 
+                </div>
+                <!--/ right-text -->
+            </div>
+        </div><!--/ row-->
 
+        <div class="row">
+            <div class="col-12">
+                <h2> Vulerability Detials (Per File) </h2>
+            </div>
+            <ul class="list-group col-md-12" id="perfile">
+                <li class="list-group-item d-flex justify-content-between align-items-center">
+                    Reading Detection Results ...
+                    <span class="badge badge-primary badge-pill">+</span>
+                </li>
+            </ul>
+        </div>
+    </div>
 
+    <div class="modal" tabindex="-1" role="dialog" id="modal-detial">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="modal-title">File Detail</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <p id="file-detial"></p>
+                </div>
+                <div class="modal-footer">
+                    <!--<button type="button" class="btn btn-primary">OK</button>-->
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                </div>
             </div>
-            <!--/ right-text -->
         </div>
-       </div><!--/ row-->
-
-       <div class="row">
-           <ul class="list-group" id="perfile">
-               <li class="list-group-item d-flex justify-content-between align-items-center">
-                   Cras justo odio
-                   <span class="badge badge-primary badge-pill">14</span>
-               </li>
-               <li class="list-group-item d-flex justify-content-between align-items-center">
-                   Dapibus ac facilisis in
-                   <span class="badge badge-primary badge-pill">2</span>
-               </li>
-               <li class="list-group-item d-flex justify-content-between align-items-center">
-                   Morbi leo risus
-                   <span class="badge badge-primary badge-pill">1</span>
-               </li>
-           </ul>
-       </div>
     </div>
 </div>
 <!--/ content-sx -->
 
+<script src="dist/js/vendor/jquery.min.js"></script>
+<!--<script src="dist/js/vendor/video.js"></script>-->
+<script src="dist/js/flat-ui.min.js"></script>
+<script src="bootstrap.min.js"></script>
+<script src="displayer.js"></script>
+<!--<script src="docs/assets/js/application.js"></script>-->
 
+<iframe src="opencc_vul.txt" id="opencc_vul" style="display:none;"></iframe>
 
-
-
-
-     <script src="dist/js/vendor/jquery.min.js"></script>
-     <script src="dist/js/vendor/video.js"></script>
-     <script src="dist/js/flat-ui.min.js"></script>
-     <script src="docs/assets/js/application.js"></script>
-
-     <script>
-    Highcharts.chart('container1', {
-        chart: {
-            plotBackgroundColor: null,
-            plotBorderWidth: null,
-            plotShadow: false,
-            type: 'pie'
-        },
-        title: {
-            text: '2018 年浏览器市场份额'
-        },
-        tooltip: {
-            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
-        },
-        plotOptions: {
-            pie: {
-                allowPointSelect: true,
-                cursor: 'pointer',
-                dataLabels: {
-                    enabled: false
-                },
-                showInLegend: true
-            }
-        },
-        series: [{
-            name: 'Brands',
-            colorByPoint: true,
-            data: [{
-                name: 'Chrome',
-                y: 61.41,
-                sliced: true,
-                selected: true
-            }, {
-                name: 'Internet Explorer',
-                y: 11.84
-            }, {
-                name: 'Firefox',
-                y: 10.85
-            }, {
-                name: 'Edge',
-                y: 4.67
-            }, {
-                name: 'Safari',
-                y: 4.18
-            }, {
-                name: 'Other',
-                y: 7.05
-            }]
-        }]
-    });
-</script>
-     <script>
-        var chart = Highcharts.chart('container2', {
-            chart: {
-                zoomType: 'xy'
-            },
-            title: {
-                text: '东京月平均温度和降雨量'
-            },
-            subtitle: {
-                text: '数据来源: WorldClimate.com'
-            },
-            xAxis: [{
-                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
-                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-                crosshair: true
-            }],
-            yAxis: [{ // Primary yAxis
-                labels: {
-                    format: '{value}°C',
-                    style: {
-                        color: Highcharts.getOptions().colors[1]
-                    }
-                },
-                title: {
-                    text: '温度',
-                    style: {
-                        color: Highcharts.getOptions().colors[1]
-                    }
-                }
-            }, { // Secondary yAxis
-                title: {
-                    text: '降雨量',
-                    style: {
-                        color: Highcharts.getOptions().colors[0]
-                    }
-                },
-                labels: {
-                    format: '{value} mm',
-                    style: {
-                        color: Highcharts.getOptions().colors[0]
-                    }
-                },
-                opposite: true
-            }],
-            tooltip: {
-                shared: true
-            },
-            legend: {
-                layout: 'vertical',
-                align: 'left',
-                x: 120,
-                verticalAlign: 'top',
-                y: 100,
-                floating: true,
-                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
-            },
-            series: [{
-                name: '降雨量',
-                type: 'column',
-                yAxis: 1,
-                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
-                tooltip: {
-                    valueSuffix: ' mm'
-                }
-            }, {
-                name: '温度',
-                type: 'spline',
-                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
-                tooltip: {
-                    valueSuffix: '°C'
-                }
-            }]
-        });
-    </script>
-
-     <iframe src="opencc_vul.txt" id="opencc_vul" style="display:none;"></iframe>
-     <script src="displayer.js" type="javascript"></script>
 </body>
 </html>