From a0200f41525144be0e2b23cedc99f030ec05fad7 Mon Sep 17 00:00:00 2001
From: Eric Wang <eric.wang401@gmail.com>
Date: Tue, 3 Jan 2023 16:45:41 +0000
Subject: [PATCH] add more info to boot order config

---
 app/Data/Server/Proxmox/Config/DiskData.php   |  3 +
 app/Services/Servers/AllocationService.php    |  4 +-
 .../scripts/api/server/useServerDetails.ts    |  4 ++
 .../servers/settings/HardwareContainer.tsx    | 57 ++++++++++++++++---
 4 files changed, 60 insertions(+), 8 deletions(-)

diff --git a/app/Data/Server/Proxmox/Config/DiskData.php b/app/Data/Server/Proxmox/Config/DiskData.php
index d004568a..8c2aa738 100644
--- a/app/Data/Server/Proxmox/Config/DiskData.php
+++ b/app/Data/Server/Proxmox/Config/DiskData.php
@@ -2,11 +2,14 @@
 
 namespace Convoy\Data\Server\Proxmox\Config;
 
+use Spatie\LaravelData\Attributes\Validation\In;
 use Spatie\LaravelData\Data;
 
 class DiskData extends Data
 {
     public function __construct(
+        #[In(['disk', 'media'])]
+        public string $type,
         public string  $name,
         public int     $size,
         public ?string $display_name,
diff --git a/app/Services/Servers/AllocationService.php b/app/Services/Servers/AllocationService.php
index c692142d..37542a4d 100644
--- a/app/Services/Servers/AllocationService.php
+++ b/app/Services/Servers/AllocationService.php
@@ -36,6 +36,7 @@ class AllocationService extends ProxmoxService
 
         return DiskData::collection(Arr::map($disks, function ($rawDisk) use ($isos, $server) {
             $disk = [
+                'type' => 'disk',
                 'name' => Arr::get($rawDisk, 'key'),
                 'size' => 0,
             ];
@@ -47,6 +48,7 @@ class AllocationService extends ProxmoxService
             $disk['size'] = $this->convertToBytes($sizeMatches[1]);
 
             if (str_contains($value, 'media')) {
+                $disk['type'] = 'media';
                 // this piece of code adds the name of the mounted ISO
                 if (preg_match("/\/(.*\.iso)/s", $value, $fileNameMatches)) {
                     if ($iso = $isos->where('file_name', $fileNameMatches[1])->first()) {
@@ -59,7 +61,7 @@ class AllocationService extends ProxmoxService
                 $lowerBound = $server->disk - 1024;
 
                 if ($disk['size'] < $upperBound && $disk['size'] > $lowerBound) {
-                    $disk['display_name'] = 'Primary';
+                    $disk['display_name'] = 'Primary Disk';
                 }
             }
 
diff --git a/resources/scripts/api/server/useServerDetails.ts b/resources/scripts/api/server/useServerDetails.ts
index c685c569..49da885b 100644
--- a/resources/scripts/api/server/useServerDetails.ts
+++ b/resources/scripts/api/server/useServerDetails.ts
@@ -3,7 +3,10 @@ import { ServerState } from '@/api/server/getStatus'
 import useSWR from 'swr'
 import http from '@/api/http'
 
+export type DiskType = 'disk' | 'media'
+
 export interface Disk {
+    type: DiskType
     name: string
     size: number
     displayName: string | null
@@ -34,6 +37,7 @@ export interface ServerDetails {
 }
 
 export const rawDataToDisk = (data: any): Disk => ({
+    type: data.type,
     name: data.name,
     size: data.size,
     displayName: data.display_name,
diff --git a/resources/scripts/components/servers/settings/HardwareContainer.tsx b/resources/scripts/components/servers/settings/HardwareContainer.tsx
index fa6a6218..af7e11f6 100644
--- a/resources/scripts/components/servers/settings/HardwareContainer.tsx
+++ b/resources/scripts/components/servers/settings/HardwareContainer.tsx
@@ -24,6 +24,7 @@ import { PlusIcon, XMarkIcon } from '@heroicons/react/20/solid'
 import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
 import updateBootOrder from '@/api/server/settings/updateBootOrder'
 import { Disk } from '@/api/server/useServerDetails'
+import { Badge } from '@mantine/core'
 
 const HardwareContainer = () => {
     const server = ServerContext.useStoreState(state => state.server.data!)
@@ -167,8 +168,8 @@ const BootOrderContainer = () => {
 
         if (over && active.id !== over.id) {
             setBootOrder(items => {
-                const oldIndex = items.indexOf(active.id as string)
-                const newIndex = items.indexOf(over.id as string)
+                const oldIndex = items.findIndex(disk => disk.name === (active.id as string))
+                const newIndex = items.findIndex(disk => disk.name === (over.id as string))
 
                 return arrayMove(items, oldIndex, newIndex)
             })
@@ -236,7 +237,11 @@ const BootOrderContainer = () => {
                                     >
                                         {({ attributes, listeners }: ChildrenPropsWithHandle) => (
                                             <>
-                                                <button className='bg-transparent p-1' {...attributes} {...listeners}>
+                                                <button
+                                                    className='bg-transparent touch-none p-1'
+                                                    {...attributes}
+                                                    {...listeners}
+                                                >
                                                     <img
                                                         src={DragVerticalIcon}
                                                         className='h-6 w-6 dark:invert'
@@ -245,11 +250,29 @@ const BootOrderContainer = () => {
                                                 </button>
                                                 <div className='flex justify-between w-full items-center'>
                                                     {disk.displayName ? (
-                                                        <div>
-                                                            <span className='text-foreground'>{disk.displayName}</span>
+                                                        <div className={'flex flex-col'}>
+                                                            <div className={'flex space-x-3'}>
+                                                                <span className='text-foreground'>
+                                                                    {disk.displayName}
+                                                                </span>
+                                                                {disk.type === 'media' ? <Badge>Media</Badge> : null}
+                                                            </div>
+
+                                                            <span className='description-small'>
+                                                                {disk.name}, {bytesToString(disk.size)}
+                                                            </span>
                                                         </div>
                                                     ) : (
-                                                        <span className='text-foreground'>{disk.name}</span>
+                                                        <div className={'flex flex-col'}>
+                                                            <div className={'flex space-x-3'}>
+                                                                <span className='text-foreground'>{disk.name}</span>
+                                                                {disk.type === 'media' ? <Badge>Media</Badge> : null}
+                                                            </div>
+
+                                                            <span className='description-small'>
+                                                                {bytesToString(disk.size)}
+                                                            </span>
+                                                        </div>
                                                     )}
 
                                                     <button
@@ -274,7 +297,27 @@ const BootOrderContainer = () => {
                         {unusedDevices.map(device => (
                             <div key={device.name} className='py-2 pl-4 pr-2 border border-accent-200 rounded'>
                                 <div className='flex justify-between w-full items-center'>
-                                    <span className='text-foreground'>{device.name}</span>
+                                    {device.displayName ? (
+                                        <div className={'flex flex-col'}>
+                                            <div className={'flex space-x-3'}>
+                                                <span className='text-foreground'>{device.displayName}</span>
+                                                {device.type === 'media' ? <Badge>Media</Badge> : null}
+                                            </div>
+
+                                            <span className='description-small'>
+                                                {device.name}, {bytesToString(device.size)}
+                                            </span>
+                                        </div>
+                                    ) : (
+                                        <div className={'flex flex-col'}>
+                                            <div className={'flex space-x-3'}>
+                                                <span className='text-foreground'>{device.name}</span>
+                                                {device.type === 'media' ? <Badge>Media</Badge> : null}
+                                            </div>
+
+                                            <span className='description-small'>{bytesToString(device.size)}</span>
+                                        </div>
+                                    )}
                                     <button onClick={() => addDevice(device)} className='bg-transparent p-1'>
                                         <PlusIcon className='h-6 w-6 text-accent-500' />
                                     </button>