Skip to content

Commit

Permalink
Limit height display size of top queries to avoid taking the whole page
Browse files Browse the repository at this point in the history 
with huge queries. Thanks to ilias ilisepe1 for the patch.
Fix overflow of queries and detail in Slowest individual queries.
  • Loading branch information
Gilles Darold committed Aug 28, 2019
1 parent 516c0ea commit e2d2b23
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 4 deletions.
4 changes: 2 additions & 2 deletions pgbadger
View file
Expand Up @@ -10613,7 +10613,7 @@ sub print_slowest_individual_queries
<td>$duration</td>
<td id="slowest-individual-queries-examples-rank-$rank">
<div id="query-d-$rank-$idx" class="sql sql-largesize"><i class="glyphicon icon-copy" title="Click to select query"></i>$query</div>$md5
<pre>$details</pre>
<pre class="pre-smallfont">$details</pre>
$explain
</td>
</tr>
Expand Down Expand Up @@ -20528,7 +20528,7 @@ WRFILE: pgbadger_slide.min.js
jQuery(function(){jQuery("#pgbadger-brand").tooltip();jQuery("#pop-infos").popover("hide");jQuery(".slide").hide();jQuery(".active-slide").show();var a=location.hash;if(a){a=a.substring(1);var d=document.getElementById(a);var c=jQuery(d).parent().attr("id");if(c!=undefined){var b="#"+c;jQuery("#main-container li.slide").removeClass("active-slide").hide();jQuery(b).addClass("active-slide").fadeIn();window.location.hash="#"+a}}jQuery(".navbar li.dropdown").click(function(){var g=jQuery(this).attr("id");g=g.substring(5);var e="#"+g+"-slide";var f=jQuery("#main-container .active-slide").attr("id");f="#"+f;if(e!=f){jQuery("#main-container li.slide").removeClass("active-slide").hide();jQuery(e).addClass("active-slide").fadeIn()}scrollTo(0,0);draw_charts()});jQuery(".navbar li ul li").click(function(){var f=jQuery(this).parent().parent().attr("id");var g=f.substring(5);var e="#"+g+"-slide";jQuery("#main-container li.slide").removeClass("active-slide").hide();jQuery(e).addClass("active-slide").fadeIn();draw_charts()});draw_charts()});jQuery(document).ready(function(){jQuery(".sql").dblclick(function(){if(this.style==undefined||this.style.whiteSpace=="pre"){this.style.whiteSpace="normal"}else{this.style.whiteSpace="pre"}});jQuery(".icon-copy").click(function(){var d=$(this).parent()[0];if(window.getSelection){var c=window.getSelection();c.removeAllRanges();var a=document.createRange();a.selectNodeContents(d);c.addRange(a)}else{if(document.selection){var b=document.body.createTextRange();b.moveToElementText(d);b.select()}}})});
WRFILE: pgbadger.min.css

