Use the name and size from the new disks property (#15954)

* Use the name and size from the new disks property

* Move SN down to secondary

src/data/hassio/host.ts

@@ -28,8 +28,19 @@ export interface HassioHassOSInfo {
   data_disk: string;
 }
 
+export interface Datadisk {
+  name: string;
+  vendor: string;
+  model: string;
+  serial: string;
+  size: number;
+  id: string;
+  dev_path: string;
+}
+
 export interface DatadiskList {
   devices: string[];
+  disks: Datadisk[];
 }
 
 export const fetchHassioHostInfo = async (

src/panels/config/storage/dialog-move-datadisk.ts

@@ -22,6 +22,7 @@ import {
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { haStyle, haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
+import { bytesToString } from "../../../util/bytes-to-string";
 import { MoveDatadiskDialogParams } from "./show-dialog-move-datadisk";
 
 const calculateMoveTime = memoizeOne((hostInfo: HassioHostInfo): number => {
@@ -39,7 +40,7 @@ class MoveDatadiskDialog extends LitElement {
 
   @state() private _selectedDevice?: string;
 
-  @state() private _devices?: DatadiskList["devices"];
+  @state() private _disks?: DatadiskList["disks"];
 
   @state() private _osInfo?: HassioHassOSInfo;
 
@@ -55,7 +56,7 @@ class MoveDatadiskDialog extends LitElement {
 
       const data = await listDatadisks(this.hass);
       if (data.devices.length > 0) {
-        this._devices = data.devices;
+        this._disks = data.disks;
       } else {
         this.closeDialog();
         await showAlertDialog(this, {
@@ -80,7 +81,7 @@ class MoveDatadiskDialog extends LitElement {
 
   public closeDialog(): void {
     this._selectedDevice = undefined;
-    this._devices = undefined;
+    this._disks = undefined;
     this._moving = false;
     this._hostInfo = undefined;
     this._osInfo = undefined;
@@ -88,7 +89,7 @@ class MoveDatadiskDialog extends LitElement {
   }
 
   protected render() {
-    if (!this._hostInfo || !this._osInfo || !this._devices) {
+    if (!this._hostInfo || !this._osInfo || !this._disks) {
       return nothing;
     }
 
@@ -132,10 +133,19 @@ class MoveDatadiskDialog extends LitElement {
                 dialogInitialFocus
                 fixedMenuPosition
               >
-                ${this._devices.map(
+                ${this._disks.map(
-                  (device) =>
+                  (disk) =>
-                    html`<mwc-list-item .value=${device}>
+                    html`<mwc-list-item twoline .value=${disk.id}>
-                      ${device}
+                      <span>${disk.vendor} ${disk.model}</span>
+                      <span slot="secondary">
+                        ${this.hass.localize(
+                          "ui.panel.config.storage.datadisk.extra_information",
+                          {
+                            size: bytesToString(disk.size),
+                            serial: disk.serial,
+                          }
+                        )}
+                      </span>
                     </mwc-list-item>`
                 )}
               </ha-select>

src/translations/en.json

@@ -3861,6 +3861,7 @@
           "datadisk": {
             "title": "Move datadisk",
             "description": "You are currently using ''{current_path}'' as datadisk. Moving data disks will reboot your device and it's estimated to take {time} minutes. Your Home Assistant installation will not be accessible during this period. Do not disconnect the power during the move!",
+            "extra_information": "Size: {size}, S/N: {serial}",
             "select_device": "Select new datadisk",
             "no_devices_title": "No suitable storage found",
             "no_devices_text": "There is no suitable external device found. The storage capacity of the external data disk must be larger than the storage capacity of the existing disk",
@@ -4541,7 +4542,6 @@
               "white": "White"
             }
           },
-
           "cardpicker": {
             "no_description": "No description available.",
             "custom_card": "Custom",