@@ -103,7 +101,7 @@
>
- Validate the environment & Install {{.AppTitle}}
+ Validate the environment & install {{.AppTitle}}
- Validate the environment & Install {{.AppTitle}}
+ Validate the environment & install {{.AppTitle}}
-
-
Bypass browser TLS warning
We use a self-signed SSL/TLS Certificate to secure the communication between your local machine and the Admin Console @@ -124,7 +121,12 @@
-
+
+ +
+@@ -132,7 +134,7 @@
-
- Click here to verify the - certificate's authenticity (optional) +
+ 
+ 
+ Verify the certificate's authenticity (optional)
+
+
-
- Verify the certificate’s authenticity (optional) - hide -
-
+
-
-
Where to run this script....
++ Run this command on the host to calculate the + certificate's fingerprint. +
@@ -169,7 +182,7 @@
-
Expected SHA Fingerprint
+Expected fingerprint
{{ .fingerprintSHA1 }}
@@ -177,13 +190,13 @@
+
@@ -200,23 +213,22 @@
" 2>/dev/null | openssl x509 -noout -fingerprint";
diff --git a/kurl_proxy/assets/output.css b/kurl_proxy/assets/output.css
index 06a2edb26c..554bb2d275 100644
--- a/kurl_proxy/assets/output.css
+++ b/kurl_proxy/assets/output.css
@@ -1,4 +1,6 @@
-*, ::before, ::after {
+*,
+::before,
+::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
@@ -8,19 +10,19 @@
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
- --tw-pan-x: ;
- --tw-pan-y: ;
- --tw-pinch-zoom: ;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
- --tw-gradient-from-position: ;
- --tw-gradient-via-position: ;
- --tw-gradient-to-position: ;
- --tw-ordinal: ;
- --tw-slashed-zero: ;
- --tw-numeric-figure: ;
- --tw-numeric-spacing: ;
- --tw-numeric-fraction: ;
- --tw-ring-inset: ;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
@@ -28,28 +30,28 @@
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
- --tw-blur: ;
- --tw-brightness: ;
- --tw-contrast: ;
- --tw-grayscale: ;
- --tw-hue-rotate: ;
- --tw-invert: ;
- --tw-saturate: ;
- --tw-sepia: ;
- --tw-drop-shadow: ;
- --tw-backdrop-blur: ;
- --tw-backdrop-brightness: ;
- --tw-backdrop-contrast: ;
- --tw-backdrop-grayscale: ;
- --tw-backdrop-hue-rotate: ;
- --tw-backdrop-invert: ;
- --tw-backdrop-opacity: ;
- --tw-backdrop-saturate: ;
- --tw-backdrop-sepia: ;
- --tw-contain-size: ;
- --tw-contain-layout: ;
- --tw-contain-paint: ;
- --tw-contain-style: ;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+ --tw-contain-size: ;
+ --tw-contain-layout: ;
+ --tw-contain-paint: ;
+ --tw-contain-style: ;
}
::backdrop {
@@ -62,19 +64,19 @@
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
- --tw-pan-x: ;
- --tw-pan-y: ;
- --tw-pinch-zoom: ;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
- --tw-gradient-from-position: ;
- --tw-gradient-via-position: ;
- --tw-gradient-to-position: ;
- --tw-ordinal: ;
- --tw-slashed-zero: ;
- --tw-numeric-figure: ;
- --tw-numeric-spacing: ;
- --tw-numeric-fraction: ;
- --tw-ring-inset: ;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
@@ -82,28 +84,28 @@
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
- --tw-blur: ;
- --tw-brightness: ;
- --tw-contrast: ;
- --tw-grayscale: ;
- --tw-hue-rotate: ;
- --tw-invert: ;
- --tw-saturate: ;
- --tw-sepia: ;
- --tw-drop-shadow: ;
- --tw-backdrop-blur: ;
- --tw-backdrop-brightness: ;
- --tw-backdrop-contrast: ;
- --tw-backdrop-grayscale: ;
- --tw-backdrop-hue-rotate: ;
- --tw-backdrop-invert: ;
- --tw-backdrop-opacity: ;
- --tw-backdrop-saturate: ;
- --tw-backdrop-sepia: ;
- --tw-contain-size: ;
- --tw-contain-layout: ;
- --tw-contain-paint: ;
- --tw-contain-style: ;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+ --tw-contain-size: ;
+ --tw-contain-layout: ;
+ --tw-contain-paint: ;
+ --tw-contain-style: ;
}
/*
@@ -130,7 +132,7 @@
::before,
::after {
- --tw-content: '';
+ --tw-content: "";
}
/*
@@ -152,9 +154,10 @@ html,
-moz-tab-size: 4;
/* 3 */
-o-tab-size: 4;
- tab-size: 4;
+ tab-size: 4;
/* 3 */
- font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* 4 */
font-feature-settings: normal;
/* 5 */
@@ -197,7 +200,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
- text-decoration: underline dotted;
+ text-decoration: underline dotted;
}
/*
@@ -243,7 +246,8 @@ code,
kbd,
samp,
pre {
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+ "Liberation Mono", "Courier New", monospace;
/* 1 */
font-feature-settings: normal;
/* 2 */
@@ -344,9 +348,9 @@ select {
*/
button,
-input:where([type='button']),
-input:where([type='reset']),
-input:where([type='submit']) {
+input:where([type="button"]),
+input:where([type="reset"]),
+input:where([type="submit"]) {
-webkit-appearance: button;
/* 1 */
background-color: transparent;
@@ -393,7 +397,7 @@ Correct the cursor style of increment and decrement buttons in Safari.
2. Correct the outline style in Safari.
*/
-[type='search'] {
+[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
@@ -486,7 +490,8 @@ textarea {
2. Set the default placeholder color to the user's configured gray 400 color.
*/
-input::-moz-placeholder, textarea::-moz-placeholder {
+input::-moz-placeholder,
+textarea::-moz-placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
@@ -571,6 +576,10 @@ video {
margin-top: 2rem;
margin-bottom: 2rem;
}
+.my-4 {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+}
.mb-2 {
margin-bottom: 0.5rem;
@@ -770,11 +779,14 @@ video {
.shadow-\[0_1px_0_\#c4c8ca\] {
--tw-shadow: 0 1px 0 #c4c8ca;
--tw-shadow-colored: 0 1px 0 var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+ var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
- --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+ --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
+ 0 2px 4px -2px var(--tw-shadow-color);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+ var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
diff --git a/kurl_proxy/assets/tls-custom.css b/kurl_proxy/assets/tls-custom.css
index e3e87af057..ec684ea122 100644
--- a/kurl_proxy/assets/tls-custom.css
+++ b/kurl_proxy/assets/tls-custom.css
@@ -192,7 +192,7 @@ code {
}
.insecure-image {
- width: 502px;
+ width: 450px;
height: 290px;
padding-top: 50px;
}
@@ -388,6 +388,10 @@ button.text-button:hover {
.justifyContent--center {
justify-content: center;
}
+
+.justifyContent--end {
+ justify-content: flex-end;
+}
.alignContent--center {
align-content: center;
}
@@ -610,3 +614,6 @@ p.hidden {
.width-900 {
width: 900px;
}
+.cursor {
+ cursor: pointer;
+}
diff --git a/kurl_proxy/assets/tls.html b/kurl_proxy/assets/tls.html
index 3f6a5984d1..db58517edc 100644
--- a/kurl_proxy/assets/tls.html
+++ b/kurl_proxy/assets/tls.html
@@ -31,6 +31,7 @@
+ {{if .IsEmbeddedCluster }}
+ {{end}}
@@ -99,7 +102,7 @@
>
-
@@ -76,17 +77,19 @@
style="width: 16px; height: 16px"
/>
- Validate the environment & Install {{.AppTitle}}
+ Validate the environment & install {{.AppTitle}}
Secure the Admin Console
- HTTPS for the {{ .AppTitle }} admin console + Choose whether to continue using a self-signed certificate or + upload your own
Certificate type
-
+
@@ -197,7 +194,7 @@
+
- {{ .AppTitle }} Admin Console
+
-
+
diff --git a/web/src/components/apps/EmbeddedClusterManagement.tsx b/web/src/components/apps/EmbeddedClusterManagement.tsx
index 135d92e22d..98a45ffd1c 100644
--- a/web/src/components/apps/EmbeddedClusterManagement.tsx
+++ b/web/src/components/apps/EmbeddedClusterManagement.tsx
@@ -421,7 +421,7 @@ const EmbeddedClusterManagement = ({
const AddNodeInstructions = () => {
return (
{{if .AppIcon }}
Welcome to the {{ .AppTitle }} Admin Console
- {{if .IsEmbeddedCluster}}
+ {{if .IsEmbeddedCluster }}
-
@@ -188,7 +192,7 @@ function PreflightResultPage(props: Props) {
className="btn primary blue"
onClick={() => rerunPreflights()}
>
- Re-run
+ Rerun
)}
You will be guided through the setup and installation of - {{.AppTitle}} + {{ .AppTitle }}
Let's get you started!
-
+
diff --git a/kurl_proxy/cmd/main.go b/kurl_proxy/cmd/main.go
index b4d2b580b3..5e5409701a 100644
--- a/kurl_proxy/cmd/main.go
+++ b/kurl_proxy/cmd/main.go
@@ -345,10 +345,11 @@ func getHttpsServer(upstream, dexUpstream *url.URL, tlsSecretName string, secret
}
appIcon := template.URL(app.Spec.Icon)
c.HTML(http.StatusOK, "tls.html", gin.H{
- "Secret": tlsSecretName,
- "AppIcon": appIcon,
- "AppTitle": app.Spec.Title,
- "App": app.Spec,
+ "Secret": tlsSecretName,
+ "AppIcon": appIcon,
+ "AppTitle": app.Spec.Title,
+ "App": app.Spec,
+ "IsEmbeddedCluster": isEmbeddedCluster(),
})
})
diff --git a/web/src/Root.tsx b/web/src/Root.tsx
index ab6688200a..323f76f756 100644
--- a/web/src/Root.tsx
+++ b/web/src/Root.tsx
@@ -1,4 +1,10 @@
-import { createContext, useEffect, useReducer, useState } from "react";
+import React, {
+ createContext,
+ useEffect,
+ useMemo,
+ useReducer,
+ useState,
+} from "react";
import { createBrowserHistory } from "history";
import { Navigate, Route, Routes, useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet";
@@ -483,18 +489,76 @@ const Root = () => {
const toggleActiveGroups = (name: string) => {
let groupsArr = activeGroups;
- console.log(groupsArr, "arr");
if (groupsArr.includes(name)) {
let updatedGroupsArr = groupsArr.filter((n) => n !== name);
- console.log("ncludes", updatedGroupsArr);
setActiveGroups(updatedGroupsArr);
} else {
- groupsArr.push(name);
- console.log("add to it ", groupsArr);
- setActiveGroups(groupsArr);
+ setActiveGroups([...groupsArr, name]);
}
};
+ const NavGroup = React.memo(
+ ({ group, isActive, i }: { group: any; isActive: boolean; i: number }) => {
+ return (
+
@@ -609,7 +673,7 @@ const Root = () => {
{navbarConfigGroups.length > 0 && (
)}
-
@@ -72,14 +72,14 @@
class="p-4 flex gap-2 border border-gray-300 border-solid rounded-lg shadow-md"
>
-
- Configure {{.AppTitle}}
+Configure {{ .AppTitle }}
- Validate the environment & Install {{.AppTitle}} + Validate the environment & install {{ .AppTitle }}
+
+ );
+ }
+ );
+
return (
toggleActiveGroups(group.name)}
+ >
+
+ {group.items ? (
+
+ {group.title}
+
+ {/* adding the arrow-down classes, will rotate the icon when clicked */}
+
+ {group.items
+ ?.filter((item) => item.type !== "label")
+ ?.map((item, j) => {
+ const hash = location.hash.slice(1);
+ if (item.hidden || item.when === "false") {
+ return;
+ }
+ return (
+
+ {item.title}
+
+ );
+ })}
+
+ ) : null}
+
{navbarConfigGroups?.map((group, i) => {
if (
@@ -620,71 +684,11 @@ const Root = () => {
) {
return;
}
+ const isActive =
+ activeGroups.includes(group.name) || group.hasError;
+
return (
-
@@ -744,6 +748,9 @@ const Root = () => {
fromLicenseFlow={true}
refetchAppsList={getAppsList}
setCurrentStep={setCurrentStep}
+ isEmbeddedCluster={
+ state.adminConsoleMetadata?.isEmbeddedCluster
+ }
/>
}
/>
@@ -1032,6 +1039,9 @@ const Root = () => {
fromLicenseFlow={true}
refetchAppsList={getAppsList}
setCurrentStep={setCurrentStep}
+ isEmbeddedCluster={
+ state.adminConsoleMetadata?.isEmbeddedCluster
+ }
/>
}
/>
diff --git a/web/src/components/PreflightResultPage.tsx b/web/src/components/PreflightResultPage.tsx
index 5749a2053f..33a66ca193 100644
--- a/web/src/components/PreflightResultPage.tsx
+++ b/web/src/components/PreflightResultPage.tsx
@@ -30,6 +30,7 @@ interface Props {
logo: string;
refetchAppsList?: () => void;
setCurrentStep: (step: number) => void;
+ isEmbeddedCluster: boolean;
}
function PreflightResultPage(props: Props) {
@@ -78,10 +79,10 @@ function PreflightResultPage(props: Props) {
return (
-
+ toggleActiveGroups(group.name)}
- >
-
- {group.items ? (
-
- {group.title}
-
- {/* adding the arrow-down classes, will rotate the icon when clicked */}
-
- {group.items
- ?.filter((item) => item.type !== "label")
- ?.map((item, j) => {
- const hash = location.hash.slice(1);
- if (
- item.hidden ||
- item.when === "false"
- ) {
- return;
- }
- return (
-
- {item.title}
-
- );
- })}
-
- ) : null}
- - Validate the environment and Install {selectedApp?.name} + Validate the environment and deploy {selectedApp?.name}
- Preflight checks -
+ {!Utilities.isInitialAppInstall(selectedApp) && + props.isEmbeddedCluster && ( ++ Preflight checks +
+ )}Preflight checks validate that your cluster meets the minimum requirements. Required checks must pass in order to deploy the @@ -170,7 +174,7 @@ function PreflightResultPage(props: Props) { > {!location.pathname.includes("version-history") ? "Proceed" - : "Re-run"}{" "} + : "Rerun"}{" "} with limited Preflights
-
)}
- +
Optionally add nodes to the cluster. Click{" "} Continue to proceed with a single node. @@ -533,11 +533,11 @@ const EmbeddedClusterManagement = ({
+
Nodes
-
+ ;
setCurrentStep: (step: number) => void;
+ setNavbarConfigGroups: (ConfigGroup) => void;
+ setActiveGroups: (ConfigGroup) => void;
};
// This was typed from the implementation of the component so it might be wrong
@@ -253,11 +255,15 @@ class AppConfig extends Component {
changed: false,
configLoading: false,
});
- this.props.setNavbarConfigGroups(data.configGroups);
+ if (this.props.isEmbeddedCluster) {
+ this.props.setNavbarConfigGroups(data.configGroups);
+ }
if (this.props.location.hash.length > 0) {
this.navigateToCurrentHash();
} else {
- this.props.setActiveGroups([data.configGroups[0].name]);
+ if (this.props.isEmbeddedCluster) {
+ this.props.setActiveGroups([data.configGroups[0].name]);
+ }
this.setState({
activeGroups: [data.configGroups[0].name],
configLoading: false,
@@ -389,7 +395,9 @@ class AppConfig extends Component {
configGroups: newGroups,
showValidationError: hasValidationError,
});
- this.props.setNavbarConfigGroups(newGroups);
+ if (this.props.isEmbeddedCluster) {
+ this.props.setNavbarConfigGroups(newGroups);
+ }
if (result.error) {
this.setState({
showConfigError: Boolean(result.error),
@@ -594,7 +602,9 @@ class AppConfig extends Component {
});
const changed = this.isConfigChanged(newGroups);
this.setState({ configGroups: newGroups, changed });
- this.props.setNavbarConfigGroups({ newGroups, changed });
+ if (this.props.isEmbeddedCluster) {
+ this.props.setNavbarConfigGroups({ newGroups, changed });
+ }
})
.catch((error) => {
if (error.name !== "AbortError") {
@@ -766,16 +776,14 @@ class AppConfig extends Component {
return (
{" "}
{!Utilities.isInitialAppInstall(app) && (
diff --git a/web/src/features/AppConfig/components/AppConfig.tsx b/web/src/features/AppConfig/components/AppConfig.tsx
index c03b176745..1bd213fb6f 100644
--- a/web/src/features/AppConfig/components/AppConfig.tsx
+++ b/web/src/features/AppConfig/components/AppConfig.tsx
@@ -30,6 +30,8 @@ type Props = {
refetchApps: () => void;
navigate: ReturnType
@@ -558,7 +558,7 @@ const EmbeddedClusterManagement = ({
)}
{Utilities.isInitialAppInstall(app) && (
-
+
{fromLicenseFlow && (
)}
-
- )}
+ - Configure {app.name} -
-
+
+ Configure {app.name} +
+
- {!Utilities.isInitialAppInstall(app) && !Utilities.isLoggedIn() && (
+ {!Utilities.isInitialAppInstall(app) && (
{
})}
)}
-
+
@@ -875,21 +882,21 @@ class AppConfig extends Component {
readonly={this.isConfigReadOnly(app)}
/>
-
+ {
}}
/>
-
{savingConfig && (
-
+
{(showConfigError || this.state.showValidationError) && (
{configErrorMessage || validationErrorMessage}
)}
{" "}
+