Admin Panel UI¶

React компоненты для админ-панели.

Установка¶

npm install @viai-kit/admin-panel-ui
# или
yarn add @viai-kit/admin-panel-ui
# или
pnpm add @viai-kit/admin-panel-ui

Быстрый старт¶

import { AdminPanel } from '@viai-kit/admin-panel-ui';

function App() {
  return (
    <AdminPanel
      apiConfig={{ baseUrl: 'https://api.example.com/api' }}
      title="Server Admin"
      theme="dark"
    />
  );
}

Компоненты¶

AdminPanel¶

Полная админ-панель с боковым меню, авторизацией и вкладками.

import { AdminPanel } from '@viai-kit/admin-panel-ui';

<AdminPanel
  apiConfig={{
    baseUrl: 'https://api.example.com/api',
    headers: { 'X-Custom': 'header' },
    onError: (err) => console.error(err),
  }}
  title="My Admin"
  logo={<MyLogo />}
  tabs={['dashboard', 'containers', 'files']}
  defaultTab="dashboard"
  theme="dark"
  requireAuth={true}
  onTabChange={(tab) => console.log('Tab changed:', tab)}
/>

Props¶

Prop	Тип	По умолчанию	Описание
`apiConfig`	`AdminApiConfig`	required	Настройки API
`title`	`string`	`"Admin Panel"`	Заголовок
`logo`	`ReactNode`	-	Логотип
`tabs`	`TabType[]`	`['dashboard', 'containers', 'files']`	Вкладки
`defaultTab`	`TabType`	`'dashboard'`	Начальная вкладка
`theme`	`'light' \\| 'dark'`	`'light'`	Тема
`customTheme`	`Theme`	-	MUI тема
`requireAuth`	`boolean`	`true`	Требовать авторизацию
`onTabChange`	`(tab: TabType) => void`	-	Callback при смене вкладки

SystemMetrics¶

Отображение метрик системы.

import { SystemMetrics } from '@viai-kit/admin-panel-ui';

<SystemMetrics refreshInterval={5000} />

ContainerList¶

Список Docker контейнеров с управлением.

import { ContainerList } from '@viai-kit/admin-panel-ui';

<ContainerList />

FileManager¶

Файловый менеджер.

import { FileManager } from '@viai-kit/admin-panel-ui';

<FileManager initialPath="/" />

LoginPage¶

Страница входа.

import { LoginPage } from '@viai-kit/admin-panel-ui';

<LoginPage
  onLogin={(token) => setToken(token)}
  apiBaseUrl="https://api.example.com/api"
  title="Admin Login"
/>

Хуки¶

useSystemMetrics¶

import { useSystemMetrics } from '@viai-kit/admin-panel-ui';

function Dashboard() {
  const { data, loading, error, refresh } = useSystemMetrics();

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <p>CPU: {data.cpu.percent}%</p>
      <p>RAM: {data.memory.percent}%</p>
    </div>
  );
}

useContainers¶

import { useContainers } from '@viai-kit/admin-panel-ui';

function Containers() {
  const { containers, loading, start, stop, restart } = useContainers();

  return (
    <ul>
      {containers.map(c => (
        <li key={c.id}>
          {c.name} - {c.state}
          <button onClick={() => stop(c.name)}>Stop</button>
        </li>
      ))}
    </ul>
  );
}

useFiles¶

import { useFiles } from '@viai-kit/admin-panel-ui';

function Files() {
  const { files, currentPath, navigate, upload, download } = useFiles('/');

  return (
    <ul>
      {files.map(f => (
        <li key={f.path} onClick={() => f.is_dir && navigate(f.path)}>
          {f.is_dir ? '📁' : '📄'} {f.name}
        </li>
      ))}
    </ul>
  );
}

Типы¶

interface AdminApiConfig {
  baseUrl: string;
  headers?: Record<string, string>;
  onError?: (error: Error) => void;
  onUnauthorized?: () => void;
}

type TabType = 'dashboard' | 'containers' | 'files';

interface SystemMetrics {
  hostname: string;
  uptime_seconds: number;
  cpu: CpuMetrics;
  memory: MemoryMetrics;
  disk: DiskMetrics;
  network: NetworkMetrics;
}

interface Container {
  id: string;
  name: string;
  image: string;
  status: string;
  state: 'running' | 'exited' | 'paused' | 'restarting' | 'dead';
  created: string;
  ports: Record<string, PortBinding[] | null>;
  networks: string[];
}

interface FileItem {
  name: string;
  path: string;
  is_dir: boolean;
  size: number;
  modified: string;
  permissions: string;
  mime_type: string | null;
}

Зависимости¶

React 18+
MUI 5+
TypeScript 5+