in src/brpc/builtin/vars_service.cpp [45:255]
void PutVarsHeading(std::ostream& os, bool expand_all) {
os << "<script language=\"javascript\" type=\"text/javascript\" src=\"/js/jquery_min\"></script>\n"
"<script language=\"javascript\" type=\"text/javascript\" src=\"/js/flot_min\"></script>\n"
<< TabsHead()
<< "<style type=\"text/css\">\n"
"#layer1 { margin:0; padding:0; width:1111px; }\n"
// style of plot-able bvar
".variable {\n"
" margin:0px;\n"
" color:#000000;\n"
" cursor:pointer;\n"
" position:relative;\n"
" background-color:#ffffff;\n"
"}\n"
// style of non-plot-able bvar, the difference with .variable is only
// the cursor .
".nonplot-variable {\n"
" margin:0px;\n"
" color:#000000;\n"
" position:relative;\n"
" background-color:#ffffff;\n"
"}\n"
// style of <p>
"p {padding: 2px 0; margin: 0px; }\n"
// style of container of flot graph.
".detail {\n"
" margin: 0px;\n"
" width: 800px;\n"
" background-color:#fafafa;\n"
"}\n"
".flot-placeholder {\n"
" width: 800px;\n"
" height: 200px;\n"
" line-height: 1.2em;\n"
"}\n"
"</style>\n"
"<script type=\"text/javascript\">\n"
// Mark if a bvar was ever clicked.
"var everEnabled = {}\n"
// Mark if a bvar was enabled plotting
"var enabled = {}\n"
// the bvar under cursor
"var hovering_var = \"\"\n"
// timeout id of last server call.
"var timeoutId = {}\n"
// last plot of the bvar.
"var lastPlot = {}\n"
"function prepareGraphs() {\n"
// Hide all graphs at first.
" $(\".detail\").hide();\n"
// Register clicking functions.
" $(\".variable\").click(function() {\n"
" var mod = $(this).next(\".detail\");\n"
" mod.slideToggle(\"fast\");\n"
" var var_name = mod.children(\":first-child\").attr(\"id\");\n"
" if (!everEnabled[var_name]) {\n"
" everEnabled[var_name] = true;\n"
// Create tooltip at first click.
" $(\"<div id='tooltip-\" + var_name + \"'></div>\").css({\n"
" position: \"absolute\",\n"
" display: \"none\",\n"
" border: \"1px solid #fdd\",\n"
" padding: \"2px\",\n"
" \"background-color\": \"#ffffca\",\n"
" opacity: 0.80\n"
" }).appendTo(\"body\");\n"
// Register hovering event and show the tooltip when event occurs.
" $(\"#\" + var_name).bind(\"plothover\", function(event, pos, item) {\n"
" if (item) {\n"
" hovering_var = var_name;\n"
" var thePlot = lastPlot[var_name];\n"
" if (thePlot != null) {\n"
" item.series.color = \"#808080\";\n"
" thePlot.draw();\n"
" }\n"
" var x = item.datapoint[0];\n"
" var y = item.datapoint[1];\n"
" $(\"#tooltip-\" + var_name)\n"
" .html(y + \"<br/>(\" + describeX(x, item.series) + \")\")\n"
" .css({top: item.pageY+5, left: item.pageX+15})\n"
" .show();\n"
" } else {\n"
" hovering_var = \"\";\n"
" $(\"#tooltip-\" + var_name).hide();\n"
" }\n"
" });\n"
// Register mouseleave to make sure the tooltip is hidden when cursor
// is out.
" $(\"#\" + var_name).bind(\"mouseleave\", function() {\n"
" $(\"#tooltip-\" + var_name).hide();\n"
" });\n"
" }\n"
" if (!enabled[var_name]) {\n"
" enabled[var_name] = true;\n"
" fetchData(var_name);\n"
" } else {\n"
" enabled[var_name] = false;\n"
" clearTimeout(timeoutId[var_name]);\n"
" }\n"
" });\n"
<< (expand_all ?
" $(\".variable\").click();\n" :
// Set id to "default_expand" to make the graph expand by default.
// E.g. latency and qps in /status page are expanded by default.
" $(\".default_expand\").click();\n") <<
"}\n"
// options for plotting.
"var trendOptions = {\n"
" colors: ['#F0D06E','#F0B06E','#F0A06E','#F0906E','#F0806E'],\n"
" legend: {show:false},\n"
" grid: {hoverable:true},\n"
" xaxis: { \n"
" \"ticks\": [[29,\"-1 day\"],[53,\"-1 hour\"],[113,\"-1 minute\"]]\n"
" }\n"
"}\n"
"var cdfOptions = {\n"
" grid: {hoverable: true},\n"
" lines: {\n"
" show: true,\n"
" fill: true\n"
" },\n"
" xaxis: {\n"
" \"ticks\": [[10,\"10%\"],[20,\"20%\"],[30,\"30%\"],[40,\"40%\"]\n"
" ,[50,\"50%\"],[60,\"60%\"],[70,\"70%\"],[80,\"80%\"]\n"
" ,[90,\"90%\"],[101,\"99.99%\"]]\n"
" }\n"
"}\n"
// Show x in tooltip intuitively.
"function describeTrendX(x) {\n"
" if (x >= 173) {\n"
" return \"just now\";\n"
" } else if (x > 113) {\n"
" return (x - 173) + \" second\";\n"
" } else if (x > 53) {\n"
" return (x - 114) + \" minute\";\n"
" } else if (x > 29) {\n"
" return (x - 54) + \" hour\";\n"
" } else {\n"
" return (x - 30) + \" day\";\n"
" }\n"
"}\n"
"function describeCDFX(x) {\n"
" if (x <= 99) {\n"
" return x + '%';\n"
" } else if (x == 100) {\n"
" return '99.9%';\n"
" } else if (x == 101) {\n"
" return '99.99%';\n"
" } else {\n"
" return 'unknown ' + x;\n"
" }\n"
"}\n"
"function describeX(x, series) {\n"
" if (series.data[series.data.length-1][0] == 173) {\n"
" if (series.label != null) {\n"
" return series.label + ' ' + describeTrendX(x);\n"
" } else {\n"
" return describeTrendX(x);\n"
" }\n"
" } else if (series.data[series.data.length-1][0] == 101) {\n"
" return describeCDFX(x);\n"
" } else {\n"
" return x;\n"
" }\n"
"}\n"
// Get value series of bvar from server.
"function fetchData(var_name) {\n"
" function onDataReceived(series) {\n"
" if (hovering_var != var_name) {\n"
" if (series.label == 'trend') {\n"
" lastPlot[var_name] = $.plot(\"#\" + var_name, [series.data], trendOptions);\n"
" $(\"#value-\" + var_name).html(series.data[series.data.length - 1][1]);\n"
" } else if (series.label == 'cdf') {\n"
" lastPlot[var_name] = $.plot(\"#\" + var_name, [series.data], cdfOptions);\n"
" $(\"#value-\" + var_name).html(series.data[series.data.length - 1][1]);\n"
" } else {\n"
" lastPlot[var_name] = $.plot(\"#\" + var_name, series, trendOptions);\n"
<< (bvar::FLAGS_quote_vector ?
" var newValue = '\"[';\n" :
" var newValue = '[';\n") <<
" var i;\n"
" for (i = 0; i < series.length; ++i) {\n"
" if (i != 0) newValue += ',';\n"
" var data = series[i].data;\n"
" newValue += data[data.length - 1][1];\n"
" }\n"
<< (bvar::FLAGS_quote_vector ?
" newValue += ']\"';\n" :
" newValue += ']';\n") <<
" $(\"#value-\" + var_name).html(newValue);\n"
" }\n"
" }\n"
" }\n"
" $.ajax({\n"
" url: \"/vars/\" + var_name + \"?series\",\n"
" type: \"GET\",\n"
" dataType: \"json\",\n"
" success: onDataReceived\n"
" });\n"
" if (enabled[var_name]) {\n"
" timeoutId[var_name] = setTimeout(function(){ fetchData(var_name); }, 1000);\n"
" }\n"
"}\n"
"$(prepareGraphs);\n"
"</script>\n";
}