feat: add OpenSearch admin page with pipeline, indices, performance, and thresholds UI
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
425
ui/src/pages/admin/OpenSearchAdminPage.module.css
Normal file
425
ui/src/pages/admin/OpenSearchAdminPage.module.css
Normal file
@@ -0,0 +1,425 @@
|
|||||||
|
.page {
|
||||||
|
max-width: 960px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 32px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageTitle {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headerInfo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headerMeta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metaItem {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
}
|
||||||
|
|
||||||
|
.globalRefresh {
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: var(--bg-raised);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.15s;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.globalRefresh:hover {
|
||||||
|
border-color: var(--amber-dim);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 32px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accessDenied {
|
||||||
|
text-align: center;
|
||||||
|
padding: 64px 16px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Progress Bar ─── */
|
||||||
|
.progressContainer {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progressLabel {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progressPct {
|
||||||
|
font-weight: 600;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progressBar {
|
||||||
|
height: 8px;
|
||||||
|
background: var(--bg-raised);
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progressFill {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Metrics Grid ─── */
|
||||||
|
.metricsGrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px;
|
||||||
|
background: var(--bg-raised);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metricValue {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metricLabel {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Filter Row ─── */
|
||||||
|
.filterRow {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterInput {
|
||||||
|
flex: 1;
|
||||||
|
background: var(--bg-base);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
padding: 8px 12px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 13px;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterInput:focus {
|
||||||
|
border-color: var(--amber-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterInput::placeholder {
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterSelect {
|
||||||
|
background: var(--bg-base);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
padding: 8px 12px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 13px;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Tables ─── */
|
||||||
|
.tableWrapper {
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table th {
|
||||||
|
text-align: left;
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
border-bottom: 1px solid var(--border-subtle);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sortableHeader {
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sortableHeader:hover {
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sortArrow {
|
||||||
|
font-size: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table td {
|
||||||
|
padding: 8px 12px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
border-bottom: 1px solid var(--border-subtle);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table tbody tr:hover {
|
||||||
|
background: var(--bg-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mono {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.healthBadge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 99px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 500;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.healthGreen {
|
||||||
|
background: rgba(34, 197, 94, 0.1);
|
||||||
|
color: #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.healthYellow {
|
||||||
|
background: rgba(234, 179, 8, 0.1);
|
||||||
|
color: #eab308;
|
||||||
|
}
|
||||||
|
|
||||||
|
.healthRed {
|
||||||
|
background: rgba(239, 68, 68, 0.1);
|
||||||
|
color: #ef4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deleteBtn {
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--rose-dim);
|
||||||
|
color: var(--rose);
|
||||||
|
font-size: 11px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deleteBtn:hover {
|
||||||
|
background: var(--rose-glow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.emptyState {
|
||||||
|
text-align: center;
|
||||||
|
padding: 24px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Pagination ─── */
|
||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 12px;
|
||||||
|
margin-top: 16px;
|
||||||
|
padding-top: 12px;
|
||||||
|
border-top: 1px solid var(--border-subtle);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageBtn {
|
||||||
|
padding: 6px 14px;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: var(--bg-raised);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageBtn:hover:not(:disabled) {
|
||||||
|
border-color: var(--amber-dim);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageBtn:disabled {
|
||||||
|
opacity: 0.4;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageInfo {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Heap Section ─── */
|
||||||
|
.heapSection {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Operations ─── */
|
||||||
|
.operationsGrid {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.operationBtn {
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: var(--bg-raised);
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Thresholds ─── */
|
||||||
|
.thresholdGrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thresholdField {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thresholdLabel {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.thresholdInput {
|
||||||
|
width: 100%;
|
||||||
|
background: var(--bg-base);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
padding: 8px 12px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 13px;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thresholdInput:focus {
|
||||||
|
border-color: var(--amber-dim);
|
||||||
|
box-shadow: 0 0 0 3px var(--amber-glow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.thresholdActions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnPrimary {
|
||||||
|
padding: 8px 20px;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
border: 1px solid var(--amber);
|
||||||
|
background: var(--amber);
|
||||||
|
color: #0a0e17;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnPrimary:hover {
|
||||||
|
background: var(--amber-hover);
|
||||||
|
border-color: var(--amber-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnPrimary:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.successMsg {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.errorMsg {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--rose);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.metricsGrid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.thresholdGrid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterRow {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
490
ui/src/pages/admin/OpenSearchAdminPage.tsx
Normal file
490
ui/src/pages/admin/OpenSearchAdminPage.tsx
Normal file
@@ -0,0 +1,490 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { useAuthStore } from '../../auth/auth-store';
|
||||||
|
import { StatusBadge, type Status } from '../../components/admin/StatusBadge';
|
||||||
|
import { RefreshableCard } from '../../components/admin/RefreshableCard';
|
||||||
|
import { ConfirmDeleteDialog } from '../../components/admin/ConfirmDeleteDialog';
|
||||||
|
import {
|
||||||
|
useOpenSearchStatus,
|
||||||
|
usePipelineStats,
|
||||||
|
useIndices,
|
||||||
|
usePerformanceStats,
|
||||||
|
useDeleteIndex,
|
||||||
|
type IndicesParams,
|
||||||
|
} from '../../api/queries/admin/opensearch';
|
||||||
|
import { useThresholds, useSaveThresholds, type Thresholds } from '../../api/queries/admin/thresholds';
|
||||||
|
import styles from './OpenSearchAdminPage.module.css';
|
||||||
|
|
||||||
|
function clusterHealthToStatus(health: string | undefined): Status {
|
||||||
|
switch (health?.toLowerCase()) {
|
||||||
|
case 'green': return 'healthy';
|
||||||
|
case 'yellow': return 'warning';
|
||||||
|
case 'red': return 'critical';
|
||||||
|
default: return 'unknown';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function OpenSearchAdminPage() {
|
||||||
|
const roles = useAuthStore((s) => s.roles);
|
||||||
|
|
||||||
|
if (!roles.includes('ADMIN')) {
|
||||||
|
return (
|
||||||
|
<div className={styles.page}>
|
||||||
|
<div className={styles.accessDenied}>
|
||||||
|
Access Denied — this page requires the ADMIN role.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return <OpenSearchAdminContent />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function OpenSearchAdminContent() {
|
||||||
|
const status = useOpenSearchStatus();
|
||||||
|
const pipeline = usePipelineStats();
|
||||||
|
const performance = usePerformanceStats();
|
||||||
|
const thresholds = useThresholds();
|
||||||
|
|
||||||
|
if (status.isLoading) {
|
||||||
|
return (
|
||||||
|
<div className={styles.page}>
|
||||||
|
<h1 className={styles.pageTitle}>OpenSearch Administration</h1>
|
||||||
|
<div className={styles.loading}>Loading...</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const os = status.data;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.page}>
|
||||||
|
<div className={styles.header}>
|
||||||
|
<div className={styles.headerInfo}>
|
||||||
|
<h1 className={styles.pageTitle}>OpenSearch Administration</h1>
|
||||||
|
<div className={styles.headerMeta}>
|
||||||
|
<StatusBadge
|
||||||
|
status={clusterHealthToStatus(os?.clusterHealth)}
|
||||||
|
label={os?.clusterHealth ?? 'Unknown'}
|
||||||
|
/>
|
||||||
|
{os?.version && <span className={styles.metaItem}>v{os.version}</span>}
|
||||||
|
{os?.numberOfNodes !== undefined && (
|
||||||
|
<span className={styles.metaItem}>{os.numberOfNodes} node(s)</span>
|
||||||
|
)}
|
||||||
|
{os?.host && <span className={styles.metaItem}>{os.host}</span>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={styles.globalRefresh}
|
||||||
|
onClick={() => {
|
||||||
|
status.refetch();
|
||||||
|
pipeline.refetch();
|
||||||
|
performance.refetch();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Refresh All
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<PipelineSection pipeline={pipeline} thresholds={thresholds.data} />
|
||||||
|
<IndicesSection />
|
||||||
|
<PerformanceSection performance={performance} thresholds={thresholds.data} />
|
||||||
|
<OperationsSection />
|
||||||
|
<OsThresholdsSection thresholds={thresholds.data} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PipelineSection({
|
||||||
|
pipeline,
|
||||||
|
thresholds,
|
||||||
|
}: {
|
||||||
|
pipeline: ReturnType<typeof usePipelineStats>;
|
||||||
|
thresholds?: Thresholds;
|
||||||
|
}) {
|
||||||
|
const data = pipeline.data;
|
||||||
|
if (!data) return null;
|
||||||
|
|
||||||
|
const queuePct = data.maxQueueSize > 0
|
||||||
|
? Math.round((data.queueDepth / data.maxQueueSize) * 100)
|
||||||
|
: 0;
|
||||||
|
const barColor =
|
||||||
|
thresholds?.osQueueCriticalPercent && queuePct >= thresholds.osQueueCriticalPercent ? '#ef4444'
|
||||||
|
: thresholds?.osQueueWarningPercent && queuePct >= thresholds.osQueueWarningPercent ? '#eab308'
|
||||||
|
: '#22c55e';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<RefreshableCard
|
||||||
|
title="Indexing Pipeline"
|
||||||
|
onRefresh={() => pipeline.refetch()}
|
||||||
|
isRefreshing={pipeline.isFetching}
|
||||||
|
autoRefresh
|
||||||
|
>
|
||||||
|
<div className={styles.progressContainer}>
|
||||||
|
<div className={styles.progressLabel}>
|
||||||
|
Queue: {data.queueDepth} / {data.maxQueueSize}
|
||||||
|
<span className={styles.progressPct}>{queuePct}%</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.progressBar}>
|
||||||
|
<div
|
||||||
|
className={styles.progressFill}
|
||||||
|
style={{ width: `${queuePct}%`, background: barColor }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.metricsGrid}>
|
||||||
|
<div className={styles.metric}>
|
||||||
|
<span className={styles.metricValue}>{data.totalIndexed.toLocaleString()}</span>
|
||||||
|
<span className={styles.metricLabel}>Total Indexed</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.metric}>
|
||||||
|
<span className={styles.metricValue}>{data.totalFailed.toLocaleString()}</span>
|
||||||
|
<span className={styles.metricLabel}>Total Failed</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.metric}>
|
||||||
|
<span className={styles.metricValue}>{data.avgLatencyMs}ms</span>
|
||||||
|
<span className={styles.metricLabel}>Avg Latency</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</RefreshableCard>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function IndicesSection() {
|
||||||
|
const [search, setSearch] = useState('');
|
||||||
|
const [healthFilter, setHealthFilter] = useState('');
|
||||||
|
const [sortBy, setSortBy] = useState('name');
|
||||||
|
const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');
|
||||||
|
const [page, setPage] = useState(0);
|
||||||
|
const pageSize = 10;
|
||||||
|
const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const params: IndicesParams = {
|
||||||
|
search: search || undefined,
|
||||||
|
health: healthFilter || undefined,
|
||||||
|
sortBy,
|
||||||
|
sortDir,
|
||||||
|
page,
|
||||||
|
size: pageSize,
|
||||||
|
};
|
||||||
|
|
||||||
|
const indices = useIndices(params);
|
||||||
|
const deleteMutation = useDeleteIndex();
|
||||||
|
|
||||||
|
function toggleSort(col: string) {
|
||||||
|
if (sortBy === col) {
|
||||||
|
setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
|
||||||
|
} else {
|
||||||
|
setSortBy(col);
|
||||||
|
setSortDir('asc');
|
||||||
|
}
|
||||||
|
setPage(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = indices.data;
|
||||||
|
const totalPages = data ? Math.ceil(data.total / pageSize) : 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<RefreshableCard
|
||||||
|
title="Indices"
|
||||||
|
onRefresh={() => indices.refetch()}
|
||||||
|
isRefreshing={indices.isFetching}
|
||||||
|
>
|
||||||
|
<div className={styles.filterRow}>
|
||||||
|
<input
|
||||||
|
className={styles.filterInput}
|
||||||
|
type="text"
|
||||||
|
placeholder="Search indices..."
|
||||||
|
value={search}
|
||||||
|
onChange={(e) => { setSearch(e.target.value); setPage(0); }}
|
||||||
|
/>
|
||||||
|
<select
|
||||||
|
className={styles.filterSelect}
|
||||||
|
value={healthFilter}
|
||||||
|
onChange={(e) => { setHealthFilter(e.target.value); setPage(0); }}
|
||||||
|
>
|
||||||
|
<option value="">All Health</option>
|
||||||
|
<option value="green">Green</option>
|
||||||
|
<option value="yellow">Yellow</option>
|
||||||
|
<option value="red">Red</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!data ? (
|
||||||
|
<div className={styles.loading}>Loading...</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className={styles.tableWrapper}>
|
||||||
|
<table className={styles.table}>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<SortHeader label="Name" col="name" current={sortBy} dir={sortDir} onSort={toggleSort} />
|
||||||
|
<SortHeader label="Health" col="health" current={sortBy} dir={sortDir} onSort={toggleSort} />
|
||||||
|
<SortHeader label="Docs" col="docsCount" current={sortBy} dir={sortDir} onSort={toggleSort} />
|
||||||
|
<SortHeader label="Size" col="storeSize" current={sortBy} dir={sortDir} onSort={toggleSort} />
|
||||||
|
<th>Shards</th>
|
||||||
|
<th></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{data.indices.map((idx) => (
|
||||||
|
<tr key={idx.name}>
|
||||||
|
<td className={styles.mono}>{idx.name}</td>
|
||||||
|
<td>
|
||||||
|
<span className={`${styles.healthBadge} ${styles[`health${idx.health.charAt(0).toUpperCase()}${idx.health.slice(1)}`]}`}>
|
||||||
|
{idx.health}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>{idx.docsCount.toLocaleString()}</td>
|
||||||
|
<td>{idx.storeSize}</td>
|
||||||
|
<td>{idx.primaryShards}p / {idx.replicas}r</td>
|
||||||
|
<td>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={styles.deleteBtn}
|
||||||
|
onClick={() => setDeleteTarget(idx.name)}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
{data.indices.length === 0 && (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={6} className={styles.emptyState}>No indices found</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{totalPages > 1 && (
|
||||||
|
<div className={styles.pagination}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={styles.pageBtn}
|
||||||
|
disabled={page === 0}
|
||||||
|
onClick={() => setPage((p) => p - 1)}
|
||||||
|
>
|
||||||
|
Previous
|
||||||
|
</button>
|
||||||
|
<span className={styles.pageInfo}>
|
||||||
|
Page {page + 1} of {totalPages}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={styles.pageBtn}
|
||||||
|
disabled={page >= totalPages - 1}
|
||||||
|
onClick={() => setPage((p) => p + 1)}
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<ConfirmDeleteDialog
|
||||||
|
isOpen={deleteTarget !== null}
|
||||||
|
onClose={() => setDeleteTarget(null)}
|
||||||
|
onConfirm={() => {
|
||||||
|
if (deleteTarget) {
|
||||||
|
deleteMutation.mutate(deleteTarget);
|
||||||
|
setDeleteTarget(null);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
resourceName={deleteTarget ?? ''}
|
||||||
|
resourceType="index"
|
||||||
|
/>
|
||||||
|
</RefreshableCard>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SortHeader({
|
||||||
|
label,
|
||||||
|
col,
|
||||||
|
current,
|
||||||
|
dir,
|
||||||
|
onSort,
|
||||||
|
}: {
|
||||||
|
label: string;
|
||||||
|
col: string;
|
||||||
|
current: string;
|
||||||
|
dir: 'asc' | 'desc';
|
||||||
|
onSort: (col: string) => void;
|
||||||
|
}) {
|
||||||
|
const isActive = current === col;
|
||||||
|
return (
|
||||||
|
<th
|
||||||
|
className={styles.sortableHeader}
|
||||||
|
onClick={() => onSort(col)}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
{isActive && <span className={styles.sortArrow}>{dir === 'asc' ? ' \u25B2' : ' \u25BC'}</span>}
|
||||||
|
</th>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PerformanceSection({
|
||||||
|
performance,
|
||||||
|
thresholds,
|
||||||
|
}: {
|
||||||
|
performance: ReturnType<typeof usePerformanceStats>;
|
||||||
|
thresholds?: Thresholds;
|
||||||
|
}) {
|
||||||
|
const data = performance.data;
|
||||||
|
if (!data) return null;
|
||||||
|
|
||||||
|
const heapPct = data.jvmHeapUsedPercent;
|
||||||
|
const heapColor =
|
||||||
|
thresholds?.osHeapCriticalPercent && heapPct >= thresholds.osHeapCriticalPercent ? '#ef4444'
|
||||||
|
: thresholds?.osHeapWarningPercent && heapPct >= thresholds.osHeapWarningPercent ? '#eab308'
|
||||||
|
: '#22c55e';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<RefreshableCard
|
||||||
|
title="Performance"
|
||||||
|
onRefresh={() => performance.refetch()}
|
||||||
|
isRefreshing={performance.isFetching}
|
||||||
|
autoRefresh
|
||||||
|
>
|
||||||
|
<div className={styles.metricsGrid}>
|
||||||
|
<div className={styles.metric}>
|
||||||
|
<span className={styles.metricValue}>{(data.queryCacheHitRate * 100).toFixed(1)}%</span>
|
||||||
|
<span className={styles.metricLabel}>Query Cache Hit</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.metric}>
|
||||||
|
<span className={styles.metricValue}>{(data.requestCacheHitRate * 100).toFixed(1)}%</span>
|
||||||
|
<span className={styles.metricLabel}>Request Cache Hit</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.metric}>
|
||||||
|
<span className={styles.metricValue}>{data.avgQueryLatencyMs}ms</span>
|
||||||
|
<span className={styles.metricLabel}>Query Latency</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.metric}>
|
||||||
|
<span className={styles.metricValue}>{data.avgIndexLatencyMs}ms</span>
|
||||||
|
<span className={styles.metricLabel}>Index Latency</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.heapSection}>
|
||||||
|
<div className={styles.progressLabel}>
|
||||||
|
JVM Heap: {formatBytes(data.jvmHeapUsedBytes)} / {formatBytes(data.jvmHeapMaxBytes)}
|
||||||
|
<span className={styles.progressPct}>{heapPct}%</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.progressBar}>
|
||||||
|
<div
|
||||||
|
className={styles.progressFill}
|
||||||
|
style={{ width: `${heapPct}%`, background: heapColor }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</RefreshableCard>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function OperationsSection() {
|
||||||
|
return (
|
||||||
|
<RefreshableCard title="Operations">
|
||||||
|
<div className={styles.operationsGrid}>
|
||||||
|
<button type="button" className={styles.operationBtn} disabled title="Coming soon">
|
||||||
|
Force Merge
|
||||||
|
</button>
|
||||||
|
<button type="button" className={styles.operationBtn} disabled title="Coming soon">
|
||||||
|
Flush
|
||||||
|
</button>
|
||||||
|
<button type="button" className={styles.operationBtn} disabled title="Coming soon">
|
||||||
|
Clear Cache
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</RefreshableCard>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function OsThresholdsSection({ thresholds }: { thresholds?: Thresholds }) {
|
||||||
|
const [form, setForm] = useState<Thresholds | null>(null);
|
||||||
|
const saveMutation = useSaveThresholds();
|
||||||
|
const [status, setStatus] = useState<{ type: 'success' | 'error'; msg: string } | null>(null);
|
||||||
|
|
||||||
|
const current = form ?? thresholds;
|
||||||
|
if (!current) return null;
|
||||||
|
|
||||||
|
function update(key: keyof Thresholds, value: number) {
|
||||||
|
setForm((prev) => ({ ...(prev ?? thresholds!), [key]: value }));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSave() {
|
||||||
|
const data = form ?? thresholds!;
|
||||||
|
try {
|
||||||
|
await saveMutation.mutateAsync(data);
|
||||||
|
setStatus({ type: 'success', msg: 'Thresholds saved.' });
|
||||||
|
setTimeout(() => setStatus(null), 3000);
|
||||||
|
} catch {
|
||||||
|
setStatus({ type: 'error', msg: 'Failed to save thresholds.' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<RefreshableCard title="Thresholds" collapsible defaultCollapsed>
|
||||||
|
<div className={styles.thresholdGrid}>
|
||||||
|
<div className={styles.thresholdField}>
|
||||||
|
<label className={styles.thresholdLabel}>Queue Warning %</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
className={styles.thresholdInput}
|
||||||
|
value={current.osQueueWarningPercent}
|
||||||
|
onChange={(e) => update('osQueueWarningPercent', Number(e.target.value))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={styles.thresholdField}>
|
||||||
|
<label className={styles.thresholdLabel}>Queue Critical %</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
className={styles.thresholdInput}
|
||||||
|
value={current.osQueueCriticalPercent}
|
||||||
|
onChange={(e) => update('osQueueCriticalPercent', Number(e.target.value))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={styles.thresholdField}>
|
||||||
|
<label className={styles.thresholdLabel}>Heap Warning %</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
className={styles.thresholdInput}
|
||||||
|
value={current.osHeapWarningPercent}
|
||||||
|
onChange={(e) => update('osHeapWarningPercent', Number(e.target.value))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={styles.thresholdField}>
|
||||||
|
<label className={styles.thresholdLabel}>Heap Critical %</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
className={styles.thresholdInput}
|
||||||
|
value={current.osHeapCriticalPercent}
|
||||||
|
onChange={(e) => update('osHeapCriticalPercent', Number(e.target.value))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.thresholdActions}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={styles.btnPrimary}
|
||||||
|
onClick={handleSave}
|
||||||
|
disabled={saveMutation.isPending}
|
||||||
|
>
|
||||||
|
{saveMutation.isPending ? 'Saving...' : 'Save Thresholds'}
|
||||||
|
</button>
|
||||||
|
{status && (
|
||||||
|
<span className={status.type === 'success' ? styles.successMsg : styles.errorMsg}>
|
||||||
|
{status.msg}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</RefreshableCard>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatBytes(bytes: number): string {
|
||||||
|
if (bytes === 0) return '0 B';
|
||||||
|
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(1024));
|
||||||
|
return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${units[i]}`;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user