| <!doctype html> |
| <html> |
| <head> |
| <title>Distributed Release Audit Tool (DRAT)</title> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> |
| |
| <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> |
| <link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> |
| |
| <link rel="stylesheet" type="text/css" href="resources/bower_components/nvd3/build/nv.d3.css"> |
| |
| <link rel="stylesheet" type="text/css" href="dratviz.css"> |
| |
| <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> |
| <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> |
| <script src="assets/js/ie-emulation-modes-warning.js"></script> |
| |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> |
| </script> |
| |
| <script src="assets/js/ie10-viewport-bug-workaround.js"></script> |
| <script src="resources/scripts/d3.v3.min.js"></script> |
| <script src="resources/bower_components/angular/angular.js"></script> |
| <script src="resources/bower_components/nvd3/build/nv.d3.js"></script> |
| <script src="resources/scripts/angular-nvd3.js"></script> |
| |
| <script src="resources/scripts/common.js"></script> |
| |
| <style type="text/css"> |
| |
| #hzBarChart .panel-body .legend { |
| fill: black; |
| font: 14px sans-serif; |
| text-anchor: start; |
| font-size: 12px; |
| } |
| |
| #hzBarChart .panel-body text { |
| |
| font: 10px sans-serif; |
| text-anchor: end; |
| } |
| |
| #hzBarChart .panel-body .label { |
| fill: black; |
| font: 14px sans-serif; |
| text-anchor: end; |
| } |
| |
| #hzBarChart .panel-body .bar:hover { |
| fill: brown; |
| } |
| |
| #hzBarChart .panel-body .axis path, |
| #hzBarChart .panel-body .axis line { |
| fill: none; |
| stroke: #000; |
| shape-rendering: crispEdges; |
| } |
| |
| #hzBarChart .panel-body .legend { |
| position: fixed; |
| |
| } |
| |
| </style> |
| |
| </head> |
| |
| <body> |
| <div> |
| <form class="form-inline well col-sm-12" if="myForm"> |
| <div class="form-group col-sm-12"> |
| <label for="keyword" style="color:rgb(147, 2, 1); margin:0.0%; font-size:30px; padding:0;" class="col-sm-8">Distributed Release Audit Tool (DRAT)</label> |
| <!-- |
| <input type="text" class="form-control col-sm-5" id="keyword" name="keyword" placeholder="search index..." style="width:47%; margin-top:0.3%;" required> |
| <button id="submit" type="submit" name="submit" value="submit" class="btn glyphicon glyphicon-search col-sm-1" style="background-color:rgb(147, 2, 1); color:#FFCC00; margin-left:1%; font-weight: bold;"></button> |
| <button id="clear" type="reset" class="btn col-sm-1" style="background-color:white; margin-left:1%">Clear</button> |
| --> |
| </div> |
| </form> |
| </div> |
| <div class="container col-sm-12" style="border-bottom:1px solid #5777c1;"> |
| <ul class="nav nav-pills nav-justified" style="width:100%;"> |
| <li class="active"><a data-toggle="pill" href="#summary">SUMMARY</a></li> |
| <li><a data-toggle="pill" href="#audit">AUDIT</a></li> |
| <li><a data-toggle="pill" href="#projects">PROJECTS</a></li> |
| </ul> |
| </div> |
| |
| <form id="inputForm" name="inputForm"> |
| <div id="table_div" class="tab-content col-sm-12" style=""> |
| |
| <!-- Summary --> |
| <div id="summary" class="tab-pane fade in active"> |
| <br/> |
| <div class="container col-sm-12" id="user_detail"> |
| <div class="row"> |
| <div class="col-md-12"> |
| <div id="bubbleChart" class="panel panel-info text-center"> |
| <div class="panel-heading"> |
| <h5 class="panel-title">All MIME Types</h5> |
| </div> |
| <div class="panel-body"> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col-md-6"> |
| <div id="pieChart" class="panel panel-info text-left ng-scope"> |
| <div class="panel-heading text-center"> |
| <h5 class="panel-title" style="margin:0px">Top MIME Types |
| <label style="float:right">Count : <input type="number" class="box" id="topNPie" name="topNPie" value="10" onblur="callPie()" style="color:black;" /> </label> |
| </h5> |
| </div> |
| <div id="pieChartCtr" ng-controller="pieChartController" class="panel-body ng-scope"> |
| <nvd3 options="options" data="data"></nvd3> |
| </div> |
| </div> |
| </div> |
| <div class="col-md-6"> |
| <div id="pieChartLicense" class="panel panel-info text-left ng-scope"> |
| <div class="panel-heading text-center"> |
| <h5 class="panel-title" style="margin:0px">License Types</h5> |
| </div> |
| <div id="pieChartLicenseCtr" ng-controller="pieChartLicenseController" class="panel-body ng-scope"> |
| <nvd3 options="options" data="data"></nvd3> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Audit --> |
| <div id="audit" class="tab-pane fade"> |
| <br/> |
| <div class="container col-sm-12" id="page_detail"> |
| <div id="hzBarChart" class="panel panel-info text-center"> |
| <div class="panel-heading"> |
| <h3 class="panel-title">Audit Summary</h3> |
| </div> |
| <div class="panel-body"> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Projects --> |
| <div id="projects" class="tab-pane fade"> |
| <br/> |
| <div class="table-responsive" id="projects_div"> |
| <table class="table table-hover" id="projects_table"> |
| <thead> |
| <th>#</th> |
| <th>Repository</th> |
| <th>Name</th> |
| <th>Description</th> |
| <!-- <th>Location</th> --> |
| <th>Audit</th> |
| </thead> |
| </table> |
| </div> |
| <div class="container col-md-12" id="page_project" style="display:none"> |
| <button type="button" class="btn btn-default btn-sm" onclick="backToProjects()"><span class="glyphicon glyphicon-menu-left"></span>Back</button> |
| <br/><br/> |
| <div class="container col-md-8 well" style="background-color:white"> |
| <div class="row"> |
| <div class="col-md-4"><h4>Project Name</h4></div> |
| <div class="col-md-8"> |
| <input type="text" class="form-control" id="projectName" name="projectName" style="width:100%" disabled /> |
| </div> |
| </div> |
| <br/> |
| <div class="row"> |
| <div class="col-md-4"><h4>Project Description</h4></div> |
| <div class="col-md-8"> |
| <textarea class="form-control" id="projectDesc" name="projectDesc" rows="5" style="width:100%" disabled> |
| </textarea> |
| </div> |
| </div> |
| <br/> |
| <div class="row"> |
| <div class="col-md-4"><h4>Project Repository</h4></div> |
| <div class="col-md-8"> |
| <input type="text" class="form-control" id="projectRepo" name="projectRepo" style="width:100%" disabled /> |
| </div> |
| </div> |
| <br/> |
| <div class="row"> |
| <div class="col-md-4"><h4>Project Location</h4></div> |
| <div class="col-md-8"> |
| <input type="text" class="form-control" id="projectLoc" name="projectLoc" style="width:100%" disabled /> |
| </div> |
| </div> |
| </div> |
| <div class="container col-md-4 well" style="background-color:white"> |
| <div class="row"> |
| <div class="col-md-8"> |
| <h3 style="margin:0px; padding: 0px; "><u>Filter by License</u></h3> |
| </div> |
| <div class="col-md-4"> |
| <button type="button" class="btn btn-default btn-sm" onclick="fillProjectFilesTable('')">See All</button> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col-md-6"><h4><a href='#' onclick='fillProjectFilesTable("Unknown")'>Unknown License</a></h4></div> |
| <div class="col-md-2"> |
| <h4 id="licenseUnknown" style="color:red;">0</h4> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col-md-6"><h4><a href='#' onclick='fillProjectFilesTable("Standard")'>Standard License</a></h4></div> |
| <div class="col-md-2"> |
| <h4 id="licenseStandard">0</h4> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col-md-6"><h4><a href='#' onclick='fillProjectFilesTable("Apache")'>Apache License</a></h4></div> |
| <div class="col-md-2"> |
| <h4 id="licenseApache">0</h4> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col-md-6"><h4><a href='#' onclick='fillProjectFilesTable("Binaries")'>Binaries</a></h4></div> |
| <div class="col-md-2"> |
| <h4 id="licenseBinaries">0</h4> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col-md-6"><h4><a href='#' onclick='fillProjectFilesTable("Generated")'>Generated</a></h4></div> |
| <div class="col-md-2"> |
| <h4 id="licenseGenerated">0</h4> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col-md-6"><h4><a href='#' onclick='fillProjectFilesTable("Notes")'>Notes</a></h4></div> |
| <div class="col-md-2"> |
| <h4 id="licenseNotes">0</h4> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col-md-6"><h4><a href='#' onclick='fillProjectFilesTable("Archives")'>Archives</a></h4></div> |
| <div class="col-md-2"> |
| <h4 id="licenseArchives">0</h4> |
| </div> |
| </div> |
| </div> |
| <div class="container col-sm-12 well" id="page_project_files" style="background-color:white"> |
| <table class="table table-hover" id="project_files_table"> |
| </table> |
| |
| <!-- Modal --> |
| <div class="modal fade" id="myModal" role="dialog"> |
| <div class="modal-dialog"> |
| <!-- Modal content--> |
| <div class="modal-content"> |
| <div class="modal-header"> |
| <button type="button" class="close" data-dismiss="modal">×</button> |
| <h4 class="modal-title">File Header</h4> |
| </div> |
| <div id="file-header-modal" class="modal-body"> |
| <p>Some text in the modal.</p> |
| </div> |
| <div class="modal-footer"> |
| <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> |
| </div> |
| </div> |
| |
| </div> |
| </div> |
| |
| </div> |
| </div> |
| </div> |
| </div> |
| </form> |
| |
| |
| <!-- Charts --> |
| <script src="resources/scripts/bubbleChart.js"></script> |
| <script src="resources/scripts/pieChart.js"></script> |
| <script src="resources/scripts/pieChartLicense.js"></script> |
| <script src="resources/scripts/hzBarChart.js"></script> |
| <script> |
| |
| var projectFilesTableData = ""; |
| |
| $(document).ready(function() { |
| $.ajaxSetup({ cache: true }); |
| angular.bootstrap(document.getElementById("pieChart"), ['pieChart']); |
| angular.bootstrap(document.getElementById("pieChartLicense"), ['pieChartLicense']); |
| search(); |
| getProjects(); |
| }); |
| |
| function search() { |
| var inputForm = document.getElementById("inputForm"); |
| var mimePie = angular.element(document.getElementById("pieChartCtr")).scope(); |
| var licensePie = angular.element(document.getElementById("pieChartLicenseCtr")).scope(); |
| |
| d3.select("#bubbleChart .panel-body").selectAll("svg").remove(); |
| |
| // Refresh Charts |
| mimePie.$apply(function() { |
| mimePie.refreshPieChart(inputForm.topNPie.value); |
| }); |
| licensePie.$apply(function() { |
| licensePie.refreshPieChartLicense(); |
| }); |
| refreshBubble(); |
| refreshHzBarChart(); |
| } |
| |
| function callPie() { |
| // Input Form |
| var inputForm = document.getElementById("inputForm"); |
| var pie = angular.element(document.getElementById("pieChartCtr")).scope(); |
| pie.$apply(function() { |
| pie.refreshPieChart(inputForm.topNPie.value); |
| }); |
| } |
| |
| function getProjects() { |
| |
| $.ajax({ |
| type: 'GET', |
| url: SOLR_URL + "/select?q=type:project&rows=220&wt=json", |
| datatype: 'json', |
| success: function(data){ |
| listing = data['response']['docs']; |
| content = '</tbody>'; |
| for (var i = 0; i < listing.length; i++) { |
| content += "<tr>"; |
| content += "<td>"+(i+1)+"</td>"; |
| content += "<td>" + listing[i]['repo'].toUpperCase() + "</td>"; |
| content += "<td>" + listing[i]['name'] + "</td>"; |
| content += "<td>" + listing[i]['description'] + "</td>"; |
| //content += "<td style='overflow-wrap: break-word; word-wrap: break-word;'>" + listing[i]['loc_url'] + "</td>"; |
| content += "<td><button type=\"button\" onclick=\"printAuditDetails('" + encodeURIComponent(JSON.stringify(listing[i])) + "')\" class=\"btn btn-default btn-sm\"><span class=\"glyphicon glyphicon-menu-right\"></span></button></td>"; |
| content += "</tr>"; |
| } |
| content += "</tbody>"; |
| $("#projects_table").append(content); |
| } |
| }); |
| } |
| |
| function printAuditDetails(project) { |
| details = JSON.parse(decodeURIComponent(project)); |
| $('#projects_table').hide(); |
| $('#projectName').val(details['name']); |
| $('#projectDesc').val(details['description']); |
| $('#projectRepo').val(details['repo'].toUpperCase()); |
| $('#projectLoc').val(details['loc_url']); |
| |
| softwareId = details['repo']; |
| console.log(SOLR_URL + "/select?q=id:\"" + softwareId + "\"&fl=license_*&wt=json"); |
| $.ajax({ |
| type: 'GET', |
| url: SOLR_URL + "/select?q=id:\"" + softwareId + "\"&fl=license_*&wt=json", |
| datatype: 'json', |
| success: function(data){ |
| $('#licenseUnknown').html(data['response']['docs'][0]['license_Unknown']); |
| $('#licenseStandard').html(data['response']['docs'][0]['license_Standards']); |
| $('#licenseApache').html(data['response']['docs'][0]['license_Apache']); |
| $('#licenseBinaries').html(data['response']['docs'][0]['license_Binaries']); |
| $('#licenseGenerated').html(data['response']['docs'][0]['license_Generated']); |
| $('#licenseNotes').html(data['response']['docs'][0]['license_Notes']); |
| $('#licenseArchives').html(data['response']['docs'][0]['license_Archives']); |
| } |
| }); |
| |
| $.ajax({ |
| type: 'GET', |
| url: SOLR_URL + "/select?q=parent:\"" + softwareId + "\"&rows=5000&wt=json", |
| datatype: 'json', |
| success: function(data){ |
| docs = data['response']['docs']; |
| projectFilesTableData = docs; |
| fillProjectFilesTable(""); |
| } |
| }); |
| |
| $('#page_project').show(); |
| } |
| |
| function changeModalContent(raw_content) { |
| content = decodeURIComponent(raw_content); |
| $('#file-header-modal').html('<p>' + content + '</p>'); |
| } |
| |
| function fillProjectFilesTable(filterBy) { |
| docs = projectFilesTableData; |
| $("#project_files_table").html(""); |
| content = '<thead><th>#</th><th>Location</th><th>MIME Type</th><th>License</th><th>Header</th></thead><tbody>'; |
| for (var i = 0; i < docs.length; i++) { |
| if (filterBy == "" || filterBy == docs[i]['license'] || |
| (filterBy == "Standard" && docs[i]['license'] != "Apache" && docs[i]['license'] != "Binaries" |
| && docs[i]['license'] != "Generated" && docs[i]['license'] != "Notes" |
| && docs[i]['license'] != "Archives")) { |
| loc_path = docs[i]['id']; |
| content += "<tr>"; |
| content += "<td>"+(i+1)+"</td>"; |
| content += "<td>" + loc_path + "</td>"; |
| content += "<td>" + docs[i]['mimetype'] + "</td>"; |
| content += "<td>" + docs[i]['license'] + "</td>"; |
| if (typeof docs[i]['header'] != 'undefined') { |
| content += "<td><button type=\"button\" class=\"btn btn-danger btn-sm my-modal-button\" data-toggle=\"modal\" data-target=\"#myModal\" onclick=\"changeModalContent('" + encodeURIComponent(docs[i]['header']) + "'); \">" + $("<p>").text((docs[i]['header']).substring(0, 100)).html() + "...</button></td>"; |
| } else { |
| content += "<td>No Header Parsed</td>"; |
| } |
| content += "</tr>"; |
| } |
| } |
| |
| content += "</tbody>"; |
| $("#project_files_table").append(content); |
| |
| } |
| |
| function backToProjects() { |
| $('#page_project').hide(); |
| $('#projects_table').show(); |
| } |
| |
| </script> |
| |
| </body> |
| <noscript></noscript> |
| </html> |
