Skip to content

feat: Clusters, container resource management and server info views #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nfebe merged 7 commits into from
Mar 18, 2026
Merged

feat: Clusters, container resource management and server info views #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
019c43d
feat(ui): Add server info view with network health
nfebe Mar 18, 2026
e3ed795
enhance(ui): Move sidebar counts to the right
nfebe Mar 18, 2026
ea60b2c
enhance(ui): Rename Quick Actions to Shortcuts and add Server Info
nfebe Mar 18, 2026
0194066
feat(ui): Add container resource management
nfebe Mar 18, 2026
f5ba57e
feat(ui): Add cluster management view
nfebe Mar 18, 2026
4a02511
enhance(ui): Add cluster-aware environment selector to sidebar
nfebe Mar 18, 2026
0fc08d2
fix(ui): Apply prettier formatting to new views
nfebe Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
485 changes: 485 additions & 0 deletions src/components/ContainerResourcesModal.vue
View file
Open in desktop

Large diffs are not rendered by default.

176 changes: 158 additions & 18 deletions src/layouts/DashboardLayout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,36 @@
</div>

<div v-if="!sidebarCollapsed" class="environment-selector">
<div class="env-current">
<div class="env-current" @click="envDropdownOpen = !envDropdownOpen">
<i class="pi pi-server" />
<span>Local Environment</span>
<i class="pi pi-chevron-down" />
<span>{{ currentServerName }}</span>
<i class="pi" :class="envDropdownOpen ? 'pi-chevron-up' : 'pi-chevron-down'" />
</div>
<div v-if="envDropdownOpen" class="env-dropdown">
<div class="env-option active" @click="envDropdownOpen = false">
<i class="pi pi-server" />
<div class="env-option-info">
<span class="env-option-name">{{ currentServerName }}</span>
<span class="env-option-hint">Current server</span>
</div>
<i class="pi pi-check" />
</div>
<div v-for="peer in clusterPeers" :key="peer.id" class="env-option" @click="envDropdownOpen = false">
<i class="pi pi-server" />
<div class="env-option-info">
<span class="env-option-name">{{ peer.name }}</span>
<span class="env-option-hint">{{ peer.status }}</span>
</div>
</div>
<router-link
v-if="authStore.hasPermission('cluster:read')"
to="/cluster"
class="env-option env-manage"
@click="envDropdownOpen = false"
>
<i class="pi pi-cog" />
<span class="env-option-name">Manage Cluster</span>
</router-link>
</div>
</div>

Expand All @@ -31,8 +57,8 @@
</div>
<div v-show="expandedGroups.stacks && !sidebarCollapsed" class="nav-group-items">
<router-link to="/deployments" class="nav-subitem" active-class="active">
<span class="nav-count">{{ stats.deployments }}</span>
Deployments
<span class="nav-count">{{ stats.deployments }}</span>
</router-link>
</div>
</div>
Expand Down Expand Up @@ -62,44 +88,44 @@
class="nav-subitem"
active-class="active"
>
<span class="nav-count">{{ stats.containers }}</span>
Containers
<span class="nav-count">{{ stats.containers }}</span>
</router-link>
<router-link
v-if="authStore.hasPermission('images:read')"
to="/images"
class="nav-subitem"
active-class="active"
>
<span class="nav-count">{{ stats.images }}</span>
Images
<span class="nav-count">{{ stats.images }}</span>
</router-link>
<router-link
v-if="authStore.hasPermission('volumes:read')"
to="/volumes"
class="nav-subitem"
active-class="active"
>
<span class="nav-count">{{ stats.volumes }}</span>
Volumes
<span class="nav-count">{{ stats.volumes }}</span>
</router-link>
<router-link
v-if="authStore.hasPermission('networks:read')"
to="/networks"
class="nav-subitem"
active-class="active"
>
<span class="nav-count">{{ stats.networks }}</span>
Networks
<span class="nav-count">{{ stats.networks }}</span>
</router-link>
<router-link
v-if="authStore.hasPermission('containers:read')"
to="/docker-ports"
class="nav-subitem"
active-class="active"
>
<span class="nav-count">{{ stats.dockerPorts }}</span>
Port Mappings
<span class="nav-count">{{ stats.dockerPorts }}</span>
</router-link>
</div>
</div>
Expand All @@ -108,7 +134,8 @@
v-if="
authStore.hasPermission('system:read') ||
authStore.hasPermission('infrastructure:read') ||
authStore.hasPermission('scheduler:read')
authStore.hasPermission('scheduler:read') ||
authStore.hasPermission('cluster:read')
"
class="nav-group"
>
Expand All @@ -122,32 +149,49 @@
/>
</div>
<div v-show="expandedGroups.system && !sidebarCollapsed" class="nav-group-items">
<router-link
v-if="authStore.hasPermission('system:read')"
to="/server-info"
class="nav-subitem"
active-class="active"
>
Server Info
</router-link>
<router-link
v-if="authStore.hasPermission('cluster:read')"
to="/cluster"
class="nav-subitem"
active-class="active"
>
Cluster
<span v-if="clusterPeers.length" class="nav-count">{{ clusterPeers.length + 1 }}</span>
</router-link>
<router-link
v-if="authStore.hasPermission('infrastructure:read')"
to="/infrastructure"
class="nav-subitem"
active-class="active"
>
<span class="nav-count">{{ stats.infrastructure }}</span>
Infrastructure
<span class="nav-count">{{ stats.infrastructure }}</span>
</router-link>
<router-link
v-if="authStore.hasPermission('system:read')"
to="/system-ports"
class="nav-subitem"
active-class="active"
>
<span class="nav-count">{{ stats.ports }}</span>
Ports
<span class="nav-count">{{ stats.ports }}</span>
</router-link>
<router-link
v-if="authStore.hasPermission('system:read')"
to="/services"
class="nav-subitem"
active-class="active"
>
<span class="nav-count">{{ stats.services }}</span>
Services
<span class="nav-count">{{ stats.services }}</span>
</router-link>
<router-link
v-if="authStore.hasPermission('scheduler:read')"
Expand All @@ -172,8 +216,8 @@
</div>
<div v-show="expandedGroups.databases && !sidebarCollapsed" class="nav-group-items">
<router-link to="/databases" class="nav-subitem" active-class="active">
<span class="nav-count">{{ stats.databases }}</span>
Servers
<span class="nav-count">{{ stats.databases }}</span>
</router-link>
</div>
</div>
Expand Down Expand Up @@ -222,8 +266,8 @@
class="nav-subitem"
active-class="active"
>
<span class="nav-count">{{ stats.certificates }}</span>
Certificates
<span class="nav-count">{{ stats.certificates }}</span>
</router-link>
</div>
</div>
Expand All @@ -240,8 +284,8 @@
</div>
<div v-show="expandedGroups.extensions && !sidebarCollapsed" class="nav-group-items">
<router-link to="/apps" class="nav-subitem" active-class="active">
<span class="nav-count">{{ stats.apps }}</span>
Installed Apps
<span class="nav-count">{{ stats.apps }}</span>
</router-link>
<router-link to="/marketplace" class="nav-subitem" active-class="active"> Marketplace </router-link>
</div>
Expand Down Expand Up @@ -388,6 +432,7 @@ import { ref, reactive, computed, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStatsStore } from "@/stores/stats";
import { useAuthStore } from "@/stores/auth";
import { clusterApi, type ClusterPeer } from "@/services/api";
import Logo from "@/components/base/Logo.vue";

