ServiceCardComponent.razor 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526
  1. @using RackPeek.Domain.Resources.SystemResources
  2. @inject UpdateServiceUseCase UpdateUseCase
  3. @inject IGetResourceByNameUseCase<Service> GetByNameUseCase
  4. @inject IDeleteResourceUseCase<Service> DeleteUseCase
  5. @inject ICloneResourceUseCase<Service> CloneUseCase
  6. @inject IRenameResourceUseCase<Service> RenameUseCase
  7. @inject IGetResourceByNameUseCase<SystemResource> GetSystemByNameUseCase
  8. @inject NavigationManager Nav
  9. <div class="border border-zinc-800 rounded p-4 bg-zinc-900"
  10. data-testid=@($"service-item-{Service.Name.Replace(" ", "-")}")>
  11. <div class="flex justify-between items-center mb-3">
  12. <NavLink href="@($"resources/services/{Uri.EscapeDataString(Service.Name)}")" class="block"
  13. data-testid=@($"service-item-{Service.Name.Replace(" ", "-")}-link")>
  14. <div class="text-zinc-100 hover:text-emerald-300">
  15. @Service.Name
  16. </div>
  17. </NavLink>
  18. <div class="flex gap-3 text-xs">
  19. @if (!_isEditing)
  20. {
  21. <button class="text-zinc-400 hover:text-zinc-200"
  22. data-testid="edit-service-button"
  23. @onclick="BeginEdit">
  24. Edit
  25. </button>
  26. <button class="text-xs text-blue-400 hover:text-blue-300 transition"
  27. title="Rename service"
  28. data-testid="rename-service-button"
  29. @onclick="OpenRename">
  30. Rename
  31. </button>
  32. <button
  33. class="text-xs text-emerald-400 hover:text-emerald-300 transition"
  34. title="Clone service"
  35. data-testid="clone-service-button"
  36. @onclick="OpenClone">
  37. Clone
  38. </button>
  39. <button
  40. class="text-xs text-red-400 hover:text-red-300 transition"
  41. title="Delete server"
  42. data-testid="delete-service-button"
  43. @onclick="ConfirmDelete">
  44. Delete
  45. </button>
  46. }
  47. else
  48. {
  49. <button class="text-emerald-400 hover:text-emerald-300"
  50. data-testid="save-service-button"
  51. @onclick="Save">
  52. Save
  53. </button>
  54. <button class="text-zinc-500 hover:text-zinc-300"
  55. data-testid="cancel-service-button"
  56. @onclick="Cancel">
  57. Cancel
  58. </button>
  59. }
  60. </div>
  61. </div>
  62. <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
  63. <!-- IP -->
  64. <div data-testid="service-ip-section">
  65. <div class="text-zinc-400 mb-1">IP</div>
  66. @if (_isEditing)
  67. {
  68. <input
  69. data-testid="service-ip-input"
  70. class="w-full px-3 py-2 rounded-md
  71. bg-zinc-800 text-zinc-100
  72. border border-zinc-600"
  73. @bind="_edit.Ip"/>
  74. }
  75. else if (!string.IsNullOrWhiteSpace(EffectiveIp))
  76. {
  77. <div class="text-zinc-300"
  78. data-testid="service-ip-value">
  79. @EffectiveIp
  80. @if (string.IsNullOrWhiteSpace(Service.Network?.Ip))
  81. {
  82. <span class="text-zinc-500 text-xs ml-2">(inherited)</span>
  83. }
  84. </div>
  85. }
  86. </div>
  87. <!-- Port -->
  88. <div data-testid="service-port-section">
  89. <div class="text-zinc-400 mb-1">Port</div>
  90. @if (_isEditing)
  91. {
  92. <input type="number"
  93. data-testid="service-port-input"
  94. class="w-full px-3 py-2 rounded-md
  95. bg-zinc-800 text-zinc-100
  96. border border-zinc-600
  97. placeholder-zinc-500
  98. focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
  99. hover:border-zinc-400
  100. transition-colors duration-150
  101. cursor-text"
  102. @bind="_edit.Port"/>
  103. }
  104. else if (Service.Network?.Port.HasValue == true)
  105. {
  106. var href = GetBrowsableHref();
  107. if (href is not null)
  108. {
  109. <a href="@href"
  110. data-testid="service-port-value"
  111. target="_blank"
  112. rel="noopener noreferrer"
  113. class="text-emerald-400 hover:text-emerald-300 hover:underline transition">
  114. @Service.Network.Port
  115. </a>
  116. }
  117. else
  118. {
  119. <div class="text-zinc-300" data-testid="service-port-value">
  120. @Service.Network.Port
  121. </div>
  122. }
  123. }
  124. </div>
  125. <!-- Protocol -->
  126. <div data-testid="service-protocol-section">
  127. <div class="text-zinc-400 mb-1">Protocol</div>
  128. @if (_isEditing)
  129. {
  130. <input
  131. data-testid="service-protocol-input"
  132. class="w-full px-3 py-2 rounded-md bg-zinc-800 text-zinc-100 border border-zinc-600"
  133. @bind="_edit.Protocol"/>
  134. }
  135. else if (!string.IsNullOrWhiteSpace(Service.Network?.Protocol))
  136. {
  137. <div class="text-zinc-300"
  138. data-testid="service-protocol-value">
  139. @Service.Network!.Protocol
  140. </div>
  141. }
  142. </div>
  143. <!-- URL -->
  144. <div data-testid="service-url-section">
  145. <div class="text-zinc-400 mb-1">URL</div>
  146. @if (_isEditing)
  147. {
  148. <input
  149. data-testid="service-url-input"
  150. class="w-full px-3 py-2 rounded-md bg-zinc-800 text-zinc-100 border border-zinc-600"
  151. @bind="_edit.Url"/>
  152. }
  153. else if (!string.IsNullOrWhiteSpace(EffectiveUrl))
  154. {
  155. <a href="@EffectiveUrl"
  156. data-testid="service-url-value"
  157. target="_blank"
  158. rel="noopener noreferrer"
  159. class="text-emerald-400 hover:underline break-all">
  160. @EffectiveUrl
  161. </a>
  162. @if (string.IsNullOrWhiteSpace(Service.Network?.Url))
  163. {
  164. <span class="text-zinc-500 text-xs ml-2">(derived)</span>
  165. }
  166. }
  167. </div>
  168. <!-- Runs On -->
  169. <div data-testid="service-runson-section">
  170. <div class="text-zinc-400 mb-1">
  171. Runs On
  172. <button
  173. data-testid="service-runson-button"
  174. class="hover:text-emerald-400 pr-4"
  175. title="Add Runs On"
  176. @onclick="() => _selectParentOpen = true">
  177. @("+")
  178. </button>
  179. </div>
  180. @if (_isEditing)
  181. {
  182. @if (Service.RunsOn?.Count > 0)
  183. {
  184. @foreach (var parent in Service.RunsOn)
  185. {
  186. <button
  187. class="hover:text-emerald-400"
  188. title="Edit Runs On"
  189. @onclick="() => _selectParentOpen = true">
  190. @($"{parent}")
  191. </button>
  192. <button
  193. class="text-red-400 hover:text-red-300 pr-4"
  194. title="Remove"
  195. @onclick="() => HandleParentDeleted(parent)">
  196. @("✕")
  197. </button>
  198. }
  199. }
  200. }
  201. else if (Service.RunsOn?.Count > 0)
  202. {
  203. @foreach (var parent in Service.RunsOn)
  204. {
  205. <NavLink href="@($"resources/systems/{Uri.EscapeDataString(parent)}")"
  206. data-testid="service-runson-link"
  207. class="text-emerald-400 pr-4">
  208. @parent
  209. </NavLink>
  210. }
  211. }
  212. </div>
  213. <ResourceTagEditor Resource="Service"
  214. TestIdPrefix="service"/>
  215. <ResourceLabelEditor Resource="Service"
  216. TestIdPrefix="service"/>
  217. <div class="md:col-span-2">
  218. <div class="text-zinc-400 mb-1">Notes</div>
  219. @if (_isEditing)
  220. {
  221. <MarkdownEditor
  222. @bind-Value="_edit.Notes"
  223. ShowActionButtons="false"
  224. TestIdPrefix="service-notes-editor"/>
  225. }
  226. else
  227. {
  228. <MarkdownViewer
  229. Value="@Service.Notes"
  230. ShowEditButton="false"
  231. TestIdPrefix="service-notes-viewer"/>
  232. }
  233. </div>
  234. </div>
  235. </div>
  236. <SystemSelectionModal
  237. IsOpen="@_selectParentOpen"
  238. IsOpenChanged="v => _selectParentOpen = v"
  239. Title="Select a parent"
  240. Value="@SelectedParentName"
  241. OnAccept="HandleParentSelected"/>
  242. <ConfirmModal
  243. IsOpen="_confirmDeleteOpen"
  244. IsOpenChanged="v => _confirmDeleteOpen = v"
  245. Title="Delete service"
  246. ConfirmText="Delete"
  247. ConfirmClass="bg-red-600 hover:bg-red-500"
  248. OnConfirm="DeleteServer" TestIdPrefix="service-delete">
  249. Are you sure you want to delete <strong>@Service.Name</strong>?
  250. </ConfirmModal>
  251. <StringValueModal
  252. IsOpen="_cloneOpen"
  253. IsOpenChanged="v => _cloneOpen = v"
  254. Title="Clone service"
  255. Description="Enter a name for the cloned service"
  256. Label="New service name"
  257. Value="@($"{Service.Name}-copy")"
  258. OnSubmit="HandleCloneSubmit"
  259. TestIdPrefix="service-clone"/>
  260. <StringValueModal
  261. IsOpen="_renameOpen"
  262. IsOpenChanged="v => _renameOpen = v"
  263. Title="Rename service"
  264. Description="Enter a new name for this service"
  265. Label="New service name"
  266. Value="@Service.Name"
  267. OnSubmit="HandleRenameSubmit"
  268. TestIdPrefix="service-rename"/>
  269. @code
  270. {
  271. bool _cloneOpen;
  272. void OpenClone()
  273. {
  274. _cloneOpen = true;
  275. }
  276. async Task HandleCloneSubmit(string newName)
  277. {
  278. await CloneUseCase.ExecuteAsync(Service.Name, newName);
  279. Nav.NavigateTo($"resources/services/{Uri.EscapeDataString(newName)}");
  280. }
  281. }
  282. @code {
  283. [Parameter] [EditorRequired] public Service Service { get; set; } = default!;
  284. [Parameter] public EventCallback<string> OnSave { get; set; }
  285. private bool _isEditing;
  286. private ServiceEditModel _edit = new();
  287. void BeginEdit()
  288. {
  289. _edit = ServiceEditModel.From(Service);
  290. _isEditing = true;
  291. }
  292. async Task Save()
  293. {
  294. _isEditing = false;
  295. await UpdateUseCase.ExecuteAsync(
  296. _edit.Name,
  297. _edit.Ip,
  298. _edit.Port,
  299. _edit.Protocol,
  300. _edit.Url,
  301. _edit.RunsOn,
  302. _edit.Notes
  303. );
  304. await OnSave.InvokeAsync(Service.Name);
  305. await ResolveEffectiveIp();
  306. }
  307. void Cancel()
  308. {
  309. _isEditing = false;
  310. }
  311. bool _selectParentOpen;
  312. string? SelectedParentName;
  313. async Task HandleParentSelected(string? name)
  314. {
  315. SelectedParentName = name;
  316. var runsOn = (_isEditing ? _edit.RunsOn : Service.RunsOn) ?? new List<string>();
  317. runsOn = runsOn.Where(x => !string.IsNullOrWhiteSpace(x)).ToList();
  318. if (!string.IsNullOrWhiteSpace(name) && !runsOn.Contains(name))
  319. runsOn.Add(name);
  320. var ip = _isEditing ? _edit.Ip : Service.Network?.Ip;
  321. var port = _isEditing ? _edit.Port : Service.Network?.Port;
  322. var protocol = _isEditing ? _edit.Protocol : Service.Network?.Protocol;
  323. var url = _isEditing ? _edit.Url : Service.Network?.Url;
  324. var notes = _isEditing ? _edit.Notes : Service.Notes;
  325. await UpdateUseCase.ExecuteAsync(Service.Name, ip, port, protocol, url, runsOn, notes);
  326. // Refresh service from backend (optional, but if you do it, DO NOT nuke the edit buffer)
  327. Service = await GetByNameUseCase.ExecuteAsync(Service.Name);
  328. if (_isEditing)
  329. {
  330. // keep whatever the user typed; just sync RunsOn
  331. _edit.RunsOn = runsOn;
  332. }
  333. else
  334. {
  335. _edit = ServiceEditModel.From(Service);
  336. }
  337. }
  338. async Task HandleParentDeleted(string? name)
  339. {
  340. if (string.IsNullOrWhiteSpace(name))
  341. return;
  342. SelectedParentName = name;
  343. var runsOn = (_isEditing ? _edit.RunsOn : Service.RunsOn) ?? new List<string>();
  344. runsOn = runsOn.Where(x => !string.IsNullOrWhiteSpace(x) && x != name).ToList();
  345. var ip = _isEditing ? _edit.Ip : Service.Network?.Ip;
  346. var port = _isEditing ? _edit.Port : Service.Network?.Port;
  347. var protocol = _isEditing ? _edit.Protocol : Service.Network?.Protocol;
  348. var url = _isEditing ? _edit.Url : Service.Network?.Url;
  349. var notes = _isEditing ? _edit.Notes : Service.Notes;
  350. await UpdateUseCase.ExecuteAsync(Service.Name, ip, port, protocol, url, runsOn, notes);
  351. Service = await GetByNameUseCase.ExecuteAsync(Service.Name);
  352. if (_isEditing)
  353. _edit.RunsOn = runsOn;
  354. else
  355. _edit = ServiceEditModel.From(Service);
  356. }
  357. }
  358. @code {
  359. private bool _confirmDeleteOpen;
  360. [Parameter] public EventCallback<string> OnDeleted { get; set; }
  361. void ConfirmDelete()
  362. {
  363. _confirmDeleteOpen = true;
  364. }
  365. async Task DeleteServer()
  366. {
  367. _confirmDeleteOpen = false;
  368. await DeleteUseCase.ExecuteAsync(Service.Name);
  369. if (OnDeleted.HasDelegate)
  370. await OnDeleted.InvokeAsync(Service.Name);
  371. }
  372. }
  373. @code
  374. {
  375. bool _renameOpen;
  376. void OpenRename()
  377. {
  378. _renameOpen = true;
  379. }
  380. async Task HandleRenameSubmit(string newName)
  381. {
  382. await RenameUseCase.ExecuteAsync(Service.Name, newName);
  383. Nav.NavigateTo($"resources/services/{Uri.EscapeDataString(newName)}");
  384. }
  385. private string? GetBrowsableHref()
  386. {
  387. var ip = Service.Network?.Ip ?? EffectiveIp;
  388. var port = Service.Network?.Port;
  389. if (string.IsNullOrWhiteSpace(ip) || port is null)
  390. return null;
  391. var proto = Service.Network?.Protocol?.Trim().ToLowerInvariant();
  392. var scheme = proto switch
  393. {
  394. "https" => "https",
  395. "http" => "http",
  396. _ => "http"
  397. };
  398. // Build a correct absolute URL
  399. var ub = new UriBuilder(scheme, ip) { Port = port.Value };
  400. return ub.Uri.ToString();
  401. }
  402. }
  403. @code
  404. {
  405. private string? EffectiveUrl =>
  406. !string.IsNullOrWhiteSpace(Service.Network?.Url)
  407. ? Service.Network!.Url
  408. : GetBrowsableHref();
  409. private string? EffectiveIp;
  410. protected override async Task OnParametersSetAsync()
  411. {
  412. await ResolveEffectiveIp();
  413. }
  414. private async Task ResolveEffectiveIp()
  415. {
  416. // If service has its own IP, use it
  417. if (!string.IsNullOrWhiteSpace(Service.Network?.Ip))
  418. {
  419. EffectiveIp = Service.Network!.Ip;
  420. return;
  421. }
  422. // Must have exactly one parent
  423. if (Service.RunsOn?.Count != 1)
  424. {
  425. EffectiveIp = null;
  426. return;
  427. }
  428. var parentName = Service.RunsOn.First();
  429. // Load parent system
  430. var parent = await GetSystemByNameUseCase.ExecuteAsync(parentName);
  431. EffectiveIp = string.IsNullOrWhiteSpace(parent?.Ip)
  432. ? null
  433. : parent.Ip;
  434. }
  435. }