Skip to content

update:changes from local instance - UI+Simulation #120

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

Open
23f3002157152rsr wants to merge 1 commit into
base: master
Choose a base branch
from
Open

update:changes from local instance - UI+Simulation #120

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
2 changes: 0 additions & 2 deletions .gitignore
View file
Open in desktop

This file was deleted.

Binary file added chaosmonkey
View file
Open in desktop
Binary file not shown.
14 changes: 14 additions & 0 deletions chaosmonkey.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
[spinnaker]
endpoint = "http://localhost:8084"
ignoreSSL = true

[monkey]
leashed = true # So Chaos Monkey won’t actually terminate anything

[logging]
level = "debug"

[schedule]
enabled = true
frequency = "daily"
time = "09:00"
2 changes: 1 addition & 1 deletion go.mod
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ require (
github.com/spf13/jwalterweatherman v0.0.0-20160311093646-33c24e77fb80 // indirect
github.com/stretchr/testify v1.8.1 // indirect
github.com/ziutek/mymysql v1.5.4 // indirect
golang.org/x/sys v0.0.0-20160916181909-8f0908ab3b24 // indirect
golang.org/x/sys v0.5.0 // indirect
golang.org/x/text v0.9.0 // indirect
gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c // indirect
gopkg.in/gorp.v1 v1.7.1 // indirect
Expand Down
8 changes: 4 additions & 4 deletions go.sum
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,10 @@ github.com/ziutek/mymysql v1.5.4 h1:GB0qdRGsTwQSBVYuVShFBKaXSnSnYYC2d9knnE1LHFs=
github.com/ziutek/mymysql v1.5.4/go.mod h1:LMSpPZ6DbqWFxNCHW77HeMg9I646SAhApZ/wKdgO/C0=
golang.org/x/crypto v0.0.0-20160922170629-8e06e8ddd962 h1:mWFWs/KZ0R2cLgNYRn+C4pQvMDmpkqxF1Npt3NEAPg0=
golang.org/x/crypto v0.0.0-20160922170629-8e06e8ddd962/go.mod h1:6SG95UA2DQfeDnfUPMdvaQW0Q7yPrPDi9nlGo2tz2b4=
golang.org/x/sys v0.0.0-20160916181909-8f0908ab3b24 h1:BL/wcoHkjubwHn2wDTAD1fehKZ9lf67KOVzucRKWPtM=
golang.org/x/sys v0.0.0-20160916181909-8f0908ab3b24/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
golang.org/x/text v0.0.0-20160922232553-a7c023693a94 h1:QmdGgXvDlzDdp+l90rsC+qLFmFhl2nn+rSfBnS8P4zI=
golang.org/x/text v0.0.0-20160922232553-a7c023693a94/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
golang.org/x/sys v0.5.0 h1:MUK/U/4lj1t1oPg0HfuXDN/Z1wv31ZJ/YcPiGccS4DU=
golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/text v0.9.0 h1:2sjJmO8cDvYveuX97RDLsxlyUxLl+GHoLxBiRdHllBE=
golang.org/x/text v0.9.0/go.mod h1:e1OnstbJyHTd6l/uOt8jFFHp6TRDWZR/bV3emEE/zU8=
gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c h1:Hei/4ADfdWqJk1ZMxUNpqntNwaWcugrBjAiHlqqRiVk=
gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c/go.mod h1:JHkPIbrfpd72SG/EVd6muEfDQjcINNoR0C8j2r3qZ4Q=
Expand Down
255 changes: 255 additions & 0 deletions ui/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,255 @@
<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chaos Command Center - Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Chart.js for analytics -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
colors: {
'netflix-red': '#E50914',
'netflix-black': '#141414',
'netflix-gray': '#b3b3b3',
'netflix-dark-gray': '#222',
'netflix-light-gray': '#f5f5f5',
},
},
},
};
</script>
<style>
body {
font-family: 'Inter', sans-serif;
}
.widget {
background-color: #222;
border: 1px solid #333;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #222;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #444;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body class="bg-netflix-black text-netflix-light-gray h-full flex flex-col">

<!-- Header -->
<header class="bg-netflix-black sticky top-0 z-50 w-full border-b border-zinc-800">
<div class="container mx-auto px-4 md:px-8 py-4 flex justify-between items-center">
<div class="flex items-center gap-4">
<!-- Netflix "N" Icon SVG -->
<svg viewBox="0 0 100 150" fill="#E50914" height="40" class="w-auto">
<path d="M 0 150 L 0 0 L 33 0 L 33 75 C 33 75 40 50 65 50 C 90 50 100 75 100 75 L 100 150 L 66 150 L 66 75 C 66 75 60 50 40 50 C 20 50 0 75 0 75 L 0 150 Z"></path>
</svg>
<h1 class="text-xl md:text-3xl font-bold text-white">Chaos Command Center</h1>
</div>
<nav class="flex items-center gap-4">
<a href="index.html" class="text-sm md:text-base font-semibold text-white border-b-2 border-netflix-red pb-1">Dashboard</a>
<a href="simulation.html" class="text-sm md:text-base font-semibold text-netflix-gray hover:text-white transition-colors">Simulation</a>
</nav>
</div>
</header>

<!-- Main Content Grid -->
<main class="flex-grow container mx-auto p-4 md:p-8 grid grid-cols-1 lg:grid-cols-3 gap-6">

<!-- Left Column -->
<div class="lg:col-span-2 flex flex-col gap-6">

<!-- Analytics Chart -->
<div class="widget rounded-lg shadow-lg p-6">
<h2 class="text-2xl font-bold text-white mb-4">Event Analytics</h2>
<div class="h-64 md:h-80">
<canvas id="analyticsChart"></canvas>
</div>
</div>

<!-- Dependency Map -->
<div class="widget rounded-lg shadow-lg p-6">
<h2 class="text-2xl font-bold text-white mb-6">Service Dependency Map</h2>
<div class="flex flex-col md:flex-row justify-around items-center space-y-4 md:space-y-0 text-center">

<div class="service-node p-4 bg-zinc-800 rounded-lg shadow">
<span class="text-sm font-semibold text-white">User/Client</span>
</div>

<svg class="w-12 h-12 text-netflix-gray hidden md:block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
<svg class="w-12 h-12 text-netflix-gray md:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17l4 4m0 0l-4 4m4-4V3"></path></svg>


<div class="service-node p-4 bg-zinc-800 rounded-lg shadow">
<span class="text-sm font-semibold text-white">API Gateway</span>
</div>

<svg class="w-12 h-12 text-netflix-gray hidden md:block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
<svg class="w-12 h-12 text-netflix-gray md:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17l4 4m0 0l-4 4m4-4V3"></path></svg>


<div class="flex flex-col space-y-4">
<div class="service-node p-3 bg-zinc-700 rounded-lg shadow text-xs">Auth Service</div>
<div class="service-node p-3 bg-zinc-700 rounded-lg shadow text-xs">Recommendations API</div>
<div class="service-node p-3 bg-zinc-700 rounded-lg shadow text-xs">Streaming CDN</div>
</div>
</div>
</div>

</div>

<!-- Right Column (Sidebar) -->
<div class="lg:col-span-1 flex flex-col gap-6">

<!-- Quick Actions -->
<div class="widget rounded-lg shadow-lg p-6">
<h2 class="text-2xl font-bold text-white mb-4">Quick Actions</h2>
<a href="simulation.html" class="w-full flex items-center justify-center gap-2 bg-netflix-red hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg shadow-lg transform transition-transform duration-150 hover:scale-105">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
</svg>
RUN SIMULATION
</a>
</div>

<!-- Service Status -->
<div class="widget rounded-lg shadow-lg p-6 flex-grow flex flex-col">
<h2 class="text-2xl font-bold text-white mb-4">Service Status</h2>
<div class="flex-grow overflow-y-auto space-y-4 pr-2">

<div class="flex items-center justify-between">
<span class="text-base text-white">API Gateway</span>
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-green-500"></div>
<span class="text-sm text-green-400">Operational</span>
</div>
</div>

<div class="flex items-center justify-between">
<span class="text-base text-white">Auth Service</span>
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-green-500"></div>
<span class="text-sm text-green-400">Operational</span>
</div>
</div>

<div class="flex items-center justify-between">
<span class="text-base text-white">Recommendations API</span>
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-green-500"></div>
<span class="text-sm text-green-400">Operational</span>
</div>
</div>

<div class="flex items-center justify-between">
<span class="text-base text-white">Payment Gateway</span>
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-yellow-500 animate-pulse"></div>
<span class="text-sm text-yellow-400">Degraded</span>
</div>
</div>

<div class="flex items-center justify-between">
<span class="text-base text-white">Streaming CDN</span>
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-green-500"></div>
<span class="text-sm text-green-400">Operational</span>
</div>
</div>

<div class="flex items-center justify-between">
<span class="text-base text-white">User DB (Primary)</span>
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-green-500"></div>
<span class="text-sm text-green-400">Operational</span>
</div>
</div>

<div class="flex items-center justify-between">
<span class="text-base text-white">User DB (Replica)</span>
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-red-500 animate-pulse"></div>
<span class="text-sm text-red-400">Offline</span>
</div>
</div>

</div>
</div>
</div>
</main>

<script>
document.addEventListener('DOMContentLoaded', () => {
const ctx = document.getElementById('analyticsChart').getContext('2d');

const gradient = ctx.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(0, 'rgba(229, 9, 20, 0.5)');
gradient.addColorStop(1, 'rgba(229, 9, 20, 0)');

const analyticsChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'],
datasets: [{
label: 'Chaos Events',
data: [1, 0, 2, 1, 3, 0, 1, 4, 2],
backgroundColor: gradient,
borderColor: '#E50914',
borderWidth: 2,
pointBackgroundColor: '#E50914',
pointRadius: 4,
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(179, 179, 179, 0.2)'
},
ticks: {
color: '#b3b3b3',
stepSize: 1
}
},
x: {
grid: {
display: false
},
ticks: {
color: '#b3b3b3'
}
}
},
plugins: {
legend: {
display: false
}
}
}
});
});
</script>

</body>
</html>
Loading