diff --git a/custom-script.js b/custom-script.js
index a595fbc663..7e3a2de266 100644
--- a/custom-script.js
+++ b/custom-script.js
@@ -6,10 +6,14 @@
const POWERED_BY_TEXT = 'Powered by Meshery Authors';
const POWERED_BY_SELECTOR =
'a[href="https://allurereport.org"], a[href="https://allurereport.org/"]';
+ const CUSTOM_NAV_ID = 'meshery-report-nav';
+ const LEGACY_NAV_BUTTON_TEXT = 'report';
+ const LEGACY_NAV_PANEL_TOKENS = ['report', 'graphs', 'timeline'];
const SECTION_ICON_SELECTOR =
'button, [role="button"], [role="menuitemcheckbox"], [role="menuitem"], [class*="menu-item"]';
const OBSERVER_OPTIONS = { childList: true, subtree: true };
let brandingScheduled = false;
+ let legacyNavHiddenOnce = false;
function createMesheryLogo(className, size) {
const logo = document.createElement('img');
@@ -68,6 +72,128 @@
return changed;
}
+ function normalizePathname(pathname) {
+ const resolvedPathname = new URL(pathname, window.location.href).pathname;
+ const withoutIndex = resolvedPathname.replace(/\/index\.html$/, '/');
+ return withoutIndex === '/' ? withoutIndex : withoutIndex.replace(/\/+$/, '');
+ }
+
+ function getReportNavigationItems() {
+ if (!Array.isArray(window.mesheryReportNav)) {
+ return [];
+ }
+
+ return window.mesheryReportNav.filter((item) => item && item.href && item.label);
+ }
+
+ function createReportNavigation() {
+ const navItems = getReportNavigationItems();
+
+ if (!navItems.length) {
+ return null;
+ }
+
+ const nav = document.createElement('nav');
+ nav.id = CUSTOM_NAV_ID;
+ nav.className = 'meshery-report-nav';
+ nav.setAttribute('aria-label', 'Dashboard navigation');
+
+ const list = document.createElement('div');
+ list.className = 'meshery-report-nav__list';
+
+ const currentPath = normalizePathname(window.location.pathname);
+
+ navItems.forEach((item) => {
+ const link = document.createElement('a');
+ const itemPath = normalizePathname(item.href);
+
+ link.className = 'meshery-report-nav__link';
+ link.href = item.href;
+ link.textContent = item.label;
+
+ if (itemPath === currentPath) {
+ link.classList.add('meshery-report-nav__link--active');
+ link.setAttribute('aria-current', 'page');
+ }
+
+ list.appendChild(link);
+ });
+
+ nav.appendChild(list);
+ return nav;
+ }
+
+ function insertReportNavigation() {
+ if (document.getElementById(CUSTOM_NAV_ID)) {
+ return false;
+ }
+
+ const nav = createReportNavigation();
+
+ if (!nav) {
+ return false;
+ }
+
+ const appRoot = document.getElementById('app');
+
+ if (appRoot && appRoot.parentNode) {
+ appRoot.parentNode.insertBefore(nav, appRoot);
+ } else {
+ document.body.prepend(nav);
+ }
+
+ return true;
+ }
+
+ function hideLegacyReportMenu() {
+ if (legacyNavHiddenOnce) {
+ return false;
+ }
+
+ let changed = false;
+
+ document.querySelectorAll('button').forEach((button) => {
+ if (button.dataset.mesheryLegacyNavHidden === 'true') {
+ return;
+ }
+
+ if (normalizeText(button.textContent) !== LEGACY_NAV_BUTTON_TEXT) {
+ return;
+ }
+
+ button.dataset.mesheryLegacyNavHidden = 'true';
+ button.hidden = true;
+ button.setAttribute('aria-hidden', 'true');
+ button.style.display = 'none';
+ changed = true;
+ });
+
+ document.querySelectorAll('[role="complementary"], aside').forEach((panel) => {
+ if (panel.dataset.mesheryLegacyNavHidden === 'true') {
+ return;
+ }
+
+ const panelText = normalizeText(panel.textContent);
+ const isLegacyNavPanel = LEGACY_NAV_PANEL_TOKENS.every((token) => panelText.includes(token));
+
+ if (!isLegacyNavPanel) {
+ return;
+ }
+
+ panel.dataset.mesheryLegacyNavHidden = 'true';
+ panel.hidden = true;
+ panel.setAttribute('aria-hidden', 'true');
+ panel.style.display = 'none';
+ changed = true;
+ });
+
+ if (changed) {
+ legacyNavHiddenOnce = true;
+ }
+
+ return changed;
+ }
+
function replaceLoaderLogo() {
let changed = false;
@@ -110,6 +236,8 @@
}
function applyBranding() {
+ insertReportNavigation();
+ hideLegacyReportMenu();
replacePoweredBy();
replaceLoaderLogo();
replaceSectionPickerLogos();
diff --git a/custom-style.css b/custom-style.css
index 4be0460b42..14aab509f6 100644
--- a/custom-style.css
+++ b/custom-style.css
@@ -3,6 +3,54 @@
text-decoration: none;
}
+.meshery-report-nav {
+ background: var(--bg-base-primary, #ffffff);
+ border-bottom: 1px solid var(--on-border-primary, #cbd5e1);
+ padding: 0.75rem 1rem;
+ position: sticky;
+ top: 0;
+ z-index: 1000;
+}
+
+.meshery-report-nav__list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ margin: 0 auto;
+ max-width: 1200px;
+}
+
+.meshery-report-nav__link {
+ background: var(--bg-control-secondary, rgba(148, 163, 184, 0.12));
+ border: 1px solid var(--on-border-muted, rgba(148, 163, 184, 0.3));
+ border-radius: 999px;
+ color: inherit;
+ font-size: 0.875rem;
+ line-height: 1.2;
+ padding: 0.5rem 0.875rem;
+ text-decoration: none;
+ transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+}
+
+.meshery-report-nav__link:hover {
+ background: var(--bg-control-secondary-medium, rgba(148, 163, 184, 0.2));
+ border-color: var(--on-border-primary, rgba(100, 116, 139, 0.4));
+}
+
+.meshery-report-nav__link:focus-visible {
+ background: var(--bg-control-secondary-medium, rgba(148, 163, 184, 0.2));
+ border-color: var(--on-border-primary, rgba(100, 116, 139, 0.4));
+ outline: 2px solid currentColor;
+ outline-offset: 2px;
+}
+
+.meshery-report-nav__link--active {
+ background: var(--bg-control-secondary-medium, rgba(148, 163, 184, 0.2));
+ border-color: var(--on-border-primary, rgba(100, 116, 139, 0.4));
+ color: inherit;
+ font-weight: 600;
+}
+
.meshery-powered-by {
align-items: center;
color: inherit;
diff --git a/customize-report.js b/customize-report.js
index ffba3e5524..5b35117725 100644
--- a/customize-report.js
+++ b/customize-report.js
@@ -7,7 +7,24 @@ const customStyle = path.join(__dirname, 'custom-style.css');
const assetFiles = ['custom-script.js', 'custom-style.css'];
const skippedDirectories = new Set(['data', 'history', 'widgets']);
const styleTag = ' \n';
+const navDataMarker = 'window.mesheryReportNav =';
const scriptTag = ' \n';
+const navLabelOverrides = {
+ '': 'Home',
+ dashboard: 'Dashboard',
+ meshery: 'Meshery',
+ mesheryctl: 'Mesheryctl',
+ layer5Cloud: 'Layer5 Cloud',
+ kanvas: 'Kanvas',
+};
+const navOrder = new Map([
+ ['', 0],
+ ['dashboard', 1],
+ ['meshery', 2],
+ ['mesheryctl', 3],
+ ['layer5Cloud', 4],
+ ['kanvas', 5],
+]);
function findReportPages(dir) {
const entries = fs.readdirSync(dir, { withFileTypes: true });
@@ -43,13 +60,70 @@ function injectBeforeClosingTag(html, tagName, snippet) {
return html.replace(closingTagPattern, (match) => `${snippet}${match}`);
}
-function ensureInjectedMarkup(html) {
+function formatReportLabel(relativeDir) {
+ if (relativeDir in navLabelOverrides) {
+ return navLabelOverrides[relativeDir];
+ }
+
+ const reportName = relativeDir.split(path.sep).filter(Boolean).pop() || navLabelOverrides[''];
+ return reportName
+ .replace(/[-_]+/g, ' ')
+ .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+ .replace(/\b\w/g, (letter) => letter.toUpperCase());
+}
+
+function toRelativeHref(fromDir, toDir) {
+ const relativePath = path.relative(fromDir, toDir).split(path.sep).join('/');
+ return relativePath ? `${relativePath}/` : './';
+}
+
+function compareNavEntries(left, right) {
+ const leftOrder = navOrder.get(left.relativeDir) ?? Number.MAX_SAFE_INTEGER;
+ const rightOrder = navOrder.get(right.relativeDir) ?? Number.MAX_SAFE_INTEGER;
+
+ if (leftOrder !== rightOrder) {
+ return leftOrder - rightOrder;
+ }
+
+ return left.label.localeCompare(right.label);
+}
+
+function buildNavEntries(reportPages) {
+ return reportPages
+ .map((reportPage) => {
+ const reportPageDir = path.dirname(reportPage);
+ const relativeDir = path.relative(reportDir, reportPageDir);
+
+ return {
+ label: formatReportLabel(relativeDir),
+ relativeDir,
+ reportPageDir,
+ };
+ })
+ .sort(compareNavEntries);
+}
+
+function createNavDataScript(currentPageDir, navEntries) {
+ const navData = navEntries.map(({ label, relativeDir, reportPageDir }) => ({
+ label,
+ href: toRelativeHref(currentPageDir, reportPageDir),
+ }));
+ const serializedNavData = JSON.stringify(navData).replace(/${navDataMarker} ${serializedNavData};