323 lines
13 KiB
Plaintext
323 lines
13 KiB
Plaintext
---
|
|
// src/pages/ansible/help.astro - Converted from static ansible-help.html
|
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
|
import Header from '../../components/Header.astro';
|
|
import Footer from '../../components/Footer.astro';
|
|
|
|
const title = "Ansible Sandbox Help | Argobox";
|
|
const description = "Help guide for using the Ansible Sandbox environment. Learn how to deploy infrastructure as code demonstrations.";
|
|
---
|
|
|
|
<BaseLayout {title} {description}>
|
|
{/* Add Font Awesome if not loaded globally */}
|
|
{/* <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> */}
|
|
<Header slot="header" />
|
|
|
|
<main class="main-content">
|
|
<div class="container">
|
|
<header class="help-header">
|
|
<a href="/ansible/sandbox" class="back-link"> {/* Updated Link */}
|
|
<i class="fas fa-arrow-left"></i>
|
|
Back to Ansible Sandbox
|
|
</a>
|
|
<h1 class="help-title">Ansible Sandbox Help Guide</h1>
|
|
<p class="help-subtitle">
|
|
Learn how to use and get the most out of the Ansible Sandbox environment.
|
|
</p>
|
|
</header>
|
|
|
|
<section class="help-section">
|
|
<h2 class="help-section-title">Getting Started</h2>
|
|
|
|
<div class="step-grid">
|
|
<div class="step-number">1</div>
|
|
<div class="step-title">Select a Playbook</div>
|
|
<div class="step-content">
|
|
<p>The sandbox offers various Ansible playbooks showcasing different infrastructure automation scenarios. Choose one from the left panel based on your interests.</p>
|
|
<p>Each playbook comes with a description and information about its complexity level and typical run time.</p>
|
|
</div>
|
|
{/* Optional: Add placeholder image if available <div class="step-image"><img src="/images/help/step1.png" alt="Select Playbook Step"></div> */}
|
|
</div>
|
|
|
|
<div class="step-grid">
|
|
<div class="step-number">2</div>
|
|
<div class="step-title">Explore the Playbook Code</div>
|
|
<div class="step-content">
|
|
<p>View the Ansible YAML code to understand how the automation works. The code is syntax-highlighted for readability.</p>
|
|
<p>Hover over different sections to see what each part of the playbook does.</p>
|
|
</div>
|
|
{/* Optional: Add placeholder image <div class="step-image"><img src="/images/help/step2.png" alt="Explore Code Step"></div> */}
|
|
</div>
|
|
|
|
<div class="step-grid">
|
|
<div class="step-number">3</div>
|
|
<div class="step-title">Configure Parameters</div>
|
|
<div class="step-content">
|
|
<p>Switch to the "Configuration" tab to customize various parameters for your deployment. These might include:</p>
|
|
<ul class="config-list">
|
|
<li>Domain names</li>
|
|
<li>Directory paths</li>
|
|
<li>Feature toggles</li>
|
|
<li>VM template selection</li>
|
|
<li>Resource allocation</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step-grid">
|
|
<div class="step-number">4</div>
|
|
<div class="step-title">Deploy the Environment</div>
|
|
<div class="step-content">
|
|
<p>Click the "Deploy" button to launch the automation process. The system will:</p>
|
|
<ol class="deploy-steps-list">
|
|
<li>Create necessary virtual machines</li>
|
|
<li>Run the selected Ansible playbook</li>
|
|
<li>Configure all services</li>
|
|
<li>Provide access to the deployed environment</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step-grid">
|
|
<div class="step-number">5</div>
|
|
<div class="step-title">Monitor Progress</div>
|
|
<div class="step-content">
|
|
<p>Watch the deployment process in real-time on the "Output" tab, which shows the Ansible execution log.</p>
|
|
<p>Once deployment completes, you'll see a success message with details on how to access the deployed environment.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step-grid">
|
|
<div class="step-number">6</div>
|
|
<div class="step-title">Explore the Environment</div>
|
|
<div class="step-content">
|
|
<p>After deployment, you can:</p>
|
|
<ul class="explore-list">
|
|
<li>View the VM status and details in the "VM Status" tab</li>
|
|
<li>Access deployed applications via provided URLs</li>
|
|
<li>See resource utilization metrics</li>
|
|
<li>Monitor the environment's remaining active time</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tip">
|
|
<div class="tip-title">
|
|
<i class="fas fa-lightbulb"></i>
|
|
<span>Pro Tip</span>
|
|
</div>
|
|
<p>
|
|
Sandbox environments automatically shut down after 30 minutes to conserve resources. You'll see a countdown timer showing the remaining time. Make sure to complete your exploration before time runs out!
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="help-section">
|
|
<h2 class="help-section-title">Frequently Asked Questions</h2>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question">What is an Ansible playbook?</div>
|
|
<div class="faq-answer">
|
|
An Ansible playbook is a YAML file that describes a set of tasks to be executed on remote servers. Playbooks define the desired state of systems and can configure applications, deploy software, and orchestrate advanced IT workflows.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question">Is the sandbox environment isolated?</div>
|
|
<div class="faq-answer">
|
|
Yes, each sandbox environment is completely isolated. Your deployments and configurations won't affect other users or any production systems. This provides a safe space to experiment with infrastructure automation.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question">Can I save or download the playbooks?</div>
|
|
<div class="faq-answer">
|
|
Yes, you can copy the playbook code to use in your own environments. Each code segment can be selected and copied to your clipboard. For a more organized approach, visit the <a href="/ansible/docs">Documentation page</a> for downloadable versions of all playbooks. {/* Updated Link */}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question">What happens if I need more time with an environment?</div>
|
|
<div class="faq-answer">
|
|
Currently, all sandbox environments are limited to 30 minutes. If you need more time, you can always redeploy the environment after it expires, which will give you a fresh 30-minute window to continue your exploration.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question">Can I modify the playbooks?</div>
|
|
<div class="faq-answer">
|
|
The playbook code displayed is read-only to ensure consistent and reliable deployments. However, you can customize many aspects of the deployment through the Configuration tab, which allows you to adjust key parameters without modifying the underlying code.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question">What if I encounter an error during deployment?</div>
|
|
<div class="faq-answer">
|
|
If an error occurs during deployment, the Output tab will display the specific error message from Ansible. You can use the "Reset" button to clear the environment and try again, potentially with different configuration options.
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="help-section">
|
|
<h2 class="help-section-title">Key Terms</h2>
|
|
<div class="key-terms-list">
|
|
<p><span class="key-term">Playbook</span> - A YAML file defining a series of Ansible tasks and configurations.</p>
|
|
<p><span class="key-term">Task</span> - An individual action Ansible executes on a managed host.</p>
|
|
<p><span class="key-term">Role</span> - A reusable unit of tasks, variables, files, etc.</p>
|
|
<p><span class="key-term">Inventory</span> - A list of hosts managed by Ansible.</p>
|
|
<p><span class="key-term">Handler</span> - A special task triggered by a change notification.</p>
|
|
<p><span class="key-term">Variable</span> - A value used to make playbooks flexible.</p>
|
|
<p><span class="key-term">Template</span> - A file using variables to create dynamic configuration files (e.g., Jinja2).</p>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="help-footer">
|
|
<p>Need more assistance? <a href="mailto:daniel.laforce@argobox.com">Contact Support</a> or visit the <a href="/ansible/docs">Full Documentation</a>.</p> {/* Updated Link */}
|
|
</footer>
|
|
</div>
|
|
</main>
|
|
|
|
<Footer slot="footer" />
|
|
</BaseLayout>
|
|
|
|
<style is:global>
|
|
/* Styles adapted from ansible-help.html and styles.css */
|
|
/* Rely on BaseLayout for body, container, etc. */
|
|
|
|
.main-content {
|
|
/* Adjust top margin if header height changes */
|
|
/* margin-top: 4.5rem; */
|
|
padding-top: 2rem; /* Add padding */
|
|
padding-bottom: 4rem;
|
|
}
|
|
|
|
.help-header {
|
|
text-align: center;
|
|
margin-bottom: 3rem;
|
|
position: relative;
|
|
padding-top: 1rem; /* Add space from header */
|
|
}
|
|
.help-title {
|
|
font-size: clamp(1.8rem, 5vw, 2.5rem); /* Responsive title */
|
|
font-weight: 700;
|
|
margin-bottom: 1rem;
|
|
color: var(--text-primary);
|
|
}
|
|
.help-subtitle {
|
|
color: var(--text-secondary);
|
|
font-size: clamp(1rem, 3vw, 1.2rem);
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
.back-link {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: inline-flex; /* Use inline-flex */
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: var(--accent);
|
|
font-weight: 500;
|
|
transition: all var(--transition-normal);
|
|
text-decoration: none;
|
|
font-size: 0.9rem;
|
|
padding: 0.5rem 0;
|
|
}
|
|
.back-link:hover { color: var(--accent-darker); transform: translateX(-3px); }
|
|
|
|
.help-section {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 1rem;
|
|
padding: clamp(1.5rem, 4vw, 2rem); /* Responsive padding */
|
|
margin-bottom: 2rem;
|
|
}
|
|
.help-section-title {
|
|
font-size: clamp(1.25rem, 4vw, 1.5rem);
|
|
font-weight: 600;
|
|
margin-bottom: 1.5rem;
|
|
color: var(--accent);
|
|
position: relative;
|
|
padding-bottom: 0.75rem;
|
|
border-bottom: 1px solid var(--border); /* Use border instead of ::after */
|
|
}
|
|
/* .help-section-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 50px; height: 3px; background: var(--accent-gradient); border-radius: 3px; } */
|
|
|
|
.step-grid {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 1rem 1rem; /* Reduced gap */
|
|
margin-bottom: 1.5rem;
|
|
align-items: start; /* Align items to start */
|
|
}
|
|
.step-number {
|
|
background: var(--accent-gradient);
|
|
color: white;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
grid-row: 1 / span 2; /* Span number across title/content */
|
|
margin-top: 0.1rem; /* Align better with title */
|
|
}
|
|
.step-title {
|
|
font-weight: 600;
|
|
font-size: 1.1rem;
|
|
/* align-self: center; */ /* Removed */
|
|
color: var(--text-primary);
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
margin: 0; /* Remove default margins */
|
|
}
|
|
.step-content {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
color: var(--text-secondary);
|
|
font-size: 0.95rem;
|
|
}
|
|
.step-content p { margin-bottom: 1rem; }
|
|
.step-content p:last-child { margin-bottom: 0; }
|
|
.step-content ul, .step-content ol {
|
|
list-style-position: outside;
|
|
margin-left: 1.5rem;
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.step-content li { margin-bottom: 0.5rem; }
|
|
|
|
.tip {
|
|
background-color: rgba(59, 130, 246, 0.1);
|
|
border-left: 4px solid var(--accent);
|
|
padding: 1rem 1.5rem;
|
|
border-radius: 0 0.5rem 0.5rem 0;
|
|
margin: 1.5rem 0;
|
|
font-size: 0.95rem;
|
|
}
|
|
.tip-title { font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
|
|
.tip p { margin: 0; color: var(--text-secondary); }
|
|
|
|
.faq-item { margin-bottom: 1.5rem; }
|
|
.faq-question { font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary); }
|
|
.faq-answer { color: var(--text-secondary); font-size: 0.95rem; }
|
|
|
|
.key-terms-list p { margin-bottom: 0.75rem; }
|
|
.key-term { font-weight: 500; color: var(--accent); font-family: var(--font-mono); background-color: rgba(59, 130, 246, 0.1); padding: 0.1em 0.3em; border-radius: 3px; }
|
|
|
|
.help-footer { text-align: center; margin-top: 3rem; color: var(--text-secondary); font-size: 0.9rem; }
|
|
.help-footer a { color: var(--accent); text-decoration: none; }
|
|
.help-footer a:hover { text-decoration: underline; }
|
|
|
|
@media (max-width: 768px) {
|
|
.step-grid { grid-template-columns: 1fr; gap: 0.5rem; }
|
|
.step-number { grid-row: auto; margin-bottom: 0.5rem; justify-self: start; }
|
|
.step-title { grid-column: 1; grid-row: auto; }
|
|
.step-content { grid-column: 1; grid-row: auto; }
|
|
.back-link { position: static; margin-bottom: 1rem; }
|
|
.help-header { padding-top: 0; }
|
|
}
|
|
|
|
</style> |