DesktopCardComponent.razor 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614
  1. @using RackPeek.Domain.Resources.Desktops
  2. @using RackPeek.Domain.Resources.SubResources
  3. @using RackPeek.Domain.UseCases.Cpus
  4. @using RackPeek.Domain.UseCases.Drives
  5. @using RackPeek.Domain.UseCases.Gpus
  6. @using RackPeek.Domain.UseCases.Nics
  7. @inject IGetResourceByNameUseCase<Desktop> GetByNameUseCase
  8. @inject UpdateDesktopUseCase UpdateUseCase
  9. @inject IDeleteResourceUseCase<Desktop> DeleteUseCase
  10. @inject IAddCpuUseCase<Desktop> AddCpuUseCase
  11. @inject IUpdateCpuUseCase<Desktop> UpdateCpuUseCase
  12. @inject IRemoveCpuUseCase<Desktop> RemoveCpuUseCase
  13. @inject IAddDriveUseCase<Desktop> AddDriveUseCase
  14. @inject IUpdateDriveUseCase<Desktop> UpdateDriveUseCase
  15. @inject IRemoveDriveUseCase<Desktop> RemoveDriveUseCase
  16. @inject IAddNicUseCase<Desktop> AddNicUseCase
  17. @inject IUpdateNicUseCase<Desktop> UpdateNicUseCase
  18. @inject IRemoveNicUseCase<Desktop> RemoveNicUseCase
  19. @inject IAddGpuUseCase<Desktop> AddGpuUseCase
  20. @inject IUpdateGpuUseCase<Desktop> UpdateGpuUseCase
  21. @inject IRemoveGpuUseCase<Desktop> RemoveGpuUseCase
  22. @inject ICloneResourceUseCase<Desktop> CloneUseCase
  23. @inject IRenameResourceUseCase<Desktop> RenameUseCase
  24. @inject NavigationManager Nav
  25. <div class="border border-zinc-800 rounded p-4 bg-zinc-900"
  26. data-testid=@($"desktop-item-{Desktop.Name.Replace(" ", "-")}")>
  27. <div class="flex justify-between items-center mb-3">
  28. <div class="text-zinc-100 hover:text-emerald-300">
  29. <NavLink href="@($"resources/hardware/{Desktop.Name}")"
  30. class="block"
  31. data-testid=@($"desktop-item-{Desktop.Name.Replace(" ", "-")}-link")>
  32. @Desktop.Name
  33. </NavLink>
  34. </div>
  35. <div class="flex items-center gap-2">
  36. @if (!string.IsNullOrWhiteSpace(Desktop.Model))
  37. {
  38. <span class="text-xs text-zinc-400"
  39. data-testid="desktop-model-badge">
  40. @Desktop.Model
  41. </span>
  42. }
  43. <button data-testid="rename-desktop-button"
  44. class="text-xs text-blue-400 hover:text-blue-300 transition"
  45. @onclick="OpenRename">
  46. Rename
  47. </button>
  48. <button data-testid="clone-desktop-button"
  49. class="text-xs text-emerald-400 hover:text-emerald-300 transition"
  50. @onclick="OpenClone">
  51. Clone
  52. </button>
  53. <button data-testid="delete-desktop-button"
  54. class="text-xs text-red-400 hover:text-red-300 transition"
  55. @onclick="ConfirmDelete">
  56. Delete
  57. </button>
  58. </div>
  59. </div>
  60. <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
  61. <!-- CPU -->
  62. <div data-testid="desktop-cpu-section">
  63. <div class="flex items-center justify-between mb-1 group">
  64. <div class="text-zinc-400">
  65. CPU
  66. <button data-testid="add-cpu-button"
  67. class="hover:text-emerald-400 transition"
  68. @onclick="OpenAddCpu">
  69. +
  70. </button>
  71. </div>
  72. </div>
  73. @if (Desktop.Cpus?.Any() == true)
  74. {
  75. @foreach (var cpu in Desktop.Cpus)
  76. {
  77. <div class="flex items-center justify-between text-zinc-300 group hover:bg-zinc-800/40 rounded px-1 py-0.5">
  78. <button data-testid=@($"edit-cpu-{cpu.ToString().Replace(" ", "-")}")
  79. class="hover:text-emerald-400"
  80. @onclick="() => OpenEditCpu(cpu)">
  81. @cpu.Model — @cpu.Cores cores / @cpu.Threads threads
  82. </button>
  83. </div>
  84. }
  85. }
  86. </div>
  87. <!-- RAM -->
  88. <div data-testid="desktop-ram-section">
  89. <div class="text-zinc-400 mb-1">
  90. RAM
  91. <button data-testid="edit-ram-button"
  92. class="hover:text-emerald-400 transition"
  93. @onclick="EditRam">
  94. +
  95. </button>
  96. </div>
  97. @if (Desktop.Ram is not null)
  98. {
  99. <div class="flex items-center justify-between text-zinc-300 group hover:bg-zinc-800/40 rounded px-1 py-0.5">
  100. <button data-testid="ram-value-button"
  101. class="hover:text-emerald-400"
  102. @onclick="EditRam">
  103. @($"{Desktop.Ram.Size} GB {Desktop.Ram.Mts} MT/s")
  104. </button>
  105. </div>
  106. }
  107. </div>
  108. <!-- Drives -->
  109. <div data-testid="desktop-drive-section">
  110. <div class="flex items-center justify-between mb-1 group">
  111. <div class="text-zinc-400">
  112. Drives
  113. <button data-testid="add-drive-button"
  114. class="hover:text-emerald-400 transition"
  115. @onclick="OpenAddDrive">
  116. +
  117. </button>
  118. </div>
  119. </div>
  120. @if (Desktop.Drives?.Any() == true)
  121. {
  122. @foreach (var drive in Desktop.Drives)
  123. {
  124. <div class="flex items-center justify-between text-zinc-300 group hover:bg-zinc-800/40 rounded px-1 py-0.5">
  125. <button data-testid=@($"edit-drive-{drive.Type}-{drive.Size}")
  126. class="hover:text-emerald-400"
  127. @onclick="() => OpenEditDrive(drive)">
  128. @drive.Type — @drive.Size GB
  129. </button>
  130. </div>
  131. }
  132. }
  133. </div>
  134. <!-- NICs -->
  135. <div data-testid="desktop-nic-section">
  136. <div class="flex items-center justify-between mb-1 group">
  137. <div class="text-zinc-400">
  138. NICs
  139. <button data-testid="add-nic-button"
  140. class="hover:text-emerald-400 transition"
  141. @onclick="OpenAddNic">
  142. +
  143. </button>
  144. </div>
  145. </div>
  146. @if (Desktop.Nics?.Any() == true)
  147. {
  148. @foreach (var nic in Desktop.Nics)
  149. {
  150. <div class="flex items-center justify-between text-zinc-300 group hover:bg-zinc-800/40 rounded px-1 py-0.5">
  151. <button data-testid=@($"edit-nic-{nic.Type}-{nic.Speed}")
  152. class="hover:text-emerald-400"
  153. @onclick="() => OpenEditNic(nic)">
  154. @nic.Type — @nic.Speed Gbps (@nic.Ports ports)
  155. </button>
  156. </div>
  157. }
  158. }
  159. </div>
  160. <!-- GPUs -->
  161. <div data-testid="desktop-gpu-section">
  162. <div class="flex items-center justify-between mb-1 group">
  163. <div class="text-zinc-400">
  164. GPUs
  165. <button data-testid="add-gpu-button"
  166. class="hover:text-emerald-400 transition"
  167. @onclick="OpenAddGpu">
  168. +
  169. </button>
  170. </div>
  171. </div>
  172. @if (Desktop.Gpus?.Any() == true)
  173. {
  174. @foreach (var gpu in Desktop.Gpus)
  175. {
  176. <div class="flex items-center justify-between text-zinc-300 group hover:bg-zinc-800/40 rounded px-1 py-0.5">
  177. <button data-testid=@($"edit-gpu-{gpu.Model}-{gpu.Vram}")
  178. class="hover:text-emerald-400"
  179. @onclick="() => OpenEditGpu(gpu)">
  180. @gpu.Model — @gpu.Vram GB VRAM
  181. </button>
  182. </div>
  183. }
  184. }
  185. </div>
  186. <ResourceTagEditor Resource="Desktop"
  187. TestIdPrefix="desktop" />
  188. </div>
  189. <div class="md:col-span-2" data-testid="desktop-notes-section">
  190. <div class="text-zinc-400 mb-1">Notes</div>
  191. @if (!_editingNotes)
  192. {
  193. <MarkdownViewer Value="@Desktop.Notes"
  194. ShowEditButton="true"
  195. OnEdit="BeginNotesEdit"
  196. TestIdPrefix="desktop-notes-viewer"/>
  197. }
  198. else
  199. {
  200. <MarkdownEditor @bind-Value="_notesDraft"
  201. ShowActionButtons="true"
  202. OnSave="SaveNotes"
  203. OnCancel="CancelNotesEdit"
  204. TestIdPrefix="desktop-notes-editor"/>
  205. }
  206. </div>
  207. </div>
  208. <ConfirmModal IsOpen="_confirmDeleteOpen"
  209. IsOpenChanged="v => _confirmDeleteOpen = v"
  210. Title="Delete desktop"
  211. ConfirmText="Delete"
  212. ConfirmClass="bg-red-600 hover:bg-red-500"
  213. OnConfirm="DeleteServer"
  214. TestIdPrefix="Desktop">
  215. Are you sure you want to delete <strong>@Desktop.Name</strong>?
  216. </ConfirmModal>
  217. <StringValueModal IsOpen="_renameOpen"
  218. IsOpenChanged="v => _renameOpen = v"
  219. Title="Rename desktop"
  220. Description="Enter a new name for this desktop"
  221. Label="New desktop name"
  222. Value="@Desktop.Name"
  223. OnSubmit="HandleRenameSubmit"
  224. TestIdPrefix="desktop-rename"/>
  225. <StringValueModal IsOpen="_cloneOpen"
  226. IsOpenChanged="v => _cloneOpen = v"
  227. Title="Clone resource"
  228. Description="Enter a name for the cloned resource"
  229. Label="New resource name"
  230. Value="@($"{Desktop.Name}-copy")"
  231. OnSubmit="HandleCloneSubmit"
  232. TestIdPrefix="desktop-clone"/>
  233. <CpuModal IsOpen="@_cpuModalOpen"
  234. IsOpenChanged="v => _cpuModalOpen = v"
  235. Value="@_editingCpu"
  236. OnSubmit="HandleCpuSubmit"
  237. OnDelete="HandleCpuDelete"
  238. TestIdPrefix="desktop"/>
  239. <RamModal IsOpen="@_isRamModalOpen"
  240. IsOpenChanged="v => _isRamModalOpen = v"
  241. Value="@Desktop.Ram"
  242. OnSubmit="HandleRamSubmit"
  243. TestIdPrefix="desktop"/>
  244. <DriveModal IsOpen="@_driveModalOpen"
  245. IsOpenChanged="v => _driveModalOpen = v"
  246. Value="@_editingDrive"
  247. OnSubmit="HandleDriveSubmit"
  248. OnDelete="HandleDriveDelete"
  249. TestIdPrefix="desktop"/>
  250. <GpuModal IsOpen="@_gpuModalOpen"
  251. IsOpenChanged="v => _gpuModalOpen = v"
  252. Value="@_editingGpu"
  253. OnSubmit="HandleGpuSubmit"
  254. OnDelete="HandleGpuDelete"
  255. TestIdPrefix="desktop"/>
  256. <NicModal
  257. IsOpen="@_nicModalOpen"
  258. IsOpenChanged="v => _nicModalOpen = v"
  259. Value="@_editingNic"
  260. OnSubmit="HandleNicSubmit"
  261. OnDelete="HandleNicDelete"
  262. TestIdPrefix="desktop-nic"/>
  263. @code {
  264. [Parameter] [EditorRequired] public Desktop Desktop { get; set; } = default!;
  265. #region RAM
  266. private bool _isRamModalOpen;
  267. private void EditRam()
  268. {
  269. _isRamModalOpen = true;
  270. }
  271. private async Task HandleRamSubmit(Ram? value)
  272. {
  273. _isRamModalOpen = false;
  274. await UpdateUseCase.ExecuteAsync(Desktop.Name, Desktop.Model, value?.Size ?? 0, value?.Mts ?? 0);
  275. Desktop = await GetByNameUseCase.ExecuteAsync(Desktop.Name);
  276. }
  277. #endregion
  278. #region CPU
  279. bool _cpuModalOpen;
  280. int _editingCpuIndex;
  281. Cpu? _editingCpu;
  282. void OpenAddCpu()
  283. {
  284. _editingCpuIndex = -1;
  285. _editingCpu = null;
  286. _cpuModalOpen = true;
  287. }
  288. void OpenEditCpu(Cpu cpu)
  289. {
  290. _editingCpu = cpu;
  291. Desktop.Cpus ??= new List<Cpu>();
  292. _editingCpuIndex = Desktop.Cpus.IndexOf(cpu);
  293. ;
  294. _cpuModalOpen = true;
  295. }
  296. async Task HandleCpuSubmit(Cpu cpu)
  297. {
  298. Desktop.Cpus ??= new List<Cpu>();
  299. if (_editingCpuIndex < 0)
  300. {
  301. await AddCpuUseCase.ExecuteAsync(Desktop.Name, cpu.Model, cpu.Cores, cpu.Threads);
  302. }
  303. else
  304. {
  305. await UpdateCpuUseCase.ExecuteAsync(Desktop.Name, _editingCpuIndex, cpu.Model, cpu.Cores, cpu.Threads);
  306. }
  307. Desktop = await GetByNameUseCase.ExecuteAsync(Desktop.Name);
  308. }
  309. async Task HandleCpuDelete(Cpu cpu)
  310. {
  311. await RemoveCpuUseCase.ExecuteAsync(Desktop.Name, _editingCpuIndex);
  312. Desktop = await GetByNameUseCase.ExecuteAsync(Desktop.Name);
  313. }
  314. #endregion
  315. #region Drives
  316. bool _driveModalOpen;
  317. int _editingDriveIndex;
  318. Drive? _editingDrive;
  319. void OpenAddDrive()
  320. {
  321. _editingDriveIndex = -1;
  322. _editingDrive = null;
  323. _driveModalOpen = true;
  324. }
  325. void OpenEditDrive(Drive drive)
  326. {
  327. _editingDrive = drive;
  328. Desktop.Drives ??= new List<Drive>();
  329. _editingDriveIndex = Desktop.Drives.IndexOf(drive);
  330. ;
  331. _driveModalOpen = true;
  332. }
  333. async Task HandleDriveSubmit(Drive drive)
  334. {
  335. Desktop.Drives ??= new List<Drive>();
  336. if (_editingDriveIndex < 0)
  337. {
  338. await AddDriveUseCase.ExecuteAsync(Desktop.Name, drive.Type, drive.Size);
  339. }
  340. else
  341. {
  342. await UpdateDriveUseCase.ExecuteAsync(Desktop.Name, _editingDriveIndex, drive.Type, drive.Size);
  343. }
  344. Desktop = await GetByNameUseCase.ExecuteAsync(Desktop.Name);
  345. StateHasChanged();
  346. }
  347. async Task HandleDriveDelete(Drive drive)
  348. {
  349. await RemoveDriveUseCase.ExecuteAsync(Desktop.Name, _editingDriveIndex);
  350. Desktop = await GetByNameUseCase.ExecuteAsync(Desktop.Name);
  351. StateHasChanged();
  352. }
  353. #endregion
  354. #region NICs
  355. bool _nicModalOpen;
  356. int _editingNicIndex;
  357. Nic? _editingNic;
  358. void OpenAddNic()
  359. {
  360. _editingNicIndex = -1;
  361. _editingNic = null;
  362. _nicModalOpen = true;
  363. }
  364. void OpenEditNic(Nic nic)
  365. {
  366. Desktop.Nics ??= new List<Nic>();
  367. _editingNicIndex = Desktop.Nics.IndexOf(nic);
  368. _editingNic = nic;
  369. _nicModalOpen = true;
  370. }
  371. async Task HandleNicSubmit(Nic nic)
  372. {
  373. Desktop.Nics ??= new List<Nic>();
  374. if (_editingNicIndex < 0)
  375. {
  376. await AddNicUseCase.ExecuteAsync(
  377. Desktop.Name,
  378. nic.Type,
  379. nic.Speed,
  380. nic.Ports);
  381. }
  382. else
  383. {
  384. await UpdateNicUseCase.ExecuteAsync(
  385. Desktop.Name,
  386. _editingNicIndex,
  387. nic.Type,
  388. nic.Speed,
  389. nic.Ports);
  390. }
  391. Desktop = await GetByNameUseCase.ExecuteAsync(Desktop.Name);
  392. }
  393. async Task HandleNicDelete(Nic nic)
  394. {
  395. await RemoveNicUseCase.ExecuteAsync(Desktop.Name, _editingNicIndex);
  396. Desktop = await GetByNameUseCase.ExecuteAsync(Desktop.Name);
  397. }
  398. #endregion
  399. #region GPUs
  400. bool _gpuModalOpen;
  401. int _editingGpuIndex;
  402. Gpu? _editingGpu;
  403. void OpenAddGpu()
  404. {
  405. _editingGpuIndex = -1;
  406. _editingGpu = null;
  407. _gpuModalOpen = true;
  408. }
  409. void OpenEditGpu(Gpu gpu)
  410. {
  411. Desktop.Gpus ??= new List<Gpu>();
  412. _editingGpuIndex = Desktop.Gpus.IndexOf(gpu);
  413. _editingGpu = gpu;
  414. _gpuModalOpen = true;
  415. }
  416. async Task HandleGpuSubmit(Gpu gpu)
  417. {
  418. Desktop.Gpus ??= new List<Gpu>();
  419. if (_editingGpuIndex < 0)
  420. {
  421. await AddGpuUseCase.ExecuteAsync(
  422. Desktop.Name,
  423. gpu.Model,
  424. gpu.Vram);
  425. }
  426. else
  427. {
  428. await UpdateGpuUseCase.ExecuteAsync(
  429. Desktop.Name,
  430. _editingGpuIndex,
  431. gpu.Model,
  432. gpu.Vram);
  433. }
  434. Desktop = await GetByNameUseCase.ExecuteAsync(Desktop.Name);
  435. }
  436. async Task HandleGpuDelete(Gpu gpu)
  437. {
  438. await RemoveGpuUseCase.ExecuteAsync(Desktop.Name, _editingGpuIndex);
  439. Desktop = await GetByNameUseCase.ExecuteAsync(Desktop.Name);
  440. }
  441. #endregion
  442. }
  443. @code {
  444. private bool _confirmDeleteOpen;
  445. [Parameter] public EventCallback<string> OnDeleted { get; set; }
  446. void ConfirmDelete()
  447. {
  448. _confirmDeleteOpen = true;
  449. }
  450. async Task DeleteServer()
  451. {
  452. _confirmDeleteOpen = false;
  453. await DeleteUseCase.ExecuteAsync(Desktop.Name);
  454. if (OnDeleted.HasDelegate)
  455. await OnDeleted.InvokeAsync(Desktop.Name);
  456. }
  457. }
  458. @code
  459. {
  460. bool _renameOpen;
  461. void OpenRename()
  462. {
  463. _renameOpen = true;
  464. }
  465. async Task HandleRenameSubmit(string newName)
  466. {
  467. await RenameUseCase.ExecuteAsync(Desktop.Name, newName);
  468. Nav.NavigateTo($"resources/hardware/{newName}");
  469. }
  470. }
  471. @code
  472. {
  473. bool _cloneOpen;
  474. void OpenClone()
  475. {
  476. _cloneOpen = true;
  477. }
  478. async Task HandleCloneSubmit(string newName)
  479. {
  480. await CloneUseCase.ExecuteAsync(Desktop.Name, newName);
  481. Nav.NavigateTo($"resources/hardware/{newName}");
  482. }
  483. }
  484. @code
  485. {
  486. bool _editingNotes;
  487. string? _notesDraft;
  488. void BeginNotesEdit()
  489. {
  490. _editingNotes = true;
  491. _notesDraft = Desktop.Notes; // draft buffer
  492. }
  493. void CancelNotesEdit()
  494. {
  495. _editingNotes = false;
  496. _notesDraft = null; // discard
  497. }
  498. async Task SaveNotes()
  499. {
  500. _editingNotes = false;
  501. await UpdateUseCase.ExecuteAsync(
  502. Desktop.Name,
  503. Desktop.Model,
  504. Desktop.Ram?.Size,
  505. Desktop.Ram?.Mts,
  506. _notesDraft);
  507. Desktop = await GetByNameUseCase.ExecuteAsync(Desktop.Name);
  508. _notesDraft = null;
  509. }
  510. }