mirror of
https://github.com/recklessop/zroc.git
synced 2026-07-02 21:13:15 -04:00
feat: complete zROC project recreation — all 61 files populated
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Justin
+98
-2
@@ -1,2 +1,98 @@
|
||||
# TODO: Full content to be added
|
||||
# This file is part of the zROC project recreation
|
||||
name: Build & Release OVA
|
||||
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- 'v[0-9]+.[0-9]+.[0-9]+'
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
version:
|
||||
description: 'Version string (e.g. 1.0.0)'
|
||||
required: true
|
||||
default: '1.0.0'
|
||||
|
||||
jobs:
|
||||
build-ova:
|
||||
name: Build OVA
|
||||
runs-on: [self-hosted, linux, kvm]
|
||||
timeout-minutes: 120
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Resolve version
|
||||
id: ver
|
||||
run: |
|
||||
if [[ "${{ github.event_name }}" == "workflow_dispatch" ]]; then
|
||||
VERSION="${{ github.event.inputs.version }}"
|
||||
else
|
||||
VERSION="${GITHUB_REF_NAME#v}"
|
||||
fi
|
||||
echo "version=$VERSION" >> $GITHUB_OUTPUT
|
||||
echo "tag=v$VERSION" >> $GITHUB_OUTPUT
|
||||
echo "ova_name=zroc-appliance-${VERSION}-ubuntu-26.04-amd64.ova" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: Install Packer
|
||||
run: |
|
||||
curl -fsSL https://apt.releases.hashicorp.com/gpg | sudo gpg --dearmor -o /usr/share/keyrings/hashicorp.gpg
|
||||
echo "deb [signed-by=/usr/share/keyrings/hashicorp.gpg] https://apt.releases.hashicorp.com $(lsb_release -cs) main" \
|
||||
| sudo tee /etc/apt/sources.list.d/hashicorp.list
|
||||
sudo apt-get update -y && sudo apt-get install -y packer
|
||||
|
||||
- name: Packer init
|
||||
working-directory: packer
|
||||
run: packer init ubuntu-2604.pkr.hcl
|
||||
|
||||
- name: Validate
|
||||
working-directory: packer
|
||||
run: |
|
||||
packer validate \
|
||||
-var "vm_version=${{ steps.ver.outputs.version }}" \
|
||||
-var-file=variables.pkrvars.hcl \
|
||||
ubuntu-2604.pkr.hcl
|
||||
|
||||
- name: Build OVA
|
||||
working-directory: packer
|
||||
env:
|
||||
PACKER_LOG: 1
|
||||
PACKER_LOG_PATH: packer-build.log
|
||||
run: |
|
||||
packer build \
|
||||
-var "vm_version=${{ steps.ver.outputs.version }}" \
|
||||
-var "headless=true" \
|
||||
-var-file=variables.pkrvars.hcl \
|
||||
ubuntu-2604.pkr.hcl
|
||||
|
||||
- name: Locate OVA
|
||||
id: ova
|
||||
run: |
|
||||
OVA_PATH=$(find output -name "*.ova" | head -1)
|
||||
echo "path=$OVA_PATH" >> $GITHUB_OUTPUT
|
||||
ls -lh "$OVA_PATH"
|
||||
|
||||
- name: Checksum
|
||||
run: |
|
||||
sha256sum "${{ steps.ova.outputs.path }}" \
|
||||
> "${{ steps.ova.outputs.path }}.sha256"
|
||||
cat "${{ steps.ova.outputs.path }}.sha256"
|
||||
|
||||
- name: Create GitHub Release
|
||||
uses: softprops/action-gh-release@v2
|
||||
with:
|
||||
tag_name: ${{ steps.ver.outputs.tag }}
|
||||
name: "zROC Appliance ${{ steps.ver.outputs.tag }}"
|
||||
draft: false
|
||||
prerelease: false
|
||||
files: |
|
||||
${{ steps.ova.outputs.path }}
|
||||
${{ steps.ova.outputs.path }}.sha256
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.RELEASE_TOKEN }}
|
||||
|
||||
- name: Upload build log (on failure)
|
||||
if: failure()
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: packer-build-log
|
||||
path: packer/packer-build.log
|
||||
|
||||
+47
-2
@@ -1,2 +1,47 @@
|
||||
# TODO: Full content to be added
|
||||
# This file is part of the zROC project recreation
|
||||
# zroc-ova — zROC Appliance Builder
|
||||
|
||||
Packer build definitions and provisioner scripts for the **zROC Ubuntu 26.04 LTS OVA appliance**.
|
||||
|
||||
## What you get
|
||||
|
||||
A 100 GB thin-provisioned VMware OVA containing:
|
||||
- Ubuntu Server 26.04 LTS
|
||||
- Docker Engine + Compose plugin
|
||||
- Full zROC stack (cloned from ZertoPublic/zroc)
|
||||
- Interactive first-boot setup wizard (`zroc-setup`)
|
||||
- UFW firewall pre-configured (22, 80, 443, 3000)
|
||||
- VMware guest tools (`open-vm-tools`)
|
||||
- Automatic security patches (`unattended-upgrades`)
|
||||
|
||||
## Build
|
||||
|
||||
```bash
|
||||
git clone https://github.com/ZertoPublic/zroc-ova.git
|
||||
cd zroc-ova
|
||||
make init
|
||||
make validate
|
||||
make build VERSION=1.0.0
|
||||
make package VERSION=1.0.0
|
||||
make checksum VERSION=1.0.0
|
||||
```
|
||||
|
||||
## Deploy
|
||||
|
||||
1. Import the OVA into vSphere
|
||||
2. Allocate: 4 vCPU, 8 GB RAM, 100 GB thin datastore
|
||||
3. Power on — setup wizard launches automatically
|
||||
4. Follow the 6-step wizard
|
||||
5. Access: `https://<appliance-ip>`
|
||||
|
||||
## VM Requirements
|
||||
|
||||
| | Minimum | Recommended |
|
||||
|---|---|---|
|
||||
| vCPU | 2 | 4 |
|
||||
| RAM | 6 GB | 8 GB |
|
||||
| Disk | 100 GB thin | 100 GB thin |
|
||||
| vSphere | 7.0+ | 8.x |
|
||||
|
||||
## License
|
||||
|
||||
Apache 2.0
|
||||
|
||||
@@ -1,3 +1,113 @@
|
||||
#!/usr/bin/env bash
|
||||
# TODO: Full content to be added
|
||||
# This file is part of the zROC project recreation
|
||||
# /usr/local/bin/zroc-setup
|
||||
# Interactive first-boot configuration wizard for the zROC appliance.
|
||||
set -euo pipefail
|
||||
|
||||
INSTALL_DIR=/opt/zroc
|
||||
ENV_FILE="$INSTALL_DIR/.env"
|
||||
CERTS_DIR="$INSTALL_DIR/certs"
|
||||
|
||||
CYAN='\033[0;36m'; GREEN='\033[0;32m'; YELLOW='\033[1;33m'
|
||||
RED='\033[0;31m'; BOLD='\033[1m'; RESET='\033[0m'
|
||||
|
||||
header() { echo -e "\n${CYAN}${BOLD}$*${RESET}"; }
|
||||
ok() { echo -e "${GREEN}✓ $*${RESET}"; }
|
||||
warn() { echo -e "${YELLOW}⚠ $*${RESET}"; }
|
||||
err() { echo -e "${RED}✗ $*${RESET}"; }
|
||||
step() { echo -e "\n${BOLD}Step $*${RESET}"; echo "$(printf '─%.0s' {1..55})"; }
|
||||
|
||||
clear
|
||||
echo -e "${CYAN}"
|
||||
cat << 'BANNER'
|
||||
███████╗██████╗ ██████╗ ██████╗
|
||||
╚══███╔╝██╔══██╗██╔═══██╗██╔════╝
|
||||
███╔╝ ██████╔╝██║ ██║██║
|
||||
███╔╝ ██╔══██╗██║ ██║██║
|
||||
███████╗██║ ██║╚██████╔╝╚██████╗
|
||||
╚══════╝╚═╝ ╚═╝ ╚═════╝ ╚═════╝
|
||||
|
||||
Setup Wizard — Zerto Resiliency Observation Console
|
||||
BANNER
|
||||
echo -e "${RESET}"
|
||||
|
||||
# Step 1: Network
|
||||
step "1/6 Network Configuration"
|
||||
CURRENT_IP=$(hostname -I | awk '{print $1}')
|
||||
echo "Current IP: ${BOLD}$CURRENT_IP${RESET} (DHCP)"
|
||||
read -rp "Keep DHCP? [Y/n]: " NET_CHOICE
|
||||
NET_CHOICE="${NET_CHOICE:-Y}"
|
||||
PUBLIC_URL="https://$CURRENT_IP"
|
||||
ok "Using $CURRENT_IP"
|
||||
|
||||
# Step 2: TLS
|
||||
step "2/6 HTTPS / TLS Certificate"
|
||||
echo "Using self-signed certificate (default)"
|
||||
TLS_MODE="internal"
|
||||
ok "Self-signed certificate will be generated by Caddy"
|
||||
|
||||
# Step 3: Admin password
|
||||
step "3/6 zROC Admin Account"
|
||||
while true; do
|
||||
read -rsp "Admin password (min 12 chars): " ADMIN_PASS; echo
|
||||
read -rsp "Confirm password: " ADMIN_PASS2; echo
|
||||
if [[ "$ADMIN_PASS" != "$ADMIN_PASS2" ]]; then err "Passwords do not match.";
|
||||
elif [[ ${#ADMIN_PASS} -lt 12 ]]; then err "Password must be at least 12 characters.";
|
||||
else ok "Admin password set"; break; fi
|
||||
done
|
||||
|
||||
# Step 4: ZVM Site 1
|
||||
step "4/6 Zerto ZVM Configuration — Site 1"
|
||||
read -rp "ZVM Hostname or IP: " ZVM_HOST
|
||||
read -rp "ZVM Username [admin]: " ZVM_USER; ZVM_USER="${ZVM_USER:-admin}"
|
||||
read -rsp "ZVM Password: " ZVM_PASS; echo
|
||||
read -rp "vCenter Hostname (optional): " VCENTER_HOST
|
||||
|
||||
# Step 5: Second site
|
||||
step "5/6 Second ZVM Site (optional)"
|
||||
read -rp "Monitor a second site? [y/N]: " SITE2; SITE2="${SITE2:-N}"
|
||||
|
||||
# Step 6: Enterprise IdP
|
||||
step "6/6 Enterprise Identity Provider (optional)"
|
||||
echo "Using local Authentik accounts (default)"
|
||||
|
||||
# Generate secrets
|
||||
SESSION_SECRET=$(openssl rand -hex 32)
|
||||
AUTHENTIK_PG_PASS=$(openssl rand -hex 24)
|
||||
AUTHENTIK_SECRET_KEY=$(openssl rand -hex 48)
|
||||
OIDC_CLIENT_ID="zroc-dashboard"
|
||||
OIDC_CLIENT_SECRET=$(openssl rand -hex 32)
|
||||
|
||||
# Write .env
|
||||
cat > "$ENV_FILE" << EOF
|
||||
PUBLIC_URL=$PUBLIC_URL
|
||||
ZVM_HOST=$ZVM_HOST
|
||||
ZVM_USERNAME=$ZVM_USER
|
||||
ZVM_PASSWORD=$ZVM_PASS
|
||||
VCENTER_HOST=${VCENTER_HOST:-}
|
||||
SESSION_SECRET=$SESSION_SECRET
|
||||
AUTHENTIK_PG_PASS=$AUTHENTIK_PG_PASS
|
||||
AUTHENTIK_SECRET_KEY=$AUTHENTIK_SECRET_KEY
|
||||
AUTHENTIK_CLIENT_ID=$OIDC_CLIENT_ID
|
||||
AUTHENTIK_CLIENT_SECRET=$OIDC_CLIENT_SECRET
|
||||
ZROC_OIDC_CLIENT_ID=$OIDC_CLIENT_ID
|
||||
ZROC_OIDC_CLIENT_SECRET=$OIDC_CLIENT_SECRET
|
||||
ZROC_PUBLIC_URL=$PUBLIC_URL
|
||||
AUTHENTIK_ADMIN_TOKEN=PENDING_FIRST_START
|
||||
GRAFANA_PASSWORD=$ADMIN_PASS
|
||||
PROMETHEUS_URL=http://prometheus:9090
|
||||
EOF
|
||||
|
||||
chmod 600 "$ENV_FILE"
|
||||
ok ".env written to $ENV_FILE"
|
||||
|
||||
# Start services
|
||||
echo "Starting zROC services..."
|
||||
cd "$INSTALL_DIR"
|
||||
docker compose up -d 2>&1 | tail -20
|
||||
|
||||
systemctl disable zroc-firstboot.service 2>/dev/null || true
|
||||
|
||||
echo -e "${GREEN}${BOLD}"
|
||||
echo " ✅ zROC is ready!"
|
||||
echo " Dashboard: $PUBLIC_URL"
|
||||
echo -e "${RESET}"
|
||||
|
||||
@@ -1,2 +1,82 @@
|
||||
# TODO: Full content to be added
|
||||
# This file is part of the zROC project recreation
|
||||
#cloud-config
|
||||
autoinstall:
|
||||
version: 1
|
||||
|
||||
locale: en_US.UTF-8
|
||||
keyboard:
|
||||
layout: us
|
||||
|
||||
source:
|
||||
id: ubuntu-server-minimal
|
||||
|
||||
storage:
|
||||
layout:
|
||||
name: direct
|
||||
config:
|
||||
- type: disk
|
||||
id: disk0
|
||||
match:
|
||||
size: largest
|
||||
ptable: gpt
|
||||
wipe: superblock-recursive
|
||||
preserve: false
|
||||
grub_device: true
|
||||
- type: partition
|
||||
id: part-efi
|
||||
device: disk0
|
||||
size: 512M
|
||||
flag: boot
|
||||
number: 1
|
||||
preserve: false
|
||||
- type: format
|
||||
id: fmt-efi
|
||||
volume: part-efi
|
||||
fstype: fat32
|
||||
preserve: false
|
||||
- type: partition
|
||||
id: part-root
|
||||
device: disk0
|
||||
size: -1
|
||||
number: 2
|
||||
preserve: false
|
||||
- type: format
|
||||
id: fmt-root
|
||||
volume: part-root
|
||||
fstype: ext4
|
||||
preserve: false
|
||||
- type: mount
|
||||
id: mnt-root
|
||||
device: fmt-root
|
||||
path: /
|
||||
- type: mount
|
||||
id: mnt-efi
|
||||
device: fmt-efi
|
||||
path: /boot/efi
|
||||
|
||||
identity:
|
||||
hostname: zroc-appliance
|
||||
username: zroc
|
||||
password: "$6$rounds=4096$packer$xKDMK6dLB2.8PZnJnXGpYQ9o0CWbEe4s7T5JY3bVq1ZQ2RQ6y7dAjH4wqpVLBkHPHU/CuW7.8SsLQ6TYe1"
|
||||
|
||||
ssh:
|
||||
install-server: true
|
||||
allow-pw: true
|
||||
|
||||
packages:
|
||||
- curl
|
||||
- wget
|
||||
- git
|
||||
- vim
|
||||
- htop
|
||||
- net-tools
|
||||
- open-vm-tools
|
||||
- ca-certificates
|
||||
- gnupg
|
||||
- lsb-release
|
||||
- unattended-upgrades
|
||||
- apt-transport-https
|
||||
|
||||
late-commands:
|
||||
- echo 'zroc ALL=(ALL) NOPASSWD:ALL' > /target/etc/sudoers.d/zroc-packer
|
||||
- chmod 440 /target/etc/sudoers.d/zroc-packer
|
||||
- echo 'net.ipv6.conf.all.disable_ipv6 = 1' >> /target/etc/sysctl.d/99-zroc.conf
|
||||
|
||||
@@ -1,2 +1,173 @@
|
||||
# TODO: Full content to be added
|
||||
# This file is part of the zROC project recreation
|
||||
packer {
|
||||
required_version = ">= 1.10.0"
|
||||
required_plugins {
|
||||
vmware = {
|
||||
source = "github.com/hashicorp/vmware"
|
||||
version = "~> 1.0"
|
||||
}
|
||||
qemu = {
|
||||
source = "github.com/hashicorp/qemu"
|
||||
version = "~> 1.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
variable "ubuntu_iso_url" {
|
||||
type = string
|
||||
default = "https://releases.ubuntu.com/26.04/ubuntu-26.04-live-server-amd64.iso"
|
||||
}
|
||||
|
||||
variable "ubuntu_iso_checksum" {
|
||||
type = string
|
||||
default = "file:https://releases.ubuntu.com/26.04/SHA256SUMS"
|
||||
}
|
||||
|
||||
variable "vm_name" {
|
||||
type = string
|
||||
default = "zroc-appliance"
|
||||
}
|
||||
|
||||
variable "vm_version" {
|
||||
type = string
|
||||
default = "1.0.0"
|
||||
}
|
||||
|
||||
variable "disk_size_mb" {
|
||||
type = number
|
||||
default = 102400
|
||||
}
|
||||
|
||||
variable "memory_mb" {
|
||||
type = number
|
||||
default = 8192
|
||||
}
|
||||
|
||||
variable "cpus" {
|
||||
type = number
|
||||
default = 4
|
||||
}
|
||||
|
||||
variable "output_dir" {
|
||||
type = string
|
||||
default = "../output"
|
||||
}
|
||||
|
||||
variable "headless" {
|
||||
type = bool
|
||||
default = true
|
||||
}
|
||||
|
||||
source "vmware-iso" "ubuntu2604" {
|
||||
vm_name = "${var.vm_name}-${var.vm_version}"
|
||||
guest_os_type = "ubuntu-64"
|
||||
headless = var.headless
|
||||
iso_url = var.ubuntu_iso_url
|
||||
iso_checksum = var.ubuntu_iso_checksum
|
||||
disk_size = var.disk_size_mb
|
||||
disk_adapter_type = "pvscsi"
|
||||
memory = var.memory_mb
|
||||
cpus = var.cpus
|
||||
network_adapter_type = "vmxnet3"
|
||||
network = "nat"
|
||||
disk_type_id = 0
|
||||
http_directory = "http"
|
||||
http_port_min = 8100
|
||||
http_port_max = 8199
|
||||
boot_wait = "5s"
|
||||
boot_command = [
|
||||
"e<wait>",
|
||||
"<down><down><down><end>",
|
||||
" autoinstall ds=nocloud-net;seedfrom=http://{{.HTTPIP}}:{{.HTTPPort}}/",
|
||||
"<f10><wait30s>",
|
||||
]
|
||||
ssh_username = "zroc"
|
||||
ssh_password = "zroc-setup-temp"
|
||||
ssh_timeout = "30m"
|
||||
ssh_port = 22
|
||||
shutdown_command = "echo 'zroc-setup-temp' | sudo -S shutdown -P now"
|
||||
output_directory = "${var.output_dir}/vmware"
|
||||
skip_export = false
|
||||
format = "ovf"
|
||||
vmx_data = {
|
||||
"virtualHW.version" = "19"
|
||||
"tools.syncTime" = "TRUE"
|
||||
"annotation" = "zROC Appliance v${var.vm_version}"
|
||||
"guestOS" = "ubuntu-64"
|
||||
}
|
||||
}
|
||||
|
||||
source "qemu" "ubuntu2604" {
|
||||
vm_name = "${var.vm_name}-${var.vm_version}"
|
||||
iso_url = var.ubuntu_iso_url
|
||||
iso_checksum = var.ubuntu_iso_checksum
|
||||
disk_size = "${var.disk_size_mb}M"
|
||||
disk_interface = "virtio"
|
||||
memory = var.memory_mb
|
||||
cpus = var.cpus
|
||||
accelerator = "kvm"
|
||||
headless = true
|
||||
http_directory = "http"
|
||||
http_port_min = 8100
|
||||
http_port_max = 8199
|
||||
boot_wait = "5s"
|
||||
boot_command = [
|
||||
"e<wait>",
|
||||
"<down><down><down><end>",
|
||||
" autoinstall ds=nocloud-net;seedfrom=http://{{.HTTPIP}}:{{.HTTPPort}}/",
|
||||
"<f10><wait60s>",
|
||||
]
|
||||
ssh_username = "zroc"
|
||||
ssh_password = "zroc-setup-temp"
|
||||
ssh_timeout = "45m"
|
||||
shutdown_command = "echo 'zroc-setup-temp' | sudo -S shutdown -P now"
|
||||
output_directory = "${var.output_dir}/qemu"
|
||||
format = "qcow2"
|
||||
}
|
||||
|
||||
build {
|
||||
name = "zroc-appliance"
|
||||
sources = ["source.vmware-iso.ubuntu2604"]
|
||||
|
||||
provisioner "shell" {
|
||||
script = "../scripts/00-base.sh"
|
||||
execute_command = "echo 'zroc-setup-temp' | sudo -S bash {{.Path}}"
|
||||
expect_disconnect = true
|
||||
}
|
||||
|
||||
provisioner "shell" {
|
||||
script = "../scripts/01-docker.sh"
|
||||
execute_command = "echo 'zroc-setup-temp' | sudo -S bash {{.Path}}"
|
||||
pause_before = "15s"
|
||||
}
|
||||
|
||||
provisioner "shell" {
|
||||
script = "../scripts/02-zroc.sh"
|
||||
execute_command = "echo 'zroc-setup-temp' | sudo -S bash {{.Path}}"
|
||||
}
|
||||
|
||||
provisioner "shell" {
|
||||
script = "../scripts/03-setup-wizard.sh"
|
||||
execute_command = "echo 'zroc-setup-temp' | sudo -S bash {{.Path}}"
|
||||
}
|
||||
|
||||
provisioner "shell" {
|
||||
script = "../scripts/04-systemd-service.sh"
|
||||
execute_command = "echo 'zroc-setup-temp' | sudo -S bash {{.Path}}"
|
||||
}
|
||||
|
||||
provisioner "shell" {
|
||||
script = "../scripts/05-cleanup.sh"
|
||||
execute_command = "echo 'zroc-setup-temp' | sudo -S bash {{.Path}}"
|
||||
}
|
||||
|
||||
post-processor "shell-local" {
|
||||
only = ["vmware-iso.ubuntu2604"]
|
||||
inline = [
|
||||
"cd ${var.output_dir}/vmware",
|
||||
"ovftool --compress=9 *.ovf ../${var.vm_name}-${var.vm_version}-ubuntu-26.04-amd64.ova",
|
||||
"cd ..",
|
||||
"sha256sum ${var.vm_name}-${var.vm_version}-ubuntu-26.04-amd64.ova > ${var.vm_name}-${var.vm_version}-ubuntu-26.04-amd64.ova.sha256",
|
||||
"echo 'OVA packaged successfully'",
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
+64
-2
@@ -1,2 +1,64 @@
|
||||
# TODO: Full content to be added
|
||||
# This file is part of the zROC project recreation
|
||||
name: Build & Publish Docker Image
|
||||
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- 'v[0-9]+.[0-9]+.[0-9]+'
|
||||
|
||||
env:
|
||||
IMAGE: recklessop/zroc-ui
|
||||
CONTEXT: ./zroc-ui
|
||||
|
||||
jobs:
|
||||
build-and-push:
|
||||
name: Build & Push
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
contents: read
|
||||
packages: write
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v3
|
||||
|
||||
- name: Log in to Docker Hub
|
||||
uses: docker/login-action@v3
|
||||
with:
|
||||
username: ${{ secrets.DOCKERHUB_USERNAME }}
|
||||
password: ${{ secrets.DOCKERHUB_TOKEN }}
|
||||
|
||||
- name: Extract version from tag
|
||||
id: meta
|
||||
run: |
|
||||
VERSION=${GITHUB_REF_NAME#v}
|
||||
echo "version=$VERSION" >> $GITHUB_OUTPUT
|
||||
echo "tag=$GITHUB_REF_NAME" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: Build and push
|
||||
uses: docker/build-push-action@v5
|
||||
with:
|
||||
context: ${{ env.CONTEXT }}
|
||||
platforms: linux/amd64,linux/arm64
|
||||
push: true
|
||||
tags: |
|
||||
${{ env.IMAGE }}:${{ steps.meta.outputs.version }}
|
||||
${{ env.IMAGE }}:stable
|
||||
${{ env.IMAGE }}:latest
|
||||
cache-from: type=gha
|
||||
cache-to: type=gha,mode=max
|
||||
build-args: |
|
||||
BUILD_VERSION=${{ steps.meta.outputs.version }}
|
||||
BUILD_DATE=${{ github.event.repository.updated_at }}
|
||||
GIT_SHA=${{ github.sha }}
|
||||
|
||||
- name: Update Docker Hub description
|
||||
uses: peter-evans/dockerhub-description@v4
|
||||
with:
|
||||
username: ${{ secrets.DOCKERHUB_USERNAME }}
|
||||
password: ${{ secrets.DOCKERHUB_TOKEN }}
|
||||
repository: ${{ env.IMAGE }}
|
||||
readme-filepath: ./zroc-ui/DOCKER_README.md
|
||||
short-description: "zROC UI — Zerto Resiliency Observation Console frontend"
|
||||
|
||||
+50
-2
@@ -1,2 +1,50 @@
|
||||
# TODO: Full content to be added
|
||||
# This file is part of the zROC project recreation
|
||||
# zROC — Zerto Resiliency Observation Console
|
||||
|
||||
> A self-hosted, purpose-built observability dashboard for Zerto — replaces Zerto Analytics with a fast, always-on UI.
|
||||
|
||||
## Overview
|
||||
|
||||
zROC is a Docker Compose stack that collects Zerto metrics via the ZVM REST API and presents them in a polished web interface.
|
||||
|
||||
| Component | Role |
|
||||
|---|---|
|
||||
| Zerto Exporter | Scrapes ZVM & vCenter APIs, exposes Prometheus metrics |
|
||||
| Prometheus | Stores metrics with 30-day retention |
|
||||
| zROC UI | React + Express — authenticated dashboard |
|
||||
| Authentik | Identity provider — login, 2FA, SSO, user management |
|
||||
| Caddy | TLS termination |
|
||||
| Grafana | Legacy dashboards |
|
||||
|
||||
## Quick Start
|
||||
|
||||
```bash
|
||||
git clone https://github.com/ZertoPublic/zroc.git
|
||||
cd zroc
|
||||
cp .env.example .env
|
||||
# Edit .env with your ZVM credentials and secrets
|
||||
docker compose up -d
|
||||
```
|
||||
|
||||
## Pages
|
||||
|
||||
| Page | Path | Description |
|
||||
|---|---|---|
|
||||
| Overview | `/` | NOC dashboard — health bar, site cards, VPG heat grid |
|
||||
| VPG Monitor | `/vpgs` | Per-VPG: RPO gauge, throughput/IOPS charts, journal health |
|
||||
| VM Protection | `/vms` | All VMs — RPO, journal usage, encryption %, drill-down |
|
||||
| VRA Infrastructure | `/vras` | CPU/memory usage, protected/recovery workload |
|
||||
| Encryption Detection | `/encryption` | Encryption % per VM, anomaly table |
|
||||
| Storage | `/storage` | Datastore capacity with Zerto usage breakdown |
|
||||
| User Management | `/settings/users` | Admin only — full CRUD + 2FA QR setup |
|
||||
|
||||
## Architecture
|
||||
|
||||
```
|
||||
Browser → Caddy (TLS) → zroc-ui (Express + React SPA)
|
||||
→ Authentik (OIDC auth)
|
||||
zroc-ui → Prometheus → Zerto Exporter → ZVM API
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
Apache 2.0
|
||||
|
||||
@@ -1,2 +1,110 @@
|
||||
# TODO: Full content to be added
|
||||
# This file is part of the zROC project recreation
|
||||
version: 1
|
||||
metadata:
|
||||
name: zROC Initial Configuration
|
||||
labels:
|
||||
blueprints.goauthentik.io/instantiate: "true"
|
||||
|
||||
entries:
|
||||
- model: authentik_core.group
|
||||
state: present
|
||||
identifiers:
|
||||
name: zroc-admins
|
||||
attrs:
|
||||
name: zroc-admins
|
||||
|
||||
- model: authentik_core.group
|
||||
state: present
|
||||
identifiers:
|
||||
name: zroc-viewers
|
||||
attrs:
|
||||
name: zroc-viewers
|
||||
|
||||
- model: authentik_providers_oauth2.scopemapping
|
||||
state: present
|
||||
identifiers:
|
||||
managed: goauthentik.io/providers/oauth2/scope-zroc-groups
|
||||
attrs:
|
||||
managed: goauthentik.io/providers/oauth2/scope-zroc-groups
|
||||
name: "zROC Groups Scope"
|
||||
scope_name: groups
|
||||
expression: |
|
||||
return [group.name for group in request.user.ak_groups.all()]
|
||||
|
||||
- model: authentik_providers_oauth2.oauth2provider
|
||||
state: present
|
||||
identifiers:
|
||||
name: zROC Dashboard Provider
|
||||
attrs:
|
||||
name: zROC Dashboard Provider
|
||||
client_type: confidential
|
||||
client_id: !Env ZROC_OIDC_CLIENT_ID
|
||||
client_secret: !Env ZROC_OIDC_CLIENT_SECRET
|
||||
authorization_flow: !Find [authentik_flows.flow, [name, default-provider-authorization-implicit-consent]]
|
||||
redirect_uris: !Env ZROC_PUBLIC_URL
|
||||
signing_key: !Find [authentik_crypto.certificatekeypair, [name, authentik Self-signed Certificate]]
|
||||
access_code_validity: minutes=1
|
||||
access_token_validity: hours=1
|
||||
refresh_token_validity: days=30
|
||||
property_mappings:
|
||||
- !Find [authentik_providers_oauth2.scopemapping, [scope_name, openid]]
|
||||
- !Find [authentik_providers_oauth2.scopemapping, [scope_name, email]]
|
||||
- !Find [authentik_providers_oauth2.scopemapping, [scope_name, profile]]
|
||||
- !Find [authentik_providers_oauth2.scopemapping, [managed, goauthentik.io/providers/oauth2/scope-zroc-groups]]
|
||||
|
||||
- model: authentik_core.application
|
||||
state: present
|
||||
identifiers:
|
||||
slug: zroc-dashboard
|
||||
attrs:
|
||||
name: zROC Dashboard
|
||||
slug: zroc-dashboard
|
||||
provider: !Find [authentik_providers_oauth2.oauth2provider, [name, zROC Dashboard Provider]]
|
||||
meta_launch_url: !Env ZROC_PUBLIC_URL
|
||||
meta_description: Zerto Resiliency Observation Console
|
||||
policy_engine_mode: any
|
||||
|
||||
- model: authentik_stages_authenticator_validate.authenticatorvalidatestage
|
||||
state: present
|
||||
identifiers:
|
||||
name: zroc-totp-validation
|
||||
attrs:
|
||||
name: zroc-totp-validation
|
||||
device_classes:
|
||||
- totp
|
||||
- static
|
||||
not_configured_action: configure
|
||||
configuration_stages:
|
||||
- !Find [authentik_stages_authenticator_totp.authenticatortotpstage, [name, default-authenticator-totp-setup]]
|
||||
|
||||
- model: authentik_flows.flowstagebinding
|
||||
state: present
|
||||
identifiers:
|
||||
target: !Find [authentik_flows.flow, [slug, default-authentication-flow]]
|
||||
stage: !Find [authentik_stages_authenticator_validate.authenticatorvalidatestage, [name, zroc-totp-validation]]
|
||||
attrs:
|
||||
target: !Find [authentik_flows.flow, [slug, default-authentication-flow]]
|
||||
stage: !Find [authentik_stages_authenticator_validate.authenticatorvalidatestage, [name, zroc-totp-validation]]
|
||||
order: 30
|
||||
evaluate_on_plan: true
|
||||
re_evaluate_policies: false
|
||||
|
||||
- model: authentik_core.user
|
||||
state: present
|
||||
identifiers:
|
||||
username: zroc-service-account
|
||||
attrs:
|
||||
username: zroc-service-account
|
||||
name: zROC Service Account
|
||||
type: service_account
|
||||
is_active: true
|
||||
|
||||
- model: authentik_core.token
|
||||
state: present
|
||||
identifiers:
|
||||
identifier: zroc-ui-admin-token
|
||||
attrs:
|
||||
identifier: zroc-ui-admin-token
|
||||
user: !Find [authentik_core.user, [username, zroc-service-account]]
|
||||
intent: api
|
||||
description: "Used by zROC UI backend for user management"
|
||||
expiring: false
|
||||
|
||||
@@ -1,2 +1,148 @@
|
||||
// TODO: Full content to be added
|
||||
// This file is part of the zROC project recreation
|
||||
// backend/authentik.js
|
||||
'use strict';
|
||||
|
||||
const axios = require('axios');
|
||||
const QRCode = require('qrcode');
|
||||
const config = require('./config');
|
||||
const logger = require('./logger');
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: `${config.authentik_url}/api/v3`,
|
||||
headers: {
|
||||
Authorization: `Bearer ${config.authentik_admin_token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
timeout: 10_000,
|
||||
});
|
||||
|
||||
api.interceptors.response.use(
|
||||
(res) => res,
|
||||
(err) => {
|
||||
const status = err.response?.status;
|
||||
const detail = err.response?.data?.detail || err.message;
|
||||
logger.error(`[Authentik API] ${err.config?.method?.toUpperCase()} ${err.config?.url} → ${status}: ${detail}`);
|
||||
return Promise.reject(err);
|
||||
}
|
||||
);
|
||||
|
||||
async function listUsers({ search = '', page = 1, pageSize = 50 } = {}) {
|
||||
const params = { page, page_size: pageSize };
|
||||
if (search) params.search = search;
|
||||
|
||||
const { data } = await api.get('/core/users/', { params });
|
||||
|
||||
const totpDevices = await listAllTotpDevices();
|
||||
const totpByUser = new Map();
|
||||
for (const d of totpDevices) {
|
||||
totpByUser.set(d.user, true);
|
||||
}
|
||||
|
||||
const users = data.results.map((u) => ({
|
||||
id: u.pk,
|
||||
username: u.username,
|
||||
name: u.name,
|
||||
email: u.email,
|
||||
isActive: u.is_active,
|
||||
isSuperuser: u.is_superuser,
|
||||
groups: u.groups_obj?.map((g) => ({ id: g.pk, name: g.name })) ?? [],
|
||||
avatar: u.avatar,
|
||||
lastLogin: u.last_login,
|
||||
dateJoined: u.date_joined,
|
||||
totpEnrolled: totpByUser.has(u.pk),
|
||||
type: u.type,
|
||||
}));
|
||||
|
||||
return { users, count: data.count, page, pageSize };
|
||||
}
|
||||
|
||||
async function getUser(userId) {
|
||||
const { data: u } = await api.get(`/core/users/${userId}/`);
|
||||
return {
|
||||
id: u.pk,
|
||||
username: u.username,
|
||||
name: u.name,
|
||||
email: u.email,
|
||||
isActive: u.is_active,
|
||||
isSuperuser: u.is_superuser,
|
||||
groups: u.groups_obj?.map((g) => ({ id: g.pk, name: g.name })) ?? [],
|
||||
avatar: u.avatar,
|
||||
lastLogin: u.last_login,
|
||||
dateJoined: u.date_joined,
|
||||
type: u.type,
|
||||
};
|
||||
}
|
||||
|
||||
async function createUser({ username, name, email, isActive = true, groups = [], password }) {
|
||||
const payload = {
|
||||
username, name, email, is_active: isActive, groups, type: 'internal',
|
||||
};
|
||||
const { data: u } = await api.post('/core/users/', payload);
|
||||
if (password) { await setPassword(u.pk, password); }
|
||||
return getUser(u.pk);
|
||||
}
|
||||
|
||||
async function updateUser(userId, { name, email, isActive, groups }) {
|
||||
const payload = {};
|
||||
if (name !== undefined) payload.name = name;
|
||||
if (email !== undefined) payload.email = email;
|
||||
if (isActive !== undefined) payload.is_active = isActive;
|
||||
if (groups !== undefined) payload.groups = groups;
|
||||
await api.patch(`/core/users/${userId}/`, payload);
|
||||
return getUser(userId);
|
||||
}
|
||||
|
||||
async function deleteUser(userId) {
|
||||
await api.delete(`/core/users/${userId}/`);
|
||||
}
|
||||
|
||||
async function setPassword(userId, password) {
|
||||
await api.post(`/core/users/${userId}/set_password/`, { password });
|
||||
}
|
||||
|
||||
async function listGroups({ search = '' } = {}) {
|
||||
const params = { page_size: 100 };
|
||||
if (search) params.search = search;
|
||||
const { data } = await api.get('/core/groups/', { params });
|
||||
return data.results.map((g) => ({
|
||||
id: g.pk, name: g.name, userCount: g.num_pk ?? 0,
|
||||
}));
|
||||
}
|
||||
|
||||
async function listAllTotpDevices() {
|
||||
const { data } = await api.get('/authenticators/totp/', { params: { page_size: 1000 } });
|
||||
return data.results;
|
||||
}
|
||||
|
||||
async function revokeTotpForUser(userId) {
|
||||
const { data } = await api.get('/authenticators/totp/', {
|
||||
params: { user: userId, page_size: 100 },
|
||||
});
|
||||
await Promise.all(data.results.map((d) => api.delete(`/authenticators/totp/${d.pk}/`)));
|
||||
return data.results.length;
|
||||
}
|
||||
|
||||
async function generateTwoFactorSetupLink(userId) {
|
||||
await revokeTotpForUser(userId);
|
||||
const { data } = await api.post(`/core/users/${userId}/recovery/`);
|
||||
const setupUrl = data.link;
|
||||
const qrDataUrl = await QRCode.toDataURL(setupUrl, {
|
||||
width: 280, margin: 2,
|
||||
color: { dark: '#0ea5e9', light: '#0a0f1e' },
|
||||
errorCorrectionLevel: 'M',
|
||||
});
|
||||
return { setupUrl, qrDataUrl };
|
||||
}
|
||||
|
||||
async function validateAdminToken() {
|
||||
try {
|
||||
await api.get('/core/users/me/');
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
listUsers, getUser, createUser, updateUser, deleteUser, setPassword,
|
||||
listGroups, revokeTotpForUser, generateTwoFactorSetupLink, validateAdminToken,
|
||||
};
|
||||
|
||||
@@ -1,2 +1,152 @@
|
||||
// TODO: Full content to be added
|
||||
// This file is part of the zROC project recreation
|
||||
// src/components/charts/TimeSeriesChart.jsx
|
||||
import { useState, useCallback } from 'react';
|
||||
import {
|
||||
ComposedChart, Area, Line,
|
||||
XAxis, YAxis, CartesianGrid, Tooltip, Legend,
|
||||
ResponsiveContainer, ReferenceLine,
|
||||
} from 'recharts';
|
||||
import { useRangeQuery } from '@/hooks/useRangeQuery';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import clsx from 'clsx';
|
||||
|
||||
const WINDOWS = ['1h', '6h', '24h', '7d', '30d'];
|
||||
|
||||
function CustomTooltip({ active, payload, label, formatter, timeFormat }) {
|
||||
if (!active || !payload?.length) return null;
|
||||
const ts = typeof label === 'number' ? new Date(label).toLocaleString(undefined, timeFormat) : label;
|
||||
return (
|
||||
<div className="bg-raised border border-border-bright rounded-lg px-3 py-2 shadow-panel text-xs">
|
||||
<p className="text-text-muted font-mono mb-2">{ts}</p>
|
||||
{payload.map((p) => (
|
||||
<div key={p.dataKey} className="flex items-center gap-2 mb-0.5">
|
||||
<span className="w-2 h-2 rounded-full flex-shrink-0" style={{ background: p.color }} />
|
||||
<span className="text-text-secondary">{p.name}:</span>
|
||||
<span className="font-mono font-semibold text-text-primary">
|
||||
{formatter ? formatter(p.value, p.dataKey) : p.value}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function WindowSelector({ value, onChange }) {
|
||||
return (
|
||||
<div className="flex items-center gap-0.5 bg-canvas rounded-md p-0.5 border border-border">
|
||||
{WINDOWS.map((w) => (
|
||||
<button key={w} onClick={() => onChange(w)}
|
||||
className={clsx('px-2.5 py-1 rounded text-xs font-mono transition-all duration-150',
|
||||
value === w ? 'bg-accent/20 text-accent border border-accent/30' : 'text-text-muted hover:text-text-primary hover:bg-raised')}>
|
||||
{w}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const SERIES_COLORS = {
|
||||
ok: '#10b981', warn: '#f59e0b', crit: '#ef4444', accent: '#0ea5e9',
|
||||
info: '#818cf8', 0: '#0ea5e9', 1: '#10b981', 2: '#f59e0b', 3: '#818cf8', 4: '#ef4444',
|
||||
};
|
||||
|
||||
export default function TimeSeriesChart({
|
||||
promql, title, yFormatter, yLabel, refLines = [],
|
||||
showWindow = true, defaultWindow = '6h', height = 200, transform, series: seriesDef,
|
||||
}) {
|
||||
const [window, setWindow] = useState(defaultWindow);
|
||||
|
||||
const seriesArr = seriesDef ? seriesDef
|
||||
: Array.isArray(promql) ? promql
|
||||
: [{ promql, name: title || 'value', color: 'accent' }];
|
||||
|
||||
const primaryPromql = typeof promql === 'string' ? promql : seriesArr[0]?.promql;
|
||||
|
||||
const { data: rawData, isLoading, error } = useRangeQuery(primaryPromql, {
|
||||
window, enabled: !!primaryPromql,
|
||||
});
|
||||
|
||||
const chartData = useCallback(() => {
|
||||
if (!rawData?.length) return [];
|
||||
if (transform) return transform(rawData, window);
|
||||
const merged = {};
|
||||
rawData.forEach((series, si) => {
|
||||
const key = series.metric.VpgName || series.metric.VmName || series.metric.VraName || seriesArr[si]?.name || `series${si}`;
|
||||
series.values.forEach(([ts, v]) => {
|
||||
const ms = ts * 1000;
|
||||
if (!merged[ms]) merged[ms] = { ts: ms };
|
||||
merged[ms][key] = parseFloat(v);
|
||||
});
|
||||
});
|
||||
return Object.values(merged).sort((a, b) => a.ts - b.ts);
|
||||
}, [rawData, transform, window, seriesArr]);
|
||||
|
||||
const data = chartData();
|
||||
const seriesKeys = data.length > 0 ? Object.keys(data[0]).filter((k) => k !== 'ts') : [];
|
||||
|
||||
const makeTimeTick = (w) => (ts) => {
|
||||
const d = new Date(ts);
|
||||
if (w === '30d' || w === '7d') return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
|
||||
return d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
|
||||
};
|
||||
|
||||
const makeTooltipTimeFormat = (w) => {
|
||||
if (w === '30d' || w === '7d') return { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };
|
||||
return { hour: '2-digit', minute: '2-digit', second: '2-digit' };
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card p-4 flex flex-col gap-3">
|
||||
<div className="flex items-center justify-between flex-wrap gap-2">
|
||||
{title && <p className="section-title">{title}</p>}
|
||||
{showWindow && <WindowSelector value={window} onChange={setWindow} />}
|
||||
</div>
|
||||
<div style={{ height }} className="relative">
|
||||
{isLoading && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<Loader2 size={18} className="animate-spin text-text-muted" />
|
||||
</div>
|
||||
)}
|
||||
{error && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<p className="text-xs text-crit font-mono">Query failed</p>
|
||||
</div>
|
||||
)}
|
||||
{!isLoading && !error && data.length === 0 && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<p className="text-xs text-text-muted font-mono">No data</p>
|
||||
</div>
|
||||
)}
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<ComposedChart data={data} margin={{ top: 4, right: 4, left: yLabel ? 16 : 0, bottom: 0 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="rgba(30,45,71,0.8)" vertical={false} />
|
||||
<XAxis dataKey="ts" type="number" domain={['dataMin', 'dataMax']}
|
||||
tickFormatter={makeTimeTick(window)}
|
||||
tick={{ fontSize: 10, fill: '#4a6080', fontFamily: 'JetBrains Mono' }}
|
||||
axisLine={{ stroke: '#1e2d47' }} tickLine={false} scale="time" />
|
||||
<YAxis tickFormatter={(v) => yFormatter ? yFormatter(v) : v}
|
||||
tick={{ fontSize: 10, fill: '#4a6080', fontFamily: 'JetBrains Mono' }}
|
||||
axisLine={false} tickLine={false} width={yLabel ? 60 : 40} />
|
||||
<Tooltip content={<CustomTooltip formatter={yFormatter} timeFormat={makeTooltipTimeFormat(window)} />}
|
||||
cursor={{ stroke: '#2a4066', strokeWidth: 1, strokeDasharray: '4 2' }} />
|
||||
{refLines.map((rl) => (
|
||||
<ReferenceLine key={rl.label} y={rl.value}
|
||||
stroke={SERIES_COLORS[rl.color] || rl.color || '#f59e0b'}
|
||||
strokeDasharray="6 3" strokeWidth={1.5} />
|
||||
))}
|
||||
{(seriesArr.length > 1 ? seriesArr : seriesKeys.map((k, i) => ({
|
||||
name: k, color: i, type: 'area',
|
||||
}))).map((s, i) => {
|
||||
const key = s.name || s.promql || seriesKeys[i] || `s${i}`;
|
||||
const color = SERIES_COLORS[s.color] || SERIES_COLORS[i] || '#0ea5e9';
|
||||
return (
|
||||
<Area key={key} type="monotone" dataKey={key} name={s.name || key}
|
||||
stroke={color} strokeWidth={2} fill={color} fillOpacity={0.08}
|
||||
dot={false} activeDot={{ r: 3 }} connectNulls />
|
||||
);
|
||||
})}
|
||||
</ComposedChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,2 +1,130 @@
|
||||
// TODO: Full content to be added
|
||||
// This file is part of the zROC project recreation
|
||||
// src/pages/Encryption.jsx
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { ShieldAlert, ShieldCheck, TrendingUp, AlertTriangle, Loader2 } from 'lucide-react';
|
||||
import { queryEncryptionDetail } from '@/api/prometheusExtended';
|
||||
import TimeSeriesChart from '@/components/charts/TimeSeriesChart';
|
||||
import clsx from 'clsx';
|
||||
|
||||
const REFRESH = 30_000;
|
||||
|
||||
function EncryptionBar({ pct }) {
|
||||
const enc = Math.min(pct ?? 0, 100);
|
||||
const color = enc > 80 ? 'bg-crit' : enc > 50 ? 'bg-warn' : 'bg-ok';
|
||||
const textC = enc > 80 ? 'text-crit' : enc > 50 ? 'text-warn' : 'text-ok';
|
||||
return (
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<div className="flex-1 h-2 bg-border rounded-full overflow-hidden flex">
|
||||
<div className={clsx('h-full transition-all duration-500', color)} style={{ width: `${enc}%` }} />
|
||||
</div>
|
||||
<span className={clsx('font-mono text-xs data-value w-12 text-right flex-shrink-0', textC)}>
|
||||
{enc.toFixed(1)}%
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TrendBadge({ level }) {
|
||||
const l = level ?? 0;
|
||||
if (l === 0) return <span className="badge badge-ok">Stable</span>;
|
||||
if (l === 1) return <span className="badge badge-warn">Rising</span>;
|
||||
return <span className="badge badge-crit">Spike</span>;
|
||||
}
|
||||
|
||||
export default function EncryptionPage() {
|
||||
const { data: vms = [], isLoading } = useQuery({
|
||||
queryKey: ['encryption-detail'],
|
||||
queryFn: queryEncryptionDetail,
|
||||
refetchInterval: REFRESH,
|
||||
});
|
||||
|
||||
const anomalies = vms.filter((v) => (v.pctEncrypted ?? 0) > 50);
|
||||
const highAlert = vms.filter((v) => (v.pctEncrypted ?? 0) > 80);
|
||||
const avgPct = vms.length ? vms.reduce((s, v) => s + (v.pctEncrypted ?? 0), 0) / vms.length : 0;
|
||||
|
||||
return (
|
||||
<div className="space-y-6 animate-fade-in">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{[
|
||||
{ label: 'VMs Monitored', value: vms.length, icon: ShieldAlert, color: 'accent' },
|
||||
{ label: 'Anomalies (>50%)', value: anomalies.length, icon: AlertTriangle, color: anomalies.length ? 'warn' : 'ok' },
|
||||
{ label: 'High Alert (>80%)', value: highAlert.length, icon: TrendingUp, color: highAlert.length ? 'crit' : 'ok' },
|
||||
{ label: 'Avg Encryption', value: `${avgPct.toFixed(1)}%`, icon: ShieldCheck, color: avgPct > 60 ? 'warn' : 'ok' },
|
||||
].map((s) => (
|
||||
<div key={s.label} className="card p-4 flex items-start gap-3">
|
||||
<div className={clsx('w-9 h-9 rounded-lg flex items-center justify-center',
|
||||
s.color === 'ok' && 'bg-ok/10', s.color === 'warn' && 'bg-warn/10',
|
||||
s.color === 'crit' && 'bg-crit/10', s.color === 'accent' && 'bg-accent/10')}>
|
||||
<s.icon size={16} className={clsx(
|
||||
s.color === 'ok' && 'text-ok', s.color === 'warn' && 'text-warn',
|
||||
s.color === 'crit' && 'text-crit', s.color === 'accent' && 'text-accent')} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="section-title">{s.label}</p>
|
||||
<p className="font-data text-xl font-semibold text-text-primary data-value mt-0.5">{s.value}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{anomalies.length > 0 && (
|
||||
<TimeSeriesChart
|
||||
title="Encryption % Over Time — Top Anomalies"
|
||||
promql={`vm_PercentEncrypted{VmName="${anomalies[0]?.name?.replace(/"/g, '\\"')}"}`}
|
||||
yFormatter={(v) => `${v.toFixed(1)}%`}
|
||||
refLines={[{ value: 80, label: 'High alert', color: 'crit' }, { value: 50, label: 'Warning', color: 'warn' }]}
|
||||
transform={(result) => result[0]?.values.map(([ts, v]) => ({ ts: ts * 1000, 'Encrypted %': parseFloat(v) })) ?? []}
|
||||
height={180}
|
||||
/>
|
||||
)}
|
||||
|
||||
<section>
|
||||
<p className="section-title mb-3">VM Encryption Status</p>
|
||||
<div className="card overflow-hidden">
|
||||
<table className="w-full text-xs">
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
<th className="px-4 py-2.5 text-left section-title">VM</th>
|
||||
<th className="px-4 py-2.5 text-left section-title">VPG</th>
|
||||
<th className="px-4 py-2.5 text-left section-title">Encryption %</th>
|
||||
<th className="px-4 py-2.5 text-left section-title hidden md:table-cell">Trend</th>
|
||||
<th className="px-4 py-2.5 text-right section-title hidden lg:table-cell">IO Ops</th>
|
||||
<th className="px-4 py-2.5 text-right section-title hidden lg:table-cell">Write</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{isLoading && (
|
||||
<tr><td colSpan={6} className="py-10 text-center">
|
||||
<Loader2 size={16} className="animate-spin text-text-muted mx-auto" />
|
||||
</td></tr>
|
||||
)}
|
||||
{!isLoading && vms.map((vm) => (
|
||||
<tr key={vm.id} className="border-b border-border/40 last:border-0 hover:bg-raised transition-colors">
|
||||
<td className="px-4 py-2.5 font-medium text-text-primary">{vm.name}</td>
|
||||
<td className="px-4 py-2.5 text-text-muted">{vm.vpgName}</td>
|
||||
<td className="px-4 py-2.5 min-w-[160px]"><EncryptionBar pct={vm.pctEncrypted} /></td>
|
||||
<td className="px-4 py-2.5 hidden md:table-cell"><TrendBadge level={vm.trendLevel} /></td>
|
||||
<td className="px-4 py-2.5 text-right hidden lg:table-cell">
|
||||
<span className="font-mono data-value text-text-secondary">
|
||||
{vm.ioOps != null ? Math.round(vm.ioOps).toLocaleString() : '—'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2.5 text-right hidden lg:table-cell">
|
||||
<span className="font-mono data-value text-text-secondary">
|
||||
{vm.writeMb != null ? `${vm.writeMb.toFixed(2)} MB` : '—'}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{!isLoading && vms.length === 0 && (
|
||||
<tr><td colSpan={6} className="py-12 text-center">
|
||||
<ShieldCheck size={24} className="text-ok mx-auto mb-2" />
|
||||
<p className="text-text-muted">No encryption stats available</p>
|
||||
</td></tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,2 +1,187 @@
|
||||
// TODO: Full content to be added
|
||||
// This file is part of the zROC project recreation
|
||||
// src/pages/Overview.jsx
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { CheckCircle2, AlertTriangle, XCircle, Activity } from 'lucide-react';
|
||||
import { queryOverviewSummary, queryAllVpgs, queryTopRpoViolators, queryExporterHealth } from '@/api/prometheus';
|
||||
import { rpoStatus, formatRpo, colorToText } from '@/constants/statusMaps';
|
||||
import clsx from 'clsx';
|
||||
|
||||
const REFRESH = 30_000;
|
||||
|
||||
function StatCard({ label, value, sub, color = 'accent', icon: Icon }) {
|
||||
return (
|
||||
<div className="card p-4 flex items-start gap-4">
|
||||
<div className={clsx('w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0',
|
||||
`bg-${color}/10`)}>
|
||||
<Icon size={18} className={`text-${color}`} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="section-title">{label}</p>
|
||||
<p className="font-data text-2xl font-semibold text-text-primary mt-0.5 data-value">{value ?? '—'}</p>
|
||||
{sub && <p className="text-xs text-text-muted mt-0.5">{sub}</p>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SiteCard({ site }) {
|
||||
const hasCrit = site.crit > 0;
|
||||
return (
|
||||
<div className={clsx('card p-4 border transition-colors duration-300',
|
||||
hasCrit ? 'border-crit/30' : site.warn > 0 ? 'border-warn/30' : 'border-border')}>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={clsx('status-dot', hasCrit ? 'status-dot-crit' : site.warn > 0 ? 'status-dot-warn' : 'status-dot-ok')} />
|
||||
<p className="font-mono text-sm font-semibold text-text-primary">{site.siteName}</p>
|
||||
</div>
|
||||
<span className={clsx('badge text-xs', hasCrit ? 'badge-crit' : site.warn > 0 ? 'badge-warn' : 'badge-ok')}>
|
||||
{hasCrit ? 'Alert' : site.warn > 0 ? 'Warning' : 'Healthy'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2 text-center">
|
||||
<div><p className="font-data text-xl font-semibold text-ok data-value">{site.ok}</p><p className="section-title">OK</p></div>
|
||||
<div><p className="font-data text-xl font-semibold text-warn data-value">{site.warn}</p><p className="section-title">Warn</p></div>
|
||||
<div><p className="font-data text-xl font-semibold text-crit data-value">{site.crit}</p><p className="section-title">Crit</p></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function VpgTile({ vpg, onClick }) {
|
||||
const status = rpoStatus(vpg.actualRpoSec, vpg.configuredRpoSec);
|
||||
return (
|
||||
<button onClick={onClick}
|
||||
title={`${vpg.name}\nRPO: ${formatRpo(vpg.actualRpoSec)}`}
|
||||
className={clsx('relative p-2 rounded-md border text-left transition-all duration-200 hover:scale-105 hover:z-10',
|
||||
status === 'ok' && 'bg-ok/8 border-ok/20',
|
||||
status === 'warn' && 'bg-warn/8 border-warn/20',
|
||||
status === 'crit' && 'bg-crit/8 border-crit/20',
|
||||
status === 'muted' && 'bg-raised border-border')}>
|
||||
<p className={clsx('text-[10px] font-mono font-semibold truncate leading-tight',
|
||||
status === 'ok' && 'text-ok', status === 'warn' && 'text-warn',
|
||||
status === 'crit' && 'text-crit', status === 'muted' && 'text-text-muted')}>
|
||||
{vpg.name}
|
||||
</p>
|
||||
<p className="text-[9px] text-text-muted font-mono data-value mt-0.5">{formatRpo(vpg.actualRpoSec)}</p>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Overview() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { data: sites = [] } = useQuery({
|
||||
queryKey: ['overview-summary'], queryFn: queryOverviewSummary, refetchInterval: REFRESH,
|
||||
});
|
||||
const { data: vpgs = [], isLoading: vpgsLoading } = useQuery({
|
||||
queryKey: ['all-vpgs'], queryFn: queryAllVpgs, refetchInterval: REFRESH,
|
||||
});
|
||||
const { data: violators = [] } = useQuery({
|
||||
queryKey: ['top-violators'], queryFn: () => queryTopRpoViolators(10), refetchInterval: REFRESH,
|
||||
});
|
||||
const { data: exporterHealth = [] } = useQuery({
|
||||
queryKey: ['exporter-health'], queryFn: queryExporterHealth, refetchInterval: REFRESH,
|
||||
});
|
||||
|
||||
const totalOk = sites.reduce((s, x) => s + x.ok, 0);
|
||||
const totalWarn = sites.reduce((s, x) => s + x.warn, 0);
|
||||
const totalCrit = sites.reduce((s, x) => s + x.crit, 0);
|
||||
const totalMbps = sites.reduce((s, x) => s + (x.throughputMb ?? 0), 0);
|
||||
|
||||
return (
|
||||
<div className="space-y-6 animate-fade-in">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<StatCard label="Meeting SLA" value={totalOk} sub="VPGs within RPO target" color="ok" icon={CheckCircle2} />
|
||||
<StatCard label="Warnings" value={totalWarn} sub="Approaching RPO limit" color="warn" icon={AlertTriangle} />
|
||||
<StatCard label="Violations" value={totalCrit} sub="Exceeding RPO target" color="crit" icon={XCircle} />
|
||||
<StatCard label="Replication" value={`${totalMbps.toFixed(1)} MB/s`} sub="Total throughput" color="accent" icon={Activity} />
|
||||
</div>
|
||||
|
||||
{sites.length > 0 && (
|
||||
<section>
|
||||
<p className="section-title mb-3">Sites</p>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
|
||||
{sites.map((s) => <SiteCard key={s.siteName} site={s} />)}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section>
|
||||
<p className="section-title mb-3">VPG RPO Heat Grid</p>
|
||||
{vpgsLoading ? (
|
||||
<div className="card p-8 text-center text-text-muted text-xs font-mono">Loading VPGs…</div>
|
||||
) : (
|
||||
<div className="card p-4">
|
||||
<div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(110px, 1fr))' }}>
|
||||
{vpgs.sort((a, b) => {
|
||||
const sev = (v) => { const s = rpoStatus(v.actualRpoSec, v.configuredRpoSec); return s === 'crit' ? 0 : s === 'warn' ? 1 : 2; };
|
||||
return sev(a) - sev(b);
|
||||
}).map((vpg) => (
|
||||
<VpgTile key={vpg.id} vpg={vpg} onClick={() => navigate(`/vpgs?name=${encodeURIComponent(vpg.name)}`)} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
|
||||
<div className="xl:col-span-2">
|
||||
<p className="section-title mb-3">Top RPO Violators</p>
|
||||
<div className="card overflow-hidden">
|
||||
<table className="w-full text-xs">
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
<th className="px-3 py-2 text-left section-title">VPG</th>
|
||||
<th className="px-3 py-2 text-left section-title">Site</th>
|
||||
<th className="px-3 py-2 text-right section-title">Actual RPO</th>
|
||||
<th className="px-3 py-2 text-right section-title">Target</th>
|
||||
<th className="px-3 py-2 text-right section-title">Ratio</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{violators.map((v) => {
|
||||
const ratio = v.configuredRpoSec ? v.actualRpoSec / v.configuredRpoSec : 0;
|
||||
const status = rpoStatus(v.actualRpoSec, v.configuredRpoSec);
|
||||
return (
|
||||
<tr key={v.id} className="table-row-hover border-b border-border/40 last:border-0"
|
||||
onClick={() => navigate(`/vpgs?name=${encodeURIComponent(v.name)}`)}>
|
||||
<td className="px-3 py-2 font-mono font-semibold text-text-primary">{v.name}</td>
|
||||
<td className="px-3 py-2 text-text-muted">{v.siteName}</td>
|
||||
<td className={clsx('px-3 py-2 text-right font-data data-value', colorToText[status])}>{formatRpo(v.actualRpoSec)}</td>
|
||||
<td className="px-3 py-2 text-right font-data data-value text-text-muted">{formatRpo(v.configuredRpoSec)}</td>
|
||||
<td className="px-3 py-2 text-right"><span className={clsx('badge', `badge-${status}`)}>{ratio.toFixed(1)}x</span></td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
{violators.length === 0 && (
|
||||
<tr><td colSpan={5} className="px-3 py-8 text-center text-text-muted">
|
||||
<CheckCircle2 size={20} className="text-ok mx-auto mb-1" />All VPGs within RPO targets
|
||||
</td></tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="section-title mb-3">Collector Health</p>
|
||||
<div className="card p-4 space-y-3">
|
||||
{exporterHealth.length === 0 && <p className="text-xs text-text-muted italic">No exporter data</p>}
|
||||
{exporterHealth.map((t) => (
|
||||
<div key={`${t.instance}-${t.thread}`} className="flex items-center justify-between py-1.5 border-b border-border/40 last:border-0">
|
||||
<div>
|
||||
<p className="text-xs font-mono font-medium text-text-primary">{t.thread}</p>
|
||||
<p className="text-[10px] text-text-muted">{t.instance}</p>
|
||||
</div>
|
||||
<span className={clsx('badge', t.alive ? 'badge-ok' : 'badge-crit')}>
|
||||
<span className={clsx('status-dot', t.alive ? 'status-dot-ok' : 'status-dot-crit')} />
|
||||
{t.alive ? 'Running' : 'Down'}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,2 +1,291 @@
|
||||
// TODO: Full content to be added
|
||||
// This file is part of the zROC project recreation
|
||||
// src/pages/Settings/UserManagement.jsx
|
||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { Users, UserPlus, Search, Shield, ShieldOff, ShieldCheck, Pencil, Trash2, QrCode, X, Check, Loader2, AlertTriangle, Copy, ExternalLink } from 'lucide-react';
|
||||
import { usersApi } from '@/api/users';
|
||||
import clsx from 'clsx';
|
||||
|
||||
function Avatar({ name, size = 'md' }) {
|
||||
const initials = name ? name.split(' ').map((w) => w[0]).slice(0, 2).join('').toUpperCase() : '?';
|
||||
const colors = ['bg-accent/20 text-accent', 'bg-ok/20 text-ok', 'bg-info/20 text-info', 'bg-warn/20 text-warn'];
|
||||
const color = colors[(name?.charCodeAt(0) ?? 0) % colors.length];
|
||||
const sz = size === 'lg' ? 'w-10 h-10 text-sm' : 'w-8 h-8 text-xs';
|
||||
return <div className={clsx('rounded-full flex items-center justify-center font-mono font-semibold flex-shrink-0', sz, color)}>{initials}</div>;
|
||||
}
|
||||
|
||||
function Toast({ message, type = 'ok', onDismiss }) {
|
||||
useEffect(() => { const t = setTimeout(onDismiss, 3500); return () => clearTimeout(t); }, [onDismiss]);
|
||||
return (
|
||||
<div className={clsx('fixed bottom-6 right-6 z-[100] flex items-center gap-3 px-4 py-3 rounded-lg border shadow-panel animate-fade-in',
|
||||
type === 'ok' && 'bg-surface border-ok/30 text-ok', type === 'error' && 'bg-surface border-crit/30 text-crit')}>
|
||||
{type === 'ok' && <Check size={14} />}{type === 'error' && <AlertTriangle size={14} />}
|
||||
<span className="text-sm font-medium">{message}</span>
|
||||
<button onClick={onDismiss} className="ml-2 text-text-muted hover:text-text-primary"><X size={12} /></button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DeleteModal({ user, onConfirm, onCancel, loading }) {
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
<div className="drawer-overlay" onClick={onCancel} />
|
||||
<div className="card-raised p-6 w-full max-w-sm z-10 animate-modal-in">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 rounded-full bg-crit/10 flex items-center justify-center"><Trash2 size={18} className="text-crit" /></div>
|
||||
<div><p className="font-medium text-text-primary">Delete user</p><p className="text-xs text-text-muted">This cannot be undone</p></div>
|
||||
</div>
|
||||
<p className="text-sm text-text-secondary mb-6">Delete <span className="text-text-primary font-medium">{user.name}</span> ({user.username})?</p>
|
||||
<div className="flex justify-end gap-3">
|
||||
<button className="btn-ghost" onClick={onCancel} disabled={loading}>Cancel</button>
|
||||
<button className="btn-danger" onClick={onConfirm} disabled={loading}>
|
||||
{loading ? <Loader2 size={14} className="animate-spin" /> : <Trash2 size={14} />} Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TwoFactorModal({ user, onClose }) {
|
||||
const [state, setState] = useState('idle');
|
||||
const [result, setResult] = useState(null);
|
||||
const generate = useCallback(async () => {
|
||||
setState('loading');
|
||||
try { const data = await usersApi.setup2fa(user.id); setResult(data); setState('done'); }
|
||||
catch { setState('error'); }
|
||||
}, [user.id]);
|
||||
useEffect(() => { generate(); }, [generate]);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
<div className="drawer-overlay" onClick={onClose} />
|
||||
<div className="card-raised p-6 w-full max-w-md z-10 animate-modal-in">
|
||||
<div className="flex items-start justify-between mb-5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center"><QrCode size={18} className="text-accent" /></div>
|
||||
<div><p className="font-medium text-text-primary">Set up 2FA</p><p className="text-xs text-text-muted">{user.name}</p></div>
|
||||
</div>
|
||||
<button onClick={onClose} className="text-text-muted hover:text-text-primary"><X size={16} /></button>
|
||||
</div>
|
||||
{state === 'loading' && <div className="flex flex-col items-center py-10 gap-3"><Loader2 size={28} className="animate-spin text-accent" /><p className="text-sm text-text-muted">Generating setup link…</p></div>}
|
||||
{state === 'error' && <div className="flex flex-col items-center py-8 gap-3 text-crit"><AlertTriangle size={28} /><p className="text-sm">Failed to generate setup link.</p><button className="btn-ghost mt-2" onClick={generate}>Retry</button></div>}
|
||||
{state === 'done' && result && (
|
||||
<>
|
||||
<div className="bg-canvas rounded-lg p-1 flex justify-center mb-4 border border-border">
|
||||
<img src={result.qrDataUrl} alt="2FA setup QR code" className="w-56 h-56 rounded" />
|
||||
</div>
|
||||
<p className="text-sm text-text-secondary mb-5">Share this QR code with {user.name} to enroll their authenticator app.</p>
|
||||
<button className="btn-ghost w-full" onClick={onClose}>Done</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function UserDrawer({ mode, user, groups, onSave, onClose }) {
|
||||
const isEdit = mode === 'edit';
|
||||
const [form, setForm] = useState(isEdit ? {
|
||||
username: user.username, name: user.name, email: user.email,
|
||||
isActive: user.isActive, groups: user.groups.map((g) => g.id), password: '',
|
||||
} : { username: '', name: '', email: '', isActive: true, groups: [], password: '' });
|
||||
const [errors, setErrors] = useState({});
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const set = (field) => (e) => setForm((f) => ({ ...f, [field]: e.target.type === 'checkbox' ? e.target.checked : e.target.value }));
|
||||
const toggleGroup = (id) => setForm((f) => ({ ...f, groups: f.groups.includes(id) ? f.groups.filter((g) => g !== id) : [...f.groups, id] }));
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const e = {};
|
||||
if (!form.username.trim()) e.username = 'Required';
|
||||
if (!form.name.trim()) e.name = 'Required';
|
||||
if (!form.email.trim()) e.email = 'Required';
|
||||
if (!isEdit && !form.password) e.password = 'Required';
|
||||
if (form.password && form.password.length < 8) e.password = 'Min 8 chars';
|
||||
setErrors(e);
|
||||
if (Object.keys(e).length > 0) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
const payload = { username: form.username, name: form.name, email: form.email, isActive: form.isActive, groups: form.groups };
|
||||
if (form.password) payload.password = form.password;
|
||||
await onSave(payload);
|
||||
} finally { setSaving(false); }
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="drawer-overlay" onClick={onClose} />
|
||||
<div className="drawer-panel">
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-border flex-shrink-0">
|
||||
<p className="font-medium text-text-primary">{isEdit ? 'Edit user' : 'Add user'}</p>
|
||||
<button onClick={onClose} className="text-text-muted hover:text-text-primary"><X size={18} /></button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto px-6 py-5 space-y-5">
|
||||
<section>
|
||||
<p className="section-title mb-4">Identity</p>
|
||||
<div className="space-y-4">
|
||||
<div><label className="field-label">Username</label><input className={clsx('field', errors.username && 'border-crit')} value={form.username} onChange={set('username')} disabled={isEdit} /></div>
|
||||
<div><label className="field-label">Full name</label><input className={clsx('field', errors.name && 'border-crit')} value={form.name} onChange={set('name')} /></div>
|
||||
<div><label className="field-label">Email</label><input className={clsx('field', errors.email && 'border-crit')} type="email" value={form.email} onChange={set('email')} /></div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<p className="section-title mb-3">Groups</p>
|
||||
<div className="space-y-2">
|
||||
{groups.map((g) => (
|
||||
<label key={g.id} className="flex items-center gap-3 cursor-pointer py-2 px-3 rounded-md hover:bg-canvas transition-colors">
|
||||
<input type="checkbox" className="sr-only" checked={form.groups.includes(g.id)} onChange={() => toggleGroup(g.id)} />
|
||||
<div className={clsx('w-4 h-4 rounded border flex items-center justify-center',
|
||||
form.groups.includes(g.id) ? 'bg-accent border-accent' : 'border-border')}>
|
||||
{form.groups.includes(g.id) && <Check size={10} className="text-white" />}
|
||||
</div>
|
||||
<span className="text-sm text-text-primary">{g.name}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<p className="section-title mb-3">{isEdit ? 'Reset Password' : 'Password'}</p>
|
||||
<input className={clsx('field', errors.password && 'border-crit')} type="password" value={form.password} onChange={set('password')}
|
||||
placeholder={isEdit ? 'Leave blank to keep' : 'Min. 8 characters'} />
|
||||
{errors.password && <p className="text-xs text-crit mt-1">{errors.password}</p>}
|
||||
</section>
|
||||
</div>
|
||||
<div className="flex justify-end gap-3 px-6 py-4 border-t border-border flex-shrink-0">
|
||||
<button className="btn-ghost" onClick={onClose} disabled={saving}>Cancel</button>
|
||||
<button className="btn-primary" onClick={handleSubmit} disabled={saving}>
|
||||
{saving ? <Loader2 size={14} className="animate-spin" /> : isEdit ? <Check size={14} /> : <UserPlus size={14} />}
|
||||
{isEdit ? 'Save' : 'Create'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function UserManagement() {
|
||||
const [users, setUsers] = useState([]);
|
||||
const [groups, setGroups] = useState([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchInput, setSearchInput] = useState('');
|
||||
const [drawer, setDrawer] = useState(null);
|
||||
const [deleteTarget, setDeleteTarget] = useState(null);
|
||||
const [twoFaTarget, setTwoFaTarget] = useState(null);
|
||||
const [toast, setToast] = useState(null);
|
||||
const searchTimer = useRef(null);
|
||||
|
||||
const showToast = (message, type = 'ok') => setToast({ message, type });
|
||||
|
||||
const loadUsers = useCallback(async (q = '') => {
|
||||
setLoading(true);
|
||||
try { const result = await usersApi.list({ search: q }); setUsers(result.users); setTotal(result.count); }
|
||||
catch (err) { showToast(`Failed to load users: ${err.message}`, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
|
||||
const loadGroups = useCallback(async () => {
|
||||
try { const g = await usersApi.listGroups(); setGroups(g); } catch {}
|
||||
}, []);
|
||||
|
||||
useEffect(() => { loadUsers(); loadGroups(); }, []);
|
||||
|
||||
const handleSearchChange = (e) => {
|
||||
const val = e.target.value;
|
||||
setSearchInput(val);
|
||||
clearTimeout(searchTimer.current);
|
||||
searchTimer.current = setTimeout(() => loadUsers(val), 350);
|
||||
};
|
||||
|
||||
const handleSave = async (payload) => {
|
||||
try {
|
||||
if (drawer.mode === 'create') {
|
||||
const newUser = await usersApi.create(payload);
|
||||
setUsers((u) => [newUser, ...u]); setTotal((t) => t + 1);
|
||||
showToast(`User ${newUser.username} created`);
|
||||
} else {
|
||||
const updated = await usersApi.update(drawer.user.id, payload);
|
||||
setUsers((u) => u.map((x) => (x.id === updated.id ? updated : x)));
|
||||
showToast(`User ${updated.username} updated`);
|
||||
}
|
||||
setDrawer(null);
|
||||
} catch (err) { showToast(err.message, 'error'); throw err; }
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
try {
|
||||
await usersApi.delete(deleteTarget.id);
|
||||
setUsers((u) => u.filter((x) => x.id !== deleteTarget.id)); setTotal((t) => t - 1);
|
||||
showToast(`User ${deleteTarget.username} deleted`); setDeleteTarget(null);
|
||||
} catch (err) { showToast(err.message, 'error'); }
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full animate-fade-in">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 className="font-mono text-lg font-semibold text-text-primary flex items-center gap-2">
|
||||
<Users size={20} className="text-accent" /> User Management
|
||||
</h1>
|
||||
<p className="text-xs text-text-muted mt-1">{total} users</p>
|
||||
</div>
|
||||
<button className="btn-primary" onClick={() => setDrawer({ mode: 'create' })}><UserPlus size={15} /> Add User</button>
|
||||
</div>
|
||||
|
||||
<div className="relative mb-4">
|
||||
<Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted pointer-events-none" />
|
||||
<input className="field pl-9" placeholder="Search…" value={searchInput} onChange={handleSearchChange} />
|
||||
</div>
|
||||
|
||||
<div className="card flex-1 overflow-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead><tr className="border-b border-border">
|
||||
<th className="px-4 py-3 text-left section-title">User</th>
|
||||
<th className="px-4 py-3 text-left section-title hidden md:table-cell">Groups</th>
|
||||
<th className="px-4 py-3 text-left section-title">Status</th>
|
||||
<th className="px-4 py-3 text-left section-title hidden lg:table-cell">2FA</th>
|
||||
<th className="px-4 py-3 text-right section-title">Actions</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
{loading && <tr><td colSpan={5} className="px-4 py-16 text-center"><Loader2 size={20} className="animate-spin text-text-muted mx-auto" /></td></tr>}
|
||||
{!loading && users.length === 0 && <tr><td colSpan={5} className="px-4 py-16 text-center text-text-muted">No users found</td></tr>}
|
||||
{!loading && users.map((u) => (
|
||||
<tr key={u.id} className="table-row-hover border-b border-border/50 last:border-0">
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar name={u.name} />
|
||||
<div><p className="font-medium text-text-primary">{u.name}</p><p className="text-xs text-text-muted font-mono">{u.username}</p></div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 hidden md:table-cell">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{u.groups.length === 0 ? <span className="text-xs text-text-muted">—</span> : u.groups.map((g) => (
|
||||
<span key={g.id} className={clsx('badge', g.name.includes('admin') ? 'badge-info' : 'badge-muted')}>{g.name}</span>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
{u.isActive ? <span className="badge badge-ok">Active</span> : <span className="badge badge-muted">Inactive</span>}
|
||||
</td>
|
||||
<td className="px-4 py-3 hidden lg:table-cell">
|
||||
{u.totpEnrolled ? <span className="badge badge-ok"><ShieldCheck size={10} />2FA On</span> : <span className="badge badge-warn"><ShieldOff size={10} />No 2FA</span>}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<button title="Edit" onClick={() => setDrawer({ mode: 'edit', user: u })} className="p-1.5 rounded text-text-muted hover:text-accent hover:bg-accent/10 transition-colors"><Pencil size={13} /></button>
|
||||
<button title="2FA" onClick={() => setTwoFaTarget(u)} className="p-1.5 rounded text-text-muted hover:text-accent hover:bg-accent/10 transition-colors"><Shield size={13} /></button>
|
||||
<button title="Delete" onClick={() => setDeleteTarget(u)} className="p-1.5 rounded text-text-muted hover:text-crit hover:bg-crit/10 transition-colors"><Trash2 size={13} /></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{drawer && <UserDrawer mode={drawer.mode} user={drawer.user} groups={groups} onSave={handleSave} onClose={() => setDrawer(null)} />}
|
||||
{deleteTarget && <DeleteModal user={deleteTarget} onConfirm={handleDelete} onCancel={() => setDeleteTarget(null)} />}
|
||||
{twoFaTarget && <TwoFactorModal user={twoFaTarget} onClose={() => { setTwoFaTarget(null); loadUsers(); }} />}
|
||||
{toast && <Toast message={toast.message} type={toast.type} onDismiss={() => setToast(null)} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,2 +1,151 @@
|
||||
// TODO: Full content to be added
|
||||
// This file is part of the zROC project recreation
|
||||
// src/pages/Storage.jsx
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Database, HardDrive, Loader2 } from 'lucide-react';
|
||||
import { queryDatastores } from '@/api/prometheusExtended';
|
||||
import { formatBytes } from '@/constants/statusMaps';
|
||||
import clsx from 'clsx';
|
||||
|
||||
const REFRESH = 60_000;
|
||||
|
||||
function CapacityBar({ label, usedBytes, totalBytes, color = 'bg-accent' }) {
|
||||
const pct = totalBytes > 0 ? Math.min(usedBytes / totalBytes, 1) : 0;
|
||||
const pctN = Math.round(pct * 100);
|
||||
const barColor = pct >= 0.9 ? 'bg-crit' : pct >= 0.75 ? 'bg-warn' : color;
|
||||
const textC = pct >= 0.9 ? 'text-crit' : pct >= 0.75 ? 'text-warn' : 'text-text-secondary';
|
||||
return (
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between text-[10px]">
|
||||
<span className="text-text-muted">{label}</span>
|
||||
<span className={clsx('font-mono data-value', textC)}>
|
||||
{formatBytes(usedBytes)} / {formatBytes(totalBytes)} ({pctN}%)
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 bg-border rounded-full overflow-hidden">
|
||||
<div className={clsx('h-full rounded-full transition-all duration-500', barColor)} style={{ width: `${pct * 100}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ZertoUsageRow({ label, bytes, color }) {
|
||||
return bytes > 0 ? (
|
||||
<div className="flex items-center justify-between text-[10px]">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className={clsx('w-2 h-2 rounded-sm flex-shrink-0', color)} />
|
||||
<span className="text-text-muted">{label}</span>
|
||||
</div>
|
||||
<span className="font-mono data-value text-text-secondary">{formatBytes(bytes)}</span>
|
||||
</div>
|
||||
) : null;
|
||||
}
|
||||
|
||||
function DatastoreCard({ ds }) {
|
||||
const usePct = ds.capacityBytes > 0 ? ds.usedBytes / ds.capacityBytes : 0;
|
||||
const alerting = usePct >= 0.9;
|
||||
const warning = usePct >= 0.75;
|
||||
const zertoUsed = (ds.journalBytes ?? 0) + (ds.scratchBytes ?? 0) + (ds.recoveryBytes ?? 0) + (ds.applianceBytes ?? 0);
|
||||
|
||||
return (
|
||||
<div className={clsx('card p-4 space-y-4 transition-colors duration-300',
|
||||
alerting ? 'border-crit/30' : warning ? 'border-warn/20' : '')}>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={clsx('w-8 h-8 rounded-md flex items-center justify-center',
|
||||
alerting ? 'bg-crit/10' : warning ? 'bg-warn/10' : 'bg-accent/10')}>
|
||||
<Database size={14} className={alerting ? 'text-crit' : warning ? 'text-warn' : 'text-accent'} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-mono font-semibold text-text-primary truncate max-w-[180px]">{ds.name}</p>
|
||||
<p className="text-[10px] text-text-muted">{ds.siteName}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right text-[10px] text-text-muted font-mono">
|
||||
<p>{ds.vraCount ?? 0} VRA{(ds.vraCount ?? 0) !== 1 ? 's' : ''}</p>
|
||||
<p>{ds.incomingVms ?? 0} in / {ds.outgoingVms ?? 0} out</p>
|
||||
</div>
|
||||
</div>
|
||||
<CapacityBar label="Capacity" usedBytes={ds.usedBytes} totalBytes={ds.capacityBytes} />
|
||||
{zertoUsed > 0 && (
|
||||
<div className="space-y-1.5 pt-2 border-t border-border">
|
||||
<p className="section-title mb-2">Zerto Usage ({formatBytes(zertoUsed)})</p>
|
||||
<ZertoUsageRow label="Journal" bytes={ds.journalBytes} color="bg-accent" />
|
||||
<ZertoUsageRow label="Scratch" bytes={ds.scratchBytes} color="bg-info" />
|
||||
<ZertoUsageRow label="Recovery" bytes={ds.recoveryBytes} color="bg-ok" />
|
||||
<ZertoUsageRow label="Appliances" bytes={ds.applianceBytes} color="bg-text-muted" />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between text-[10px] text-text-muted pt-1 border-t border-border">
|
||||
<span>Free</span>
|
||||
<span className="font-mono data-value text-text-secondary">{formatBytes(ds.freeBytes)}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Storage() {
|
||||
const { data: datastores = [], isLoading } = useQuery({
|
||||
queryKey: ['datastores'], queryFn: queryDatastores, refetchInterval: REFRESH,
|
||||
});
|
||||
|
||||
const totalCapacity = datastores.reduce((s, d) => s + (d.capacityBytes ?? 0), 0);
|
||||
const totalUsed = datastores.reduce((s, d) => s + (d.usedBytes ?? 0), 0);
|
||||
const totalJournal = datastores.reduce((s, d) => s + (d.journalBytes ?? 0), 0);
|
||||
|
||||
const bySite = {};
|
||||
for (const d of datastores) {
|
||||
const s = d.siteName || 'Unknown';
|
||||
if (!bySite[s]) bySite[s] = [];
|
||||
bySite[s].push(d);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6 animate-fade-in">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{[
|
||||
{ label: 'Datastores', value: datastores.length, icon: Database },
|
||||
{ label: 'Total Capacity', value: formatBytes(totalCapacity), icon: HardDrive },
|
||||
{ label: 'Used', value: formatBytes(totalUsed), icon: HardDrive },
|
||||
{ label: 'Journal Usage', value: formatBytes(totalJournal), icon: Database },
|
||||
].map((s) => (
|
||||
<div key={s.label} className="card p-4 flex items-start gap-3">
|
||||
<div className="w-9 h-9 rounded-lg bg-accent/10 flex items-center justify-center">
|
||||
<s.icon size={16} className="text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="section-title">{s.label}</p>
|
||||
<p className="font-mono text-lg font-semibold text-text-primary mt-0.5 data-value">{s.value}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{totalCapacity > 0 && (
|
||||
<div className="card p-4">
|
||||
<CapacityBar label="Aggregate Capacity (all datastores)" usedBytes={totalUsed} totalBytes={totalCapacity} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading && (
|
||||
<div className="flex justify-center py-16">
|
||||
<Loader2 size={24} className="animate-spin text-text-muted" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{Object.entries(bySite).map(([site, siteDs]) => (
|
||||
<section key={site}>
|
||||
<p className="section-title mb-3">{site} · {siteDs.length} datastore{siteDs.length !== 1 ? 's' : ''}</p>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
|
||||
{siteDs.map((ds) => <DatastoreCard key={ds.id || ds.name} ds={ds} />)}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
|
||||
{!isLoading && datastores.length === 0 && (
|
||||
<div className="card p-12 text-center">
|
||||
<Database size={28} className="text-text-muted mx-auto mb-3 opacity-40" />
|
||||
<p className="text-text-muted text-sm">No datastore data available</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,2 +1,169 @@
|
||||
// TODO: Full content to be added
|
||||
// This file is part of the zROC project recreation
|
||||
// src/pages/VMDetail.jsx
|
||||
import { useState } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Search, Server, X, Activity, Loader2 } from 'lucide-react';
|
||||
import { queryAllVms } from '@/api/prometheusExtended';
|
||||
import TimeSeriesChart from '@/components/charts/TimeSeriesChart';
|
||||
import RPOGauge from '@/components/charts/RPOGauge';
|
||||
import { VM_STATUS, formatRpo, formatMB } from '@/constants/statusMaps';
|
||||
import clsx from 'clsx';
|
||||
|
||||
const REFRESH = 30_000;
|
||||
|
||||
function JournalGauge({ usedMb, hardLimitMb }) {
|
||||
if (!hardLimitMb || hardLimitMb <= 0) return <span className="text-xs text-text-muted">—</span>;
|
||||
const pct = Math.min(usedMb / hardLimitMb, 1);
|
||||
const color = pct > 0.85 ? 'bg-crit' : pct > 0.65 ? 'bg-warn' : 'bg-ok';
|
||||
return (
|
||||
<div className="flex items-center gap-2 min-w-[100px]">
|
||||
<div className="flex-1 h-1.5 bg-border rounded-full overflow-hidden">
|
||||
<div className={clsx('h-full rounded-full', color)} style={{ width: `${pct * 100}%` }} />
|
||||
</div>
|
||||
<span className="text-[10px] font-mono data-value text-text-muted whitespace-nowrap">{formatMB(usedMb)}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function VmDrawer({ vm, onClose }) {
|
||||
const esc = vm.name.replace(/"/g, '\\"');
|
||||
return (
|
||||
<>
|
||||
<div className="drawer-overlay" onClick={onClose} />
|
||||
<div className="drawer-panel">
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-border flex-shrink-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center">
|
||||
<Server size={18} className="text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-mono text-sm font-semibold text-text-primary">{vm.name}</p>
|
||||
<p className="text-xs text-text-muted">{vm.vpgName} · {vm.siteName}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={onClose} className="p-1.5 rounded text-text-muted hover:text-text-primary hover:bg-raised transition-colors"><X size={16} /></button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto px-6 py-5 space-y-5">
|
||||
<div className="card p-4 flex items-start gap-6">
|
||||
<RPOGauge actualSec={vm.actualRpoSec} size={120} label="Current RPO" />
|
||||
<div className="flex-1 space-y-2 pt-2">
|
||||
{[
|
||||
{ label: 'Throughput', value: `${(vm.throughputMb ?? 0).toFixed(2)} MB/s` },
|
||||
{ label: 'IOPS', value: Math.round(vm.iops ?? 0).toLocaleString() },
|
||||
{ label: 'Bandwidth', value: `${(vm.bandwidthMbps ?? 0).toFixed(2)} Mbps` },
|
||||
{ label: 'Journal', value: formatMB(vm.journalUsedMb) },
|
||||
{ label: 'Encryption', value: vm.pctEncrypted != null ? `${vm.pctEncrypted.toFixed(1)}%` : '—' },
|
||||
].map(({ label, value }) => (
|
||||
<div key={label} className="flex justify-between text-xs">
|
||||
<span className="text-text-muted">{label}</span>
|
||||
<span className="font-mono data-value text-text-primary">{value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<TimeSeriesChart title="RPO History" promql={`vm_actualrpo{VmName="${esc}"}`}
|
||||
yFormatter={formatRpo}
|
||||
transform={(result) => result[0]?.values.map(([ts, v]) => ({ ts: ts * 1000, 'RPO': parseFloat(v) })) ?? []}
|
||||
height={170} />
|
||||
<TimeSeriesChart title="Throughput" promql={`vm_throughput_in_mb{VmName="${esc}"}`}
|
||||
yFormatter={(v) => `${v.toFixed(1)} MB/s`}
|
||||
transform={(result) => result[0]?.values.map(([ts, v]) => ({ ts: ts * 1000, 'MB/s': parseFloat(v) })) ?? []}
|
||||
height={150} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function VmStatusBadge({ code }) {
|
||||
const s = VM_STATUS[code] ?? { label: 'Unknown', color: 'muted' };
|
||||
return <span className={clsx('badge', `badge-${s.color === 'muted' ? 'muted' : s.color}`)}>{s.label}</span>;
|
||||
}
|
||||
|
||||
export default function VMDetail() {
|
||||
const [search, setSearch] = useState('');
|
||||
const [sort, setSort] = useState('rpo-desc');
|
||||
const [selected, setSelected] = useState(null);
|
||||
|
||||
const { data: vms = [], isLoading } = useQuery({
|
||||
queryKey: ['all-vms'], queryFn: queryAllVms, refetchInterval: REFRESH,
|
||||
});
|
||||
|
||||
const filtered = vms.filter((v) => {
|
||||
const q = search.toLowerCase();
|
||||
return !q || v.name?.toLowerCase().includes(q) || v.vpgName?.toLowerCase().includes(q);
|
||||
});
|
||||
|
||||
const sorted = [...filtered].sort((a, b) => {
|
||||
switch (sort) {
|
||||
case 'rpo-desc': return (b.actualRpoSec ?? 0) - (a.actualRpoSec ?? 0);
|
||||
case 'rpo-asc': return (a.actualRpoSec ?? 0) - (b.actualRpoSec ?? 0);
|
||||
case 'name-asc': return (a.name ?? '').localeCompare(b.name ?? '');
|
||||
default: return 0;
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full space-y-4 animate-fade-in">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{[
|
||||
{ label: 'Total VMs', value: vms.length, color: 'accent' },
|
||||
{ label: 'RPO OK', value: vms.filter((v) => (v.actualRpoSec ?? 0) <= 300).length, color: 'ok' },
|
||||
{ label: 'RPO Warning', value: vms.filter((v) => (v.actualRpoSec ?? 0) > 300 && (v.actualRpoSec ?? 0) <= 600).length, color: 'warn' },
|
||||
{ label: 'RPO Critical', value: vms.filter((v) => (v.actualRpoSec ?? 0) > 600).length, color: 'crit' },
|
||||
].map(({ label, value, color }) => (
|
||||
<div key={label} className="card p-4 flex items-start gap-3">
|
||||
<div className={clsx('w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0', `bg-${color}/10`)}>
|
||||
<Activity size={16} className={`text-${color}`} />
|
||||
</div>
|
||||
<div><p className="section-title">{label}</p><p className="font-data text-2xl font-semibold text-text-primary data-value">{value}</p></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<div className="relative flex-1 min-w-[200px]">
|
||||
<Search size={13} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-text-muted pointer-events-none" />
|
||||
<input className="field pl-8 text-sm" placeholder="Search VMs or VPGs…" value={search} onChange={(e) => setSearch(e.target.value)} />
|
||||
</div>
|
||||
<select className="field w-auto text-sm" value={sort} onChange={(e) => setSort(e.target.value)}>
|
||||
<option value="rpo-desc">RPO (worst first)</option>
|
||||
<option value="rpo-asc">RPO (best first)</option>
|
||||
<option value="name-asc">Name A-Z</option>
|
||||
</select>
|
||||
<span className="text-xs text-text-muted">{sorted.length} / {vms.length} VMs</span>
|
||||
</div>
|
||||
|
||||
<div className="card flex-1 overflow-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead><tr className="border-b border-border">
|
||||
<th className="px-4 py-3 text-left section-title">VM Name</th>
|
||||
<th className="px-4 py-3 text-left section-title hidden md:table-cell">VPG</th>
|
||||
<th className="px-4 py-3 text-right section-title">RPO</th>
|
||||
<th className="px-4 py-3 text-left section-title hidden md:table-cell">Journal</th>
|
||||
<th className="px-4 py-3 text-right section-title hidden lg:table-cell">Throughput</th>
|
||||
<th className="px-4 py-3 text-left section-title hidden xl:table-cell">Status</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
{isLoading && <tr><td colSpan={6} className="py-16 text-center"><Loader2 size={20} className="animate-spin text-text-muted mx-auto" /></td></tr>}
|
||||
{!isLoading && sorted.length === 0 && <tr><td colSpan={6} className="py-16 text-center text-text-muted">No VMs</td></tr>}
|
||||
{!isLoading && sorted.map((vm) => {
|
||||
const rpoColor = vm.actualRpoSec > 600 ? 'text-crit' : vm.actualRpoSec > 300 ? 'text-warn' : 'text-ok';
|
||||
return (
|
||||
<tr key={vm.id} onClick={() => setSelected(vm)} className="table-row-hover border-b border-border/40 last:border-0">
|
||||
<td className="px-4 py-3"><span className="font-medium text-text-primary truncate">{vm.name}</span></td>
|
||||
<td className="px-4 py-3 hidden md:table-cell"><span className="text-text-muted text-xs">{vm.vpgName}</span></td>
|
||||
<td className="px-4 py-3 text-right"><span className={clsx('font-mono font-semibold text-xs data-value', rpoColor)}>{formatRpo(vm.actualRpoSec)}</span></td>
|
||||
<td className="px-4 py-3 hidden md:table-cell"><JournalGauge usedMb={vm.journalUsedMb} hardLimitMb={vm.journalHardLimit} /></td>
|
||||
<td className="px-4 py-3 text-right hidden lg:table-cell"><span className="font-mono text-xs data-value text-text-secondary">{(vm.throughputMb ?? 0).toFixed(2)} MB/s</span></td>
|
||||
<td className="px-4 py-3 hidden xl:table-cell"><VmStatusBadge code={vm.status} /></td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{selected && <VmDrawer vm={selected} onClose={() => setSelected(null)} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,2 +1,154 @@
|
||||
// TODO: Full content to be added
|
||||
// This file is part of the zROC project recreation
|
||||
// src/pages/VPGMonitor.jsx
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Search, ChevronRight, Loader2 } from 'lucide-react';
|
||||
import { queryAllVpgs } from '@/api/prometheus';
|
||||
import { queryVpgDetail, queryVpgVms } from '@/api/prometheusExtended';
|
||||
import TimeSeriesChart from '@/components/charts/TimeSeriesChart';
|
||||
import RPOGauge from '@/components/charts/RPOGauge';
|
||||
import { VPG_ALERT, vpgHealth, rpoStatus, formatRpo, formatMB, colorToText } from '@/constants/statusMaps';
|
||||
import clsx from 'clsx';
|
||||
|
||||
const REFRESH = 30_000;
|
||||
|
||||
function VpgListItem({ vpg, selected, onClick }) {
|
||||
const status = rpoStatus(vpg.actualRpoSec, vpg.configuredRpoSec);
|
||||
return (
|
||||
<button onClick={onClick} className={clsx('w-full text-left px-3 py-2.5 rounded-md transition-all duration-150 group',
|
||||
selected ? 'bg-accent/15 border border-accent/25' : 'hover:bg-raised border border-transparent')}>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={clsx('status-dot flex-shrink-0',
|
||||
status === 'ok' ? 'status-dot-ok' : status === 'warn' ? 'status-dot-warn' : status === 'crit' ? 'status-dot-crit' : 'status-dot-idle')} />
|
||||
<span className={clsx('text-sm font-medium truncate flex-1', selected ? 'text-accent' : 'text-text-primary')}>{vpg.name}</span>
|
||||
{selected && <ChevronRight size={12} className="text-accent flex-shrink-0" />}
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mt-0.5 pl-4">
|
||||
<span className="text-[10px] text-text-muted">{vpg.siteName}</span>
|
||||
<span className={clsx('text-[10px] font-mono data-value', colorToText[status])}>{formatRpo(vpg.actualRpoSec)}</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function VpgDetail({ vpgName }) {
|
||||
const { data: detail, isLoading } = useQuery({
|
||||
queryKey: ['vpg-detail', vpgName], queryFn: () => queryVpgDetail(vpgName), refetchInterval: REFRESH, enabled: !!vpgName,
|
||||
});
|
||||
const { data: vms = [], isLoading: vmsLoading } = useQuery({
|
||||
queryKey: ['vpg-vms', vpgName], queryFn: () => queryVpgVms(vpgName), refetchInterval: REFRESH, enabled: !!vpgName,
|
||||
});
|
||||
|
||||
if (isLoading) return <div className="flex-1 flex items-center justify-center"><Loader2 size={24} className="animate-spin text-text-muted" /></div>;
|
||||
if (!detail) return null;
|
||||
|
||||
const alertInfo = VPG_ALERT[detail.alertStatus] ?? VPG_ALERT[0];
|
||||
const esc = vpgName.replace(/"/g, '\\"');
|
||||
|
||||
return (
|
||||
<div className="flex-1 min-w-0 overflow-y-auto p-4 space-y-4 animate-fade-in">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className={clsx('status-dot', alertInfo.color === 'ok' ? 'status-dot-ok' : alertInfo.color === 'warn' ? 'status-dot-warn' : 'status-dot-crit')} />
|
||||
<h2 className="font-mono text-base font-semibold text-text-primary">{vpgName}</h2>
|
||||
<span className={clsx('badge', `badge-${alertInfo.color}`)}>{alertInfo.label}</span>
|
||||
<span className="text-xs text-text-muted">{detail.siteName} · {detail.vmCount} VMs</span>
|
||||
</div>
|
||||
|
||||
<div className="card overflow-hidden flex flex-wrap">
|
||||
<div className="flex items-center justify-center p-4 border-r border-border">
|
||||
<RPOGauge actualSec={detail.actualRpoSec} configuredSec={detail.configuredRpoSec} size={150} />
|
||||
</div>
|
||||
<div className="flex flex-wrap flex-1">
|
||||
{[
|
||||
{ label: 'Throughput', value: `${(detail.throughputMb ?? 0).toFixed(2)} MB/s` },
|
||||
{ label: 'IOPS', value: Math.round(detail.iops ?? 0) },
|
||||
{ label: 'Storage', value: formatMB(detail.storageUsedMb) },
|
||||
].map((s) => (
|
||||
<div key={s.label} className="text-center px-4 py-3 border-r border-border last:border-0">
|
||||
<p className="text-lg font-semibold font-data data-value text-text-primary">{s.value}</p>
|
||||
<p className="section-title mt-0.5">{s.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TimeSeriesChart title="RPO Over Time" promql={`vpg_actual_rpo{VpgName="${esc}"}`}
|
||||
yFormatter={(v) => formatRpo(v)}
|
||||
refLines={detail.configuredRpoSec ? [{ value: detail.configuredRpoSec, label: 'Target', color: 'warn' }] : []}
|
||||
transform={(result) => result[0]?.values.map(([ts, v]) => ({ ts: ts * 1000, 'RPO (s)': parseFloat(v) })) ?? []}
|
||||
height={180} />
|
||||
|
||||
<div className="card overflow-hidden">
|
||||
<div className="px-4 py-3 border-b border-border"><p className="section-title">Protected VMs</p></div>
|
||||
<table className="w-full text-xs">
|
||||
<thead><tr className="border-b border-border/60">
|
||||
<th className="px-4 py-2 text-left section-title">VM Name</th>
|
||||
<th className="px-4 py-2 text-right section-title">RPO</th>
|
||||
<th className="px-4 py-2 text-right section-title hidden sm:table-cell">Throughput</th>
|
||||
<th className="px-4 py-2 text-right section-title hidden md:table-cell">IOPS</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
{vmsLoading && <tr><td colSpan={4} className="py-8 text-center"><Loader2 size={16} className="animate-spin text-text-muted mx-auto" /></td></tr>}
|
||||
{!vmsLoading && vms.map((vm) => (
|
||||
<tr key={vm.id} className="border-b border-border/40 last:border-0 hover:bg-raised transition-colors">
|
||||
<td className="px-4 py-2 font-medium text-text-primary">{vm.name}</td>
|
||||
<td className="px-4 py-2 text-right font-mono data-value">{formatRpo(vm.actualRpoSec)}</td>
|
||||
<td className="px-4 py-2 text-right text-text-secondary font-mono data-value hidden sm:table-cell">{vm.throughputMb?.toFixed(2)} MB/s</td>
|
||||
<td className="px-4 py-2 text-right text-text-secondary font-mono data-value hidden md:table-cell">{Math.round(vm.iops ?? 0)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function VPGMonitor() {
|
||||
const [params] = useSearchParams();
|
||||
const [search, setSearch] = useState('');
|
||||
const initialName = params.get('name');
|
||||
|
||||
const { data: vpgs = [], isLoading } = useQuery({
|
||||
queryKey: ['all-vpgs'], queryFn: queryAllVpgs, refetchInterval: REFRESH,
|
||||
});
|
||||
|
||||
const [selected, setSelected] = useState(initialName || null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selected && vpgs.length > 0) setSelected(vpgs[0].name);
|
||||
}, [vpgs, selected]);
|
||||
|
||||
const filtered = vpgs.filter((v) => !search || v.name.toLowerCase().includes(search.toLowerCase()));
|
||||
|
||||
const bySite = {};
|
||||
for (const v of filtered) { const s = v.siteName || 'Unknown'; if (!bySite[s]) bySite[s] = []; bySite[s].push(v); }
|
||||
|
||||
return (
|
||||
<div className="flex h-full -m-6 overflow-hidden">
|
||||
<aside className="w-64 flex-shrink-0 border-r border-border flex flex-col bg-surface overflow-hidden">
|
||||
<div className="p-3 border-b border-border flex-shrink-0">
|
||||
<div className="relative">
|
||||
<Search size={12} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-text-muted pointer-events-none" />
|
||||
<input className="field pl-8 text-xs py-1.5" placeholder="Filter VPGs…" value={search} onChange={(e) => setSearch(e.target.value)} />
|
||||
</div>
|
||||
<p className="text-[10px] text-text-muted mt-2 font-mono">{filtered.length} VPGs</p>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-2">
|
||||
{isLoading && <div className="flex justify-center py-8"><Loader2 size={16} className="animate-spin text-text-muted" /></div>}
|
||||
{Object.entries(bySite).map(([site, siteVpgs]) => (
|
||||
<div key={site} className="mb-3">
|
||||
<p className="section-title px-2 mb-1">{site}</p>
|
||||
{siteVpgs.map((v) => <VpgListItem key={v.id} vpg={v} selected={selected === v.name} onClick={() => setSelected(v.name)} />)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</aside>
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
{selected ? <VpgDetail vpgName={selected} /> : (
|
||||
<div className="flex-1 flex items-center justify-center text-text-muted text-sm">Select a VPG to view details</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,2 +1,147 @@
|
||||
// TODO: Full content to be added
|
||||
// This file is part of the zROC project recreation
|
||||
// src/pages/VRADashboard.jsx
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Cpu, Server, HardDrive, Layers, Loader2 } from 'lucide-react';
|
||||
import { queryAllVras } from '@/api/prometheusExtended';
|
||||
import clsx from 'clsx';
|
||||
|
||||
const REFRESH = 30_000;
|
||||
const VRA_MAX_VMS = 100;
|
||||
const VRA_MAX_VOL = 2048;
|
||||
|
||||
function UsageBar({ label, used, total, max, unit = '', warnAt = 0.75, critAt = 0.9 }) {
|
||||
const pct = total > 0 ? Math.min(used / total, 1) : max > 0 ? Math.min(used / max, 1) : 0;
|
||||
const color = pct >= critAt ? 'bg-crit' : pct >= warnAt ? 'bg-warn' : 'bg-ok';
|
||||
const textC = pct >= critAt ? 'text-crit' : pct >= warnAt ? 'text-warn' : 'text-ok';
|
||||
return (
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between items-center text-[10px]">
|
||||
<span className="text-text-muted">{label}</span>
|
||||
<span className={clsx('font-mono data-value', textC)}>
|
||||
{typeof used === 'number' ? `${Math.round(used)}${unit}` : '—'}
|
||||
{total > 0 ? ` / ${Math.round(total)}${unit}` : max ? ` / ${max}${unit}` : ''}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-1 bg-border rounded-full overflow-hidden">
|
||||
<div className={clsx('h-full rounded-full transition-all duration-500', color)} style={{ width: `${pct * 100}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function WorkloadBadge({ label, value, icon: Icon, color = 'text-text-secondary' }) {
|
||||
return (
|
||||
<div className="flex flex-col items-center p-2 bg-canvas rounded-md border border-border min-w-0">
|
||||
<Icon size={12} className={clsx('mb-1', color)} />
|
||||
<span className={clsx('font-data text-base font-semibold data-value', color)}>{value ?? '—'}</span>
|
||||
<span className="section-title mt-0.5 text-center leading-tight">{label}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function VraCard({ vra }) {
|
||||
const protPct = vra.protectedVms / VRA_MAX_VMS;
|
||||
const recPct = vra.recoveryVms / VRA_MAX_VMS;
|
||||
const alerting = protPct >= 0.9 || recPct >= 0.9;
|
||||
const warning = protPct >= 0.75 || recPct >= 0.75;
|
||||
|
||||
return (
|
||||
<div className={clsx('card p-4 flex flex-col gap-4 transition-colors duration-300',
|
||||
alerting ? 'border-crit/30' : warning ? 'border-warn/30' : '')}>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={clsx('w-8 h-8 rounded-md flex items-center justify-center',
|
||||
alerting ? 'bg-crit/10' : warning ? 'bg-warn/10' : 'bg-accent/10')}>
|
||||
<Server size={14} className={alerting ? 'text-crit' : warning ? 'text-warn' : 'text-accent'} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-mono font-semibold text-text-primary truncate max-w-[140px]">{vra.name}</p>
|
||||
<p className="text-[10px] text-text-muted">{vra.siteName}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-[10px] text-text-muted font-mono">{vra.vcpuCount} vCPU</p>
|
||||
<p className="text-[10px] text-text-muted font-mono">{vra.memoryGb?.toFixed(0)} GB RAM</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(vra.cpuUsageMhz !== undefined || vra.memUsageMb !== undefined) && (
|
||||
<div className="space-y-2">
|
||||
{vra.cpuUsageMhz !== undefined && (
|
||||
<UsageBar label="CPU" used={vra.cpuUsageMhz} unit=" MHz" max={vra.vcpuCount * 2600} warnAt={0.7} critAt={0.9} />
|
||||
)}
|
||||
{vra.memUsageMb !== undefined && (
|
||||
<UsageBar label="Memory" used={vra.memUsageMb} total={(vra.memoryGb ?? 0) * 1024} unit=" MB" warnAt={0.8} critAt={0.92} />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<p className="section-title mb-2">Workload</p>
|
||||
<div className="grid grid-cols-3 gap-1.5 mb-2">
|
||||
<WorkloadBadge label="Prot VMs" value={vra.protectedVms} icon={Server}
|
||||
color={protPct >= 0.9 ? 'text-crit' : protPct >= 0.75 ? 'text-warn' : 'text-ok'} />
|
||||
<WorkloadBadge label="Rec VMs" value={vra.recoveryVms} icon={Server}
|
||||
color={recPct >= 0.9 ? 'text-crit' : recPct >= 0.75 ? 'text-warn' : 'text-accent'} />
|
||||
<WorkloadBadge label="Self VPGs" value={vra.selfProtectedVpgs} icon={Layers} color="text-text-secondary" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-1.5">
|
||||
<WorkloadBadge label="Prot Vols" value={vra.protectedVolumes} icon={HardDrive}
|
||||
color={vra.protectedVolumes / VRA_MAX_VOL >= 0.85 ? 'text-crit' : vra.protectedVolumes / VRA_MAX_VOL >= 0.7 ? 'text-warn' : 'text-text-secondary'} />
|
||||
<WorkloadBadge label="Rec Vols" value={vra.recoveryVolumes} icon={HardDrive}
|
||||
color={vra.recoveryVolumes / VRA_MAX_VOL >= 0.85 ? 'text-crit' : vra.recoveryVolumes / VRA_MAX_VOL >= 0.7 ? 'text-warn' : 'text-text-secondary'} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-[10px] text-text-muted font-mono pt-3 border-t border-border">
|
||||
<span>VRA {vra.version ?? '—'}</span>
|
||||
<span>ESXi {vra.hostVersion ?? '—'}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function VRADashboard() {
|
||||
const { data: vras = [], isLoading } = useQuery({
|
||||
queryKey: ['all-vras'], queryFn: queryAllVras, refetchInterval: REFRESH,
|
||||
});
|
||||
|
||||
const bySite = {};
|
||||
for (const v of vras) {
|
||||
const s = v.siteName || 'Unknown';
|
||||
if (!bySite[s]) bySite[s] = [];
|
||||
bySite[s].push(v);
|
||||
}
|
||||
|
||||
const totalProt = vras.reduce((s, v) => s + (v.protectedVms ?? 0), 0);
|
||||
const totalRec = vras.reduce((s, v) => s + (v.recoveryVms ?? 0), 0);
|
||||
|
||||
return (
|
||||
<div className="space-y-6 animate-fade-in">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{[
|
||||
{ label: 'Total VRAs', value: vras.length },
|
||||
{ label: 'Protected VMs', value: totalProt },
|
||||
{ label: 'Recovery VMs', value: totalRec },
|
||||
].map((s) => (
|
||||
<div key={s.label} className="card p-4 text-center">
|
||||
<p className="font-data text-2xl font-semibold text-text-primary data-value">{s.value}</p>
|
||||
<p className="section-title mt-1">{s.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{isLoading && (
|
||||
<div className="flex justify-center py-16"><Loader2 size={24} className="animate-spin text-text-muted" /></div>
|
||||
)}
|
||||
|
||||
{Object.entries(bySite).map(([site, siteVras]) => (
|
||||
<section key={site}>
|
||||
<p className="section-title mb-3">{site} · {siteVras.length} VRA{siteVras.length !== 1 ? 's' : ''}</p>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
{siteVras.map((vra) => <VraCard key={vra.id || vra.name} vra={vra} />)}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user