ServerCard

Code

import { ServerCard, type ServerInfo } from "@fadymondy/nasaq/web";declare const server: ServerInfo;declare const api: { power(a: string): Promise<void> };export function ServerPage() {  return (    <ServerCard      server={server}      onPower={(action) => api.power(action)}      onTakeSnapshot={async (name) => {}}      onRollback={async (id) => {}}      onDeleteSnapshot={async (id) => {}}      onSaveLimits={async (limits) => {}}    />  );}

Server Tools · beta

Live examples and controls: ServerCard in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/server-card.json

A card for one server. It shows the status and address (with a copy button), the hardware as badges, live CPU, memory and disk as meters with a CPU sparkline, and the last deploy. Power buttons depend on the state: a running server offers restart, stop and force stop; a stopped one offers start; a server in a transition only offers force stop. Stop and force stop always ask first. Snapshots can be taken, rolled back to and deleted (from the row menu or right-click), and the CPU, memory and disk limits open in a dialog. It has no backend: your callbacks run the work and you pass the new server back.

When to useCopy Anchor Link

• A server or VPS page in a hosting or admin app.
• A grid of servers, one card each.

When not to useCopy Anchor Link

• A fleet table with many columns: use DataTable and show Status per row.
• Historical charts: use TimeSeriesPanel.

ImportCopy Anchor Link

import { ServerCard } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { ServerCard, type ServerInfo } from "@fadymondy/nasaq/web";

declare const server: ServerInfo;
declare const api: { power(a: string): Promise<void> };

export function ServerPage() {
  return (
    <ServerCard
      server={server}
      onPower={(action) => api.power(action)}
      onTakeSnapshot={async (name) => {}}
      onRollback={async (id) => {}}
      onDeleteSnapshot={async (id) => {}}
      onSaveLimits={async (limits) => {}}
    />
  );
}

AnatomyCopy Anchor Link

ServerCard                    data-slot="server-card"
├─ header                    name, Status, copyable address, region, OS
├─ hardware                  Badges: vCPU, memory, disk
├─ live usage                Meter x3 + Sparkline (CPU history), or a note when the server is off
├─ last deploy               ref, status Badge, time, who
├─ power                     Restart, Stop, Force stop, Start (by state), Resource limits
├─ snapshots                 list: name, size, date, ⋯ menu (also right-click): Roll back, Delete
├─ AlertDialog               confirm for stop, force stop, roll back, delete
└─ Dialog                    take a snapshot, edit limits

APICopy Anchor Link

ServerCard: every Card prop except children, plus:

Helpers (pure, tested): powerActionsFor(status), isTransitional(status), validateLimits(raw), LIMIT_RANGES, formatMemory, formatDisk.

ExamplesCopy Anchor Link

A stopped server

import { ServerCard, type ServerInfo } from "@fadymondy/nasaq/web";

declare const server: ServerInfo;

export const Stopped = () => <ServerCard server={{ ...server, status: "stopped", metrics: undefined }} onPower={async () => {}} />;

AccessibilityCopy Anchor Link

• Every button has text. Stop, force stop, roll back and delete open an AlertDialog with focus trapped and returned; Cancel is focused first.
• Status is an icon and a word. Meters have a name and a value. The sparkline has a text alternative.
• The status region is live, so a change from Stopping to Stopped is announced. Errors from callbacks appear in an Alert.

RTL & i18nCopy Anchor Link

• English and Arabic strings follow the Nasaq locale. The address, sizes ("18.4 GB") and commit refs stay left to right inside their own isolate.

Styling & tokensCopy Anchor Link

• Built on Card, Meter, Sparkline, Badge, Status, AlertDialog, Dialog and --nq-* tokens. Target [data-slot="server-card"].

Do / Don'tCopy Anchor Link

• Do keep status in step with the real server: set a transitional status while your job runs.
• Do confirm destructive power actions (built in).
• Don't offer start on a running server: the buttons come from powerActionsFor.
• Don't show made-up metrics for a stopped server: leave metrics out.

RelatedCopy Anchor Link

• network-rules
• backup-manager
• deploy-view

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-server-tools-server-card--docs