From patchwork Fri May 3 14:43:38 2024 Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit X-Patchwork-Submitter: Ninette Adhikari X-Patchwork-Id: 43248 Return-Path: X-Spam-Checker-Version: SpamAssassin 3.4.0 (2014-02-07) on aws-us-west-2-korg-lkml-1.web.codeaurora.org Received: from aws-us-west-2-korg-lkml-1.web.codeaurora.org (localhost.localdomain [127.0.0.1]) by smtp.lore.kernel.org (Postfix) with ESMTP id B354DC25B10 for ; Fri, 3 May 2024 14:43:59 +0000 (UTC) Received: from mail-ej1-f41.google.com (mail-ej1-f41.google.com [209.85.218.41]) by mx.groups.io with SMTP id smtpd.web11.14884.1714747429950325803 for ; Fri, 03 May 2024 07:43:50 -0700 Authentication-Results: mx.groups.io; dkim=pass header.i=@thehoodiefirm-com.20230601.gappssmtp.com header.s=20230601 header.b=EXreHAtu; spf=neutral (domain: thehoodiefirm.com, ip: 209.85.218.41, mailfrom: ninette@thehoodiefirm.com) Received: by mail-ej1-f41.google.com with SMTP id a640c23a62f3a-a599fcba36eso29844766b.0 for ; Fri, 03 May 2024 07:43:49 -0700 (PDT) DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=thehoodiefirm-com.20230601.gappssmtp.com; s=20230601; t=1714747428; x=1715352228; darn=lists.openembedded.org; h=content-transfer-encoding:mime-version:reply-to:references :in-reply-to:message-id:date:subject:cc:to:from:from:to:cc:subject :date:message-id:reply-to; bh=NcjRLJb+gfaXEcPsgYY3Wn04xI139fk1K1+WC3Z6xjs=; b=EXreHAtuEs/dnQ7IWRkFqzup1ACtezTB4OpM6v9ee79JQaYtBkVuZs8qxfCFOdvrMH 72JGcvkLnRqOraxCP4H26RY6+NUuW9cO1VY/QbIjfGRu95PkQS6EolJ1SDIqjRR2PPkE vOUgAgDbHP1t4GrzIVU6Pf80bAiziseyQG/0z5zv7C5GpFa8qu3OZ/T7ZOb60Ek7XkRX B+fe8o+cCNx2AkAW2H9UWvDzJUJASjPniaJ9pdikUBf+jTnWZKmh35DcIx5pqr2nqjTc 3omwa1kRPYolVd5jNpQ5B39DXtQHurS+P5eIv5tbG7YHtYeEp1mmIVK96+6B+yUi9EFW FBow== X-Google-DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=1e100.net; s=20230601; t=1714747428; x=1715352228; h=content-transfer-encoding:mime-version:reply-to:references :in-reply-to:message-id:date:subject:cc:to:from:x-gm-message-state :from:to:cc:subject:date:message-id:reply-to; bh=NcjRLJb+gfaXEcPsgYY3Wn04xI139fk1K1+WC3Z6xjs=; b=Nt9bVnqgTRX+FvU1bNak9oC6nf97JMTQohtxSqmaqe4sz7YV2gGciNnmM3LFmkVjJq ilcXmwHrYWd9UberY3qkecN/WWYXg7vX5Gz90i/cyxwVmlJ02+F+L6r34BuNDUMiT90D j3sjpTWTiC2oB9oMWNbcZvQ/zRKCXB8l8cq+Ag8LIYyViP4+n+iRYMIHOL0Eqw45rhZm +5P6Qb2VKcub5vg+JskBiV4osDBboN1+fgBPiKyfcBjRk14RC+qByKGBuZjtcRCa4yb9 EfyTh2qJMZVeuyAf5figalqhQKEVghlu0P2hWIIE3eG0dI+zkI0I6aVte3ULLBX/SxOG 9E/A== X-Gm-Message-State: AOJu0Yy11xlPnRRmPvLJWagy8ugiE1SRYFWv6TDdBpQbvHsPaW9h5WxF QPY9nUt3kK3d9vak+V7kbRJzz8F5VfYebi+Hb45xp4MilyKXz6umHHIxR0wLFHgzaj108pU4atv ySfA= X-Google-Smtp-Source: AGHT+IGuVnmqrnJwc1N8DYy4ME9l9DMeAXjqyffWeTtynHOE6R8/cIi+ECGm+bwuey5f/wBIy8fW3g== X-Received: by 2002:a50:8e53:0:b0:570:db4:e5cd with SMTP id 19-20020a508e53000000b005700db4e5cdmr1626724edx.34.1714747428114; Fri, 03 May 2024 07:43:48 -0700 (PDT) Received: from localhost.localdomain ([95.90.235.164]) by smtp.gmail.com with ESMTPSA id en18-20020a056402529200b005721b7bfea2sm1731017edb.22.2024.05.03.07.43.47 (version=TLS1_3 cipher=TLS_AES_256_GCM_SHA384 bits=256/256); Fri, 03 May 2024 07:43:47 -0700 (PDT) From: Ninette Adhikari To: openembedded-core@lists.openembedded.org Cc: richard.purdie@linuxfoundation.org, randy.macleod@windriver.com, engineering@neighbourhood.ie, Ninette Adhikari <13760198+ninetteadhikari@users.noreply.github.com> Subject: [PATCH v2 3/5] oe-build-perf-report: Improve report styling and add descriptions Date: Fri, 3 May 2024 16:43:38 +0200 Message-ID: <20240503144340.27385-4-ninette@thehoodiefirm.com> X-Mailer: git-send-email 2.44.0 In-Reply-To: <20240503144340.27385-1-ninette@thehoodiefirm.com> References: <5e46a5c002cc62e0da9f3053c890120eb4582820.camel@linuxfoundation.org> <20240503144340.27385-1-ninette@thehoodiefirm.com> Reply-To: engineering@neighbourhood.ie MIME-Version: 1.0 List-Id: X-Webhook-Received: from li982-79.members.linode.com [45.33.32.79] by aws-us-west-2-korg-lkml-1.web.codeaurora.org with HTTPS for ; Fri, 03 May 2024 14:43:59 -0000 X-Groupsio-URL: https://lists.openembedded.org/g/openembedded-core/message/198999 From: Ninette Adhikari <13760198+ninetteadhikari@users.noreply.github.com> Styling updates are added including page margin, labels for x and y axis, tooltip, and section descriptions. --- .../build_perf/html/measurement_chart.html | 28 +++--- scripts/lib/build_perf/html/report.html | 90 +++++++++++++------ scripts/lib/build_perf/report.py | 3 +- 3 files changed, 80 insertions(+), 41 deletions(-) diff --git a/scripts/lib/build_perf/html/measurement_chart.html b/scripts/lib/build_perf/html/measurement_chart.html index ffec3d09db..9acb3785e2 100644 --- a/scripts/lib/build_perf/html/measurement_chart.html +++ b/scripts/lib/build_perf/html/measurement_chart.html @@ -13,8 +13,10 @@ // Convert raw data to the format: [time, value] const data = rawData.map(([commit, value, time]) => { return [ - new Date(time * 1000).getTime(), // The Date object takes values in milliseconds rather than seconds. So to use a Unix timestamp we have to multiply it by 1000. - Array.isArray(value) ? convertToMinute(value) : value // Assuming the array values are duration in the format [hours, minutes, seconds, milliseconds] + // The Date object takes values in milliseconds rather than seconds. So to use a Unix timestamp we have to multiply it by 1000. + new Date(time * 1000).getTime(), + // Assuming the array values are duration in the format [hours, minutes, seconds, milliseconds] + Array.isArray(value) ? convertToMinute(value) : value ] }); @@ -22,16 +24,18 @@ const option = { tooltip: { trigger: 'axis', - position: function (pt) { - return [pt[0], '10%']; - }, - valueFormatter: (value) => value.toFixed(2) + valueFormatter: (value) => { + const hours = Math.floor(value/60) + const minutes = Math.floor(value % 60) + const seconds = Math.floor((value * 60) % 60) + return hours + ':' + minutes + ':' + seconds + } }, xAxis: { type: 'time', }, yAxis: { - name: '{{ measurement.value_type.quantity }}' == 'time' ? 'Duration (minutes)' : 'Disk size (MB)', + name: '{{ measurement.value_type.quantity }}' == 'time' ? 'Duration in minutes' : 'Disk size in MB', type: 'value', min: function(value) { return Math.round(value.min - 0.5); @@ -42,14 +46,10 @@ }, dataZoom: [ { - type: 'inside', - start: 0, - end: 100 + type: 'slider', + xAxisIndex: 0, + filterMode: 'none' }, - { - start: 0, - end: 100 - } ], series: [ { diff --git a/scripts/lib/build_perf/html/report.html b/scripts/lib/build_perf/html/report.html index 653fd985bc..4cd240760a 100644 --- a/scripts/lib/build_perf/html/report.html +++ b/scripts/lib/build_perf/html/report.html @@ -24,23 +24,15 @@ text-align: left; border-collapse: collapse; } -.meta-table tr:nth-child(even){background-color: #f2f2f2} -meta-table th, .meta-table td { - padding: 4px; -} .summary { - margin: 0; font-size: 14px; text-align: left; border-collapse: collapse; } -summary th, .meta-table td { - padding: 4px; -} .measurement { padding: 8px 0px 8px 8px; border: 2px solid #f0f0f0; - margin-bottom: 10px; + margin: 1.5rem 0; } .details { margin: 0; @@ -60,18 +52,58 @@ summary th, .meta-table td { background-color: #f0f0f0; margin-left: 10px; } -hr { - color: #f0f0f0; +.card-container { + border-bottom-width: 1px; + padding: 1.25rem 3rem; + box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + border-radius: 0.25rem; +} +body { + font-family: 'Helvetica', sans-serif; + margin: 3rem 8rem; +} +h1 { + text-align: center; } h2 { - font-size: 20px; + font-size: 1.5rem; margin-bottom: 0px; color: #707070; + padding-top: 1.5rem; } h3 { - font-size: 16px; + font-size: 1.3rem; margin: 0px; color: #707070; + padding: 1.5rem 0; +} +h4 { + font-size: 14px; + font-weight: lighter; + line-height: 1.2rem; + margin: auto; + padding-top: 1rem; +} +table { + margin-top: 1.5rem; + line-height: 2rem; +} +tr { + border-bottom: 1px solid #e5e7eb; +} +tr:first-child { + border-bottom: 1px solid #9ca3af; +} +tr:last-child { + border-bottom: none; +} +a { + text-decoration: none; + font-weight: bold; + color: #0000EE; +} +a:hover { + color: #8080ff; } @@ -79,13 +111,14 @@ h3 { {% macro poky_link(commit) -%} - {{ commit[0:11] }} + {{ commit[0:11] }} {%- endmacro %} -
+
+

