livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2025-09-08 14:04:31 +08:00
Code Issues Projects Releases Packages Wiki Activity

New deployment group listing

Browse source
This commit is contained in:
paulo-valim 2024-03-26 09:34:05 +01:00 • committed by José Valim
parent 6027a0bd70
commit 4c17109d12
2 changed files with 101 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
lib/livebook_web/live/hub/edit/team_component.ex
View file

@ -186,7 +186,7 @@ defmodule LivebookWeb.Hub.Edit.TeamComponent do
<.live_component
module={LivebookWeb.Hub.Teams.DeploymentGroupListComponent}
id="hub-deployment-groups-list"
hub_id={@hub.id}
hub={@hub}
deployment_groups={@deployment_groups}
target={@myself}
/>

128
lib/livebook_web/live/hub/teams/deployment_group_list_component.ex
View file

@ -9,38 +9,110 @@ defmodule LivebookWeb.Hub.Teams.DeploymentGroupListComponent do
<.no_entries :if={@deployment_groups == []}>
No deployment groups here... yet!
</.no_entries>
<div
:for={deployment_group <- @deployment_groups}
class="flex items-center justify-between border border-gray-200 rounded-lg p-4"
>
<div class="flex items-center space-x-12">
<.labeled_text label="Name"><%= deployment_group.name %></.labeled_text>
<.labeled_text label="Mode"><%= deployment_group.mode %></.labeled_text>
</div>
<div class="flex items-center space-x-2">
<.menu id={"hub-deployment-group-#{deployment_group.id}-menu"}>
<:toggle>
<.icon_button aria-label="open deployment group menu" type="button">
<.remix_icon icon="more-2-fill" />
</.icon_button>
</:toggle>
<.menu_item>
<.link
id={"hub-deployment-group-#{deployment_group.id}-edit"}
patch={~p"/hub/#{@hub_id}/deployment-groups/edit/#{deployment_group.id}"}
type="button"
role="menuitem"
<div :for={deployment_group <- @deployment_groups} class="flex flex-col space-y-4">
<div class="bg-white py-6 px-4 flex flex-col space-y-8 rounded-lg border border-gray-900/10">
<!-- Tabs -->
<div class="block">
<nav class="tabs" aria-label="Tabs">
<a
href="#"
id={"overview-tab-#{deployment_group.id}"}
class="tab active"
phx-click={
JS.toggle(to: "#overview-content-#{deployment_group.id}")
|> JS.toggle(to: "#aditional-secrets-content-#{deployment_group.id}")
|> JS.add_class("active")
|> JS.remove_class("active", to: "#aditional-secrets-tab-#{deployment_group.id}")
}
>
<.remix_icon icon="file-edit-line" />
<span>Edit</span>
</.link>
</.menu_item>
</.menu>
<span>Overview</span>
</a>
<a
href="#"
id={"aditional-secrets-tab-#{deployment_group.id}"}
class="tab"
phx-click={
JS.toggle(to: "#overview-content-#{deployment_group.id}")
|> JS.toggle(to: "#aditional-secrets-content-#{deployment_group.id}")
|> JS.add_class("active")
|> JS.remove_class("active", to: "#overview-tab-#{deployment_group.id}")
}
>
<span>Aditional Secrets</span>
</a>
</nav>
</div>
<!-- Overview -->
<div id={"overview-content-#{deployment_group.id}"}>
<div class="flex justify-between items-start">
<div>
<div class="flex gap-4 items-center text-gray-700">
<h3 class="font-semibold"><%= deployment_group.name %></h3>
<%= if deployment_group.mode == :online do %>
<div class="bg-green-100 text-green-800 text-xs px-2.5 py-0.5 rounded cursor-default">
<%= deployment_group.mode %>
</div>
<% else %>
<div class="bg-red-100 text-red-800 text-xs px-2.5 py-0.5 rounded cursor-default">
<%= deployment_group.mode %>
</div>
<% end %>
</div>
<div class="text-xs mt-1">internal-domain.example.com</div>
</div>
<button
type="button"
class="text-sm font-semibold text-blue-600 hover:text-blue-700 "
>
<.remix_icon icon="links-line" /> Manage on teams
</button>
</div>
<!-- Stats -->
<div class="grid grid-cols-3 gap-px bg-white pt-6 pb-4">
<div class="bg-gray-50 px-4 py-4 sm:px-6 lg:px-8 rounded-l-lg">
<p class="text-sm font-medium leading-6 text-gray-500">Instances running</p>
<p class="mt-2 flex items-baseline gap-x-5">
<span class="text-2xl font-semibold tracking-tight text-gray-900">3</span>
<span class="text-sm font-semibold text-gray-800">
+ add new
</span>
</p>
</div>
<div class="bg-gray-50 px-4 py-4 sm:px-6 lg:px-8">
<p class="text-sm font-medium leading-6 text-gray-500">Apps running</p>
<p class="mt-2 flex items-baseline gap-x-5">
<span class="text-2xl font-semibold tracking-tight text-gray-900">0</span>
<span class="text-sm font-semibold text-gray-800">+ add new</span>
</p>
</div>
<div class="bg-gray-50 px-4 py-4 sm:px-6 lg:px-8 rounded-r-lg">
<p class="text-sm font-medium leading-6 text-gray-500">Secrets</p>
<p class="mt-2 flex items-baseline gap-x-5">
<span class="text-2xl font-semibold tracking-tight text-gray-900">0</span>
<span class="text-sm font-semibold text-gray-800">+ add new</span>
</p>
</div>
</div>
</div>
<!-- Aditional Secrets -->
<div id={"aditional-secrets-content-#{deployment_group.id}"} class="hidden">
<.live_component
module={LivebookWeb.Hub.SecretListComponent}
id={"deployment-group-secrets-list-#{deployment_group.id}"}
hub={@hub}
secrets={deployment_group.secrets}
add_path={
~p"/hub/#{@hub.id}/deployment-groups/edit/#{deployment_group.id}/secrets/new"
}
edit_path={"hub/#{@hub.id}/deployment-groups/edit/#{deployment_group.id}/secrets/edit"}
return_to={~p"/hub/#{@hub.id}/deployment-groups/edit/#{deployment_group.id}"}
/>
</div>
</div>
</div>
</div>
<div class="flex">
<.button patch={~p"/hub/#{@hub_id}/deployment-groups/new"} id="add-deployment-group">
<div>
<.button patch={~p"/hub/#{@hub.id}/deployment-groups/new"} id="add-deployment-group">
Add deployment group
</.button>
</div>