Fix Uptime Kuma integration and add interactive UI
Some checks failed
Build and Push Container / build (push) Has been cancelled

- Switch to uptime-kuma-api library (Socket.io based)
- Add Approve & Run buttons for Claude's additional commands
- Add answer input fields for Claude's questions
- Add push monitor type support

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Debian
2026-01-05 03:16:19 +00:00
parent 75f8ead736
commit a034842cd3
4 changed files with 160 additions and 92 deletions

View File

@@ -134,6 +134,13 @@ export default function Dashboard({ scanProgress, scanResults, analysisResults,
scan={currentScan}
analysis={currentAnalysis}
devMode={devMode}
onCommandApproved={async (command) => {
await api.runCommand(currentScanId, command, 'User approved from UI');
}}
onQuestionAnswered={async (question, answer) => {
// TODO: Implement question answering API
console.log('Question answered:', question, answer);
}}
/>
)}
</div>

View File

@@ -1,11 +1,34 @@
import { useState } from 'react';
import { api } from '../api/client';
export default function DiscoveryResults({ scanId, scan, analysis, devMode }) {
export default function DiscoveryResults({ scanId, scan, analysis, devMode, onCommandApproved, onQuestionAnswered }) {
const [selectedMonitors, setSelectedMonitors] = useState([]);
const [creatingDefaults, setCreatingDefaults] = useState(false);
const [creatingSuggested, setCreatingSuggested] = useState(false);
const [createResults, setCreateResults] = useState(null);
const [runningCommands, setRunningCommands] = useState({});
const [questionAnswers, setQuestionAnswers] = useState({});
const handleRunCommand = async (command, index) => {
setRunningCommands(prev => ({ ...prev, [index]: true }));
try {
if (onCommandApproved) {
await onCommandApproved(command);
}
} finally {
setRunningCommands(prev => ({ ...prev, [index]: false }));
}
};
const handleAnswerQuestion = async (question, index) => {
const answer = questionAnswers[index];
if (!answer || !answer.trim()) return;
if (onQuestionAnswered) {
await onQuestionAnswered(question, answer);
}
setQuestionAnswers(prev => ({ ...prev, [index]: '' }));
};
const handleCreateDefaults = async () => {
setCreatingDefaults(true);
@@ -210,10 +233,21 @@ export default function DiscoveryResults({ scanId, scan, analysis, devMode }) {
<div className="space-y-2">
{analysis.additional_commands.map((cmd, index) => (
<div key={index} className="p-3 bg-slate-700/50 rounded">
<code className="text-sm text-green-400 font-mono block mb-1">
{cmd.command}
</code>
<p className="text-xs text-slate-400">{cmd.reason}</p>
<div className="flex items-start justify-between gap-3">
<div className="flex-1">
<code className="text-sm text-green-400 font-mono block mb-1">
{cmd.command}
</code>
<p className="text-xs text-slate-400">{cmd.reason}</p>
</div>
<button
onClick={() => handleRunCommand(cmd.command, index)}
disabled={runningCommands[index]}
className="px-3 py-1 text-sm bg-amber-600 hover:bg-amber-500 disabled:bg-slate-600 text-white rounded transition-colors whitespace-nowrap"
>
{runningCommands[index] ? 'Running...' : 'Approve & Run'}
</button>
</div>
</div>
))}
</div>
@@ -224,14 +258,33 @@ export default function DiscoveryResults({ scanId, scan, analysis, devMode }) {
{analysis.questions && analysis.questions.length > 0 && (
<div>
<h4 className="font-medium mb-3">Questions from Claude</h4>
<ul className="space-y-2">
<div className="space-y-3">
{analysis.questions.map((question, index) => (
<li key={index} className="text-sm text-slate-300 flex items-start gap-2">
<span className="text-purple-400">?</span>
{question}
</li>
<div key={index} className="p-3 bg-slate-700/50 rounded">
<p className="text-sm text-slate-300 mb-2 flex items-start gap-2">
<span className="text-purple-400">?</span>
{question}
</p>
<div className="flex gap-2">
<input
type="text"
value={questionAnswers[index] || ''}
onChange={(e) => setQuestionAnswers(prev => ({ ...prev, [index]: e.target.value }))}
placeholder="Type your answer..."
className="flex-1 px-3 py-1 text-sm bg-slate-800 border border-slate-600 rounded focus:outline-none focus:border-purple-500"
onKeyDown={(e) => e.key === 'Enter' && handleAnswerQuestion(question, index)}
/>
<button
onClick={() => handleAnswerQuestion(question, index)}
disabled={!questionAnswers[index]?.trim()}
className="px-3 py-1 text-sm bg-purple-600 hover:bg-purple-500 disabled:bg-slate-600 text-white rounded transition-colors"
>
Answer
</button>
</div>
</div>
))}
</ul>
</div>
</div>
)}
</div>