Fix Uptime Kuma integration and add interactive UI
Some checks failed
Build and Push Container / build (push) Has been cancelled
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:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user