DesktopCardComponent.razor 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572
  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. </div>
  188. <div class="md:col-span-2" data-testid="desktop-notes-section">
  189. <div class="text-zinc-400 mb-1">Notes</div>
  190. @if (!_editingNotes)
  191. {
  192. <MarkdownViewer Value="@Desktop.Notes"
  193. ShowEditButton="true"
  194. OnEdit="BeginNotesEdit"
  195. TestIdPrefix="desktop-notes-viewer"/>
  196. }
  197. else
  198. {
  199. <MarkdownEditor @bind-Value="_notesDraft"
  200. ShowActionButtons="true"
  201. OnSave="SaveNotes"
  202. OnCancel="CancelNotesEdit"
  203. TestIdPrefix="desktop-notes-editor"/>
  204. }
  205. </div>
  206. </div>
  207. <ConfirmModal IsOpen="_confirmDeleteOpen"
  208. IsOpenChanged="v => _confirmDeleteOpen = v"
  209. Title="Delete desktop"
  210. ConfirmText="Delete"
  211. ConfirmClass="bg-red-600 hover:bg-red-500"
  212. OnConfirm="DeleteServer"
  213. TestIdPrefix="Desktop">
  214. Are you sure you want to delete <strong>@Desktop.Name</strong>?
  215. </ConfirmModal>
  216. <StringValueModal IsOpen="_renameOpen"
  217. IsOpenChanged="v => _renameOpen = v"
  218. Title="Rename desktop"
  219. Description="Enter a new name for this desktop"
  220. Label="New desktop name"
  221. Value="@Desktop.Name"
  222. OnSubmit="HandleRenameSubmit"
  223. TestIdPrefix="desktop-rename"/>
  224. <StringValueModal IsOpen="_cloneOpen"
  225. IsOpenChanged="v => _cloneOpen = v"
  226. Title="Clone resource"
  227. Description="Enter a name for the cloned resource"
  228. Label="New resource name"
  229. Value="@($"{Desktop.Name}-copy")"
  230. OnSubmit="HandleCloneSubmit"
  231. TestIdPrefix="desktop-clone"/>
  232. @code {
  233. [Parameter] [EditorRequired] public Desktop Desktop { get; set; } = default!;
  234. #region RAM
  235. private bool _isRamModalOpen;
  236. private void EditRam()
  237. {
  238. _isRamModalOpen = true;
  239. }
  240. private async Task HandleRamSubmit(Ram value)
  241. {
  242. _isRamModalOpen = false;
  243. await UpdateUseCase.ExecuteAsync(Desktop.Name, Desktop.Model, value.Size, value.Mts);
  244. Desktop = await GetByNameUseCase.ExecuteAsync(Desktop.Name);
  245. }
  246. #endregion
  247. #region CPU
  248. bool _cpuModalOpen;
  249. int _editingCpuIndex;
  250. Cpu? _editingCpu;
  251. void OpenAddCpu()
  252. {
  253. _editingCpuIndex = -1;
  254. _editingCpu = null;
  255. _cpuModalOpen = true;
  256. }
  257. void OpenEditCpu(Cpu cpu)
  258. {
  259. _editingCpu = cpu;
  260. Desktop.Cpus ??= new List<Cpu>();
  261. _editingCpuIndex = Desktop.Cpus.IndexOf(cpu);
  262. ;
  263. _cpuModalOpen = true;
  264. }
  265. async Task HandleCpuSubmit(Cpu cpu)
  266. {
  267. Desktop.Cpus ??= new List<Cpu>();
  268. if (_editingCpuIndex < 0)
  269. {
  270. await AddCpuUseCase.ExecuteAsync(Desktop.Name, cpu.Model, cpu.Cores, cpu.Threads);
  271. }
  272. else
  273. {
  274. await UpdateCpuUseCase.ExecuteAsync(Desktop.Name, _editingCpuIndex, cpu.Model, cpu.Cores, cpu.Threads);
  275. }
  276. Desktop = await GetByNameUseCase.ExecuteAsync(Desktop.Name);
  277. }
  278. async Task HandleCpuDelete(Cpu cpu)
  279. {
  280. await RemoveCpuUseCase.ExecuteAsync(Desktop.Name, _editingCpuIndex);
  281. Desktop = await GetByNameUseCase.ExecuteAsync(Desktop.Name);
  282. }
  283. #endregion
  284. #region Drives
  285. bool _driveModalOpen;
  286. int _editingDriveIndex;
  287. Drive? _editingDrive;
  288. void OpenAddDrive()
  289. {
  290. _editingDriveIndex = -1;
  291. _editingDrive = null;
  292. _driveModalOpen = true;
  293. }
  294. void OpenEditDrive(Drive drive)
  295. {
  296. _editingDrive = drive;
  297. Desktop.Drives ??= new List<Drive>();
  298. _editingDriveIndex = Desktop.Drives.IndexOf(drive);
  299. ;
  300. _driveModalOpen = true;
  301. }
  302. async Task HandleDriveSubmit(Drive drive)
  303. {
  304. Desktop.Drives ??= new List<Drive>();
  305. if (_editingDriveIndex < 0)
  306. {
  307. await AddDriveUseCase.ExecuteAsync(Desktop.Name, drive.Type, drive.Size);
  308. }
  309. else
  310. {
  311. await UpdateDriveUseCase.ExecuteAsync(Desktop.Name, _editingDriveIndex, drive.Type, drive.Size);
  312. }
  313. Desktop = await GetByNameUseCase.ExecuteAsync(Desktop.Name);
  314. StateHasChanged();
  315. }
  316. async Task HandleDriveDelete(Drive drive)
  317. {
  318. await RemoveDriveUseCase.ExecuteAsync(Desktop.Name, _editingDriveIndex);
  319. Desktop = await GetByNameUseCase.ExecuteAsync(Desktop.Name);
  320. StateHasChanged();
  321. }
  322. #endregion
  323. #region NICs
  324. bool _nicModalOpen;
  325. int _editingNicIndex;
  326. Nic? _editingNic;
  327. void OpenAddNic()
  328. {
  329. _editingNicIndex = -1;
  330. _editingNic = null;
  331. _nicModalOpen = true;
  332. }
  333. void OpenEditNic(Nic nic)
  334. {
  335. Desktop.Nics ??= new List<Nic>();
  336. _editingNicIndex = Desktop.Nics.IndexOf(nic);
  337. _editingNic = nic;
  338. _nicModalOpen = true;
  339. }
  340. async Task HandleNicSubmit(Nic nic)
  341. {
  342. Desktop.Nics ??= new List<Nic>();
  343. if (_editingNicIndex < 0)
  344. {
  345. await AddNicUseCase.ExecuteAsync(
  346. Desktop.Name,
  347. nic.Type,
  348. nic.Speed,
  349. nic.Ports);
  350. }
  351. else
  352. {
  353. await UpdateNicUseCase.ExecuteAsync(
  354. Desktop.Name,
  355. _editingNicIndex,
  356. nic.Type,
  357. nic.Speed,
  358. nic.Ports);
  359. }
  360. Desktop = await GetByNameUseCase.ExecuteAsync(Desktop.Name);
  361. }
  362. async Task HandleNicDelete(Nic nic)
  363. {
  364. await RemoveNicUseCase.ExecuteAsync(Desktop.Name, _editingNicIndex);
  365. Desktop = await GetByNameUseCase.ExecuteAsync(Desktop.Name);
  366. }
  367. #endregion
  368. #region GPUs
  369. bool _gpuModalOpen;
  370. int _editingGpuIndex;
  371. Gpu? _editingGpu;
  372. void OpenAddGpu()
  373. {
  374. _editingGpuIndex = -1;
  375. _editingGpu = null;
  376. _gpuModalOpen = true;
  377. }
  378. void OpenEditGpu(Gpu gpu)
  379. {
  380. Desktop.Gpus ??= new List<Gpu>();
  381. _editingGpuIndex = Desktop.Gpus.IndexOf(gpu);
  382. _editingGpu = gpu;
  383. _gpuModalOpen = true;
  384. }
  385. async Task HandleGpuSubmit(Gpu gpu)
  386. {
  387. Desktop.Gpus ??= new List<Gpu>();
  388. if (_editingGpuIndex < 0)
  389. {
  390. await AddGpuUseCase.ExecuteAsync(
  391. Desktop.Name,
  392. gpu.Model,
  393. gpu.Vram);
  394. }
  395. else
  396. {
  397. await UpdateGpuUseCase.ExecuteAsync(
  398. Desktop.Name,
  399. _editingGpuIndex,
  400. gpu.Model,
  401. gpu.Vram);
  402. }
  403. Desktop = await GetByNameUseCase.ExecuteAsync(Desktop.Name);
  404. }
  405. async Task HandleGpuDelete(Gpu gpu)
  406. {
  407. await RemoveGpuUseCase.ExecuteAsync(Desktop.Name, _editingGpuIndex);
  408. Desktop = await GetByNameUseCase.ExecuteAsync(Desktop.Name);
  409. }
  410. #endregion
  411. }
  412. @code {
  413. private bool _confirmDeleteOpen;
  414. [Parameter] public EventCallback<string> OnDeleted { get; set; }
  415. void ConfirmDelete()
  416. {
  417. _confirmDeleteOpen = true;
  418. }
  419. async Task DeleteServer()
  420. {
  421. _confirmDeleteOpen = false;
  422. await DeleteUseCase.ExecuteAsync(Desktop.Name);
  423. if (OnDeleted.HasDelegate)
  424. await OnDeleted.InvokeAsync(Desktop.Name);
  425. }
  426. }
  427. @code
  428. {
  429. bool _renameOpen;
  430. void OpenRename()
  431. {
  432. _renameOpen = true;
  433. }
  434. async Task HandleRenameSubmit(string newName)
  435. {
  436. await RenameUseCase.ExecuteAsync(Desktop.Name, newName);
  437. Nav.NavigateTo($"resources/hardware/{newName}");
  438. }
  439. }
  440. @code
  441. {
  442. bool _cloneOpen;
  443. void OpenClone()
  444. {
  445. _cloneOpen = true;
  446. }
  447. async Task HandleCloneSubmit(string newName)
  448. {
  449. await CloneUseCase.ExecuteAsync(Desktop.Name, newName);
  450. Nav.NavigateTo($"resources/hardware/{newName}");
  451. }
  452. }
  453. @code
  454. {
  455. bool _editingNotes;
  456. string? _notesDraft;
  457. void BeginNotesEdit()
  458. {
  459. _editingNotes = true;
  460. _notesDraft = Desktop.Notes; // draft buffer
  461. }
  462. void CancelNotesEdit()
  463. {
  464. _editingNotes = false;
  465. _notesDraft = null; // discard
  466. }
  467. async Task SaveNotes()
  468. {
  469. _editingNotes = false;
  470. await UpdateUseCase.ExecuteAsync(
  471. Desktop.Name,
  472. Desktop.Model,
  473. Desktop.Ram?.Size,
  474. Desktop.Ram?.Mts,
  475. _notesDraft);
  476. Desktop = await GetByNameUseCase.ExecuteAsync(Desktop.Name);
  477. _notesDraft = null;
  478. }
  479. }