disaster recovery UI for embedded cluster (#4570)

hack/dev/skaffoldcache.Dockerfile

@@ -1,4 +1,4 @@
-FROM golang:1.21 as deps
+FROM golang:1.22 as deps
 
 RUN go install github.com/go-delve/delve/cmd/[email protected]
 

pkg/handlers/backup.go

@@ -34,6 +34,12 @@ func (h *Handler) CreateApplicationBackup(w http.ResponseWriter, r *http.Request
 		Success: false,
 	}
 
+	if util.IsEmbeddedCluster() {
+		createApplicationBackupResponse.Error = "application backups are not supported in embedded clusters"
+		JSON(w, http.StatusForbidden, createApplicationBackupResponse)
+		return
+	}
+
 	// check minimal rbac
 	if err := requiresKotsadmVeleroAccess(w, r); err != nil {
 		return

pkg/snapshot/store.go

@@ -35,6 +35,7 @@ import (
 	kotss3 "github.com/replicatedhq/kots/pkg/s3"
 	"github.com/replicatedhq/kots/pkg/snapshot/providers"
 	"github.com/replicatedhq/kots/pkg/snapshot/types"
+	"github.com/replicatedhq/kots/pkg/util"
 	velerov1 "github.com/vmware-tanzu/velero/pkg/apis/velero/v1"
 	veleroclientv1 "github.com/vmware-tanzu/velero/pkg/generated/clientset/versioned/typed/velero/v1"
 	"google.golang.org/api/option"
@@ -1023,7 +1024,12 @@ func mapAWSBackupStorageLocationToStore(kotsadmVeleroBackendStorageLocation *vel
 		return errors.Wrap(err, "failed to parse s3 url")
 	}
 	// without endpoint, the ui has no logic to figure if it is amazon-s3 or other-s3 compatible storages
-	if !isS3Compatible || strings.HasSuffix(u.Hostname(), ".amazonaws.com") {
+	shouldMapToAWS := !isS3Compatible || strings.HasSuffix(u.Hostname(), ".amazonaws.com")
+	if util.IsEmbeddedCluster() {
+		// embedded clusters only support other s3 compatible storage
+		shouldMapToAWS = false
+	}
+	if shouldMapToAWS {
 		store.AWS = &types.StoreAWS{
 			Region: kotsadmVeleroBackendStorageLocation.Spec.Config["region"],
 		}

pkg/snapshot/velero.go

@@ -12,6 +12,7 @@ import (
 	"github.com/replicatedhq/kots/pkg/k8sutil"
 	kotsadmresources "github.com/replicatedhq/kots/pkg/kotsadm/resources"
 	kotsadmtypes "github.com/replicatedhq/kots/pkg/kotsadm/types"
+	"github.com/replicatedhq/kots/pkg/util"
 	velerov1api "github.com/vmware-tanzu/velero/pkg/apis/velero/v1"
 	"github.com/vmware-tanzu/velero/pkg/cmd/cli/serverstatus"
 	veleroclientv1 "github.com/vmware-tanzu/velero/pkg/generated/clientset/versioned/typed/velero/v1"
@@ -388,9 +389,16 @@ func getVeleroPod(ctx context.Context, clientset *kubernetes.Clientset, namespac
 		"component": "velero",
 		"deploy":    "velero",
 	}
+	labelSelector := labels.SelectorFromSet(veleroLabels)
+
+	if util.IsEmbeddedCluster() {
+		labelSelector = labels.SelectorFromSet(map[string]string{
+			"name": "velero",
+		})
+	}
 
 	veleroPods, err := clientset.CoreV1().Pods(namespace).List(context.TODO(), metav1.ListOptions{
-		LabelSelector: labels.SelectorFromSet(veleroLabels).String(),
+		LabelSelector: labelSelector.String(),
 	})
 	if err != nil {
 		return "", errors.Wrap(err, "failed to list velero pods before restarting")
@@ -421,6 +429,12 @@ func getNodeAgentPods(ctx context.Context, clientset *kubernetes.Clientset, name
 	labelSelector := labels.NewSelector()
 	labelSelector = labelSelector.Add(*componentReq, *nameReq)
 
+	if util.IsEmbeddedCluster() {
+		labelSelector = labels.SelectorFromSet(map[string]string{
+			"name": "node-agent",
+		})
+	}
+
 	nodeAgentPods, err := clientset.CoreV1().Pods(namespace).List(context.TODO(), metav1.ListOptions{
 		LabelSelector: labelSelector.String(),
 	})

web/src/Root.tsx

@@ -635,6 +635,9 @@ const Root = () => {
                   <SnapshotsWrapper
                     appName={state.selectedAppName}
                     isKurlEnabled={state.adminConsoleMetadata?.isKurl}
+                    isEmbeddedCluster={
+                      state.adminConsoleMetadata?.isEmbeddedCluster
+                    }
                     appsList={state.appsList}
                   />
                 }
@@ -644,6 +647,9 @@ const Root = () => {
                   element={
                     <Snapshots
                       isKurlEnabled={state.adminConsoleMetadata?.isKurl}
+                      isEmbeddedCluster={
+                        state.adminConsoleMetadata?.isEmbeddedCluster
+                      }
                       appsList={state.appsList}
                     />
                   }
@@ -655,6 +661,9 @@ const Root = () => {
                     // @ts-ignore
                     <SnapshotSettings
                       isKurlEnabled={state.adminConsoleMetadata?.isKurl}
+                      isEmbeddedCluster={
+                        state.adminConsoleMetadata?.isEmbeddedCluster
+                      }
                       appsList={state.appsList}
                     />
                   }
@@ -664,6 +673,9 @@ const Root = () => {
                   element={
                     <SnapshotDetails
                       isKurlEnabled={state.adminConsoleMetadata?.isKurl}
+                      isEmbeddedCluster={
+                        state.adminConsoleMetadata?.isEmbeddedCluster
+                      }
                       appsList={state.appsList}
                     />
                   }

web/src/components/apps/AppDetailPage.tsx

@@ -488,6 +488,7 @@ function AppDetailPage(props: Props) {
                 app={selectedApp}
                 isVeleroInstalled={isVeleroInstalled}
                 isHelmManaged={props.isHelmManaged}
+                isEmbeddedCluster={props.isEmbeddedCluster}
               />
               <Outlet context={context} />
             </Fragment>

web/src/components/modals/DeleteSnapshotModal.tsx

@@ -3,6 +3,7 @@ import { Utilities } from "@src/utilities/utilities";
 import { Snapshot } from "@src/types";
 
 interface DeleteSnapshotModalProps {
+  featureName: string;
   deleteSnapshotModal: boolean;
   toggleConfirmDeleteModal: (snapshot: Snapshot | {}) => void;
   snapshotToDelete: Snapshot;
@@ -14,6 +15,7 @@ interface DeleteSnapshotModalProps {
 
 export default function DeleteSnapshotModal(props: DeleteSnapshotModalProps) {
   const {
+    featureName,
     deleteSnapshotModal,
     toggleConfirmDeleteModal,
     snapshotToDelete,
@@ -37,16 +39,16 @@ export default function DeleteSnapshotModal(props: DeleteSnapshotModalProps) {
       <div className="Modal-body">
         <div className="flex flex-column">
           <p className="u-fontSize--largest u-fontWeight--bold u-textColor--primary u-lineHeight--normal u-marginBottom--more">
-            Delete snapshot
+            Delete {featureName}
           </p>
           {deleteErr ? (
             <p className="u-textColor--error u-fontSize--small u-fontWeight--medium u-lineHeight--normal">
               {deleteErrorMsg}
             </p>
           ) : null}
           <p className="u-fontSize--normal u-fontWeight--normal u-textColor--bodyCopy u-lineHeight--normal">
-            Are you sure you want do permanently delete a snapshot? This action
-            cannot be reversed.
+            Are you sure you want to permanently delete a {featureName}? This
+            action cannot be reversed.
           </p>
           <div className="flex flex1 justifyContent--spaceBetween u-marginTop--20">
             <div className="flex flex-column">
@@ -87,7 +89,9 @@ export default function DeleteSnapshotModal(props: DeleteSnapshotModalProps) {
               }}
               disabled={deletingSnapshot}
             >
-              {deletingSnapshot ? "Deleting snapshot" : "Delete snapshot"}
+              {deletingSnapshot
+                ? `Deleting ${featureName}`
+                : `Delete ${featureName}`}
             </button>
           </div>
         </div>

web/src/components/shared/NavBar.tsx

@@ -264,7 +264,9 @@ export class NavBar extends PureComponent<Props, State> {
                       onClick={this.handleGoToSnapshots}
                       className="flex flex1 u-cursor--pointer alignItems--center text u-fontSize--normal u-fontWeight--medium flex"
                     >
-                      Snapshots
+                      {isEmbeddedClusterEnabled
+                        ? "Disaster Recovery"
+                        : "Snapshots"}
                     </span>
                   </div>
                 )}
@@ -290,6 +292,7 @@ export class NavBar extends PureComponent<Props, State> {
             <NavBarDropdown
               handleLogOut={this.handleLogOut}
               isHelmManaged={this.props.isHelmManaged}
+              isEmbeddedCluster={isEmbeddedClusterEnabled}
             />
           </>
         )}

web/src/components/shared/NavBarDropdown.jsx

@@ -3,7 +3,7 @@ import Icon from "../Icon";
 import ChangePasswordModal from "../modals/ChangePasswordModal/ChangePasswordModal";
 import { useEffect, useRef, useState } from "react";
 
-const NavBarDropdown = ({ handleLogOut, isHelmManaged }) => {
+const NavBarDropdown = ({ handleLogOut, isHelmManaged, isEmbeddedCluster }) => {
   const [showDropdown, setShowDropdown] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const testRef = useRef(null);
@@ -49,7 +49,7 @@ const NavBarDropdown = ({ handleLogOut, isHelmManaged }) => {
         <li>
           <p onClick={() => setShowModal(true)}>Change password</p>
         </li>
-        {!isHelmManaged && (
+        {!isHelmManaged && !isEmbeddedCluster && (
           <li onMouseDown={handleNav}>
             <p>Add new application</p>
           </li>

web/src/components/shared/SubNavBar/SubNavBar.jsx

@@ -13,6 +13,7 @@ export default function SubNavBar({
   isAccess = false,
   isSnapshots = false,
   isHelmManaged,
+  isEmbeddedCluster,
 }) {
   let { slug } = app;
 
@@ -50,13 +51,14 @@ export default function SubNavBar({
   const snapshotsConfig = [
     {
       tabName: activeTab === slug ? slug : "snapshots",
-      displayName: "Full Snapshots (Instance)",
+      displayName: isEmbeddedCluster ? "Backups" : "Full Snapshots (Instance)",
       to: () => `/snapshots`,
     },
     {
       tabName: "partial",
       displayName: "Partial Snapshots (Application)",
       to: (slug) => `/snapshots/partial/${slug}`,
+      hide: isEmbeddedCluster,
     },
     {
       tabName: "settings",
@@ -86,6 +88,7 @@ export default function SubNavBar({
               .filter(Boolean)
           : isSnapshots
           ? snapshotsConfig
+              .filter((link) => !link.hide)
               .map((link, idx) => {
                 const generatedMenuItem = (
                   <li
@@ -124,6 +127,7 @@ export default function SubNavBar({
                     link.displayRule({
                       app: app || {},
                       isHelmManaged,
+                      isEmbeddedCluster,
                       isIdentityServiceSupported:
                         app.isAppIdentityServiceSupported,
                       isVeleroInstalled,

web/src/components/snapshots/AppSnapshots.jsx

@@ -781,6 +781,7 @@ class AppSnapshots extends Component {
           )}
           {deleteSnapshotModal && (
             <DeleteSnapshotModal
+              featureName="snapshot"
               deleteSnapshotModal={deleteSnapshotModal}
               toggleConfirmDeleteModal={this.toggleConfirmDeleteModal}
               handleDeleteSnapshot={this.handleDeleteSnapshot}

web/src/components/snapshots/GettingStartedSnapshots.jsx

@@ -1,4 +1,5 @@
 import Icon from "@components/Icon";
+import { Utilities } from "@src/utilities/utilities";
 import { Link } from "react-router-dom";
 
 function navigateToConfiguration(props) {
@@ -12,31 +13,35 @@ export default function GettingStartedSnapshots(props) {
     isApp,
     app,
     startManualSnapshot,
+    isEmbeddedCluster,
   } = props;
 
+  let featureName = "snapshot";
+  if (isEmbeddedCluster) {
+    featureName = "backup";
+  }
+
   return (
     <div className="flex flex-column card-item GettingStartedSnapshots--wrapper  alignItems--center">
       <Icon icon="snapshot-getstarted" size={50} />
       <p className="u-fontSize--jumbo2 u-fontWeight--bold u-lineHeight--more u-textColor--secondary u-marginTop--20">
         {" "}
         {isVeleroInstalled
-          ? "No snapshots yet"
-          : "Get started with Snapshots"}{" "}
+          ? `No ${featureName}s yet`
+          : `Get started with ${Utilities.toTitleCase(featureName)}s`}{" "}
       </p>
       {isApp ? (
         <p className="u-marginTop--10 u-fontSize--normal u-lineHeight--more u-fontWeight--medium u-textColor--bodyCopy">
-          There have been no snapshots made for {app?.name} yet. You can
-          manually trigger snapshots or you can set up automatic snapshots to be
-          made on a custom schedule.{" "}
+          There have been no {featureName}s made for {app?.name} yet. You can
+          manually trigger {featureName}s or you can set up automatic{" "}
+          {featureName}s to be made on a custom schedule.{" "}
         </p>
       ) : isVeleroInstalled ? (
         <p className="u-marginTop--10 u-fontSize--normal u-lineHeight--more u-fontWeight--medium u-textColor--bodyCopy">
-          Now that Velero is configured, you can start making snapshots. You can{" "}
           <Link to="/snapshots/settings" className="link u-fontSize--normal">
-            create a schedule{" "}
-          </Link>
-          for automatic snapshots or you can trigger one manually whenever you’d
-          like.
+            Create a schedule
+          </Link>{" "}
+          for automatic {featureName}s or take a {featureName} manually.
         </p>
       ) : (
         <p className="u-marginTop--10 u-fontSize--normal u-lineHeight--more u-fontWeight--medium u-textColor--bodyCopy">
@@ -50,7 +55,7 @@ export default function GettingStartedSnapshots(props) {
             Velero
           </a>{" "}
           installed in the cluster and configured to connect with the cloud
-          provider you want to send your backups to
+          provider you want to send your {featureName}s to
         </p>
       )}
       <div className="flex justifyContent--cenyer u-marginTop--20">
@@ -65,8 +70,8 @@ export default function GettingStartedSnapshots(props) {
           >
             {" "}
             {isVeleroInstalled
-              ? "Start a snapshot"
-              : "Configure snapshot settings"}
+              ? `Start a ${featureName}`
+              : `Configure ${featureName} settings`}
           </button>
         ) : (
           <button
@@ -79,8 +84,8 @@ export default function GettingStartedSnapshots(props) {
           >
             {" "}
             {isVeleroInstalled
-              ? "Start a snapshot"
-              : "Configure snapshot settings"}
+              ? `Start a ${featureName}`
+              : `Configure ${featureName} settings`}
           </button>
         )}
       </div>