~andrewjbeach/juju-ci-tools/make-local-patcher : contents of perf_report

~andrewjbeach/juju-ci-tools/make-local-patcher : (revision 1735)

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css"
      href="http://assets.ubuntu.com/sites/guidelines/css/latest/ubuntu-styles.css" />
    <link rel="stylesheet" type="text/css"
      href="http://fonts.googleapis.com/css?family=Ubuntu:400,300,300italic,400italic,700,700italic|Ubuntu+Mono" />
    <link rel="stylesheet" type="text/css"
      href="http://reports.vapour.ws/static/css/base.css" />
    <link rel="shortcut icon"  type="image/png"
      href="http://reports.vapour.ws/static/images/favicon.ico" />
    <!-- Additional styles for 'tabs' and overwrite for table. -->
    <style type="text/css" media="screen">
        ul.tabs {
            list-style: none;
            border: 0;
            margin: 0;
            margin-left: 20px;
            margin-bottom: 20px;
            margin-top: 8px;
            padding: 0;
            vertical-align: 0;
            display: inline-block;
        }

        ul.tabs li {
            background: none;
            display: inline-block;
            cursor: pointer;
        }

        ul.tabs li span.tab {
            color: #888;
        }

        ul.tabs li.current span.tab {
            border-bottom: 3px solid #dd4814;
        }

        ul.tabs li::after {
            content: '';
            width: 1px;
            display: inline-block;
            background: #d2d2d2;
            height: 11px;
            padding: 0;
            margin: 0 5px;
        }

        ul.tabs li:last-child::after {
            display: none;
        }

        .tab-content {
            display: none;
            background: #ededed;
        }

        .tab-content.current {
            display: inherit;
        }

        table.log-report {
            table-layout: fixed;
        }

        table.log-report tr {
            cursor: pointer;
        }

        table.log-report td {
            text-align: left;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        table .unit-details {
            text-align: left;
        }

        table.log-report tr.displayNone {
            display: none;
        }

        table.log-report tr.log-header.hidden > td::before {
            content: " \25ba ";
        }

        table.log-report tr.displayRow {
            display: block;
        }

        table.log-report tr.log-header.shown > td::before {
            content: " \25bc ";
        }
    </style>
    <!-- jquery 1.11.3 -->
    <script src="https://assets.ubuntu.com/v1/37b1db88-jquery.min.js"></script>

    <!-- Quick glue code for 'tabs' -->
    <script type="text/javascript">
      $(document).ready(function(){
	      $('ul.tabs li').click(function(){
		    var tab_id = $(this).attr('data-tab');

    		$('ul.tabs li').removeClass('current');
    		$('.tab-content').removeClass('current');

    		$(this).addClass('current');
    		$("#"+tab_id).addClass('current');
          });

          $('table tr.log-header').click(function(){
              $(this).toggleClass('hidden shown');
              $(this).nextUntil('table tr.log-header').slideToggle('normal',
                  function() { $(this).toggleClass('displayNone displayRow')});
              });
      });

    </script>

    <title>Simple performance/scale reporting</title>

  </head>
  <body>
    <header class="banner global" role="banner">
      <nav role="navigation" class="nav-primary nav-right">
        <div class="logo">
          <a class="logo-ubuntu" href="/">
            <img width="118" height="27" src="https://assets.ubuntu.com/sites/ubuntu/latest/u/img/logo.png" alt="Juju Logo" />
            <span>juju reports</span>
          </a>
        </div>
      </nav>
    </header>

    <div class="wrapper">
      <div id="main-content" class="inner-wrapper">
        <div class="row no-border">
          <h1>Performance &amp; Scale testing</h1>

          <h2>Action Timings</h2>

          <blockquote>
            Breakdown of start and end times of an action (i.e. either
            bootstrapping or deploying a charm).
          </blockquote>

          <table>
            <tr>
              <th>Action</th>
              <th>Start</th>
              <th>End</th>
              <th>Duration</th>
            </tr>
            <tr>
              <td>Bootstrap</td>
              <td>{{deployments.bootstrap.start}}</td>
              <td>{{deployments.bootstrap.end}}</td>
              <td>{{deployments.bootstrap.seconds}} Seconds</td>
            </tr>
            {% for deploy in deployments.deploys %}
            <tr>
              <td>Deploy {{deploy.name}}</td>
              <td>{{deploy.timings.start}}</td>
              <td>{{deploy.timings.end}}</td>
              <td>{{deploy.timings.seconds}} Seconds</td>
            </tr>
            <tr>
              <td colspan=4>
                <div class="unit-details">Units</div>
                <ul class="unit-details">
                  {% for name in deploy.applications.keys() %}
                  <li><b>{{name}}:</b> {{deploy.applications[name]}}</li>
                  {% endfor %}
                </ul>
              </td>
            </tr>
            {% endfor %}
            <tr>
              <td>Kill Controller</td>
              <td>{{deployments.cleanup.start}}</td>
              <td>{{deployments.cleanup.end}}</td>
              <td>{{deployments.cleanup.seconds}} Seconds</td>
            </tr>
          </table>

          <h1>Controller system metrics</h1>

          <blockquote>
            System metrics are collected on the api-server(s) during the deployment
            of charms. No metrics are collected during the bootstrap process.
          </blockquote>

          <h2>CPU Usage</h2>
          <img src="{{cpu_graph}}" alt="CPU Usage Graph" />

          <h2>Memory Usage</h2>
          <img src="{{memory_graph}}" alt="Memory Usage Graph" />

          <h2>Network Usage</h2>
          <img src="{{network_graph}}" alt="Network Usage Graph" />

          {% if mongo_graph is not none %}
          <h2>MongoDB Action Statistics</h2>
          <img src="{{mongo_graph}}" alt="MongoDB Actions Details Graph" />
          {% endif %}

          {% if mongo_memory_graph is not none %}
          <h2>MongoDB Memory Usage Statistics</h2>
          <img src="{{mongo_memory_graph}}" alt="MongoDB Memory Usage Details Graph" />
          {% endif %}

          <h1>Log Breakdown</h1>
          <blockquote>
            Logs broken down into 20 second chunks (to match the graphs.)
          </blockquote>

          <ul class="tabs">
            {% for date_stamp, values in log_message_chunks|dictsort %}
            {% set safe_date_stamp = date_stamp|replace(":", "")|replace(" ", "") %}
            <li
               class="tab-link {% if loop.index == 1 %} current {% endif %}"
               data-tab="{{safe_date_stamp}}"
               >
              <span class="tab" >{{values.name}}</span>
            </li>
            {% endfor %}
          </ul>

          {% for date_stamp, values in log_message_chunks|dictsort %}
          {% set safe_date_stamp = date_stamp|replace(":", "")|replace(" ", "")|replace("(", "")|replace(")", "") %}
          <div
             class="tab-content {% if loop.index == 1 %} current {% endif %}"
             id="{{safe_date_stamp}}">
            <h4 class="text-center">Log for: {{values.name}}</h4>
            <div class="text-center">Log period: <b>{{date_stamp}}</b></div>
            <table class="log-report">
              {% for log_detail in values.logs|sort(attribute='timeframe') %}
              {% set safe_timeframe = log_detail.timeframe|replace(":", "")|replace(" ", "")|replace("(", "")|replace(")", "") %}
              <tr class="log-header hidden">
                <td>
                  <a name="top_{{safe_timeframe}}"></a>
                  {{log_detail.timeframe}}
                </td>
              </tr>
              <tr class="displayNone">
                <td>
                  <div id="{{safe_timeframe}}" class="collapse">
                    <small>
                      {{log_detail.message}}
                      <div class="text-center">
                        <a href="#top_{{safe_timeframe}}">Back to log top</a>
                      </div>
                    </small>
                  </div>
                </td>
              </tr>
              {%endfor%}

            </table>
          </div>
          {% endfor %}

        </div>
      </div>
    </div>
    <footer class="global clearfix">
      <div class="legal clearfix">
        <p class="twelve-col">
          &copy; 2016 Canonical Ltd. Ubuntu and Canonical are registered
          trademarks of Canonical Ltd.
        </p>
      </div>
    </footer>
  </body>
</html>

1485.2.2 by Christopher Lee Initial addition of html report template page.	1	<html>
	2	<head>
	3	<meta charset="utf-8">
	4	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	5	<meta name="viewport" content="width=device-width, initial-scale=1">
1485.5.1 by Christopher Lee Initial css/framework change	6
	7	<link rel="stylesheet" type="text/css"
	8	href="http://assets.ubuntu.com/sites/guidelines/css/latest/ubuntu-styles.css" />
	9	<link rel="stylesheet" type="text/css"
	10	href="http://fonts.googleapis.com/css?family=Ubuntu:400,300,300italic,400italic,700,700italic\|Ubuntu+Mono" />
	11	<link rel="stylesheet" type="text/css"
	12	href="http://reports.vapour.ws/static/css/base.css" />
	13	<link rel="shortcut icon" type="image/png"
	14	href="http://reports.vapour.ws/static/images/favicon.ico" />
1485.5.5 by Christopher Lee Fix for really long un-broken log lines.	15	<!-- Additional styles for 'tabs' and overwrite for table. -->
1485.5.2 by Christopher Lee Implement tab display for logs.	16	<style type="text/css" media="screen">
	17	ul.tabs {
	18	list-style: none;
	19	border: 0;
	20	margin: 0;
	21	margin-left: 20px;
	22	margin-bottom: 20px;
1485.5.7 by Christopher Lee Tweak tabs.	23	margin-top: 8px;
1485.5.2 by Christopher Lee Implement tab display for logs.	24	padding: 0;
	25	vertical-align: 0;
	26	display: inline-block;
	27	}
	28
	29	ul.tabs li {
	30	background: none;
	31	display: inline-block;
	32	cursor: pointer;
	33	}
	34
	35	ul.tabs li span.tab {
	36	color: #888;
	37	}
	38
	39	ul.tabs li.current span.tab {
	40	border-bottom: 3px solid #dd4814;
	41	}
	42
	43	ul.tabs li::after {
	44	content: '';
	45	width: 1px;
	46	display: inline-block;
	47	background: #d2d2d2;
	48	height: 11px;
	49	padding: 0;
	50	margin: 0 5px;
	51	}
	52
1485.5.7 by Christopher Lee Tweak tabs.	53	ul.tabs li:last-child::after {
	54	display: none;
	55	}
	56
1485.5.2 by Christopher Lee Implement tab display for logs.	57	.tab-content {
	58	display: none;
	59	background: #ededed;
	60	}
	61
	62	.tab-content.current {
	63	display: inherit;
	64	}
1485.5.5 by Christopher Lee Fix for really long un-broken log lines.	65
	66	table.log-report {
	67	table-layout: fixed;
	68	}
	69
1485.5.6 by Christopher Lee Implement collapsable table.	70	table.log-report tr {
	71	cursor: pointer;
	72	}
	73
1485.5.5 by Christopher Lee Fix for really long un-broken log lines.	74	table.log-report td {
	75	text-align: left;
	76	word-wrap: break-word;
	77	overflow-wrap: break-word;
	78	}
1485.5.6 by Christopher Lee Implement collapsable table.	79
	80	table .unit-details {
	81	text-align: left;
	82	}
	83
	84	table.log-report tr.displayNone {
	85	display: none;
	86	}
	87
	88	table.log-report tr.log-header.hidden > td::before {
	89	content: " \25ba ";
	90	}
	91
	92	table.log-report tr.displayRow {
	93	display: block;
	94	}
	95
	96	table.log-report tr.log-header.shown > td::before {
	97	content: " \25bc ";
	98	}
1485.5.2 by Christopher Lee Implement tab display for logs.	99	</style>
1643.1.2 by Christopher Lee Use ubuntu asset for jquery dep.	100	<!-- jquery 1.11.3 -->
	101	<script src="https://assets.ubuntu.com/v1/37b1db88-jquery.min.js"></script>
	102
1485.5.2 by Christopher Lee Implement tab display for logs.	103	<!-- Quick glue code for 'tabs' -->
	104	<script type="text/javascript">
	105	$(document).ready(function(){
	106	$('ul.tabs li').click(function(){
	107	var tab_id = $(this).attr('data-tab');
	108
	109	$('ul.tabs li').removeClass('current');
	110	$('.tab-content').removeClass('current');
	111
	112	$(this).addClass('current');
	113	$("#"+tab_id).addClass('current');
	114	});
1485.5.6 by Christopher Lee Implement collapsable table.	115
	116	$('table tr.log-header').click(function(){
	117	$(this).toggleClass('hidden shown');
	118	$(this).nextUntil('table tr.log-header').slideToggle('normal',
	119	function() { $(this).toggleClass('displayNone displayRow')});
	120	});
1485.5.2 by Christopher Lee Implement tab display for logs.	121	});
	122
	123	</script>
1485.2.10 by Christopher Lee Stylings for collapsable table	124
1485.2.2 by Christopher Lee Initial addition of html report template page.	125	<title>Simple performance/scale reporting</title>
	126
	127	</head>
1485.5.1 by Christopher Lee Initial css/framework change	128	<body>
	129	<header class="banner global" role="banner">
	130	<nav role="navigation" class="nav-primary nav-right">
	131	<div class="logo">
	132	<a class="logo-ubuntu" href="/">
	133	<img width="118" height="27" src="https://assets.ubuntu.com/sites/ubuntu/latest/u/img/logo.png" alt="Juju Logo" />
	134	<span>juju reports</span>
1485.2.5 by Christopher Lee Graphs in utc. Better logging (collapsed)	135	</a>
1485.5.1 by Christopher Lee Initial css/framework change	136	</div>
	137	</nav>
	138	</header>
	139
	140	<div class="wrapper">
	141	<div id="main-content" class="inner-wrapper">
	142	<div class="row no-border">
	143	<h1>Performance & Scale testing</h1>
	144
	145	<h2>Action Timings</h2>
	146
	147	<blockquote>
	148	Breakdown of start and end times of an action (i.e. either
	149	bootstrapping or deploying a charm).
	150	</blockquote>
	151
	152	<table>
	153	<tr>
	154	<th>Action</th>
	155	<th>Start</th>
	156	<th>End</th>
	157	<th>Duration</th>
	158	</tr>
	159	<tr>
	160	<td>Bootstrap</td>
	161	<td>{{deployments.bootstrap.start}}</td>
	162	<td>{{deployments.bootstrap.end}}</td>
	163	<td>{{deployments.bootstrap.seconds}} Seconds</td>
	164	</tr>
	165	{% for deploy in deployments.deploys %}
	166	<tr>
	167	<td>Deploy {{deploy.name}}</td>
	168	<td>{{deploy.timings.start}}</td>
	169	<td>{{deploy.timings.end}}</td>
	170	<td>{{deploy.timings.seconds}} Seconds</td>
	171	</tr>
	172	<tr>
	173	<td colspan=4>
1485.5.6 by Christopher Lee Implement collapsable table.	174	<div class="unit-details">Units</div>
1485.5.6 by Christopher Lee Implement collapsable table.	175	<ul class="unit-details">
1485.5.1 by Christopher Lee Initial css/framework change	176	{% for name in deploy.applications.keys() %}
	177	<li><b>{{name}}:</b> {{deploy.applications[name]}}</li>
	178	{% endfor %}
	179	</ul>
	180	</td>
	181	</tr>
	182	{% endfor %}
	183	<tr>
	184	<td>Kill Controller</td>
	185	<td>{{deployments.cleanup.start}}</td>
	186	<td>{{deployments.cleanup.end}}</td>
	187	<td>{{deployments.cleanup.seconds}} Seconds</td>
	188	</tr>
1485.2.5 by Christopher Lee Graphs in utc. Better logging (collapsed)	189	</table>
1485.5.1 by Christopher Lee Initial css/framework change	190
	191	<h1>Controller system metrics</h1>
	192
	193	<blockquote>
	194	System metrics are collected on the api-server(s) during the deployment
	195	of charms. No metrics are collected during the bootstrap process.
	196	</blockquote>
	197
	198	<h2>CPU Usage</h2>
1485.5.12 by Christopher Lee Remove 'file://' from template.	199	<img src="{{cpu_graph}}" alt="CPU Usage Graph" />
1485.5.1 by Christopher Lee Initial css/framework change	200
1485.5.1 by Christopher Lee Initial css/framework change	201	<h2>Memory Usage</h2>
1485.5.12 by Christopher Lee Remove 'file://' from template.	202	<img src="{{memory_graph}}" alt="Memory Usage Graph" />
1485.5.1 by Christopher Lee Initial css/framework change	203
1485.5.1 by Christopher Lee Initial css/framework change	204	<h2>Network Usage</h2>
1485.5.12 by Christopher Lee Remove 'file://' from template.	205	<img src="{{network_graph}}" alt="Network Usage Graph" />
1485.5.1 by Christopher Lee Initial css/framework change	206
1485.5.3 by Christopher Lee Merge parent.	207	{% if mongo_graph is not none %}
1485.5.1 by Christopher Lee Initial css/framework change	208	<h2>MongoDB Action Statistics</h2>
1485.5.12 by Christopher Lee Remove 'file://' from template.	209	<img src="{{mongo_graph}}" alt="MongoDB Actions Details Graph" />
1485.5.3 by Christopher Lee Merge parent.	210	{% endif %}
1485.5.1 by Christopher Lee Initial css/framework change	211
1485.5.3 by Christopher Lee Merge parent.	212	{% if mongo_memory_graph is not none %}
1485.5.1 by Christopher Lee Initial css/framework change	213	<h2>MongoDB Memory Usage Statistics</h2>
1485.5.12 by Christopher Lee Remove 'file://' from template.	214	<img src="{{mongo_memory_graph}}" alt="MongoDB Memory Usage Details Graph" />
1485.5.3 by Christopher Lee Merge parent.	215	{% endif %}
1485.5.1 by Christopher Lee Initial css/framework change	216
	217	<h1>Log Breakdown</h1>
	218	<blockquote>
	219	Logs broken down into 20 second chunks (to match the graphs.)
	220	</blockquote>
	221
1485.5.2 by Christopher Lee Implement tab display for logs.	222	<ul class="tabs">
1485.5.1 by Christopher Lee Initial css/framework change	223	{% for date_stamp, values in log_message_chunks\|dictsort %}
1485.5.1 by Christopher Lee Initial css/framework change	224	{% set safe_date_stamp = date_stamp\|replace(":", "")\|replace(" ", "") %}
1485.5.4 by Christopher Lee Fix assinging data to correct element.	225	<li
	226	class="tab-link {% if loop.index == 1 %} current {% endif %}"
	227	data-tab="{{safe_date_stamp}}"
	228	>
	229	<span class="tab" >{{values.name}}</span>
1485.5.1 by Christopher Lee Initial css/framework change	230	</li>
	231	{% endfor %}
	232	</ul>
	233
1485.5.2 by Christopher Lee Implement tab display for logs.	234	{% for date_stamp, values in log_message_chunks\|dictsort %}
	235	{% set safe_date_stamp = date_stamp\|replace(":", "")\|replace(" ", "")\|replace("(", "")\|replace(")", "") %}
	236	<div
	237	class="tab-content {% if loop.index == 1 %} current {% endif %}"
	238	id="{{safe_date_stamp}}">
1485.5.6 by Christopher Lee Implement collapsable table.	239	<h4 class="text-center">Log for: {{values.name}}</h4>
1485.5.2 by Christopher Lee Implement tab display for logs.	240	<div class="text-center">Log period: <b>{{date_stamp}}</b></div>
1485.5.5 by Christopher Lee Fix for really long un-broken log lines.	241	<table class="log-report">
1485.5.2 by Christopher Lee Implement tab display for logs.	242	{% for log_detail in values.logs\|sort(attribute='timeframe') %}
1485.5.2 by Christopher Lee Implement tab display for logs.	243	{% set safe_timeframe = log_detail.timeframe\|replace(":", "")\|replace(" ", "")\|replace("(", "")\|replace(")", "") %}
1485.5.6 by Christopher Lee Implement collapsable table.	244	<tr class="log-header hidden">
1485.5.2 by Christopher Lee Implement tab display for logs.	245	<td>
1485.5.8 by Christopher Lee Add back to top link.	246	<a name="top_{{safe_timeframe}}"></a>
1485.5.2 by Christopher Lee Implement tab display for logs.	247	{{log_detail.timeframe}}
	248	</td>
	249	</tr>
1485.5.6 by Christopher Lee Implement collapsable table.	250	<tr class="displayNone">
1485.5.2 by Christopher Lee Implement tab display for logs.	251	<td>
	252	<div id="{{safe_timeframe}}" class="collapse">
	253	<small>
	254	{{log_detail.message}}
1485.5.8 by Christopher Lee Add back to top link.	255	<div class="text-center">
	256	<a href="#top_{{safe_timeframe}}">Back to log top</a>
	257	</div>
1485.5.2 by Christopher Lee Implement tab display for logs.	258	</small>
	259	</div>
	260	</td>
	261	</tr>
	262	{%endfor%}
1485.5.1 by Christopher Lee Initial css/framework change	263
1485.5.2 by Christopher Lee Implement tab display for logs.	264	</table>
1485.5.1 by Christopher Lee Initial css/framework change	265	</div>
1485.5.2 by Christopher Lee Implement tab display for logs.	266	{% endfor %}
1485.5.1 by Christopher Lee Initial css/framework change	267
1485.2.5 by Christopher Lee Graphs in utc. Better logging (collapsed)	268	</div>
	269	</div>
1485.2.2 by Christopher Lee Initial addition of html report template page.	270	</div>
1485.5.1 by Christopher Lee Initial css/framework change	271	<footer class="global clearfix">
	272	<div class="legal clearfix">
	273	<p class="twelve-col">
	274	© 2016 Canonical Ltd. Ubuntu and Canonical are registered
	275	trademarks of Canonical Ltd.
	276	</p>
	277	</div>
1485.2.9 by Christopher Lee Cleanup of report page.	278	</footer>
1485.2.2 by Christopher Lee Initial addition of html report template page.	279	</body>
	280	</html>