Skip to content

Commit

Permalink
StepCard status support, migrate data with progress bars
Browse files Browse the repository at this point in the history
  • Loading branch information
@Spikatrix
Spikatrix committed Jul 29, 2024
1 parent ce427af commit 3433a96
Show file tree
Hide file tree
Showing 4 changed files with 358 additions and 123 deletions.
3 changes: 2 additions & 1 deletion yugabyted-ui/ui/src/components/YBAccordion/YBAccordion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ const useAccordionStyles = makeStyles((theme: Theme) => ({
},
shrinkContainer: {
display: 'flex',
flexShrink: 1
flexShrink: 1,
alignSelf: 'center'
},
//add more variants
primary: {
Expand Down
255 changes: 210 additions & 45 deletions yugabyted-ui/ui/src/features/clusters/details/migration/steps/data/NewMigrationData.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
import React, { FC } from "react";
import { Box, LinearProgress, Link, makeStyles, Typography, useTheme } from "@material-ui/core";
import {
Box,
LinearProgress,
Link,
makeStyles,
TablePagination,
Typography,
useTheme,
} from "@material-ui/core";
import type { Migration } from "../../MigrationOverview";
import { GenericFailure, YBButton } from "@app/components";
import { useTranslation } from "react-i18next";
Expand All @@ -18,6 +26,16 @@ const useStyles = makeStyles((theme) => ({
borderRadius: theme.shape.borderRadius,
boxShadow: theme.shadows[2],
},
progressbar: {
height: "8px",
borderRadius: "5px",
},
bar: {
borderRadius: "5px",
},
barBg: {
backgroundColor: theme.palette.grey[200],
},
}));

const exportDataPrereqs: React.ReactNode[] = [
Expand Down Expand Up @@ -61,9 +79,16 @@ export const MigrationData: FC<MigrationDataProps> = ({
const { t } = useTranslation();
const theme = useTheme();

const [page, setPage] = React.useState<number>(0);
const [perPage, setPerPage] = React.useState<number>(5);

const isErrorMigrationMetrics = false;
const isFetchingAPI = false;

const totalObjects = 25;
const completedObjects = 12;
const progress = Math.round((completedObjects / totalObjects) * 100);

return (
<Box>
<Box display="flex" justifyContent="space-between" alignItems="start">
Expand All @@ -86,52 +111,192 @@ export const MigrationData: FC<MigrationDataProps> = ({
{!(isFetching || isFetchingAPI || isErrorMigrationMetrics) && (
<>
<Box display="flex" flexDirection="column" gridGap={theme.spacing(2)}>
<StepCard title={t("clusterDetail.voyager.migrateData.dataExportSourceDB")}>
{(isDone) =>
!isDone ? (
<>
<Prereqs items={exportDataPrereqs} />
<StepDetails
heading={t("clusterDetail.voyager.migrateData.dataExport")}
message={t("clusterDetail.voyager.migrateData.dataExportDesc")}
docsText={t("clusterDetail.voyager.migrateData.dataExportLearn")}
docsLink="https://docs.yugabyte.com/preview/yugabyte-voyager/migrate/migrate-steps/#export-data"
/>
</>
) : (
<div>Progress bars</div>
)
}
<StepCard
title={t("clusterDetail.voyager.migrateData.dataExportSourceDB")}
renderChips={() => `${completedObjects}/${totalObjects} objects completed`}
isDone
>
{(status) => {
if (status === "TODO") {
return (
<>
<Prereqs items={exportDataPrereqs} />
<StepDetails
heading={t("clusterDetail.voyager.migrateData.dataExport")}
message={t("clusterDetail.voyager.migrateData.dataExportDesc")}
docsText={t("clusterDetail.voyager.migrateData.dataExportLearn")}
docsLink="https://docs.yugabyte.com/preview/yugabyte-voyager/migrate/migrate-steps/#export-data"
/>
</>
);
}

if (status === "IN_PROGRESS") {
return (
<Box
display="flex"
flexDirection="column"
gridGap={theme.spacing(4.5)}
mt={3.5}
>
{[1, 2, 3, 4].map(() => (
<Box>
<Box display="flex" justifyContent="space-between" mb={1.5}>
<Typography variant="body2">Object name</Typography>
<Typography variant="body2">{progress}% completed</Typography>
</Box>
<LinearProgress
classes={{
root: classes.progressbar,
colorPrimary: classes.barBg,
bar: classes.bar,
}}
variant="determinate"
value={progress}
/>
</Box>
))}
<Box ml="auto">
<TablePagination
component="div"
count={/* filteredData?.length || */ 25}
page={page}
onPageChange={(_, newPage) => setPage(newPage)}
rowsPerPageOptions={[5, 10, 20]}
rowsPerPage={perPage}
onRowsPerPageChange={(e) => setPerPage(parseInt(e.target.value, 10))}
/>
</Box>
</Box>
);
}

return null;
}}
</StepCard>
<StepCard title={t("clusterDetail.voyager.migrateData.dataImportTargetDB")}>
{(isDone) =>
!isDone ? (
<>
<StepDetails
heading={t("clusterDetail.voyager.migrateData.dataImport")}
message={t("clusterDetail.voyager.migrateData.dataImportDesc")}
docsText={t("clusterDetail.voyager.migrateData.dataImportLearn")}
docsLink="https://docs.yugabyte.com/preview/yugabyte-voyager/migrate/migrate-steps/#import-data"
/>
</>
) : (
<div>Progress bars</div>
)
}
<StepCard
title={t("clusterDetail.voyager.migrateData.dataImportTargetDB")}
renderChips={() => `${completedObjects}/${totalObjects} objects completed`}
isLoading
accordion
>
{(status) => {
if (status === "TODO") {
return (
<>
<StepDetails
heading={t("clusterDetail.voyager.migrateData.dataImport")}
message={t("clusterDetail.voyager.migrateData.dataImportDesc")}
docsText={t("clusterDetail.voyager.migrateData.dataImportLearn")}
docsLink="https://docs.yugabyte.com/preview/yugabyte-voyager/migrate/migrate-steps/#import-data"
/>
</>
);
}

if (status === "IN_PROGRESS") {
return (
<Box
display="flex"
flexDirection="column"
gridGap={theme.spacing(4.5)}
mt={3.5}
>
{[1, 2, 3, 4].map(() => (
<Box>
<Box display="flex" justifyContent="space-between" mb={1.5}>
<Typography variant="body2">Object name</Typography>
<Typography variant="body2">{progress}% completed</Typography>
</Box>
<LinearProgress
classes={{
root: classes.progressbar,
colorPrimary: classes.barBg,
bar: classes.bar,
}}
variant="determinate"
value={progress}
/>
</Box>
))}
<Box ml="auto">
<TablePagination
component="div"
count={/* filteredData?.length || */ 25}
page={page}
onPageChange={(_, newPage) => setPage(newPage)}
rowsPerPageOptions={[5, 10, 20]}
rowsPerPage={perPage}
onRowsPerPageChange={(e) => setPerPage(parseInt(e.target.value, 10))}
/>
</Box>
</Box>
);
}

return null;
}}
</StepCard>
<StepCard title={t("clusterDetail.voyager.migrateData.indexTriggerTargetDB")}>
{(isDone) =>
!isDone ? (
<>
<StepDetails
heading={t("clusterDetail.voyager.migrateData.indexTrigger")}
message={t("clusterDetail.voyager.migrateData.indexTriggerDesc")}
docsText={t("clusterDetail.voyager.migrateData.indexTriggerLearn")}
docsLink="https://docs.yugabyte.com/preview/yugabyte-voyager/migrate/migrate-steps/#import-data-status"
/>
</>
) : null
}
<StepCard
title={t("clusterDetail.voyager.migrateData.indexTriggerTargetDB")}
renderChips={() => `${completedObjects}/${totalObjects} objects completed`}
>
{(status) => {
if (status === "TODO") {
return (
<>
<StepDetails
heading={t("clusterDetail.voyager.migrateData.indexTrigger")}
message={t("clusterDetail.voyager.migrateData.indexTriggerDesc")}
docsText={t("clusterDetail.voyager.migrateData.indexTriggerLearn")}
docsLink="https://docs.yugabyte.com/preview/yugabyte-voyager/migrate/migrate-steps/#import-data-status"
/>
</>
);
}

if (status === "IN_PROGRESS") {
return (
<Box
display="flex"
flexDirection="column"
gridGap={theme.spacing(4.5)}
mt={3.5}
>
{[1, 2, 3, 4].map(() => (
<Box>
<Box display="flex" justifyContent="space-between" mb={1.5}>
<Typography variant="body2">Object name</Typography>
<Typography variant="body2">{progress}% completed</Typography>
</Box>
<LinearProgress
classes={{
root: classes.progressbar,
colorPrimary: classes.barBg,
bar: classes.bar,
}}
variant="determinate"
value={progress}
/>
</Box>
))}
<Box ml="auto">
<TablePagination
component="div"
count={/* filteredData?.length || */ 25}
page={page}
onPageChange={(_, newPage) => setPage(newPage)}
rowsPerPageOptions={[5, 10, 20]}
rowsPerPage={perPage}
onRowsPerPageChange={(e) => setPerPage(parseInt(e.target.value, 10))}
/>
</Box>
</Box>
);
}

return null;
}}
</StepCard>
</Box>
</>
Expand Down
Loading

0 comments on commit 3433a96

Please sign in to comment.