Nicholas Ceballos
1171e15503
CI Pipeline / HTML Lint (push) Successful in 1m4s
Deploy QA / Build and Push (push) Successful in 42s
Deploy QA / Deploy to QA (push) Failing after 7s
Deploy QA / Notification (push) Failing after 1s
CI Pipeline / Build Docker Image (push) Failing after 35s
CI Pipeline / Security Scan (push) Has been skipped
CI Pipeline / Generate Summary (push) Failing after 1s
Adds all required files for the proof of concept: - Gitea Actions CI/CD workflows for QA, staging, and production environments - Docker build configuration with healthcheck and runtime environment injection - Nginx server config with security headers and health endpoint - Sample static frontend application displaying environment metrics - Comprehensive README documentation with architecture, setup, and usage instructions
409 lines
11 KiB
HTML
409 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Kubistudio - Multi-Environment Pipeline POC</title>
|
|
<style>
|
|
:root {
|
|
--accent: #F59E0B;
|
|
--accent-bg: rgba(245, 158, 11, 0.1);
|
|
--accent-border: rgba(245, 158, 11, 0.3);
|
|
--bg: #0f172a;
|
|
--card-bg: #1e293b;
|
|
--card-border: #334155;
|
|
--text: #f1f5f9;
|
|
--text-secondary: #94a3b8;
|
|
--text-muted: #64748b;
|
|
--success: #10B981;
|
|
--danger: #ef4444;
|
|
--warning: #F59E0B;
|
|
--warning-bg: rgba(245, 158, 11, 0.15);
|
|
--warning-text: #fbbf24;
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
html, body { height: 100%; }
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
display: flex;
|
|
flex-direction: column;
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.env-warning {
|
|
background: var(--warning-bg);
|
|
border-bottom: 1px solid var(--accent-border);
|
|
color: var(--warning-text);
|
|
text-align: center;
|
|
padding: 8px 16px;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
display: none;
|
|
}
|
|
|
|
.env-warning.visible { display: block; }
|
|
|
|
.container {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 24px;
|
|
gap: 24px;
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.logo-area {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: var(--accent);
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 14px;
|
|
border-radius: 999px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
background: var(--accent-bg);
|
|
color: var(--accent);
|
|
border: 1px solid var(--accent-border);
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.card {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 16px;
|
|
padding: 32px;
|
|
width: 100%;
|
|
box-shadow: 0 4px 24px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-muted);
|
|
margin-bottom: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.metrics-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.metric {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: 12px 16px;
|
|
background: rgba(255,255,255,0.03);
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255,255,255,0.05);
|
|
}
|
|
|
|
.metric.hidden { display: none; }
|
|
|
|
.metric-label {
|
|
font-size: 0.7rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
word-break: break-all;
|
|
}
|
|
|
|
.metric-value.code {
|
|
font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.health-section {
|
|
width: 100%;
|
|
}
|
|
|
|
.health-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 14px 20px;
|
|
border-radius: 10px;
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.05);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.health-indicator {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: var(--text-muted);
|
|
flex-shrink: 0;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.health-indicator.ok { background: var(--success); }
|
|
.health-indicator.fail { background: var(--danger); }
|
|
|
|
.health-detail {
|
|
color: var(--text-secondary);
|
|
font-size: 0.8rem;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.health-error {
|
|
color: var(--danger);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-size: 0.75rem;
|
|
padding: 16px 24px;
|
|
border-top: 1px solid var(--card-border);
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.container { padding: 16px; gap: 16px; }
|
|
.card { padding: 20px; }
|
|
.metrics-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
|
|
.metric { padding: 10px 12px; }
|
|
.metric-value { font-size: 0.85rem; }
|
|
h1 { font-size: 1.25rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="envWarning" class="env-warning"></div>
|
|
|
|
<div class="container">
|
|
<header>
|
|
<div class="logo-area">
|
|
<div class="logo-icon" id="logoIcon">K</div>
|
|
<h1>Kubistudio Pipeline</h1>
|
|
</div>
|
|
<div class="badge" id="envBadge">⚙️ Cargando...</div>
|
|
</header>
|
|
|
|
<div class="card" id="mainCard">
|
|
<div class="card-title">Información del Ambiente</div>
|
|
<div class="metrics-grid" id="metricsGrid">
|
|
<div class="metric" id="metric-version">
|
|
<span class="metric-label">Versión</span>
|
|
<span class="metric-value" id="val-version">—</span>
|
|
</div>
|
|
<div class="metric" id="metric-env">
|
|
<span class="metric-label">Ambiente</span>
|
|
<span class="metric-value" id="val-env">—</span>
|
|
</div>
|
|
<div class="metric" id="metric-deploy">
|
|
<span class="metric-label">Último Deploy</span>
|
|
<span class="metric-value" id="val-deploy">—</span>
|
|
</div>
|
|
<div class="metric hidden" id="metric-commit">
|
|
<span class="metric-label">Git Commit</span>
|
|
<span class="metric-value code" id="val-commit">—</span>
|
|
</div>
|
|
<div class="metric hidden" id="metric-branch">
|
|
<span class="metric-label">Git Branch</span>
|
|
<span class="metric-value code" id="val-branch">—</span>
|
|
</div>
|
|
<div class="metric hidden" id="metric-build">
|
|
<span class="metric-label">Build Number</span>
|
|
<span class="metric-value" id="val-build">—</span>
|
|
</div>
|
|
<div class="metric hidden" id="metric-build-date">
|
|
<span class="metric-label">Build Date</span>
|
|
<span class="metric-value" id="val-build-date">—</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="health-section">
|
|
<div class="health-status">
|
|
<span class="health-indicator" id="healthDot"></span>
|
|
<span id="healthLabel">Verificando estado del servicio...</span>
|
|
<span class="health-detail" id="healthDetail"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
© <span id="year"></span> Kubistudio. All rights reserved.
|
|
</footer>
|
|
|
|
<script>
|
|
(function() {
|
|
var env = window.__ENV__ || {};
|
|
var appEnv = env.APP_ENV || 'development';
|
|
var appVersion = env.APP_VERSION || '0.0.0';
|
|
var buildDate = env.BUILD_DATE || '';
|
|
var gitCommit = env.GIT_COMMIT || '';
|
|
var gitBranch = env.GIT_BRANCH || '';
|
|
var deployTime = env.DEPLOY_TIME || '';
|
|
var buildNumber = env.BUILD_NUMBER || '';
|
|
|
|
var config = {
|
|
qa: {
|
|
accent: '#F59E0B',
|
|
badge: '\uD83E\uDDEA Ambiente de Pruebas',
|
|
warning: '\u26A0\uFE0F Este no es un ambiente de producci\u00F3n. Los datos pueden ser modificados o eliminados.',
|
|
showAll: true,
|
|
logoBg: '#F59E0B'
|
|
},
|
|
staging: {
|
|
accent: '#3B82F6',
|
|
badge: '\uD83D\uDD35 Ambiente de Staging',
|
|
warning: '\u26A0\uFE0F Release candidate — pre-producci\u00F3n. Verificar antes de liberar.',
|
|
showAll: false,
|
|
showCommit: true,
|
|
showBranch: false,
|
|
showBuild: false,
|
|
showBuildDate: true,
|
|
logoBg: '#3B82F6'
|
|
},
|
|
production: {
|
|
accent: '#10B981',
|
|
badge: '\u2705 Ambiente de Producci\u00F3n',
|
|
warning: '',
|
|
showAll: false,
|
|
showCommit: false,
|
|
showBranch: false,
|
|
showBuild: false,
|
|
showBuildDate: true,
|
|
logoBg: '#10B981'
|
|
}
|
|
};
|
|
|
|
var envKey = appEnv.toLowerCase();
|
|
var cfg = config[envKey] || config.qa;
|
|
|
|
document.documentElement.style.setProperty('--accent', cfg.accent);
|
|
document.documentElement.style.setProperty('--accent-bg', cfg.accent + '18');
|
|
document.documentElement.style.setProperty('--accent-border', cfg.accent + '4d');
|
|
|
|
var logoIcon = document.getElementById('logoIcon');
|
|
if (logoIcon) {
|
|
logoIcon.style.background = cfg.logoBg;
|
|
logoIcon.textContent = envKey.charAt(0).toUpperCase();
|
|
}
|
|
|
|
var badge = document.getElementById('envBadge');
|
|
if (badge) badge.textContent = cfg.badge;
|
|
|
|
var warning = document.getElementById('envWarning');
|
|
if (cfg.warning) {
|
|
warning.innerHTML = cfg.warning;
|
|
warning.classList.add('visible');
|
|
}
|
|
|
|
function setVal(id, val) {
|
|
var el = document.getElementById(id);
|
|
if (el) el.textContent = val || '—';
|
|
}
|
|
|
|
setVal('val-version', appVersion);
|
|
setVal('val-env', appEnv.toUpperCase());
|
|
setVal('val-deploy', deployTime ? new Date(deployTime).toLocaleString() : '—');
|
|
setVal('val-commit', gitCommit);
|
|
setVal('val-branch', gitBranch);
|
|
setVal('val-build', buildNumber);
|
|
setVal('val-build-date', buildDate ? new Date(buildDate).toLocaleString() : '—');
|
|
|
|
function toggleMetric(id, show) {
|
|
var el = document.getElementById(id);
|
|
if (el) el.classList.toggle('hidden', !show);
|
|
}
|
|
|
|
if (cfg.showAll) {
|
|
toggleMetric('metric-commit', true);
|
|
toggleMetric('metric-branch', true);
|
|
toggleMetric('metric-build', true);
|
|
toggleMetric('metric-build-date', true);
|
|
} else {
|
|
toggleMetric('metric-commit', cfg.showCommit);
|
|
toggleMetric('metric-branch', cfg.showBranch);
|
|
toggleMetric('metric-build', cfg.showBuild);
|
|
toggleMetric('metric-build-date', cfg.showBuildDate);
|
|
}
|
|
|
|
var healthDot = document.getElementById('healthDot');
|
|
var healthLabel = document.getElementById('healthLabel');
|
|
var healthDetail = document.getElementById('healthDetail');
|
|
|
|
function checkHealth() {
|
|
fetch('/health')
|
|
.then(function(r) {
|
|
if (!r.ok) throw new Error('HTTP ' + r.status);
|
|
return r.json();
|
|
})
|
|
.then(function(data) {
|
|
healthDot.className = 'health-indicator ok';
|
|
healthLabel.textContent = 'Servicio operativo';
|
|
healthDetail.textContent = data.env ? data.env.toUpperCase() + ' \u00B7 ' + data.version : '';
|
|
})
|
|
.catch(function(err) {
|
|
healthDot.className = 'health-indicator fail';
|
|
healthLabel.textContent = 'Error de conexi\u00F3n';
|
|
healthDetail.textContent = err.message;
|
|
});
|
|
}
|
|
|
|
checkHealth();
|
|
setInterval(checkHealth, 30000);
|
|
|
|
document.getElementById('year').textContent = new Date().getFullYear();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|