body{background-color:#cdd5da;background:-webkit-linear-gradient(bottom,#cdd5da,#e8e7e7);background:-moz-linear-gradient(bottom,#cdd5da,#e8e7e7);background:-ms-linear-gradient(bottom,#cdd5da,#e8e7e7);background:-o-linear-gradient(bottom,#cdd5da,#e8e7e7);background:linear-gradient(to bottom,#cdd5da,#e8e7e7);margin-top:50px}ul.nav li.dropdown:hover ul.dropdown-menu{display:block}ul.nav li.dropdown ul.dropdown-menu{margin:0}#pgbadger-brand{font-size:1.1em;font-weight:bold}ul#slides li{list-style-type:none}h1{font-size:2em}h2{font-size:1.6em}h3,h3 small{font-size:1.1em;text-transform:uppercase;letter-spacing:.1em}h3 small{font-size:1em}.analysis-item{background:#fff;margin-bottom:2em;padding-bottom:15px}h3{margin:0;padding:0;color:#5f5555}h1.page-header{margin:1em 0 1em 0;padding:0;color:#5f5555;border-bottom:0}h2{color:#5f5555}.nav-pills,.nav-tabs{margin:0 1em}footer{margin-top:60px}.col-md-8 .tabbable{margin-top:1em}#global-stats .tab-content{margin:2em 0 3em 0}#global-stats .tab-content li{display:block;width:14%;float:left;margin-left:3%}#global-stats .tab-content li.first{margin-left:0}.well{background:#f9f9f9;border-radius:0}.key-figures ul{margin:0;padding:0}.key-figures li{list-style-type:none;margin-bottom:2em}.figure{font-weight:bold;font-size:1.4em;color:#2e8aa5}.figure-label{display:block;color:#666}.mfigure{font-weight:bold;font-size:1.4em;color:#d26115;margin-left:5px}.smfigure{font-weight:bold;font-size:1.1em;color:#d26115}.mfigure small{font-weight:bold;font-size:.6em;color:#fff}.smfigure small{font-weight:bold;font-size:.6em;color:#fff}.hfigure{font-weight:bold;font-size:1.0em;color:#8dbd0f}.hfigure small{font-weight:bold;font-size:.6em;color:#fff}.navbar-inverse{background:#5f5555;border:0}.navbar-inverse .brand,.navbar-inverse .nav>li>a{color:#eee}.linegraph{width:100%;height:400px}.piegraph{width:100%;height:400px}.histo-graph{width:100%;height:140px}.duration-histo-graph{width:100%;height:400px}@media(min-width:969px){#show-hide-menu{position:absolute;left:-9999px}.navbar ul.collapse{overflow:visible}}@media(max-width:968px){#show-hide-menu{position:inherit}#global-stats .tab-content li{display:block;width:auto;float:none;margin-left:0;margin-bottom:1em}ul#slides{margin:0;padding:0}ul#slides li div div{padding:0 1.5em}.linegraph{width:94.5%}.piegraph{width:94.5%}.histo-graph{width:84.5%}.duration-histo-graph{width:94.5%}.key-figures ul{margin-top:1.5em}.navbar .nav{margin:0 3em 2em 3em}.navbar .nav>li{float:none}.navbar ul.collapse:hover{overflow:visible}}div#littleToc{display:none}html>body div#littleToc{display:block;background-color:white;color:black;position:fixed;bottom:10px;right:10px;width:50px;font-size:11px;text-align:left;border:0}div#littleToc div#littleTocTitle{font-weight:bold;text-align:center;padding:2px}div#littleToc ul{padding:0;text-indent:0;margin:0}div#littleToc li{font-size:11px;list-style-type:none;padding:0;text-indent:0;margin:0}div#littleToc a{color:#000;padding:2px;margin:2px;display:block;text-decoration:none;border:1px solid #ccc}div#littleToc a:hover{text-decoration:none;background-color:#ddd}.jqplot-graph{color:#ac1316;z-index:99}.sql{font-family:monospace}.sql .imp{font-weight:bold;color:red}.sql .kw1{color:#933;font-weight:bold;text-transform:uppercase}.sql .kw2{color:#933;font-style:italic}.sql .kw3{color:#933;text-transform:uppercase}.sql .co1{color:#808080;font-style:italic}.sql .co2{color:#808080;font-style:italic}.sql .coMULTI{color:#808080;font-style:italic}.sql .es0{color:#009;font-weight:bold}.sql .br0{color:#6c6}.sql .sy0{color:#000}.sql .st0{color:#f00}.sql .nu0{color:#c6c}.sql span.xtra{display:block}.sql-smallsize{width:450px}.sql-mediumsize{width:600px}.sql-largesize{width:100%}.jqplot-target{position:relative;color:#333;font-size:1.2em}.jqplot-highlighter-tooltip{border:0;font-size:1.0em;white-space:nowrap;font-weight:bold;margin:5px;padding:5px;color:#fff;background:#5f5555;border:1px solid #5f5555;border:1px solid rgba(0,0,0,0.2);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2)}.jqplot-title{font-size:1.1em;text-transform:uppercase;letter-spacing:.1em;margin:0;padding:0;color:#5f5555}#pgbadgerModal .modal-dialog{width:850px;overflow-y:hidden}#pgbadgerModal .modal-body{height:100%;width:830px;background-color:white}.error-pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;color:#333;word-break:break-all;word-wrap:break-word;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px}
body{background-color:#cdd5da;background:-webkit-linear-gradient(bottom,#cdd5da,#e8e7e7);background:-moz-linear-gradient(bottom,#cdd5da,#e8e7e7);background:-ms-linear-gradient(bottom,#cdd5da,#e8e7e7);background:-o-linear-gradient(bottom,#cdd5da,#e8e7e7);background:linear-gradient(to bottom,#cdd5da,#e8e7e7);margin-top:50px}ul.nav li.dropdown:hover ul.dropdown-menu{display:block}ul.nav li.dropdown ul.dropdown-menu{margin:0}#pgbadger-brand{font-size:1.1em;font-weight:bold}ul#slides li{list-style-type:none}h1{font-size:2em}h2{font-size:1.6em}h3,h3 small{font-size:1.1em;text-transform:uppercase;letter-spacing:.1em}h3 small{font-size:1em}.analysis-item{background:#fff;margin-bottom:2em;padding-bottom:15px}h3{margin:0;padding:0;color:#5f5555}h1.page-header{margin:1em 0 1em 0;padding:0;color:#5f5555;border-bottom:0}h2{color:#5f5555}.nav-pills,.nav-tabs{margin:0 1em}footer{margin-top:60px}.col-md-8 .tabbable{margin-top:1em}#global-stats .tab-content{margin:2em 0 3em 0}#global-stats .tab-content li{display:block;width:14%;float:left;margin-left:3%}#global-stats .tab-content li.first{margin-left:0}.well{background:#f9f9f9;border-radius:0}.key-figures ul{margin:0;padding:0}.key-figures li{list-style-type:none;margin-bottom:2em}.figure{font-weight:bold;font-size:1.4em;color:#2e8aa5}.figure-label{display:block;color:#666}.mfigure{font-weight:bold;font-size:1.4em;color:#d26115;margin-left:5px}.smfigure{font-weight:bold;font-size:1.1em;color:#d26115}.mfigure small{font-weight:bold;font-size:.6em;color:#fff}.smfigure small{font-weight:bold;font-size:.6em;color:#fff}.hfigure{font-weight:bold;font-size:1.0em;color:#8dbd0f}.hfigure small{font-weight:bold;font-size:.6em;color:#fff}.navbar-inverse{background:#5f5555;border:0}.navbar-inverse .brand,.navbar-inverse .nav>li>a{color:#eee}.linegraph{width:100%;height:400px}.piegraph{width:100%;height:400px}.histo-graph{width:100%;height:140px}.duration-histo-graph{width:100%;height:400px}@media(min-width:969px){#show-hide-menu{position:absolute;left:-9999px}.navbar ul.collapse{overflow:visible}}@media(max-width:968px){#show-hide-menu{position:inherit}#global-stats .tab-content li{display:block;width:auto;float:none;margin-left:0;margin-bottom:1em}ul#slides{margin:0;padding:0}ul#slides li div div{padding:0 1.5em}.linegraph{width:94.5%}.piegraph{width:94.5%}.histo-graph{width:84.5%}.duration-histo-graph{width:94.5%}.key-figures ul{margin-top:1.5em}.navbar .nav{margin:0 3em 2em 3em}.navbar .nav>li{float:none}.navbar ul.collapse:hover{overflow:visible}}div#littleToc{display:none}html>body div#littleToc{display:block;background-color:white;color:black;position:fixed;bottom:10px;right:10px;width:50px;font-size:11px;text-align:left;border:0}div#littleToc div#littleTocTitle{font-weight:bold;text-align:center;padding:2px}div#littleToc ul{padding:0;text-indent:0;margin:0}div#littleToc li{font-size:11px;list-style-type:none;padding:0;text-indent:0;margin:0}div#littleToc a{color:#000;padding:2px;margin:2px;display:block;text-decoration:none;border:1px solid #ccc}div#littleToc a:hover{text-decoration:none;background-color:#ddd}.jqplot-graph{color:#ac1316;z-index:99}.sql{font-family:monospace}.sql .imp{font-weight:bold;color:red}.sql .kw1{color:#933;font-weight:bold;text-transform:uppercase}.sql .kw2{color:#933;font-style:italic}.sql .kw3{color:#933;text-transform:uppercase}.sql .co1{color:#808080;font-style:italic}.sql .co2{color:#808080;font-style:italic}.sql .coMULTI{color:#808080;font-style:italic}.sql .es0{color:#009;font-weight:bold}.sql .br0{color:#6c6}.sql .sy0{color:#000}.sql .st0{color:#f00}.sql .nu0{color:#c6c}.sql span.xtra{display:block}.sql-smallsize{width:450px}.sql-mediumsize{width:600px;max-height:200px;overflow:auto}.sql-largesize{width:950px;max-height:200px;overflow:auto}.pre-smallfont{font-size:10px}.jqplot-target{position:relative;color:#333;font-size:1.2em}.jqplot-highlighter-tooltip{border:0;font-size:1.0em;white-space:nowrap;font-weight:bold;margin:5px;padding:5px;color:#fff;background:#5f5555;border:1px solid #5f5555;border:1px solid rgba(0,0,0,0.2);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2)}.jqplot-title{font-size:1.1em;text-transform:uppercase;letter-spacing:.1em;margin:0;padding:0;color:#5f5555}#pgbadgerModal .modal-dialog{width:850px;overflow-y:hidden}#pgbadgerModal .modal-body{height:100%;width:830px;background-color:white}.error-pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;color:#333;word-break:break-all;word-wrap:break-word;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px}
WRFILE: pgbadger.min.js

function create_download_button(a,b){if(b==undefined){b="btn btn-info"}document.writeln('<button type="button" id="download'+a+'" class="'+b+'">Download</button>')}function add_download_button_event(a,b){jQuery("#download"+a).click(function(){$("#pgbadgerModal img").attr("src",$("#"+b).jqplotToImageStr({}));$("#pgbadgerModal").modal("toggle")})}function create_linegraph(e,c,d,a,b){return $.jqplot(e,b,{seriesColors:["#6e9dc9","#f4ab3a","#ac7fa8","#8dbd0f","#958c12","#953579","#4b5de4","#d8b83f","#ff5800","#0085cc"],seriesDefaults:{markerOptions:{show:false},lineWidth:1},grid:{borderWidth:1,background:"#ffffff"},title:c,series:a,axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer,tickOptions:{angle:-30,textColor:"#333"},},yaxis:{renderer:$.jqplot.LogAxisRenderer,labelRenderer:$.jqplot.CanvasAxisLabelRenderer,tickRenderer:$.jqplot.CanvasAxisTickRenderer,tickOptions:{textColor:"#333",formatter:function(g,f){return pretty_print_number(f,0,d)}},}},legend:{show:true,location:"nw",},cursor:{show:true,zoom:true,showTooltip:false,looseZoom:true,followMouse:true,},highlighter:{show:true,tooltipContentEditor:function(m,f,j,k){var h=new Date(k.data[f][j][0]);var l="<div>On "+h.toString();for(var g=0;g<k.data.length;g++){l+='<br><span class="mfigure">'+pretty_print_number(k.data[g][j][1],2,k.series[g].label)+" <small>"+k.series[g].label+"</small></span>"}l+="</div>";return l}}})}function create_piechart(c,b,a){return $.jqplot(c,[a],{seriesColors:["#6e9dc9","#f4ab3a","#ac7fa8","#8dbd0f","#958c12","#953579","#4b5de4","#d8b83f","#ff5800","#0085cc","#4bb2c5","#c5b47f","#EAA228","#579575","#839557","#498991","#C08840","#9F9274","#546D61","#646C4A","#6F6621","#6E3F5F","#4F64B0","#A89050","#C45923","#187399","#945381","#959E5C","#C7AF7B","#478396","#907294"],grid:{borderWidth:1,background:"#ffffff"},title:b,seriesDefaults:{renderer:$.jqplot.PieRenderer,rendererOptions:{showDataLabels:true}},legend:{show:true,location:"e"},highlighter:{show:true,tooltipLocation:"sw",useAxesFormatters:false,tooltipContentEditor:function(h,d,e,f){var g="<div>";g+='<span class="mfigure">'+format_number(f.data[0][e][1])+" <small>"+f.data[0][e][0]+"</small></span>";g+="</div>";return g}}})}function create_bargraph(e,d,a,c,b){return $.jqplot(e,c,{grid:{borderWidth:1,background:"#ffffff"},title:d,seriesDefaults:{rendererOptions:{barPadding:4,barMargin:5,}},seriesColors:["#6e9dc9","#8dbd0f","#f4ab3a","#ac7fa8","#958c12","#953579","#4b5de4","#d8b83f","#ff5800","#0085cc"],series:[{renderer:$.jqplot.BarRenderer,label:a},{yaxis:"y2axis",label:b,markerOptions:{show:false},lineWidth:1}],axes:{xaxis:{renderer:$.jqplot.CategoryAxisRenderer,drawMajorGridlines:false,drawMajorTickMarks:false,tickRenderer:$.jqplot.CanvasAxisTickRenderer,tickOptions:{angle:-30,textColor:"#333",formatString:"%H:%M",fontFamily:"Helvetica",fontSize:"8pt"}},yaxis:{autoscale:true,labelRenderer:$.jqplot.CanvasAxisLabelRenderer,tickOptions:{textColor:"#333"},tickRenderer:$.jqplot.CanvasAxisTickRenderer,tickOptions:{textColor:"#333",formatter:function(g,f){return pretty_print_number(f,1,a)},fontFamily:"Helvetica",fontSize:"8pt"},label:a},y2axis:{autoscale:true,labelRenderer:$.jqplot.CanvasAxisLabelRenderer,tickRenderer:$.jqplot.CanvasAxisTickRenderer,tickOptions:{textColor:"#8dbd0f",formatter:function(g,f){return pretty_print_number(f,1,b)},fontFamily:"Helvetica",fontSize:"8pt"},rendererOptions:{alignTicks:true,},label:b,}},highlighter:{show:true,tooltipLocation:"ne",useAxesFormatters:false,tooltipContentEditor:function(l,f,h,j){var k='<div style="z-index: 99;">At '+j.data[0][h][0];for(var g=0;g<j.data.length;g++){k+='<br><span class="mfigure">'+pretty_print_number(j.data[g][h][1],2,j.series[g].label)+" <small>"+j.series[g].label+"</small></span>"}k+="</div>";return k}}})}function pretty_print_number(c,b,a){if((b==undefined)||((b==0)&&(c!=0))){b=1}if(a!=undefined){a=a.toLowerCase();if(a.search("size")>=0){if(Math.abs(c)>=1125899906842624){c=(c/1125899906842624);return c.toFixed(b)+" PiB"}else{if(Math.abs(c)>=1099511627776){c=(c/1099511627776);return c.toFixed(b)+" TiB"}else{if(Math.abs(c)>=1073741824){c=(c/1073741824);return c.toFixed(b)+" GiB"}else{if(Math.abs(c)>=1048576){c=(c/1048576);return c.toFixed(b)+" MiB"}else{if(Math.abs(c)>=1024){c=(c/1024);return c.toFixed(b)+" KiB"}else{return c+" B"}}}}}}else{if(a.search("duration")>=0){if(Math.abs(c)>=1000){c=(c/1000);return c.toFixed(b)+" sec"}else{return c.toFixed(b)+" ms"}}else{if(Math.abs(c)>=1000000000000000){c=(c/1000000000000000);return c.toFixed(b)+" P"}else{if(Math.abs(c)>=1000000000000){c=(c/1000000000000);return c.toFixed(b)+" T"}else{if(Math.abs(c)>=1000000000){c=(c/1000000000);return c.toFixed(b)+" G"}else{if(Math.abs(c)>=1000000){c=(c/1000000);return c.toFixed(b)+" M"}else{if(Math.abs(c)>=1000){c=(c/1000);return c.toFixed(b)+" K"}}}}}}}}return c.toFixed(b)}function format_number(a){var f=2;var h=",";var k=Math.round(Math.pow(10,f)*(Math.abs(a)-Math.floor(Math.abs(a))));a=Math.floor(Math.abs(a));if((f==0)||(k==Math.pow(10,f))){k=0}var c=a+"";var g=c.length;for(var e=1;e<4;e++){if(a>=Math.pow(10,(3*e))){c=c.substring(0,g-(3*e))+h+c.substring(g-(3*e))}}if(f>0){var b="";for(var d=0;d<(f-k.toString().length);d++){b+="0"}k=b+k.toString();if(k>0){c=c+"."+k}}if(parseFloat(a)<0){c="-"+c}return c}function draw_charts(){window.charts=$.grep(window.charts,function(c){var a=c.slice();var b=a.shift();var d=c[1];if($("#"+d).is(":visible")){window["create_"+b].apply(null,a);return false}return true})};
5 changes: 3 additions & 2 deletions resources/pgbadger.css
View file
Expand Up @@ -274,8 +274,9 @@ div#littleToc a:hover { text-decoration:none; background-color:#DDDDDD; }
.sql .nu0 {color: #cc66cc;}
.sql span.xtra { display:block; }
.sql-smallsize {width: 450px; }
.sql-mediumsize {width: 600px; }
.sql-largesize {width: 100%; }
.sql-mediumsize {width: 600px;max-height:200px;overflow:auto;}
.sql-largesize {width: 950px;max-height:200px;overflow:auto;}
.pre-smallfont {font-size:10px;}

.jqplot-target {
position: relative;
Expand Down

0 comments on commit e2d2b23

Please sign in to comment.