ServerCardComponent.razor 14 KB

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