diff --git a/web/src/components/storage/VolumeLocationDialog.jsx b/web/src/components/storage/VolumeLocationDialog.jsx
index a8e944a24a..dc848601a3 100644
--- a/web/src/components/storage/VolumeLocationDialog.jsx
+++ b/web/src/components/storage/VolumeLocationDialog.jsx
@@ -22,7 +22,12 @@
// @ts-check
import React, { useState } from "react";
-import { Radio, Form } from "@patternfly/react-core";
+import {
+ Form,
+ MenuToggle,
+ Select, SelectOption, SelectList
+} from '@patternfly/react-core';
+
import { sprintf } from "sprintf-js";
import { _ } from "~/i18n";
@@ -70,6 +75,63 @@ const sanitizeTarget = (volume, device) => {
return targets.includes(volume.target) ? volume.target : defaultTarget(device);
};
+const SelectTarget = ({ volume, onSelect, selectedId }) => {
+ const TARGETS = [
+ {
+ id: "NEW_PARTITION",
+ label: _("Create a new partition"),
+ description: _("The file system will be allocated as a new partition at the selected disk.")
+ },
+ {
+ id: "DEVICE",
+ // TRANSLATORS: %s is replaced by a file system type (e.g., Ext4).
+ description: sprintf(_("The selected device will be formatted as %s file system."), volume.fsType),
+ label: _("Format the device")
+ },
+ {
+ id: "NEW_VG",
+ description: _("A new volume group will be allocated in the selected disk and the file system will be created as a logical volume."),
+ label: _("Create a dedicated LVM volume group")
+ },
+ {
+ id: "FILESYSTEM",
+ description: _("The current file system on the selected device will be mounted without formatting the device."),
+ label: _("Mount the file system")
+ }
+ ];
+
+ const [isOpen, setIsOpen] = useState(false);
+ const selected = TARGETS.find(t => t.id === selectedId);
+ const onToggleClick = () => setIsOpen(!isOpen);
+
+ const toggle = toggleRef => (
+