feat: native Headlamp integration, TrueNAS API, docs, and CI for v0.2.0
Native Headlamp integrations: - registerResourceTableColumnsProcessor: add Protocol/Pool/Server columns to native StorageClass table and Protocol/Volume Handle to PV table - registerDetailsViewSection: inject TNS-CSI section into PV detail pages - registerDetailsViewSection: inject driver role/status into tns-csi Pod pages - registerDetailsViewHeaderAction: Benchmark shortcut on StorageClass detail - registerAppBarAction: driver health badge (N/Nc M/Mn, color-coded) - Trim sidebar from 6 → 4 entries (Overview, Snapshots, Metrics, Benchmark) TrueNAS API integration: - src/api/truenas.ts: ConfigStore-backed settings, WebSocket JSON-RPC client for pool.query (auth.login_with_api_key + pool.query) - src/components/TnsCsiSettings.tsx: API key + server override settings UI with connection test button - TnsCsiDataContext: fetch real pool stats (size/allocated/free/status) - OverviewPage: three-tier pool capacity display (real data → error → metrics fallback) Documentation: - README, CHANGELOG, CONTRIBUTING, SECURITY - docs/: architecture, deployment (Helm), getting-started, user-guide, troubleshooting CI: - .github/workflows/ci.yaml: lint + type-check + test on PR/push - .github/workflows/release.yaml: workflow_dispatch versioned release Generated with [Claude Code](https://claude.ai/code) via [Happy](https://happy.engineering) Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering>
This commit is contained in:
@@ -0,0 +1,184 @@
|
||||
/**
|
||||
* TnsCsiSettings — plugin settings page.
|
||||
*
|
||||
* Lets users configure the TrueNAS API key and (optionally) a server address
|
||||
* override. When configured, the plugin fetches real pool capacity data via
|
||||
* the TrueNAS WebSocket JSON-RPC API (pool.query) and displays it on the
|
||||
* Overview page.
|
||||
*
|
||||
* Settings are persisted via Headlamp's ConfigStore (Redux-backed).
|
||||
*/
|
||||
|
||||
import {
|
||||
NameValueTable,
|
||||
SectionBox,
|
||||
StatusLabel,
|
||||
} from '@kinvolk/headlamp-plugin/lib/CommonComponents';
|
||||
import React, { useState } from 'react';
|
||||
import { fetchTruenasPoolStats, getTnsCsiConfig, setTnsCsiConfig } from '../api/truenas';
|
||||
|
||||
interface PluginSettingsProps {
|
||||
data?: Record<string, string | number | boolean>;
|
||||
onDataChange?: (data: Record<string, string | number | boolean>) => void;
|
||||
}
|
||||
|
||||
const INPUT_STYLE: React.CSSProperties = {
|
||||
width: '100%',
|
||||
padding: '4px 8px',
|
||||
border: '1px solid var(--mui-palette-divider, #e0e0e0)',
|
||||
borderRadius: '4px',
|
||||
fontSize: '14px',
|
||||
backgroundColor: 'var(--mui-palette-background-paper, #fff)',
|
||||
color: 'var(--mui-palette-text-primary, #000)',
|
||||
boxSizing: 'border-box',
|
||||
};
|
||||
|
||||
const HINT_STYLE: React.CSSProperties = {
|
||||
fontSize: '12px',
|
||||
color: 'var(--mui-palette-text-secondary, #666)',
|
||||
marginTop: '4px',
|
||||
};
|
||||
|
||||
export default function TnsCsiSettings({ data, onDataChange }: PluginSettingsProps) {
|
||||
const saved = getTnsCsiConfig();
|
||||
|
||||
const [apiKey, setApiKey] = useState<string>(
|
||||
(data?.truenasApiKey as string) ?? saved.truenasApiKey ?? ''
|
||||
);
|
||||
const [serverOverride, setServerOverride] = useState<string>(
|
||||
(data?.truenasServerOverride as string) ?? saved.truenasServerOverride ?? ''
|
||||
);
|
||||
const [testing, setTesting] = useState(false);
|
||||
const [testResult, setTestResult] = useState<{ success: boolean; message: string } | null>(null);
|
||||
|
||||
function handleApiKeyChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const val = e.target.value;
|
||||
setApiKey(val);
|
||||
setTnsCsiConfig({ truenasApiKey: val });
|
||||
onDataChange?.({ ...data, truenasApiKey: val });
|
||||
}
|
||||
|
||||
function handleServerOverrideChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const val = e.target.value;
|
||||
setServerOverride(val);
|
||||
setTnsCsiConfig({ truenasServerOverride: val });
|
||||
onDataChange?.({ ...data, truenasServerOverride: val });
|
||||
}
|
||||
|
||||
async function testConnection() {
|
||||
setTesting(true);
|
||||
setTestResult(null);
|
||||
const server = serverOverride.trim() || '(from StorageClass)';
|
||||
if (!serverOverride.trim()) {
|
||||
setTesting(false);
|
||||
setTestResult({
|
||||
success: false,
|
||||
message: 'Enter a Server Address to test the connection.',
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!apiKey.trim()) {
|
||||
setTesting(false);
|
||||
setTestResult({
|
||||
success: false,
|
||||
message: 'Enter an API key to test the connection.',
|
||||
});
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const pools = await fetchTruenasPoolStats(serverOverride.trim(), apiKey.trim());
|
||||
const names = pools.map(p => p.name).join(', ');
|
||||
setTestResult({
|
||||
success: true,
|
||||
message: `Connected to ${server}. Found ${pools.length} pool(s): ${names || '(none)'}`,
|
||||
});
|
||||
} catch (err: unknown) {
|
||||
setTestResult({
|
||||
success: false,
|
||||
message: String(err instanceof Error ? err.message : err),
|
||||
});
|
||||
} finally {
|
||||
setTesting(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<SectionBox title="TrueNAS API (Optional)">
|
||||
<NameValueTable
|
||||
rows={[
|
||||
{
|
||||
name: 'API Key',
|
||||
value: (
|
||||
<div>
|
||||
<input
|
||||
type="password"
|
||||
value={apiKey}
|
||||
onChange={handleApiKeyChange}
|
||||
placeholder="Paste your TrueNAS API key here"
|
||||
style={INPUT_STYLE}
|
||||
autoComplete="off"
|
||||
/>
|
||||
<div style={HINT_STYLE}>
|
||||
Generate in TrueNAS UI → Credentials → API Keys.
|
||||
Required for real pool capacity data on the Overview page.
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: 'Server Address',
|
||||
value: (
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
value={serverOverride}
|
||||
onChange={handleServerOverrideChange}
|
||||
placeholder="e.g. 192.168.1.100 or truenas.local"
|
||||
style={INPUT_STYLE}
|
||||
/>
|
||||
<div style={HINT_STYLE}>
|
||||
TrueNAS host/IP. If blank, the plugin uses the{' '}
|
||||
<code>server</code> parameter from your tns-csi StorageClass.
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: 'Connection Test',
|
||||
value: (
|
||||
<div>
|
||||
<button
|
||||
onClick={() => void testConnection()}
|
||||
disabled={testing}
|
||||
style={{
|
||||
padding: '6px 16px',
|
||||
backgroundColor: testing
|
||||
? 'var(--mui-palette-action-disabledBackground, #e0e0e0)'
|
||||
: 'var(--mui-palette-primary-main, #1976d2)',
|
||||
color: testing
|
||||
? 'var(--mui-palette-action-disabled, #9e9e9e)'
|
||||
: 'var(--mui-palette-primary-contrastText, #fff)',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: testing ? 'not-allowed' : 'pointer',
|
||||
fontSize: '13px',
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{testing ? 'Testing…' : 'Test Connection'}
|
||||
</button>
|
||||
{testResult && (
|
||||
<div style={{ marginTop: '8px' }}>
|
||||
<StatusLabel status={testResult.success ? 'success' : 'error'}>
|
||||
{testResult.message}
|
||||
</StatusLabel>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionBox>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user