diff --git a/argus-frontend/src/main/resources/public/css/style.css b/argus-frontend/src/main/resources/public/css/style.css index 89f35c2..ef3955f 100644 --- a/argus-frontend/src/main/resources/public/css/style.css +++ b/argus-frontend/src/main/resources/public/css/style.css @@ -1402,3 +1402,156 @@ footer { canvas { max-width: 100%; } + +/* ---------------------------------------------------------------- + FILE ANALYSIS PANEL +---------------------------------------------------------------- */ +.analysis-panel { margin-top: var(--section-gap); } +.analysis-commands { + display: flex; + gap: 0.75rem; + flex-wrap: wrap; + padding: 0.75rem 0; +} +.analysis-cmd-btn { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1.25rem; + border: 1px solid var(--border); + border-radius: 6px; + background: var(--bg); + cursor: pointer; + font-family: var(--font-sans); + font-size: 0.875rem; + color: var(--ink); + transition: border-color 0.15s, background 0.15s; +} +.analysis-cmd-btn:hover { + border-color: var(--blue); + background: var(--off-white); +} +.cmd-icon { + font-size: 0.75rem; + font-weight: 700; + color: var(--blue); + font-family: var(--font-mono); +} + +/* ---------------------------------------------------------------- + ANALYSIS MODAL EXTENSIONS +---------------------------------------------------------------- */ +.modal-wide { max-width: 820px; } +.modal-actions { + display: flex; + gap: 0.5rem; + justify-content: flex-end; + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid var(--border-light); +} +.form-group { margin-bottom: 1rem; } +.form-group label { + display: block; + margin-bottom: 0.25rem; + font-size: 0.875rem; + font-weight: 600; + color: var(--ink); +} +.form-group input[type=file] { + width: 100%; + padding: 0.5rem; + border: 1px dashed var(--border); + border-radius: 4px; + font-size: 0.875rem; + background: var(--off-white); +} +.file-status { + font-size: 0.8125rem; + margin-top: 0.25rem; + display: block; + min-height: 1.2em; +} +.file-status.ok { color: var(--green); } +.file-status.error { color: var(--red); } +.validation-msg { + color: var(--red); + font-size: 0.875rem; + min-height: 1.2em; + margin-top: 0.25rem; +} +.progress-bar { + height: 4px; + background: var(--border); + border-radius: 2px; + overflow: hidden; + margin: 0.75rem 0 0.25rem; +} +.progress-fill { + width: 30%; + height: 100%; + background: var(--blue); + animation: analysis-progress 1.5s ease-in-out infinite; +} +@keyframes analysis-progress { + 0% { width: 15%; margin-left: 0; } + 50% { width: 60%; margin-left: 20%; } + 100% { width: 15%; margin-left: 85%; } +} +.progress-text { + font-size: 0.8125rem; + color: var(--ink-3); +} + +/* ---------------------------------------------------------------- + ANALYSIS RESULT RENDERING +---------------------------------------------------------------- */ +.result-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; +} +.result-section { margin-bottom: 0.5rem; } +.result-section.full-width { grid-column: 1 / -1; } +.result-section h4 { + font-size: 0.8125rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--ink-3); + margin-bottom: 0.5rem; +} +.result-table { + width: 100%; + border-collapse: collapse; + font-size: 0.875rem; +} +.result-table td, +.result-table th { + padding: 0.3rem 0.5rem; + border-bottom: 1px solid var(--border-light); + text-align: left; +} +.result-table th { + font-weight: 700; + color: var(--ink-2); +} +.good { color: var(--green); font-weight: 600; } +.warn { color: var(--amber); font-weight: 600; } +.bad { color: var(--red); font-weight: 600; } +.rec-list { list-style: none; padding: 0; } +.rec-list li { + padding: 0.5rem 0.75rem; + margin: 0.25rem 0; + border-radius: 4px; + font-size: 0.875rem; + line-height: 1.5; +} +.rec-list code { + font-family: var(--font-mono); + font-size: 0.8125rem; + color: var(--ink-2); +} +.rec-critical { background: rgba(198,40,40,0.07); border-left: 3px solid var(--red); } +.rec-warning { background: rgba(249,168,37,0.09); border-left: 3px solid var(--amber); } +.rec-info { background: rgba(21,101,192,0.07); border-left: 3px solid var(--blue); } diff --git a/argus-frontend/src/main/resources/public/index.html b/argus-frontend/src/main/resources/public/index.html index 3b0f084..3f14c90 100644 --- a/argus-frontend/src/main/resources/public/index.html +++ b/argus-frontend/src/main/resources/public/index.html @@ -486,6 +486,26 @@

Virtual Thread Events

+ +
+
+

File Analysis

+

Upload GC log files for offline analysis and comparison.

+
+
+ + +
+
+