WebDiscover: allow setting resource labels when enrolling single eks,…

… rds, server, kube
gravitational · Jan 9, 2025 · 3a6d3e7 · 3a6d3e7
1 parent 17edb10
commit 3a6d3e7
Show file tree

Hide file tree

Showing 18 changed files with 513 additions and 181 deletions.
diff --git a/web/packages/teleport/src/Discover/Database/CreateDatabase/CreateDatabase.tsx b/web/packages/teleport/src/Discover/Database/CreateDatabase/CreateDatabase.tsx
@@ -25,6 +25,7 @@ import TextEditor from 'shared/components/TextEditor';
 import Validation, { Validator } from 'shared/components/Validation';
 import { requiredField } from 'shared/components/Validation/rules';
 
+import { ResourceLabelTooltip } from 'teleport/Discover/Shared/ResourceLabelTooltip';
 import type { ResourceLabel } from 'teleport/services/agents';
 
 import {
@@ -162,13 +163,13 @@ export function CreateDatabaseView({
                     />
                   </Flex>
                   <Box mt={3}>
-                    <Text bold>Labels (optional)</Text>
-                    <Text mb={2}>
-                      Labels make this new database discoverable by the database
-                      service. <br />
-                      Not defining labels is equivalent to asterisks (any
-                      database service can discover this database).
-                    </Text>
+                    <Flex alignItems="center" gap={1} mb={2}>
+                      <Text bold>Labels (optional)</Text>
+                      <ResourceLabelTooltip
+                        toolTipPosition="top"
+                        resourceKind="db"
+                      />
+                    </Flex>
                     <LabelsCreater
                       labels={labels}
                       setLabels={setLabels}

diff --git a/web/packages/teleport/src/Discover/Database/DeployService/ManualDeploy/ManualDeploy.tsx b/web/packages/teleport/src/Discover/Database/DeployService/ManualDeploy/ManualDeploy.tsx
@@ -143,16 +143,20 @@ export function ManualDeploy(props: {
   const { agentMeta, updateAgentMeta, nextStep, emitEvent } = useDiscover();
 
   // Fetches join token.
-  const { joinToken } = useJoinTokenSuspender(
-    [ResourceKind.Database],
-    props.labels
-  );
+  const { joinToken } = useJoinTokenSuspender({
+    resourceKinds: [ResourceKind.Database],
+    suggestedAgentMatcherLabels: props.labels,
+  });
 
   // Starts resource querying interval.
   const { active, result } = usePingTeleport<Database>(agentMeta.resourceName);
 
   const showHint = useShowHint(active);
 
+  useEffect(() => {
+    return () => clearCachedJoinTokenResult([ResourceKind.Database]);
+  }, []);
+
   function handleNextStep() {
     updateAgentMeta({
       ...agentMeta,

diff --git a/web/packages/teleport/src/Discover/Database/EnrollRdsDatabase/SingleEnrollment.tsx b/web/packages/teleport/src/Discover/Database/EnrollRdsDatabase/SingleEnrollment.tsx
@@ -18,13 +18,16 @@
 
 import { useEffect, useState } from 'react';
 
-import { Text } from 'design';
+import { Flex, Subtitle1, Text } from 'design';
 import { FetchStatus } from 'design/DataTable/types';
+import Validation, { Validator } from 'shared/components/Validation';
 import { Attempt } from 'shared/hooks/useAttemptNext';
 import { getErrMessage } from 'shared/utils/errorType';
 
 import { getRdsEngineIdentifier } from 'teleport/Discover/SelectResource/types';
+import { ResourceLabelTooltip } from 'teleport/Discover/Shared/ResourceLabelTooltip';
 import { useDiscover } from 'teleport/Discover/useDiscover';
+import { ResourceLabel } from 'teleport/services/agents';
 import { Database } from 'teleport/services/databases';
 import {
   AwsRdsDatabase,
@@ -33,7 +36,7 @@ import {
   Vpc,
 } from 'teleport/services/integrations';
 
-import { ActionButtons } from '../../Shared';
+import { ActionButtons, LabelsCreater } from '../../Shared';
 import { CreateDatabaseDialog } from '../CreateDatabase/CreateDatabaseDialog';
 import { useCreateDatabase } from '../CreateDatabase/useCreateDatabase';
 import { DatabaseList } from './RdsDatabaseList';
@@ -90,6 +93,7 @@ export function SingleEnrollment({
 
   const [tableData, setTableData] = useState<TableData>();
   const [selectedDb, setSelectedDb] = useState<CheckedAwsRdsDatabase>();
+  const [customLabels, setCustomLabels] = useState<ResourceLabel[]>([]);
 
   useEffect(() => {
     if (vpc) {
@@ -98,6 +102,12 @@ export function SingleEnrollment({
     }
   }, [vpc]);
 
+  function onSelectRds(rds: CheckedAwsRdsDatabase) {
+    // when changing selected db, clear defined labels
+    setCustomLabels([]);
+    setSelectedDb(rds);
+  }
+
   function fetchNextPage() {
     fetchRdsDatabases({ ...tableData }, vpc);
   }
@@ -175,6 +185,17 @@ export function SingleEnrollment({
     }
   }
 
+  function handleOnProceedWithValidation(
+    validator: Validator,
+    { overwriteDb = false } = {}
+  ) {
+    if (!validator.validate()) {
+      return;
+    }
+
+    handleOnProceed({ overwriteDb });
+  }
+
   function handleOnProceed({ overwriteDb = false } = {}) {
     // Corner case where if registering db fails a user can:
     //   1) change region, which will list new databases or
@@ -185,7 +206,9 @@ export function SingleEnrollment({
         name: selectedDb.name,
         protocol: selectedDb.engine,
         uri: selectedDb.uri,
-        labels: selectedDb.labels,
+        // The labels from the `selectedDb` are AWS tags which
+        // will be imported as is.
+        labels: [...selectedDb.labels, ...customLabels],
         awsRds: selectedDb,
         awsRegion: region,
         awsVpcId: vpc.id,
@@ -198,23 +221,47 @@ export function SingleEnrollment({
 
   return (
     <>
-      {showTable && (
-        <>
-          <Text mt={3}>Select an RDS database to enroll:</Text>
-          <DatabaseList
-            wantAutoDiscover={false}
-            items={tableData?.items || []}
-            fetchStatus={tableData?.fetchStatus || 'loading'}
-            selectedDatabase={selectedDb}
-            onSelectDatabase={setSelectedDb}
-            fetchNextPage={fetchNextPage}
-          />
-        </>
-      )}
-      <ActionButtons
-        onProceed={handleOnProceed}
-        disableProceed={disableBtns || !showTable || !selectedDb}
-      />
+      <Validation>
+        {({ validator }) => (
+          <>
+            {showTable && (
+              <>
+                <Text mt={3}>Select an RDS database to enroll:</Text>
+                <DatabaseList
+                  wantAutoDiscover={false}
+                  items={tableData?.items || []}
+                  fetchStatus={tableData?.fetchStatus || 'loading'}
+                  selectedDatabase={selectedDb}
+                  onSelectDatabase={onSelectRds}
+                  fetchNextPage={fetchNextPage}
+                />
+                {selectedDb && (
+                  <>
+                    <Flex alignItems="center" gap={1} mb={2} mt={4}>
+                      <Subtitle1>Optionally Add More Labels</Subtitle1>
+                      <ResourceLabelTooltip
+                        toolTipPosition="top"
+                        resourceKind="rds"
+                      />
+                    </Flex>
+                    <LabelsCreater
+                      labels={customLabels}
+                      setLabels={setCustomLabels}
+                      isLabelOptional={true}
+                      disableBtns={disableBtns}
+                      noDuplicateKey={true}
+                    />
+                  </>
+                )}
+              </>
+            )}
+            <ActionButtons
+              onProceed={() => handleOnProceedWithValidation(validator)}
+              disableProceed={disableBtns || !showTable || !selectedDb}
+            />
+          </>
+        )}
+      </Validation>
       {attempt.status !== '' && (
         <CreateDatabaseDialog
           pollTimeout={pollTimeout}

diff --git a/web/packages/teleport/src/Discover/Database/MutualTls/useMutualTls.ts b/web/packages/teleport/src/Discover/Database/MutualTls/useMutualTls.ts
@@ -35,9 +35,9 @@ export function useMutualTls({ ctx, props }: Props) {
   const { attempt, run } = useAttempt('');
 
   const { emitErrorEvent } = useDiscover();
-  const { joinToken: prevFetchedJoinToken } = useJoinTokenSuspender([
-    ResourceKind.Database,
-  ]);
+  const { joinToken: prevFetchedJoinToken } = useJoinTokenSuspender({
+    resourceKinds: [ResourceKind.Database],
+  });
   const [joinToken, setJoinToken] = useState(prevFetchedJoinToken);
   const meta = props.agentMeta as DbMeta;
   const clusterId = ctx.storeUser.getClusterId();

diff --git a/web/packages/teleport/src/Discover/Kubernetes/EnrollEKSCluster/Dialogs.story.tsx b/web/packages/teleport/src/Discover/Kubernetes/EnrollEKSCluster/Dialogs.story.tsx
@@ -22,7 +22,7 @@ import { MemoryRouter } from 'react-router';
 
 import { ContextProvider } from 'teleport';
 import cfg from 'teleport/config';
-import { generateCmd } from 'teleport/Discover/Kubernetes/HelmChart/HelmChart';
+import { generateCmd } from 'teleport/Discover/Kubernetes/SelfHosted';
 import { ResourceKind } from 'teleport/Discover/Shared';
 import { PingTeleportProvider } from 'teleport/Discover/Shared/PingTeleportContext';
 import { clearCachedJoinTokenResult } from 'teleport/Discover/Shared/useJoinTokenSuspender';