diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json index e1db4217..e70d9c64 100644 --- a/frontend/src/i18n/locales/en.json +++ b/frontend/src/i18n/locales/en.json @@ -462,9 +462,12 @@ "howThePanelConnectsToServers": "How the panel connects to servers, agents and services in production.", "requestStack": "Request stack", "routesApis": "Routes and APIs", + "routesShort": "Pages and the APIs they call.", "runtimeTopology": "Runtime topology", "showLegend": "Show legend", "sidebarNavigationPagesBackendApiBlueprints": "Sidebar navigation → pages → backend API blueprints they call.", + "stackShort": "Browser through to the database.", + "topologyShort": "How the panel reaches servers.", "views": "Views" }, "appWafPanel": { @@ -5809,6 +5812,7 @@ "pairAgentAction": "Pair agent", "pairAnAgentAndTheMachine": "Pair an agent and the server shows up here with its CPU, memory and disk alongside every other server you run.", "pairCode": "Pair code", + "pairShort": "Pair an agent to add it.", "pairing": "Pairing…", "passphrase": "Passphrase *", "pasteThisIntoTheAgentOr": "Paste this into the agent, or run the installer.", @@ -7556,6 +7560,7 @@ "norTheWindowsEventLogAre": ", nor the Windows Event Log are available.", "notice": "Notice", "openAShellOn": "Open a shell on {{name}}", + "pairShort": "Pair a server with shell access.", "phpFpm": "PHP-FPM", "pickServerToOpenShell": "Pick a server on the left to open a shell.", "pid": "PID {{pid}} · {{value}}", diff --git a/frontend/src/pages/AppMap.jsx b/frontend/src/pages/AppMap.jsx index 7e5892d1..00753d0a 100644 --- a/frontend/src/pages/AppMap.jsx +++ b/frontend/src/pages/AppMap.jsx @@ -10,6 +10,7 @@ import '@xyflow/react/dist/style.css'; import { Map as MapIcon, Layers, Compass, Network, Info, } from 'lucide-react'; +import InfoTip from '@/components/InfoTip'; import { Tip } from '@/components/ui/tooltip'; import PageLayout from '../layouts/PageLayout'; import useTabParam from '../hooks/useTabParam'; @@ -289,6 +290,11 @@ export default function AppMap() { routes: t('app.appMap.routesApis', 'Routes and APIs'), topology: t('app.appMap.runtimeTopology', 'Runtime topology'), }; + const viewShort = { + stack: t('app.appMap.stackShort', 'Browser through to the database.'), + routes: t('app.appMap.routesShort', 'Pages and the APIs they call.'), + topology: t('app.appMap.topologyShort', 'How the panel reaches servers.'), + }; const viewDescriptions = { stack: t('app.appMap.howARequestFlowsFromThe', 'How a request flows from the browser through the frontend, backend, services and database.'), routes: t('app.appMap.sidebarNavigationPagesBackendApiBlueprints', 'Sidebar navigation → pages → backend API blueprints they call.'), @@ -325,7 +331,7 @@ export default function AppMap() { )} > -

{viewDescriptions[view.id]}

+

{viewShort[view.id]}{viewDescriptions[view.id]}

{showLegend && (
diff --git a/frontend/src/pages/Servers.jsx b/frontend/src/pages/Servers.jsx index b6ea9567..6c6d458d 100644 --- a/frontend/src/pages/Servers.jsx +++ b/frontend/src/pages/Servers.jsx @@ -464,7 +464,7 @@ const Servers = () => { icon={ServerLucideIcon} title={servers.length === 0 ? t('app.servers.noServersYet', 'No servers yet') : t('app.servers.noServersMatchTheseFilters', 'No servers match these filters')} description={servers.length === 0 - ? t('app.servers.pairAnAgentAndTheMachine', 'Pair an agent and the server shows up here with its CPU, memory and disk alongside every other server you run.') + ? <>{t('app.servers.pairShort', 'Pair an agent to add it.')} {t('app.servers.pairAnAgentAndTheMachine', 'Pair an agent and the server shows up here with its CPU, memory and disk alongside every other server you run.')} : t('app.servers.adjustTheSearchOrClearThe', 'Adjust the search or clear the column filters to see your servers.')} action={servers.length === 0 ? (
)} diff --git a/frontend/src/styles/pages/_app-map.scss b/frontend/src/styles/pages/_app-map.scss index 0ba5e0fc..2e682673 100644 --- a/frontend/src/styles/pages/_app-map.scss +++ b/frontend/src/styles/pages/_app-map.scss @@ -12,6 +12,21 @@ margin: 0 0 $space-3; font-size: $text-sm; color: $text-secondary; + display: flex; + align-items: center; + gap: 0.25rem; + min-width: 0; + + &-text { + min-width: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + > :not(.app-map__viewmeta-text) { + flex-shrink: 0; + } } &__legend {