Skip to content

Commit

Permalink
feat:add os type to migration form
Browse files Browse the repository at this point in the history
  • Loading branch information
@tanaypf9
vaibhav authored and tanaypf9 committed Oct 31, 2024
1 parent 6e89e20 commit 0ac0fcb
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 49 deletions.
10 changes: 9 additions & 1 deletion ui/src/features/migration/MigrationForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@ import { pollForStatus } from "../pollForStatus"
import NetworkAndStorageMappingStep from "./NetworkAndStorageMappingStep"
import SourceAndDestinationEnvStep from "./SourceAndDestinationEnvStep"
import VmsSelectionStep from "./VmsSelectionStep"
import MigrationOptions, { CUTOVER_TYPES } from "./MigrationOptionsAlt"
import MigrationOptions from "./MigrationOptionsAlt"
import { CUTOVER_TYPES, OS_TYPES } from "./constants"

const StyledDrawer = styled(Drawer)(() => ({
"& .MuiDrawer-paper": {
Expand Down Expand Up @@ -65,6 +66,7 @@ export interface FormValues extends Record<string, unknown> {
cutoverEndTime?: string
postMigrationScript?: string
retryOnFailure?: boolean
osType?: string
}

export interface SelectedMigrationOptionsType extends Record<string, unknown> {
Expand All @@ -74,6 +76,7 @@ export interface SelectedMigrationOptionsType extends Record<string, unknown> {
cutoverStartTime: boolean
cutoverEndTime: boolean
postMigrationScript: boolean
osType: boolean
}

// Default state for checkboxes
Expand All @@ -84,6 +87,7 @@ const defaultMigrationOptions = {
cutoverStartTime: false,
cutoverEndTime: false,
postMigrationScript: false,
osType: false,
}

const defaultValues: Partial<FormValues> = {}
Expand Down Expand Up @@ -321,6 +325,10 @@ export default function MigrationFormDrawer({
spec: {
networkMapping: networkMappingsResource.metadata.name,
storageMapping: storageMappingsResource.metadata.name,
...(selectedMigrationOptions.osType &&
params.osType !== OS_TYPES.AUTO_DETECT && {
osType: params.osType,
}),
},
}
)
Expand Down
64 changes: 40 additions & 24 deletions ui/src/features/migration/MigrationOptions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,13 @@ import Accordion from "@mui/material/Accordion"
import AccordionSummary from "@mui/material/AccordionSummary"
import AccordionDetails from "@mui/material/AccordionDetails"
import ExpandMoreIcon from "@mui/icons-material/ExpandMore"
import {
CUTOVER_TYPES,
DATA_COPY_OPTIONS,
OS_TYPES_OPTIONS,
VM_CUTOVER_OPTIONS,
OS_TYPES,
} from "./constants"

// Styles
const FieldsContainer = styled("div")(({ theme }) => ({
Expand Down Expand Up @@ -54,27 +61,6 @@ interface MigrationOptionsPropsInterface {
getErrorsUpdater: (key: string | number) => (value: string) => void
}

// Constants
const DATA_COPY_METHODS = [
{ value: "hot", label: "Copy live VMs, then power off" },
{ value: "cold", label: "Power off live VMs, then copy" },
]

export enum CUTOVER_TYPES {
"IMMEDIATE" = "0",
"ADMIN_INITIATED" = "1",
"TIME_WINDOW" = "2",
}

const VM_CUTOVER_OPTIONS = [
{
value: CUTOVER_TYPES.IMMEDIATE,
label: "Cutover immediately after data copy",
},
{ value: CUTOVER_TYPES.ADMIN_INITIATED, label: "Admin initiated cutover" },
{ value: CUTOVER_TYPES.TIME_WINDOW, label: "Cutover during time window" },
]

// TODO - Commented out the non-required field from the options for now
// const PrePostWebHooksList = [
// { label: "Pre data-copy web hook", identifier: "preDataCopyWebHook" },
Expand All @@ -94,7 +80,8 @@ export default function MigrationOptions({
// Iniitialize fields
useEffect(() => {
onChange("dataCopyMethod")("hot")
onChange("cutoverOption")("0")
onChange("cutoverOption")(CUTOVER_TYPES.IMMEDIATE)
onChange("osType")(OS_TYPES.AUTO_DETECT)
}, [])

const getMinEndTime = useCallback(() => {
Expand Down Expand Up @@ -176,7 +163,7 @@ export default function MigrationOptions({
onChange("dataCopyMethod")(e.target.value)
}}
>
{DATA_COPY_METHODS.map((item) => (
{DATA_COPY_OPTIONS.map((item) => (
<MenuItem key={item.value} value={item.value}>
{item.label}
</MenuItem>
Expand Down Expand Up @@ -230,7 +217,7 @@ export default function MigrationOptions({
<Select
size="small"
disabled={!selectedMigrationOptions?.cutoverOption}
value={params?.cutoverOption || "0"}
value={params?.cutoverOption || CUTOVER_TYPES.IMMEDIATE}
onChange={(e) => {
onChange("cutoverOption")(e.target.value)
}}
Expand Down Expand Up @@ -301,6 +288,35 @@ export default function MigrationOptions({
/>
</Fields>

<Fields>
<FormControlLabel
id="os-type"
label="OS Type"
control={
<Checkbox
checked={selectedMigrationOptions.osType}
onChange={(e) => {
updateSelectedMigrationOptions("osType")(e.target.checked)
}}
/>
}
/>
<Select
size="small"
disabled={!selectedMigrationOptions?.osType}
value={params?.osType || OS_TYPES.AUTO_DETECT}
onChange={(e) => {
onChange("osType")(e.target.value)
}}
>
{OS_TYPES_OPTIONS.map((item) => (
<MenuItem key={item.value} value={item.value}>
{item.label}
</MenuItem>
))}
</Select>
</Fields>

{/* Pre and Post Web Hooks */}
{/* {PrePostWebHooksList.map((hook) => (
<Fields key={`${hook.label}-${hook.identifier}`}>
Expand Down
68 changes: 44 additions & 24 deletions ui/src/features/migration/MigrationOptionsAlt.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
Select,
styled,
TextField,
Typography,
} from "@mui/material"
import dayjs from "dayjs"
import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker"
Expand All @@ -23,6 +24,13 @@ import Accordion from "@mui/material/Accordion"
import AccordionSummary from "@mui/material/AccordionSummary"
import AccordionDetails from "@mui/material/AccordionDetails"
import ExpandMoreIcon from "@mui/icons-material/ExpandMore"
import {
CUTOVER_TYPES,
DATA_COPY_OPTIONS,
OS_TYPES,
OS_TYPES_OPTIONS,
VM_CUTOVER_OPTIONS,
} from "./constants"

// Styles
const FieldsContainer = styled("div")(({ theme }) => ({
Expand All @@ -44,7 +52,7 @@ const CustomTextField = styled(TextField)({
},
})

// Intefaces
// Interfaces
interface MigrationOptionsPropsInterface {
params: FormValues
onChange: (key: string) => (value: unknown) => void
Expand All @@ -56,27 +64,6 @@ interface MigrationOptionsPropsInterface {
getErrorsUpdater: (key: string | number) => (value: string) => void
}

// Constants
const DATA_COPY_METHODS = [
{ value: "hot", label: "Copy live VMs, then power off" },
{ value: "cold", label: "Power off live VMs, then copy" },
]

export enum CUTOVER_TYPES {
"IMMEDIATE" = "0",
"ADMIN_INITIATED" = "1",
"TIME_WINDOW" = "2",
}

const VM_CUTOVER_OPTIONS = [
{
value: CUTOVER_TYPES.IMMEDIATE,
label: "Cutover immediately after data copy",
},
{ value: CUTOVER_TYPES.ADMIN_INITIATED, label: "Admin initiated cutover" },
{ value: CUTOVER_TYPES.TIME_WINDOW, label: "Cutover during time window" },
]

// TODO - Commented out the non-required field from the options for now
// const PrePostWebHooksList = [
// { label: "Pre data-copy web hook", identifier: "preDataCopyWebHook" },
Expand All @@ -96,7 +83,8 @@ export default function MigrationOptionsAlt({
// Iniitialize fields
useEffect(() => {
onChange("dataCopyMethod")("hot")
onChange("cutoverOption")("0")
onChange("cutoverOption")(CUTOVER_TYPES.IMMEDIATE)
onChange("osType")(OS_TYPES.AUTO_DETECT)
}, [])

const getMinEndTime = useCallback(() => {
Expand Down Expand Up @@ -165,7 +153,7 @@ export default function MigrationOptionsAlt({
onChange("dataCopyMethod")(e.target.value)
}}
>
{DATA_COPY_METHODS.map((item) => (
{DATA_COPY_OPTIONS.map((item) => (
<MenuItem key={item.value} value={item.value}>
{item.label}
</MenuItem>
Expand Down Expand Up @@ -290,6 +278,35 @@ export default function MigrationOptionsAlt({
</Fields>

<Fields>
<FormControlLabel
id="os-type"
label="OS Type"
control={
<Checkbox
checked={selectedMigrationOptions.osType}
onChange={(e) => {
updateSelectedMigrationOptions("osType")(e.target.checked)
}}
/>
}
/>
<Select
size="small"
disabled={!selectedMigrationOptions?.osType}
value={params?.osType || OS_TYPES.AUTO_DETECT}
onChange={(e) => {
onChange("osType")(e.target.value)
}}
>
{OS_TYPES_OPTIONS.map((item) => (
<MenuItem key={item.value} value={item.value}>
{item.label}
</MenuItem>
))}
</Select>
</Fields>

<Fields sx={{ gridGap: "0" }}>
{/* Retry on failure */}
<FormControlLabel
label="Retry On Failure"
Expand All @@ -302,6 +319,9 @@ export default function MigrationOptionsAlt({
/>
}
/>
<Typography variant="caption" sx={{ marginLeft: "32px" }}>
Select this option to retry the migration incase of failure
</Typography>
</Fields>

{/* Pre and Post Web Hooks */}
Expand Down
33 changes: 33 additions & 0 deletions ui/src/features/migration/constants.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
// Constants

export enum CUTOVER_TYPES {
"IMMEDIATE" = "0",
"ADMIN_INITIATED" = "1",
"TIME_WINDOW" = "2",
}

export enum OS_TYPES {
"AUTO_DETECT" = "default",
"WINDOWS" = "windows",
"LINUX" = "linux",
}

export const DATA_COPY_OPTIONS = [
{ value: "hot", label: "Copy live VMs, then power off" },
{ value: "cold", label: "Power off live VMs, then copy" },
]

export const OS_TYPES_OPTIONS = [
{ value: OS_TYPES.AUTO_DETECT, label: "Auto-detect" },
{ value: OS_TYPES.WINDOWS, label: "Windows" },
{ value: OS_TYPES.LINUX, label: "Linux" },
]

export const VM_CUTOVER_OPTIONS = [
{
value: CUTOVER_TYPES.IMMEDIATE,
label: "Cutover immediately after data copy",
},
{ value: CUTOVER_TYPES.ADMIN_INITIATED, label: "Admin initiated cutover" },
{ value: CUTOVER_TYPES.TIME_WINDOW, label: "Cutover during time window" },
]

0 comments on commit 0ac0fcb

Please sign in to comment.