Add elastic-recorder-dashboard.html
This commit is contained in:
parent
b199e5e59b
commit
62528fcaf1
1 changed files with 312 additions and 0 deletions
312
elastic-recorder-dashboard.html
Normal file
312
elastic-recorder-dashboard.html
Normal file
|
|
@ -0,0 +1,312 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Elastic Recorder Control Dashboard</title>
|
||||||
|
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/react.production.min.js"></script>
|
||||||
|
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/react-dom.production.min.js"></script>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<script>
|
||||||
|
// Icon components
|
||||||
|
const Icons = {
|
||||||
|
RefreshCw: () => `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>`,
|
||||||
|
Settings: () => `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>`,
|
||||||
|
Save: () => `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg>`,
|
||||||
|
AlertCircle: () => `<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>`,
|
||||||
|
CheckCircle: () => `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>`
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
body { font-family: system-ui, -apple-system, sans-serif; }
|
||||||
|
.spinner { animation: spin 1s linear infinite; }
|
||||||
|
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { useState, useCallback } = React;
|
||||||
|
|
||||||
|
function ElasticRecorderDashboard() {
|
||||||
|
const [apiKey, setApiKey] = useState('');
|
||||||
|
const [baseUrl, setBaseUrl] = useState('https://us-east-1.gvampp.com');
|
||||||
|
const [channels, setChannels] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [authenticated, setAuthenticated] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [success, setSuccess] = useState('');
|
||||||
|
const [editingId, setEditingId] = useState(null);
|
||||||
|
const [editForm, setEditForm] = useState({});
|
||||||
|
|
||||||
|
const getToken = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${baseUrl}/identity/connect/token`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Basic ${apiKey}`,
|
||||||
|
'Content-Type': 'application/x-www-form-urlencoded',
|
||||||
|
},
|
||||||
|
body: new URLSearchParams({
|
||||||
|
grant_type: 'client_credentials',
|
||||||
|
scope: 'platform'
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Authentication failed: ${response.statusText}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
return data.access_token;
|
||||||
|
} catch (err) {
|
||||||
|
throw new Error(`Token error: ${err.message}`);
|
||||||
|
}
|
||||||
|
}, [apiKey, baseUrl]);
|
||||||
|
|
||||||
|
const fetchChannels = useCallback(async () => {
|
||||||
|
setLoading(true);
|
||||||
|
setError('');
|
||||||
|
try {
|
||||||
|
const token = await getToken();
|
||||||
|
|
||||||
|
const response = await fetch(`${baseUrl}/api/store/channel/v1/channels`, {
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${token}`
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Failed to fetch channels: ${response.statusText}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
setChannels(data);
|
||||||
|
setAuthenticated(true);
|
||||||
|
setSuccess(`Loaded ${data.length} channels`);
|
||||||
|
setTimeout(() => setSuccess(''), 3000);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.message);
|
||||||
|
setAuthenticated(false);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, [getToken, baseUrl]);
|
||||||
|
|
||||||
|
const handleLogin = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (apiKey && baseUrl) {
|
||||||
|
fetchChannels();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const startEdit = (channel) => {
|
||||||
|
setEditingId(channel['channel:id']);
|
||||||
|
setEditForm({
|
||||||
|
'source:text': channel['source:text'] || '',
|
||||||
|
'destinationId:int': channel['destinationId:int'] || '',
|
||||||
|
'name:text': channel['name:text'] || ''
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const cancelEdit = () => {
|
||||||
|
setEditingId(null);
|
||||||
|
setEditForm({});
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveChanges = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
setError('');
|
||||||
|
try {
|
||||||
|
const token = await getToken();
|
||||||
|
|
||||||
|
const updateData = {
|
||||||
|
'source:text': editForm['source:text'],
|
||||||
|
'destinationId:int': editForm['destinationId:int'] ? parseInt(editForm['destinationId:int']) : null
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetch(`${baseUrl}/api/store/channel/v1/channels/${editingId}`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${token}`,
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(updateData)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Failed to update channel: ${response.statusText}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
setSuccess('Channel updated successfully');
|
||||||
|
setEditingId(null);
|
||||||
|
setTimeout(() => fetchChannels(), 500);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.message);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Login form
|
||||||
|
if (!authenticated) {
|
||||||
|
return React.createElement('div', { className: 'min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 flex items-center justify-center p-4' },
|
||||||
|
React.createElement('div', { className: 'bg-slate-800 rounded-lg shadow-xl p-8 w-full max-w-md border border-slate-700' },
|
||||||
|
React.createElement('div', { className: 'mb-6' },
|
||||||
|
React.createElement('h1', { className: 'text-2xl font-bold text-white mb-2' }, 'Elastic Recorder Control'),
|
||||||
|
React.createElement('p', { className: 'text-slate-400' }, 'Manage recording settings and folder assignments')
|
||||||
|
),
|
||||||
|
React.createElement('form', { onSubmit: handleLogin, className: 'space-y-4' },
|
||||||
|
React.createElement('div', null,
|
||||||
|
React.createElement('label', { className: 'block text-sm font-medium text-slate-300 mb-2' }, 'API Key'),
|
||||||
|
React.createElement('textarea', {
|
||||||
|
value: apiKey,
|
||||||
|
onChange: (e) => setApiKey(e.target.value),
|
||||||
|
placeholder: 'Paste your base64-encoded API key',
|
||||||
|
className: 'w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded text-white placeholder-slate-400 text-sm font-mono h-24'
|
||||||
|
})
|
||||||
|
),
|
||||||
|
React.createElement('div', null,
|
||||||
|
React.createElement('label', { className: 'block text-sm font-medium text-slate-300 mb-2' }, 'Platform URL'),
|
||||||
|
React.createElement('input', {
|
||||||
|
type: 'text',
|
||||||
|
value: baseUrl,
|
||||||
|
onChange: (e) => setBaseUrl(e.target.value),
|
||||||
|
className: 'w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded text-white placeholder-slate-400'
|
||||||
|
})
|
||||||
|
),
|
||||||
|
error && React.createElement('div', { className: 'flex gap-2 p-3 bg-red-900/20 border border-red-600 rounded text-red-400 text-sm' },
|
||||||
|
React.createElement('div', { dangerouslySetInnerHTML: { __html: Icons.AlertCircle() }, style: { flexShrink: 0, marginTop: '2px' } }),
|
||||||
|
React.createElement('span', null, error)
|
||||||
|
),
|
||||||
|
React.createElement('button', {
|
||||||
|
type: 'submit',
|
||||||
|
disabled: loading || !apiKey,
|
||||||
|
className: 'w-full py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-slate-600 text-white font-medium rounded transition',
|
||||||
|
style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px' }
|
||||||
|
},
|
||||||
|
loading && React.createElement('div', { dangerouslySetInnerHTML: { __html: Icons.RefreshCw() }, className: 'spinner' }),
|
||||||
|
loading ? 'Connecting...' : 'Connect'
|
||||||
|
)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Main dashboard
|
||||||
|
return React.createElement('div', { className: 'min-h-screen bg-slate-900 text-white p-6' },
|
||||||
|
React.createElement('div', { className: 'max-w-6xl mx-auto' },
|
||||||
|
React.createElement('div', { className: 'flex items-center justify-between mb-8' },
|
||||||
|
React.createElement('div', null,
|
||||||
|
React.createElement('h1', { className: 'text-3xl font-bold mb-2' }, 'Elastic Recorder Control'),
|
||||||
|
React.createElement('p', { className: 'text-slate-400' }, `Manage ${channels.length} recorders`)
|
||||||
|
),
|
||||||
|
React.createElement('button', {
|
||||||
|
onClick: fetchChannels,
|
||||||
|
disabled: loading,
|
||||||
|
className: 'flex items-center gap-2 px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded transition'
|
||||||
|
},
|
||||||
|
React.createElement('div', { dangerouslySetInnerHTML: { __html: Icons.RefreshCw() }, className: loading ? 'spinner' : '' }),
|
||||||
|
'Refresh'
|
||||||
|
)
|
||||||
|
),
|
||||||
|
error && React.createElement('div', { className: 'mb-4 p-4 bg-red-900/20 border border-red-600 rounded flex gap-3' },
|
||||||
|
React.createElement('div', { dangerouslySetInnerHTML: { __html: Icons.AlertCircle() }, style: { flexShrink: 0 } }),
|
||||||
|
React.createElement('div', { className: 'text-red-400' }, error)
|
||||||
|
),
|
||||||
|
success && React.createElement('div', { className: 'mb-4 p-4 bg-green-900/20 border border-green-600 rounded flex gap-3' },
|
||||||
|
React.createElement('div', { dangerouslySetInnerHTML: { __html: Icons.CheckCircle() }, style: { flexShrink: 0 } }),
|
||||||
|
React.createElement('div', { className: 'text-green-400' }, success)
|
||||||
|
),
|
||||||
|
React.createElement('div', { className: 'grid grid-cols-1 lg:grid-cols-2 gap-4' },
|
||||||
|
channels.map((channel) => {
|
||||||
|
const isEditing = editingId === channel['channel:id'];
|
||||||
|
return React.createElement('div', {
|
||||||
|
key: channel['channel:id'],
|
||||||
|
className: 'bg-slate-800 border border-slate-700 rounded-lg p-6 hover:border-slate-600 transition'
|
||||||
|
},
|
||||||
|
React.createElement('div', { className: 'flex items-start justify-between mb-4' },
|
||||||
|
React.createElement('div', null,
|
||||||
|
React.createElement('h2', { className: 'text-lg font-semibold mb-1' }, channel['name:text']),
|
||||||
|
React.createElement('p', { className: 'text-slate-400 text-sm font-mono' }, channel['channel:id'].substring(0, 20) + '...')
|
||||||
|
),
|
||||||
|
channel['elasticRecorder'] && React.createElement('div', { className: 'px-3 py-1 bg-blue-900/30 border border-blue-700 rounded text-xs text-blue-300 font-medium' }, 'Elastic Recorder')
|
||||||
|
),
|
||||||
|
!isEditing ? React.createElement(React.Fragment, null,
|
||||||
|
React.createElement('div', { className: 'space-y-3 mb-4' },
|
||||||
|
React.createElement('div', null,
|
||||||
|
React.createElement('label', { className: 'text-xs font-medium text-slate-400 uppercase' }, 'Recording Store'),
|
||||||
|
React.createElement('p', { className: 'text-white mt-1' }, channel['source:text'] || '—')
|
||||||
|
),
|
||||||
|
React.createElement('div', null,
|
||||||
|
React.createElement('label', { className: 'text-xs font-medium text-slate-400 uppercase' }, 'Framelight Folder'),
|
||||||
|
React.createElement('p', { className: 'text-white mt-1' }, channel['destinationId:int'] || '—')
|
||||||
|
),
|
||||||
|
channel['elasticRecorder'] && React.createElement('div', null,
|
||||||
|
React.createElement('label', { className: 'text-xs font-medium text-slate-400 uppercase' }, 'Workload ID'),
|
||||||
|
React.createElement('p', { className: 'text-white mt-1 font-mono text-sm' }, channel['elasticRecorder']['workloadId:text'].substring(0, 16) + '...')
|
||||||
|
)
|
||||||
|
),
|
||||||
|
React.createElement('button', {
|
||||||
|
onClick: () => startEdit(channel),
|
||||||
|
className: 'w-full flex items-center justify-center gap-2 px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded transition'
|
||||||
|
},
|
||||||
|
React.createElement('div', { dangerouslySetInnerHTML: { __html: Icons.Settings() } }),
|
||||||
|
'Edit Settings'
|
||||||
|
)
|
||||||
|
) : React.createElement(React.Fragment, null,
|
||||||
|
React.createElement('div', { className: 'space-y-3 mb-4' },
|
||||||
|
React.createElement('div', null,
|
||||||
|
React.createElement('label', { className: 'text-xs font-medium text-slate-400 uppercase mb-1 block' }, 'Recording Store'),
|
||||||
|
React.createElement('input', {
|
||||||
|
type: 'text',
|
||||||
|
value: editForm['source:text'],
|
||||||
|
onChange: (e) => setEditForm({...editForm, 'source:text': e.target.value}),
|
||||||
|
placeholder: 'e.g., /archive/store1',
|
||||||
|
className: 'w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded text-white placeholder-slate-400 text-sm'
|
||||||
|
})
|
||||||
|
),
|
||||||
|
React.createElement('div', null,
|
||||||
|
React.createElement('label', { className: 'text-xs font-medium text-slate-400 uppercase mb-1 block' }, 'Framelight Folder ID'),
|
||||||
|
React.createElement('input', {
|
||||||
|
type: 'text',
|
||||||
|
value: editForm['destinationId:int'],
|
||||||
|
onChange: (e) => setEditForm({...editForm, 'destinationId:int': e.target.value}),
|
||||||
|
placeholder: 'Folder ID or path',
|
||||||
|
className: 'w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded text-white placeholder-slate-400 text-sm'
|
||||||
|
})
|
||||||
|
)
|
||||||
|
),
|
||||||
|
React.createElement('div', { className: 'flex gap-2' },
|
||||||
|
React.createElement('button', {
|
||||||
|
onClick: saveChanges,
|
||||||
|
disabled: loading,
|
||||||
|
className: 'flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-slate-600 text-white rounded transition'
|
||||||
|
},
|
||||||
|
React.createElement('div', { dangerouslySetInnerHTML: { __html: Icons.Save() } }),
|
||||||
|
'Save'
|
||||||
|
),
|
||||||
|
React.createElement('button', {
|
||||||
|
onClick: cancelEdit,
|
||||||
|
disabled: loading,
|
||||||
|
className: 'flex-1 px-4 py-2 bg-slate-700 hover:bg-slate-600 disabled:bg-slate-600 text-white rounded transition'
|
||||||
|
}, 'Cancel')
|
||||||
|
)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
})
|
||||||
|
),
|
||||||
|
channels.length === 0 && React.createElement('div', { className: 'text-center py-12 text-slate-400' },
|
||||||
|
React.createElement('p', null, 'No channels found. Try refreshing or check your connection.')
|
||||||
|
)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||||
|
root.render(React.createElement(ElasticRecorderDashboard));
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in a new issue