SystemCardComponent.razor 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618
  1. @using RackPeek.Domain.Persistence
  2. @using RackPeek.Domain.Resources
  3. @using RackPeek.Domain.Resources.SubResources
  4. @using RackPeek.Domain.Resources.SystemResources
  5. @using RackPeek.Domain.Resources.SystemResources.UseCases
  6. @using RackPeek.Domain.UseCases.Drives
  7. @inject UpdateSystemUseCase UpdateUseCase
  8. @inject IGetResourceByNameUseCase<SystemResource> GetByNameUseCase
  9. @inject IAddDriveUseCase<SystemResource> AddDriveUseCase
  10. @inject IUpdateDriveUseCase<SystemResource> UpdateDriveUseCase
  11. @inject IRemoveDriveUseCase<SystemResource> RemoveDriveUseCase
  12. @inject IDeleteResourceUseCase<SystemResource> DeleteUseCase
  13. @inject ICloneResourceUseCase<SystemResource> CloneUseCase
  14. @inject NavigationManager Nav
  15. @inject IRenameResourceUseCase<SystemResource> RenameUseCase
  16. @inject IResourceCollection ResourceCollection
  17. <div class="border border-zinc-800 rounded p-4 bg-zinc-900"
  18. data-testid=@($"system-item-{System.Name.Replace(" ", "-")}")>
  19. <div class="flex justify-between items-center mb-3">
  20. <NavLink href="@($"resources/systems/{Uri.EscapeDataString(System.Name)}")" class="block"
  21. data-testid=@($"system-item-{System.Name.Replace(" ", "-")}-link")>
  22. <div class="text-zinc-100 hover:text-emerald-300">
  23. @System.Name
  24. </div>
  25. </NavLink>
  26. <div class="flex gap-3 text-xs">
  27. @if (!_isEditing)
  28. {
  29. <button data-testid="edit-system-button"
  30. class="text-zinc-400 hover:text-zinc-200"
  31. @onclick="BeginEdit">
  32. Edit
  33. </button>
  34. <button data-testid="rename-system-button"
  35. class="text-xs text-blue-400 hover:text-blue-300 transition"
  36. @onclick="OpenRename">
  37. Rename
  38. </button>
  39. <button data-testid="clone-system-button"
  40. class="text-xs text-emerald-400 hover:text-emerald-300 transition"
  41. @onclick="OpenClone">
  42. Clone
  43. </button>
  44. <button data-testid="delete-system-button"
  45. class="text-xs text-red-400 hover:text-red-300 transition"
  46. @onclick="ConfirmDelete">
  47. Delete
  48. </button>
  49. }
  50. else
  51. {
  52. <button data-testid="save-system-button"
  53. class="text-emerald-400 hover:text-emerald-300"
  54. @onclick="Save">
  55. Save
  56. </button>
  57. <button data-testid="cancel-system-button"
  58. class="text-zinc-500 hover:text-zinc-300"
  59. @onclick="Cancel">
  60. Cancel
  61. </button>
  62. }
  63. </div>
  64. </div>
  65. <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
  66. <div>
  67. <div class="text-zinc-400 mb-1">Type</div>
  68. @if (_isEditing)
  69. {
  70. <select class="w-full px-3 py-2 rounded-md
  71. bg-zinc-800 text-zinc-100
  72. border border-zinc-600
  73. placeholder-zinc-500
  74. focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
  75. hover:border-zinc-400
  76. transition-colors duration-150
  77. cursor-text"
  78. data-testid="system-type-select"
  79. @bind="_edit.Type">
  80. @foreach (var type in SystemResource.ValidSystemTypes)
  81. {
  82. <option value="@type">@type</option>
  83. }
  84. </select>
  85. }
  86. else if (!string.IsNullOrWhiteSpace(System.Type))
  87. {
  88. <div class="text-zinc-300">@System.Type</div>
  89. }
  90. </div>
  91. <!-- OS -->
  92. <div>
  93. <div class="text-zinc-400 mb-1">OS</div>
  94. @if (_isEditing)
  95. {
  96. <input
  97. class="w-full px-3 py-2 rounded-md
  98. bg-zinc-800 text-zinc-100
  99. border border-zinc-600
  100. placeholder-zinc-500
  101. focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
  102. hover:border-zinc-400
  103. transition-colors duration-150
  104. cursor-text"
  105. data-testid="system-os-input"
  106. @bind="_edit.Os"/>
  107. }
  108. else if (!string.IsNullOrWhiteSpace(System.Os))
  109. {
  110. <div class="text-zinc-300">@System.Os</div>
  111. }
  112. </div>
  113. <!-- Cores -->
  114. <div>
  115. <div class="text-zinc-400 mb-1">Cores</div>
  116. @if (_isEditing)
  117. {
  118. <input type="number"
  119. class="w-full px-3 py-2 rounded-md
  120. bg-zinc-800 text-zinc-100
  121. border border-zinc-600
  122. placeholder-zinc-500
  123. focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
  124. hover:border-zinc-400
  125. transition-colors duration-150
  126. cursor-text"
  127. data-testid="system-cores-input"
  128. @bind="_edit.Cores"/>
  129. }
  130. else if (System.Cores.HasValue)
  131. {
  132. <div class="text-zinc-300">@System.Cores</div>
  133. }
  134. </div>
  135. <!-- RAM -->
  136. <div>
  137. <div class="text-zinc-400 mb-1">RAM (GB)</div>
  138. @if (_isEditing)
  139. {
  140. <input type="number"
  141. class="w-full px-3 py-2 rounded-md
  142. bg-zinc-800 text-zinc-100
  143. border border-zinc-600
  144. placeholder-zinc-500
  145. focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
  146. hover:border-zinc-400
  147. transition-colors duration-150
  148. cursor-text"
  149. data-testid="system-ram-input"
  150. @bind="_edit.Ram"/>
  151. }
  152. else if (System.Ram.HasValue)
  153. {
  154. <div class="text-zinc-300">@System.Ram GB</div>
  155. }
  156. </div>
  157. <!-- IP -->
  158. <div>
  159. <div class="text-zinc-400 mb-1">IP Address</div>
  160. @if (_isEditing)
  161. {
  162. <input class="w-full px-3 py-2 rounded-md bg-zinc-800 text-zinc-100 border border-zinc-600"
  163. data-testid="system-ip-input"
  164. @bind="_edit.Ip" />
  165. }
  166. else if (!string.IsNullOrWhiteSpace(EffectiveIp))
  167. {
  168. <div class="text-zinc-300">
  169. @EffectiveIp
  170. @if (string.IsNullOrWhiteSpace(System.Ip))
  171. {
  172. <span class="text-zinc-500 text-xs ml-2">(inherited)</span>
  173. }
  174. </div>
  175. }
  176. </div>
  177. <!-- Runs On -->
  178. <div class="text-sm">
  179. <div class="text-zinc-400 mb-1">
  180. Runs On
  181. <button class="hover:text-emerald-400 pl-2"
  182. @onclick="() => _selectParentOpen = true">+</button>
  183. </div>
  184. @if (System.RunsOn?.Count > 0)
  185. {
  186. @foreach (var parent in System.RunsOn)
  187. {
  188. var kind = (_parentKinds.GetValueOrDefault(parent) ?? "").Trim().ToLower();
  189. string url = "#";
  190. if (Resource.IsHardware(kind))
  191. {
  192. url = $"resources/hardware/{Uri.EscapeDataString(parent)}";
  193. }else if (kind == "system")
  194. {
  195. url = $"resources/systems/{Uri.EscapeDataString(parent)}";
  196. }
  197. <NavLink href="@url"
  198. class="text-emerald-400 text-sm pr-4">
  199. @parent
  200. </NavLink>
  201. @if (_isEditing)
  202. {
  203. <button class="text-red-400 hover:text-red-300 pr-4"
  204. @onclick="async () => await HandleParentDeleted(parent)">
  205. </button>
  206. }
  207. }
  208. }
  209. </div>
  210. <div>
  211. <div class="flex items-center justify-between mb-1 group">
  212. <div class="text-zinc-400">Drives
  213. <button
  214. class="hover:text-emerald-400 group-hover:opacity-100 transition"
  215. title="Add Drive"
  216. data-testid="add-drive-button"
  217. @onclick="OpenAddDrive">
  218. +
  219. </button>
  220. </div>
  221. </div>
  222. @if (System.Drives?.Any() == true)
  223. {
  224. @foreach (var drive in System.Drives)
  225. {
  226. <div
  227. class="flex items-center justify-between text-zinc-300 group hover:bg-zinc-800/40 rounded px-1 py-0.5">
  228. <div class="flex gap-2 group-hover:opacity-100 transition">
  229. <button data-testid=@($"drive-item-{drive.Type}-{drive.Size}")
  230. class="hover:text-emerald-400"
  231. title="Edit Drive"
  232. @onclick="() => OpenEditDrives(drive)">
  233. @drive.Type — @drive.Size GB
  234. </button>
  235. </div>
  236. </div>
  237. }
  238. }
  239. </div>
  240. <ResourceTagEditor Resource="System"
  241. TestIdPrefix="system" />
  242. <ResourceLabelEditor Resource="System"
  243. TestIdPrefix="system" />
  244. <div class="md:col-span-2">
  245. <div class="text-zinc-400 mb-1">Notes</div>
  246. @if (_isEditing)
  247. {
  248. <MarkdownEditor
  249. @bind-Value="_edit.Notes"
  250. ShowActionButtons="false"
  251. TestIdPrefix="system-notes-editor" />
  252. }
  253. else
  254. {
  255. <MarkdownViewer
  256. Value="@System.Notes"
  257. ShowEditButton="false"
  258. TestIdPrefix="system-notes-viewer" />
  259. }
  260. </div>
  261. </div>
  262. </div>
  263. <!-- Parent Selector -->
  264. <HardwareOrSystemSelectionModal
  265. IsOpen="@_selectParentOpen"
  266. IsOpenChanged="v => _selectParentOpen = v"
  267. Title="Select a parent resource"
  268. Value="@SelectedParentName"
  269. OnAccept="HandleParentSelected" />
  270. <DriveModal
  271. IsOpen="@_driveModalOpen"
  272. IsOpenChanged="v => _driveModalOpen = v"
  273. Value="@_editingDrive"
  274. OnSubmit="HandleDriveSubmit"
  275. OnDelete="HandleDriveDelete"
  276. TestIdPrefix="system"/>
  277. <ConfirmModal
  278. IsOpen="@_confirmDeleteOpen"
  279. IsOpenChanged="v => _confirmDeleteOpen = v"
  280. Title="Delete system"
  281. ConfirmText="Delete"
  282. ConfirmClass="bg-red-600 hover:bg-red-500"
  283. OnConfirm="DeleteServer"
  284. TestIdPrefix="system-delete">
  285. Are you sure you want to delete <strong>@System.Name</strong>?
  286. <br />
  287. This will detach all dependent systems.
  288. </ConfirmModal>
  289. <StringValueModal
  290. IsOpen="_cloneOpen"
  291. IsOpenChanged="v => _cloneOpen = v"
  292. Title="Clone system"
  293. Description="Enter a name for the cloned system"
  294. Label="New system name"
  295. Value="@($"{System.Name}-copy")"
  296. OnSubmit="HandleCloneSubmit"
  297. TestIdPrefix="system-clone"/>
  298. @code {
  299. [Parameter] [EditorRequired] public SystemResource System { get; set; } = default!;
  300. [Parameter] public EventCallback<SystemEditModel> OnSave { get; set; }
  301. private bool _isEditing;
  302. private SystemEditModel _edit = new();
  303. void BeginEdit()
  304. {
  305. _edit = SystemEditModel.From(System);
  306. _isEditing = true;
  307. }
  308. async Task Save()
  309. {
  310. _isEditing = false;
  311. await OnSave.InvokeAsync(_edit);
  312. }
  313. void Cancel()
  314. {
  315. _isEditing = false;
  316. }
  317. bool _selectParentOpen;
  318. string? SelectedParentName;
  319. private Dictionary<string, string> _parentKinds = new();
  320. protected override async Task OnParametersSetAsync()
  321. {
  322. await RefreshParentKinds();
  323. await ResolveEffectiveIp();
  324. }
  325. private async Task RefreshParentKinds()
  326. {
  327. _parentKinds.Clear();
  328. foreach (var parent in System.RunsOn)
  329. {
  330. var kind = (await ResourceCollection.GetKind(parent))?.ToLower();
  331. _parentKinds[parent] = kind ?? "";
  332. }
  333. }
  334. async Task HandleParentSelected(string? name)
  335. {
  336. if (name == System.Name)
  337. {
  338. return;
  339. }
  340. SelectedParentName = name;
  341. // Start from the edit buffer when editing, otherwise from the persisted model
  342. var runsOn = (_isEditing ? _edit.RunsOn : System.RunsOn) ?? new List<string>();
  343. runsOn = runsOn.Where(x => !string.IsNullOrWhiteSpace(x)).ToList();
  344. if (!string.IsNullOrWhiteSpace(name) && !runsOn.Contains(name))
  345. runsOn.Add(name);
  346. // IMPORTANT: use _edit values when editing so we don't wipe typed fields
  347. var type = _isEditing ? _edit.Type : System.Type;
  348. var os = _isEditing ? _edit.Os : System.Os;
  349. var cores = _isEditing ? _edit.Cores : System.Cores;
  350. var ram = _isEditing ? _edit.Ram : System.Ram;
  351. var ip = _isEditing ? _edit.Ip : System.Ip;
  352. var notes = _isEditing ? _edit.Notes : System.Notes;
  353. await UpdateUseCase.ExecuteAsync(
  354. System.Name,
  355. type,
  356. os,
  357. cores,
  358. ram,
  359. ip,
  360. runsOn,
  361. notes);
  362. System = await GetByNameUseCase.ExecuteAsync(System.Name);
  363. if (_isEditing)
  364. _edit.RunsOn = runsOn;
  365. else
  366. _edit = SystemEditModel.From(System);
  367. await RefreshParentKinds();
  368. }
  369. async Task HandleParentDeleted(string? name)
  370. {
  371. if (string.IsNullOrWhiteSpace(name))
  372. return;
  373. SelectedParentName = name;
  374. var runsOn = (_isEditing ? _edit.RunsOn : System.RunsOn) ?? new List<string>();
  375. System.RunsOn = runsOn = runsOn.Where(x => !string.IsNullOrWhiteSpace(x) && x != name).ToList();
  376. var type = _isEditing ? _edit.Type : System.Type;
  377. var os = _isEditing ? _edit.Os : System.Os;
  378. var cores = _isEditing ? _edit.Cores : System.Cores;
  379. var ram = _isEditing ? _edit.Ram : System.Ram;
  380. var ip = _isEditing ? _edit.Ip : System.Ip;
  381. var notes = _isEditing ? _edit.Notes : System.Notes;
  382. await UpdateUseCase.ExecuteAsync(
  383. System.Name,
  384. type,
  385. os,
  386. cores,
  387. ram,
  388. ip,
  389. runsOn,
  390. notes);
  391. System = await GetByNameUseCase.ExecuteAsync(System.Name);
  392. if (_isEditing)
  393. _edit.RunsOn = runsOn;
  394. else
  395. _edit = SystemEditModel.From(System);
  396. await RefreshParentKinds();
  397. }
  398. #region Drives
  399. bool _driveModalOpen;
  400. int _editingDriveIndex;
  401. Drive? _editingDrive;
  402. void OpenAddDrive()
  403. {
  404. _editingDriveIndex = -1;
  405. _editingDrive = null;
  406. _driveModalOpen = true;
  407. }
  408. void OpenEditDrives(Drive drive)
  409. {
  410. _editingDrive = drive;
  411. System.Drives ??= new List<Drive>();
  412. _editingDriveIndex = System.Drives.IndexOf(drive);
  413. ;
  414. _driveModalOpen = true;
  415. }
  416. async Task HandleDriveSubmit(Drive drive)
  417. {
  418. System.Drives ??= new List<Drive>();
  419. if (_editingDriveIndex < 0)
  420. {
  421. await AddDriveUseCase.ExecuteAsync(System.Name, drive.Type ?? "hdd", drive.Size ?? 0);
  422. }
  423. else
  424. {
  425. await UpdateDriveUseCase.ExecuteAsync(System.Name, _editingDriveIndex, drive.Type ?? "hdd", drive.Size ?? 0);
  426. }
  427. System = await GetByNameUseCase.ExecuteAsync(System.Name);
  428. StateHasChanged();
  429. }
  430. async Task HandleDriveDelete(Drive drive)
  431. {
  432. await RemoveDriveUseCase.ExecuteAsync(System.Name, _editingDriveIndex);
  433. System = await GetByNameUseCase.ExecuteAsync(System.Name);
  434. StateHasChanged();
  435. }
  436. #endregion
  437. }
  438. <StringValueModal
  439. IsOpen="_renameOpen"
  440. IsOpenChanged="v => _renameOpen = v"
  441. Title="Rename system"
  442. Description="Enter a new name for this system"
  443. Label="New system name"
  444. Value="@System.Name"
  445. OnSubmit="HandleRenameSubmit"
  446. TestIdPrefix="system-rename"/>
  447. @code {
  448. private bool _confirmDeleteOpen;
  449. [Parameter] public EventCallback<string> OnDeleted { get; set; }
  450. void ConfirmDelete()
  451. {
  452. _confirmDeleteOpen = true;
  453. }
  454. async Task DeleteServer()
  455. {
  456. _confirmDeleteOpen = false;
  457. await DeleteUseCase.ExecuteAsync(System.Name);
  458. if (OnDeleted.HasDelegate)
  459. await OnDeleted.InvokeAsync(System.Name);
  460. }
  461. }
  462. @code
  463. {
  464. bool _cloneOpen;
  465. void OpenClone()
  466. {
  467. _cloneOpen = true;
  468. }
  469. async Task HandleCloneSubmit(string newName)
  470. {
  471. await CloneUseCase.ExecuteAsync(System.Name, newName);
  472. Nav.NavigateTo($"resources/systems/{Uri.EscapeDataString(newName)}");
  473. }
  474. }
  475. @code
  476. {
  477. bool _renameOpen;
  478. void OpenRename()
  479. {
  480. _renameOpen = true;
  481. }
  482. async Task HandleRenameSubmit(string newName)
  483. {
  484. await RenameUseCase.ExecuteAsync(System.Name, newName);
  485. Nav.NavigateTo($"resources/systems/{Uri.EscapeDataString(newName)}");
  486. }
  487. }
  488. @code{
  489. private string? EffectiveIp;
  490. private async Task ResolveEffectiveIp()
  491. {
  492. // If system has its own IP, use it
  493. if (!string.IsNullOrWhiteSpace(System.Ip))
  494. {
  495. EffectiveIp = System.Ip;
  496. return;
  497. }
  498. // Must have exactly one parent
  499. if (System.RunsOn?.Count != 1)
  500. {
  501. EffectiveIp = null;
  502. return;
  503. }
  504. var parentName = System.RunsOn.First();
  505. // Must be a system
  506. if (!_parentKinds.TryGetValue(parentName, out var kind) ||
  507. kind?.ToLower() != "system")
  508. {
  509. EffectiveIp = null;
  510. return;
  511. }
  512. // Load parent system
  513. var parent = await GetByNameUseCase.ExecuteAsync(parentName);
  514. EffectiveIp = string.IsNullOrWhiteSpace(parent?.Ip)
  515. ? null
  516. : parent.Ip;
  517. }
  518. }