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