Add HWE to kernel lifecycle charts (#13857)

* Add HWE to kernel lifecycle charts

* Updates colours on other release cycle charts

* Update HWE key-text

* Remove duplicated heading above the kernel lifecycle chart

* Update bubble title

navigation.yaml

@@ -442,7 +442,7 @@ engage:
       path: /engage
 
 about:
-  title: About
+  title: About Ubuntu
   path: /about
 
   children:

static/js/src/chart-data.js

@@ -163,7 +163,7 @@ export var kernelReleases = [
   {
     startDate: new Date("2024-02-01T00:00:00"),
     endDate: new Date("2024-08-01T00:00:00"),
-    taskName: "22.04.4 LTS",
+    taskName: "22.04.4 LTS (HWE)",
     taskVersion: "6.5 kernel",
     status: "LTS",
   },
@@ -191,14 +191,14 @@ export var kernelReleases = [
   {
     startDate: new Date("2022-08-01T00:00:00"),
     endDate: new Date("2025-04-30T00:00:00"),
-    taskName: "20.04.5 LTS",
+    taskName: "20.04.5 LTS (HWE)",
     taskVersion: "",
     status: "LTS",
   },
   {
     startDate: new Date("2025-04-30T00:00:00"),
     endDate: new Date("2030-04-29T00:00:00"),
-    taskName: "20.04.5 LTS",
+    taskName: "20.04.5 LTS (HWE)",
     taskVersion: "",
     status: "ESM",
   },
@@ -219,14 +219,14 @@ export var kernelReleases = [
   {
     startDate: new Date("2020-08-13T00:00:00"),
     endDate: new Date("2023-04-30T00:00:00"),
-    taskName: "18.04.5 LTS",
+    taskName: "18.04.5 LTS (HWE)",
     taskVersion: "5.4 kernel",
     status: "LTS",
   },
   {
     startDate: new Date("2023-04-30T00:00:00"),
     endDate: new Date("2028-04-28T00:00:00"),
-    taskName: "18.04.5 LTS",
+    taskName: "18.04.5 LTS (HWE)",
     taskVersion: "5.4 kernel",
     status: "ESM",
   },
@@ -261,14 +261,14 @@ export var kernelReleases = [
   {
     startDate: new Date("2018-08-02T00:00:00"),
     endDate: new Date("2021-04-30T00:00:00"),
-    taskName: "16.04.5 LTS",
+    taskName: "16.04.5 LTS (HWE)",
     taskVersion: "4.15 kernel",
     status: "LTS",
   },
   {
     startDate: new Date("2021-04-30T00:00:00"),
     endDate: new Date("2026-04-29T00:00:00"),
-    taskName: "16.04.5 LTS",
+    taskName: "16.04.5 LTS (HWE)",
     taskVersion: "4.15 kernel",
     status: "ESM",
   },
@@ -303,14 +303,14 @@ export var kernelReleases = [
   {
     startDate: new Date("2016-08-04T00:00:00"),
     endDate: new Date("2019-04-30T00:00:00"),
-    taskName: "14.04.5 LTS",
+    taskName: "14.04.5 LTS (HWE)",
     taskVersion: "4.4 kernel",
     status: "LTS",
   },
   {
     startDate: new Date("2019-04-30T00:00:00"),
     endDate: new Date("2024-04-29T00:00:00"),
-    taskName: "14.04.5 LTS",
+    taskName: "14.04.5 LTS (HWE)",
     taskVersion: "4.4 kernel",
     status: "ESM",
   },
@@ -1135,15 +1135,14 @@ export var kernelStatusALL = {
 };
 
 export var openStackStatus = {
-  //TECH_PREVIEW: "chart__bar--orange-light",
-  LTS: "chart__bar--orange",
-  MATCHING_OPENSTACK_RELEASE_SUPPORT: "chart__bar--grey",
+  LTS: "chart__bar--black",
+  MATCHING_OPENSTACK_RELEASE_SUPPORT: "chart__bar--mid-dark",
   ESM: "chart__bar--aubergine",
-  EXTENDED_SUPPORT_FOR_CUSTOMERS: "chart__bar--green",
+  EXTENDED_SUPPORT_FOR_CUSTOMERS: "chart__bar--aubergine-light",
 };
 
 export var kubernetesStatus = {
-  CANONICAL_KUBERNETES_SUPPORT: "chart__bar--orange",
+  CANONICAL_KUBERNETES_SUPPORT: "chart__bar--black",
   CANONICAL_KUBERNETES_EXPANDED_SECURITY_MAINTENANCE: "chart__bar--aubergine",
 };
 
@@ -1165,18 +1164,18 @@ export var desktopServerReleaseNames = [
 
 export var kernelReleaseNames = [
   "24.04.0 LTS",
-  "22.04.4 LTS",
+  "22.04.4 LTS (HWE)",
   "23.10",
   "22.04.1 LTS",
-  "20.04.5 LTS",
+  "20.04.5 LTS (HWE)",
   "22.04.0 LTS",
-  "18.04.5 LTS",
+  "18.04.5 LTS (HWE)",
   "20.04.1 LTS",
   "20.04.0 LTS",
-  "16.04.5 LTS",
+  "16.04.5 LTS (HWE)",
   "18.04.1 LTS",
   "18.04.0 LTS",
-  "14.04.5 LTS",
+  "14.04.5 LTS (HWE)",
   "16.04.1 LTS",
   "16.04.0 LTS",
 ];

static/js/src/release-chart-old.js

@@ -4,6 +4,7 @@ const margin = {
   right: 40,
   bottom: 20,
 };
+const kernelVersionWidth = 50;
 
 /**
  *
@@ -53,7 +54,6 @@ function addBarsToChart(svg, tasks, taskStatus, x, y, highlightVersion) {
       }
 
       className += " " + taskStatus[d.status];
-
       return className;
     })
     .attr("y", 0)
@@ -175,8 +175,13 @@ function addXAxis(svg, height, xAxis) {
  *
  * Add y axis to chart
  */
-function addYAxis(svg, yAxis) {
-  svg.append("g").attr("class", "y axis").transition().call(yAxis);
+function addYAxis(svg, yAxis, taskVersions) {
+  svg
+    .append("g")
+    .attr("class", "y axis")
+    .attr("x", taskVersions ? -margin.left / 1.6 : -margin.left)
+    .transition()
+    .call(yAxis);
 }
 
 /**
@@ -186,8 +191,30 @@ function addYAxis(svg, yAxis) {
  *
  * Add version axis to chart
  */
-function addVersionAxis(svg, versionAxis) {
-  svg.append("g").attr("class", "version axis").call(versionAxis);
+function addVersionAxis(svg, taskVersions) {
+  svg.selectAll(".y.axis .tick").each(function (d, i) {
+    const existingText = d3.select(this).select("text");
+    d3.select(this)
+      .append("text")
+      .text(taskVersions[i])
+      .attr("x", -margin.left)
+      .attr("dy", existingText.attr("dy"))
+      .attr("fill", "currentColor")
+      .attr("class", "chart__kernel-version")
+      .attr("text-anchor", "start");
+  });
+}
+
+/**
+ * Adjusts the position of the Ubuntu version labels
+ */
+function adjustUbuntuVersionLabels(svg) {
+  svg
+    .selectAll(".y.axis .tick text:not(.chart__kernel-version)")
+    .each(function () {
+      console.log("Current ele", d3.select(this));
+      d3.select(this).attr("transform", `translate(${kernelVersionWidth}, 0)`);
+    });
 }
 
 /**
@@ -243,16 +270,6 @@ function highlightChartRow(svg, scale, highlightVersion) {
   });
 }
 
-/**
- *
- * @param {*} svg
- */
-function setVersionAxisLabels(svg, taskVersions) {
-  svg.selectAll(".version .tick text").select(function (tickLabel, index) {
-    this.textContent = taskVersions[index];
-  });
-}
-
 /**
  *
  * @param {*} svg
@@ -396,6 +413,7 @@ function formatKeyLabel(key) {
     "Pro support",
     "Ubuntu Pro + Support coverage"
   );
+  formattedKey = formattedKey.replace("Hwe", "HWE: Hardware Enablement");
   return formattedKey;
 }
 
@@ -405,7 +423,7 @@ function formatKeyLabel(key) {
  *
  * Calculate the longest Y-Axis label
  */
-function calculateYAxisWidth(YAxisLabels) {
+function calculateLongestLabelWidth(YAxisLabels) {
   var YAxisLabelsCopy = YAxisLabels.slice();
   var longestLabel = YAxisLabelsCopy.sort(function (a, b) {
     return b.length - a.length;
@@ -431,7 +449,12 @@ export function createReleaseChartOld(
   removePadding,
   highlightVersion
 ) {
-  margin.left = calculateYAxisWidth(taskTypes);
+  var longestLabelWidth = calculateLongestLabelWidth(taskTypes);
+  if (taskVersions) {
+    margin.left = longestLabelWidth + kernelVersionWidth;
+  } else {
+    margin.left = longestLabelWidth;
+  }
   var timeDomainStart;
   var timeDomainEnd;
   var earliestStartDate = d3.min(tasks, (d) => d.startDate);
@@ -453,11 +476,9 @@ export function createReleaseChartOld(
     if (closestCol.clientWidth <= 0) {
       return;
     }
-
     containerWidth = closestCol.clientWidth - margin.left;
   }
-  var width = containerWidth - margin.right - margin.left;
-
+  var width = containerWidth - margin.left;
   var x = d3
     .scaleTime()
     .domain([timeDomainStart, timeDomainEnd])
@@ -482,15 +503,6 @@ export function createReleaseChartOld(
 
   var chartTranslateX = margin.left;
 
-  if (taskVersions) {
-    var versionAxis = d3
-      .axisRight(version)
-      .tickPadding(-margin.left * 1.6)
-      .tickSize(0);
-
-    chartTranslateX = margin.left * 1.6;
-  }
-
   sortTasks(tasks);
 
   // Build initial chart body
@@ -512,20 +524,21 @@ export function createReleaseChartOld(
   addXAxis(svg, height, xAxis);
   addXAxisVerticalLines(svg, height);
 
-  addYAxis(svg, yAxis);
+  addYAxis(svg, yAxis, taskVersions);
   addYAxisVerticalLines(svg, width);
 
   addBarsToChart(svg, tasks, taskStatus, x, y, highlightVersion);
   addTooltipToBars(svg);
 
-  if (taskVersions) {
-    addVersionAxis(svg, versionAxis);
-    setVersionAxisLabels(svg, taskVersions);
-  }
-
   emboldenLTSLabels(svg, y);
   highlightChartRow(svg, y, highlightVersion);
 
+  if (taskVersions) {
+    addVersionAxis(svg, taskVersions);
+    adjustUbuntuVersionLabels(svg);
+    taskStatus["HWE"] = "chart__hwe-key";
+  }
+
   cleanUpChart(svg);
   buildChartKey(chartSelector, taskStatus);
 }
@@ -563,7 +576,7 @@ export function createChartWithTitles(
   );
 
   // adjust chart height to fit titles
-  margin.left = calculateYAxisWidth(taskTypes);
+  margin.left = calculateLongestLabelWidth(taskTypes);
   const svg = d3.select(chartSelector).select(".chart");
   const height = taskTypes.length * rowHeight;
   const newHeight = height + 30;

static/sass/_pattern_chart.scss

@@ -22,6 +22,12 @@
   stroke-width: 1px;
 }
 
+.chart__bar--mid-dark {
+  fill: $color-mid-dark;
+  stroke: $color-mid-dark;
+  stroke-width: 1px;
+}
+
 .chart__bar--aubergine {
   fill: #772953;
   stroke: #772953;
@@ -58,6 +64,10 @@
   stroke-width: 1px;
 }
 
+.chart__hwe-key {
+  display: none;
+}
+
 .chart__label--bold {
   font-weight: bold;
 }

templates/about/release-cycle.html

@@ -177,7 +177,6 @@ <h2>Ubuntu kernel release cycle</h2>
 
       <p>In addition, the kernel versions from the subsequent four releases are made available on the latest LTS release of Ubuntu. So Ubuntu 18.04 LTS received the kernels from Ubuntu 18.10, 19.04, 19.10 and 20.04 LTS. These kernels use newer upstream versions and as a result, offer an easy path to newer features and newer classes of hardware for many users of Ubuntu. Note however that these kernels 'roll' which means that they jump every six months until the next LTS. Large scale deployments that adopt the 'hardware enablement' or HWE kernels should manage those transitions explicitly. These newer HWE kernels are accompanied by a collection of userspace tools closely tied to the kernel and hardware, specifically X display enablement on newer graphics cards.</p>
 
-      <p>The Ubuntu kernel support lifecycle</p>
     </div>
 
     {% include "/about/release_cycles/kernel-eol.html" %}