Splunk Git Pusher
3 months ago
parent
e36f9dcf93
commit
02ea0b81e7
@ -0,0 +1,529 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<dashboard version="1.1" script="git_pusher.js">
|
||||
<label>🚀 Git Pusher - Deploy Applications</label>
|
||||
<description>Modern interface to push Splunk applications to Git repository</description>
|
||||
|
||||
<search id="dsearch">
|
||||
<query>| rest /services/apps/local | search disabled=0 | fields name, label, description | sort label</query>
|
||||
<earliest>-4h@h</earliest>
|
||||
<latest>now</latest>
|
||||
</search>
|
||||
|
||||
<row>
|
||||
<panel>
|
||||
<html>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
|
||||
margin-bottom: 30px;
|
||||
border-radius: 0 0 20px 20px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 15px 50px rgba(102, 126, 234, 0.2);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.card-title::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.form-group input[type="text"],
|
||||
.form-group input[type="password"],
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
font-family: 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
.form-group input[type="text"]:focus,
|
||||
.form-group input[type="password"]:focus,
|
||||
.form-group textarea:focus {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
padding: 12px;
|
||||
background: #f5f7ff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.checkbox-group input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
accent-color: #667eea;
|
||||
}
|
||||
|
||||
.checkbox-group label {
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
font-size: 13px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.apps-list {
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 12px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
background: #fafbfc;
|
||||
}
|
||||
|
||||
.apps-list::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.apps-list::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.apps-list::-webkit-scrollbar-thumb {
|
||||
background: #667eea;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
padding: 15px 16px;
|
||||
border-bottom: 2px solid #e0e0e0;
|
||||
background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
|
||||
font-weight: 600;
|
||||
color: #667eea;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.app-count {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.app-item {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.app-item:hover {
|
||||
background: #f0f4ff;
|
||||
}
|
||||
|
||||
.app-item input[type="checkbox"] {
|
||||
margin-right: 12px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
accent-color: #667eea;
|
||||
}
|
||||
|
||||
.app-item label {
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.app-badge {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 3px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 28px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
box-shadow: 0 6px 25px rgba(102, 126, 234, 0.5);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #f5f7ff;
|
||||
color: #667eea;
|
||||
border: 2px solid #667eea;
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
|
||||
border-radius: 12px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.loading.active {
|
||||
display: block;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.spinner {
|
||||
border: 3px solid #e0e0e0;
|
||||
border-top: 3px solid #667eea;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto 15px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
color: #667eea;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.message {
|
||||
padding: 16px 20px;
|
||||
border-radius: 12px;
|
||||
margin: 15px 0;
|
||||
display: none;
|
||||
animation: slideIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.message.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
|
||||
color: white;
|
||||
border-left: 4px solid white;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: linear-gradient(135deg, #f44336 0%, #da190b 100%);
|
||||
color: white;
|
||||
border-left: 4px solid white;
|
||||
}
|
||||
|
||||
.info-banner {
|
||||
background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
|
||||
border: 2px solid #667eea;
|
||||
border-radius: 12px;
|
||||
padding: 16px 20px;
|
||||
margin-bottom: 20px;
|
||||
color: #667eea;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
flex: 1;
|
||||
background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
border: 2px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-item:hover {
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #667eea;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-top: 40px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="header">
|
||||
<h1>🚀 Git Pusher</h1>
|
||||
<p>Deploy your Splunk applications to Git with confidence</p>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="info-banner">
|
||||
✨ Configure your Git settings below and select the applications you want to deploy to your repository
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<!-- Configuration Panel -->
|
||||
<div class="card">
|
||||
<div class="card-title">⚙️ Configuration</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="git-url">Git Repository URL</label>
|
||||
<input type="text" id="git-url" placeholder="https://github.com/username/repo.git" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="git-branch">Target Branch</label>
|
||||
<input type="text" id="git-branch" placeholder="main" value="main" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="git-token">Git Token / Password</label>
|
||||
<input type="password" id="git-token" placeholder="Enter your Git token or password" />
|
||||
</div>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="save-credentials" />
|
||||
<label for="save-credentials">Save credentials locally</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="commit-message">Commit Message</label>
|
||||
<textarea id="commit-message" placeholder="Describe your changes..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="button-group">
|
||||
<button class="btn btn-primary" id="push-btn" onclick="pushDashboards()">
|
||||
✈️ Deploy to Git
|
||||
</button>
|
||||
<button class="btn btn-secondary" onclick="resetForm(true)">
|
||||
🔄 Reset
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Applications Panel -->
|
||||
<div class="card">
|
||||
<div class="card-title">📦 Applications</div>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number" id="total-apps">0</div>
|
||||
<div class="stat-label">Available</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number" id="selected-apps">0</div>
|
||||
<div class="stat-label">Selected</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="apps-list" id="dashboard-list">
|
||||
<div style="padding: 30px; text-align: center; color: #999;">
|
||||
<div class="spinner"></div>
|
||||
<p>Loading applications...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="loading" id="loading">
|
||||
<div class="spinner"></div>
|
||||
<div class="loading-text">Deploying applications to Git... Please wait</div>
|
||||
</div>
|
||||
|
||||
<div class="message success-message" id="success-msg">
|
||||
✅ <span id="success-text">Applications successfully deployed to Git!</span>
|
||||
</div>
|
||||
|
||||
<div class="message error-message" id="error-msg">
|
||||
❌ <span id="error-text">Error occurred while deploying applications</span>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
Made with ❤️ for Splunk • Git Pusher v2.0
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
||||
</panel>
|
||||
</row>
|
||||
|
||||
</dashboard>
|
||||
Loading…
Reference in new issue