DesktopCardComponent.razor 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496
  1. @using RackPeek.Domain.Resources.Hardware.Desktops
  2. @using RackPeek.Domain.Resources.Hardware.Desktops.Cpus
  3. @using RackPeek.Domain.Resources.Hardware.Desktops.Drives
  4. @using RackPeek.Domain.Resources.Hardware.Desktops.Gpus
  5. @using RackPeek.Domain.Resources.Hardware.Desktops.Nics
  6. @using RackPeek.Domain.Resources.Models
  7. @using Shared.Rcl.Modals
  8. @inject GetDesktopUseCase GetDesktopUseCase
  9. @inject UpdateDesktopUseCase UpdateDesktopUseCase
  10. @inject DeleteDesktopUseCase DeleteDesktopUseCase
  11. @inject AddDesktopCpuUseCase AddCpuUseCase
  12. @inject UpdateDesktopCpuUseCase UpdateCpuUseCase
  13. @inject RemoveDesktopCpuUseCase RemoveCpuUseCase
  14. @inject AddDesktopDriveUseCase AddDriveUseCase
  15. @inject UpdateDesktopDriveUseCase UpdateDriveUseCase
  16. @inject RemoveDesktopDriveUseCase RemoveDriveUseCase
  17. @inject AddDesktopNicUseCase AddNicUseCase
  18. @inject UpdateDesktopNicUseCase UpdateNicUseCase
  19. @inject RemoveDesktopNicUseCase RemoveNicUseCase
  20. @inject AddDesktopGpuUseCase AddGpuUseCase
  21. @inject UpdateDesktopGpuUseCase UpdateGpuUseCase
  22. @inject RemoveDesktopGpuUseCase RemoveGpuUseCase
  23. <div class="border border-zinc-800 rounded p-4 bg-zinc-900">
  24. <div class="flex justify-between items-center mb-3">
  25. <div class="text-zinc-100 hover:text-emerald-300">
  26. <NavLink href="@($"/resources/hardware/{Desktop.Name}")" class="block">
  27. @Desktop.Name
  28. </NavLink>
  29. </div>
  30. <div class="flex justify-between items-center mb-3">
  31. @if (!string.IsNullOrWhiteSpace(Desktop.Model))
  32. {
  33. <span class="text-xs text-zinc-400">
  34. @Desktop.Model
  35. </span>
  36. }
  37. <div class="flex items-center gap-2">
  38. <button
  39. class="text-xs text-red-400 hover:text-red-300 transition"
  40. title="Delete server"
  41. @onclick="ConfirmDelete">
  42. Delete
  43. </button>
  44. </div>
  45. </div>
  46. </div>
  47. <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
  48. <!-- CPU -->
  49. <div>
  50. <div class="flex items-center justify-between mb-1 group">
  51. <div class="text-zinc-400">
  52. CPU
  53. <button
  54. class="hover:text-emerald-400 transition"
  55. title="Add CPU"
  56. @onclick="OpenAddCpu">
  57. +
  58. </button>
  59. </div>
  60. </div>
  61. @if (Desktop.Cpus?.Any() == true)
  62. {
  63. @foreach (var cpu in Desktop.Cpus)
  64. {
  65. <div
  66. class="flex items-center justify-between text-zinc-300 group hover:bg-zinc-800/40 rounded px-1 py-0.5">
  67. <button
  68. class="hover:text-emerald-400"
  69. title="Edit CPU"
  70. @onclick="() => OpenEditCpu(cpu)">
  71. @cpu.Model — @cpu.Cores cores / @cpu.Threads threads
  72. </button>
  73. </div>
  74. }
  75. }
  76. </div>
  77. <!-- RAM -->
  78. <div>
  79. <div class="text-zinc-400 mb-1">
  80. RAM
  81. <button
  82. class="hover:text-emerald-400 transition"
  83. title="Edit RAM"
  84. @onclick="EditRam">
  85. +
  86. </button>
  87. </div>
  88. @if (Desktop.Ram is not null)
  89. {
  90. <div
  91. class="flex items-center justify-between text-zinc-300 group hover:bg-zinc-800/40 rounded px-1 py-0.5">
  92. <button
  93. class="hover:text-emerald-400"
  94. @onclick="EditRam">
  95. @($"{Desktop.Ram.Size} GB {Desktop.Ram.Mts} MT/s")
  96. </button>
  97. </div>
  98. }
  99. </div>
  100. <!-- Drives -->
  101. <div>
  102. <div class="flex items-center justify-between mb-1 group">
  103. <div class="text-zinc-400">
  104. Drives
  105. <button
  106. class="hover:text-emerald-400 transition"
  107. title="Add Drive"
  108. @onclick="OpenAddDrive">
  109. +
  110. </button>
  111. </div>
  112. </div>
  113. @if (Desktop.Drives?.Any() == true)
  114. {
  115. @foreach (var drive in Desktop.Drives)
  116. {
  117. <div
  118. class="flex items-center justify-between text-zinc-300 group hover:bg-zinc-800/40 rounded px-1 py-0.5">
  119. <button
  120. class="hover:text-emerald-400"
  121. @onclick="() => OpenEditDrive(drive)">
  122. @drive.Type — @drive.Size GB
  123. </button>
  124. </div>
  125. }
  126. }
  127. </div>
  128. <!-- NICs -->
  129. <div>
  130. <div class="flex items-center justify-between mb-1 group">
  131. <div class="text-zinc-400">
  132. NICs
  133. <button
  134. class="hover:text-emerald-400 transition"
  135. title="Add NIC"
  136. @onclick="OpenAddNic">
  137. +
  138. </button>
  139. </div>
  140. </div>
  141. @if (Desktop.Nics?.Any() == true)
  142. {
  143. @foreach (var nic in Desktop.Nics)
  144. {
  145. <div
  146. class="flex items-center justify-between text-zinc-300 group hover:bg-zinc-800/40 rounded px-1 py-0.5">
  147. <button
  148. class="hover:text-emerald-400"
  149. @onclick="() => OpenEditNic(nic)">
  150. @nic.Type — @nic.Speed Gbps (@nic.Ports ports)
  151. </button>
  152. </div>
  153. }
  154. }
  155. </div>
  156. <!-- GPUs -->
  157. <div>
  158. <div class="flex items-center justify-between mb-1 group">
  159. <div class="text-zinc-400">
  160. GPUs
  161. <button
  162. class="hover:text-emerald-400 transition"
  163. title="Add GPU"
  164. @onclick="OpenAddGpu">
  165. +
  166. </button>
  167. </div>
  168. </div>
  169. @if (Desktop.Gpus?.Any() == true)
  170. {
  171. @foreach (var gpu in Desktop.Gpus)
  172. {
  173. <div
  174. class="flex items-center justify-between text-zinc-300 group hover:bg-zinc-800/40 rounded px-1 py-0.5">
  175. <button
  176. class="hover:text-emerald-400"
  177. @onclick="() => OpenEditGpu(gpu)">
  178. @gpu.Model — @gpu.Vram GB VRAM
  179. </button>
  180. </div>
  181. }
  182. }
  183. </div>
  184. </div>
  185. </div>
  186. <CpuModal
  187. IsOpen="@_cpuModalOpen"
  188. IsOpenChanged="v => _cpuModalOpen = v"
  189. Value="@_editingCpu"
  190. OnSubmit="HandleCpuSubmit"
  191. OnDelete="HandleCpuDelete"/>
  192. <RamModal
  193. IsOpen="@_isRamModalOpen"
  194. IsOpenChanged="v => _isRamModalOpen = v"
  195. Value="@Desktop.Ram"
  196. OnSubmit="HandleRamSubmit"/>
  197. <DriveModal
  198. IsOpen="@_driveModalOpen"
  199. IsOpenChanged="v => _driveModalOpen = v"
  200. Value="@_editingDrive"
  201. OnSubmit="HandleDriveSubmit"
  202. OnDelete="HandleDriveDelete"/>
  203. <NicModal
  204. IsOpen="@_nicModalOpen"
  205. IsOpenChanged="v => _nicModalOpen = v"
  206. Value="@_editingNic"
  207. OnSubmit="HandleNicSubmit"
  208. OnDelete="HandleNicDelete"/>
  209. <GpuModal
  210. IsOpen="@_gpuModalOpen"
  211. IsOpenChanged="v => _gpuModalOpen = v"
  212. Value="@_editingGpu"
  213. OnSubmit="HandleGpuSubmit"
  214. OnDelete="HandleGpuDelete"/>
  215. <ConfirmModal
  216. IsOpen="_confirmDeleteOpen"
  217. IsOpenChanged="v => _confirmDeleteOpen = v"
  218. Title="Delete server"
  219. ConfirmText="Delete"
  220. ConfirmClass="bg-red-600 hover:bg-red-500"
  221. OnConfirm="DeleteServer">
  222. Are you sure you want to delete <strong>@Desktop.Name</strong>?
  223. <br/>
  224. This will detach all dependent systems.
  225. </ConfirmModal>
  226. @code {
  227. [Parameter] [EditorRequired] public Desktop Desktop { get; set; } = default!;
  228. #region RAM
  229. private bool _isRamModalOpen;
  230. private void EditRam()
  231. {
  232. _isRamModalOpen = true;
  233. }
  234. private async Task HandleRamSubmit(Ram value)
  235. {
  236. _isRamModalOpen = false;
  237. await UpdateDesktopUseCase.ExecuteAsync(Desktop.Name, Desktop.Model, value.Size, value.Mts);
  238. Desktop = await GetDesktopUseCase.ExecuteAsync(Desktop.Name);
  239. }
  240. #endregion
  241. #region CPU
  242. bool _cpuModalOpen;
  243. int _editingCpuIndex;
  244. Cpu? _editingCpu;
  245. void OpenAddCpu()
  246. {
  247. _editingCpuIndex = -1;
  248. _editingCpu = null;
  249. _cpuModalOpen = true;
  250. }
  251. void OpenEditCpu(Cpu cpu)
  252. {
  253. _editingCpu = cpu;
  254. Desktop.Cpus ??= new List<Cpu>();
  255. _editingCpuIndex = Desktop.Cpus.IndexOf(cpu);
  256. ;
  257. _cpuModalOpen = true;
  258. }
  259. async Task HandleCpuSubmit(Cpu cpu)
  260. {
  261. Desktop.Cpus ??= new List<Cpu>();
  262. if (_editingCpuIndex < 0)
  263. {
  264. await AddCpuUseCase.ExecuteAsync(Desktop.Name, cpu.Model, cpu.Cores, cpu.Threads);
  265. }
  266. else
  267. {
  268. await UpdateCpuUseCase.ExecuteAsync(Desktop.Name, _editingCpuIndex, cpu.Model, cpu.Cores, cpu.Threads);
  269. }
  270. Desktop = await GetDesktopUseCase.ExecuteAsync(Desktop.Name);
  271. }
  272. async Task HandleCpuDelete(Cpu cpu)
  273. {
  274. await RemoveCpuUseCase.ExecuteAsync(Desktop.Name, _editingCpuIndex);
  275. Desktop = await GetDesktopUseCase.ExecuteAsync(Desktop.Name);
  276. }
  277. #endregion
  278. #region Drives
  279. bool _driveModalOpen;
  280. int _editingDriveIndex;
  281. Drive? _editingDrive;
  282. void OpenAddDrive()
  283. {
  284. _editingDriveIndex = -1;
  285. _editingDrive = null;
  286. _driveModalOpen = true;
  287. }
  288. void OpenEditDrive(Drive drive)
  289. {
  290. _editingDrive = drive;
  291. Desktop.Drives ??= new List<Drive>();
  292. _editingDriveIndex = Desktop.Drives.IndexOf(drive);
  293. ;
  294. _driveModalOpen = true;
  295. }
  296. async Task HandleDriveSubmit(Drive drive)
  297. {
  298. Desktop.Drives ??= new List<Drive>();
  299. if (_editingDriveIndex < 0)
  300. {
  301. await AddDriveUseCase.ExecuteAsync(Desktop.Name, drive.Type, drive.Size);
  302. }
  303. else
  304. {
  305. await UpdateDriveUseCase.ExecuteAsync(Desktop.Name, _editingDriveIndex, drive.Type, drive.Size);
  306. }
  307. Desktop = await GetDesktopUseCase.ExecuteAsync(Desktop.Name);
  308. StateHasChanged();
  309. }
  310. async Task HandleDriveDelete(Drive drive)
  311. {
  312. await RemoveDriveUseCase.ExecuteAsync(Desktop.Name, _editingDriveIndex);
  313. Desktop = await GetDesktopUseCase.ExecuteAsync(Desktop.Name);
  314. StateHasChanged();
  315. }
  316. #endregion
  317. #region NICs
  318. bool _nicModalOpen;
  319. int _editingNicIndex;
  320. Nic? _editingNic;
  321. void OpenAddNic()
  322. {
  323. _editingNicIndex = -1;
  324. _editingNic = null;
  325. _nicModalOpen = true;
  326. }
  327. void OpenEditNic(Nic nic)
  328. {
  329. Desktop.Nics ??= new List<Nic>();
  330. _editingNicIndex = Desktop.Nics.IndexOf(nic);
  331. _editingNic = nic;
  332. _nicModalOpen = true;
  333. }
  334. async Task HandleNicSubmit(Nic nic)
  335. {
  336. Desktop.Nics ??= new List<Nic>();
  337. if (_editingNicIndex < 0)
  338. {
  339. await AddNicUseCase.ExecuteAsync(
  340. Desktop.Name,
  341. nic.Type,
  342. nic.Speed,
  343. nic.Ports);
  344. }
  345. else
  346. {
  347. await UpdateNicUseCase.ExecuteAsync(
  348. Desktop.Name,
  349. _editingNicIndex,
  350. nic.Type,
  351. nic.Speed,
  352. nic.Ports);
  353. }
  354. Desktop = await GetDesktopUseCase.ExecuteAsync(Desktop.Name);
  355. }
  356. async Task HandleNicDelete(Nic nic)
  357. {
  358. await RemoveNicUseCase.ExecuteAsync(Desktop.Name, _editingNicIndex);
  359. Desktop = await GetDesktopUseCase.ExecuteAsync(Desktop.Name);
  360. }
  361. #endregion
  362. #region GPUs
  363. bool _gpuModalOpen;
  364. int _editingGpuIndex;
  365. Gpu? _editingGpu;
  366. void OpenAddGpu()
  367. {
  368. _editingGpuIndex = -1;
  369. _editingGpu = null;
  370. _gpuModalOpen = true;
  371. }
  372. void OpenEditGpu(Gpu gpu)
  373. {
  374. Desktop.Gpus ??= new List<Gpu>();
  375. _editingGpuIndex = Desktop.Gpus.IndexOf(gpu);
  376. _editingGpu = gpu;
  377. _gpuModalOpen = true;
  378. }
  379. async Task HandleGpuSubmit(Gpu gpu)
  380. {
  381. Desktop.Gpus ??= new List<Gpu>();
  382. if (_editingGpuIndex < 0)
  383. {
  384. await AddGpuUseCase.ExecuteAsync(
  385. Desktop.Name,
  386. gpu.Model,
  387. gpu.Vram);
  388. }
  389. else
  390. {
  391. await UpdateGpuUseCase.ExecuteAsync(
  392. Desktop.Name,
  393. _editingGpuIndex,
  394. gpu.Model,
  395. gpu.Vram);
  396. }
  397. Desktop = await GetDesktopUseCase.ExecuteAsync(Desktop.Name);
  398. }
  399. async Task HandleGpuDelete(Gpu gpu)
  400. {
  401. await RemoveGpuUseCase.ExecuteAsync(Desktop.Name, _editingGpuIndex);
  402. Desktop = await GetDesktopUseCase.ExecuteAsync(Desktop.Name);
  403. }
  404. #endregion
  405. }
  406. @code {
  407. private bool _confirmDeleteOpen;
  408. [Parameter] public EventCallback<string> OnDeleted { get; set; }
  409. void ConfirmDelete()
  410. {
  411. _confirmDeleteOpen = true;
  412. }
  413. async Task DeleteServer()
  414. {
  415. _confirmDeleteOpen = false;
  416. await DeleteDesktopUseCase.ExecuteAsync(Desktop.Name);
  417. if (OnDeleted.HasDelegate)
  418. await OnDeleted.InvokeAsync(Desktop.Name);
  419. }
  420. }