Skip to content

Add dark light mode button and missing dark classes #61

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TristanCacqueray merged 1 commit into from
Nov 13, 2025
Merged

Add dark light mode button and missing dark classes #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions frontend/RcaComponent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import "./RcaComponent.css";

function Spinner({ last_status }) {
return (
<div className="flex p-1 place-items-center gap-2 w-full">
<div className="flex p-1 place-items-center gap-2 w-full dark:text-gray-100">
<div className="w-4 h-4 border-4 border-blue-500 border-dashed rounded-full animate-spin">
</div>
{last_status}
Expand All @@ -16,12 +16,12 @@ function Spinner({ last_status }) {
function Evidence({ error, source, log_url, logjuicer_url, source_map }) {
return (
<div>
<div className="bg-slate-100">
<div className="bg-slate-100 dark:bg-gray-700 p-1">
<a
href={log_url + "/" + source}
target="_blank"
rel="noopener noreferrer"
className="cursor-pointer hover:underline"
className="cursor-pointer hover:underline text-blue-600 dark:text-blue-400"
>
{source}
</a>
Expand All @@ -34,7 +34,7 @@ function Evidence({ error, source, log_url, logjuicer_url, source_map }) {
logjuicer
</a>
</div>
<pre className="pl-2 font-mono break-all whitespace-pre-wrap">{error}</pre>
<pre className="pl-2 font-mono break-all whitespace-pre-wrap dark:text-gray-300 bg-slate-50 dark:bg-gray-800 p-2">{error}</pre>
</div>
);
}
Expand Down Expand Up @@ -203,7 +203,7 @@ export function RcaComponent(
{report && (
<div className="w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-md p-6">
<div className="flex flex-wrap justify-between items-center border-b border-gray-200 dark:border-gray-700 pb-2 mb-4 gap-2">
<h2 className="text-xl font-semibold">
<h2 className="text-xl font-semibold dark:text-gray-100">
Analysis Result
</h2>
{usage && (
Expand Down Expand Up @@ -265,7 +265,7 @@ export function RcaComponent(
rootCauseIndex,
) => (
<div key={rootCauseIndex} className="mb-6">
<h3 className="font-semibold">
<h3 className="font-semibold dark:text-gray-100">
Possible Root Cause {rootCauseIndex + 1}
</h3>
<div className="prose dark:prose-invert max-w-none">
Expand All @@ -283,7 +283,7 @@ export function RcaComponent(
{rootCause.cause}
</ReactMarkdown>
</div>
<h3 className="font-semibold pt-2">Evidences</h3>
<h3 className="font-semibold pt-2 dark:text-gray-100">Evidences</h3>
<ul className="list-none p-0 m-0 font-mono text-sm space-y-2">
{rootCause.evidences.map((evidence, index) => (
<li key={index} className="pt-1 break-words">
Expand All @@ -303,7 +303,7 @@ export function RcaComponent(
)}
{report.jira_tickets && report.jira_tickets.length > 0 && (
<>
<h3 className="font-semibold pt-4">Related JIRA Tickets</h3>
<h3 className="font-semibold pt-4 dark:text-gray-100">Related JIRA Tickets</h3>
<ul className="list-none p-0 m-0 space-y-2">
{report.jira_tickets.map((ticket, index) => (
<li key={index} className="pt-1">
Expand Down Expand Up @@ -338,7 +338,7 @@ export function RcaComponent(
{(jobInfo || playbooks.length > 0) && (
<div className="w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-md p-6">
<div className="flex flex-wrap justify-between items-center border-b border-gray-200 dark:border-gray-700 pb-2 mb-4 gap-2">
<h2 className="text-xl font-semibold">
<h2 className="text-xl font-semibold dark:text-gray-100">
Job Information
</h2>
</div>
Expand All @@ -361,20 +361,20 @@ export function RcaComponent(
)}
{playbooks.length > 0 && (
<>
<h3 className="font-semibold">Playbooks</h3>
<h3 className="font-semibold dark:text-gray-100">Playbooks</h3>
<ul className="list-disc p-0 m-0 font-mono text-sm space-y-2 mb-3">
{playbooks.map((play, index) => (
<li key={index} className="pt-1 break-words">{play}</li>
<li key={index} className="pt-1 break-words dark:text-gray-300">{play}</li>
))}
</ul>
</>
)}
{jobInfo && jobInfo.actions && (
<>
<h3 className="font-semibold">Actions</h3>
<h3 className="font-semibold dark:text-gray-100">Actions</h3>
<ul className="list-decimal p-0 ml-3 font-mono text-sm space-y-2">
{jobInfo.actions.map((action, index) => (
<li key={index} className="pt-1 break-words">{action}</li>
<li key={index} className="pt-1 break-words dark:text-gray-300">{action}</li>
))}
</ul>
</>
Expand All @@ -384,15 +384,15 @@ export function RcaComponent(
{status.length > 0 && (
<div className="w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-md p-6">
<div className="flex">
<h2 className="text-xl font-semibold border-b border-gray-200 dark:border-gray-700 pb-2 mb-4 grow">
<h2 className="text-xl font-semibold border-b border-gray-200 dark:border-gray-700 pb-2 mb-4 grow dark:text-gray-100">
Analysis Status
</h2>
<a className="cursor-pointer" onClick={toggleStatus}>Expand</a>
<a className="cursor-pointer text-blue-600 dark:text-blue-400 hover:underline" onClick={toggleStatus}>Expand</a>
</div>
{showStatus && (
<ul className="list-none p-0 m-0 font-mono text-sm space-y-2">
{status.map((msg, index) => (
<li key={index} className="pt-1 break-words">{msg}</li>
<li key={index} className="pt-1 break-words dark:text-gray-300">{msg}</li>
))}
</ul>
)}
Expand Down
41 changes: 41 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,12 @@ <h1 style="font-size: 36px; color: oklch(0.546 0.245 262.881); font-weight: 700"
Fast and accurate root cause analysis of Zuul CI Build failures.
</p>
<br />
<div class="flex justify-center mb-4">
<button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
<svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
<svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.071 14.929a1 1 0 00-1.414 1.414l.707.707a1 1 0 001.414-1.414l-.707-.707zm1.414-10.607a1 1 0 010 1.414L4.343 10.5a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM3 11a1 1 0 100-2H2a1 1 0 000 2h1z"></path></svg>
</button>
</div>
</center>
<div id="root"></div>
</div>
Expand All @@ -33,6 +39,41 @@ <h1 style="font-size: 36px; color: oklch(0.546 0.245 262.881); font-weight: 700"
createRoot(document.getElementById("root")).render(
createElement(RcaComponent, {build, workflow}, null)
);

const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
const themeToggleBtn = document.getElementById('theme-toggle');

if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
themeToggleLightIcon.classList.remove('hidden');
} else {
document.documentElement.classList.remove('dark');
themeToggleDarkIcon.classList.remove('hidden');
}

themeToggleBtn.addEventListener('click', function() {
themeToggleDarkIcon.classList.toggle('hidden');
themeToggleLightIcon.classList.toggle('hidden');

if (localStorage.getItem('color-theme')) {
if (localStorage.getItem('color-theme') === 'light') {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
} else {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
}
} else {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
}
}
});
</script>
</body>
</html>