1# -*- coding: utf-8 -*- 2# Copyright 2016 The Chromium OS Authors. All rights reserved. 3# Use of this source code is governed by a BSD-style license that can be 4# found in the LICENSE file. 5 6"""Text templates used by various parts of results_report.""" 7from __future__ import print_function 8 9import html 10from string import Template 11 12_TabMenuTemplate = Template(""" 13<div class='tab-menu'> 14 <a href="javascript:switchTab('$table_name', 'html')">HTML</a> 15 <a href="javascript:switchTab('$table_name', 'text')">Text</a> 16 <a href="javascript:switchTab('$table_name', 'tsv')">TSV</a> 17</div>""") 18 19 20def _GetTabMenuHTML(table_name): 21 # N.B. cgi.escape does some very basic HTML escaping. Nothing more. 22 escaped = html.escape(table_name) 23 return _TabMenuTemplate.substitute(table_name=escaped) 24 25 26_ExperimentFileHTML = """ 27<div class='results-section'> 28 <div class='results-section-title'>Experiment File</div> 29 <div class='results-section-content'> 30 <pre>%s</pre> 31</div> 32""" 33 34 35def _GetExperimentFileHTML(experiment_file_text): 36 if not experiment_file_text: 37 return '' 38 return _ExperimentFileHTML % (html.escape(experiment_file_text, quote=False),) 39 40 41_ResultsSectionHTML = Template(""" 42<div class='results-section'> 43 <div class='results-section-title'>$sect_name</div> 44 <div class='results-section-content'> 45 <div id='${short_name}-html'>$html_table</div> 46 <div id='${short_name}-text'><pre>$text_table</pre></div> 47 <div id='${short_name}-tsv'><pre>$tsv_table</pre></div> 48 </div> 49 $tab_menu 50</div> 51""") 52 53 54def _GetResultsSectionHTML(print_table, table_name, data): 55 first_word = table_name.strip().split()[0] 56 short_name = first_word.lower() 57 return _ResultsSectionHTML.substitute( 58 sect_name=table_name, 59 html_table=print_table(data, 'HTML'), 60 text_table=print_table(data, 'PLAIN'), 61 tsv_table=print_table(data, 'TSV'), 62 tab_menu=_GetTabMenuHTML(short_name), 63 short_name=short_name) 64 65 66_MainHTML = Template(""" 67<html> 68<head> 69 <style type="text/css"> 70 body { 71 font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; 72 font-size: 12px; 73 } 74 75 pre { 76 margin: 10px; 77 color: #039; 78 font-size: 14px; 79 } 80 81 .chart { 82 display: inline; 83 } 84 85 .hidden { 86 visibility: hidden; 87 } 88 89 .results-section { 90 border: 1px solid #b9c9fe; 91 margin: 10px; 92 } 93 94 .results-section-title { 95 background-color: #b9c9fe; 96 color: #039; 97 padding: 7px; 98 font-size: 14px; 99 width: 200px; 100 } 101 102 .results-section-content { 103 margin: 10px; 104 padding: 10px; 105 overflow:auto; 106 } 107 108 #box-table-a { 109 font-size: 12px; 110 width: 480px; 111 text-align: left; 112 border-collapse: collapse; 113 } 114 115 #box-table-a th { 116 padding: 6px; 117 background: #b9c9fe; 118 border-right: 1px solid #fff; 119 border-bottom: 1px solid #fff; 120 color: #039; 121 text-align: center; 122 } 123 124 #box-table-a td { 125 padding: 4px; 126 background: #e8edff; 127 border-bottom: 1px solid #fff; 128 border-right: 1px solid #fff; 129 color: #669; 130 border-top: 1px solid transparent; 131 } 132 133 #box-table-a tr:hover td { 134 background: #d0dafd; 135 color: #339; 136 } 137 138 </style> 139 <script type='text/javascript' src='https://www.google.com/jsapi'></script> 140 <script type='text/javascript'> 141 google.load('visualization', '1', {packages:['corechart']}); 142 google.setOnLoadCallback(init); 143 function init() { 144 switchTab('summary', 'html'); 145 ${perf_init}; 146 switchTab('full', 'html'); 147 drawTable(); 148 } 149 function drawTable() { 150 ${chart_js}; 151 } 152 function switchTab(table, tab) { 153 document.getElementById(table + '-html').style.display = 'none'; 154 document.getElementById(table + '-text').style.display = 'none'; 155 document.getElementById(table + '-tsv').style.display = 'none'; 156 document.getElementById(table + '-' + tab).style.display = 'block'; 157 } 158 </script> 159</head> 160 161<body> 162 $summary_table 163 $perf_html 164 <div class='results-section'> 165 <div class='results-section-title'>Charts</div> 166 <div class='results-section-content'>$chart_divs</div> 167 </div> 168 $full_table 169 $experiment_file 170</body> 171</html> 172""") 173 174 175# It's a bit ugly that we take some HTML things, and some non-HTML things, but I 176# need to balance prettiness with time spent making things pretty. 177def GenerateHTMLPage(perf_table, chart_js, summary_table, print_table, 178 chart_divs, full_table, experiment_file): 179 """Generates a crosperf HTML page from the given arguments. 180 181 print_table is a two-arg function called like: print_table(t, f) 182 t is one of [summary_table, print_table, full_table]; it's the table we want 183 to format. 184 f is one of ['TSV', 'HTML', 'PLAIN']; it's the type of format we want. 185 """ 186 summary_table_html = _GetResultsSectionHTML(print_table, 'Summary Table', 187 summary_table) 188 if perf_table: 189 perf_html = _GetResultsSectionHTML(print_table, 'Perf Table', perf_table) 190 perf_init = "switchTab('perf', 'html')" 191 else: 192 perf_html = '' 193 perf_init = '' 194 195 full_table_html = _GetResultsSectionHTML(print_table, 'Full Table', 196 full_table) 197 experiment_file_html = _GetExperimentFileHTML(experiment_file) 198 return _MainHTML.substitute( 199 perf_init=perf_init, 200 chart_js=chart_js, 201 summary_table=summary_table_html, 202 perf_html=perf_html, 203 chart_divs=chart_divs, 204 full_table=full_table_html, 205 experiment_file=experiment_file_html) 206