From 2d29e8762525883cc114f7e69ef2b2b9032872c3 Mon Sep 17 00:00:00 2001 From: Seulkee Kang Date: Thu, 28 Sep 2023 17:50:55 +0100 Subject: [PATCH 01/24] vanilla upgrade --- package.json | 6 +++--- yarn.lock | 10 +++++----- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index fa5bd357..347b9f48 100644 --- a/package.json +++ b/package.json @@ -40,11 +40,11 @@ "postcss": "8.4.21", "postcss-cli": "8.3.1", "sass": "1.57.1", - "vanilla-framework": "2.37.1", + "terser-webpack-plugin": "5.3.6", + "vanilla-framework": "^4.3.0", "watch-cli": "0.2.3", "webpack": "5.75.0", - "webpack-cli": "4.10.0", - "terser-webpack-plugin": "5.3.6" + "webpack-cli": "4.10.0" }, "devDependencies": { "eslint": "7.32.0", diff --git a/yarn.lock b/yarn.lock index 9cf3b2ca..a8f1edf4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8203,11 +8203,6 @@ validate-npm-package-license@^3.0.1: spdx-correct "^3.0.0" spdx-expression-parse "^3.0.0" -vanilla-framework@2.37.1: - version "2.37.1" - resolved "https://registry.yarnpkg.com/vanilla-framework/-/vanilla-framework-2.37.1.tgz#4063fb21aa3b9c99e0ada4a052326b24df1ee06e" - integrity sha512-GEV/9BHfGnCeTpycdrT976uX0WGdKHnDOAwtaTuZZW6zwM+M/Za+E2q0yTpvoldzWtpksiFIIAk2VCuKjfjaqA== - vanilla-framework@3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/vanilla-framework/-/vanilla-framework-3.0.1.tgz#16a7f19ccb24f6b3885b6d176b5754113e4d9c0d" @@ -8220,6 +8215,11 @@ vanilla-framework@3.0.1: postcss-cli "9.1.0" sass "1.45.2" +vanilla-framework@^4.3.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/vanilla-framework/-/vanilla-framework-4.3.0.tgz#44850ba1e568646bd1144de25628f63758d749ce" + integrity sha512-CDFgUX7MMp3ZJoiE8nif/uSPD3YPaK0lWm8iru9tgIO/SloWzkGvG2G5NPllDnwF4cMMi7YxsK/ylz7mH7OgZA== + verbalize@^0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/verbalize/-/verbalize-0.1.2.tgz#165fda4640331548f8e990b1d7e14395eb720207" From fd315798b23df4ef4eae47ce5ac42efc6e8f5880 Mon Sep 17 00:00:00 2001 From: Seulkee Kang Date: Fri, 29 Sep 2023 14:59:29 +0100 Subject: [PATCH 02/24] make changes to support breakpoint from vanilla 4 --- static/sass/custom/_entities.scss | 2 +- static/sass/custom/_header.scss | 2 +- static/sass/custom/_homepage-hero-promo.scss | 2 +- static/sass/custom/_patterns_strips.scss | 4 ++-- static/sass/styles.scss | 4 ++-- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/static/sass/custom/_entities.scss b/static/sass/custom/_entities.scss index ca7dcab4..b6299d06 100644 --- a/static/sass/custom/_entities.scss +++ b/static/sass/custom/_entities.scss @@ -18,7 +18,7 @@ .entity { &__header { - @media (max-width: $breakpoint-medium) { + @media (max-width: $breakpoint-large - 1) { .series-tags { margin-bottom: 1rem; } diff --git a/static/sass/custom/_header.scss b/static/sass/custom/_header.scss index fedade2b..cbbca5ec 100644 --- a/static/sass/custom/_header.scss +++ b/static/sass/custom/_header.scss @@ -7,7 +7,7 @@ $breakpoint-navigation: 980px; order: 2; } -@media (min-width: $breakpoint-medium) and (max-width: $breakpoint-navigation) { +@media (min-width: 768px) and (max-width: $breakpoint-navigation) { .is-secondary-link { display: none !important; } diff --git a/static/sass/custom/_homepage-hero-promo.scss b/static/sass/custom/_homepage-hero-promo.scss index b1533890..5f8c01e2 100644 --- a/static/sass/custom/_homepage-hero-promo.scss +++ b/static/sass/custom/_homepage-hero-promo.scss @@ -1,7 +1,7 @@ // Homepage promo takeover .homepage-hero-promos { - @media (max-width: $breakpoint-medium) { + @media (max-width: $breakpoint-large - 1) { margin-top: 25vw; } diff --git a/static/sass/custom/_patterns_strips.scss b/static/sass/custom/_patterns_strips.scss index eaebfded..6a141465 100644 --- a/static/sass/custom/_patterns_strips.scss +++ b/static/sass/custom/_patterns_strips.scss @@ -163,7 +163,7 @@ background-repeat: no-repeat; background-size: 50% 100%, 20% 100%, 100% 100%, cover; - @media (max-width: $breakpoint-medium) { + @media (max-width: $breakpoint-large - 1) { background: #f0f5f7; } } @@ -192,7 +192,7 @@ background-repeat: no-repeat; background-size: 40% 100%, 80% 60%, 100% 100%; - @media (max-width: $breakpoint-medium) { + @media (max-width: $breakpoint-large - 1) { background: rgb(240, 245, 247); } } diff --git a/static/sass/styles.scss b/static/sass/styles.scss index 9d48764f..48dcc563 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -182,7 +182,7 @@ $color-experts-highlight: #e95420; // p-strip with bg image .has-image-bg { - @media (max-width: $breakpoint-medium) { + @media (max-width: $breakpoint-large - 1) { background: none !important; } } @@ -259,7 +259,7 @@ div .p-accordion__tab[aria-expanded] { } // Modelling steps on the homepage. -@media (min-width: $breakpoint-small) and (max-width: $breakpoint-medium) { +@media (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) { .step-block { display: flex; From c99292a6edf90b1bbb591bb1230d6595d1f8e186 Mon Sep 17 00:00:00 2001 From: Seulkee Kang Date: Tue, 3 Oct 2023 10:22:45 +0100 Subject: [PATCH 03/24] make changes to the navigation compatible to Juju and upgraded a canonical global nav --- package.json | 2 +- static/js/navigation.js | 50 ++++++++++ templates/_layout.html | 8 ++ templates/shared/header.html | 55 ++++++----- yarn.lock | 175 ++++------------------------------- 5 files changed, 109 insertions(+), 181 deletions(-) create mode 100644 static/js/navigation.js diff --git a/package.json b/package.json index 347b9f48..ace967b6 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "@babel/core": "7.20.12", "@babel/preset-env": "7.20.2", "@canonical/cookie-policy": "3.4.0", - "@canonical/global-nav": "2.7.0", + "@canonical/global-nav": "3.6.0", "@canonical/latest-news": "1.4.1", "@sentry/browser": "5.30.0", "autoprefixer": "10.4.13", diff --git a/static/js/navigation.js b/static/js/navigation.js new file mode 100644 index 00000000..206b0f22 --- /dev/null +++ b/static/js/navigation.js @@ -0,0 +1,50 @@ +function toggleDropdown(toggle, open) { + const parentElement = toggle.parentNode; + const dropdown = document.getElementById( + toggle.getAttribute("aria-controls") + ); + dropdown.setAttribute("aria-hidden", !open); + + if (open) { + parentElement.classList.add("is-active", "is-selected"); + } else { + parentElement.classList.remove("is-active", "is-selected"); + } +} + +function closeAllDropdowns(toggles) { + toggles.forEach((toggle) => { + toggleDropdown(toggle, false); + }); +} + +function handleClickOutside(toggles, containerClass) { + document.addEventListener("click", (event) => { + const {target} = event; + + if (target.closest) { + if (!target.closest(containerClass)) { + closeAllDropdowns(toggles); + } + } + }); +} + +function initNavDropdowns(containerClass) { + const toggles = [].slice.call( + document.querySelectorAll(`${containerClass } [aria-controls]`) + ); + + handleClickOutside(toggles, containerClass); + + toggles.forEach((toggle) => { + toggle.addEventListener("click", (e) => { + e.preventDefault(); + + const isOpen = e.target.parentNode.classList.contains("is-active"); + + closeAllDropdowns(toggles); + toggleDropdown(toggle, !isOpen); + }); + }); +} diff --git a/templates/_layout.html b/templates/_layout.html index 61f937e7..4dfc0ce2 100644 --- a/templates/_layout.html +++ b/templates/_layout.html @@ -46,10 +46,18 @@ {% include 'shared/header.html' %} + + + +
{% block content %}{% endblock content %}
+ - - -
-
-
- -
-
-

Choose

-
-
-

Bundles are collections of charms that link services together, so you can deploy whole chunks of infrastructure in one go.

- +
+
+
+
+
+
+
JIMM
-
-

Charms contain scripts that simplify the deployment and management of a service.

- +
+

the Juju Infinite Model Manager is a single point of contact for multiple Juju controllers

-
-

Model

-
-
-

With Juju, relationships between linked charms are formed automatically.

-

- {{ - image( - url="https://assets.ubuntu.com/v1/fc0ccef5-model-canvas-2x.png", - alt="Linked charms", - width="300", - height="235", - hi_def=True, - ) | safe - }} -

+
+
+
+
+
+
+
+
+
Dashboard
-
-

Easily configure charms via the inspector.

-

- {{ - image( - url="https://assets.ubuntu.com/v1/8d6efbaa-model-config-2x.png", - alt="Inspector screenshot", - width="307", - height="247", - hi_def=True, - ) | safe - }} -

+
+

a graphical user interface to simplify common administrative operations

-
-
-

Deploy

-
-
-

Deploy and redeploy to all major public clouds or locally on your own hardware.

-

- {{ - image( - url="https://assets.ubuntu.com/v1/78c1ad70-deploy-logos-2x.png", - alt="Public cloud logos", - width="326", - height="235", - hi_def=True, - ) | safe - }} -

-
-
-

Monitor, maintain and scale on demand.

-

- {{ - image( - url="https://assets.ubuntu.com/v1/ff83e81e-deploy-new-units-2x.png", - alt="New units screenshot", - width="326", - height="235", - hi_def=True, - ) | safe - }} -

+
+
+ {{ image( + url="https://assets.ubuntu.com/v1/362eb38e-jass_landing_page.svg", + alt="", + height="514", + width="1072", + hi_def=True, + loading="auto", + ) | safe + }}
-
-
-

Browse the store

-
+ +
+
+
-
- -
-
-

Why use Juju?

+
+

Add visibility, auditing and compliance controls to your Juju deployment

+
+
+

JAAS is your centralised enterprise control plane for Juju deployments. With JAAS you can:

+ +
-
- {{ - image( - url="https://assets.ubuntu.com/v1/4c62db97-why-use-juju-diagram-left.svg", - alt="Diagram on 'Why use Juju (Part 1)", - width="440", - height="789", - hi_def=True, - ) | safe - }} +
+
+ +
-
- {{ - image( - url="https://assets.ubuntu.com/v1/a018d25e-why-use-juju-diagram-right.svg", - alt="Diagram on 'Why use Juju (Part 2)", - width="440", - height="779", +
+
+ {{ image( + url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", + alt="", + height="588", + width="1031", + hi_def=True, + loading="auto", + attrs={ + "class": "homepage-tabs-logo", + }, + ) | safe + }} +

Drill down to view the details of everything that is deployed inside a model, such as applications, integrations, units, and more.

+
+
+ {{ image( + url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", + alt="", + height="588", + width="1031", hi_def=True, + loading="auto", + attrs={ + "class": "homepage-tabs-logo", + }, ) | safe - }} -
-
-
-
-
-

Whether it involves deep learning, container orchestration, real-time big data or stream processing, big software needs operations to be open source and automated.

-

Juju is the best way to encapsulate all the ops knowledge required to automate the behaviour of your application.

+ }} +

Execute Juju action from the UI and view the resulting logs to confirm their status.

-
-
-
-

How it works

+
+ {{ image( + url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", + alt="", + height="588", + width="1031", + hi_def=True, + loading="auto", + attrs={ + "class": "homepage-tabs-logo", + }, + ) | safe + }} +

Perform common administrative operations and apply machine configurations.

-
-
-
- -
-
-
-

Join the movement

-
-
-
-
-

Connect

-

Join the Juju community on our Discourse forum.

-
-
-

Collaborate

-
-
-
- GitHub logo -

- - Juju on GitHub - -

-
+
+ {{ image( + url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", + alt="", + height="588", + width="1031", + hi_def=True, + loading="auto", + attrs={ + "class": "homepage-tabs-logo", + }, + ) | safe + }} +

Onboard controllers and add, remove or manage user access to models and controllers.

+
+
+ {{ image( + url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", + alt="", + height="588", + width="1031", + hi_def=True, + loading="auto", + attrs={ + "class": "homepage-tabs-logo", + }, + ) | safe + }} +

Access the logs from your deployment in a single, centralised location.

+
+
+ {{ image( + url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", + alt="", + height="588", + width="1031", + hi_def=True, + loading="auto", + attrs={ + "class": "homepage-tabs-logo", + }, + ) | safe + }} +

Perform complex searches/filters through your entire deployment and share the result through a unique URL.

-
-

Ask the community

-

Find out more, get help or ask any question on our Discourse

+
+
+
+
-
-
- -
-
-
-

What people are saying about Juju

-
-
-
- -
-
-
-
- Spicule logo -

Using the modelling ethos brought by Juju allows me to quickly run big data - applications in a multitude of places. Be it locally on my laptop, on bare metal or in the Cloud, Juju lets me reuse - the same models and code without changing any aspects of my deployment.

- Tom Barber, Spicule LTD -
-
-
-
- Ghent University logo -

Juju enables you to encapsulate each different part of your infrastructure and lets everything talk to each other. So if you have a web server that's managed by Chef and a database that's deployed by a Docker container, you can have - the web server talk to the database and the relations between these two very easily.

- Merlijn Sebrechts, Ghent University -
-
-
-
- Epam logo -

Juju acts as a thin layer on top of your infrastructure that allows all your operational code to talk to each other. And because of this communication layer, a lot of the problems that conventional configuration management systems have just don't exist anymore.

- Konstantin Boudnik, EPAM Systems -
-
-
-
- -
-
-
-

Our case studies show how people are using Juju and JAAS

-

Read our case studies about Juju and JAAS on big data, containers, Kubernetes, public and private clouds.

-
- Read our case studies +
+
+

Deploy and manage charms across public clouds, Kubernetes and VMs

+
+
+

Jaas helps you to manage your distributed applications across any infrastructure.

+

Thanks to Juju you can automate your system’s lifecycle management across public clouds, Kubernetes, virtual (VM) and bare metal machines.

-
- {{ - image( - url="https://assets.ubuntu.com/v1/1d18743d-SpiculeWebinar.png", - alt="How to harness big data promo", - width="630", - height="355", - hi_def=True, - ) | safe - }} -
-
-
- - -
-
-
-

Users and contributors

-
-
+ +
+
+
+
+
+
+

JAAS is available through Ubuntu Pro

+
+
+

You can deploy JAAS on your infrastructure with an Ubuntu Pro subscription.

+

Ubuntu Pro is a comprehensive subscription from Canonical which includes:

+
+
+
+
    +
  • JAAS charms and sample Terraform plan
    • +
  • Access to our world-class technical team and knowledge base
    • +
  • Security patching for all your software
    • +
  • Option of a dedicated Canonical support engineer on your premises
    • +
  • 24/7 phone, portal and email support (optional)
    • +
+

+ Get JAAS with an Ubuntu Pro subscription +

+
+
+
+
+
+
+
+
+
+

Learn more about Juju

+
+
+
+
+
+
+
+

Read more

+
+
+

+ Juju documentation +

+
+

+ Charm SDK documentation +

+
+

+ What is a software operator? +

+
+

+ Software operators explained +

+
+
+
+
+
+
+
+

Connect with the community

+
+
+

+ Charmhub chat +

+
+

+ Discourse forum +

+
+
+
+
+
+
+
+

Contact us

+
+
+

+ Contact us +

+
+
+
+
+ + + const targetPanel = document.querySelector(panelLink.getAttribute("href")); + activePanelLink.classList.remove("is-active"); + activePanel.classList.add("u-hide"); + panelLink.classList.add("is-active"); + targetPanel.classList.remove("u-hide"); + }); + }); + {% endblock content %} From 939c7dde741df22f0b5f24986ef7c4a13c5035e9 Mon Sep 17 00:00:00 2001 From: Seulkee Kang Date: Wed, 4 Oct 2023 10:10:51 +0100 Subject: [PATCH 06/24] add side navigation buttons --- static/sass/styles.scss | 7 +++ templates/jaasai/index.html | 104 +++++++++++++++++++++++++----------- 2 files changed, 79 insertions(+), 32 deletions(-) diff --git a/static/sass/styles.scss b/static/sass/styles.scss index cac13286..05184ecb 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -78,6 +78,13 @@ $breakpoint-navigation-threshold: $breakpoint-large; } } +.homepage-tabs { + @media only screen and (min-width: $breakpoint-large) { + margin-top: 88px; + } +} + + .p-icon--github-white { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDI0IiBoZWlnaHQ9Ijk5OSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNTEyIDBDMjI5LjI1IDAgMCAyMjkuMjUgMCA1MTJjMCAyMjYuMjUgMTQ2LjY5IDQxOC4xMiAzNTAuMTYgNDg1LjgxIDI1LjU5IDQuNjkgMzQuOTMtMTEuMTIgMzQuOTMtMjQuNjIgMC0xMi4xOS0uNDctNTIuNTctLjcxLTk1LjMxQzI0MiA5MDguODEgMjExLjkxIDgxNy41IDIxMS45MSA4MTcuNWMtMjMuMzItNTkuMTItNTYuODUtNzQuODgtNTYuODUtNzQuODgtNDYuNTMtMzEuNzQgMy41My0zMS4xMiAzLjUzLTMxLjEyIDUxLjQxIDMuNTYgNzguNDcgNTIuNzUgNzguNDcgNTIuNzUgNDUuNjkgNzguMjUgMTE5Ljg4IDU1LjYzIDE0OSA0Mi41IDQuNjYtMzMgMTcuOTEtNTUuNjMgMzIuNS02OC4zNy0xMTMuNjUtMTIuOTQtMjMzLjIyLTU2Ljg4LTIzMy4yMi0yNTMuMDcgMC01NS45NCAxOS45Ny0xMDEuNTYgNTIuNjYtMTM3LjQtNS4yMi0xMy0yMi44NC02NS4xIDUuMDYtMTM1LjU3IDAgMCA0Mi45NC0xMy43NSAxNDAuODEgNTIuNSA0MC44Mi0xMS40IDg0LjYtMTcuMDMgMTI4LjEzLTE3LjIyIDQzLjUuMTkgODcuMzEgNS44OCAxMjguMTkgMTcuMjkgOTcuNjktNjYuMzIgMTQwLjY5LTUyLjUgMTQwLjY5LTUyLjUgMjggNzAuNTMgMTAuMzcgMTIyLjU2IDUuMTIgMTM1LjUgMzIuODEgMzUuODQgNTIuNjIgODEuNDcgNTIuNjIgMTM3LjQgMCAxOTYuNjktMTE5Ljc0IDI0MC0yMzMuODEgMjUyLjY5IDE4LjQ0IDE1Ljg4IDM0Ljc1IDQ3IDM0Ljc1IDk0Ljc1IDAgNjguNDQtLjY4IDEyMy42My0uNjggMTQwLjUgMCAxMy42MyA5LjMxIDI5LjU1IDM1LjI0IDI0LjU2Qzg3Ny40NCA5MzAgMTAyNCA3MzguMTIgMTAyNCA1MTIgMTAyNCAyMjkuMjUgNzk0Ljc1IDAgNTEyIDB6Ii8+PC9zdmc+Cg=="); } diff --git a/templates/jaasai/index.html b/templates/jaasai/index.html index 490897ad..a308b11d 100644 --- a/templates/jaasai/index.html +++ b/templates/jaasai/index.html @@ -250,7 +250,7 @@

Add visibility, auditing and compliance controls to your Juju deployment

-
+
{{ image( url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", @@ -259,13 +259,14 @@

Add visibility, auditing and compliance controls to your Juju deployment

Drill down to view the details of everything that is deployed inside a model, such as applications, integrations, units, and more.

+
+ + +
{{ image( url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", @@ -274,9 +275,6 @@

Add visibility, auditing and compliance controls to your Juju deployment

Execute Juju action from the UI and view the resulting logs to confirm their status.

@@ -289,9 +287,6 @@

Add visibility, auditing and compliance controls to your Juju deployment

Perform common administrative operations and apply machine configurations.

@@ -304,9 +299,6 @@

Add visibility, auditing and compliance controls to your Juju deployment

Onboard controllers and add, remove or manage user access to models and controllers.

@@ -319,9 +311,6 @@

Add visibility, auditing and compliance controls to your Juju deployment

Access the logs from your deployment in a single, centralised location.

@@ -334,9 +323,6 @@

Add visibility, auditing and compliance controls to your Juju deployment

Perform complex searches/filters through your entire deployment and share the result through a unique URL.

@@ -528,24 +514,78 @@

Contact us

{% endblock content %} From 452ad4c23d3563ac4ccd4e0db0ceee96bd614705 Mon Sep 17 00:00:00 2001 From: Seulkee Kang Date: Wed, 4 Oct 2023 11:51:51 +0100 Subject: [PATCH 07/24] added global nav and moved side navigation to the top --- templates/_layout.html | 1 - templates/jaasai/index.html | 2 +- templates/shared/header.html | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/templates/_layout.html b/templates/_layout.html index 7c0bfe35..76c9d68e 100644 --- a/templates/_layout.html +++ b/templates/_layout.html @@ -49,7 +49,6 @@ diff --git a/templates/jaasai/index.html b/templates/jaasai/index.html index a308b11d..72c40d6d 100644 --- a/templates/jaasai/index.html +++ b/templates/jaasai/index.html @@ -227,7 +227,7 @@

Add visibility, auditing and compliance controls to your Juju deployment

-
+
  • View models and controllers details diff --git a/templates/shared/header.html b/templates/shared/header.html index 71b2c58c..f9ef9530 100644 --- a/templates/shared/header.html +++ b/templates/shared/header.html @@ -49,7 +49,7 @@
-
-
- {{ image( +
+
+ {{ image( + url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", + alt="", + height="588", + width="1031", + hi_def=True, + loading="auto", + ) | safe + }} +

Drill down to view the details of everything that is deployed inside a model, such as applications, integrations, units, and more.

+
+
+ {{ image( url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", alt="", height="588", @@ -260,73 +273,62 @@

Add visibility, auditing and compliance controls to your Juju deployment

Drill down to view the details of everything that is deployed inside a model, such as applications, integrations, units, and more.

+ }} +

Execute Juju action from the UI and view the resulting logs to confirm their status.

+
+
+ {{ image( + url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", + alt="", + height="588", + width="1031", + hi_def=True, + loading="auto", + ) | safe + }} +

Perform common administrative operations and apply machine configurations.

+
+
+ {{ image( + url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", + alt="", + height="588", + width="1031", + hi_def=True, + loading="auto", + ) | safe + }} +

Onboard controllers and add, remove or manage user access to models and controllers.

+
+
+ {{ image( + url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", + alt="", + height="588", + width="1031", + hi_def=True, + loading="auto", + ) | safe + }} +

Access the logs from your deployment in a single, centralised location.

+
+
+ {{ image( + url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", + alt="", + height="588", + width="1031", + hi_def=True, + loading="auto", + ) | safe + }} +

Perform complex searches/filters through your entire deployment and share the result through a unique URL.

+
-
- {{ image( - url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", - alt="", - height="588", - width="1031", - hi_def=True, - loading="auto", - ) | safe - }} -

Execute Juju action from the UI and view the resulting logs to confirm their status.

-
-
- {{ image( - url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", - alt="", - height="588", - width="1031", - hi_def=True, - loading="auto", - ) | safe - }} -

Perform common administrative operations and apply machine configurations.

-
-
- {{ image( - url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", - alt="", - height="588", - width="1031", - hi_def=True, - loading="auto", - ) | safe - }} -

Onboard controllers and add, remove or manage user access to models and controllers.

-
-
- {{ image( - url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", - alt="", - height="588", - width="1031", - hi_def=True, - loading="auto", - ) | safe - }} -

Access the logs from your deployment in a single, centralised location.

-
-
- {{ image( - url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", - alt="", - height="588", - width="1031", - hi_def=True, - loading="auto", - ) | safe - }} -

Perform complex searches/filters through your entire deployment and share the result through a unique URL.

-
@@ -534,7 +536,7 @@

Contact us

}); }); - const tabs = document.querySelectorAll('.homepage-tabs-content > .row:not(.homepage-tabs-button)'); + const tabs = document.querySelectorAll('.homepage-tabs-content .tabs-content-wrapper > .row'); const navItems = document.querySelectorAll('.p-side-navigation__item'); const images = [ 'https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg', @@ -550,24 +552,24 @@

Contact us

} function handlePrevious() { - if (currentTab > 0) { - currentTab--; - showTab(currentTab); + if (currentTab > 0) { + currentTab--; + showTab(currentTab); - const targetPanelLink = document.querySelector(`[data-js='panel-link'][href='#${tabs[currentTab].id}']`); - activatePanel(targetPanelLink); - } + const targetPanelLink = document.querySelector(`[data-js='panel-link'][href='#${tabs[currentTab].id}']`); + activatePanel(targetPanelLink); } + } function handleNext() { - if (currentTab < tabs.length - 1) { - currentTab++; - showTab(currentTab); + if (currentTab < tabs.length - 1) { + currentTab++; + showTab(currentTab); - const targetPanelLink = document.querySelector(`[data-js='panel-link'][href='#${tabs[currentTab].id}']`); - activatePanel(targetPanelLink); - } + const targetPanelLink = document.querySelector(`[data-js='panel-link'][href='#${tabs[currentTab].id}']`); + activatePanel(targetPanelLink); } + } function updateNavigation(index) { navItems.forEach(item => item.classList.remove('is-active')); @@ -586,6 +588,5 @@

Contact us

prevBtn.addEventListener('click', handlePrevious); nextBtn.addEventListener('click', handleNext); - {% endblock content %} From 224d553754dc0955ce808be8ac195816118fee66 Mon Sep 17 00:00:00 2001 From: Seulkee Kang Date: Wed, 4 Oct 2023 13:07:07 +0100 Subject: [PATCH 09/24] changes for linting --- static/sass/styles.scss | 37 +++++++++++++++++++------------------ 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/static/sass/styles.scss b/static/sass/styles.scss index 06bb73bc..727b8fa6 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -66,6 +66,25 @@ $breakpoint-navigation-threshold: $breakpoint-large; } } +.play-video-cta { + display: inline-block; + position: relative; + + a { + padding-right: 2rem; + } + + &::after { + content: url('https://assets.ubuntu.com/v1/0d85260e-play-icon.svg'); + display: inline-block; + height: 1rem; + position: absolute; + right: 0.5rem; + top: 0.15rem; + width: 1rem; + } +} + .footer { background-color: #222; @@ -98,24 +117,6 @@ $breakpoint-navigation-threshold: $breakpoint-large; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDI0IiBoZWlnaHQ9Ijk5OSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNTEyIDBDMjI5LjI1IDAgMCAyMjkuMjUgMCA1MTJjMCAyMjYuMjUgMTQ2LjY5IDQxOC4xMiAzNTAuMTYgNDg1LjgxIDI1LjU5IDQuNjkgMzQuOTMtMTEuMTIgMzQuOTMtMjQuNjIgMC0xMi4xOS0uNDctNTIuNTctLjcxLTk1LjMxQzI0MiA5MDguODEgMjExLjkxIDgxNy41IDIxMS45MSA4MTcuNWMtMjMuMzItNTkuMTItNTYuODUtNzQuODgtNTYuODUtNzQuODgtNDYuNTMtMzEuNzQgMy41My0zMS4xMiAzLjUzLTMxLjEyIDUxLjQxIDMuNTYgNzguNDcgNTIuNzUgNzguNDcgNTIuNzUgNDUuNjkgNzguMjUgMTE5Ljg4IDU1LjYzIDE0OSA0Mi41IDQuNjYtMzMgMTcuOTEtNTUuNjMgMzIuNS02OC4zNy0xMTMuNjUtMTIuOTQtMjMzLjIyLTU2Ljg4LTIzMy4yMi0yNTMuMDcgMC01NS45NCAxOS45Ny0xMDEuNTYgNTIuNjYtMTM3LjQtNS4yMi0xMy0yMi44NC02NS4xIDUuMDYtMTM1LjU3IDAgMCA0Mi45NC0xMy43NSAxNDAuODEgNTIuNSA0MC44Mi0xMS40IDg0LjYtMTcuMDMgMTI4LjEzLTE3LjIyIDQzLjUuMTkgODcuMzEgNS44OCAxMjguMTkgMTcuMjkgOTcuNjktNjYuMzIgMTQwLjY5LTUyLjUgMTQwLjY5LTUyLjUgMjggNzAuNTMgMTAuMzcgMTIyLjU2IDUuMTIgMTM1LjUgMzIuODEgMzUuODQgNTIuNjIgODEuNDcgNTIuNjIgMTM3LjQgMCAxOTYuNjktMTE5Ljc0IDI0MC0yMzMuODEgMjUyLjY5IDE4LjQ0IDE1Ljg4IDM0Ljc1IDQ3IDM0Ljc1IDk0Ljc1IDAgNjguNDQtLjY4IDEyMy42My0uNjggMTQwLjUgMCAxMy42MyA5LjMxIDI5LjU1IDM1LjI0IDI0LjU2Qzg3Ny40NCA5MzAgMTAyNCA3MzguMTIgMTAyNCA1MTIgMTAyNCAyMjkuMjUgNzk0Ljc1IDAgNTEyIDB6Ii8+PC9zdmc+Cg=="); } -.play-video-cta { - display: inline-block; - position: relative; - - a { - padding-right: 2rem; - } - - &::after { - content: url('https://assets.ubuntu.com/v1/0d85260e-play-icon.svg'); - display: inline-block; - height: 1rem; - position: absolute; - right: 0.5rem; - top: 0.15rem; - width: 1rem; - } -} // experts expert-cards $color-experts-highlight: #e95420; From 39fd82d05af14b19874036ba60fa202b77a13d3f Mon Sep 17 00:00:00 2001 From: Seulkee Kang Date: Wed, 4 Oct 2023 14:09:11 +0100 Subject: [PATCH 10/24] add linting plugin configuration --- .stylelintrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.stylelintrc b/.stylelintrc index 41d359ea..0988f134 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -6,7 +6,7 @@ "rules": { "order/properties-alphabetical-order": true, "at-rule-no-unknown": [ true, { - "ignoreAtRules": ["extend", "include"] + "ignoreAtRules": ["extend", "include", "mixin"] } ], } } From 2dc8ca442c573f872d27b36dae65ae1d2357c22c Mon Sep 17 00:00:00 2001 From: Seulkee Kang Date: Wed, 4 Oct 2023 14:13:42 +0100 Subject: [PATCH 11/24] fixed trailing comma error --- .stylelintrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.stylelintrc b/.stylelintrc index 0988f134..4245296e 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -7,6 +7,6 @@ "order/properties-alphabetical-order": true, "at-rule-no-unknown": [ true, { "ignoreAtRules": ["extend", "include", "mixin"] - } ], + } ] } } From bfbde289bba04cd3ab6b38bec09d6788f4f2ba27 Mon Sep 17 00:00:00 2001 From: Seulkee Kang Date: Wed, 4 Oct 2023 14:16:56 +0100 Subject: [PATCH 12/24] removed Your models link from the navigation --- templates/shared/header.html | 3 --- 1 file changed, 3 deletions(-) diff --git a/templates/shared/header.html b/templates/shared/header.html index f9ef9530..5d80f64d 100644 --- a/templates/shared/header.html +++ b/templates/shared/header.html @@ -50,9 +50,6 @@
From b2e8fb59802cd8960c8e19614ed63f86ee5c1cb3 Mon Sep 17 00:00:00 2001 From: Seulkee Kang Date: Thu, 5 Oct 2023 14:37:37 +0100 Subject: [PATCH 13/24] align logos and side navigation tab content changes --- templates/jaasai/index.html | 69 +++++++++++++++++-------------------- 1 file changed, 31 insertions(+), 38 deletions(-) diff --git a/templates/jaasai/index.html b/templates/jaasai/index.html index 4635579a..6a258477 100644 --- a/templates/jaasai/index.html +++ b/templates/jaasai/index.html @@ -216,11 +216,9 @@
Dashboard
-
+

Add visibility, auditing and compliance controls to your Juju deployment

-
-
-

JAAS is your centralised enterprise control plane for Juju deployments. With JAAS you can:

+

JAAS is your centralised enterprise control plane for Juju deployments. With JAAS you can:

@@ -266,7 +264,7 @@

Add visibility, auditing and compliance controls to your Juju deployment

{{ image( - url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", + url="https://assets.ubuntu.com/v1/cbdd4b4d-jass_landing_page_run_actions.png", alt="", height="588", width="1031", @@ -278,7 +276,7 @@

Add visibility, auditing and compliance controls to your Juju deployment

{{ image( - url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", + url="https://assets.ubuntu.com/v1/e007d906-jass_landing_page_configuration_applications.png", alt="", height="588", width="1031", @@ -290,7 +288,7 @@

Add visibility, auditing and compliance controls to your Juju deployment

{{ image( - url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", + url="https://assets.ubuntu.com/v1/ef7388c3-jaas_landing_page_onboard_controllers.png", alt="", height="588", width="1031", @@ -302,7 +300,7 @@

Add visibility, auditing and compliance controls to your Juju deployment

{{ image( - url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", + url="https://assets.ubuntu.com/v1/ebb8844c-jaas_landing_page_run_audits.png", alt="", height="588", width="1031", @@ -314,10 +312,10 @@

Add visibility, auditing and compliance controls to your Juju deployment

{{ image( - url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", + url="https://assets.ubuntu.com/v1/b90ee3e2-jaas_landing_page_search_and_filter.png", alt="", - height="588", - width="1031", + height="350", + width="200", hi_def=True, loading="auto", ) | safe @@ -343,32 +341,30 @@

Deploy and manage charms across public clouds, Kubernetes and VMs

Jaas helps you to manage your distributed applications across any infrastructure.

Thanks to Juju you can automate your system’s lifecycle management across public clouds, Kubernetes, virtual (VM) and bare metal machines.

+
-
- -
  • @@ -538,9 +534,6 @@

    Contact us

    const tabs = document.querySelectorAll('.homepage-tabs-content .tabs-content-wrapper > .row'); const navItems = document.querySelectorAll('.p-side-navigation__item'); - const images = [ - 'https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg', - ]; let currentTab = 0; From 57a7fdebab131a50104af2963c2e61eaaef69795 Mon Sep 17 00:00:00 2001 From: Seulkee Kang Date: Fri, 6 Oct 2023 12:59:30 +0100 Subject: [PATCH 14/24] update images and change the ratio of texts --- templates/jaasai/index.html | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/templates/jaasai/index.html b/templates/jaasai/index.html index 6a258477..c4e21a29 100644 --- a/templates/jaasai/index.html +++ b/templates/jaasai/index.html @@ -216,15 +216,17 @@
    Dashboard
-
+

Add visibility, auditing and compliance controls to your Juju deployment

+
+

JAAS is your centralised enterprise control plane for Juju deployments. With JAAS you can:

-
+
  • @@ -248,11 +250,11 @@

    Add visibility, auditing and compliance controls to your Juju deployment

-
+
{{ image( - url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg", + url="https://assets.ubuntu.com/v1/ddb3a5a4-jaas_landing_page_integrations.png", alt="", height="588", width="1031", @@ -260,11 +262,11 @@

Add visibility, auditing and compliance controls to your Juju deployment

Drill down to view the details of everything that is deployed inside a model, such as applications, integrations, units, and more.

+

Drill down to view the details of everything that is deployed inside a model, such as applications, integrations, units, and more.

{{ image( - url="https://assets.ubuntu.com/v1/cbdd4b4d-jass_landing_page_run_actions.png", + url="https://assets.ubuntu.com/v1/9ebc2a50-jass_landing_page_run_actions.png", alt="", height="588", width="1031", @@ -276,7 +278,7 @@

Add visibility, auditing and compliance controls to your Juju deployment

{{ image( - url="https://assets.ubuntu.com/v1/e007d906-jass_landing_page_configuration_applications.png", + url="https://assets.ubuntu.com/v1/e5c2fb04-jaas_landing_page_configure_applications.png", alt="", height="588", width="1031", @@ -288,7 +290,7 @@

Add visibility, auditing and compliance controls to your Juju deployment

{{ image( - url="https://assets.ubuntu.com/v1/ef7388c3-jaas_landing_page_onboard_controllers.png", + url="https://assets.ubuntu.com/v1/28442c33-jaas_landing_page_controllers.png", alt="", height="588", width="1031", @@ -300,7 +302,7 @@

Add visibility, auditing and compliance controls to your Juju deployment

{{ image( - url="https://assets.ubuntu.com/v1/ebb8844c-jaas_landing_page_run_audits.png", + url="https://assets.ubuntu.com/v1/28e88a31-jaas_landing_page_run_audits.png", alt="", height="588", width="1031", @@ -312,15 +314,15 @@

Add visibility, auditing and compliance controls to your Juju deployment

{{ image( - url="https://assets.ubuntu.com/v1/b90ee3e2-jaas_landing_page_search_and_filter.png", + url="https://assets.ubuntu.com/v1/3bdce1f1-Jass_landing_page_search_and_filter.png", alt="", - height="350", - width="200", + height="588", + width="1031", hi_def=True, loading="auto", ) | safe }} -

Perform complex searches/filters through your entire deployment and share the result through a unique URL.

+

Perform complex searches/filters through your entire deployment and share the result through a unique URL.

From cec0eeab4f55b8fcda3ba8982a5e95d6f475ebcc Mon Sep 17 00:00:00 2001 From: Seulkee Kang Date: Fri, 6 Oct 2023 14:13:55 +0100 Subject: [PATCH 15/24] change side navigation buttion status --- templates/jaasai/index.html | 90 ++++++++++++++----------------------- 1 file changed, 33 insertions(+), 57 deletions(-) diff --git a/templates/jaasai/index.html b/templates/jaasai/index.html index c4e21a29..6050aceb 100644 --- a/templates/jaasai/index.html +++ b/templates/jaasai/index.html @@ -513,75 +513,51 @@

Contact us

{% endblock content %} From c3fd3aadc2eb365f413c792ea64536139e435f4d Mon Sep 17 00:00:00 2001 From: Seulkee Kang Date: Fri, 6 Oct 2023 15:09:48 +0100 Subject: [PATCH 16/24] update the image for search and filter tab --- templates/jaasai/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/jaasai/index.html b/templates/jaasai/index.html index 6050aceb..83ccda14 100644 --- a/templates/jaasai/index.html +++ b/templates/jaasai/index.html @@ -314,7 +314,7 @@

Add visibility, auditing and compliance controls to your Juju deployment

{{ image( - url="https://assets.ubuntu.com/v1/3bdce1f1-Jass_landing_page_search_and_filter.png", + url="https://assets.ubuntu.com/v1/0a0fc6ba-jaas_landing_page_search_and_filter_final.png", alt="", height="588", width="1031", From 5b324ae78ffd3a7c71154db79e377e2347b3303e Mon Sep 17 00:00:00 2001 From: Seulkee Kang Date: Fri, 6 Oct 2023 17:50:53 +0100 Subject: [PATCH 17/24] change indentation --- templates/jaasai/index.html | 76 ++++++++++++++++++------------------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/templates/jaasai/index.html b/templates/jaasai/index.html index 83ccda14..87791fef 100644 --- a/templates/jaasai/index.html +++ b/templates/jaasai/index.html @@ -513,51 +513,51 @@

Contact us

{% endblock content %} From 5d3ebbf88bac1ac04f4d4a54cbabfc6c6d859eeb Mon Sep 17 00:00:00 2001 From: Seulkee Kang Date: Mon, 9 Oct 2023 12:09:47 +0100 Subject: [PATCH 18/24] update the image with a transparent background --- templates/jaasai/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/jaasai/index.html b/templates/jaasai/index.html index 87791fef..28e4e8e4 100644 --- a/templates/jaasai/index.html +++ b/templates/jaasai/index.html @@ -198,7 +198,7 @@
Dashboard
{{ image( - url="https://assets.ubuntu.com/v1/362eb38e-jass_landing_page.svg", + url="https://assets.ubuntu.com/v1/cae5250f-Jaas.png", alt="", height="514", width="1072", From 4fe0436ccb0f3fd5f4b2c272eb1da624a285e9e6 Mon Sep 17 00:00:00 2001 From: Seulkee Kang Date: Tue, 10 Oct 2023 10:00:44 +0100 Subject: [PATCH 19/24] change a position of a paragraph --- templates/jaasai/index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/templates/jaasai/index.html b/templates/jaasai/index.html index 28e4e8e4..50c7badb 100644 --- a/templates/jaasai/index.html +++ b/templates/jaasai/index.html @@ -219,7 +219,9 @@
Dashboard

Add visibility, auditing and compliance controls to your Juju deployment

-
+
+
+

JAAS is your centralised enterprise control plane for Juju deployments. With JAAS you can:

From 392f682025c8be0e5976d6ae15fb8d88f698593f Mon Sep 17 00:00:00 2001 From: Seulkee Kang Date: Tue, 10 Oct 2023 13:26:08 +0100 Subject: [PATCH 20/24] add a contact us modal --- templates/jaasai/index.html | 70 ++++++++++++++++++++++++++++++++++++- 1 file changed, 69 insertions(+), 1 deletion(-) diff --git a/templates/jaasai/index.html b/templates/jaasai/index.html index 50c7badb..d4116299 100644 --- a/templates/jaasai/index.html +++ b/templates/jaasai/index.html @@ -506,13 +506,60 @@

Contact us

- Contact us +

+ + + {% endblock content %} From 95b6b3ee7b8c45266c72a93a3b2af47f29cdc9ad Mon Sep 17 00:00:00 2001 From: Seulkee Kang Date: Tue, 10 Oct 2023 13:28:37 +0100 Subject: [PATCH 21/24] add a comment for side navigation and panels --- templates/jaasai/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/templates/jaasai/index.html b/templates/jaasai/index.html index d4116299..f41d0f4a 100644 --- a/templates/jaasai/index.html +++ b/templates/jaasai/index.html @@ -561,6 +561,7 @@

Get in touch