Add getting started tutorials for DashCaddy
Tutorials covering: - Getting Started (setup wizard, timezone, deployment modes) - Theme Customization (theme builder, presets, color customization) - Viewing Logs (log viewer, live streaming, filtering) - Quick Search (keyboard shortcuts, navigation) - Backup & Restore (manual/automated backup, restore workflow) - Stats Monitoring (resource monitor, live stats, alerts) Also includes: - Self-contained HTML getting started guide - 30+ screenshots capturing UI workflows - Issues/notes documenting test instance observations Workflows documented: - Light theme screenshots - Dark theme screenshots (partial - theme builder) - App selector (noted as empty in test instance) - Theme builder modal - Logs viewer - Quick search - Backup modal - Stats monitoring Total: 6 tutorial files, 30+ screenshots, 1 HTML guide
This commit is contained in:
Krystie
385
public/tutorials/dashcaddy-getting-started.html
Normal file
385
public/tutorials/dashcaddy-getting-started.html
Normal file
@@ -0,0 +1,385 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>DashCaddy Getting Started Guide</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #1a1a2e;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.8rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #1a1a2e;
|
||||
border-bottom: 2px solid #ddd;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.3rem;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.intro {
|
||||
font-size: 1.1rem;
|
||||
color: #666;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.toc {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.toc h2 {
|
||||
margin-top: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.toc ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.toc li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.toc a {
|
||||
color: #0066cc;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.toc a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
margin-top: 0;
|
||||
color: #0066cc;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.feature-link {
|
||||
display: inline-block;
|
||||
margin-top: 0.5rem;
|
||||
color: #0066cc;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.feature-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin-left: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
code {
|
||||
background: #f0f0f0;
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-family: 'Monaco', 'Consolas', monospace;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
kbd {
|
||||
background: #e0e0e0;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 3px;
|
||||
font-family: 'Monaco', 'Consolas', monospace;
|
||||
font-size: 0.85rem;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
th {
|
||||
background: #f5f5f5;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid #0066cc;
|
||||
padding-left: 1rem;
|
||||
margin: 1rem 0;
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.shortcut-table td:first-child {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 3rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid #ddd;
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>DashCaddy Getting Started Guide</h1>
|
||||
<p class="intro">A practical guide to getting started with DashCaddy — the self-hosted app dashboard.</p>
|
||||
|
||||
<div class="toc">
|
||||
<h2>Table of Contents</h2>
|
||||
<ul>
|
||||
<li><a href="#getting-started">Getting Started</a> — First-time setup and configuration</li>
|
||||
<li><a href="#theme-customization">Theme Customization</a> — Customize the dashboard appearance</li>
|
||||
<li><a href="#viewing-logs">Viewing Logs</a> — Monitor service logs in real-time</li>
|
||||
<li><a href="#quick-search">Quick Search</a> — Fast access to services and settings</li>
|
||||
<li><a href="#backup-restore">Backup & Restore</a> — Protect your configuration</li>
|
||||
<li><a href="#monitoring">Monitoring Resources</a> — Track CPU, memory, and disk usage</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 id="getting-started">Getting Started</h2>
|
||||
<div class="feature-card">
|
||||
<h3>First-Time Setup</h3>
|
||||
<p>Learn how to log in, configure your timezone, and choose a deployment mode.</p>
|
||||
<p><strong>What you'll learn:</strong></p>
|
||||
<ul>
|
||||
<li>How to log in with TOTP authentication</li>
|
||||
<li>How to select your timezone</li>
|
||||
<li>How to choose a deployment mode (Simple, Home Lab, Public, Custom)</li>
|
||||
<li>How to complete or skip the initial setup wizard</li>
|
||||
</ul>
|
||||
<a class="feature-link" href="tutorials/01-getting-started.html">Read full tutorial →</a>
|
||||
</div>
|
||||
|
||||
<h2 id="theme-customization">Theme Customization</h2>
|
||||
<div class="feature-card">
|
||||
<h3>Customize the Dashboard</h3>
|
||||
<p>Make DashCaddy your own with custom themes and colors.</p>
|
||||
<p><strong>What you'll learn:</strong></p>
|
||||
<ul>
|
||||
<li>How to open the Theme Builder</li>
|
||||
<li>How to use preset themes (Dark, Light, Nord, Dracula, etc.)</li>
|
||||
<li>How to customize colors for backgrounds, text, accents, and status indicators</li>
|
||||
<li>How to save, import, and export themes</li>
|
||||
</ul>
|
||||
<a class="feature-link" href="tutorials/02-theme-customization.html">Read full tutorial →</a>
|
||||
</div>
|
||||
|
||||
<h2 id="viewing-logs">Viewing Logs</h2>
|
||||
<div class="feature-card">
|
||||
<h3>Monitor Service Logs</h3>
|
||||
<p>Monitor your services with real-time log streaming.</p>
|
||||
<p><strong>What you'll learn:</strong></p>
|
||||
<ul>
|
||||
<li>How to access the logs viewer</li>
|
||||
<li>How to navigate and filter log entries</li>
|
||||
<li>How to use live log streaming</li>
|
||||
<li>How to control the number of displayed log lines</li>
|
||||
</ul>
|
||||
<a class="feature-link" href="tutorials/03-viewing-logs.html">Read full tutorial →</a>
|
||||
</div>
|
||||
|
||||
<h2 id="quick-search">Quick Search</h2>
|
||||
<div class="feature-card">
|
||||
<h3>Fast Access to Everything</h3>
|
||||
<p>Find services and settings instantly.</p>
|
||||
<p><strong>What you'll learn:</strong></p>
|
||||
<ul>
|
||||
<li>How to open Quick Search (<kbd>Ctrl+K</kbd> / <kbd>Cmd+K</kbd>)</li>
|
||||
<li>How to search for services and settings</li>
|
||||
<li>How to navigate and select results with keyboard shortcuts</li>
|
||||
</ul>
|
||||
<a class="feature-link" href="tutorials/04-quick-search.html">Read full tutorial →</a>
|
||||
</div>
|
||||
|
||||
<h2 id="backup-restore">Backup & Restore</h2>
|
||||
<div class="feature-card">
|
||||
<h3>Protect Your Configuration</h3>
|
||||
<p>Create full backups of your entire DashCaddy setup.</p>
|
||||
<p><strong>What you'll learn:</strong></p>
|
||||
<ul>
|
||||
<li>How to create a manual backup</li>
|
||||
<li>What's included in a full backup (services, credentials, themes)</li>
|
||||
<li>How to restore from a backup file</li>
|
||||
<li>How to set up automated backups</li>
|
||||
<li>How to view backup history</li>
|
||||
</ul>
|
||||
<a class="feature-link" href="tutorials/05-backup-restore.html">Read full tutorial →</a>
|
||||
</div>
|
||||
|
||||
<h2 id="monitoring">Monitoring Resources</h2>
|
||||
<div class="feature-card">
|
||||
<h3>Track System Performance</h3>
|
||||
<p>Monitor CPU, memory, network, and disk usage in real-time.</p>
|
||||
<p><strong>What you'll learn:</strong></p>
|
||||
<ul>
|
||||
<li>How to access the Resource Monitor</li>
|
||||
<li>How to interpret live stats and historical summaries</li>
|
||||
<li>How to set up alerts for resource thresholds</li>
|
||||
<li>Understanding CPU, memory, network, and disk metrics</li>
|
||||
</ul>
|
||||
<a class="feature-link" href="tutorials/06-stats-monitoring.html">Read full tutorial →</a>
|
||||
</div>
|
||||
|
||||
<h2>Keyboard Shortcuts</h2>
|
||||
<table class="shortcut-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Shortcut</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><kbd>Ctrl+K</kbd> / <kbd>Cmd+K</kbd></td>
|
||||
<td>Open Quick Search</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>↑</kbd> / <kbd>↓</kbd></td>
|
||||
<td>Navigate in Quick Search</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Enter</kbd></td>
|
||||
<td>Select in Quick Search</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>ESC</kbd></td>
|
||||
<td>Close modal / Cancel</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Common Tasks</h2>
|
||||
|
||||
<h3>Adding Your First App</h3>
|
||||
<blockquote>
|
||||
<strong>Note:</strong> App deployment requires the app catalog to be configured with your DashCaddy instance.
|
||||
</blockquote>
|
||||
<ol>
|
||||
<li>Navigate to <strong>TOOLS</strong> → <strong>App Selector</strong></li>
|
||||
<li>Browse available apps or use Quick Search</li>
|
||||
<li>Select an app template</li>
|
||||
<li>Configure the app settings (URL, subdomain, credentials)</li>
|
||||
<li>Deploy and verify</li>
|
||||
</ol>
|
||||
|
||||
<h3>Checking Service Health</h3>
|
||||
<ol>
|
||||
<li>Navigate to <strong>STATUS</strong> → <strong>Health Status</strong></li>
|
||||
<li>View the health overview for all services</li>
|
||||
<li>Check individual service status cards</li>
|
||||
<li>Review any active incidents</li>
|
||||
</ol>
|
||||
|
||||
<h3>Updating Services</h3>
|
||||
<ol>
|
||||
<li>Navigate to <strong>ADMIN</strong> → <strong>Updates</strong></li>
|
||||
<li>View available updates</li>
|
||||
<li>Review changelogs and release notes</li>
|
||||
<li>Apply updates to individual services or all at once</li>
|
||||
</ol>
|
||||
|
||||
<h2>Troubleshooting</h2>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Issue</th>
|
||||
<th>Solution</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Can't log in with TOTP</td>
|
||||
<td>Ensure your device clock is synchronized (TOTP is time-based). Try regenerating the code — they expire every 30 seconds.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dashboard shows no services</td>
|
||||
<td>Services need to be added via the App Selector. Check that Docker is running on your server.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Logs show "Loading..."</td>
|
||||
<td>The service may not have generated any logs yet. Check that the service is actually running.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Theme changes not saving</td>
|
||||
<td>Click "Save Theme" before closing the Theme Builder. Try a different browser if issues persist.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Next Steps</h2>
|
||||
<ul>
|
||||
<li>Complete the initial setup wizard</li>
|
||||
<li>Add your first service via App Selector</li>
|
||||
<li>Customize the theme to your liking</li>
|
||||
<li>Set up automated backups</li>
|
||||
<li>Explore the Admin section for advanced settings</li>
|
||||
<li>Join the community for tips and support</li>
|
||||
</ul>
|
||||
|
||||
<footer>
|
||||
<p>This guide was created for DashCaddy version as deployed on test.dashcaddy.net</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
175
public/tutorials/dashcaddy-getting-started.md
Normal file
175
public/tutorials/dashcaddy-getting-started.md
Normal file
@@ -0,0 +1,175 @@
|
||||
# DashCaddy Getting Started Guide
|
||||
|
||||
A practical guide to getting started with DashCaddy — the self-hosted app dashboard.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Getting Started](#getting-started) — First-time setup and configuration
|
||||
2. [Theme Customization](#theme-customization) — Customize the dashboard appearance
|
||||
3. [Viewing Logs](#viewing-logs) — Monitor service logs in real-time
|
||||
4. [Quick Search](#quick-search) — Fast access to services and settings
|
||||
5. [Backup & Restore](#backup--restore) — Protect your configuration
|
||||
6. [Monitoring Resources](#monitoring-resources) — Track CPU, memory, and disk usage
|
||||
|
||||
---
|
||||
|
||||
## Getting Started
|
||||
|
||||
Learn how to log in, configure your timezone, and choose a deployment mode.
|
||||
|
||||
[Read full tutorial](tutorials/01-getting-started.md)
|
||||
|
||||
**What you'll learn:**
|
||||
- How to log in with TOTP authentication
|
||||
- How to select your timezone
|
||||
- How to choose a deployment mode (Simple, Home Lab, Public, Custom)
|
||||
- How to complete or skip the initial setup wizard
|
||||
|
||||
---
|
||||
|
||||
## Theme Customization
|
||||
|
||||
Make DashCaddy your own with custom themes and colors.
|
||||
|
||||
[Read full tutorial](tutorials/02-theme-customization.md)
|
||||
|
||||
**What you'll learn:**
|
||||
- How to open the Theme Builder
|
||||
- How to use preset themes (Dark, Light, Nord, Dracula, etc.)
|
||||
- How to customize colors for backgrounds, text, accents, and status indicators
|
||||
- How to save, import, and export themes
|
||||
|
||||
---
|
||||
|
||||
## Viewing Logs
|
||||
|
||||
Monitor your services with real-time log streaming.
|
||||
|
||||
[Read full tutorial](tutorials/03-viewing-logs.md)
|
||||
|
||||
**What you'll learn:**
|
||||
- How to access the logs viewer
|
||||
- How to navigate and filter log entries
|
||||
- How to use live log streaming
|
||||
- How to control the number of displayed log lines
|
||||
|
||||
---
|
||||
|
||||
## Quick Search
|
||||
|
||||
Find services and settings instantly.
|
||||
|
||||
[Read full tutorial](tutorials/04-quick-search.md)
|
||||
|
||||
**What you'll learn:**
|
||||
- How to open Quick Search (Ctrl+K / Cmd+K)
|
||||
- How to search for services and settings
|
||||
- How to navigate and select results with keyboard shortcuts
|
||||
- Keyboard shortcuts: ESC, ↑↓ Navigate, Enter Select
|
||||
|
||||
---
|
||||
|
||||
## Backup & Restore
|
||||
|
||||
Protect your configuration with full backups.
|
||||
|
||||
[Read full tutorial](tutorials/05-backup-restore.md)
|
||||
|
||||
**What you'll learn:**
|
||||
- How to create a manual backup
|
||||
- What's included in a full backup (services, credentials, themes)
|
||||
- How to restore from a backup file
|
||||
- How to set up automated backups
|
||||
- How to view backup history
|
||||
|
||||
---
|
||||
|
||||
## Monitoring Resources
|
||||
|
||||
Track CPU, memory, network, and disk usage in real-time.
|
||||
|
||||
[Read full tutorial](tutorials/06-stats-monitoring.md)
|
||||
|
||||
**What you'll learn:**
|
||||
- How to access the Resource Monitor
|
||||
- How to interpret live stats and historical summaries
|
||||
- How to set up alerts for resource thresholds
|
||||
- Understanding CPU, memory, network, and disk metrics
|
||||
|
||||
---
|
||||
|
||||
## Common Tasks
|
||||
|
||||
### Adding Your First App
|
||||
|
||||
> **Note:** App deployment requires the app catalog to be configured with your DashCaddy instance.
|
||||
|
||||
1. Navigate to **TOOLS** → **App Selector**
|
||||
2. Browse available apps or use Quick Search
|
||||
3. Select an app template
|
||||
4. Configure the app settings (URL, subdomain, credentials)
|
||||
5. Deploy and verify
|
||||
|
||||
### Checking Service Health
|
||||
|
||||
1. Navigate to **STATUS** → **Health Status**
|
||||
2. View the health overview for all services
|
||||
3. Check individual service status cards
|
||||
4. Review any active incidents
|
||||
|
||||
### Updating Services
|
||||
|
||||
1. Navigate to **ADMIN** → **Updates**
|
||||
2. View available updates
|
||||
3. Review changelogs and release notes
|
||||
4. Apply updates to individual services or all at once
|
||||
|
||||
---
|
||||
|
||||
## Keyboard Shortcuts
|
||||
|
||||
| Shortcut | Action |
|
||||
|----------|--------|
|
||||
| `Ctrl+K` / `Cmd+K` | Open Quick Search |
|
||||
| `↑` / `↓` | Navigate in Quick Search |
|
||||
| `Enter` | Select in Quick Search |
|
||||
| `ESC` | Close modal / Cancel |
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Can't log in with TOTP
|
||||
- Ensure your device clock is synchronized (TOTP is time-based)
|
||||
- Try regenerating the code — they expire every 30 seconds
|
||||
- Contact your administrator if the code is consistently rejected
|
||||
|
||||
### Dashboard shows no services
|
||||
- Services need to be added via the App Selector
|
||||
- Check that Docker is running on your server
|
||||
- Verify network connectivity to your services
|
||||
|
||||
### Logs show "Loading..."
|
||||
- The service may not have generated any logs yet
|
||||
- Check that the service is actually running
|
||||
- Verify the logging system is configured correctly
|
||||
|
||||
### Theme changes not saving
|
||||
- Click "Save Theme" before closing the Theme Builder
|
||||
- Check browser console for JavaScript errors
|
||||
- Try a different browser if issues persist
|
||||
|
||||
---
|
||||
|
||||
## Next Steps
|
||||
|
||||
- [ ] Complete the initial setup wizard
|
||||
- [ ] Add your first service via App Selector
|
||||
- [ ] Customize the theme to your liking
|
||||
- [ ] Set up automated backups
|
||||
- [ ] Explore the Admin section for advanced settings
|
||||
- [ ] Join the community for tips and support
|
||||
|
||||
---
|
||||
|
||||
*This guide was created for DashCaddy version as deployed on test.dashcaddy.net*
|
||||
69
public/tutorials/issues.md
Normal file
69
public/tutorials/issues.md
Normal file
@@ -0,0 +1,69 @@
|
||||
# Issues and Notes
|
||||
|
||||
## Test Instance Observations
|
||||
|
||||
### App Selector Empty
|
||||
The App Selector modal opens but shows no apps in the grid. The "Choose an App" message appears with just a Cancel button. This could mean:
|
||||
- The test instance doesn't have app templates loaded
|
||||
- The app catalog API isn't responding
|
||||
- The apps need to be fetched from a backend that's not configured
|
||||
|
||||
**Impact:** Could not complete "Deploy Your First App" workflow
|
||||
|
||||
**Workaround:** App selector needs backend/app catalog to be configured
|
||||
|
||||
### Menu Navigation Issues
|
||||
The TOOLS, STATUS, and ADMIN sections in the dashboard have expandable menus. Clicking on section headers (like "TOOLS") didn't expand the menu via standard click methods in headless Chrome.
|
||||
|
||||
**Impact:** Could not navigate to some features through normal menu interaction
|
||||
|
||||
**Workaround:** Used JavaScript to directly show modals by manipulating CSS display property
|
||||
|
||||
### Theme Switching Not Working Properly
|
||||
The "🎨 Light" button in the top bar appears to be a display of current theme rather than a toggle. Clicking it doesn't switch themes.
|
||||
|
||||
**Impact:** Theme workflow only partially captured - theme builder modal opens but theme switching via the quick button doesn't work
|
||||
|
||||
**Workaround:** Use Theme Builder modal to change themes
|
||||
|
||||
### Logs/Services Show "Loading..."
|
||||
Some services show "Loading logs..." or "Loading container stats..." which suggests the backend APIs aren't returning data in the test instance.
|
||||
|
||||
**Impact:** Could see the UI for these features but not actual data
|
||||
|
||||
**Workaround:** Document UI even when no data is present
|
||||
|
||||
## Technical Observations
|
||||
|
||||
### Puppeteer/Chromium Issues
|
||||
- Background Chromium processes were being killed by SIGKILL
|
||||
- Some clickable elements weren't being recognized as clickable by puppeteer
|
||||
- Had to use JavaScript clicks (`element.click()` via `page.evaluate()`) for some interactions
|
||||
|
||||
### Session Management
|
||||
- TOTP codes expire every 30 seconds
|
||||
- Had to generate fresh TOTP for each session
|
||||
- Used `process.exit(0)` to avoid graceful cleanup issues that triggered process kills
|
||||
|
||||
## Screenshots Captured
|
||||
|
||||
### Workflows Documented:
|
||||
1. **Getting Started** - Setup wizard, timezone, deployment mode (partial)
|
||||
2. **Theme Customization** - Theme builder modal, presets (partial)
|
||||
3. **Viewing Logs** - Complete workflow
|
||||
4. **Quick Search** - Complete workflow
|
||||
5. **Backup & Restore** - Complete workflow (UI)
|
||||
6. **Stats Monitoring** - Complete workflow (UI)
|
||||
|
||||
### Workflows Not Fully Documented:
|
||||
1. **Deploy First App** - App selector empty, couldn't complete
|
||||
2. **Dark Theme Toggle** - Theme builder works but quick toggle doesn't
|
||||
3. **Service Status Cards** - Not deeply explored
|
||||
4. **Smart Arr Setup** - Not explored
|
||||
|
||||
## Recommendations
|
||||
|
||||
1. App Selector needs app catalog/backend to show templates
|
||||
2. Menu expansion should be tested with real user interaction
|
||||
3. Test instance should have some sample services running to show actual data in logs/stats
|
||||
4. Consider adding a "demo mode" with fake data for tutorial purposes
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
BIN
public/tutorials/screenshots/06-test-home.png
Normal file
BIN
public/tutorials/screenshots/06-test-home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
BIN
public/tutorials/screenshots/dashboard-main.png
Normal file
BIN
public/tutorials/screenshots/dashboard-main.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
BIN
public/tutorials/screenshots/dashboard.png
Normal file
BIN
public/tutorials/screenshots/dashboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
BIN
public/tutorials/screenshots/error-state.png
Normal file
BIN
public/tutorials/screenshots/error-state.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
BIN
public/tutorials/screenshots/test-home.png
Normal file
BIN
public/tutorials/screenshots/test-home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
90
src/tutorials/01-getting-started.md
Normal file
90
src/tutorials/01-getting-started.md
Normal file
@@ -0,0 +1,90 @@
|
||||
# Getting Started with DashCaddy
|
||||
|
||||
This tutorial walks you through the initial setup of DashCaddy — logging in, configuring your timezone, and choosing a deployment mode. By the end, you'll have your dashboard ready to use.
|
||||
|
||||
**Prerequisites:** Access to a DashCaddy instance with TOTP credentials.
|
||||
|
||||
---
|
||||
|
||||
## Step 1: Access the Dashboard
|
||||
|
||||
Navigate to your DashCaddy instance URL (e.g., `https://test.dashcaddy.net/`). You'll be greeted with a TOTP authentication overlay asking for a 6-digit code.
|
||||
|
||||
**What you should see:**
|
||||
- A centered 6-digit input field
|
||||
- The DashCaddy logo above the input
|
||||
- An empty error message area below
|
||||
|
||||
Generate your TOTP code using your authenticator app (the secret was provided during account setup) and enter the 6 digits. The inputs auto-advance as you type each digit.
|
||||
|
||||
**Troubleshooting:**
|
||||
- If you see "Invalid code" error, check that your device clock is synchronized (TOTP is time-based)
|
||||
- If the input doesn't accept digits, refresh the page and try again
|
||||
|
||||
---
|
||||
|
||||
## Step 2: Select Your Timezone
|
||||
|
||||
After successful login, the Setup Wizard appears. The first step asks for your timezone.
|
||||
|
||||
**What you should see:**
|
||||
- Welcome message: "Welcome to DashCaddy! 🎉"
|
||||
- "Let's set up your self-hosted app dashboard. This will only take a few minutes."
|
||||
- "Your Timezone" dropdown with a long list of timezones
|
||||
|
||||
Scroll or search for your timezone in the dropdown (e.g., "America/Los_Angeles" for Pacific time). Click to select it.
|
||||
|
||||
Screenshot: `screenshots/01-getting-started/light/02-timezone-selected.png`
|
||||
|
||||
---
|
||||
|
||||
## Step 3: Choose Deployment Mode
|
||||
|
||||
After setting your timezone, click **Continue →** to proceed to the deployment mode selection.
|
||||
|
||||
**What you should see:**
|
||||
- "Professional Home Lab Setup" (default selection)
|
||||
- Options for:
|
||||
- **🚀 Simple** — Access apps via IP:Port only. No DNS or SSL setup needed.
|
||||
- **🏠 Professional Home Lab** — Custom TLD + Private DNS + Internal CA. Full HTTPS with your own certificate authority.
|
||||
- **🌍 Public Server** — Real domain + Public DNS + Let's Encrypt. Internet-accessible with trusted SSL.
|
||||
- **⚙️ Custom** — I'll configure everything myself. Full control over every setting.
|
||||
|
||||
Screenshot: `screenshots/01-getting-started/light/03-deployment-mode-selection.png`
|
||||
|
||||
Choose the mode that matches your setup:
|
||||
- For home lab use without a domain: **Simple**
|
||||
- For a home lab with custom domain (e.g., `.home`): **Professional Home Lab**
|
||||
- For a public server with real domain: **Public Server**
|
||||
- For maximum control: **Custom**
|
||||
|
||||
Click **Continue →** to proceed or **← Back** to return to the previous step.
|
||||
|
||||
---
|
||||
|
||||
## Step 4: Complete or Skip Setup
|
||||
|
||||
Depending on your chosen mode, you may see additional configuration screens. You can:
|
||||
|
||||
- Fill in the requested information and click **Continue →**
|
||||
- Or click **Skip Setup** to postpone configuration and access the dashboard immediately
|
||||
|
||||
**What you should see:**
|
||||
After completing or skipping setup, you'll see the main dashboard with:
|
||||
- Weather widget at top left
|
||||
- Clock showing current time
|
||||
- Status cards in the main area
|
||||
- Navigation sections: STATUS, TOOLS, ADMIN
|
||||
|
||||
Screenshot: `screenshots/01-getting-started/light/01-initial-dashboard.png`
|
||||
|
||||
---
|
||||
|
||||
## Common Issues
|
||||
|
||||
| Issue | Solution |
|
||||
|-------|----------|
|
||||
| TOTP code rejected | Ensure your device time is correct; try regenerating the code |
|
||||
| Setup wizard shows no apps | The wizard is for initial configuration; apps are added via TOOLS → App Selector |
|
||||
| Timezone not saving | The timezone should auto-save; refresh and check if it persisted |
|
||||
| "Continue" button not clickable | Try scrolling down — the button may be below the viewport |
|
||||
118
src/tutorials/02-theme-customization.md
Normal file
118
src/tutorials/02-theme-customization.md
Normal file
@@ -0,0 +1,118 @@
|
||||
# Customizing the Dashboard Theme
|
||||
|
||||
DashCaddy includes a powerful theme builder that lets you customize colors, accents, and visual elements. This tutorial shows how to access and use the theme builder.
|
||||
|
||||
**Prerequisites:** Logged into DashCaddy dashboard.
|
||||
|
||||
---
|
||||
|
||||
## Step 1: Open the Theme Builder
|
||||
|
||||
Locate the theme button in the top bar of the dashboard. It's represented by a 🎨 icon with the text "Light" (showing your current theme).
|
||||
|
||||
**What you should see:**
|
||||
- Top bar with: Weather widget, Clock, Settings gear, Theme toggle (🎨 Light), License badge
|
||||
|
||||
Click the **🎨 Light** button (or click **Customize** text if visible) to open the Theme Builder modal.
|
||||
|
||||
Screenshot: `screenshots/03-theme-customization/light/01-light-theme-dashboard.png`
|
||||
|
||||
---
|
||||
|
||||
## Step 2: Explore the Theme Builder
|
||||
|
||||
The Theme Builder modal opens with several sections:
|
||||
|
||||
**Header:**
|
||||
- Theme Builder title
|
||||
- Edit dropdown (currently editing "New Theme")
|
||||
- Delete button
|
||||
- Name field for your theme
|
||||
|
||||
**Start From Presets:**
|
||||
A list of built-in theme presets you can start from:
|
||||
- **Dark** — Dark background with light text
|
||||
- **Light** — Light background
|
||||
- **Blue** — Blue-tinted theme
|
||||
- **Black** — Pure black background
|
||||
- **Nord** — Nord color palette
|
||||
- **Dracula** — Dracula color scheme
|
||||
- **Solarized Dark** / **Solarized Light** — Solarized themes
|
||||
- **Taxi** — Yellow-tinted theme
|
||||
- **Ocean** — Ocean blue theme
|
||||
|
||||
**Preview Area:**
|
||||
A sample card showing how your theme looks, including:
|
||||
- Secondary text preview
|
||||
- Accent Button preview
|
||||
- Status indicators (Online/Offline)
|
||||
|
||||
Screenshot: `screenshots/03-theme-customization/light/04-theme-builder-open.png`
|
||||
|
||||
---
|
||||
|
||||
## Step 3: Select a Base Theme
|
||||
|
||||
Click on one of the preset themes (e.g., "Dark") to start from that base. The preview will update to show how the selected preset looks.
|
||||
|
||||
**What you should see:**
|
||||
The preview card updates to reflect the selected preset's colors. The "Start from" selection highlights your choice.
|
||||
|
||||
Screenshot: `screenshots/03-theme-customization/dark/05-dark-preset-selected.png`
|
||||
|
||||
---
|
||||
|
||||
## Step 4: Customize Colors (Optional)
|
||||
|
||||
Below the presets, you'll find granular color controls organized into sections:
|
||||
|
||||
**Base Colors:**
|
||||
- Background — Main background color
|
||||
- Card — Card/panel background color
|
||||
- Text — Primary text color
|
||||
- Muted Text — Secondary/hint text color
|
||||
- Border — Border and divider color
|
||||
|
||||
**Accent Colors:**
|
||||
- Accent — Primary accent color (buttons, links, highlights)
|
||||
- Accent Strong — Deeper accent for emphasis
|
||||
|
||||
**Status Colors:**
|
||||
- OK Background — Background for success/OK indicators
|
||||
- OK Text — Text color for success states
|
||||
- Error Bg — Background for error indicators
|
||||
- Error Text — Text color for error states
|
||||
|
||||
Each color field is editable — click on a color swatch or enter a hex value to customize.
|
||||
|
||||
---
|
||||
|
||||
## Step 5: Save Your Theme
|
||||
|
||||
When you're satisfied with your customizations:
|
||||
|
||||
1. Click **Save Theme** at the bottom of the modal
|
||||
2. The theme will be applied to your dashboard immediately
|
||||
3. Click **Cancel** to discard changes, or **✕** to close the modal
|
||||
|
||||
Screenshot: `screenshots/03-theme-customization/dark/02-dark-theme-dashboard.png`
|
||||
|
||||
---
|
||||
|
||||
## Importing and Exporting Themes
|
||||
|
||||
The Theme Builder supports theme import/export for backup or sharing:
|
||||
|
||||
- **Import** — Load a previously exported theme file (.json)
|
||||
- **Export** — Download your current theme as a file for backup or sharing
|
||||
|
||||
---
|
||||
|
||||
## Common Issues
|
||||
|
||||
| Issue | Solution |
|
||||
|-------|----------|
|
||||
| Theme builder button not visible | Scroll to top of dashboard — the button is in the top bar |
|
||||
| Colors not updating in preview | Click directly on a color swatch to edit it |
|
||||
| Theme not saving | Ensure you click "Save Theme" before closing the modal |
|
||||
| Preset click not working | Try clicking directly on the preset name text |
|
||||
88
src/tutorials/03-viewing-logs.md
Normal file
88
src/tutorials/03-viewing-logs.md
Normal file
@@ -0,0 +1,88 @@
|
||||
# Viewing Service Logs
|
||||
|
||||
DashCaddy provides a centralized log viewer that lets you monitor logs from your services in real-time. This tutorial shows how to access and use the logs viewer.
|
||||
|
||||
**Prerequisites:** Logged into DashCaddy dashboard with running services.
|
||||
|
||||
---
|
||||
|
||||
## Step 1: Access the Logs Viewer
|
||||
|
||||
The Logs viewer is found in the TOOLS section of the dashboard.
|
||||
|
||||
**What you should see:**
|
||||
- Dashboard with navigation sections: STATUS, TOOLS, ADMIN
|
||||
- Various cards and widgets in the main area
|
||||
|
||||
Look for a "Logs" button (📋 Logs) in the TOOLS section of the dashboard. Note that some menu items may require clicking on the section header (like "TOOLS") to expand the menu first.
|
||||
|
||||
Screenshot: `screenshots/04-viewing-logs/light/01-dashboard.png`
|
||||
|
||||
---
|
||||
|
||||
## Step 2: The Logs Modal
|
||||
|
||||
Click on **Logs** to open the logs viewer modal.
|
||||
|
||||
**What you should see:**
|
||||
- **Title:** DNS Logs (or relevant service name)
|
||||
- **Show dropdown:** Options to show 25, 50, 100, or 200 log lines
|
||||
- **Live/Controls:** Live streaming toggle (📡 Live) and pause button (⏸️ Pause)
|
||||
- **Close button:** ✕ in the top right
|
||||
- **Log content area:** Shows the actual log entries
|
||||
|
||||
Screenshot: `screenshots/04-viewing-logs/light/02-logs-modal-open.png`
|
||||
|
||||
---
|
||||
|
||||
## Step 3: Understanding the Log Display
|
||||
|
||||
The log viewer shows:
|
||||
- **Timestamp** — When each log entry was created
|
||||
- **Service** — Which service generated the entry
|
||||
- **Message** — The actual log content
|
||||
|
||||
**Log Line Options:**
|
||||
Use the "Show" dropdown to control how many log lines are displayed at once:
|
||||
- 25 lines — For quick overview
|
||||
- 50 lines — Default view
|
||||
- 100 lines — For more context
|
||||
- 200 lines — For detailed analysis
|
||||
|
||||
---
|
||||
|
||||
## Step 4: Live Log Streaming
|
||||
|
||||
DashCaddy supports real-time log streaming:
|
||||
|
||||
**To enable live streaming:**
|
||||
- Click the **📡 Live** button to start streaming logs in real-time
|
||||
- New log entries will appear automatically at the top or bottom of the list
|
||||
|
||||
**To pause streaming:**
|
||||
- Click **⏸️ Pause** to stop auto-updating
|
||||
- This lets you scroll through logs without new entries pushing content
|
||||
|
||||
**What you should see:**
|
||||
When live streaming is active, new log entries appear automatically. The "Loading logs..." message will be replaced with actual log data if logs are available from your services.
|
||||
|
||||
---
|
||||
|
||||
## Step 5: Filtering and Navigation
|
||||
|
||||
The log viewer supports keyboard navigation:
|
||||
- Use **↑/↓ arrow keys** to navigate through log entries
|
||||
- **Enter** to select an entry (if applicable)
|
||||
- **Esc** to close the modal
|
||||
|
||||
---
|
||||
|
||||
## Common Issues
|
||||
|
||||
| Issue | Solution |
|
||||
|-------|----------|
|
||||
| Logs show "Loading logs..." | No services are running, or services haven't generated logs yet |
|
||||
| Can't find Logs button | The button may be in a collapsed menu — click on "TOOLS" section header to expand |
|
||||
| Log entries not appearing | Live streaming may be paused — click 📡 Live to resume |
|
||||
| Too many logs | Use the "Show" dropdown to limit displayed lines |
|
||||
| Can't scroll through logs | Make sure pause (⏸️ Pause) is enabled to prevent new entries from pushing content |
|
||||
86
src/tutorials/04-quick-search.md
Normal file
86
src/tutorials/04-quick-search.md
Normal file
@@ -0,0 +1,86 @@
|
||||
# Using Quick Search
|
||||
|
||||
DashCaddy's Quick Search feature provides instant access to services, settings, and apps across your dashboard. This tutorial shows how to use it.
|
||||
|
||||
**Prerequisites:** Logged into DashCaddy dashboard.
|
||||
|
||||
---
|
||||
|
||||
## Step 1: Open Quick Search
|
||||
|
||||
Quick Search is accessed via a modal that can be triggered in two ways:
|
||||
|
||||
**Method 1: Keyboard shortcut**
|
||||
- Press **Ctrl+K** (or **Cmd+K** on Mac) to open Quick Search
|
||||
|
||||
**Method 2: Via the UI**
|
||||
- The Quick Search modal can be accessed from the dashboard header or menu
|
||||
|
||||
Screenshot: `screenshots/05-quick-search/light/01-dashboard.png`
|
||||
|
||||
---
|
||||
|
||||
## Step 2: The Quick Search Modal
|
||||
|
||||
When opened, the Quick Search modal appears centered on your screen with a search input field.
|
||||
|
||||
**What you should see:**
|
||||
- Search input field at the top
|
||||
- Keyboard shortcut hints below the input:
|
||||
- **ESC** — Close the modal
|
||||
- **↑↓ Navigate** — Move between search results
|
||||
- **Enter Select** — Select the highlighted result
|
||||
- **Esc Close** — Another reminder to close with Escape
|
||||
|
||||
Screenshot: `screenshots/05-quick-search/light/02-quick-search-open.png`
|
||||
|
||||
---
|
||||
|
||||
## Step 3: Search for Services or Settings
|
||||
|
||||
Click on the search input field and start typing. Quick Search supports fuzzy matching and will show results as you type.
|
||||
|
||||
**What to search for:**
|
||||
- Service names (e.g., "Plex", "Gitea", "Nextcloud")
|
||||
- Settings names (e.g., "backup", "theme", "notifications")
|
||||
- Dashboard features (e.g., "logs", "stats", "docker")
|
||||
|
||||
Screenshot: `screenshots/05-quick-search/light/03-quick-search-typed.png`
|
||||
|
||||
---
|
||||
|
||||
## Step 4: Navigate and Select Results
|
||||
|
||||
Use the keyboard to navigate through search results:
|
||||
|
||||
1. **↑/↓ arrows** — Move the selection highlight up or down through results
|
||||
2. **Enter** — Select and open the highlighted item
|
||||
3. **ESC** — Close the Quick Search modal without selecting anything
|
||||
|
||||
**Result types may include:**
|
||||
- Services (apps you've deployed)
|
||||
- Settings pages
|
||||
- Dashboard features and modals
|
||||
- Documentation links
|
||||
|
||||
---
|
||||
|
||||
## Step 5: Quick Actions
|
||||
|
||||
Depending on the selected result, Quick Search can:
|
||||
- Open a service's management modal
|
||||
- Navigate to a settings page
|
||||
- Open a specific dashboard feature
|
||||
- Show detailed information about a service
|
||||
|
||||
---
|
||||
|
||||
## Common Issues
|
||||
|
||||
| Issue | Solution |
|
||||
|-------|----------|
|
||||
| Quick Search doesn't open | Try the keyboard shortcut (Ctrl+K/Cmd+K) |
|
||||
| No results appearing | Try shorter search terms; check spelling |
|
||||
| Results not relevant | Quick Search may need services to be configured first |
|
||||
| Can't select with Enter | Make sure a result is highlighted (has focus) |
|
||||
| Modal won't close | Press ESC to close; if it doesn't work, click outside the modal |
|
||||
108
src/tutorials/05-backup-restore.md
Normal file
108
src/tutorials/05-backup-restore.md
Normal file
@@ -0,0 +1,108 @@
|
||||
# Backup & Restore Your Configuration
|
||||
|
||||
DashCaddy includes a comprehensive backup system that saves your entire configuration — services, credentials, themes, and settings — into a single file. This tutorial shows how to create backups and restore from them.
|
||||
|
||||
**Prerequisites:** Logged into DashCaddy dashboard.
|
||||
|
||||
---
|
||||
|
||||
## Step 1: Access the Backup Modal
|
||||
|
||||
The Backup feature is found in the TOOLS section of the dashboard.
|
||||
|
||||
**What you should see:**
|
||||
- Dashboard with STATUS, TOOLS, ADMIN navigation
|
||||
- Service cards and widgets
|
||||
|
||||
Navigate to the TOOLS section and click on **Backup** to open the Backup & Restore modal.
|
||||
|
||||
Screenshot: `screenshots/06-backup-restore/light/01-dashboard.png`
|
||||
|
||||
---
|
||||
|
||||
## Step 2: The Backup Modal
|
||||
|
||||
The Backup modal opens with three tabs and detailed information about what gets backed up.
|
||||
|
||||
**What you should see:**
|
||||
- **Title:** 💾 Backup & Restore
|
||||
- **Description:** "Full backup of your entire DashCaddy setup — server config, credentials, themes, and browser preferences in one file."
|
||||
- **Tab buttons:** Manual, Automated, History
|
||||
|
||||
Screenshot: `screenshots/06-backup-restore/light/02-backup-modal-open.png`
|
||||
|
||||
---
|
||||
|
||||
## Step 3: Manual Backup (Export)
|
||||
|
||||
The **Manual** tab is selected by default and contains export options.
|
||||
|
||||
**What you should see:**
|
||||
- **📤 Export Backup** section with description:
|
||||
- "Downloads everything — services, Caddyfile, credentials, encryption key, themes, and all browser preferences."
|
||||
- **⬇️ Download Full Backup** button
|
||||
|
||||
**To create a manual backup:**
|
||||
1. Click **⬇️ Download Full Backup**
|
||||
2. Your browser will download a backup file (typically `.tar.gz` or similar archive)
|
||||
3. Save this file in a safe location
|
||||
|
||||
The backup file includes:
|
||||
- All service configurations
|
||||
- Caddy reverse proxy configuration
|
||||
- Encrypted credentials
|
||||
- Encryption keys
|
||||
- Custom themes
|
||||
- Browser preferences and settings
|
||||
|
||||
---
|
||||
|
||||
## Step 4: Restore from Backup
|
||||
|
||||
The **📥 Restore Backup** section lets you restore from a previously saved backup file.
|
||||
|
||||
**To restore from backup:**
|
||||
1. Click the upload/restore button (may be labeled differently in your version)
|
||||
2. Select your backup file from your computer
|
||||
3. Confirm the restore operation when prompted
|
||||
4. Wait for the restore process to complete
|
||||
|
||||
**⚠️ Warning:** Restoring a backup will replace your current configuration. Make sure to:
|
||||
- Export your current configuration first (if needed)
|
||||
- Verify the backup file is from a trusted source
|
||||
|
||||
---
|
||||
|
||||
## Step 5: Automated Backups
|
||||
|
||||
The **Automated** tab lets you schedule regular backups.
|
||||
|
||||
**What you might see:**
|
||||
- Backup schedule configuration
|
||||
- Options for backup frequency (daily, weekly, etc.)
|
||||
- Backup retention settings
|
||||
|
||||
Configure automated backups to ensure you always have recent restore points available.
|
||||
|
||||
---
|
||||
|
||||
## Step 6: Backup History
|
||||
|
||||
The **History** tab shows previous backup operations.
|
||||
|
||||
**What you might see:**
|
||||
- List of past backups
|
||||
- Timestamps for each backup
|
||||
- Restore options for individual backups
|
||||
|
||||
---
|
||||
|
||||
## Common Issues
|
||||
|
||||
| Issue | Solution |
|
||||
|-------|----------|
|
||||
| Download button not working | Check browser popup blocker; try a different browser |
|
||||
| Backup file won't upload | Ensure you're uploading the correct file format; check file size limits |
|
||||
| Restore fails | Verify the backup file is complete and not corrupted |
|
||||
| Automated backup not running | Check that the DashCaddy service is running; verify schedule settings |
|
||||
| Forgotten encryption key | Without the encryption key from backup, some credentials may not restore |
|
||||
113
src/tutorials/06-stats-monitoring.md
Normal file
113
src/tutorials/06-stats-monitoring.md
Normal file
@@ -0,0 +1,113 @@
|
||||
# Monitoring Resources with Stats
|
||||
|
||||
DashCaddy's Stats feature provides real-time and historical monitoring of CPU, memory, network, and disk usage for your containers. This tutorial shows how to access and interpret the monitoring data.
|
||||
|
||||
**Prerequisites:** Logged into DashCaddy dashboard with Docker containers running.
|
||||
|
||||
---
|
||||
|
||||
## Step 1: Access the Stats Modal
|
||||
|
||||
The Stats monitoring is found in the STATUS section of the dashboard.
|
||||
|
||||
**What you should see:**
|
||||
- Dashboard with STATUS, TOOLS, ADMIN navigation
|
||||
- Various service cards and status indicators
|
||||
|
||||
Navigate to the STATUS section and click on **Stats** to open the Resource Monitor.
|
||||
|
||||
Screenshot: `screenshots/07-stats-monitoring/light/01-dashboard.png`
|
||||
|
||||
---
|
||||
|
||||
## Step 2: The Stats Modal
|
||||
|
||||
The Stats modal opens with resource monitoring data organized into tabs.
|
||||
|
||||
**What you should see:**
|
||||
- **Title:** 📊 Resource Monitor
|
||||
- **Description:** "Real-time and historical CPU, memory, network, and disk usage for containers."
|
||||
- **Tabs:** Live Stats, 24h Summary, Alerts
|
||||
|
||||
Screenshot: `screenshots/07-stats-monitoring/light/02-stats-modal-open.png`
|
||||
|
||||
---
|
||||
|
||||
## Step 3: Live Stats View
|
||||
|
||||
The **Live Stats** tab shows real-time resource usage.
|
||||
|
||||
**What you might see:**
|
||||
- Container list with real-time metrics
|
||||
- CPU usage percentage per container
|
||||
- Memory usage (used/available)
|
||||
- Network I/O rates
|
||||
- Disk I/O rates
|
||||
- Auto-refresh indicator: "Auto-refresh every 5s"
|
||||
|
||||
**Refresh controls:**
|
||||
- **🔄 Refresh Now** — Manually trigger a refresh of all stats
|
||||
- Automatic refresh can be paused if needed
|
||||
|
||||
Screenshot: `screenshots/07-stats-monitoring/light/02-stats-modal-open.png`
|
||||
|
||||
---
|
||||
|
||||
## Step 4: 24h Summary View
|
||||
|
||||
The **24h Summary** tab shows aggregated statistics over the past 24 hours.
|
||||
|
||||
**What you might see:**
|
||||
- Peak CPU usage
|
||||
- Average memory usage
|
||||
- Total network traffic
|
||||
- Disk usage trends
|
||||
- Historical graphs if available
|
||||
|
||||
This view helps identify resource usage patterns and plan for capacity needs.
|
||||
|
||||
---
|
||||
|
||||
## Step 5: Alerts View
|
||||
|
||||
The **Alerts** tab shows any resource-related alerts.
|
||||
|
||||
**What you might see:**
|
||||
- High CPU warnings
|
||||
- Memory pressure alerts
|
||||
- Disk space warnings
|
||||
- Network issues
|
||||
|
||||
Alerts help you stay on top of problems before they cause service disruptions.
|
||||
|
||||
---
|
||||
|
||||
## Understanding the Metrics
|
||||
|
||||
**CPU Usage:**
|
||||
- Shows percentage of CPU being used by each container
|
||||
- High CPU (>80%) sustained may indicate performance issues
|
||||
|
||||
**Memory Usage:**
|
||||
- Shows RAM used vs. available
|
||||
- Watch for containers with memory limits approaching capacity
|
||||
|
||||
**Network I/O:**
|
||||
- Bytes/packets in and out
|
||||
- Helps identify unexpected network activity
|
||||
|
||||
**Disk I/O:**
|
||||
- Read/write speeds
|
||||
- Important for storage-heavy workloads
|
||||
|
||||
---
|
||||
|
||||
## Common Issues
|
||||
|
||||
| Issue | Solution |
|
||||
|-------|----------|
|
||||
| Stats show "Loading container stats..." | No containers running, or Docker is not responding |
|
||||
| Auto-refresh not working | Click "🔄 Refresh Now" manually; check Docker daemon |
|
||||
| Missing container in stats | Container may have stopped; check container status |
|
||||
| Network stats show zeros | Network monitoring may not be enabled for that container |
|
||||
| High CPU alerts | Check which container is using resources; consider resource limits |
|
||||
Reference in New Issue
Block a user