SystemCardComponent.razor 17 KB

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