Restructure VG-Observe into focused explorer views
Dieser Commit ist enthalten in:
@@ -0,0 +1,123 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
font-family: Arial, sans-serif;
|
||||
color: #e5edf5;
|
||||
background: #111827;
|
||||
}
|
||||
|
||||
.analysis-dashboard {
|
||||
width: min(1040px, 100%);
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.analysis-header {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #334155;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 12px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
color: #e5edf5;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 760px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
width: fit-content;
|
||||
color: #bfdbfe;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.analysis-status {
|
||||
min-height: 18px;
|
||||
font-size: 13px;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.panel {
|
||||
margin-bottom: 22px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #334155;
|
||||
}
|
||||
|
||||
.status-grid,
|
||||
.area-grid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.status-grid {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.area-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.status-grid div,
|
||||
.area-grid article {
|
||||
min-width: 0;
|
||||
padding: 12px;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 4px;
|
||||
background: #1f2937;
|
||||
}
|
||||
|
||||
.status-grid dt {
|
||||
margin: 0 0 8px;
|
||||
font-size: 12px;
|
||||
line-height: 1.35;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.status-grid dd {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.analysis-dashboard {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.status-grid,
|
||||
.area-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>VG-Observe Analyse-Dashboard</title>
|
||||
<link rel="stylesheet" href="analysis-dashboard.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="analysis-dashboard">
|
||||
<header class="analysis-header">
|
||||
<a class="back-link" href="../dashboard/dashboard.html">Zurück zum Dashboard</a>
|
||||
<h1>Analyse-Dashboard</h1>
|
||||
<p>
|
||||
Diese Ansicht bereitet technische Prüfungen zwischen
|
||||
Consent-Zuständen, Vendorlisten und beobachteten Requests vor.
|
||||
Aktuell werden nur vorhandene Datenbestände und vorbereitete
|
||||
Analysebereiche angezeigt.
|
||||
</p>
|
||||
<div id="analysis-status" class="analysis-status" aria-live="polite">
|
||||
Lade Datenbestände
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="panel" aria-labelledby="summary-title">
|
||||
<h2 id="summary-title">Datenbestände</h2>
|
||||
<dl class="status-grid">
|
||||
<div>
|
||||
<dt>Anzahl Consent States</dt>
|
||||
<dd id="summary-consent-states">-</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Anzahl Observed Requests</dt>
|
||||
<dd id="summary-observed-requests">-</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Lokal gespeicherte Vendorlisten</dt>
|
||||
<dd id="summary-gvl-snapshots">-</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Lokal aktuelle Vendorlisten-Version</dt>
|
||||
<dd id="summary-current-gvl-version">-</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Analyse-Engine</dt>
|
||||
<dd>noch nicht aktiv</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<section class="panel" aria-labelledby="areas-title">
|
||||
<h2 id="areas-title">Vorbereitete Analysebereiche</h2>
|
||||
<div class="area-grid">
|
||||
<article>
|
||||
<h3>Consent ↔ Vendorliste</h3>
|
||||
<p>Analyse noch nicht ausgeführt.</p>
|
||||
</article>
|
||||
<article>
|
||||
<h3>Consent ↔ beobachtete Requests</h3>
|
||||
<p>Analyse noch nicht ausgeführt.</p>
|
||||
</article>
|
||||
<article>
|
||||
<h3>Request-Hosts ↔ bekannte Vendoren</h3>
|
||||
<p>Keine erkennbare Zuordnung berechnet. Analyse noch nicht ausgeführt.</p>
|
||||
</article>
|
||||
<article>
|
||||
<h3>Potenziell erklärungsbedürftige technische Diskrepanzen</h3>
|
||||
<p>Keine Bewertung vorgenommen. Analyse noch nicht ausgeführt.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="analysis-dashboard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,76 @@
|
||||
"use strict";
|
||||
|
||||
const analysisStatus = document.getElementById("analysis-status");
|
||||
const summaryConsentStates = document.getElementById("summary-consent-states");
|
||||
const summaryObservedRequests = document.getElementById(
|
||||
"summary-observed-requests"
|
||||
);
|
||||
const summaryGvlSnapshots = document.getElementById("summary-gvl-snapshots");
|
||||
const summaryCurrentGvlVersion = document.getElementById(
|
||||
"summary-current-gvl-version"
|
||||
);
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async () => {
|
||||
await renderAnalysisSummary();
|
||||
});
|
||||
|
||||
async function renderAnalysisSummary() {
|
||||
try {
|
||||
const [evidenceStatus, gvlStatus] = await Promise.all([
|
||||
getEvidenceRetentionStatus(),
|
||||
getLatestGvlUpdateStatus()
|
||||
]);
|
||||
|
||||
const storeCounts = evidenceStatus.storeCounts ?? {};
|
||||
const status = gvlStatus.status ?? {};
|
||||
|
||||
summaryConsentStates.textContent = String(storeCounts.consent_states ?? 0);
|
||||
summaryObservedRequests.textContent = String(
|
||||
storeCounts.observed_requests ?? 0
|
||||
);
|
||||
summaryGvlSnapshots.textContent = String(storeCounts.gvl_snapshots ?? 0);
|
||||
summaryCurrentGvlVersion.textContent = formatNullable(
|
||||
status.latestLocalVendorListVersion ?? status.currentVendorListVersion
|
||||
);
|
||||
analysisStatus.textContent = "Datenbestände geladen";
|
||||
} catch (error) {
|
||||
summaryConsentStates.textContent = "-";
|
||||
summaryObservedRequests.textContent = "-";
|
||||
summaryGvlSnapshots.textContent = "-";
|
||||
summaryCurrentGvlVersion.textContent = "-";
|
||||
analysisStatus.textContent = "Datenbestände konnten nicht geladen werden";
|
||||
console.warn("VG-Observe analysis dashboard summary failed", error);
|
||||
}
|
||||
}
|
||||
|
||||
async function getEvidenceRetentionStatus() {
|
||||
const status = await browser.runtime.sendMessage({
|
||||
type: "get_evidence_retention_status"
|
||||
});
|
||||
|
||||
if (!status?.success) {
|
||||
throw new Error(status?.error ?? "get_evidence_retention_status_failed");
|
||||
}
|
||||
|
||||
return status;
|
||||
}
|
||||
|
||||
async function getLatestGvlUpdateStatus() {
|
||||
const status = await browser.runtime.sendMessage({
|
||||
type: "get_latest_gvl_update_status"
|
||||
});
|
||||
|
||||
if (!status?.success) {
|
||||
throw new Error(status?.error ?? "get_latest_gvl_update_status_failed");
|
||||
}
|
||||
|
||||
return status;
|
||||
}
|
||||
|
||||
function formatNullable(value) {
|
||||
if (value === null || value === undefined || value === "") {
|
||||
return "-";
|
||||
}
|
||||
|
||||
return String(value);
|
||||
}
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren