From a0edbe358feb40b31f5f22cb85be636d6110ba59 Mon Sep 17 00:00:00 2001 From: Akbar Abdrakhmanov Date: Fri, 8 Dec 2023 10:36:51 +0600 Subject: [PATCH 1/5] add table and a chart to /containers/chiselled page --- build.js | 3 +- static/js/src/charts/chiselled-chart.js | 91 +++++++++ templates/containers/chiselled/index.html | 221 +++++++++++++++++++--- 3 files changed, 289 insertions(+), 26 deletions(-) create mode 100644 static/js/src/charts/chiselled-chart.js diff --git a/build.js b/build.js index 02b93d3d2ee..31cb7d3c576 100644 --- a/build.js +++ b/build.js @@ -31,7 +31,8 @@ let entries = { "kernel-form": "./static/js/src/kernel-form.js", "random-partner-logos": "./static/js/src/random-partner-logos.js", "credEnterprisePurchasing": "./static/js/src/advantage/credentials/app.tsx", - activate: "./static/js/src/activate.js" + activate: "./static/js/src/activate.js", + "chiselled-chart": "./static/js/src/charts/chiselled-chart.js" }; const isDev = process && process.env && process.env.NODE_ENV === "development"; diff --git a/static/js/src/charts/chiselled-chart.js b/static/js/src/charts/chiselled-chart.js new file mode 100644 index 00000000000..7f2d5688465 --- /dev/null +++ b/static/js/src/charts/chiselled-chart.js @@ -0,0 +1,91 @@ +import { debounce } from "../utils/debounce.js"; + +function buildChiselledChart(selector, data, isFirst) { + const colors = ["#CBA7B8", "#923A66", "#000000"]; + + var width = document.querySelector(selector).getBoundingClientRect().width; + + const x = d3.scaleLinear().range([0, width]).domain([0, 330]); + + const withScale = screen.width < 1036 || isFirst; + + const svg = d3 + .select(selector) + .append("svg") + .attr("width", width) + .attr("height", `${2.5 * (data.length + (withScale ? 1 : 0))}em`); + + const xAxis = d3 + .axisTop(x) + .ticks(3) + .tickSizeInner(24) + .tickSizeOuter(0); + + const axisG = svg.append("g"); + + if (withScale) axisG.style("transform", "translate(0, 2.3rem)"); + + axisG.call(xAxis); + + axisG.selectAll("text") + .attr("transform", "translate(5, 20)") + .attr("text-anchor", "start") + .style("font-size", "1.6em") + .style("color", "#666666"); + + axisG.select(".domain") + .attr("transform", "translate(0, -2)") + .attr("stroke", "#000000") + .attr("stroke-width", "1px") + .attr("opacity", "0.2"); + + axisG.selectAll("line") + .attr("transform", "translate(0, -2)") + .attr("stroke", "#000000") + .attr("stroke-width", "1px") + .attr("opacity", "0.2"); + + const chartG = svg.append("g"); + + if (withScale) chartG.style("transform", "translate(0, 2.4em)"); + + chartG.selectAll() + .data(data) + .enter() + .append("rect") + .attr("fill", function (d, i) { + if (i === data.length - 1) return colors[colors.length - 1]; + return colors[i]; + }) + .attr("x", 0) + .attr("y", function (d, i) { + return `${2.5 * i}em`; + }) + .attr("height", "2.35em") + .attr("width", function (d, i) { + return x(d); + }); +} + +function clearChiselledChart(selector) { + const chart = document.querySelector(selector); + if (chart) { + chart.innerHTML = ""; + } +} + +window.addEventListener( + "resize", + debounce(function () { + clearChiselledChart("#chiselled-dotnet-chart"); + clearChiselledChart("#chiselled-java-chart"); + clearChiselledChart("#chiselled-other-chart"); + buildChiselledChart("#chiselled-dotnet-chart", [219, 116, 5], true); + buildChiselledChart("#chiselled-java-chart", [215, 113]); + buildChiselledChart("#chiselled-other-chart", [20, 12]); + }, 250) +); + +buildChiselledChart("#chiselled-dotnet-chart", [219, 116, 5], true); +buildChiselledChart("#chiselled-java-chart", [215, 113]); +buildChiselledChart("#chiselled-other-chart", [20, 12]); diff --git a/templates/containers/chiselled/index.html b/templates/containers/chiselled/index.html index 07c1949caf4..d2183388acd 100644 --- a/templates/containers/chiselled/index.html +++ b/templates/containers/chiselled/index.html @@ -7,6 +7,28 @@ {% block body_class %}is-paper{% endblock body_class %} {% block content %} + +
@@ -17,14 +39,16 @@

Chiselled Ubuntu

Ultra-small, ultra-secure containerisation

Rethink your containerisation strategy with chiselled Ubuntu — where ultra-small meets ultra-secure. Trim your - attack surface by 6x and get the reliability of a vendor-supported Linux distribution.

+ attack surface by 6x and get the reliability of a vendor-supported Linux distribution.

@@ -33,7 +57,8 @@

Ultra-small, ultra-secure containerisation

- +
@@ -66,7 +91,8 @@

Why your attack surface matters

-

Container images’ attack surface is a critical factor in determining their security. As the size of a container +

Container images’ attack surface is a critical factor in determining their security. As the size of a + container image increases, so does the potential for vulnerabilities and known security issues.

According to Sysdig, 87% of container images have high or critical vulnerabilities.

@@ -80,13 +106,14 @@

Why your attack surface matters

-
+
-
+

Chiselled Ubuntu:

Production-ready, ultra-small Ubuntu containers

+
-
+

Experience the power of ultra-small containerisation. Chiselled Ubuntu delivers efficiency with a minimal attack surface.

Chiselled Ubuntu and your favourite toolchains come together seamlessly. It's your shortcut to creating and @@ -95,14 +122,150 @@

Production-ready, ultra-small Ubuntu containers

+
+
+
+
+

.NET

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
LanguagePackageSize
PackageSize
.NET +
+ Ubuntu .NET image + 		219MB
+
+ Chiselled Ubuntu .NET image + 		116MB
+
+ Chiselled Ubuntu for self contained .NET image + 		5MB
+
+
+
+
+
+
+
+
+
+

JAVA

+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
LanguagePackageSize
PackageSize
JAVA +
+ Eclipse Temurin + 		215MB
+
+ Chiselled Ubuntu for JRE8 + 		113MB
+
+
+
+
+
+
+
+
+
+

C, C++, Go, R

+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
LanguagePackageSize
PackageSize
C, C++, Go, R +
+ Google Distroless + 		20MB
+
+ Chiselled Ubuntu + 		12MB
+
+
+
+
+
+
+
+
-
+
-

- Get - started now and ship with chiselled Ubuntu in minutes › -

+

+ Get + started now and ship with chiselled Ubuntu in minutes › +

@@ -123,12 +286,15 @@

How does chisel work

loading="lazy" ) | safe }}
-

Chisel operates as a from-scratch package manager, meticulously sculpting ultra-small runtime file systems.

-

To do so, chiselled Ubuntu relies on a curated collection of Slice Definitions Files. These files relate to the - upstream packages from the Ubuntu archives, and define one or more slices for any given package. A package slice +

Chisel operates as a from-scratch package manager, meticulously sculpting ultra-small runtime file systems. +

+

To do so, chiselled Ubuntu relies on a curated collection of Slice Definitions Files. These files relate to + the + upstream packages from the Ubuntu archives, and define one or more slices for any given package. A package + slice represents a subset of the package’s contents, comprising its maintainer scripts and dependencies.

Chisel effectively layers reusable knowledge on top of traditional Ubuntu deb packages, through a - developer-friendly CLI and fine-grained dependency management mechanism.

+ developer-friendly CLI and fine-grained dependency management mechanism.

@@ -164,15 +330,17 @@

What industry experts say

“There has always been a need for smaller and tighter images. Developers remind us, as a base image provider, of that on a regular basis. Chiselled images leapfrog over approaches we’ve looked at in the past. - We love the idea and implementation of chiselled images and Canonical as a partner. When technical leaders at + We love the idea and implementation of chiselled images and Canonical as a partner. When technical leaders + at Canonical shared the first demos of chiselled images with us, we immediately wanted to be a launch partner, and we’re thrilled that we’re shipping Ubuntu chiselled images for .NET as part of the GA release”

Richard Lander, Program Manager, .NET at Microsoft

-
-

Watch our interview with Richard Lander ›

+
+

Watch our interview with Richard Lander › +

@@ -201,7 +369,7 @@

From development to production: making developers' lives easier

Get - started today ›

+ started today ›

@@ -229,8 +397,8 @@

Vendor supported
distroless images

-
-
+
+

Get started with chiselled Ubuntu containers today › @@ -318,7 +486,8 @@

GitHub

- Talk to an expert about how
Ubuntu + Talk to an expert about how
Ubuntu containers can benefit your enterprise ›

@@ -331,4 +500,6 @@

GitHub

data-return-url="https://ubuntu.com/containers/chiselled/dotnet#success" data-lp-url="https://pages.ubuntu.com/things-contact-us.html">
+ + {% endblock %} \ No newline at end of file From 76bd4801bef6d23740190ad61d90fd60c664252e Mon Sep 17 00:00:00 2001 From: Akbar Abdrakhmanov Date: Fri, 8 Dec 2023 11:01:18 +0600 Subject: [PATCH 2/5] add accessibility tags to a table --- static/js/src/charts/chiselled-chart.js | 23 +++++++++++++---------- templates/containers/chiselled/index.html | 18 ++++++++++++------ 2 files changed, 25 insertions(+), 16 deletions(-) diff --git a/static/js/src/charts/chiselled-chart.js b/static/js/src/charts/chiselled-chart.js index 7f2d5688465..1bf43832d4f 100644 --- a/static/js/src/charts/chiselled-chart.js +++ b/static/js/src/charts/chiselled-chart.js @@ -15,11 +15,7 @@ function buildChiselledChart(selector, data, isFirst) { .attr("width", width) .attr("height", `${2.5 * (data.length + (withScale ? 1 : 0))}em`); - const xAxis = d3 - .axisTop(x) - .ticks(3) - .tickSizeInner(24) - .tickSizeOuter(0); + const xAxis = d3.axisTop(x).ticks(3).tickSizeInner(24).tickSizeOuter(0); const axisG = svg.append("g"); @@ -27,19 +23,22 @@ function buildChiselledChart(selector, data, isFirst) { axisG.call(xAxis); - axisG.selectAll("text") + axisG + .selectAll("text") .attr("transform", "translate(5, 20)") .attr("text-anchor", "start") .style("font-size", "1.6em") .style("color", "#666666"); - axisG.select(".domain") + axisG + .select(".domain") .attr("transform", "translate(0, -2)") .attr("stroke", "#000000") .attr("stroke-width", "1px") .attr("opacity", "0.2"); - axisG.selectAll("line") + axisG + .selectAll("line") .attr("transform", "translate(0, -2)") .attr("stroke", "#000000") .attr("stroke-width", "1px") @@ -48,8 +47,9 @@ function buildChiselledChart(selector, data, isFirst) { const chartG = svg.append("g"); if (withScale) chartG.style("transform", "translate(0, 2.4em)"); - - chartG.selectAll() + + chartG + .selectAll() .data(data) .enter() .append("rect") @@ -64,6 +64,9 @@ function buildChiselledChart(selector, data, isFirst) { .attr("height", "2.35em") .attr("width", function (d, i) { return x(d); + }) + .attr("aria-label", function (d, i) { + return `${d} MB`; }); } diff --git a/templates/containers/chiselled/index.html b/templates/containers/chiselled/index.html index d2183388acd..bd2f1a7a0d7 100644 --- a/templates/containers/chiselled/index.html +++ b/templates/containers/chiselled/index.html @@ -129,7 +129,7 @@

Production-ready, ultra-small Ubuntu containers

.NET

- +
@@ -168,7 +168,9 @@

.NET

Language
-
+
+
@@ -178,7 +180,7 @@

.NET

JAVA

- +
@@ -210,7 +212,8 @@

JAVA

Language
-
+
+
@@ -220,7 +223,8 @@

JAVA

C, C++, Go, R

- +
@@ -252,7 +256,9 @@

C, C++, Go, R

Language
-
+
+
From 89836a300ab9bb393feebdce0d4921902d6c9065 Mon Sep 17 00:00:00 2001 From: Akbar Abdrakhmanov Date: Fri, 8 Dec 2023 11:48:59 +0600 Subject: [PATCH 3/5] rename variable, add alt text to an image, fix formatting --- static/js/src/charts/chiselled-chart.js | 10 +++++----- templates/containers/chiselled/index.html | 17 ++++++++++------- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/static/js/src/charts/chiselled-chart.js b/static/js/src/charts/chiselled-chart.js index 1bf43832d4f..2a1b16ce4e0 100644 --- a/static/js/src/charts/chiselled-chart.js +++ b/static/js/src/charts/chiselled-chart.js @@ -3,23 +3,23 @@ import { debounce } from "../utils/debounce.js"; function buildChiselledChart(selector, data, isFirst) { const colors = ["#CBA7B8", "#923A66", "#000000"]; - var width = document.querySelector(selector).getBoundingClientRect().width; + const width = document.querySelector(selector).getBoundingClientRect().width; const x = d3.scaleLinear().range([0, width]).domain([0, 330]); - const withScale = screen.width < 1036 || isFirst; + const withAxis = screen.width < 1036 || isFirst; const svg = d3 .select(selector) .append("svg") .attr("width", width) - .attr("height", `${2.5 * (data.length + (withScale ? 1 : 0))}em`); + .attr("height", `${2.5 * (data.length + (withAxis ? 1 : 0))}em`); // make the height bigger if it shows with axis const xAxis = d3.axisTop(x).ticks(3).tickSizeInner(24).tickSizeOuter(0); const axisG = svg.append("g"); - if (withScale) axisG.style("transform", "translate(0, 2.3rem)"); + if (withAxis) axisG.style("transform", "translate(0, 2.3rem)"); axisG.call(xAxis); @@ -46,7 +46,7 @@ function buildChiselledChart(selector, data, isFirst) { const chartG = svg.append("g"); - if (withScale) chartG.style("transform", "translate(0, 2.4em)"); + if (withAxis) chartG.style("transform", "translate(0, 2.4em)"); chartG .selectAll() diff --git a/templates/containers/chiselled/index.html b/templates/containers/chiselled/index.html index bd2f1a7a0d7..ba539dcbaf0 100644 --- a/templates/containers/chiselled/index.html +++ b/templates/containers/chiselled/index.html @@ -58,7 +58,7 @@

Ultra-small, ultra-secure containerisation

+ alt="An image that demonstrates how chiselled Ubuntu works" />
@@ -345,7 +345,8 @@

What industry experts say

Richard Lander, Program Manager, .NET at Microsoft

-

Watch our interview with Richard Lander › +

+ Watch our interview with Richard Lander ›

@@ -374,8 +375,10 @@

From development to production: making developers' lives easier

-

Get - started today ›

+

+ Get + started today › +

@@ -492,9 +495,9 @@

GitHub

- Talk to an expert about how
Ubuntu - containers can benefit your enterprise › + Talk to an expert about how +
Ubuntu containers can benefit your enterprise › +

From a58e012a11eff5b10ebb0c88a6ef20096062ee75 Mon Sep 17 00:00:00 2001 From: Akbar Abdrakhmanov Date: Fri, 8 Dec 2023 16:15:38 +0600 Subject: [PATCH 4/5] do not write the word 'Java' with all capital letters --- templates/containers/chiselled/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/containers/chiselled/index.html b/templates/containers/chiselled/index.html index ba539dcbaf0..b55764ab8a7 100644 --- a/templates/containers/chiselled/index.html +++ b/templates/containers/chiselled/index.html @@ -177,7 +177,7 @@

.NET

-

JAVA

+

Java

@@ -194,7 +194,7 @@

JAVA

- +
JAVAJava
Eclipse Temurin From ed8f73d35aecf595a98d93965a515779fab32ac6 Mon Sep 17 00:00:00 2001 From: Akbar Abdrakhmanov Date: Fri, 8 Dec 2023 17:43:38 +0600 Subject: [PATCH 5/5] replace main image on /containers/chiselled page --- templates/containers/chiselled/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/containers/chiselled/index.html b/templates/containers/chiselled/index.html index b55764ab8a7..8e1dfe40e7e 100644 --- a/templates/containers/chiselled/index.html +++ b/templates/containers/chiselled/index.html @@ -57,7 +57,7 @@

Ultra-small, ultra-secure containerisation

- An image that demonstrates how chiselled Ubuntu works