[UI] EVEREST-1255 Add connection URL to details card #805

percona · Nov 5, 2024 · 268e040 · 268e040
1 parent ae08078
commit 268e040
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 3 deletions.
diff --git a/ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cards/card.types.ts b/ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cards/card.types.ts
@@ -34,6 +34,7 @@ export type ConnectionDetailsOverviewCardProps = {
   port: number;
   username: string;
   password: string;
+  connectionUrl: string;
   clusterName?: string;
   clusterNamespace?: string;
 } & OverviewCardProps;

diff --git a/...est/src/pages/db-cluster-details/cluster-overview/cards/db-details/connection-details.tsx b/...est/src/pages/db-cluster-details/cluster-overview/cards/db-details/connection-details.tsx
@@ -17,20 +17,24 @@ import { Messages } from '../../cluster-overview.messages';
 import OverviewSection from '../../overview-section';
 import { ConnectionDetailsOverviewCardProps } from '../card.types';
 import OverviewSectionRow from '../../overview-section-row';
-import { Box, Typography } from '@mui/material';
+import { Box, IconButton, TextField, Typography } from '@mui/material';
 import { CopyToClipboardButton } from '@percona/ui-lib';
 import { HiddenPasswordToggle } from 'components/hidden-row';
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
 import { DbClusterContext } from 'pages/db-cluster-details/dbCluster.context';
+import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
+import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
 
 export const ConnectionDetails = ({
   loading,
   hostname = '',
   username,
   password,
+  connectionUrl,
   port,
 }: ConnectionDetailsOverviewCardProps) => {
   const { canReadCredentials } = useContext(DbClusterContext);
+  const [showUrl, setShowUrl] = useState(false);
 
   return (
     <OverviewSection
@@ -70,7 +74,33 @@ export const ConnectionDetails = ({
           />
         </>
       )}
-      {/*//TODO https://perconadev.atlassian.net/browse/EVEREST-1255 Connection URL*/}
+
+      <TextField
+        label={Messages.fields.connectionUrl}
+        value={connectionUrl}
+        sx={{ maxHeight: '50px', marginTop: '20px', width: '450px' }}
+        type={showUrl ? 'text' : 'password'}
+        InputProps={{
+          endAdornment: (
+            <>
+              <IconButton onClick={() => setShowUrl(!showUrl)}>
+                {showUrl ? (
+                  <VisibilityOutlinedIcon />
+                ) : (
+                  <VisibilityOffOutlinedIcon />
+                )}
+              </IconButton>
+              <CopyToClipboardButton
+                buttonProps={{
+                  sx: { mt: -0.5 },
+                  size: 'small',
+                }}
+                textToCopy={connectionUrl}
+              />
+            </>
+          ),
+        }}
+      />
     </OverviewSection>
   );
 };
diff --git a/...pps/everest/src/pages/db-cluster-details/cluster-overview/cards/db-details/db-details.tsx b/...pps/everest/src/pages/db-cluster-details/cluster-overview/cards/db-details/db-details.tsx
@@ -34,6 +34,7 @@ export const DbDetails = ({
   port,
   username,
   password,
+  connectionUrl,
   hostname,
   monitoring,
   externalAccess,
@@ -65,6 +66,7 @@ export const DbDetails = ({
           username={username}
           password={password}
           hostname={hostname}
+          connectionUrl={connectionUrl}
         />
         {canReadMonitoring && (
           <MonitoringDetails loading={loading} monitoring={monitoring} />

diff --git a/ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cluster-overview.messages.ts b/ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cluster-overview.messages.ts
@@ -27,6 +27,7 @@ export const Messages = {
     port: 'Port',
     username: 'Username',
     password: 'Password',
+    connectionUrl: 'Connection URL',
     status: 'Status',
     externalAccess: 'Ext.access',
     parameters: 'Parameters',

diff --git a/ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cluster-overview.tsx b/ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cluster-overview.tsx
@@ -90,6 +90,7 @@ export const ClusterOverview = () => {
         port={dbCluster.status?.port!}
         username={dbClusterDetails?.username!}
         password={dbClusterDetails?.password!}
+        connectionUrl={dbClusterDetails?.connectionUrl!}
         externalAccess={
           isProxy(dbCluster.spec.proxy) &&
           dbCluster.spec.proxy.expose.type === ProxyExposeType.external

diff --git a/ui/apps/everest/src/shared-types/dbCluster.types.ts b/ui/apps/everest/src/shared-types/dbCluster.types.ts
@@ -149,6 +149,7 @@ export type GetDbClusterPayload = {
 export type ClusterCredentials = {
   username: string;
   password: string;
+  connectionUrl?: string;
 };
 
 export type GetDbClusterCredentialsPayload = ClusterCredentials;