const route = useRoute();
Expand All @@ -396,6 +441,9 @@ const statsStore = useStatsStore();
const authStore = useAuthStore();
const sidebarCollapsed = ref(false);
const isRefreshing = ref(false);
const envDropdownOpen = ref(false);
const currentServerName = ref("Local Server");
const clusterPeers = ref<ClusterPeer[]>([]);

const expandedGroups = reactive({
stacks: true,
Expand Down Expand Up @@ -453,6 +501,8 @@ const currentPageTitle = computed(() => {
"system-ports": "System Ports",
services: "System Services",
"cron-jobs": "Cron Jobs",
"server-info": "Server Info",
cluster: "Cluster",
databases: "Database Servers",
security: "Security & Monitoring",
certificates: "SSL Certificates",
Expand All @@ -478,7 +528,9 @@ const breadcrumbs = computed(() => {
} else if (["containers", "images", "volumes", "networks", "docker-ports"].includes(routeName)) {
crumbs.push({ label: "Docker", path: "" });
crumbs.push({ label: currentPageTitle.value, path: "" });
} else if (["infrastructure", "system-ports", "services", "cron-jobs"].includes(routeName)) {
} else if (
["infrastructure", "system-ports", "services", "cron-jobs", "server-info", "cluster"].includes(routeName)
) {
crumbs.push({ label: "System", path: "" });
crumbs.push({ label: currentPageTitle.value, path: "" });
} else if (routeName === "databases") {
Expand Down Expand Up @@ -526,9 +578,23 @@ const handleLogout = () => {
router.push("/login");
};

const fetchClusterInfo = async () => {
try {
const res = await clusterApi.getStatus();
if (res.data.enabled && res.data.server_name) {
currentServerName.value = res.data.server_name;
const peersRes = await clusterApi.listPeers();
clusterPeers.value = peersRes.data.peers || [];
}
} catch {
// cluster not available
}
};

onMounted(() => {
statsStore.fetchAll();
authStore.fetchCurrentUser();
fetchClusterInfo();
setInterval(() => statsStore.fetchAll(), 15000);
});
</script>
Expand Down Expand Up @@ -600,6 +666,80 @@ onMounted(() => {
font-size: 0.75rem;
}

.env-dropdown {
margin-top: 0.375rem;
background: #1e293b;
border-radius: var(--radius-sm);
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
}

.env-option {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.625rem;
cursor: pointer;
transition: background 0.15s;
color: #94a3b8;
font-size: 0.8125rem;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.env-option:last-child {
border-bottom: none;
}

.env-option:hover {
background: rgba(255, 255, 255, 0.08);
color: white;
}

.env-option.active {
color: #60a5fa;
}

.env-option.active .pi-check {
margin-left: auto;
font-size: 0.6875rem;
}

.env-option i:first-child {
font-size: 0.8125rem;
width: 16px;
text-align: center;
}

.env-option-info {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}

.env-option-name {
font-size: 0.8125rem;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.env-option-hint {
font-size: 0.625rem;
color: #64748b;
}

.env-manage {
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #64748b;
}

.env-manage:hover {
color: #94a3b8;
}

.nav-menu {
flex: 1;
padding: 0.75rem 0;
Expand Down Expand Up @@ -700,7 +840,7 @@ onMounted(() => {
border-radius: 9999px;
font-size: 0.6875rem;
font-weight: 600;
margin-right: auto;
margin-left: auto;
}

.sidebar-footer {
Expand Down
12 changes: 12 additions & 0 deletions src/router/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,18 @@ const routes: RouteRecordRaw[] = [
component: () => import("@/views/InfrastructureView.vue"),
meta: { permission: "infrastructure:read" },
},
{
path: "server-info",
name: "server-info",
component: () => import("@/views/ServerInfoView.vue"),
meta: { permission: "system:read" },
},
{
path: "cluster",
name: "cluster",
component: () => import("@/views/ClusterView.vue"),
meta: { permission: "cluster:read" },
},
{
path: "security",
name: "security",
Expand Down
Loading
Loading