delete cluster warning (#4333)

api/server/handlers/datastore/get.go

@@ -77,11 +77,13 @@ func (c *GetDatastoreHandler) ServeHTTP(w http.ResponseWriter, r *http.Request)
 	}
 
 	datastore := Datastore{
-		Name:         datastoreRecord.Name,
-		Type:         datastoreRecord.Type,
-		Engine:       datastoreRecord.Engine,
-		CreatedAtUTC: datastoreRecord.CreatedAt,
-		Status:       string(datastoreRecord.Status),
+		Name:                              datastoreRecord.Name,
+		Type:                              datastoreRecord.Type,
+		Engine:                            datastoreRecord.Engine,
+		CreatedAtUTC:                      datastoreRecord.CreatedAt,
+		Status:                            string(datastoreRecord.Status),
+		CloudProvider:                     datastoreRecord.CloudProvider,
+		CloudProviderCredentialIdentifier: datastoreRecord.CloudProviderCredentialIdentifier,
 	}
 
 	if datastoreRecord.CloudProvider != SupportedDatastoreCloudProvider_AWS {

api/server/handlers/datastore/list.go

@@ -110,11 +110,13 @@ func (h *ListDatastoresHandler) ServeHTTP(w http.ResponseWriter, r *http.Request
 
 	for _, datastore := range datastores {
 		datastoreList = append(datastoreList, Datastore{
-			Name:         datastore.Name,
-			Type:         datastore.Type,
-			Engine:       datastore.Engine,
-			CreatedAtUTC: datastore.CreatedAt,
-			Status:       string(datastore.Status),
+			Name:                              datastore.Name,
+			Type:                              datastore.Type,
+			Engine:                            datastore.Engine,
+			CreatedAtUTC:                      datastore.CreatedAt,
+			Status:                            string(datastore.Status),
+			CloudProvider:                     datastore.CloudProvider,
+			CloudProviderCredentialIdentifier: datastore.CloudProviderCredentialIdentifier,
 		})
 	}
 

dashboard/src/lib/clusters/types.ts

@@ -6,7 +6,7 @@ import { checkGroupValidator } from "main/home/compliance-dashboard/types";
 import { CloudProviderAWS } from "./constants";
 
 // Cloud
-const cloudProviderValidator = z.enum(["AWS", "GCP", "Azure", "Local"]);
+export const cloudProviderValidator = z.enum(["AWS", "GCP", "Azure", "Local"]);
 export type CloudProvider = z.infer<typeof cloudProviderValidator>;
 export type ClientCloudProvider = {
   name: CloudProvider;
@@ -521,7 +521,7 @@ export const preflightCheckValidator = z.object({
         metadata: z.record(z.string()).optional(),
       }),
     })
-    .array()
+    .array(),
 });
 export const createContractResponseValidator = z.object({
   contract_revision: z.object({

dashboard/src/lib/databases/types.ts

@@ -1,5 +1,7 @@
 import { z } from "zod";
 
+import { cloudProviderValidator } from "lib/clusters/types";
+
 export const datastoreEnvValidator = z.object({
   name: z.string(),
   linked_applications: z.string().array().default([]),
@@ -40,6 +42,8 @@ export const datastoreValidator = z.object({
     "DELETING_RECORD",
     "DELETED",
   ]),
+  cloud_provider: cloudProviderValidator,
+  cloud_provider_credential_identifier: z.string(),
 });
 
 export type SerializedDatastore = z.infer<typeof datastoreValidator>;

dashboard/src/lib/hooks/useDatabaseList.ts

@@ -15,7 +15,11 @@ type DatastoreListType = {
   datastores: ClientDatastore[];
   isLoading: boolean;
 };
-export const useDatastoreList = (): DatastoreListType => {
+export const useDatastoreList = (
+  opts: { refetchIntervalMilliseconds: number } = {
+    refetchIntervalMilliseconds: 5000,
+  }
+): DatastoreListType => {
   const { currentProject } = useContext(Context);
 
   const { data: datastores = [], isLoading: isLoadingDatastores } = useQuery(
@@ -57,6 +61,7 @@ export const useDatastoreList = (): DatastoreListType => {
         currentProject.id !== -1 &&
         currentProject.db_enabled,
       refetchOnWindowFocus: false,
+      refetchInterval: opts.refetchIntervalMilliseconds,
     }
   );
 

dashboard/src/main/home/database-dashboard/DatabaseDashboard.tsx

@@ -50,7 +50,9 @@ const DatabaseDashboard: React.FC = () => {
     "all" | "POSTGRES" | "AURORA-POSTGRES" | "REDIS"
   >("all");
 
-  const { datastores, isLoading } = useDatastoreList();
+  const { datastores, isLoading } = useDatastoreList({
+    refetchIntervalMilliseconds: 5000,
+  });
 
   const filteredDatastores = useMemo(() => {
     const filteredBySearch = search(datastores, searchValue, {
@@ -101,7 +103,7 @@ const DatabaseDashboard: React.FC = () => {
         </DashboardPlaceholder>
       );
     }
-  
+
     if (!currentProject?.db_enabled) {
       return (
         <DashboardPlaceholder>
@@ -122,7 +124,7 @@ const DatabaseDashboard: React.FC = () => {
         </DashboardPlaceholder>
       );
     }
-  
+
     if (datastores === undefined || isLoading || isLoadingClusters) {
       return <Loading offset="-150px" />;
     }

dashboard/src/main/home/infrastructure-dashboard/tabs/Settings.tsx

@@ -10,6 +10,7 @@ import Icon from "components/porter/Icon";
 import Input from "components/porter/Input";
 import Spacer from "components/porter/Spacer";
 import Text from "components/porter/Text";
+import { useDatastoreList } from "lib/hooks/useDatabaseList";
 import { useIntercom } from "lib/hooks/useIntercom";
 
 import { Context } from "shared/Context";
@@ -29,6 +30,16 @@ const Settings: React.FC = () => {
   const [errorMessage, setErrorMessage] = useState("");
   const [status, setStatus] = useState("");
   const { updateClusterButtonProps } = useClusterFormContext();
+  const { datastores } = useDatastoreList();
+
+  const datastoresBelongingToCluster = useMemo(() => {
+    return datastores.filter(
+      (d) =>
+        d.cloud_provider === cluster.cloud_provider.name &&
+        d.cloud_provider_credential_identifier ===
+          cluster.cloud_provider_credential_identifier
+    );
+  }, [datastores]);
 
   const renameCluster = useCallback(async (): Promise<void> => {
     setStatus("loading");
@@ -129,6 +140,22 @@ const Settings: React.FC = () => {
         </a>
         . Contact support@porter.run if you need guidance.
       </Text>
+      {datastoresBelongingToCluster.length > 0 && (
+        <>
+          <Spacer y={0.7} />
+          <Text color={"warner"}>
+            Note that deleting this cluster will delete the following attached
+            datastores:{" "}
+          </Text>
+          <ul style={{ margin: 0 }}>
+            {datastoresBelongingToCluster.map((d) => (
+              <li key={d.name}>
+                <Text color={"warner"}>{d.name}</Text>
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
       <Spacer y={1} />
       <Button
         color="#b91133"