diff --git a/web/src/ui/i18n/resources/de.tsx b/web/src/ui/i18n/resources/de.tsx index 8cdc3f3ca..c6a2cb687 100644 --- a/web/src/ui/i18n/resources/de.tsx +++ b/web/src/ui/i18n/resources/de.tsx @@ -479,7 +479,8 @@ Fühlen Sie sich frei, Ihre Kubernetes-Bereitstellungen zu erkunden und die Kont "confirm delete body shared services": "Achtung, einige Ihrer Dienste sind für andere Projektmitglieder freigegeben.", "cancel": "Abbrechen", - "confirm": "Ja, löschen" + "confirm": "Ja, löschen", + "api logs help body": undefined }, "MyServicesButtonBar": { "refresh": "Aktualisieren", diff --git a/web/src/ui/i18n/resources/en.tsx b/web/src/ui/i18n/resources/en.tsx index 793b2ea19..57efedc09 100644 --- a/web/src/ui/i18n/resources/en.tsx +++ b/web/src/ui/i18n/resources/en.tsx @@ -472,7 +472,62 @@ Feel free to explore and take charge of your Kubernetes deployments! "confirm delete body": "Don't forget to push your code on GitHub or GitLab before terminating your services", "cancel": "cancel", - "confirm": "Yes, delete" + "confirm": "Yes, delete", + "api logs help body": ({ + k8CredentialsHref, + myServicesHref, + interfacePreferenceHref + }) => ( + { + switch (href) { + case k8CredentialsHref: + return true; + case myServicesHref: + return true; + case interfacePreferenceHref: + return false; + default: + return false; + } + }} + >{`Welcome to our Helm Command Explanation Dialog! +We've designed this interface to empower you to take control over your Kubernetes deployments. +Here's what you need to know: + +#### What is this Helm Command? + +The command displayed on the screen is the exact Helm command that our application will execute on your behalf in your Kubernetes namespace. +This enables you to know what's happening behind the scenes when you click the 'launch' button. + +#### Real-time Updates + +As you modify options in the UI, the Helm command will automatically update to reflect those changes. +This way, you can see how your choices impact the underlying system. + +#### Why Should I Care? + +- **Transparency:** We believe you have the right to know what actions are being performed in your environment. +- **Learning:** Understanding these commands can provide insight into Kubernetes and Helm, deepening your knowledge. +- **Manual Execution:** You can copy and paste this command into a terminal with write-access to Kubernetes, allowing you to launch the service manually. + +#### How Can I Run this Command Manually? + +There are two ways to run theses commands: + +- **Local Terminal:** Go to [\`My Account -> Kubernetes tab\`](${k8CredentialsHref}). + Here, you will find the credentials that allow you to run commands in your Kubernetes namespace from your local terminal. + +- **VSCode-Python Terminal:** You can also launch a VSCode-Python instance with the Kubernetes role set to \`write\`. + Open a terminal within VSCode, and you'll be able to execute the command. + +By executing the command manually, you will still be able to see the service in the [\`MyServices\`](${myServicesHref}) page as if it was launched via the UI. + +You can disable the command bar in the [\`My Account -> Interface preference tab\`](${interfacePreferenceHref}). + +Feel free to explore and take charge of your Kubernetes deployments! + `} + ) }, "MyServicesButtonBar": { "refresh": "Refresh", diff --git a/web/src/ui/i18n/resources/fi.tsx b/web/src/ui/i18n/resources/fi.tsx index 4807a6edb..ef14603ea 100644 --- a/web/src/ui/i18n/resources/fi.tsx +++ b/web/src/ui/i18n/resources/fi.tsx @@ -469,7 +469,8 @@ Tutustu vapaasti ja ota hallintaan Kubernetes-julkaisusi! "confirm delete body": "Muista tallentaa koodisi GitHubiin tai GitLabiin ennen palveluiden lopettamista", "cancel": "Peruuta", - "confirm": "Kyllä, poista" + "confirm": "Kyllä, poista", + "api logs help body": undefined }, "MyServicesButtonBar": { "refresh": "Päivitä", diff --git a/web/src/ui/i18n/resources/fr.tsx b/web/src/ui/i18n/resources/fr.tsx index c55abf9b8..c9d256a0d 100644 --- a/web/src/ui/i18n/resources/fr.tsx +++ b/web/src/ui/i18n/resources/fr.tsx @@ -483,7 +483,8 @@ N'hésitez pas à explorer et à prendre en main vos déploiements Kubernetes ! "confirm delete body shared services": "Attention, certains de vos services sont partagés aux autres membres du projet.", "cancel": "Annuler", - "confirm": "Oui, supprimer" + "confirm": "Oui, supprimer", + "api logs help body": undefined }, "MyServicesButtonBar": { "refresh": "Rafraîchir", diff --git a/web/src/ui/i18n/resources/it.tsx b/web/src/ui/i18n/resources/it.tsx index 4f2f79062..c7b2e822c 100644 --- a/web/src/ui/i18n/resources/it.tsx +++ b/web/src/ui/i18n/resources/it.tsx @@ -475,7 +475,8 @@ Sentiti libero di esplorare e prendere il controllo dei tuoi deployment Kubernet "confirm delete body shared services": "Attenzione, alcuni dei tuoi servizi sono condivisi con gli altri membri del progetto.", "cancel": "Annullare", - "confirm": "Sì, eliminare" + "confirm": "Sì, eliminare", + "api logs help body": undefined }, "MyServicesButtonBar": { "refresh": "Aggiornare", diff --git a/web/src/ui/i18n/resources/nl.tsx b/web/src/ui/i18n/resources/nl.tsx index 8753ae186..f00b9a191 100644 --- a/web/src/ui/i18n/resources/nl.tsx +++ b/web/src/ui/i18n/resources/nl.tsx @@ -476,7 +476,8 @@ Voel je vrij om te verkennen en controle te nemen over je Kubernetes-implementat "confirm delete body shared services": "Opgelet, sommige van uw diensten worden gedeeld met andere projectleden.", "cancel": "Annuleren", - "confirm": "Ja, verwijderen" + "confirm": "Ja, verwijderen", + "api logs help body": undefined }, "MyServicesButtonBar": { "refresh": "Vernieuwen", diff --git a/web/src/ui/i18n/resources/no.tsx b/web/src/ui/i18n/resources/no.tsx index 1fbbd0a50..0882c5760 100644 --- a/web/src/ui/i18n/resources/no.tsx +++ b/web/src/ui/i18n/resources/no.tsx @@ -473,7 +473,8 @@ Føl deg fri til å utforske og ta kontroll over dine Kubernetes-implementeringe "confirm delete body": "Ikke glem å laste opp koden din på GitHub eller GitLab før du avslutter tjenestene dine", "cancel": "Avbryt", - "confirm": "Ja, slett" + "confirm": "Ja, slett", + "api logs help body": undefined }, "MyServicesButtonBar": { "refresh": "Oppdater", diff --git a/web/src/ui/i18n/resources/zh-CN.tsx b/web/src/ui/i18n/resources/zh-CN.tsx index ae73592ab..aeabf9780 100644 --- a/web/src/ui/i18n/resources/zh-CN.tsx +++ b/web/src/ui/i18n/resources/zh-CN.tsx @@ -409,7 +409,8 @@ export const translations: Translations<"zh-CN"> = { "confirm delete body shared services": "请注意，您的某些服务正在与项目的其他成员共享.", "cancel": "取消", - "confirm": "是的, 删除" + "confirm": "是的, 删除", + "api logs help body": undefined }, "MyServicesButtonBar": { "refresh": "刷新", diff --git a/web/src/ui/pages/myServices/MyServices.tsx b/web/src/ui/pages/myServices/MyServices.tsx index 30a407f35..7e95da7e6 100644 --- a/web/src/ui/pages/myServices/MyServices.tsx +++ b/web/src/ui/pages/myServices/MyServices.tsx @@ -111,10 +111,15 @@ export default function MyServices(props: Props) { commandBarMaxHeight } = useCommandBarPositioning(); + const { + domRect: { height: bellowHeaderHeight } + } = useDomRect({ "ref": belowHeaderRef }); + const { classes, cx } = useStyles({ isSavedConfigsExtended, commandBarTop, - isCommandBarEnabled + isCommandBarEnabled, + bellowHeaderHeight }); const onRequestToggleIsShortVariant = useConstCallback(() => @@ -295,10 +300,26 @@ export default function MyServices(props: Props) { + {t("api logs help body", { + "k8CredentialsHref": routes.account({ + "tabId": "k8sCredentials" + }).href, + "myServicesHref": routes.myServices().href, + "interfacePreferenceHref": routes.account({ + "tabId": "user-interface" + }).href + })} + + ) + }} /> )}
@@ -397,6 +418,15 @@ export const { i18n } = declareComponentKeys< | "confirm delete body shared services" | "cancel" | "confirm" + | { + K: "api logs help body"; + P: { + k8CredentialsHref: string; + myServicesHref: string; + interfacePreferenceHref: string; + }; + R: JSX.Element; + } >()({ MyServices }); const useStyles = tss @@ -405,51 +435,71 @@ const useStyles = tss isCommandBarEnabled: boolean; commandBarTop: number; isSavedConfigsExtended: boolean; + bellowHeaderHeight: number; }>() - .create(({ theme, isCommandBarEnabled, isSavedConfigsExtended, commandBarTop }) => ({ - "root": { - "height": "100%", - "display": "flex", - "flexDirection": "column" - }, - "belowHeader": { - "position": "relative" - }, - "cardsAndSavedConfigs": { - "overflow": "hidden", - "flex": 1, - "display": "flex", - "& > *": { - "height": "100%" - } - }, - ...(() => { - const ratio = 0.65; - - return { - "cards": { - "flex": ratio, - "marginRight": theme.spacing(5) - }, - "savedConfigs": { - "flex": isSavedConfigsExtended ? 1 : 1 - ratio, - "paddingRight": "2%", - //NOTE: It's not great to have a fixed width here but measuring would needlessly complexity the code too much. - "marginTop": isCommandBarEnabled ? 40 : undefined + .create( + ({ + theme, + isCommandBarEnabled, + isSavedConfigsExtended, + commandBarTop, + bellowHeaderHeight + }) => ({ + "root": { + "height": "100%", + "display": "flex", + "flexDirection": "column" + }, + "belowHeader": { + "position": "relative", + "flex": 1, + "display": "flex", + "flexDirection": "column", + "overflow": "hidden" + }, + "cardsAndSavedConfigs": { + "overflow": "hidden", + "flex": 1, + "display": "flex", + "& > *": { + "height": "100%" } - }; - })(), - "commandBar": { - "position": "absolute", - "right": 0, - "top": commandBarTop, - "zIndex": 1, - "opacity": commandBarTop === 0 ? 0 : 1, - "transition": "opacity 750ms linear", - "width": "min(100%, 1100px)" - }, - "commandBarWhenExpended": { - "width": "min(100%, 1350px)", - "transition": "width 70ms linear" - } - })); + }, + ...(() => { + const ratio = 0.65; + + return { + "cards": { + "flex": ratio, + "marginRight": theme.spacing(5) + }, + "savedConfigs": { + "flex": isSavedConfigsExtended ? 1 : 1 - ratio, + "paddingRight": "2%", + //NOTE: It's not great to have a fixed width here but measuring would needlessly complexity the code too much. + "marginTop": isCommandBarEnabled ? 40 : undefined + } + }; + })(), + "commandBar": { + "position": "absolute", + "right": 0, + "top": commandBarTop, + "zIndex": 1, + "opacity": commandBarTop === 0 ? 0 : 1, + "transition": "opacity 750ms linear", + "width": "min(100%, 1100px)" + }, + "commandBarWhenExpended": { + "width": "min(100%, 1350px)", + "transition": "width 70ms linear" + }, + "helpDialog": { + "maxWidth": 800 + }, + "helpDialogBody": { + "maxHeight": (console.log({ bellowHeaderHeight }), bellowHeaderHeight), + "overflow": "auto" + } + }) + );