Performance Test Report

{# Test metadata #}

General

-
+

The table provides an overview of the comparison between two selected commits from the same branch.

@@ -108,19 +141,21 @@ h3 { {# Test result summary #}

Test result summary

-
+

The test summary presents a thorough breakdown of each test conducted on the branch, including details such as build time and disk space consumption. Additionally, it gives insights into the average time taken for test execution, along with absolute and relative values for a better understanding.

+ + + + + + + {% for test in test_data %} - {% if loop.index is even %} - {% set row_style = 'style="background-color: #f2f2f2"' %} - {% else %} - {% set row_style = 'style="background-color: #ffffff"' %} - {% endif %} {% if test.status == 'SUCCESS' %} {% for measurement in test.measurements %} {% if loop.index == 1 %} - + {% else %} {# add empty cell in place of the test name#} @@ -149,10 +184,12 @@ h3 {
Test nameMeasurement descriptionMean valueAbsolute differenceRelative difference
{{ test.name }}: {{ test.description }}{{ test.name }}: {{ test.description }}
{# Detailed test results #} +

Test details

+

The following section provides details of each test, accompanied by charts representing build time and disk usage over time or by commit number.

{% for test in test_data %} -

{{ test.name }}: {{ test.description }}

-
+

{{ test.name }}: {{ test.description }}

{% if test.status == 'SUCCESS' %} +
{% for measurement in test.measurements %}

{{ measurement.description }}

@@ -271,7 +308,8 @@ h3 { {% endif %} {% endif %}
- {% endfor %} + {% endfor %} +
{# Unsuccessful test #} {% else %} {{ test.status }} diff --git a/scripts/lib/build_perf/report.py b/scripts/lib/build_perf/report.py index 82c56830d7..f4e6a92e09 100644 --- a/scripts/lib/build_perf/report.py +++ b/scripts/lib/build_perf/report.py @@ -319,7 +319,8 @@ def measurement_stats(meas, prefix='', time=0): stats['quantity'] = val_cls.quantity stats[prefix + 'sample_cnt'] = len(values) - start_time = time # Add start time for both type sysres and disk usage + # Add start time for both type sysres and disk usage + start_time = time mean_val = val_cls(mean(values)) min_val = val_cls(min(values)) max_val = val_cls(max(values))