diff --git a/dashboard/src/main/home/database-dashboard/DatabaseTabs.tsx b/dashboard/src/main/home/database-dashboard/DatabaseTabs.tsx index 5d6314ce28..1331ac3ba8 100644 --- a/dashboard/src/main/home/database-dashboard/DatabaseTabs.tsx +++ b/dashboard/src/main/home/database-dashboard/DatabaseTabs.tsx @@ -9,18 +9,18 @@ import { useDatastoreContext } from "./DatabaseContextProvider"; import DatastoreProvisioningIndicator from "./DatastoreProvisioningIndicator"; import ConfigurationTab from "./tabs/ConfigurationTab"; import ConnectedAppsTab from "./tabs/ConnectedAppsTab"; -import CredentialsTab from "./tabs/CredentialsTab"; +import ConnectTab from "./tabs/ConnectTab"; import MetricsTab from "./tabs/MetricsTab"; import SettingsTab from "./tabs/SettingsTab"; const validTabs = [ "metrics", - "credentials", + "connect", "configuration", "settings", "connected-apps", ] as const; -const DEFAULT_TAB = "credentials"; +const DEFAULT_TAB = "connect"; type ValidTab = (typeof validTabs)[number]; type DbTabProps = { @@ -44,7 +44,7 @@ const DatabaseTabs: React.FC = ({ tabParam }) => { const tabs = useMemo(() => { return [ - { label: "Credentials", value: "credentials" }, + { label: "Connect", value: "connect" }, { label: "Connected Apps", value: "connected-apps" }, { label: "Configuration", value: "configuration" }, { label: "Settings", value: "settings" }, @@ -67,7 +67,7 @@ const DatabaseTabs: React.FC = ({ tabParam }) => { /> {match(currentTab) - .with("credentials", () => ) + .with("connect", () => ) .with("settings", () => ) .with("metrics", () => ) .with("configuration", () => ) diff --git a/dashboard/src/main/home/database-dashboard/tabs/CredentialsTab.tsx b/dashboard/src/main/home/database-dashboard/tabs/ConnectTab.tsx similarity index 82% rename from dashboard/src/main/home/database-dashboard/tabs/CredentialsTab.tsx rename to dashboard/src/main/home/database-dashboard/tabs/ConnectTab.tsx index f0aaca2566..aba6c4a38d 100644 --- a/dashboard/src/main/home/database-dashboard/tabs/CredentialsTab.tsx +++ b/dashboard/src/main/home/database-dashboard/tabs/ConnectTab.tsx @@ -12,7 +12,7 @@ import copy from "assets/copy-left.svg"; import { useDatastoreContext } from "../DatabaseContextProvider"; -const CredentialsTab: React.FC = () => { +const ConnectTab: React.FC = () => { const { datastore } = useDatastoreContext(); const keyValues = useMemo(() => { @@ -38,7 +38,7 @@ const CredentialsTab: React.FC = () => { return ( - Credentials + Application connection {keyValues.length !== 0 && ( <> @@ -85,21 +85,38 @@ const CredentialsTab: React.FC = () => { } )} + + + The datastore client of your application should use these + environment variables to create a connection. + + {datastore.type === "ELASTICACHE" && ( + <> + + + In order for connection to succeed, your datastore client must + connect via SSL. + + + )} )} + + Local connection - Connect + + The credentials above will only work for apps running on your cluster. + - If you have the{" "} + However, if you have authenticated via the{" "} Porter CLI {" "} - installed, you can connect to this datastore locally by running the - following command: + , you can create a secure tunnel to this datastore to connect locally: @@ -114,7 +131,7 @@ const CredentialsTab: React.FC = () => { ); }; -export default CredentialsTab; +export default ConnectTab; const CredentialsTabContainer = styled.div` width: 100%;