+ ${this.moving
+ ? html`
+
+
+
+
+
+ ${this.dialogParams.supervisor.localize(
+ "dialog.datadisk_move.moving_desc"
+ )}
+
`
+ : html`
+
+
+ ${this.devices?.length
+ ? html`
+ ${this.dialogParams.supervisor.localize(
+ "dialog.datadisk_move.description",
+ {
+ current_path: this.dialogParams.supervisor.os.data_disk,
+ time: calculateMoveTime(this.dialogParams.supervisor),
+ }
+ )}
+
+
+
+
+ ${this.devices.map(
+ (device) => html`${device}`
+ )}
+
+
+ `
+ : this.devices === undefined
+ ? this.dialogParams.supervisor.localize(
+ "dialog.datadisk_move.loading_devices"
+ )
+ : this.dialogParams.supervisor.localize(
+ "dialog.datadisk_move.no_devices"
+ )}
+
+
+ ${this.dialogParams.supervisor.localize(
+ "dialog.datadisk_move.cancel"
+ )}
+
+
+
+ ${this.dialogParams.supervisor.localize(
+ "dialog.datadisk_move.move"
+ )}
+ `}
+
+ `;
+ }
+
+ private _select_device(event) {
+ this.selectedDevice = event.detail.value;
+ }
+
+ private async _moveDatadisk() {
+ this.moving = true;
+ try {
+ await moveDatadisk(this.hass, this.selectedDevice!);
+ } catch (err) {
+ if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
+ showAlertDialog(this, {
+ title: this.dialogParams!.supervisor.localize(
+ "system.host.failed_to_move"
+ ),
+ text: extractApiErrorMessage(err),
+ });
+ this.closeDialog();
+ }
+ }
+ }
+
+ static get styles(): CSSResultGroup {
+ return [
+ haStyle,
+ haStyleDialog,
+ css`
+ paper-dropdown-menu {
+ width: 100%;
+ }
+ ha-circular-progress {
+ display: block;
+ margin: 32px;
+ text-align: center;
+ }
+
+ .progress-text {
+ text-align: center;
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "dialog-hassio-datadisk": HassioDatadiskDialog;
+ }
+}
diff --git a/hassio/src/dialogs/datadisk/show-dialog-hassio-datadisk.ts b/hassio/src/dialogs/datadisk/show-dialog-hassio-datadisk.ts
new file mode 100644
index 0000000000..c7a7d92b85
--- /dev/null
+++ b/hassio/src/dialogs/datadisk/show-dialog-hassio-datadisk.ts
@@ -0,0 +1,17 @@
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
+
+export interface HassioDatatiskDialogParams {
+ supervisor: Supervisor;
+}
+
+export const showHassioDatadiskDialog = (
+ element: HTMLElement,
+ dialogParams: HassioDatatiskDialogParams
+): void => {
+ fireEvent(element, "show-dialog", {
+ dialogTag: "dialog-hassio-datadisk",
+ dialogImport: () => import("./dialog-hassio-datadisk"),
+ dialogParams,
+ });
+};
diff --git a/hassio/src/system/hassio-host-info.ts b/hassio/src/system/hassio-host-info.ts
index 60256bbe64..5592d23ee0 100644
--- a/hassio/src/system/hassio-host-info.ts
+++ b/hassio/src/system/hassio-host-info.ts
@@ -1,5 +1,4 @@
import "@material/mwc-button";
-import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import "@material/mwc-list/mwc-list-item";
import { mdiDotsVertical } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
@@ -40,8 +39,9 @@ import {
roundWithOneDecimal,
} from "../../../src/util/calculate";
import "../components/supervisor-metric";
-import { showNetworkDialog } from "../dialogs/network/show-dialog-network";
+import { showHassioDatadiskDialog } from "../dialogs/datadisk/show-dialog-hassio-datadisk";
import { showHassioHardwareDialog } from "../dialogs/hardware/show-dialog-hassio-hardware";
+import { showNetworkDialog } from "../dialogs/network/show-dialog-network";
import { hassioStyle } from "../resources/hassio-style";
@customElement("hassio-host-info")
@@ -180,20 +180,27 @@ class HassioHostInfo extends LitElement {
`
: ""}
-