...
This commit is contained in:
739
_pkg2_dont_use/heroagent/web/static/css/admin.css
Normal file
739
_pkg2_dont_use/heroagent/web/static/css/admin.css
Normal file
@@ -0,0 +1,739 @@
|
||||
/* Admin Dashboard Styles */
|
||||
|
||||
/* Base Font Size and Typography */
|
||||
:root {
|
||||
--pico-font-size: 16px;
|
||||
--pico-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--pico-line-height: 1.5;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
font-family: var(--pico-font-family);
|
||||
line-height: var(--pico-line-height);
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr;
|
||||
grid-template-rows: 60px 1fr;
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"sidebar main";
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* Header - Documentation Style */
|
||||
header {
|
||||
grid-area: header;
|
||||
padding: 0 2rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background-color: #1a1f2b;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.top-nav .brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.top-nav .brand a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
color: #00a8ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
filter: drop-shadow(0 0 2px rgba(0, 168, 255, 0.5));
|
||||
}
|
||||
|
||||
/* Documentation-style navigation */
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
text-decoration: none;
|
||||
color: var(--pico-muted-color);
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 0;
|
||||
position: relative;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-link:hover, .nav-link.active {
|
||||
color: var(--pico-primary);
|
||||
}
|
||||
|
||||
.nav-link.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -0.8rem;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: var(--pico-primary);
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
width: auto !important;
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
grid-area: sidebar;
|
||||
background-color: #1a1f2b;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
height: calc(100vh - 60px);
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
left: 0;
|
||||
width: 300px;
|
||||
color: #c5d0e6;
|
||||
z-index: 100;
|
||||
font-family: var(--pico-font-family);
|
||||
font-size: var(--pico-font-size);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
padding: 1rem 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Sidebar Navigation */
|
||||
.sidebar-wrapper {
|
||||
width: 100%;
|
||||
padding: 10px 0px;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar-section {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Collapsible sidebar sections */
|
||||
.sidebar-heading.toggle {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar-heading.toggle::after {
|
||||
content: '▼';
|
||||
font-size: 10px;
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar-section.collapsed .sidebar-heading.toggle::after {
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
}
|
||||
|
||||
.sidebar-section.collapsed .sidebar-content-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-heading {
|
||||
font-size: var(--pico-font-size);
|
||||
font-weight: 600;
|
||||
color: #8c9db5;
|
||||
padding: 0.25rem 1.25rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.sidebar-link {
|
||||
display: block;
|
||||
padding: 0.35rem 1.25rem;
|
||||
color: #a3b3cc;
|
||||
text-decoration: none;
|
||||
font-size: var(--pico-font-size);
|
||||
border-left: 3px solid transparent;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar-link.child {
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
|
||||
.sidebar-link:hover {
|
||||
color: #00a8ff;
|
||||
background-color: rgba(0, 168, 255, 0.05);
|
||||
}
|
||||
|
||||
.sidebar-link.active {
|
||||
color: #00a8ff;
|
||||
background-color: rgba(0, 168, 255, 0.1);
|
||||
border-left-color: #00a8ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Vertical menu styling */
|
||||
.sidebar-menu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1.25rem;
|
||||
color: #a3b3cc;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
border-left: 3px solid transparent;
|
||||
transition: all 0.2s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.menu-link:hover {
|
||||
color: #00a8ff;
|
||||
background-color: rgba(0, 168, 255, 0.05);
|
||||
}
|
||||
|
||||
.menu-link.active {
|
||||
color: #00a8ff;
|
||||
background-color: rgba(0, 168, 255, 0.1);
|
||||
border-left-color: #00a8ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Submenu styling */
|
||||
.has-submenu > .menu-link {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.has-submenu > .menu-link:after {
|
||||
content: '▼';
|
||||
font-size: 0.6rem;
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.has-submenu.open > .menu-link:after {
|
||||
transform: translateY(-50%) rotate(180deg);
|
||||
}
|
||||
|
||||
.submenu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.has-submenu.open > .submenu {
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.submenu .menu-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.submenu .menu-link {
|
||||
padding-left: 2.5rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
main {
|
||||
grid-area: main;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
margin-top: 0;
|
||||
font-family: var(--pico-font-family);
|
||||
font-size: var(--pico-font-size);
|
||||
line-height: var(--pico-line-height);
|
||||
color: #c5d0e6;
|
||||
background-color: #1a1f2b;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Content Section */
|
||||
.content-section {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Services Page */
|
||||
.services-page {
|
||||
padding: 0;
|
||||
margin-top: -60px;
|
||||
}
|
||||
|
||||
/* Removed section-header styling as it's not needed */
|
||||
|
||||
.section-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.1rem;
|
||||
margin-top: 0;
|
||||
color: #e0e6f0;
|
||||
padding-top: 0;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.section-description {
|
||||
font-size: 0.85rem;
|
||||
color: #8c9db5;
|
||||
margin-bottom: 0.25rem;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
/* Typography consistency */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--pico-font-family);
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h1 { font-size: 2rem; }
|
||||
h2 { font-size: 1.75rem; }
|
||||
h3 { font-size: 1.5rem; }
|
||||
h4 { font-size: 1.25rem; }
|
||||
h5 { font-size: 1.1rem; }
|
||||
h6 { font-size: 1rem; }
|
||||
|
||||
p, ul, ol, dl, table {
|
||||
font-size: var(--pico-font-size);
|
||||
line-height: var(--pico-line-height);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Cards and panels */
|
||||
.card, .panel {
|
||||
font-size: var(--pico-font-size);
|
||||
line-height: var(--pico-line-height);
|
||||
background-color: #232836;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.card-title, .panel-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #e0e6f0;
|
||||
padding-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
table {
|
||||
font-size: 0.9rem;
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #8c9db5;
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
color: #c5d0e6;
|
||||
}
|
||||
|
||||
tr:hover td {
|
||||
background-color: rgba(0, 168, 255, 0.05);
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
input, select, textarea, button {
|
||||
font-family: var(--pico-font-family);
|
||||
font-size: var(--pico-font-size);
|
||||
background-color: #2a303e;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
color: #c5d0e6;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #8c9db5;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: 0 0.5rem;
|
||||
color: #8c9db5;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
button, .button {
|
||||
background-color: #00a8ff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.4rem 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
width: auto;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
button:hover, .button:hover {
|
||||
background-color: #0090e0;
|
||||
}
|
||||
|
||||
button.secondary, .button.secondary {
|
||||
background-color: #2a303e;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #a3b3cc;
|
||||
}
|
||||
|
||||
button.secondary:hover, .button.secondary:hover {
|
||||
background-color: #343d4f;
|
||||
}
|
||||
|
||||
button.danger, .button.danger {
|
||||
background-color: #e53935;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button-group button.danger,
|
||||
.button-group .button.danger {
|
||||
background-color: #e53935;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button.danger:hover, .button.danger:hover,
|
||||
.button-group button.danger:hover,
|
||||
.button-group .button.danger:hover {
|
||||
background-color: #c62828;
|
||||
}
|
||||
|
||||
/* Section layouts */
|
||||
.content-section {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Removed duplicate section-title definition */
|
||||
|
||||
.section-description {
|
||||
color: #8c9db5;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Grid layouts */
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Two-column layout */
|
||||
.two-column-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 0.75rem;
|
||||
align-items: start;
|
||||
margin-top: 0.25rem;
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
|
||||
/* Badges */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.badge.success {
|
||||
background-color: rgba(38, 194, 129, 0.15);
|
||||
color: #26c281;
|
||||
border: 1px solid rgba(38, 194, 129, 0.3);
|
||||
}
|
||||
|
||||
.badge.warning {
|
||||
background-color: rgba(255, 168, 0, 0.15);
|
||||
color: #ffa800;
|
||||
border: 1px solid rgba(255, 168, 0, 0.3);
|
||||
}
|
||||
|
||||
.badge.danger {
|
||||
background-color: rgba(255, 76, 76, 0.15);
|
||||
color: #ff4c4c;
|
||||
border: 1px solid rgba(255, 76, 76, 0.3);
|
||||
}
|
||||
|
||||
/* Log Panel */
|
||||
.log-panel {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 60px;
|
||||
width: 400px;
|
||||
height: calc(100vh - 60px);
|
||||
background-color: var(--pico-card-background-color);
|
||||
border-left: 1px solid var(--pico-muted-border-color);
|
||||
padding: 1rem;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.3s ease;
|
||||
z-index: 90;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.log-panel.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.log-toggle {
|
||||
position: fixed;
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.log-content {
|
||||
font-family: monospace;
|
||||
white-space: pre-wrap;
|
||||
font-size: 0.85rem;
|
||||
background-color: var(--pico-code-background-color);
|
||||
padding: 1rem;
|
||||
border-radius: var(--pico-border-radius);
|
||||
height: calc(100% - 3rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"main";
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 60px;
|
||||
width: 250px;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease;
|
||||
z-index: 95;
|
||||
}
|
||||
|
||||
.sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.menu-toggle {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Log Level Styles */
|
||||
.log-info {
|
||||
background-color: rgba(13, 110, 253, 0.15);
|
||||
color: #0d6efd;
|
||||
border-radius: 4px;
|
||||
padding: 2px 6px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.log-warning {
|
||||
background-color: rgba(255, 193, 7, 0.15);
|
||||
color: #ffc107;
|
||||
border-radius: 4px;
|
||||
padding: 2px 6px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.log-error {
|
||||
background-color: rgba(220, 53, 69, 0.15);
|
||||
color: #dc3545;
|
||||
border-radius: 4px;
|
||||
padding: 2px 6px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.log-debug {
|
||||
background-color: rgba(108, 117, 125, 0.15);
|
||||
color: #6c757d;
|
||||
border-radius: 4px;
|
||||
padding: 2px 6px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Log Page Specific Styles */
|
||||
.flex-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.filter-controls {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.filter-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.filter-button {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.filter-apply {
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.6rem 1rem;
|
||||
}
|
||||
|
||||
/* Pagination improvements */
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 0;
|
||||
margin-top: 1rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
font-size: 0.9rem;
|
||||
color: #8c9db5;
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.pagination-btn {
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
/* Utility classes */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
76
_pkg2_dont_use/heroagent/web/static/css/jobs.css
Normal file
76
_pkg2_dont_use/heroagent/web/static/css/jobs.css
Normal file
@@ -0,0 +1,76 @@
|
||||
/* Jobs page styles */
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85em;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
background-color: #f0f0f0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.status-running {
|
||||
background-color: #e3f2fd;
|
||||
color: #0d47a1;
|
||||
}
|
||||
|
||||
.status-completed {
|
||||
background-color: #e8f5e9;
|
||||
color: #1b5e20;
|
||||
}
|
||||
|
||||
.status-failed {
|
||||
background-color: #ffebee;
|
||||
color: #b71c1c;
|
||||
}
|
||||
|
||||
.status-scheduled {
|
||||
background-color: #fff8e1;
|
||||
color: #ff6f00;
|
||||
}
|
||||
|
||||
.status-canceled {
|
||||
background-color: #ede7f6;
|
||||
color: #4527a0;
|
||||
}
|
||||
|
||||
/* Form styles */
|
||||
#jobs-filter-form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Table styles */
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.table th {
|
||||
font-weight: 600;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.table tr:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.button-small {
|
||||
padding: 4px 8px;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
99
_pkg2_dont_use/heroagent/web/static/css/logs.css
Normal file
99
_pkg2_dont_use/heroagent/web/static/css/logs.css
Normal file
@@ -0,0 +1,99 @@
|
||||
/* Styles for the logs page */
|
||||
|
||||
.log-container {
|
||||
margin-top: 1.5rem;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.log-table {
|
||||
overflow-x: auto;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.log-table table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.log-table th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--card-background-color);
|
||||
z-index: 10;
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid var(--card-border-color);
|
||||
}
|
||||
|
||||
.log-table td {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px solid var(--card-border-color);
|
||||
font-family: var(--font-family-monospace);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Log level styles */
|
||||
.log-info {
|
||||
color: var(--primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.log-warning {
|
||||
color: var(--warning);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.log-error {
|
||||
color: var(--danger);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Filter controls */
|
||||
.filter-controls {
|
||||
background-color: var(--card-background-color);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border: 1px solid var(--card-border-color);
|
||||
}
|
||||
|
||||
.filter-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.filter-button {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.pagination-btn {
|
||||
padding: 0.25rem 0.75rem;
|
||||
}
|
||||
|
||||
/* Loading indicator */
|
||||
.loading-indicator {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 200px;
|
||||
color: var(--muted-color);
|
||||
}
|
||||
4
_pkg2_dont_use/heroagent/web/static/css/pico.min.css
vendored
Normal file
4
_pkg2_dont_use/heroagent/web/static/css/pico.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
6
_pkg2_dont_use/heroagent/web/static/css/unpoly.min.css
vendored
Normal file
6
_pkg2_dont_use/heroagent/web/static/css/unpoly.min.css
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
[hidden][hidden]{display:none !important}
|
||||
up-wrapper{display:inline-block}
|
||||
up-bounds{position:absolute}.up-focus-hidden:focus-visible{outline-color:rgba(0,0,0,0) !important;outline-style:none !important}body.up-scrollbar-away{padding-right:calc(var(--up-scrollbar-width) + var(--up-original-padding-right)) !important}body.up-scrollbar-away,html:has(>body.up-scrollbar-away){overflow-y:hidden !important}body.up-scrollbar-away .up-scrollbar-away{right:calc(var(--up-scrollbar-width) + var(--up-original-right)) !important}
|
||||
.up-request-loader{display:none}up-progress-bar{position:fixed;top:0;left:0;z-index:999999999;height:3px;background-color:#007bff}
|
||||
up-focus-trap{position:fixed;top:0;left:0;width:0;height:0}up-cover-viewport,up-drawer-viewport,up-modal-viewport,up-drawer-backdrop,up-modal-backdrop,up-cover,up-drawer,up-modal{top:0;left:0;bottom:0;right:0}up-drawer-box,up-modal-box{box-shadow:0 0 10px 1px rgba(0,0,0,.3)}up-popup{box-shadow:0 0 4px rgba(0,0,0,.3)}up-popup:focus,up-cover-box:focus,up-drawer-box:focus,up-modal-box:focus,up-cover:focus,up-drawer:focus,up-modal:focus,up-popup:focus-visible,up-cover-box:focus-visible,up-drawer-box:focus-visible,up-modal-box:focus-visible,up-cover:focus-visible,up-drawer:focus-visible,up-modal:focus-visible{outline:none}up-cover,up-drawer,up-modal{z-index:2000;position:fixed}up-drawer-backdrop,up-modal-backdrop{position:absolute;background:rgba(0,0,0,.4)}up-cover-viewport,up-drawer-viewport,up-modal-viewport{position:absolute;overflow-y:scroll;overflow-x:hidden;overscroll-behavior:contain;display:flex;align-items:flex-start;justify-content:center}up-popup,up-cover-box,up-drawer-box,up-modal-box{position:relative;box-sizing:border-box;max-width:100%;background-color:#fff;padding:20px;overflow-x:hidden}up-popup-content,up-cover-content,up-drawer-content,up-modal-content{display:block}up-popup{z-index:1000}up-popup-dismiss,up-cover-dismiss,up-drawer-dismiss,up-modal-dismiss{color:#888;position:absolute;top:10px;right:10px;font-size:1.7rem;line-height:.5;cursor:pointer}up-modal[nesting="0"] up-modal-viewport{padding:25px 15px}up-modal[nesting="1"] up-modal-viewport{padding:50px 30px}up-modal[nesting="2"] up-modal-viewport{padding:75px 45px}up-modal[nesting="3"] up-modal-viewport{padding:100px 60px}up-modal[nesting="4"] up-modal-viewport{padding:125px 75px}up-modal[size=small] up-modal-box{width:350px}up-modal[size=medium] up-modal-box{width:650px}up-modal[size=large] up-modal-box{width:1000px}up-modal[size=grow] up-modal-box{width:auto}up-modal[size=full] up-modal-box{width:100%}up-drawer-viewport{justify-content:flex-start}up-drawer[position=right] up-drawer-viewport{justify-content:flex-end}up-drawer-box{min-height:100vh}up-drawer[size=small] up-drawer-box{width:150px}up-drawer[size=medium] up-drawer-box{width:340px}up-drawer[size=large] up-drawer-box{width:600px}up-drawer[size=grow] up-drawer-box{width:auto}up-drawer[size=full] up-drawer-box{width:100%}up-cover-box{width:100%;min-height:100vh;padding:0}up-popup{padding:15px;text-align:left}up-popup[size=small]{width:180px}up-popup[size=medium]{width:300px}up-popup[size=large]{width:550px}up-popup[size=grow] up-popup{width:auto}up-popup[size=full] up-popup{width:100%}
|
||||
[up-clickable][role=link]{cursor:pointer}[up-expand]:not([role]),[up-expand][role=link]{cursor:pointer}
|
||||
1
_pkg2_dont_use/heroagent/web/static/favicon.ico
Normal file
1
_pkg2_dont_use/heroagent/web/static/favicon.ico
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
11
_pkg2_dont_use/heroagent/web/static/img/flower.svg
Normal file
11
_pkg2_dont_use/heroagent/web/static/img/flower.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Flower Icon</title>
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<circle fill="#4CAF50" cx="32" cy="32" r="8"></circle>
|
||||
<path d="M32,16 C36.418278,16 40,19.581722 40,24 C40,28.418278 36.418278,32 32,32 C27.581722,32 24,28.418278 24,24 C24,19.581722 27.581722,16 32,16 Z" fill="#8BC34A" transform="translate(32.000000, 24.000000) rotate(-45.000000) translate(-32.000000, -24.000000)"></path>
|
||||
<path d="M32,16 C36.418278,16 40,19.581722 40,24 C40,28.418278 36.418278,32 32,32 C27.581722,32 24,28.418278 24,24 C24,19.581722 27.581722,16 32,16 Z" fill="#CDDC39" transform="translate(32.000000, 24.000000) rotate(45.000000) translate(-32.000000, -24.000000)"></path>
|
||||
<path d="M32,32 C36.418278,32 40,35.581722 40,40 C40,44.418278 36.418278,48 32,48 C27.581722,48 24,44.418278 24,40 C24,35.581722 27.581722,32 32,32 Z" fill="#FF9800" transform="translate(32.000000, 40.000000) rotate(-45.000000) translate(-32.000000, -40.000000)"></path>
|
||||
<path d="M32,32 C36.418278,32 40,35.581722 40,40 C40,44.418278 36.418278,48 32,48 C27.581722,48 24,44.418278 24,40 C24,35.581722 27.581722,32 32,32 Z" fill="#FFC107" transform="translate(32.000000, 40.000000) rotate(45.000000) translate(-32.000000, -40.000000)"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
23
_pkg2_dont_use/heroagent/web/static/img/hero-icon.svg
Normal file
23
_pkg2_dont_use/heroagent/web/static/img/hero-icon.svg
Normal file
@@ -0,0 +1,23 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="heroGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#00A8FF" />
|
||||
<stop offset="100%" stop-color="#0077CC" />
|
||||
</linearGradient>
|
||||
<filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
|
||||
<feGaussianBlur stdDeviation="1" result="blur" />
|
||||
<feComposite in="SourceGraphic" in2="blur" operator="over" />
|
||||
</filter>
|
||||
</defs>
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" filter="url(#glow)">
|
||||
<!-- Hero mask/shield shape -->
|
||||
<path d="M12,2 L21,6 C21,13.5 18,19 12,22 C6,19 3,13.5 3,6 L12,2 Z" fill="url(#heroGradient)" />
|
||||
|
||||
<!-- Stylized H for Hero -->
|
||||
<path d="M8,7 L8,17 M16,7 L16,17 M8,12 L16,12" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
|
||||
<!-- Small star/sparkle -->
|
||||
<circle cx="12" cy="5" r="1" fill="#FFFFFF" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
19
_pkg2_dont_use/heroagent/web/static/img/hero-logo.svg
Normal file
19
_pkg2_dont_use/heroagent/web/static/img/hero-logo.svg
Normal file
@@ -0,0 +1,19 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="120px" height="30px" viewBox="0 0 120 30" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<!-- Hero Icon -->
|
||||
<g transform="translate(5, 3)" fill="#00A8FF">
|
||||
<circle cx="12" cy="12" r="11" stroke="#00A8FF" stroke-width="2" fill="none"/>
|
||||
<rect x="11" y="4" width="2" height="6" rx="1"/>
|
||||
<rect x="6" y="8" width="2" height="6" rx="1"/>
|
||||
<rect x="16" y="8" width="2" height="6" rx="1"/>
|
||||
<rect x="11" y="14" width="2" height="6" rx="1"/>
|
||||
<rect x="8" y="11" width="8" height="2" rx="1"/>
|
||||
</g>
|
||||
|
||||
<!-- Text -->
|
||||
<text font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#FFFFFF">
|
||||
<tspan x="30" y="19">HeroLauncher</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 844 B |
239
_pkg2_dont_use/heroagent/web/static/js/admin.js
Normal file
239
_pkg2_dont_use/heroagent/web/static/js/admin.js
Normal file
@@ -0,0 +1,239 @@
|
||||
// Admin Dashboard JavaScript - Documentation Style
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Highlight active navigation links
|
||||
highlightActiveLinks();
|
||||
|
||||
// Setup UI toggles
|
||||
setupUIToggles();
|
||||
|
||||
// Setup search functionality
|
||||
setupSearch();
|
||||
});
|
||||
|
||||
// Highlight the current active navigation links
|
||||
function highlightActiveLinks() {
|
||||
const currentPath = window.location.pathname;
|
||||
|
||||
// Handle top navigation links
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
navLinks.forEach(link => {
|
||||
link.classList.remove('active');
|
||||
const href = link.getAttribute('href');
|
||||
|
||||
// Check if current path starts with the nav link path
|
||||
// This allows section links to be highlighted when on sub-pages
|
||||
if (currentPath === href ||
|
||||
(href !== '/admin' && currentPath.startsWith(href))) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Handle sidebar links
|
||||
const sidebarLinks = document.querySelectorAll('.doc-link');
|
||||
sidebarLinks.forEach(link => {
|
||||
link.classList.remove('active');
|
||||
if (link.getAttribute('href') === currentPath) {
|
||||
link.classList.add('active');
|
||||
|
||||
// Also highlight parent section if needed
|
||||
const parentSection = link.closest('.sidebar-section');
|
||||
if (parentSection) {
|
||||
parentSection.classList.add('active-section');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Setup UI toggle functionality
|
||||
function setupUIToggles() {
|
||||
// Toggle sidebar on mobile
|
||||
const menuToggle = document.querySelector('.menu-toggle');
|
||||
const sidebar = document.querySelector('.sidebar');
|
||||
|
||||
if (menuToggle && sidebar) {
|
||||
menuToggle.addEventListener('click', function() {
|
||||
sidebar.classList.toggle('open');
|
||||
});
|
||||
}
|
||||
|
||||
// Toggle log panel
|
||||
const logToggle = document.querySelector('.log-toggle');
|
||||
const logPanel = document.querySelector('.log-panel');
|
||||
|
||||
if (logToggle && logPanel) {
|
||||
logToggle.addEventListener('click', function() {
|
||||
logPanel.classList.toggle('open');
|
||||
});
|
||||
}
|
||||
|
||||
// Setup Docusaurus-style collapsible menu
|
||||
setupTreeviewMenu();
|
||||
}
|
||||
|
||||
// Setup sidebar navigation
|
||||
function setupTreeviewMenu() {
|
||||
// Set active sidebar links based on current URL
|
||||
setActiveSidebarLinks();
|
||||
|
||||
// Setup collapsible sections
|
||||
setupCollapsibleSections();
|
||||
}
|
||||
|
||||
// Set active sidebar links based on current URL
|
||||
function setActiveSidebarLinks() {
|
||||
const currentPath = window.location.pathname;
|
||||
|
||||
// Find all sidebar links
|
||||
const sidebarLinks = document.querySelectorAll('.sidebar-link');
|
||||
|
||||
// Remove any existing active classes
|
||||
sidebarLinks.forEach(link => {
|
||||
link.classList.remove('active');
|
||||
});
|
||||
|
||||
// Find and mark active links
|
||||
let activeFound = false;
|
||||
sidebarLinks.forEach(link => {
|
||||
const linkPath = link.getAttribute('href');
|
||||
|
||||
// Check if the current path matches or starts with the link path
|
||||
// For exact matches or if it's a parent path
|
||||
if (currentPath === linkPath ||
|
||||
(linkPath !== '/admin' && currentPath.startsWith(linkPath))) {
|
||||
// Mark this link as active
|
||||
link.classList.add('active');
|
||||
activeFound = true;
|
||||
|
||||
// Expand the parent section if this link is inside a collapsible section
|
||||
const parentSection = link.closest('.sidebar-content-section')?.parentElement;
|
||||
if (parentSection && parentSection.classList.contains('collapsible')) {
|
||||
parentSection.classList.remove('collapsed');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Setup collapsible sections
|
||||
function setupCollapsibleSections() {
|
||||
// Find all toggle headings
|
||||
const toggleHeadings = document.querySelectorAll('.sidebar-heading.toggle');
|
||||
|
||||
// Set all sections as collapsed by default
|
||||
document.querySelectorAll('.sidebar-section.collapsible').forEach(section => {
|
||||
section.classList.add('collapsed');
|
||||
});
|
||||
|
||||
toggleHeadings.forEach(heading => {
|
||||
// Add click event to toggle section
|
||||
heading.addEventListener('click', function() {
|
||||
const section = this.parentElement;
|
||||
section.classList.toggle('collapsed');
|
||||
});
|
||||
});
|
||||
|
||||
// Open the section that contains the active link
|
||||
const activeLink = document.querySelector('.sidebar-link.active');
|
||||
if (activeLink) {
|
||||
const parentSection = activeLink.closest('.sidebar-section.collapsible');
|
||||
if (parentSection) {
|
||||
parentSection.classList.remove('collapsed');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Refresh processes data without page reload
|
||||
function refreshProcesses() {
|
||||
// Show loading indicator
|
||||
const loadingIndicator = document.getElementById('refresh-loading');
|
||||
if (loadingIndicator) {
|
||||
loadingIndicator.style.display = 'inline';
|
||||
}
|
||||
|
||||
// Get the processes content element
|
||||
const tableContent = document.querySelector('.processes-table-content');
|
||||
|
||||
// Use Unpoly to refresh the content
|
||||
if (tableContent && window.up) {
|
||||
// Use Unpoly's API to reload the fragment
|
||||
up.reload('.processes-table-content', {
|
||||
url: '/admin/system/processes-data',
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
}
|
||||
}).then(() => {
|
||||
console.log('Process data refreshed successfully via Unpoly');
|
||||
}).catch(error => {
|
||||
console.error('Error refreshing processes data:', error);
|
||||
}).finally(() => {
|
||||
// Hide loading indicator
|
||||
if (loadingIndicator) {
|
||||
loadingIndicator.style.display = 'none';
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Fallback to fetch if Unpoly is not available
|
||||
fetch('/admin/system/processes-data', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Accept': 'text/html',
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
},
|
||||
cache: 'no-store'
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok: ' + response.status);
|
||||
}
|
||||
return response.text();
|
||||
})
|
||||
.then(html => {
|
||||
// Update the processes table content
|
||||
if (tableContent) {
|
||||
// Replace the table content with the new HTML
|
||||
tableContent.innerHTML = html;
|
||||
console.log('Process data refreshed successfully via fetch');
|
||||
} else {
|
||||
console.error('Could not find processes table content element');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error refreshing processes data:', error);
|
||||
})
|
||||
.finally(() => {
|
||||
// Hide loading indicator
|
||||
if (loadingIndicator) {
|
||||
loadingIndicator.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Note: Logging functionality has been moved to Unpoly-based implementation
|
||||
|
||||
// Setup search functionality
|
||||
function setupSearch() {
|
||||
const searchInput = document.querySelector('.search-box input');
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener('keyup', function(e) {
|
||||
if (e.key === 'Enter') {
|
||||
performSearch(this.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Perform search
|
||||
function performSearch(query) {
|
||||
if (!query.trim()) return;
|
||||
|
||||
// Log the search query
|
||||
window.adminLog(`Searching for: ${query}`, 'info');
|
||||
|
||||
// In a real application, this would send an AJAX request to search the docs
|
||||
// For now, just simulate a search by redirecting to a search results page
|
||||
// window.location.href = `/admin/search?q=${encodeURIComponent(query)}`;
|
||||
|
||||
// For demo purposes, show a message in the console
|
||||
console.log(`Search query: ${query}`);
|
||||
}
|
||||
89
_pkg2_dont_use/heroagent/web/static/js/charts/cpu-chart.js
Normal file
89
_pkg2_dont_use/heroagent/web/static/js/charts/cpu-chart.js
Normal file
@@ -0,0 +1,89 @@
|
||||
// CPU chart initialization and update functions
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Background color for charts
|
||||
var chartBgColor = '#1e1e2f';
|
||||
|
||||
// Initialize CPU chart
|
||||
var cpuChartDom = document.getElementById('cpu-chart');
|
||||
if (!cpuChartDom) return;
|
||||
|
||||
var cpuChart = echarts.init(cpuChartDom, {renderer: 'canvas', useDirtyRect: false, backgroundColor: chartBgColor});
|
||||
var cpuOption = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function(params) {
|
||||
// Get the PID from the data
|
||||
var pid = params.data.pid || 'N/A';
|
||||
return params.seriesName + '<br/>' +
|
||||
params.name + ' (PID: ' + pid + ')<br/>' +
|
||||
'CPU: ' + Math.round(params.value) + '%';
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 10,
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
formatter: function(name) {
|
||||
// Display full process name without truncation
|
||||
return name;
|
||||
},
|
||||
itemGap: 8,
|
||||
itemWidth: 15,
|
||||
padding: 10
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Process CPU Usage',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: true,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [{ name: 'Loading...', value: 100 }]
|
||||
}
|
||||
]
|
||||
};
|
||||
cpuChart.setOption(cpuOption);
|
||||
|
||||
// Function to update CPU chart
|
||||
window.updateCpuChart = function(processes) {
|
||||
// Calculate total CPU usage for top 5 processes
|
||||
var topProcesses = processes.slice(0, 5);
|
||||
var cpuUsageData = topProcesses.map(p => ({
|
||||
name: p.name, // Use full process name
|
||||
value: p.cpu_percent,
|
||||
pid: p.pid // Store PID for tooltip
|
||||
}));
|
||||
|
||||
// Update chart option
|
||||
cpuOption.series[0].data = cpuUsageData;
|
||||
|
||||
// Apply updated option
|
||||
cpuChart.setOption(cpuOption);
|
||||
};
|
||||
|
||||
// Handle window resize
|
||||
window.addEventListener('resize', function() {
|
||||
cpuChart && cpuChart.resize();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,96 @@
|
||||
// Memory chart initialization and update functions
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Background color for charts
|
||||
var chartBgColor = '#1e1e2f';
|
||||
|
||||
// Initialize Memory chart
|
||||
var memoryChartDom = document.getElementById('memory-chart');
|
||||
if (!memoryChartDom) return;
|
||||
|
||||
var memoryChart = echarts.init(memoryChartDom, {renderer: 'canvas', useDirtyRect: false, backgroundColor: chartBgColor});
|
||||
var memoryOption = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function(params) {
|
||||
// Get the PID from the data
|
||||
var pid = params.data.pid || 'N/A';
|
||||
return params.seriesName + '<br/>' +
|
||||
params.name + ' (PID: ' + pid + ')<br/>' +
|
||||
'Memory: ' + Math.round(params.value) + ' MB';
|
||||
},
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 10,
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
formatter: function(name) {
|
||||
// Display full process name without truncation
|
||||
return name;
|
||||
},
|
||||
itemGap: 12, // Increased gap for better readability
|
||||
itemWidth: 15,
|
||||
padding: 10
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Process Memory Usage',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: true,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [{ name: 'Loading...', value: 100 }]
|
||||
}
|
||||
]
|
||||
};
|
||||
memoryChart.setOption(memoryOption);
|
||||
|
||||
// Function to update Memory chart
|
||||
window.updateMemoryChart = function(processes) {
|
||||
// Sort processes by memory usage (descending)
|
||||
var topProcesses = processes
|
||||
.slice()
|
||||
.sort((a, b) => b.memory_mb - a.memory_mb)
|
||||
.slice(0, 5);
|
||||
|
||||
var memoryUsageData = topProcesses.map(p => ({
|
||||
name: p.name, // Use full process name
|
||||
value: p.memory_mb,
|
||||
pid: p.pid // Store PID for tooltip
|
||||
}));
|
||||
|
||||
// Update chart option
|
||||
memoryOption.series[0].data = memoryUsageData;
|
||||
|
||||
// Apply updated option
|
||||
memoryChart.setOption(memoryOption);
|
||||
};
|
||||
|
||||
// Handle window resize
|
||||
window.addEventListener('resize', function() {
|
||||
memoryChart && memoryChart.resize();
|
||||
});
|
||||
});
|
||||
116
_pkg2_dont_use/heroagent/web/static/js/charts/network-chart.js
Normal file
116
_pkg2_dont_use/heroagent/web/static/js/charts/network-chart.js
Normal file
@@ -0,0 +1,116 @@
|
||||
// Network chart initialization and update functions
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Background color for charts
|
||||
var chartBgColor = '#1e1e2f';
|
||||
|
||||
// Initialize network chart
|
||||
var networkChartDom = document.getElementById('network-chart');
|
||||
if (!networkChartDom) return;
|
||||
|
||||
var networkChart = echarts.init(networkChartDom, {renderer: 'canvas', useDirtyRect: false, backgroundColor: chartBgColor});
|
||||
var networkOption = {
|
||||
title: {
|
||||
text: 'Network Traffic',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['Upload', 'Download'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
bottom: 10
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [],
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
formatter: '{value} KB/s'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Upload',
|
||||
type: 'line',
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: 'Download',
|
||||
type: 'line',
|
||||
data: []
|
||||
}
|
||||
]
|
||||
};
|
||||
networkChart.setOption(networkOption);
|
||||
|
||||
// Data for network chart
|
||||
var timestamps = [];
|
||||
var uploadData = [];
|
||||
var downloadData = [];
|
||||
|
||||
// Function to update network chart
|
||||
window.updateNetworkChart = function(upSpeed, downSpeed) {
|
||||
// Convert speeds to KB/s for consistent units
|
||||
var upKBps = convertToKBps(upSpeed);
|
||||
var downKBps = convertToKBps(downSpeed);
|
||||
|
||||
// Add current timestamp
|
||||
var now = new Date();
|
||||
var timeString = now.getHours() + ':' +
|
||||
(now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()) + ':' +
|
||||
(now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds());
|
||||
|
||||
// Update data arrays
|
||||
timestamps.push(timeString);
|
||||
uploadData.push(upKBps);
|
||||
downloadData.push(downKBps);
|
||||
|
||||
// Keep only the last 10 data points
|
||||
if (timestamps.length > 10) {
|
||||
timestamps.shift();
|
||||
uploadData.shift();
|
||||
downloadData.shift();
|
||||
}
|
||||
|
||||
// Update chart option
|
||||
networkOption.xAxis.data = timestamps;
|
||||
networkOption.series[0].data = uploadData;
|
||||
networkOption.series[1].data = downloadData;
|
||||
|
||||
// Apply updated option
|
||||
networkChart.setOption(networkOption);
|
||||
};
|
||||
|
||||
// Helper function to convert network speeds to KB/s
|
||||
function convertToKBps(speedString) {
|
||||
var value = parseFloat(speedString);
|
||||
var unit = speedString.replace(/[\d.]/g, '');
|
||||
|
||||
if (unit === 'Mbps') {
|
||||
return value * 125; // 1 Mbps = 125 KB/s
|
||||
} else if (unit === 'Kbps') {
|
||||
return value / 8; // 1 Kbps = 0.125 KB/s
|
||||
} else if (unit === 'Gbps') {
|
||||
return value * 125000; // 1 Gbps = 125000 KB/s
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Handle window resize
|
||||
window.addEventListener('resize', function() {
|
||||
networkChart && networkChart.resize();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,88 @@
|
||||
// Data fetching functions for system stats
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Function to fetch hardware stats
|
||||
function fetchHardwareStats() {
|
||||
fetch('/api/hardware-stats')
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
// Extract network speeds
|
||||
var upSpeed = data.network && data.network.upload_speed ? data.network.upload_speed : '0Mbps';
|
||||
var downSpeed = data.network && data.network.download_speed ? data.network.download_speed : '0Mbps';
|
||||
|
||||
// Update the network chart
|
||||
if (window.updateNetworkChart) {
|
||||
window.updateNetworkChart(upSpeed, downSpeed);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching hardware stats:', error);
|
||||
});
|
||||
}
|
||||
|
||||
// Function to fetch process stats
|
||||
function fetchProcessStats() {
|
||||
fetch('/api/process-stats')
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
// Update the CPU and Memory charts with new data
|
||||
if (window.updateCpuChart && data.processes) {
|
||||
window.updateCpuChart(data.processes);
|
||||
}
|
||||
if (window.updateMemoryChart && data.processes) {
|
||||
window.updateMemoryChart(data.processes);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching process stats:', error);
|
||||
});
|
||||
}
|
||||
|
||||
// Function to fetch all stats
|
||||
function fetchAllStats() {
|
||||
fetchHardwareStats();
|
||||
fetchProcessStats();
|
||||
|
||||
// Schedule the next update - use requestAnimationFrame for smoother updates
|
||||
requestAnimationFrame(function() {
|
||||
setTimeout(fetchAllStats, 2000); // Update every 2 seconds
|
||||
});
|
||||
}
|
||||
|
||||
// Start fetching all stats if we're on the system info page
|
||||
if (document.getElementById('cpu-chart') ||
|
||||
document.getElementById('memory-chart') ||
|
||||
document.getElementById('network-chart')) {
|
||||
fetchAllStats();
|
||||
}
|
||||
|
||||
// Also update the chart when new hardware stats are loaded via Unpoly
|
||||
document.addEventListener('up:fragment:loaded', function(event) {
|
||||
if (event.target && event.target.classList.contains('hardware-stats')) {
|
||||
// Extract network speeds from the table
|
||||
var networkCell = event.target.querySelector('tr:nth-child(4) td');
|
||||
if (networkCell) {
|
||||
var networkText = networkCell.textContent;
|
||||
var upMatch = networkText.match(/Up: ([\d.]+Mbps)/);
|
||||
var downMatch = networkText.match(/Down: ([\d.]+Mbps)/);
|
||||
|
||||
var upSpeed = upMatch ? upMatch[1] : '0Mbps';
|
||||
var downSpeed = downMatch ? downMatch[1] : '0Mbps';
|
||||
|
||||
// Update the chart with new data
|
||||
if (window.updateNetworkChart) {
|
||||
window.updateNetworkChart(upSpeed, downSpeed);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
45
_pkg2_dont_use/heroagent/web/static/js/echarts/echarts.min.js
vendored
Normal file
45
_pkg2_dont_use/heroagent/web/static/js/echarts/echarts.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
305
_pkg2_dont_use/heroagent/web/static/js/service-logs.js
Normal file
305
_pkg2_dont_use/heroagent/web/static/js/service-logs.js
Normal file
@@ -0,0 +1,305 @@
|
||||
// Variables for logs functionality
|
||||
let currentServiceName = '';
|
||||
let autoRefreshEnabled = false;
|
||||
let autoRefreshInterval = null;
|
||||
const AUTO_REFRESH_RATE = 3000; // 3 seconds
|
||||
|
||||
// Function to show process logs
|
||||
function showProcessLogs(name) {
|
||||
currentServiceName = name;
|
||||
|
||||
// Create modal if it doesn't exist
|
||||
let modal = document.getElementById('logs-modal');
|
||||
if (!modal) {
|
||||
modal = createLogsModal();
|
||||
}
|
||||
|
||||
document.getElementById('logs-modal-title').textContent = `Service Logs: ${name}`;
|
||||
modal.style.display = 'block';
|
||||
fetchProcessLogs(name);
|
||||
}
|
||||
|
||||
// Function to create the logs modal
|
||||
function createLogsModal() {
|
||||
const modal = document.createElement('div');
|
||||
modal.id = 'logs-modal';
|
||||
modal.className = 'modal';
|
||||
modal.style.display = 'none';
|
||||
modal.innerHTML = `
|
||||
<div class="modal-background" onclick="closeLogsModal()"></div>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 id="logs-modal-title">Service Logs</h3>
|
||||
<span class="close" onclick="closeLogsModal()">×</span>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<pre id="logs-content">Loading logs...</pre>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<label class="auto-refresh-toggle">
|
||||
<input type="checkbox" id="auto-refresh-checkbox" onchange="toggleAutoRefresh()">
|
||||
<span>Auto-refresh</span>
|
||||
</label>
|
||||
<button class="button secondary" onclick="closeLogsModal()">Close</button>
|
||||
<button class="button primary" onclick="refreshLogs()">Refresh</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(modal);
|
||||
|
||||
// Add modal styles
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin: 10% auto;
|
||||
padding: 0;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
max-width: 800px;
|
||||
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 10px 15px;
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: #aaa;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 15px;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-body pre {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
background-color: #f8f9fa;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dee2e6;
|
||||
font-family: monospace;
|
||||
margin: 0;
|
||||
height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 10px 15px;
|
||||
background-color: #f8f9fa;
|
||||
border-top: 1px solid #dee2e6;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.auto-refresh-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.auto-refresh-toggle input {
|
||||
margin-right: 5px;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
return modal;
|
||||
}
|
||||
|
||||
// Function to close the logs modal
|
||||
function closeLogsModal() {
|
||||
const modal = document.getElementById('logs-modal');
|
||||
if (modal) {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
|
||||
// Disable auto-refresh when closing the modal
|
||||
disableAutoRefresh();
|
||||
currentServiceName = '';
|
||||
}
|
||||
|
||||
// Function to fetch process logs
|
||||
function fetchProcessLogs(name, lines = 10000) {
|
||||
const formData = new FormData();
|
||||
formData.append('name', name);
|
||||
formData.append('lines', lines);
|
||||
|
||||
const logsContent = document.getElementById('logs-content');
|
||||
if (!logsContent) return;
|
||||
|
||||
// Save scroll position if auto-refreshing
|
||||
const isAutoRefresh = autoRefreshEnabled;
|
||||
const scrollTop = isAutoRefresh ? logsContent.scrollTop : 0;
|
||||
const scrollHeight = isAutoRefresh ? logsContent.scrollHeight : 0;
|
||||
const clientHeight = isAutoRefresh ? logsContent.clientHeight : 0;
|
||||
const wasScrolledToBottom = scrollHeight - scrollTop <= clientHeight + 5; // 5px tolerance
|
||||
|
||||
// Only show loading indicator on first load, not during auto-refresh
|
||||
if (!isAutoRefresh) {
|
||||
logsContent.textContent = 'Loading logs...';
|
||||
}
|
||||
|
||||
fetch('/admin/services/logs', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.error) {
|
||||
logsContent.textContent = `Error: ${data.error}`;
|
||||
} else {
|
||||
// Clean up the logs by removing **RESULT** and **ENDRESULT** markers
|
||||
let cleanedLogs = data.logs || 'No logs available';
|
||||
cleanedLogs = cleanedLogs.replace(/\*\*RESULT\*\*/g, '');
|
||||
cleanedLogs = cleanedLogs.replace(/\*\*ENDRESULT\*\*/g, '');
|
||||
// Trim extra whitespace
|
||||
cleanedLogs = cleanedLogs.trim();
|
||||
|
||||
// Format the logs with stderr lines in red
|
||||
if (cleanedLogs.length > 0) {
|
||||
// Clear the logs content
|
||||
logsContent.textContent = '';
|
||||
|
||||
// Split the logs into lines and process each line
|
||||
const lines = cleanedLogs.split('\n');
|
||||
lines.forEach(line => {
|
||||
const logLine = document.createElement('div');
|
||||
|
||||
// Check if this is a stderr line (starts with timestamp followed by E)
|
||||
if (line.match(/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2} E /)) {
|
||||
logLine.className = 'stderr-log';
|
||||
logLine.style.color = '#ff3333'; // Red color for stderr
|
||||
}
|
||||
|
||||
logLine.textContent = line;
|
||||
logsContent.appendChild(logLine);
|
||||
});
|
||||
|
||||
// Add some styling for the pre element to maintain formatting
|
||||
logsContent.style.fontFamily = 'monospace';
|
||||
logsContent.style.whiteSpace = 'pre-wrap';
|
||||
|
||||
// Scroll to bottom for first load or if auto-refreshing and was at bottom
|
||||
if (!isAutoRefresh || wasScrolledToBottom) {
|
||||
// Scroll to the bottom of the logs
|
||||
logsContent.scrollTop = logsContent.scrollHeight;
|
||||
} else {
|
||||
// For auto-refresh when not at bottom, maintain the same scroll position
|
||||
logsContent.scrollTop = scrollTop;
|
||||
}
|
||||
} else {
|
||||
logsContent.textContent = 'No logs available';
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
logsContent.textContent = `Error loading logs: ${error.message}`;
|
||||
});
|
||||
}
|
||||
|
||||
// Function to refresh logs for the current service
|
||||
function refreshLogs() {
|
||||
if (currentServiceName) {
|
||||
fetchProcessLogs(currentServiceName);
|
||||
}
|
||||
}
|
||||
|
||||
// Function to toggle auto-refresh
|
||||
function toggleAutoRefresh() {
|
||||
const checkbox = document.getElementById('auto-refresh-checkbox');
|
||||
if (checkbox && checkbox.checked) {
|
||||
enableAutoRefresh();
|
||||
} else {
|
||||
disableAutoRefresh();
|
||||
}
|
||||
}
|
||||
|
||||
// Function to enable auto-refresh
|
||||
function enableAutoRefresh() {
|
||||
// Don't create multiple intervals
|
||||
if (autoRefreshInterval) {
|
||||
clearInterval(autoRefreshInterval);
|
||||
}
|
||||
|
||||
// Set the flag
|
||||
autoRefreshEnabled = true;
|
||||
|
||||
// Create the interval
|
||||
autoRefreshInterval = setInterval(() => {
|
||||
if (currentServiceName) {
|
||||
fetchProcessLogs(currentServiceName);
|
||||
}
|
||||
}, AUTO_REFRESH_RATE);
|
||||
|
||||
console.log('Auto-refresh enabled with interval:', AUTO_REFRESH_RATE, 'ms');
|
||||
}
|
||||
|
||||
// Function to disable auto-refresh
|
||||
function disableAutoRefresh() {
|
||||
autoRefreshEnabled = false;
|
||||
|
||||
if (autoRefreshInterval) {
|
||||
clearInterval(autoRefreshInterval);
|
||||
autoRefreshInterval = null;
|
||||
}
|
||||
|
||||
// Uncheck the checkbox if it exists
|
||||
const checkbox = document.getElementById('auto-refresh-checkbox');
|
||||
if (checkbox) {
|
||||
checkbox.checked = false;
|
||||
}
|
||||
|
||||
console.log('Auto-refresh disabled');
|
||||
}
|
||||
|
||||
// Close modal when clicking outside of it
|
||||
window.addEventListener('click', function(event) {
|
||||
const modal = document.getElementById('logs-modal');
|
||||
if (modal && event.target === modal) {
|
||||
closeLogsModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Allow ESC key to close the modal
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'Escape') {
|
||||
closeLogsModal();
|
||||
}
|
||||
});
|
||||
260
_pkg2_dont_use/heroagent/web/static/js/services.js
Normal file
260
_pkg2_dont_use/heroagent/web/static/js/services.js
Normal file
@@ -0,0 +1,260 @@
|
||||
// Function to refresh services
|
||||
function refreshServices() {
|
||||
const servicesTable = document.getElementById('services-table');
|
||||
fetch('/admin/services/data')
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
return response.json().then(err => {
|
||||
throw new Error(err.error || 'Failed to refresh services');
|
||||
});
|
||||
}
|
||||
return response.text();
|
||||
})
|
||||
.then(html => {
|
||||
servicesTable.innerHTML = html;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error refreshing services:', error);
|
||||
// Show error message in the services table instead of replacing it
|
||||
const errorHtml = `<table><tbody><tr><td colspan="4"><div class="alert alert-danger">Error refreshing services: ${error.message}</div></td></tr></tbody></table>`;
|
||||
servicesTable.innerHTML = errorHtml;
|
||||
// Try again after a short delay
|
||||
setTimeout(() => {
|
||||
refreshServices();
|
||||
}, 3000);
|
||||
});
|
||||
}
|
||||
|
||||
// Refresh services as soon as the page loads
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
refreshServices();
|
||||
});
|
||||
|
||||
// Function to start a new service
|
||||
function startService(event) {
|
||||
event.preventDefault();
|
||||
const form = document.getElementById('start-service-form');
|
||||
const resultDiv = document.getElementById('start-result');
|
||||
|
||||
const formData = new FormData(form);
|
||||
|
||||
fetch('/admin/services/start', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.error) {
|
||||
resultDiv.className = 'alert alert-danger';
|
||||
resultDiv.textContent = data.error;
|
||||
} else {
|
||||
resultDiv.className = 'alert alert-success';
|
||||
resultDiv.textContent = data.message;
|
||||
form.reset();
|
||||
refreshServices();
|
||||
}
|
||||
resultDiv.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
resultDiv.style.display = 'none';
|
||||
}, 5000);
|
||||
})
|
||||
.catch(error => {
|
||||
resultDiv.className = 'alert alert-danger';
|
||||
resultDiv.textContent = 'An error occurred: ' + error.message;
|
||||
resultDiv.style.display = 'block';
|
||||
});
|
||||
}
|
||||
|
||||
// Function to stop a process
|
||||
function stopProcess(name) {
|
||||
if (!confirm('Are you sure you want to stop this service?')) return;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('name', name);
|
||||
|
||||
fetch('/admin/services/stop', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.error) {
|
||||
alert('Error: ' + data.error);
|
||||
} else {
|
||||
refreshServices();
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
alert('An error occurred: ' + error.message);
|
||||
});
|
||||
}
|
||||
|
||||
// Function to restart a process
|
||||
function restartProcess(name) {
|
||||
if (!confirm('Are you sure you want to restart this service?')) return;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('name', name);
|
||||
|
||||
fetch('/admin/services/restart', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.error) {
|
||||
alert('Error: ' + data.error);
|
||||
} else {
|
||||
refreshServices();
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
alert('An error occurred: ' + error.message);
|
||||
});
|
||||
}
|
||||
|
||||
// Function to delete a process
|
||||
function deleteProcess(name) {
|
||||
if (!confirm('Are you sure you want to delete this service? This cannot be undone.')) return;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('name', name);
|
||||
|
||||
fetch('/admin/services/delete', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.error) {
|
||||
alert('Error: ' + data.error);
|
||||
} else {
|
||||
refreshServices();
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
alert('An error occurred: ' + error.message);
|
||||
});
|
||||
}
|
||||
|
||||
// Function to show process logs
|
||||
function showProcessLogs(name) {
|
||||
// Create a modal to show logs
|
||||
const modal = document.createElement('div');
|
||||
modal.className = 'modal';
|
||||
modal.innerHTML = `
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>Logs for ${name}</h2>
|
||||
<span class="close">×</span>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<pre id="log-content" style="height: 400px; overflow-y: auto; background: #f5f5f5; padding: 10px;">Loading logs...</pre>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="button refresh" onclick="refreshLogs('${name}')">Refresh Logs</button>
|
||||
<button class="button secondary" onclick="closeModal()">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(modal);
|
||||
|
||||
// Add modal styles if not already present
|
||||
if (!document.getElementById('modal-styles')) {
|
||||
const style = document.createElement('style');
|
||||
style.id = 'modal-styles';
|
||||
style.innerHTML = `
|
||||
.modal {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin: 5% auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
max-width: 800px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.modal-footer {
|
||||
border-top: 1px solid #eee;
|
||||
padding-top: 15px;
|
||||
margin-top: 15px;
|
||||
text-align: right;
|
||||
}
|
||||
.close {
|
||||
color: #aaa;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
.close:hover {
|
||||
color: black;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
// Close modal when clicking the X
|
||||
modal.querySelector('.close').onclick = closeModal;
|
||||
|
||||
// Load the logs
|
||||
loadLogs(name);
|
||||
|
||||
// Close modal when clicking outside
|
||||
window.onclick = function(event) {
|
||||
if (event.target === modal) {
|
||||
closeModal();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Function to load logs
|
||||
function loadLogs(name) {
|
||||
fetch(`/admin/services/logs?name=${encodeURIComponent(name)}&lines=100`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const logContent = document.getElementById('log-content');
|
||||
if (data.error) {
|
||||
logContent.textContent = `Error: ${data.error}`;
|
||||
} else {
|
||||
logContent.textContent = data.logs || 'No logs available';
|
||||
// Scroll to bottom
|
||||
logContent.scrollTop = logContent.scrollHeight;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
document.getElementById('log-content').textContent = `Error loading logs: ${error.message}`;
|
||||
});
|
||||
}
|
||||
|
||||
// Function to refresh logs
|
||||
function refreshLogs(name) {
|
||||
document.getElementById('log-content').textContent = 'Refreshing logs...';
|
||||
loadLogs(name);
|
||||
}
|
||||
|
||||
// Function to close the modal
|
||||
function closeModal() {
|
||||
const modal = document.querySelector('.modal');
|
||||
if (modal) {
|
||||
document.body.removeChild(modal);
|
||||
}
|
||||
window.onclick = null;
|
||||
}
|
||||
1
_pkg2_dont_use/heroagent/web/static/js/unpoly.min.js
vendored
Normal file
1
_pkg2_dont_use/heroagent/web/static/js/unpoly.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user