From d114efbf53801a4d3fc7a06de196deea0a1aebb5 Mon Sep 17 00:00:00 2001 From: dmitri-saricev-3pillargloball Date: Fri, 12 Dec 2025 16:10:57 +0200 Subject: [PATCH 1/4] PMM-14630: Use correct casing in navigation menu and Help Center --- .../contexts/navigation/navigation.constants.ts | 14 +++++++------- .../src/contexts/navigation/navigation.utils.ts | 4 ++-- .../pages/help-center/HelpCenter.constants.ts | 16 ++++++++-------- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/ui/apps/pmm/src/contexts/navigation/navigation.constants.ts b/ui/apps/pmm/src/contexts/navigation/navigation.constants.ts index 53217ca518..eae1184fdf 100644 --- a/ui/apps/pmm/src/contexts/navigation/navigation.constants.ts +++ b/ui/apps/pmm/src/contexts/navigation/navigation.constants.ts @@ -55,7 +55,7 @@ export const NAV_MYSQL: NavItem = { { id: 'mysql-high-availability', icon: 'high-availability', - text: 'High Availability', + text: 'High availability', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/mysql-group-replicaset-summary`, children: [ { @@ -213,7 +213,7 @@ export const NAV_POSTGRESQL: NavItem = { }, { id: 'postgresql-ha', - text: 'High Availability', + text: 'High availability', icon: 'high-availability', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/postgresql-replication-overview`, children: [ @@ -260,7 +260,7 @@ export const NAV_OS: NavItem = { }, { id: 'cpu-utilization', - text: 'CPU utilization', + text: 'CPU Utilization', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/node-cpu/cpu-utilization-details`, }, { @@ -474,7 +474,7 @@ export const NAV_EXPLORE: NavItem = { // export const NAV_ALERTS_TEMPLATES: NavItem = { id: 'alerts-templates', - text: 'Percona Alert Templates', + text: 'Alert templates', url: `${PMM_NEW_NAV_GRAFANA_PATH}/alerting/alert-rule-templates`, matches: [`${PMM_NEW_NAV_GRAFANA_PATH}/alerting/new-from-template/*`], }; @@ -560,12 +560,12 @@ export const NAV_INVENTORY: NavItem = { { id: 'add-instance', url: `${PMM_NEW_NAV_GRAFANA_PATH}/add-instance`, - text: 'Add Service', + text: 'Add service', children: [ { id: 'add-instance-form', url: `${PMM_NEW_NAV_GRAFANA_PATH}/add-instance/:type`, - text: 'Add Service', + text: 'Add service', hidden: true, }, ], @@ -746,7 +746,7 @@ export const NAV_CHANGE_PASSWORD: NavItem = { export const NAV_THEME_TOGGLE: NavItem = { id: 'theme-toggle', - text: 'Change to Dark Theme', + text: 'Switch to dark mode', }; export const NAV_SIGN_OUT: NavItem = { diff --git a/ui/apps/pmm/src/contexts/navigation/navigation.utils.ts b/ui/apps/pmm/src/contexts/navigation/navigation.utils.ts index cde17e47db..a18d4a8699 100644 --- a/ui/apps/pmm/src/contexts/navigation/navigation.utils.ts +++ b/ui/apps/pmm/src/contexts/navigation/navigation.utils.ts @@ -184,7 +184,7 @@ export const addAccount = ( ): NavItem => { const name = (user.name || '').split(' ')[0]; const children = [...(NAV_ACCOUNT.children || [])]; - const targetTheme = colorMode === 'light' ? 'Dark' : 'Light'; + const targetMode = colorMode === 'light' ? 'dark' : 'light'; if ( !( @@ -198,7 +198,7 @@ export const addAccount = ( children.push({ ...NAV_THEME_TOGGLE, icon: colorMode === 'light' ? 'theme-dark' : 'theme-light', - text: `Change to ${targetTheme} Theme`, + text: `Switch to ${targetMode} mode`, onClick: toggleMode, }); diff --git a/ui/apps/pmm/src/pages/help-center/HelpCenter.constants.ts b/ui/apps/pmm/src/pages/help-center/HelpCenter.constants.ts index 48898440ec..c50a62ccc5 100644 --- a/ui/apps/pmm/src/pages/help-center/HelpCenter.constants.ts +++ b/ui/apps/pmm/src/pages/help-center/HelpCenter.constants.ts @@ -23,7 +23,7 @@ export const getCardData = ({ }): HelpCard[] => [ { id: CARD_IDS.pmmDocs, - title: 'PMM Documentation', + title: 'PMM documentation', description: 'From setup to troubleshooting, you’ll find step-by-step instructions, tips, and best practices to get the most out of PMM.', buttons: [ @@ -38,12 +38,12 @@ export const getCardData = ({ }, { id: CARD_IDS.support, - title: 'Get Percona Support', + title: 'Percona support', description: 'From 24/7 technical support to fully managed services, Percona’s trusted experts are ready to help you optimize, troubleshoot, and scale.', buttons: [ { - text: 'Contact Support', + text: 'Contact support', target: '_blank', url: 'https://www.percona.com/about/contact?utm_campaign=7075599-Product%20Documentation%20Contact%20Us%20Clicks&utm_source=PMM-Support', }, @@ -53,7 +53,7 @@ export const getCardData = ({ }, { id: CARD_IDS.forum, - title: 'Percona Forum', + title: 'Percona forum', description: 'A friendly space to connect with other users, share insights, and get answers from the community and from the Percona experts.', buttons: [ @@ -68,7 +68,7 @@ export const getCardData = ({ }, { id: CARD_IDS.pmmDump, - title: 'PMM Dump', + title: 'PMM dump', description: 'Generate datasets to securely share your data with Percona Support. This helps our experts quickly diagnose and replicate issues.', buttons: [ @@ -82,7 +82,7 @@ export const getCardData = ({ }, { id: CARD_IDS.pmmLogs, - title: 'PMM Logs', + title: 'PMM logs', description: 'Download your PMM logs as a ZIP file for easy sharing and faster issue diagnosis.', buttons: [ @@ -97,7 +97,7 @@ export const getCardData = ({ }, { id: CARD_IDS.tips, - title: 'Useful Tips', + title: 'Useful tips', description: 'Need a refresher? Start the onboarding tour again for useful tips.', adminOnly: false, @@ -112,7 +112,7 @@ export const getCardData = ({ }, { id: CARD_IDS.nextChapter, - title: 'Help Shape PMM’s Next Chapter', + title: "Help shape PMM's next chapter", description: "We'd love your thoughts on PMM 3 to guide its future development. This is a short survey with 4 questions (Google Form) that will help us drive the next wave of improvements.", adminOnly: false, From 44d8a70949aaa37befb194969471b9c31019ec4d Mon Sep 17 00:00:00 2001 From: dmitri-saricev-3pillargloball Date: Fri, 19 Dec 2025 16:15:01 +0200 Subject: [PATCH 2/4] PMM-14630: Improve text casing and date formatting in Updates UI - Change button text: 'Check Updates Now' to 'Check updates now' - Change button text: 'PMM Home' to 'PMM home' - Update footer date format to 'Month Day, Year, HH:MM UTC' - Remove duplicate 'Last checked' text from update card - Improve consistency across Updates page components --- .../pmm/src/components/footer/Footer.messages.ts | 2 +- ui/apps/pmm/src/components/footer/Footer.utils.ts | 13 ++++++++++--- .../updates/update-card/UpdateCard.messages.ts | 6 +++--- .../src/pages/updates/update-card/UpdateCard.tsx | 9 --------- .../UpdateInProgressCard.messages.ts | 2 +- 5 files changed, 15 insertions(+), 17 deletions(-) diff --git a/ui/apps/pmm/src/components/footer/Footer.messages.ts b/ui/apps/pmm/src/components/footer/Footer.messages.ts index 03093e8481..0ae69f61ae 100644 --- a/ui/apps/pmm/src/components/footer/Footer.messages.ts +++ b/ui/apps/pmm/src/components/footer/Footer.messages.ts @@ -1,5 +1,5 @@ export const Messages = { version: (version: string) => `PMM ${version}`, inProgress: 'Update in progress...', - checkedOn: (date: string) => `Checked on: ${date}`, + checkedOn: (date: string) => `Last checked: ${date}`, }; diff --git a/ui/apps/pmm/src/components/footer/Footer.utils.ts b/ui/apps/pmm/src/components/footer/Footer.utils.ts index 7854e8edf1..2df9d770ee 100644 --- a/ui/apps/pmm/src/components/footer/Footer.utils.ts +++ b/ui/apps/pmm/src/components/footer/Footer.utils.ts @@ -1,7 +1,14 @@ /** - * Formats date to YYYY/MM/DD + * Formats date to "Month Day, Year, HH:MM UTC" * @param date * @returns formatted date */ -export const formatCheckDate = (date: string) => - new Date(date).toISOString().slice(0, 10).replace(/-/g, '/'); +export const formatCheckDate = (date: string) => { + const dateObj = new Date(date); + const month = dateObj.toLocaleDateString('en-US', { month: 'long' }); + const day = dateObj.getUTCDate(); + const year = dateObj.getUTCFullYear(); + const hours = String(dateObj.getUTCHours()).padStart(2, '0'); + const minutes = String(dateObj.getUTCMinutes()).padStart(2, '0'); + return `${month} ${day}, ${year}, ${hours}:${minutes} UTC`; +}; diff --git a/ui/apps/pmm/src/pages/updates/update-card/UpdateCard.messages.ts b/ui/apps/pmm/src/pages/updates/update-card/UpdateCard.messages.ts index 2a26c31d2e..9b163c88a8 100644 --- a/ui/apps/pmm/src/pages/updates/update-card/UpdateCard.messages.ts +++ b/ui/apps/pmm/src/pages/updates/update-card/UpdateCard.messages.ts @@ -5,9 +5,9 @@ export const Messages = { `New update available: PMM ${version}`, runningVersion: 'Running version:', newVersion: 'New version:', - lastChecked: 'Last checked:', - home: 'PMM Home', - checkNow: 'Check Updates Now', + lastChecked: 'Checked on:', + home: 'PMM home', + checkNow: 'Check updates now', checking: 'Checking', updateNow: 'Update now', error: 'There was a problem during the update', diff --git a/ui/apps/pmm/src/pages/updates/update-card/UpdateCard.tsx b/ui/apps/pmm/src/pages/updates/update-card/UpdateCard.tsx index bbba544b3c..9a57517711 100644 --- a/ui/apps/pmm/src/pages/updates/update-card/UpdateCard.tsx +++ b/ui/apps/pmm/src/pages/updates/update-card/UpdateCard.tsx @@ -10,7 +10,6 @@ import { Alert, } from '@mui/material'; import { FC, useState } from 'react'; -import { formatTimestamp } from 'utils/datetime.utils'; import { PMM_HOME_URL } from 'lib/constants'; import { Messages } from './UpdateCard.messages'; import { FetchingIcon } from 'components/fetching-icon'; @@ -118,14 +117,6 @@ export const UpdateCard: FC = () => { {data?.latest && formatVersion(data.latest)} )} - {data.lastCheck && ( - - - {Messages.lastChecked} - {' '} - {formatTimestamp(data?.lastCheck)} - - )} {data.updateAvailable && } diff --git a/ui/apps/pmm/src/pages/updates/update-in-progress-card/UpdateInProgressCard.messages.ts b/ui/apps/pmm/src/pages/updates/update-in-progress-card/UpdateInProgressCard.messages.ts index 94d4758f9b..328f98a276 100644 --- a/ui/apps/pmm/src/pages/updates/update-in-progress-card/UpdateInProgressCard.messages.ts +++ b/ui/apps/pmm/src/pages/updates/update-in-progress-card/UpdateInProgressCard.messages.ts @@ -1,6 +1,6 @@ export const Messages = { title: (version: string) => `PMM ${version} update`, - home: 'PMM Home', + home: 'PMM home', next: 'Next: Update PMM Client', inProgress: 'In progress', }; From 51840c42e22864cccc75415fb6f682a4eb387910 Mon Sep 17 00:00:00 2001 From: dmitri-saricev-3pillargloball Date: Fri, 9 Jan 2026 10:41:01 +0200 Subject: [PATCH 3/4] PMM-14630: Fix text casing in navigation menu and tour messages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. navigation.constants.ts - fixed 3 items: - 'CPU Utilization' → 'CPU utilization' - 'Percona Advisors' → 'Advisors' - 'Advisor Insights' → 'Advisor insights' 2. navigation.utils.ts - fixed 1 item: - '${capitalize(category)} Advisors' → '${capitalize(category)} advisors' - Now dynamically generates submenu items: "Security advisors", "Configuration advisors", etc. 3. alerting.messages.ts - all titles converted to sentence case: - 'Fired Alerts' → 'Fired alerts' - 'Alert Templates' → 'Alert templates' - And others 4. product.messages.ts: - 'Percona Advisors' → 'Advisors' --- .../navigation/navigation.constants.ts | 6 +++--- .../contexts/navigation/navigation.utils.ts | 2 +- .../contexts/tour/steps/alerting.messages.ts | 18 +++++++++--------- .../contexts/tour/steps/product.messages.ts | 2 +- 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/ui/apps/pmm/src/contexts/navigation/navigation.constants.ts b/ui/apps/pmm/src/contexts/navigation/navigation.constants.ts index eae1184fdf..0e4bca27dd 100644 --- a/ui/apps/pmm/src/contexts/navigation/navigation.constants.ts +++ b/ui/apps/pmm/src/contexts/navigation/navigation.constants.ts @@ -260,7 +260,7 @@ export const NAV_OS: NavItem = { }, { id: 'cpu-utilization', - text: 'CPU Utilization', + text: 'CPU utilization', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/node-cpu/cpu-utilization-details`, }, { @@ -538,13 +538,13 @@ export const NAV_ALERTS: NavItem = { export const NAV_ADVISORS: NavItem = { id: 'advisors', icon: 'intelligence', - text: 'Percona Advisors', + text: 'Advisors', url: `${PMM_NEW_NAV_GRAFANA_PATH}/advisors`, }; export const NAV_ADVISORS_INSIGHTS = { id: 'advisors-insights', - text: 'Advisor Insights', + text: 'Advisor insights', url: `${PMM_NEW_NAV_GRAFANA_PATH}/advisors/insights`, }; diff --git a/ui/apps/pmm/src/contexts/navigation/navigation.utils.ts b/ui/apps/pmm/src/contexts/navigation/navigation.utils.ts index a18d4a8699..0abf0dd53c 100644 --- a/ui/apps/pmm/src/contexts/navigation/navigation.utils.ts +++ b/ui/apps/pmm/src/contexts/navigation/navigation.utils.ts @@ -168,7 +168,7 @@ export const addAdvisors = (advisors: Advisor[]): NavItem => { for (const category of Object.keys(categories)) { children.push({ id: `advisors-${category}`, - text: `${capitalize(category)} Advisors`, + text: `${capitalize(category)} advisors`, url: `${PMM_NEW_NAV_GRAFANA_PATH}/advisors/${category}`, }); } diff --git a/ui/apps/pmm/src/contexts/tour/steps/alerting.messages.ts b/ui/apps/pmm/src/contexts/tour/steps/alerting.messages.ts index a2a4fef566..c77df1cb1c 100644 --- a/ui/apps/pmm/src/contexts/tour/steps/alerting.messages.ts +++ b/ui/apps/pmm/src/contexts/tour/steps/alerting.messages.ts @@ -1,18 +1,18 @@ export const Messages = { firedAlerts: { - title: 'Fired Alerts', + title: 'Fired alerts', view: 'View all the alerts generated by your active alert rules.', check: 'Check this tab regularly for an overview of current issues in your environment.', }, alertRuleTemplates: { - title: 'Alert Templates', + title: 'Alert templates', effortlessly: 'Templates help you create complex alert rules effortlessly.', offers: 'Percona offers a set of default templates for common events and expressions, but you can also create custom templates to fit your unique requirements.', }, alertRules: { - title: 'Alert Rules', + title: 'Alert rules', rules: 'Alert rules specify the conditions for firing alerts.', start: 'Start from your available templates to pre-fill some of these conditions, and create your rule by adding more conditions and changing the template values.', @@ -20,13 +20,13 @@ export const Messages = { "If you need to create an alert rule from scratch, use Grafana's complex alerting configuration instead.", }, contactPoints: { - title: 'Contact Points', + title: 'Contact points', define: 'Define how your contacts are notified when an alert fires.', grafana: 'Grafana supports a multitude of ChatOps tools to ensure that your team is notified via the most relevant channel.', }, notificationPolicies: { - title: 'Notification Policies', + title: 'Notification policies', routed: 'Set where, when, and how the alerts get routed.', policy: 'A notification policy has a contact point assigned to it that consists of one or more notifiers.', @@ -36,16 +36,16 @@ export const Messages = { create: 'Create silences when you want to stop notifications from one or more alerting rules.', silences: - 'Silences will prevent notifications from getting created, but they will not prevent alerting rules from being evaluated or recorded in the Fired Alerts tab. A silence only lasts for a specified window of time.', + 'Silences will prevent notifications from getting created, but they will not prevent alerting rules from being evaluated or recorded in the Fired alerts tab. A silence only lasts for a specified window of time.', }, alertGroups: { - title: 'Alert Groups', - alert: 'Alert Groups show grouped alerts.', + title: 'Alert groups', + alert: 'Alert groups show grouped alerts.', grouping: "Group common alerts into a single alert group to ensure that PMM doesn't fire duplicate alerts.", }, settings: { - title: 'Alert Settings', + title: 'Alert settings', configure: 'Use this to configure Alertmanagers in raw JSON format.', }, }; diff --git a/ui/apps/pmm/src/contexts/tour/steps/product.messages.ts b/ui/apps/pmm/src/contexts/tour/steps/product.messages.ts index 8c33019b34..fac4fc3d47 100644 --- a/ui/apps/pmm/src/contexts/tour/steps/product.messages.ts +++ b/ui/apps/pmm/src/contexts/tour/steps/product.messages.ts @@ -27,7 +27,7 @@ export const Messages = { readMore: 'Read more about our templates', }, advisors: { - title: 'Percona Advisors', + title: 'Advisors', checks: 'Advisor checks proactively monitor your databases for potential security threats, performance degradation, data integrity risks, compliance issues, and more.', readMore: 'Read more about Advisors', From 0a8cf9bd394d526c82eb3fd6f94781d5bd6217ed Mon Sep 17 00:00:00 2001 From: dmitri-saricev-3pillargloball Date: Tue, 13 Jan 2026 10:42:47 +0200 Subject: [PATCH 4/4] PMM-14630: Revert "Checked on:" to "Last checked:" Based on feedback from Davi and Catalina, both instances should use "Last checked:" consistently throughout the application. --- ui/apps/pmm/src/components/footer/Footer.test.tsx | 2 +- .../pmm/src/pages/updates/update-card/UpdateCard.messages.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/apps/pmm/src/components/footer/Footer.test.tsx b/ui/apps/pmm/src/components/footer/Footer.test.tsx index a9073e66cf..8541f47d2f 100644 --- a/ui/apps/pmm/src/components/footer/Footer.test.tsx +++ b/ui/apps/pmm/src/components/footer/Footer.test.tsx @@ -17,7 +17,7 @@ describe('Footer', () => { it('shows correct checked date', () => { render(wrapWithUpdatesProvider(