plugin-cluster-manager 1.0.12

package/src/client/PackageInstaller.tsx

@@ -0,0 +1,373 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { Card, Form, Input, Button, Alert, Progress, Tag, Typography, Space, Divider, message, Select } from 'antd';
+import { CloudServerOutlined, SafetyOutlined, ReloadOutlined } from '@ant-design/icons';
+import { useAPIClient } from '@nocobase/client';
+import { useT } from './utils';
+import {
+  DEFAULT_WORKER_PACKAGES,
+  formatPackageText,
+  parsePackageText,
+  packagesFromConfig,
+  type WorkerPackageMap,
+} from '../shared/packages';
+
+const { Text } = Typography;
+
+const STATUS_MAP: Record<string, { color: string; text: string }> = {
+  pending: { color: 'default', text: 'Not initialized' },
+  running: { color: 'processing', text: 'Running...' },
+  succeeded: { color: 'success', text: 'Succeeded' },
+  failed: { color: 'error', text: 'Failed' },
+};
+
+function buildInstallPackages(values: any): WorkerPackageMap {
+  return packagesFromConfig(values || {});
+}
+
+function renderPackageTags(packages: string[], color?: string) {
+  if (!packages.length) {
+    return <Text type="secondary">-</Text>;
+  }
+  return packages.map((pkg) => (
+    <Tag key={pkg} color={color} style={{ marginBottom: 2 }}>
+      {pkg}
+    </Tag>
+  ));
+}
+
+export const PackageInstaller: React.FC = () => {
+  const t = useT();
+  const api = useAPIClient();
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [initRunning, setInitRunning] = useState(false);
+  const [config, setConfig] = useState<any>(null);
+  const [progress, setProgress] = useState<{ percent: number; log: string } | null>(null);
+  const [targetRole, setTargetRole] = useState<'app' | 'worker' | 'all'>('all');
+
+  const aptPackagesValue = Form.useWatch('aptPackages', form);
+  const pythonPackagesValue = Form.useWatch('pythonPackages', form);
+  const npmPackagesValue = Form.useWatch('npmPackages', form);
+
+  const isFetching = useRef(false);
+
+  const loadConfig = useCallback(async (silent = false) => {
+    if (isFetching.current) return;
+    isFetching.current = true;
+    if (!silent) setLoading(true);
+    try {
+      const { data } = await api.request({ url: 'workerPackages:getPackageConfig' });
+      const cfg = data?.data?.data || data?.data;
+      if (cfg) {
+        try {
+          cfg.packageWhitelist =
+            typeof cfg.packageWhitelist === 'string' ? JSON.parse(cfg.packageWhitelist) : cfg.packageWhitelist;
+        } catch {
+          cfg.packageWhitelist = { python: [], node: [], apt: [] };
+        }
+      }
+      setConfig(cfg);
+      if (cfg) {
+        form.setFieldsValue({
+          npmRegistryUrl: cfg.npmRegistryUrl,
+          npmAuthToken: cfg.npmAuthToken,
+          pypiIndexUrl: cfg.pypiIndexUrl,
+          pypiTrustedHost: cfg.pypiTrustedHost,
+          aptMirrorUrl: cfg.aptMirrorUrl,
+          aptGpgKeyUrl: cfg.aptGpgKeyUrl,
+          aptPackages: parsePackageText(cfg.aptPackages, DEFAULT_WORKER_PACKAGES.apt),
+          pythonPackages: parsePackageText(cfg.pythonPackages, DEFAULT_WORKER_PACKAGES.python),
+          npmPackages: parsePackageText(cfg.npmPackages, DEFAULT_WORKER_PACKAGES.npm),
+          retentionHours: cfg.retentionHours ?? 24,
+        });
+        if (cfg.initStatus === 'running') {
+          setInitRunning(true);
+          setProgress({ percent: cfg.initProgressPercent || 0, log: cfg.initProgressLog || t('Processing...') });
+        } else {
+          setInitRunning(false);
+          setProgress(null);
+        }
+      }
+    } catch {
+      // Config may not exist yet.
+    } finally {
+      if (!silent) setLoading(false);
+      isFetching.current = false;
+    }
+  }, [api, form, t]);
+
+  useEffect(() => {
+    loadConfig();
+  }, [loadConfig]);
+
+  useEffect(() => {
+    const interval = setInterval(() => loadConfig(true), 10000);
+    return () => clearInterval(interval);
+  }, [loadConfig]);
+
+  const saveConfigValues = async (values: any) => {
+    const payload = {
+      ...values,
+      aptPackages: formatPackageText(values.aptPackages),
+      pythonPackages: formatPackageText(values.pythonPackages),
+      npmPackages: formatPackageText(values.npmPackages),
+    };
+
+    if (config?.id) {
+      await api.request({
+        url: 'workerPackages:savePackageConfig',
+        method: 'post',
+        params: { filterByTk: config.id },
+        data: payload,
+      });
+    } else {
+      await api.request({
+        url: 'workerPackages:savePackageConfig',
+        method: 'post',
+        data: payload,
+      });
+    }
+  };
+
+  const handleSaveConfig = async () => {
+    setSaving(true);
+    try {
+      const values = form.getFieldsValue();
+      await saveConfigValues(values);
+      message.success(t('Config saved'));
+      await loadConfig();
+    } catch {
+      message.error(t('Failed to save config'));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleInitEnv = async () => {
+    setInitRunning(true);
+    setProgress({ percent: 0, log: t('Dispatching to target nodes...') });
+    try {
+      const values = form.getFieldsValue();
+      await saveConfigValues(values);
+      await api.request({
+        url: 'workerPackages:installPackages',
+        method: 'post',
+        data: {
+          targetRole,
+          packages: buildInstallPackages(values),
+          registryConfig: {
+            aptMirrorUrl: values.aptMirrorUrl,
+            npmRegistryUrl: values.npmRegistryUrl,
+            pypiIndexUrl: values.pypiIndexUrl,
+            pypiTrustedHost: values.pypiTrustedHost,
+          },
+        },
+      });
+      message.info(t('Install task dispatched'));
+      await loadConfig();
+    } catch (err: any) {
+      message.error(err?.message || t('Failed to install packages/modules'));
+      setInitRunning(false);
+      setProgress(null);
+    }
+  };
+
+  const statusInfo = STATUS_MAP[config?.initStatus] || STATUS_MAP.pending;
+  const whitelist = config?.packageWhitelist || {};
+  const hasWhitelist = whitelist?.python?.length > 0 || whitelist?.node?.length > 0 || whitelist?.apt?.length > 0;
+  const installPlan = packagesFromConfig({
+    aptPackages: aptPackagesValue ?? DEFAULT_WORKER_PACKAGES.apt,
+    pythonPackages: pythonPackagesValue ?? DEFAULT_WORKER_PACKAGES.python,
+    npmPackages: npmPackagesValue ?? DEFAULT_WORKER_PACKAGES.npm,
+  });
+
+  return (
+    <div style={{ padding: 16, maxWidth: 920 }}>
+      <Card
+        title={
+          <Space>
+            <CloudServerOutlined />
+            <span>{t('Cluster Package Installer')}</span>
+          </Space>
+        }
+        size="small"
+        style={{ marginBottom: 16 }}
+        extra={
+          <Button icon={<ReloadOutlined />} size="small" onClick={loadConfig} loading={loading}>
+            {t('Refresh')}
+          </Button>
+        }
+      >
+        <Space direction="vertical" style={{ width: '100%' }}>
+          <div>
+            <Text strong>{t('Status')}: </Text>
+            <Tag color={statusInfo.color}>{t(statusInfo.text)}</Tag>
+            {config?.lastInitAt && (
+              <Text type="secondary" style={{ fontSize: 12 }}>
+                ({new Date(config.lastInitAt).toLocaleString()})
+              </Text>
+            )}
+          </div>
+
+          <div>
+            <Text strong style={{ marginRight: 8 }}>{t('Target')}: </Text>
+            <Select
+              value={targetRole}
+              onChange={setTargetRole}
+              style={{ width: 240 }}
+              options={[
+                { label: t('All app and worker nodes'), value: 'all' },
+                { label: t('App nodes only'), value: 'app' },
+                { label: t('Worker nodes only'), value: 'worker' },
+              ]}
+            />
+          </div>
+
+          <Alert
+            type="info"
+            showIcon
+            message={t('Each target node checks whether a package/module is already installed before installing it.')}
+          />
+
+          <Space>
+            <Button
+              type="primary"
+              icon={initRunning ? <ReloadOutlined spin /> : <CloudServerOutlined />}
+              onClick={() => handleInitEnv()}
+              size="large"
+            >
+              {initRunning ? t('Installing... (Click to Force Run)') : t('Install packages/modules')}
+            </Button>
+            
+            {initRunning && (
+              <Button
+                danger
+                onClick={async () => {
+                  try {
+                    await api.request({ url: 'workerPackages:resetInitStatus', method: 'post' });
+                    message.success(t('Install status reset to stopped'));
+                    await loadConfig();
+                  } catch {
+                    message.error(t('Failed to stop installation'));
+                  }
+                }}
+                size="large"
+              >
+                {t('Stop / Reset Status')}
+              </Button>
+            )}
+          </Space>
+
+          {initRunning && progress && (
+            <div>
+              <Progress percent={progress.percent} status="active" />
+              <Text type="secondary">{progress.log}</Text>
+            </div>
+          )}
+
+          {config?.lastInitLog && config.initStatus !== 'running' && (
+            <div>
+              <Text strong>{t('Last Install Log')}:</Text>
+              <pre style={{
+                background: '#f5f5f5',
+                padding: 8,
+                borderRadius: 4,
+                fontSize: 11,
+                maxHeight: 220,
+                overflow: 'auto',
+                whiteSpace: 'pre-wrap',
+                marginTop: 4,
+              }}>
+                {config.lastInitLog}
+              </pre>
+            </div>
+          )}
+        </Space>
+      </Card>
+
+      <Card title={t('Package/module settings')} size="small" style={{ marginBottom: 16 }}>
+        <Form form={form} layout="vertical">
+          <Form.Item name="aptPackages" label={t('OS packages (APT)')}>
+            <Select mode="tags" style={{ width: '100%' }} placeholder="python3, python3-pip" tokenSeparators={[',', '\n', ' ']} />
+          </Form.Item>
+          <Form.Item name="pythonPackages" label={t('Python modules (pip)')}>
+            <Select mode="tags" style={{ width: '100%' }} placeholder="python-docx, openpyxl" tokenSeparators={[',', '\n', ' ']} />
+          </Form.Item>
+          <Form.Item name="npmPackages" label={t('Node modules (npm global)')}>
+            <Select mode="tags" style={{ width: '100%' }} placeholder="xlsx, docx" tokenSeparators={[',', '\n', ' ']} />
+          </Form.Item>
+
+          <Divider style={{ margin: '8px 0 16px' }} />
+          <Form.Item name="aptMirrorUrl" label={t('APT mirror URL')}>
+            <Input placeholder="https://deb.debian.org/debian" />
+          </Form.Item>
+          <Form.Item name="npmRegistryUrl" label={t('NPM registry URL')}>
+            <Input placeholder="https://registry.npmjs.org/" />
+          </Form.Item>
+          <Form.Item name="pypiIndexUrl" label={t('PyPI index URL')}>
+            <Input placeholder="https://pypi.org/simple" />
+          </Form.Item>
+
+          <Button type="primary" onClick={handleSaveConfig} loading={saving}>
+            {t('Save settings')}
+          </Button>
+        </Form>
+
+        <Divider style={{ margin: '16px 0' }} />
+        <Text strong>{t('Install plan')}:</Text>
+        <div style={{ marginTop: 8 }}>
+          <Text type="secondary">APT: </Text>
+          {renderPackageTags(installPlan.apt || [])}
+        </div>
+        <div style={{ marginTop: 4 }}>
+          <Text type="secondary">Python: </Text>
+          {renderPackageTags(installPlan.python || [], 'blue')}
+        </div>
+        <div style={{ marginTop: 4 }}>
+          <Text type="secondary">Node: </Text>
+          {renderPackageTags(installPlan.npm || [], 'green')}
+        </div>
+      </Card>
+
+      <Card
+        title={
+          <Space>
+            <SafetyOutlined />
+            <span>{t('Installed package/module whitelist')}</span>
+          </Space>
+        }
+        size="small"
+      >
+        {hasWhitelist ? (
+          <Space direction="vertical" style={{ width: '100%' }}>
+            {whitelist?.apt?.length > 0 && (
+              <div>
+                <Text strong>APT: </Text>
+                {renderPackageTags(whitelist.apt)}
+              </div>
+            )}
+            {whitelist?.python?.length > 0 && (
+              <div>
+                <Text strong>Python: </Text>
+                {renderPackageTags(whitelist.python, 'blue')}
+              </div>
+            )}
+            {whitelist?.node?.length > 0 && (
+              <div>
+                <Text strong>Node: </Text>
+                {renderPackageTags(whitelist.node, 'green')}
+              </div>
+            )}
+          </Space>
+        ) : (
+          <Alert
+            type="warning"
+            showIcon
+            message={t('No successful install has generated a whitelist yet.')}
+          />
+        )}
+      </Card>
+    </div>
+  );
+};

package/src/client/RedisMonitor.tsx

@@ -0,0 +1,333 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { Card, Row, Col, Statistic, Table, Tag, Button, Space, Select, message, Typography } from 'antd';
+import {
+  ReloadOutlined,
+  DatabaseOutlined,
+  CloudServerOutlined,
+  ThunderboltOutlined,
+  FieldTimeOutlined,
+} from '@ant-design/icons';
+import { useAPIClient } from '@nocobase/client';
+import { formatBytes, formatUptime } from './utils';
+
+const { Text } = Typography;
+
+interface RedisInfo {
+  server: { version: string; uptime_seconds: number; uptime_days: number };
+  memory: {
+    used: string;
+    used_bytes: number;
+    peak: string;
+    peak_bytes: number;
+    fragmentation_ratio: number;
+    max_memory: string;
+    max_memory_policy: string;
+  };
+  clients: { connected: number; blocked: number; max_clients: number };
+  stats: {
+    ops_per_sec: number;
+    total_commands: number;
+    total_connections: number;
+    keyspace_hits: number;
+    keyspace_misses: number;
+    hit_rate: number;
+    expired_keys: number;
+    evicted_keys: number;
+  };
+  keyspace: Record<string, Record<string, string>>;
+}
+
+
+
+export function RedisMonitor() {
+  const api = useAPIClient();
+  const [info, setInfo] = useState<RedisInfo | null>(null);
+  const [channels, setChannels] = useState<Record<string, number>>({});
+  const [totalChannels, setTotalChannels] = useState(0);
+  const [clients, setClients] = useState<any[]>([]);
+  const [slowlog, setSlowlog] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [autoRefresh, setAutoRefresh] = useState<number | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchAll = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [infoRes, pubsubRes, clientsRes, slowlogRes] = await Promise.all([
+        api.request({ url: 'clusterManagerRedis:info' }),
+        api.request({ url: 'clusterManagerRedis:pubsub' }),
+        api.request({ url: 'clusterManagerRedis:clients' }),
+        api.request({ url: 'clusterManagerRedis:slowlog', params: { count: 10 } }),
+      ]);
+      const infoData = infoRes?.data?.data || infoRes?.data || {};
+      setInfo(infoData);
+      
+      const pubsubData = pubsubRes?.data?.data || pubsubRes?.data || {};
+      setChannels(pubsubData.channels || {});
+      setTotalChannels(pubsubData.total_channels || 0);
+      
+      const clients = Array.isArray(clientsRes?.data?.data?.data) ? clientsRes.data.data.data : Array.isArray(clientsRes?.data?.data) ? clientsRes.data.data : Array.isArray(clientsRes?.data) ? clientsRes.data : [];
+      setClients(clients);
+      
+      const slowlogs = Array.isArray(slowlogRes?.data?.data?.data) ? slowlogRes.data.data.data : Array.isArray(slowlogRes?.data?.data) ? slowlogRes.data.data : Array.isArray(slowlogRes?.data) ? slowlogRes.data : [];
+      setSlowlog(slowlogs);
+    } catch (err: any) {
+      setError(err?.response?.data?.errors?.[0]?.message || 'Failed to connect to Redis');
+    } finally {
+      setLoading(false);
+    }
+  }, [api]);
+
+  useEffect(() => {
+    fetchAll();
+  }, []);
+
+  useEffect(() => {
+    if (!autoRefresh) return;
+    const timer = setInterval(fetchAll, autoRefresh * 1000);
+    return () => clearInterval(timer);
+  }, [autoRefresh, fetchAll]);
+
+  if (error) {
+    return (
+      <Card>
+        <Text type="danger">{error}</Text>
+        <br />
+        <Button style={{ marginTop: 8 }} onClick={fetchAll}>
+          Retry
+        </Button>
+      </Card>
+    );
+  }
+
+  if (!info) return null;
+
+  const memUsagePct =
+    info.memory.max_memory !== 'unlimited' && info.memory.peak_bytes > 0
+      ? Math.round((info.memory.used_bytes / info.memory.peak_bytes) * 100)
+      : null;
+
+  return (
+    <div>
+      <Space style={{ marginBottom: 16 }}>
+        <Button icon={<ReloadOutlined />} onClick={fetchAll} loading={loading}>
+          Refresh
+        </Button>
+        <Select
+          placeholder="Auto refresh"
+          allowClear
+          style={{ width: 160 }}
+          value={autoRefresh}
+          onChange={setAutoRefresh}
+          options={[
+            { value: 5, label: 'Every 5s' },
+            { value: 10, label: 'Every 10s' },
+            { value: 30, label: 'Every 30s' },
+          ]}
+        />
+        <Tag color="blue">Redis {info.server.version}</Tag>
+        <Tag>Uptime: {formatUptime(info.server.uptime_seconds)}</Tag>
+      </Space>
+
+      {/* Server stats */}
+      <Row gutter={[16, 16]}>
+        <Col span={6}>
+          <Card size="small">
+            <Statistic
+              title="Memory Used"
+              value={info.memory.used}
+              prefix={<DatabaseOutlined />}
+              suffix={memUsagePct !== null ? `(${memUsagePct}%)` : undefined}
+            />
+            <Text type="secondary">Peak: {info.memory.peak}</Text>
+            <br />
+            <Text type="secondary">Max: {info.memory.max_memory}</Text>
+            <br />
+            <Text type="secondary">Policy: {info.memory.max_memory_policy}</Text>
+          </Card>
+        </Col>
+        <Col span={6}>
+          <Card size="small">
+            <Statistic
+              title="Ops/sec"
+              value={info.stats.ops_per_sec}
+              prefix={<ThunderboltOutlined />}
+            />
+            <Text type="secondary">Total commands: {info.stats.total_commands.toLocaleString()}</Text>
+          </Card>
+        </Col>
+        <Col span={6}>
+          <Card size="small">
+            <Statistic
+              title="Connected Clients"
+              value={info.clients.connected}
+              prefix={<CloudServerOutlined />}
+            />
+            <Text type="secondary">Blocked: {info.clients.blocked}</Text>
+          </Card>
+        </Col>
+        <Col span={6}>
+          <Card size="small">
+            <Statistic
+              title="Cache Hit Rate"
+              value={info.stats.hit_rate}
+              suffix="%"
+              prefix={<FieldTimeOutlined />}
+              valueStyle={{ color: info.stats.hit_rate > 90 ? '#3f8600' : info.stats.hit_rate > 50 ? '#faad14' : '#cf1322' }}
+            />
+            <Text type="secondary">
+              Hits: {info.stats.keyspace_hits.toLocaleString()} / Misses:{' '}
+              {info.stats.keyspace_misses.toLocaleString()}
+            </Text>
+            <br />
+            <Text type="secondary">
+              Expired: {info.stats.expired_keys.toLocaleString()} / Evicted:{' '}
+              {info.stats.evicted_keys.toLocaleString()}
+            </Text>
+          </Card>
+        </Col>
+      </Row>
+
+      {/* Keyspace */}
+      <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
+        <Col span={12}>
+          <Card title="Keyspace" size="small">
+            {Object.keys(info.keyspace).length === 0 ? (
+              <Text type="secondary">No databases in use</Text>
+            ) : (
+              <Table
+                rowKey={(_, i) => String(i)}
+                size="small"
+                pagination={false}
+                dataSource={Object.entries(info.keyspace).map(([db, vals]) => ({
+                  db,
+                  keys: vals.keys,
+                  expires: vals.expires,
+                  avg_ttl: vals.avg_ttl,
+                }))}
+                columns={[
+                  { title: 'Database', dataIndex: 'db', width: 80 },
+                  { title: 'Keys', dataIndex: 'keys', width: 80 },
+                  { title: 'Expires', dataIndex: 'expires', width: 80 },
+                  {
+                    title: 'Avg TTL',
+                    dataIndex: 'avg_ttl',
+                    render: (v: string) => (v ? `${(Number(v) / 1000).toFixed(1)}s` : '-'),
+                  },
+                ]}
+              />
+            )}
+          </Card>
+        </Col>
+
+        {/* Pub/Sub channels */}
+        <Col span={12}>
+          <Card title={`Pub/Sub Channels (${totalChannels})`} size="small">
+            {totalChannels === 0 ? (
+              <Text type="secondary">No active channels</Text>
+            ) : (
+              <Table
+                rowKey={(_, i) => String(i)}
+                size="small"
+                pagination={false}
+                dataSource={Object.entries(channels).map(([name, subs]) => ({ name, subs }))}
+                columns={[
+                  { title: 'Channel', dataIndex: 'name', ellipsis: true },
+                  { title: 'Subscribers', dataIndex: 'subs', width: 100 },
+                ]}
+              />
+            )}
+          </Card>
+        </Col>
+      </Row>
+
+      {/* Slow log */}
+      <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
+        <Col span={12}>
+          <Card title="Slow Log (recent)" size="small">
+            {slowlog.length === 0 ? (
+              <Text type="secondary">No slow queries</Text>
+            ) : (
+              <Table
+                rowKey="id"
+                size="small"
+                pagination={false}
+                dataSource={slowlog}
+                columns={[
+                  { title: 'ID', dataIndex: 'id', width: 60 },
+                  {
+                    title: 'Duration',
+                    dataIndex: 'duration_us',
+                    width: 100,
+                    render: (v: number) => `${(v / 1000).toFixed(1)}ms`,
+                  },
+                  { title: 'Command', dataIndex: 'command', ellipsis: true },
+                ]}
+              />
+            )}
+          </Card>
+        </Col>
+
+        {/* Connected clients */}
+        <Col span={12}>
+          <Card title={`Connected Clients (${clients.length})`} size="small">
+            <Table
+              rowKey={(_, i) => String(i)}
+              size="small"
+              pagination={{ pageSize: 5, size: 'small' }}
+              dataSource={clients}
+              columns={[
+                { title: 'Addr', dataIndex: 'addr', width: 140 },
+                { title: 'Age', dataIndex: 'age', width: 60, render: (v: string) => `${v}s` },
+                { title: 'Idle', dataIndex: 'idle', width: 60, render: (v: string) => `${v}s` },
+                { title: 'DB', dataIndex: 'db', width: 40 },
+                { title: 'Cmd', dataIndex: 'cmd', width: 80 },
+                {
+                  title: 'Flags',
+                  dataIndex: 'flags',
+                  width: 60,
+                  render: (v: string) => <Tag>{v}</Tag>,
+                },
+              ]}
+            />
+          </Card>
+        </Col>
+      </Row>
+
+      {/* Sync Messages */}
+      <Row gutter={16} style={{ marginTop: 16 }}>
+        <Col span={24}>
+          <SyncMessagesSection />
+        </Col>
+      </Row>
+    </div>
+  );
+}
+
+function SyncMessagesSection() {
+  const api = useAPIClient();
+  const [data, setData] = useState<any>(null);
+
+  useEffect(() => {
+    api.request({ url: 'clusterManagerRedis:syncMessages' })
+      .then((res: any) => setData(res?.data?.data))
+      .catch(() => {});
+  }, [api]);
+
+  if (!data) return null;
+
+  return (
+    <Card title={`Sync Messages (PubSub ${data.pubSubConnected ? 'Connected' : 'Disconnected'})`} size="small">
+      <Table
+        rowKey="channel"
+        size="small"
+        pagination={false}
+        dataSource={data.channels || []}
+        columns={[
+          { title: 'Channel', dataIndex: 'channel', key: 'channel' },
+        ]}
+      />
+    </Card>
+  );
+}