From 96091d69bceeb2ea39d1a6bd8bd73305f771737f Mon Sep 17 00:00:00 2001
From: Spikatrix <12792882+Spikatrix@users.noreply.github.com>
Date: Tue, 13 Aug 2024 05:52:47 +0000
Subject: [PATCH] Update no migration page UI
---
yugabyted-ui/ui/src/assets/migration48.svg | 8 ++
.../details/migration/MigrationGetStarted.tsx | 108 +++++++++++-------
.../details/migration/MigrationList.tsx | 2 +-
yugabyted-ui/ui/src/translations/en.json | 6 +
4 files changed, 83 insertions(+), 41 deletions(-)
create mode 100644 yugabyted-ui/ui/src/assets/migration48.svg
diff --git a/yugabyted-ui/ui/src/assets/migration48.svg b/yugabyted-ui/ui/src/assets/migration48.svg
new file mode 100644
index 000000000000..28408178f384
--- /dev/null
+++ b/yugabyted-ui/ui/src/assets/migration48.svg
@@ -0,0 +1,8 @@
+
+
diff --git a/yugabyted-ui/ui/src/features/clusters/details/migration/MigrationGetStarted.tsx b/yugabyted-ui/ui/src/features/clusters/details/migration/MigrationGetStarted.tsx
index 0fc9d60edcbf..d26a31aec96a 100644
--- a/yugabyted-ui/ui/src/features/clusters/details/migration/MigrationGetStarted.tsx
+++ b/yugabyted-ui/ui/src/features/clusters/details/migration/MigrationGetStarted.tsx
@@ -1,59 +1,87 @@
import React, { FC } from "react";
-import { Box, Paper, Typography } from "@material-ui/core";
+import { Box, Link, Paper, Typography, useTheme } from "@material-ui/core";
import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
-
-import { YBButton } from "@app/components";
-
-import WelcomeCloudImage from "@app/assets/welcome-cloud-image.svg";
-
+import MigrateIcon from "@app/assets/migration48.svg";
+import BookIcon from "@app/assets/book.svg";
import { makeStyles } from "@material-ui/core";
+import { YBButton } from "@app/components";
+import RefreshIcon from "@app/assets/refresh.svg";
const MIGRATIONS_DOCS = "https://docs.yugabyte.com/preview/yugabyte-voyager/migrate-steps/";
export const useStyles = makeStyles((theme) => ({
- root: {
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- maxWidth: 1200,
- width: "100%",
- minHeight: 325,
- padding: theme.spacing(0, 4),
- margin: theme.spacing(0, "auto"),
- borderRadius: theme.shape.borderRadius,
- border: "none",
+ paper: {
+ border: "1px dashed",
+ borderColor: theme.palette.primary[300],
+ backgroundColor: theme.palette.primary[100],
+ textAlign: "center",
+ },
+ icon: {
+ marginTop: theme.spacing(1),
+ flexShrink: 0,
},
+ message: {
+ color: theme.palette.grey[700],
+ },
+ refreshButton: {
+ marginLeft: "auto",
+ width: "fit-content",
+ marginBottom: theme.spacing(2),
+ }
}));
-export const MigrationsGetStarted: FC = () => {
+type MigrationsGetStartedProps = {
+ onRefresh?: () => void;
+};
+
+export const MigrationsGetStarted: FC = ({ onRefresh }) => {
const classes = useStyles();
+ const theme = useTheme();
const { t } = useTranslation();
return (
-
-
-
-
-
- {t("clusterDetail.voyager.noMigrations")}
-
-
-
- {t("clusterDetail.voyager.getStarted")}
+
+
+ } onClick={onRefresh}>
+ {t("clusterDetail.performance.actions.refresh")}
+
+
+
+
+
+
+
+ {t("clusterDetail.voyager.gettingStarted.noMigrations")}
+
+ {t("clusterDetail.voyager.gettingStarted.noMigrationsDesc")}
+
+
+
+
+ {t("clusterDetail.voyager.gettingStarted.learnMore")}
+
+
+
+ Note!
+
+ {t("clusterDetail.voyager.gettingStarted.refreshNote")}
+
+
-
- {t("clusterDetail.voyager.learnMore")}
-
-
-
+
+
);
};
diff --git a/yugabyted-ui/ui/src/features/clusters/details/migration/MigrationList.tsx b/yugabyted-ui/ui/src/features/clusters/details/migration/MigrationList.tsx
index 9a8a0b438442..29d861a3878d 100644
--- a/yugabyted-ui/ui/src/features/clusters/details/migration/MigrationList.tsx
+++ b/yugabyted-ui/ui/src/features/clusters/details/migration/MigrationList.tsx
@@ -434,7 +434,7 @@ export const MigrationList: FC = ({
);
if (!migrationDataProp?.length && !hasError) {
- return ;
+ return ;
}
const completedCount = 1;
diff --git a/yugabyted-ui/ui/src/translations/en.json b/yugabyted-ui/ui/src/translations/en.json
index d81a92913448..5201e1b2cb4d 100644
--- a/yugabyted-ui/ui/src/translations/en.json
+++ b/yugabyted-ui/ui/src/translations/en.json
@@ -895,6 +895,12 @@
"refreshing": "Refreshing",
"getStarted": "Use YugabyteDB Voyager to manage end-to-end database migration, including cluster preparation, schema migration, and data migration. Voyager safely migrates data from PostgreSQL, MySQL, and Oracle databases to YugabyteDB Managed, YugabyteDB Anywhere, and the core open source database, YugabyteDB.",
"learnMore": "Learn more",
+ "gettingStarted": {
+ "noMigrations": "You don't have any migrations",
+ "noMigrationsDesc": "Prepare your migrations by installing Voyager and preparing your source and target database.",
+ "learnMore": "Learn how to prepare your migration",
+ "refreshNote": "Refresh the page after connecting to your Voyager instance to see your migrations."
+ },
"sourceDBSidePanel": {
"sourceDatabase": "Source Database",
"hostname": "Hostname",