From 555d1bf467a842aaaf8b28bcc6186e7d1fe6fedd Mon Sep 17 00:00:00 2001 From: Ulli Hafner Date: Mon, 15 May 2023 12:49:12 +0200 Subject: [PATCH 1/5] Make trend charts theme-aware. Use colors from the new Echarts `JenkinsPalette` for line and bar charts. --- plugin/pom.xml | 7 +++ .../metrics/charts/CoverageTrendChart.java | 9 ++-- plugin/src/main/webapp/js/view-model.js | 35 ++------------ .../charts/CoverageSeriesBuilderTest.java | 35 +++++++++++++- .../coverage/metrics/charts/chart.json | 48 +++++++++++++++++++ 5 files changed, 99 insertions(+), 35 deletions(-) create mode 100644 plugin/src/test/resources/io/jenkins/plugins/coverage/metrics/charts/chart.json diff --git a/plugin/pom.xml b/plugin/pom.xml index c4930a6ec..11820a3eb 100644 --- a/plugin/pom.xml +++ b/plugin/pom.xml @@ -154,6 +154,7 @@ io.jenkins.plugins echarts-api + 5.4.0-4-rc815.a_ff2e0060885 io.jenkins.plugins @@ -344,6 +345,12 @@ + + io.jenkins.plugins + echarts-api + 5.4.0-4-SNAPSHOT + compile + diff --git a/plugin/src/main/java/io/jenkins/plugins/coverage/metrics/charts/CoverageTrendChart.java b/plugin/src/main/java/io/jenkins/plugins/coverage/metrics/charts/CoverageTrendChart.java index a2f2ae4d0..044e0fd19 100644 --- a/plugin/src/main/java/io/jenkins/plugins/coverage/metrics/charts/CoverageTrendChart.java +++ b/plugin/src/main/java/io/jenkins/plugins/coverage/metrics/charts/CoverageTrendChart.java @@ -3,7 +3,6 @@ import edu.hm.hafner.echarts.BuildResult; import edu.hm.hafner.echarts.ChartModelConfiguration; import edu.hm.hafner.echarts.JacksonFacade; -import edu.hm.hafner.echarts.Palette; import edu.hm.hafner.echarts.line.LineSeries; import edu.hm.hafner.echarts.line.LineSeries.FilledMode; import edu.hm.hafner.echarts.line.LineSeries.StackedMode; @@ -12,6 +11,7 @@ import io.jenkins.plugins.coverage.metrics.model.CoverageStatistics; import io.jenkins.plugins.coverage.metrics.model.Messages; +import io.jenkins.plugins.echarts.JenkinsPalette; /** * Builds the Java side model for a trend chart showing the line and branch coverage of a project. The number of builds @@ -23,6 +23,9 @@ * @see JacksonFacade */ public class CoverageTrendChart { + private static final String LINE_COVERAGE_COLOR = JenkinsPalette.GREEN.normal(); + private static final String BRANCH_COVERAGE_COLOR = JenkinsPalette.GREEN.dark(); + /** * Creates the chart for the specified results. * @@ -42,7 +45,7 @@ public LinesChartModel create(final Iterable> re LinesChartModel model = new LinesChartModel(dataSet); if (dataSet.isNotEmpty()) { LineSeries lineSeries = new LineSeries(Messages.Metric_LINE(), - Palette.GREEN.getNormal(), StackedMode.SEPARATE_LINES, FilledMode.FILLED, + LINE_COVERAGE_COLOR, StackedMode.SEPARATE_LINES, FilledMode.FILLED, dataSet.getSeries(CoverageSeriesBuilder.LINE_COVERAGE)); model.addSeries(lineSeries); model.useContinuousRangeAxis(); @@ -59,7 +62,7 @@ private static void addSecondSeries(final LinesDataSet dataSet, final LinesChart final String name, final String seriesId) { if (dataSet.containsSeries(seriesId)) { LineSeries branchSeries = new LineSeries(name, - Palette.GREEN.getHover(), StackedMode.SEPARATE_LINES, FilledMode.FILLED, + BRANCH_COVERAGE_COLOR, StackedMode.SEPARATE_LINES, FilledMode.FILLED, dataSet.getSeries(seriesId)); model.addSeries(branchSeries); diff --git a/plugin/src/main/webapp/js/view-model.js b/plugin/src/main/webapp/js/view-model.js index fe4300622..b62220437 100644 --- a/plugin/src/main/webapp/js/view-model.js +++ b/plugin/src/main/webapp/js/view-model.js @@ -14,41 +14,16 @@ const CoverageChartGenerator = function ($) { } }); }; - - function getTextColor() { - return getComputedStyle(document.body).getPropertyValue('--text-color') || '#333'; - } - - /** - * Searches for a Jenkins color by a color id. - * - * @param jenkinsColors The available Jenkins colors - * @param id The color id - * @param defaultValue The default value if the id does not exist - * @param alpha The alpha value between [0;255] - * @returns {string} the hex code of the Jenkins color or, if not existent, the default value - */ - function getJenkinsColorById(jenkinsColors, id, defaultValue, alpha) { - const alphaHex = alpha.toString(16); - if (jenkinsColors.has(id)) { - const color = jenkinsColors.get(id); - if (color.match(/^#[a-fA-F0-9]{6}$/) !== null) { - return color + alphaHex; - } - } - return defaultValue + alphaHex; - } - - function createOverview(overview, id, jenkinsColors) { - const missedColor = getJenkinsColorById(jenkinsColors, "--red", "#ff4d65", 120); - const coveredColor = getJenkinsColorById(jenkinsColors, "--green", "#4bdf7c", 120); + function createOverview(overview, id) { + const missedColor = echartsJenkinsApi.resolveJenkinsColor("--red"); + const coveredColor = echartsJenkinsApi.resolveJenkinsColor("--green"); const summaryChartDiv = $('#' + id); summaryChartDiv.height(overview.metrics.length * 31 + 150 + 'px'); const summaryChart = echarts.init(summaryChartDiv[0]); summaryChartDiv[0].echart = summaryChart; - const textColor = getTextColor(); + const textColor = echartsJenkinsApi.getTextColor(); const summaryOption = { tooltip: { @@ -359,7 +334,7 @@ const CoverageChartGenerator = function ($) { renderTrendChart(); viewProxy.getOverview(function (t) { - createOverview(t.responseObject(), 'coverage-overview', jenkinsColors); + createOverview(t.responseObject(), 'coverage-overview'); }); $('.tree-chart').each(function () { diff --git a/plugin/src/test/java/io/jenkins/plugins/coverage/metrics/charts/CoverageSeriesBuilderTest.java b/plugin/src/test/java/io/jenkins/plugins/coverage/metrics/charts/CoverageSeriesBuilderTest.java index 526624c32..b2cc5ff86 100644 --- a/plugin/src/test/java/io/jenkins/plugins/coverage/metrics/charts/CoverageSeriesBuilderTest.java +++ b/plugin/src/test/java/io/jenkins/plugins/coverage/metrics/charts/CoverageSeriesBuilderTest.java @@ -15,11 +15,11 @@ import edu.hm.hafner.echarts.ChartModelConfiguration.AxisType; import edu.hm.hafner.echarts.line.LinesChartModel; import edu.hm.hafner.echarts.line.LinesDataSet; +import edu.hm.hafner.util.ResourceTest; import edu.hm.hafner.util.VisibleForTesting; import io.jenkins.plugins.coverage.metrics.model.CoverageStatistics; -import static org.assertj.core.api.Assertions.*; import static org.mockito.Mockito.*; /** @@ -27,7 +27,7 @@ * * @author Ullrich Hafner */ -class CoverageSeriesBuilderTest { +class CoverageSeriesBuilderTest extends ResourceTest { @Test void shouldHaveEmptyDataSetForEmptyIterator() { CoverageSeriesBuilder builder = new CoverageSeriesBuilder(); @@ -99,6 +99,37 @@ void shouldHaveTwoValuesForSingleBuild() { assertThat(dataSet.getSeries(CoverageSeriesBuilder.BRANCH_COVERAGE)).containsExactly(75.0); } + @Test + void shouldHaveTwoValuesForTwoBuilds() { + CoverageSeriesBuilder builder = new CoverageSeriesBuilder(); + + BuildResult first = createResult(1, + new CoverageBuilder().setMetric(Metric.LINE).setCovered(1).setMissed(1).build(), + new CoverageBuilder().setMetric(Metric.BRANCH).setCovered(3).setMissed(1).build()); + BuildResult second = createResult(2, + new CoverageBuilder().setMetric(Metric.LINE).setCovered(1).setMissed(3).build(), + new CoverageBuilder().setMetric(Metric.BRANCH).setCovered(1).setMissed(3).build()); + + LinesDataSet dataSet = builder.createDataSet(createConfiguration(), List.of(first, second)); + + assertThat(dataSet.getDomainAxisSize()).isEqualTo(2); + assertThat(dataSet.getDomainAxisLabels()).containsExactly("#1", "#2"); + + assertThat(dataSet.getDataSetIds()).containsExactlyInAnyOrder( + CoverageSeriesBuilder.LINE_COVERAGE, + CoverageSeriesBuilder.BRANCH_COVERAGE); + + assertThat(dataSet.getSeries(CoverageSeriesBuilder.LINE_COVERAGE)) + .containsExactly(50.0, 25.0); + assertThat(dataSet.getSeries(CoverageSeriesBuilder.BRANCH_COVERAGE)) + .containsExactly(75.0, 25.0); + + CoverageTrendChart trendChart = new CoverageTrendChart(); + var model = trendChart.create(List.of(first, second), createConfiguration()); + + assertThatJson(model).isEqualTo(toString("chart.json")); + } + private ChartModelConfiguration createConfiguration() { ChartModelConfiguration configuration = mock(ChartModelConfiguration.class); when(configuration.getAxisType()).thenReturn(AxisType.BUILD); diff --git a/plugin/src/test/resources/io/jenkins/plugins/coverage/metrics/charts/chart.json b/plugin/src/test/resources/io/jenkins/plugins/coverage/metrics/charts/chart.json new file mode 100644 index 000000000..b6008e20e --- /dev/null +++ b/plugin/src/test/resources/io/jenkins/plugins/coverage/metrics/charts/chart.json @@ -0,0 +1,48 @@ +{ + "domainAxisLabels": [ + "#1", "#2" + ], + "buildNumbers": [ + 1, 2 + ], + "series": [ + { + "name": "Line Coverage", + "type": "line", + "symbol": "circle", + "data": [ + 50.0, 25.0 + ], + "itemStyle": { + "color": "--green", + "borderColor": "#ffffff", + "borderWidth": 0 + }, + "stack": "", + "areaStyle": { + "normal": true + } + }, + { + "name": "Branch Coverage", + "type": "line", + "symbol": "circle", + "data": [ + 75.0, 25.0 + ], + "itemStyle": { + "color": "--dark-green", + "borderColor": "#ffffff", + "borderWidth": 0 + }, + "stack": "", + "areaStyle": { + "normal": true + } + } + ], + "domainAxisItemName": "Build", + "integerRangeAxis": false, + "rangeMax": 100.0, + "rangeMin": 25.0 +} From a6af045b82f2ca8eddc04a58978464fee4f8b91b Mon Sep 17 00:00:00 2001 From: Ulli Hafner Date: Tue, 16 May 2023 16:09:03 +0200 Subject: [PATCH 2/5] Bump version of ECharts to 5.4.0-4-rc815.a_ff2e0060885. --- plugin/pom.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugin/pom.xml b/plugin/pom.xml index 11820a3eb..c891c7bf0 100644 --- a/plugin/pom.xml +++ b/plugin/pom.xml @@ -154,7 +154,7 @@ io.jenkins.plugins echarts-api - 5.4.0-4-rc815.a_ff2e0060885 + 5.4.0-4-rc820.fc605555db_b_c io.jenkins.plugins From bdbcf1791444b8f5e9ccb3f9d891d335251a122e Mon Sep 17 00:00:00 2001 From: Ulli Hafner Date: Fri, 19 May 2023 00:06:43 +0200 Subject: [PATCH 3/5] Enable row selection only for inline tables. --- .../plugins/coverage/metrics/steps/CoverageTableModel.java | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/plugin/src/main/java/io/jenkins/plugins/coverage/metrics/steps/CoverageTableModel.java b/plugin/src/main/java/io/jenkins/plugins/coverage/metrics/steps/CoverageTableModel.java index 96aa98db5..118aad9b0 100644 --- a/plugin/src/main/java/io/jenkins/plugins/coverage/metrics/steps/CoverageTableModel.java +++ b/plugin/src/main/java/io/jenkins/plugins/coverage/metrics/steps/CoverageTableModel.java @@ -77,7 +77,9 @@ public String getId() { public TableConfiguration getTableConfiguration() { TableConfiguration tableConfiguration = new TableConfiguration(); tableConfiguration.responsive(); - tableConfiguration.select(SelectStyle.SINGLE); + if (getId().contains("inline")) { + tableConfiguration.select(SelectStyle.SINGLE); + } renderer.configureTable(tableConfiguration); return tableConfiguration; } From 342037a5fb36cd2be2b8d155c1566ae42601c7dd Mon Sep 17 00:00:00 2001 From: Ulli Hafner Date: Fri, 19 May 2023 00:07:58 +0200 Subject: [PATCH 4/5] Improve styling of coverage cell border for new Boostrap layout changes. --- plugin/pom.xml | 6 ------ .../io/jenkins/plugins/coverage/metrics/cell-style.css | 2 +- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/plugin/pom.xml b/plugin/pom.xml index c891c7bf0..58fd23ebd 100644 --- a/plugin/pom.xml +++ b/plugin/pom.xml @@ -345,12 +345,6 @@ - - io.jenkins.plugins - echarts-api - 5.4.0-4-SNAPSHOT - compile - diff --git a/plugin/src/main/resources/io/jenkins/plugins/coverage/metrics/cell-style.css b/plugin/src/main/resources/io/jenkins/plugins/coverage/metrics/cell-style.css index d5ad1e99a..f23b2daf0 100644 --- a/plugin/src/main/resources/io/jenkins/plugins/coverage/metrics/cell-style.css +++ b/plugin/src/main/resources/io/jenkins/plugins/coverage/metrics/cell-style.css @@ -1,5 +1,5 @@ .coverage-cell-outer { - border: 1px solid var(--medium-grey); + border: 1px solid var(--dark-grey); border-radius: 10px; } From 708ef79d99c542de3233d9400c1f167551ba52ce Mon Sep 17 00:00:00 2001 From: Ulli Hafner Date: Sat, 20 May 2023 00:49:38 +0200 Subject: [PATCH 5/5] Use theme-colors to render the source code view. --- plugin/pom.xml | 2 +- .../source/SourceViewModel/index.jelly | 2 +- .../steps/CoverageViewModel/index.jelly | 4 +- .../model/CoverageViewModel/index.jelly | 3 +- plugin/src/main/webapp/css/column-style.css | 14 ---- .../css/{custom-style.css => view-model.css} | 70 +++++++++++++++++++ plugin/src/main/webapp/js/view-model.js | 20 +++++- .../charts/CoverageSeriesBuilderTest.java | 2 + 8 files changed, 94 insertions(+), 23 deletions(-) delete mode 100644 plugin/src/main/webapp/css/column-style.css rename plugin/src/main/webapp/css/{custom-style.css => view-model.css} (60%) diff --git a/plugin/pom.xml b/plugin/pom.xml index 58fd23ebd..d86bd9566 100644 --- a/plugin/pom.xml +++ b/plugin/pom.xml @@ -154,7 +154,7 @@ io.jenkins.plugins echarts-api - 5.4.0-4-rc820.fc605555db_b_c + 5.4.0-4 io.jenkins.plugins diff --git a/plugin/src/main/resources/io/jenkins/plugins/coverage/metrics/source/SourceViewModel/index.jelly b/plugin/src/main/resources/io/jenkins/plugins/coverage/metrics/source/SourceViewModel/index.jelly index dbc8862c8..e25095983 100644 --- a/plugin/src/main/resources/io/jenkins/plugins/coverage/metrics/source/SourceViewModel/index.jelly +++ b/plugin/src/main/resources/io/jenkins/plugins/coverage/metrics/source/SourceViewModel/index.jelly @@ -5,7 +5,7 @@ - +
diff --git a/plugin/src/main/resources/io/jenkins/plugins/coverage/metrics/steps/CoverageViewModel/index.jelly b/plugin/src/main/resources/io/jenkins/plugins/coverage/metrics/steps/CoverageViewModel/index.jelly index 3c1e3e2dd..90faa8daa 100644 --- a/plugin/src/main/resources/io/jenkins/plugins/coverage/metrics/steps/CoverageViewModel/index.jelly +++ b/plugin/src/main/resources/io/jenkins/plugins/coverage/metrics/steps/CoverageViewModel/index.jelly @@ -8,12 +8,10 @@ - - +