diff --git a/ui/apps/pmm/package.json b/ui/apps/pmm/package.json index b159a276dee..3875848d4fb 100644 --- a/ui/apps/pmm/package.json +++ b/ui/apps/pmm/package.json @@ -26,7 +26,7 @@ "@mui/icons-material": "^7.3.7", "@mui/material": "^7.3.7", "@mui/x-date-pickers": "^7.5.0", - "@percona/percona-ui": "1.0.23", + "@percona/peak-ui": "1.0.25", "@pmm/shared": "*", "@reactour/tour": "^3.8.0", "@tanstack/react-query": "^5.45.1", diff --git a/ui/apps/pmm/src/App.tsx b/ui/apps/pmm/src/App.tsx index 928c45f1ff5..04b8057e162 100644 --- a/ui/apps/pmm/src/App.tsx +++ b/ui/apps/pmm/src/App.tsx @@ -8,7 +8,7 @@ import { ThemeContextProvider, pmmThemeOptions, NotistackMuiSnackbar, -} from '@percona/percona-ui'; +} from '@percona/peak-ui'; import { ThemeClass } from 'components/theme-class'; import { useEffect } from 'react'; import type { ComponentType } from 'react'; diff --git a/ui/apps/pmm/src/components/app-bar/AppBar.tsx b/ui/apps/pmm/src/components/app-bar/AppBar.tsx index 537403555cd..8d49cde3def 100644 --- a/ui/apps/pmm/src/components/app-bar/AppBar.tsx +++ b/ui/apps/pmm/src/components/app-bar/AppBar.tsx @@ -10,6 +10,7 @@ import { Breadcrumbs } from 'components/breadcrumbs'; import { PMM_SUPPORT_URL } from 'lib/constants'; import { Messages } from './AppBar.messages'; import { HomeLink } from 'components/home-link'; +import Help from '@mui/icons-material/Help'; import { Icon } from 'components/icon'; export const AppBar = () => ( @@ -39,7 +40,7 @@ export const AppBar = () => ( data-testid="appbar-support-link" > - + {Messages.support} diff --git a/ui/apps/pmm/src/components/details-pane/DataPoint.tsx b/ui/apps/pmm/src/components/details-pane/DataPoint.tsx index ada32d59cbc..66d9387b0e0 100644 --- a/ui/apps/pmm/src/components/details-pane/DataPoint.tsx +++ b/ui/apps/pmm/src/components/details-pane/DataPoint.tsx @@ -1,7 +1,7 @@ import IconButton from '@mui/material/IconButton'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; -import { Tooltip } from '@percona/percona-ui'; +import { Tooltip } from '@percona/peak-ui'; import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; import { FC, PropsWithChildren } from 'react'; import Box from '@mui/material/Box'; diff --git a/ui/apps/pmm/src/components/feature-check/FeatureCheck.tsx b/ui/apps/pmm/src/components/feature-check/FeatureCheck.tsx index d2f478eaa0d..407ec03a165 100644 --- a/ui/apps/pmm/src/components/feature-check/FeatureCheck.tsx +++ b/ui/apps/pmm/src/components/feature-check/FeatureCheck.tsx @@ -1,7 +1,7 @@ import Link from '@mui/material/Link'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; -import { Card } from '@percona/percona-ui'; +import { Card } from '@percona/peak-ui'; import { Page } from 'components/page'; import { useUser } from 'contexts/user'; import { FC } from 'react'; diff --git a/ui/apps/pmm/src/components/ha-icon/HighAvailabilityIcon.tsx b/ui/apps/pmm/src/components/ha-icon/HighAvailabilityIcon.tsx index 36c394d4fbf..da85f577fca 100644 --- a/ui/apps/pmm/src/components/ha-icon/HighAvailabilityIcon.tsx +++ b/ui/apps/pmm/src/components/ha-icon/HighAvailabilityIcon.tsx @@ -1,6 +1,7 @@ import { useTheme } from '@mui/material'; import Box from '@mui/material/Box'; import { Icon } from 'components/icon'; +import { CirclesExtIcon } from '@percona/peak-ui'; import { FC } from 'react'; import { getStyles } from './HighAvailabilityIcon.styles'; import { HighAvailabilityIconProps } from './HighAvailabilityIcon.types'; @@ -13,7 +14,7 @@ const HighAvailabilityIcon: FC = ({ health }) => { return ( - + {haIcon && ( import('icons/account.svg?react'), - alerts: () => import('icons/alerts.svg?react'), - backups: () => import('icons/backups.svg?react'), - 'browse-dashboards': () => import('icons/browse-dashboards.svg?react'), - configuration: () => import('icons/configuration.svg?react'), - dashboards: () => import('icons/dashboards.svg?react'), - encrypted: () => import('icons/users-and-access.svg?react'), - explore: () => import('icons/explore.svg?react'), - haproxy: () => import('icons/haproxy.svg?react'), - help: () => import('icons/help.svg?react'), - 'help-fill': () => import('icons/help-fill.svg?react'), - 'high-availability': () => import('icons/high-availability.svg?react'), - home: () => import('icons/home.svg?react'), - intelligence: () => import('icons/percona-intelligence.svg?react'), - inventory: () => import('icons/inventory.svg?react'), - 'percona-mo': () => import('icons/percona-mo.svg?react'), - 'percona-my': () => import('icons/percona-my.svg?react'), - node: () => import('icons/home.svg?react'), - overview: () => import('icons/overview.svg?react'), - 'percona-po': () => import('icons/percona-po.svg?react'), 'pmm-titled': () => import('icons/pmm-titled.svg?react'), 'pmm-titled-outlined': () => import('icons/pmm-titled-outlined.svg?react'), 'pmm-rounded': () => import('icons/pmm-rounded.svg?react'), - proxysql: () => import('icons/proxysql.svg?react'), - qan: () => import('icons/qan.svg?react'), - 'operating-system': () => import('icons/operating-system.svg?react'), - 'sign-out': () => import('icons/sign-out.svg?react'), - summary: () => import('icons/summary.svg?react'), - 'theme-dark': () => import('icons/theme-dark.svg?react'), - 'theme-light': () => import('icons/theme-light.svg?react'), - 'graph-6': () => import('icons/graph-6.svg?react'), - percona: () => import('icons/percona.svg?react'), - check: () => import('icons/check.svg?react'), - 'knowledge-base': () => import('icons/knowledge-base.svg?react'), - search: () => import('icons/search.svg?react'), - 'percona-va': () => import('icons/percona-va.svg?react'), - 'my-organization': () => import('icons/my-organization.svg?react'), - memory: () => import('icons/memory.svg?react'), - network: () => import('icons/network.svg?react'), - 'real-time-database-off': () => - import('icons/real-time-database-off.svg?react'), - cluster: () => import('icons/cluster.svg?react'), 'status-at-risk': () => import('icons/status-at-risk.svg?react'), 'status-down': () => import('icons/status-down.svg?react'), 'status-updating': () => import('icons/status-updating.svg?react'), - 'arrow-link': () => import('icons/arrow-link.svg?react'), - 'bottom-panel-close': () => import('icons/bottom-panel-close.svg?react'), - 'collapse-content': () => import('icons/collapse-content.svg?react'), - 'expand-content': () => import('icons/expand-content.svg?react'), - 'dynamic-feed': () => import('icons/dynamic-feed.svg?react'), - 'bottom-panel-open': () => import('icons/bottom-panel-open.svg?react'), - 'electric-bolt': () => import('icons/electric-bolt.svg?react'), - 'electric-bolt-off': () => import('icons/electric-bolt-off.svg?react'), - 'play-arrow': () => import('icons/play-arrow.svg?react'), - pause: () => import('icons/pause.svg?react'), - refresh: () => import('icons/refresh.svg?react'), - 'file-download': () => import('icons/file-download.svg?react'), - // todo: move to percona-ui + // todo: move to peak-ui 'emergency-home': () => import('icons/emergency-home.svg?react'), - // todo: move to percona-ui + // todo: move to peak-ui 'chat-info-outlined': () => import('icons/chat-info-outlined.svg?react'), }; export const VIEWBOX_MAP: Partial< Record > = { - percona: '0 0 180 155', - 'knowledge-base': '0 0 28 28', 'pmm-rounded': '0 0 160 160', 'pmm-titled': '0 0 141 48', 'pmm-titled-outlined': '0 0 252 113', - 'real-time-database-off': '0 0 192 192', - 'electric-bolt': '0 0 20 20', - 'electric-bolt-off': '0 0 20 20', }; diff --git a/ui/apps/pmm/src/components/sidebar/nav-item/SidebarNavItem.test.tsx b/ui/apps/pmm/src/components/sidebar/nav-item/SidebarNavItem.test.tsx index 875deb49373..81257723e1c 100644 --- a/ui/apps/pmm/src/components/sidebar/nav-item/SidebarNavItem.test.tsx +++ b/ui/apps/pmm/src/components/sidebar/nav-item/SidebarNavItem.test.tsx @@ -5,7 +5,7 @@ import { NavItemProps } from './SidebarNavItem.types'; import { NavItem as NavTreeItem } from 'types/navigation.types'; import { collapseClasses } from '@mui/material/Collapse'; import { MemoryRouterProps } from 'react-router-dom'; -import { ThemeContextProvider, pmmThemeOptions } from '@percona/percona-ui'; +import { ThemeContextProvider, pmmThemeOptions } from '@percona/peak-ui'; const TEST_NAV_TREE: NavTreeItem = { id: 'level-0', @@ -150,7 +150,7 @@ describe('SidebarNavItem', () => { it('shows dot on root if children has a badge and is hidden', async () => { const item: NavTreeItem = { id: 'with-badge', - icon: 'home', + icon: 'pmm-rounded', url: '/root', children: [ { diff --git a/ui/apps/pmm/src/components/sidebar/nav-item/SidebarNavItem.tsx b/ui/apps/pmm/src/components/sidebar/nav-item/SidebarNavItem.tsx index d6c0ded0e73..7454e1659c5 100644 --- a/ui/apps/pmm/src/components/sidebar/nav-item/SidebarNavItem.tsx +++ b/ui/apps/pmm/src/components/sidebar/nav-item/SidebarNavItem.tsx @@ -9,7 +9,7 @@ import { } from './SidebarNavItem.utils'; import { getStyles } from './SidebarNavItem.styles'; import { useTheme } from '@mui/material/styles'; -import { NavItem } from '@percona/percona-ui'; +import { NavItem } from '@percona/peak-ui'; import ListItemText from '@mui/material/ListItemText'; import Stack from '@mui/material/Stack'; import ListItem from '@mui/material/ListItem'; diff --git a/ui/apps/pmm/src/components/sidebar/nav-item/nav-item-icon/NavItemIcon.test.tsx b/ui/apps/pmm/src/components/sidebar/nav-item/nav-item-icon/NavItemIcon.test.tsx index 4e3548af60a..5fc6d6e9fbd 100644 --- a/ui/apps/pmm/src/components/sidebar/nav-item/nav-item-icon/NavItemIcon.test.tsx +++ b/ui/apps/pmm/src/components/sidebar/nav-item/nav-item-icon/NavItemIcon.test.tsx @@ -7,7 +7,7 @@ const TestMemoizedIcon = memo(TestIcon); describe('NavItemIcon', () => { it('should render an icon (string)', () => { - render(); + render(); expect(screen).not.toBeNull(); }); diff --git a/ui/apps/pmm/src/contexts/navigation/navigation.constants.ts b/ui/apps/pmm/src/contexts/navigation/navigation.constants.ts index 8e055172d2a..e5aea6e0024 100644 --- a/ui/apps/pmm/src/contexts/navigation/navigation.constants.ts +++ b/ui/apps/pmm/src/contexts/navigation/navigation.constants.ts @@ -1,5 +1,37 @@ import { PMM_NEW_NAV_GRAFANA_PATH, PMM_NEW_NAV_PATH } from 'lib/constants'; import LoginOutlinedIcon from '@mui/icons-material/LoginOutlined'; +import AccountCircleOutlined from '@mui/icons-material/AccountCircleOutlined'; +import AppsRounded from '@mui/icons-material/AppsRounded'; +import DashboardOutlined from '@mui/icons-material/DashboardOutlined'; +import ExploreOutlined from '@mui/icons-material/ExploreOutlined'; +import Groups from '@mui/icons-material/Groups'; +import HelpOutline from '@mui/icons-material/HelpOutline'; +import Logout from '@mui/icons-material/Logout'; +import MemoryOutlined from '@mui/icons-material/MemoryOutlined'; +import NorthEast from '@mui/icons-material/NorthEast'; +import NotificationsOutlined from '@mui/icons-material/NotificationsOutlined'; +import PageviewOutlined from '@mui/icons-material/PageviewOutlined'; +import Search from '@mui/icons-material/Search'; +import Security from '@mui/icons-material/Security'; +import SettingsApplicationsOutlined from '@mui/icons-material/SettingsApplicationsOutlined'; +import SettingsBackupRestore from '@mui/icons-material/SettingsBackupRestore'; +import SettingsOutlined from '@mui/icons-material/SettingsOutlined'; +import { + CirclesExtIcon, + Graph4Icon, + Graph5Icon, + HaproxyIcon, + HomeIcon, + NetworkIntelligenceIcon, + NetworkNodeIcon, + PerconaMoIcon, + PerconaMyIcon, + PerconaPoIcon, + PerconaVaIcon, + ProxyIcon, + QueryStatsIcon, + SearchInsightsIcon, +} from '@percona/peak-ui'; import { NavItem } from 'types/navigation.types'; export const NAV_DIVIDERS: Record<'home' | 'inventory' | 'backups', NavItem> = { @@ -19,7 +51,7 @@ export const NAV_DIVIDERS: Record<'home' | 'inventory' | 'backups', NavItem> = { export const NAV_HOME_PAGE: NavItem = { id: 'home-page', - icon: 'home', + icon: HomeIcon, text: 'Home page', url: `${PMM_NEW_NAV_GRAFANA_PATH}/`, matches: [ @@ -34,24 +66,24 @@ export const NAV_HOME_PAGE: NavItem = { export const NAV_MYSQL: NavItem = { id: 'mysql', text: 'MySQL', - icon: 'percona-my', + icon: PerconaMyIcon, url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/mysql-instance-overview/mysql-instances-overview`, children: [ { id: 'mysql-overview', - icon: 'overview', + icon: PageviewOutlined, text: 'Overview', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/mysql-instance-overview/mysql-instances-overview`, }, { id: 'mysql-summary', - icon: 'summary', + icon: AppsRounded, text: 'Summary', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/mysql-instance-summary/mysql-instance-summary`, }, { id: 'mysql-high-availability', - icon: 'high-availability', + icon: Graph5Icon, text: 'High availability', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/mysql-group-replicaset-summary`, children: [ @@ -120,25 +152,25 @@ export const NAV_MYSQL: NavItem = { // export const NAV_MONGO: NavItem = { id: 'mongo', - icon: 'percona-mo', + icon: PerconaMoIcon, text: 'MongoDB', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/mongodb-instance-overview/mongodb-instances-overview`, children: [ { id: 'mongo-overview', - icon: 'overview', + icon: PageviewOutlined, text: 'Overview', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/mongodb-instance-overview/mongodb-instances-overview`, }, { id: 'mongo-summary', - icon: 'summary', + icon: AppsRounded, text: 'Summary', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/mongodb-instance-summary/mongodb-instance-summary`, }, { id: 'mongo-high-availability', - icon: 'high-availability', + icon: Graph5Icon, text: 'High availability', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/mongodb-cluster-summary`, children: [ @@ -188,25 +220,25 @@ export const NAV_MONGO: NavItem = { export const NAV_POSTGRESQL: NavItem = { id: 'postgre', text: 'PostgreSQL', - icon: 'percona-po', + icon: PerconaPoIcon, url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/postgresql-instance-overview/postgresql-instances-overview`, children: [ { id: 'postgresql-overwiew', text: 'Overview', - icon: 'overview', + icon: PageviewOutlined, url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/postgresql-instance-overview/postgresql-instances-overview`, }, { id: 'postgresql-summary', text: 'Summary', - icon: 'summary', + icon: AppsRounded, url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/postgresql-instance-summary/postgresql-instance-summary`, }, { id: 'postgresql-ha', text: 'High availability', - icon: 'high-availability', + icon: Graph5Icon, url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/postgresql-replication-overview`, children: [ { @@ -234,19 +266,19 @@ export const NAV_POSTGRESQL: NavItem = { // export const NAV_OS: NavItem = { id: 'system', - icon: 'operating-system', + icon: SettingsApplicationsOutlined, text: 'Operating system', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/node-instance-overview/nodes-overview`, children: [ { id: 'node-overview', - icon: 'overview', + icon: PageviewOutlined, text: 'Overview', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/node-instance-overview/nodes-overview`, }, { id: 'node-summary', - icon: 'summary', + icon: AppsRounded, text: 'Summary', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/node-instance-summary/node-summary`, }, @@ -293,7 +325,7 @@ export const NAV_OS: NavItem = { // export const NAV_HAPROXY: NavItem = { id: 'haproxy', - icon: 'haproxy', + icon: HaproxyIcon, text: 'HAProxy', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/haproxy-instance-summary/haproxy-instance-summary`, }; @@ -303,7 +335,7 @@ export const NAV_HAPROXY: NavItem = { // export const NAV_PROXYSQL: NavItem = { id: 'proxysql', - icon: 'proxysql', + icon: ProxyIcon, text: 'ProxySQL', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/proxysql-instance-summary/proxysql-instance-summary`, }; @@ -314,67 +346,67 @@ export const NAV_PROXYSQL: NavItem = { export const NAV_VALKEY: NavItem = { id: 'valkey', text: 'Valkey', - icon: 'percona-va', + icon: PerconaVaIcon, url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/valkey-overview/valkey-redis-overview`, children: [ { id: 'valkey-overview', text: 'Overview', - icon: 'overview', + icon: PageviewOutlined, url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/valkey-overview/valkey-redis-overview`, }, { id: 'valkey-load', text: 'Load', - icon: 'my-organization', + icon: Groups, url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/valkey-load/valkey-redis-load`, }, { id: 'valkey-memory', text: 'Memory', - icon: 'memory', + icon: MemoryOutlined, url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/valkey-memory/valkey-redis-memory`, }, { id: 'valkey-network', text: 'Network', - icon: 'network', + icon: NetworkNodeIcon, url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/valkey-network/valkey-redis-network`, }, { id: 'valkey-clients', text: 'Clients', - icon: 'my-organization', + icon: Groups, url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/valkey-clients/valkey-redis-clients`, }, { id: 'valkey-cluster-details', text: 'Cluster Details', - icon: 'high-availability', + icon: Graph5Icon, url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/valkey-cluster-details/valkey-redis-cluster-detail`, }, { id: 'valkey-replication', text: 'Replication', - icon: 'high-availability', + icon: Graph5Icon, url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/valkey-replication/valkey-redis-replication`, }, { id: 'valkey-persistence', text: 'Persistence', - icon: 'my-organization', + icon: Groups, url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/valkey-persistence-details/valkey-redis-persistence-details`, }, { id: 'valkey-commands', text: 'Command details', - icon: 'my-organization', + icon: Groups, url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/valkey-command-details/valkey-redis-command-detail`, }, { id: 'valkey-slowlog', text: 'Slow Log', - icon: 'my-organization', + icon: Groups, url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/valkey-slowlog/valkey-redis-slowlog`, }, ], @@ -385,7 +417,7 @@ export const NAV_VALKEY: NavItem = { // export const NAV_QAN: NavItem = { id: 'qan', - icon: 'qan', + icon: QueryStatsIcon, text: 'Query Analytics (QAN)', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/pmm-qan/pmm-query-analytics`, matches: ['*', `${PMM_NEW_NAV_PATH}/rta/*`], @@ -396,7 +428,7 @@ export const NAV_QAN: NavItem = { // export const NAV_RTA: NavItem = { id: 'rta', - icon: 'qan', + icon: QueryStatsIcon, text: 'Real-Time Query Analysis', url: `${PMM_NEW_NAV_PATH}/rta/selection`, }; @@ -406,14 +438,14 @@ export const NAV_RTA: NavItem = { // export const NAV_DASHBOARDS: NavItem = { id: 'dashboards', - icon: 'dashboards', + icon: DashboardOutlined, text: 'All dashboards', url: `${PMM_NEW_NAV_GRAFANA_PATH}/dashboards`, }; export const NAV_DASHBOARDS_BROWSE: NavItem = { id: 'dashboards-browse', - icon: 'browse-dashboards', + icon: SearchInsightsIcon, text: 'Browse all dashboards', url: `${PMM_NEW_NAV_GRAFANA_PATH}/dashboards`, }; @@ -463,7 +495,7 @@ export const NAV_EXPLORE_BUILDER: NavItem = { export const NAV_EXPLORE: NavItem = { id: 'explore', - icon: 'explore', + icon: ExploreOutlined, text: 'Explore', url: `${PMM_NEW_NAV_GRAFANA_PATH}/explore`, matches: [ @@ -532,14 +564,14 @@ export const NAV_ALERTS_SETTINGS: NavItem = { export const NAV_ALERTS: NavItem = { id: 'alerts', - icon: 'alerts', + icon: NotificationsOutlined, text: 'Alerts', url: `${PMM_NEW_NAV_PATH}/alerting/status`, }; export const NAV_ADVISORS: NavItem = { id: 'advisors', - icon: 'intelligence', + icon: NetworkIntelligenceIcon, text: 'Advisors', url: `${PMM_NEW_NAV_GRAFANA_PATH}/advisors`, }; @@ -555,7 +587,7 @@ export const NAV_ADVISORS_INSIGHTS = { // export const NAV_INVENTORY: NavItem = { id: 'inventory', - icon: 'inventory', + icon: Graph4Icon, text: 'Inventory', url: `${PMM_NEW_NAV_GRAFANA_PATH}/inventory`, children: [ @@ -585,7 +617,7 @@ export const NAV_INVENTORY: NavItem = { // export const NAV_BACKUPS: NavItem = { id: 'backups', - icon: 'backups', + icon: SettingsBackupRestore, text: 'Backups', url: `${PMM_NEW_NAV_GRAFANA_PATH}/backup/inventory`, children: [ @@ -618,7 +650,7 @@ export const NAV_BACKUPS: NavItem = { // export const NAV_CONFIGURATION: NavItem = { id: 'configuration', - icon: 'configuration', + icon: SettingsOutlined, text: 'Configuration', url: `${PMM_NEW_NAV_PATH}/settings`, matches: [ @@ -678,7 +710,7 @@ export const NAV_CONFIGURATION: NavItem = { // export const NAV_USERS_AND_ACCESS: NavItem = { id: 'users-and-access', - icon: 'encrypted', + icon: Security, text: 'Users and access', url: PMM_NEW_NAV_GRAFANA_PATH + '/admin/access', children: [ @@ -714,7 +746,7 @@ export const NAV_ACCESS_CONTROL: NavItem = { // export const NAV_ACCOUNT: NavItem = { id: 'account', - icon: 'account', + icon: AccountCircleOutlined, text: 'Account', url: PMM_NEW_NAV_GRAFANA_PATH + '/profile', children: [ @@ -744,7 +776,7 @@ export const NAV_THEME_TOGGLE: NavItem = { export const NAV_SIGN_OUT: NavItem = { id: 'sign-out', - icon: 'sign-out', + icon: Logout, text: 'Sign out', url: '/graph/logout', target: '_self', @@ -752,7 +784,7 @@ export const NAV_SIGN_OUT: NavItem = { export const NAV_HELP: NavItem = { id: 'help', - icon: 'help', + icon: HelpOutline, text: 'Help', url: `${PMM_NEW_NAV_PATH}/help`, }; @@ -779,7 +811,7 @@ export const NAV_FOLDER_MAP: Record = { }; export const NAV_OTHER_DASHBOARDS_TEMPLATE: Partial = { - icon: 'search', + icon: Search, text: 'Other dashboards', }; @@ -788,7 +820,7 @@ export const NAV_OTHER_DASHBOARDS_TEMPLATE: Partial = { */ export const NAV_HIGH_AVAILABILITY: NavItem = { id: 'high-availability', - icon: 'cluster', + icon: CirclesExtIcon, text: 'PMM HA', url: `${PMM_NEW_NAV_GRAFANA_PATH}/high-availability`, }; @@ -801,7 +833,7 @@ export const NAV_HIGH_AVAILABILITY_LEADER: NavItem = { export const NAV_HIGH_AVAILABILITY_NODES: NavItem = { id: 'high-availability-nodes', - icon: 'arrow-link', + icon: NorthEast, text: 'Identify Nodes', url: `${PMM_NEW_NAV_GRAFANA_PATH}/inventory/nodes?isPmmServerNode=true`, }; diff --git a/ui/apps/pmm/src/contexts/navigation/navigation.utils.tsx b/ui/apps/pmm/src/contexts/navigation/navigation.utils.tsx index 62e54718f2e..52f8ad5289e 100644 --- a/ui/apps/pmm/src/contexts/navigation/navigation.utils.tsx +++ b/ui/apps/pmm/src/contexts/navigation/navigation.utils.tsx @@ -1,3 +1,5 @@ +import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined'; +import LightModeOutlined from '@mui/icons-material/LightModeOutlined'; import { NavItem } from 'types/navigation.types'; import { ServiceType } from 'types/services.types'; import { User, UserPreferences } from 'types/user.types'; @@ -204,7 +206,7 @@ export const addAccount = ( children.push({ ...NAV_THEME_TOGGLE, - icon: colorMode === 'light' ? 'theme-dark' : 'theme-light', + icon: colorMode === 'light' ? DarkModeOutlined : LightModeOutlined, text: `Switch to ${targetMode} mode`, onClick: toggleMode, }); diff --git a/ui/apps/pmm/src/hooks/theme.ts b/ui/apps/pmm/src/hooks/theme.ts index 3f0733facd8..7904a31e1e9 100644 --- a/ui/apps/pmm/src/hooks/theme.ts +++ b/ui/apps/pmm/src/hooks/theme.ts @@ -2,7 +2,7 @@ import { useContext, useRef } from 'react'; import { useUpdatePreferences } from './api/useUser'; import messenger from 'lib/messenger'; import { ColorMode, MessageType } from '@pmm/shared'; -import { ColorModeContext } from '@percona/percona-ui'; +import { ColorModeContext } from '@percona/peak-ui'; function normalizeMode(v: unknown): ColorMode { if (typeof v === 'string' && v.toLowerCase() === 'dark') return 'dark'; diff --git a/ui/apps/pmm/src/icons/account.svg b/ui/apps/pmm/src/icons/account.svg deleted file mode 100644 index 21608f98c31..00000000000 --- a/ui/apps/pmm/src/icons/account.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/alerts.svg b/ui/apps/pmm/src/icons/alerts.svg deleted file mode 100644 index e37d3ef1583..00000000000 --- a/ui/apps/pmm/src/icons/alerts.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/arrow-link.svg b/ui/apps/pmm/src/icons/arrow-link.svg deleted file mode 100644 index 947c6bb0153..00000000000 --- a/ui/apps/pmm/src/icons/arrow-link.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/backups.svg b/ui/apps/pmm/src/icons/backups.svg deleted file mode 100644 index 4a4d3b4e2b3..00000000000 --- a/ui/apps/pmm/src/icons/backups.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/bottom-panel-close.svg b/ui/apps/pmm/src/icons/bottom-panel-close.svg deleted file mode 100644 index cca07327e59..00000000000 --- a/ui/apps/pmm/src/icons/bottom-panel-close.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/ui/apps/pmm/src/icons/bottom-panel-open.svg b/ui/apps/pmm/src/icons/bottom-panel-open.svg deleted file mode 100644 index 689368f9fd9..00000000000 --- a/ui/apps/pmm/src/icons/bottom-panel-open.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/ui/apps/pmm/src/icons/browse-dashboards.svg b/ui/apps/pmm/src/icons/browse-dashboards.svg deleted file mode 100644 index 3515afeb8aa..00000000000 --- a/ui/apps/pmm/src/icons/browse-dashboards.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/check.svg b/ui/apps/pmm/src/icons/check.svg deleted file mode 100644 index 270186596e1..00000000000 --- a/ui/apps/pmm/src/icons/check.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - \ No newline at end of file diff --git a/ui/apps/pmm/src/icons/cluster.svg b/ui/apps/pmm/src/icons/cluster.svg deleted file mode 100644 index 19915311197..00000000000 --- a/ui/apps/pmm/src/icons/cluster.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/collapse-content.svg b/ui/apps/pmm/src/icons/collapse-content.svg deleted file mode 100644 index 1e97caababc..00000000000 --- a/ui/apps/pmm/src/icons/collapse-content.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/ui/apps/pmm/src/icons/configuration.svg b/ui/apps/pmm/src/icons/configuration.svg deleted file mode 100644 index 6d84edef6bb..00000000000 --- a/ui/apps/pmm/src/icons/configuration.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/dashboards.svg b/ui/apps/pmm/src/icons/dashboards.svg deleted file mode 100644 index efa241c81cc..00000000000 --- a/ui/apps/pmm/src/icons/dashboards.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/dynamic-feed.svg b/ui/apps/pmm/src/icons/dynamic-feed.svg deleted file mode 100644 index d9c3110e6b4..00000000000 --- a/ui/apps/pmm/src/icons/dynamic-feed.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/ui/apps/pmm/src/icons/electric-bolt-off.svg b/ui/apps/pmm/src/icons/electric-bolt-off.svg deleted file mode 100644 index 96620541cf2..00000000000 --- a/ui/apps/pmm/src/icons/electric-bolt-off.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/ui/apps/pmm/src/icons/electric-bolt.svg b/ui/apps/pmm/src/icons/electric-bolt.svg deleted file mode 100644 index 979e348270a..00000000000 --- a/ui/apps/pmm/src/icons/electric-bolt.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/expand-content.svg b/ui/apps/pmm/src/icons/expand-content.svg deleted file mode 100644 index 05fd873e09f..00000000000 --- a/ui/apps/pmm/src/icons/expand-content.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/ui/apps/pmm/src/icons/explore.svg b/ui/apps/pmm/src/icons/explore.svg deleted file mode 100644 index 2cd1368c6f1..00000000000 --- a/ui/apps/pmm/src/icons/explore.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/file-download.svg b/ui/apps/pmm/src/icons/file-download.svg deleted file mode 100644 index ea4f5596715..00000000000 --- a/ui/apps/pmm/src/icons/file-download.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/ui/apps/pmm/src/icons/graph-6.svg b/ui/apps/pmm/src/icons/graph-6.svg deleted file mode 100644 index 093932bb079..00000000000 --- a/ui/apps/pmm/src/icons/graph-6.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/ui/apps/pmm/src/icons/haproxy.svg b/ui/apps/pmm/src/icons/haproxy.svg deleted file mode 100644 index 585510aab74..00000000000 --- a/ui/apps/pmm/src/icons/haproxy.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/help-fill.svg b/ui/apps/pmm/src/icons/help-fill.svg deleted file mode 100644 index fc53b939573..00000000000 --- a/ui/apps/pmm/src/icons/help-fill.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/ui/apps/pmm/src/icons/help.svg b/ui/apps/pmm/src/icons/help.svg deleted file mode 100644 index 3cdd5e2066c..00000000000 --- a/ui/apps/pmm/src/icons/help.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/high-availability.svg b/ui/apps/pmm/src/icons/high-availability.svg deleted file mode 100644 index 74c9c3348f9..00000000000 --- a/ui/apps/pmm/src/icons/high-availability.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/home.svg b/ui/apps/pmm/src/icons/home.svg deleted file mode 100644 index 37004b95070..00000000000 --- a/ui/apps/pmm/src/icons/home.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/inventory.svg b/ui/apps/pmm/src/icons/inventory.svg deleted file mode 100644 index 7b8ab71a42c..00000000000 --- a/ui/apps/pmm/src/icons/inventory.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/knowledge-base.svg b/ui/apps/pmm/src/icons/knowledge-base.svg deleted file mode 100644 index 30b024899f4..00000000000 --- a/ui/apps/pmm/src/icons/knowledge-base.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - \ No newline at end of file diff --git a/ui/apps/pmm/src/icons/memory.svg b/ui/apps/pmm/src/icons/memory.svg deleted file mode 100644 index a9ce3ce844d..00000000000 --- a/ui/apps/pmm/src/icons/memory.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/ui/apps/pmm/src/icons/my-organization.svg b/ui/apps/pmm/src/icons/my-organization.svg deleted file mode 100644 index 9346136f722..00000000000 --- a/ui/apps/pmm/src/icons/my-organization.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/ui/apps/pmm/src/icons/network.svg b/ui/apps/pmm/src/icons/network.svg deleted file mode 100644 index 0e8f011ea30..00000000000 --- a/ui/apps/pmm/src/icons/network.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/ui/apps/pmm/src/icons/operating-system.svg b/ui/apps/pmm/src/icons/operating-system.svg deleted file mode 100644 index c30b6fdbc3c..00000000000 --- a/ui/apps/pmm/src/icons/operating-system.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/overview.svg b/ui/apps/pmm/src/icons/overview.svg deleted file mode 100644 index 8fff71e8027..00000000000 --- a/ui/apps/pmm/src/icons/overview.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/pause.svg b/ui/apps/pmm/src/icons/pause.svg deleted file mode 100644 index 261b4b51cf6..00000000000 --- a/ui/apps/pmm/src/icons/pause.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/ui/apps/pmm/src/icons/percona-intelligence.svg b/ui/apps/pmm/src/icons/percona-intelligence.svg deleted file mode 100644 index ddd7858d2ab..00000000000 --- a/ui/apps/pmm/src/icons/percona-intelligence.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/percona-mo.svg b/ui/apps/pmm/src/icons/percona-mo.svg deleted file mode 100644 index a371e8cd9b6..00000000000 --- a/ui/apps/pmm/src/icons/percona-mo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui/apps/pmm/src/icons/percona-my.svg b/ui/apps/pmm/src/icons/percona-my.svg deleted file mode 100644 index e5f21d04c7b..00000000000 --- a/ui/apps/pmm/src/icons/percona-my.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui/apps/pmm/src/icons/percona-po.svg b/ui/apps/pmm/src/icons/percona-po.svg deleted file mode 100644 index a9c41f90dc9..00000000000 --- a/ui/apps/pmm/src/icons/percona-po.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/ui/apps/pmm/src/icons/percona-va.svg b/ui/apps/pmm/src/icons/percona-va.svg deleted file mode 100644 index 92db187b593..00000000000 --- a/ui/apps/pmm/src/icons/percona-va.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui/apps/pmm/src/icons/percona.svg b/ui/apps/pmm/src/icons/percona.svg deleted file mode 100644 index b13e768cdc6..00000000000 --- a/ui/apps/pmm/src/icons/percona.svg +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/ui/apps/pmm/src/icons/play-arrow.svg b/ui/apps/pmm/src/icons/play-arrow.svg deleted file mode 100644 index 0bcbb9c415f..00000000000 --- a/ui/apps/pmm/src/icons/play-arrow.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/ui/apps/pmm/src/icons/proxysql.svg b/ui/apps/pmm/src/icons/proxysql.svg deleted file mode 100644 index b31db2aef36..00000000000 --- a/ui/apps/pmm/src/icons/proxysql.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/qan.svg b/ui/apps/pmm/src/icons/qan.svg deleted file mode 100644 index d6da16cf5d3..00000000000 --- a/ui/apps/pmm/src/icons/qan.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/real-time-database-off.svg b/ui/apps/pmm/src/icons/real-time-database-off.svg deleted file mode 100644 index dfbeb3d0bb0..00000000000 --- a/ui/apps/pmm/src/icons/real-time-database-off.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/ui/apps/pmm/src/icons/refresh.svg b/ui/apps/pmm/src/icons/refresh.svg deleted file mode 100644 index 818ec0770a3..00000000000 --- a/ui/apps/pmm/src/icons/refresh.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/ui/apps/pmm/src/icons/search.svg b/ui/apps/pmm/src/icons/search.svg deleted file mode 100644 index d835907d85a..00000000000 --- a/ui/apps/pmm/src/icons/search.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/sign-out.svg b/ui/apps/pmm/src/icons/sign-out.svg deleted file mode 100644 index 597b59d754b..00000000000 --- a/ui/apps/pmm/src/icons/sign-out.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/summary.svg b/ui/apps/pmm/src/icons/summary.svg deleted file mode 100644 index 9cdb38a371c..00000000000 --- a/ui/apps/pmm/src/icons/summary.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/theme-dark.svg b/ui/apps/pmm/src/icons/theme-dark.svg deleted file mode 100644 index 949c7ce09c3..00000000000 --- a/ui/apps/pmm/src/icons/theme-dark.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/theme-light.svg b/ui/apps/pmm/src/icons/theme-light.svg deleted file mode 100644 index a040c64597a..00000000000 --- a/ui/apps/pmm/src/icons/theme-light.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/icons/users-and-access.svg b/ui/apps/pmm/src/icons/users-and-access.svg deleted file mode 100644 index f0631933941..00000000000 --- a/ui/apps/pmm/src/icons/users-and-access.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/apps/pmm/src/pages/alerting/status/AlertsPage.tsx b/ui/apps/pmm/src/pages/alerting/status/AlertsPage.tsx index 55ab535cb23..73f74c8cd0d 100644 --- a/ui/apps/pmm/src/pages/alerting/status/AlertsPage.tsx +++ b/ui/apps/pmm/src/pages/alerting/status/AlertsPage.tsx @@ -11,7 +11,7 @@ import { useAlertmanagerAlerts } from 'hooks/api/useAlertmanagerAlerts'; import { useAlertmanagerSilences } from 'hooks/api/useAlertmanagerSilences'; import { buildSilenceMap, flattenAlertRules } from './AlertsPage.utils'; import { AlertStatusTable } from './table'; -import { useDetailsPaneNavigation } from '@percona/percona-ui'; +import { useDetailsPaneNavigation } from '@percona/peak-ui'; import { AlertRow, AlertsTableRow } from './AlertsPage.types'; import { AlertDetailsPane } from './details-pane'; import { Messages } from './AlertsPage.messages'; diff --git a/ui/apps/pmm/src/pages/alerting/status/details-pane/AlertDetailsPane.tsx b/ui/apps/pmm/src/pages/alerting/status/details-pane/AlertDetailsPane.tsx index 1110ecbcd3b..070309e2113 100644 --- a/ui/apps/pmm/src/pages/alerting/status/details-pane/AlertDetailsPane.tsx +++ b/ui/apps/pmm/src/pages/alerting/status/details-pane/AlertDetailsPane.tsx @@ -9,12 +9,14 @@ import Tabs from '@mui/material/Tabs'; import Tooltip from '@mui/material/Tooltip'; import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined'; import KeyboardArrowUpOutlinedIcon from '@mui/icons-material/KeyboardArrowUpOutlined'; -import { Icon } from 'components/icon'; import { useEscapeKey } from 'utils/keys.utils'; import { AlertsTableRow } from '../AlertsPage.types'; import AlertDetailsTab from './details/AlertDetailsTab'; import { Messages } from './AlertDetailsPane.messages'; -import { UseDetailsPaneNavigationResult } from '@percona/percona-ui'; +import { + BottomPanelCloseIcon, + UseDetailsPaneNavigationResult, +} from '@percona/peak-ui'; import RawDataTab from './raw-data/RawDataTab'; import { useAlertDetailsPane } from './AlertDetailsPane.utils'; @@ -117,7 +119,7 @@ const AlertDetailsPane: FC = ({ aria-label={Messages.actions.close} onClick={handleClose} > - + diff --git a/ui/apps/pmm/src/pages/alerting/status/details-pane/details/AlertDetailsTab.tsx b/ui/apps/pmm/src/pages/alerting/status/details-pane/details/AlertDetailsTab.tsx index fe2d22e77c7..841975aa672 100644 --- a/ui/apps/pmm/src/pages/alerting/status/details-pane/details/AlertDetailsTab.tsx +++ b/ui/apps/pmm/src/pages/alerting/status/details-pane/details/AlertDetailsTab.tsx @@ -3,7 +3,7 @@ import { Grid, Stack, Typography } from '@mui/material'; import { Messages } from './AlertDetailsTab.messages'; import DataPoint from 'components/details-pane/DataPoint'; import ValueThreshold from './value-threshold/ValueThreshold'; -import { Chip, CodeBlock } from '@percona/percona-ui'; +import { Chip, CodeBlock } from '@percona/peak-ui'; import { STATUS_COLOR_MAP, STATUS_LABEL_MAP } from '../../AlertsPage.constants'; import { formatTriggeredAt } from '../../table/AlertStatusTable.utils'; import NotificationsOffOutlinedIcon from '@mui/icons-material/NotificationsOffOutlined'; diff --git a/ui/apps/pmm/src/pages/alerting/status/details-pane/raw-data/RawDataTab.tsx b/ui/apps/pmm/src/pages/alerting/status/details-pane/raw-data/RawDataTab.tsx index d48c38f6d26..89f128691be 100644 --- a/ui/apps/pmm/src/pages/alerting/status/details-pane/raw-data/RawDataTab.tsx +++ b/ui/apps/pmm/src/pages/alerting/status/details-pane/raw-data/RawDataTab.tsx @@ -9,7 +9,7 @@ import Typography from '@mui/material/Typography'; import { Messages } from './RawDataTab.messages'; import TableBody from '@mui/material/TableBody'; import { AlertDetailsPane } from '../AlertDetailsPane.types'; -import { CodeBlock } from '@percona/percona-ui'; +import { CodeBlock } from '@percona/peak-ui'; interface Props { details: AlertDetailsPane; diff --git a/ui/apps/pmm/src/pages/alerting/status/table/AlertStatusTable.constants.tsx b/ui/apps/pmm/src/pages/alerting/status/table/AlertStatusTable.constants.tsx index 696a70aaea7..1fb39eeb2e3 100644 --- a/ui/apps/pmm/src/pages/alerting/status/table/AlertStatusTable.constants.tsx +++ b/ui/apps/pmm/src/pages/alerting/status/table/AlertStatusTable.constants.tsx @@ -1,4 +1,4 @@ -import { Chip, MRT_ColumnDef } from '@percona/percona-ui'; +import { Chip, MRT_ColumnDef } from '@percona/peak-ui'; import { AlertsTableRow } from '../AlertsPage.types'; import type { AlertSeverity as Severity } from 'types/alerting.types'; import { Stack, Typography } from '@mui/material'; diff --git a/ui/apps/pmm/src/pages/alerting/status/table/AlertStatusTable.tsx b/ui/apps/pmm/src/pages/alerting/status/table/AlertStatusTable.tsx index 5d04491338e..a16f2aa25e1 100644 --- a/ui/apps/pmm/src/pages/alerting/status/table/AlertStatusTable.tsx +++ b/ui/apps/pmm/src/pages/alerting/status/table/AlertStatusTable.tsx @@ -1,4 +1,4 @@ -import { Table, useNavigableRows } from '@percona/percona-ui'; +import { BottomPanelOpenIcon, Table, useNavigableRows } from '@percona/peak-ui'; import { type MRT_Row } from 'material-react-table'; import { FC, useMemo, useState } from 'react'; import { ALERT_STATUS_COLUMNS } from './AlertStatusTable.constants'; @@ -30,7 +30,6 @@ import EditOutlinedIcon from '@mui/icons-material/EditOutlined'; import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined'; import NotificationsOffOutlinedIcon from '@mui/icons-material/NotificationsOffOutlined'; import NotificationsActiveOutlinedIcon from '@mui/icons-material/NotificationsActiveOutlined'; -import { Icon } from 'components/icon'; import { Messages } from './AlertStatusTable.messages'; import { useUser } from 'contexts/user'; import AlertsStatusEmptyState from './empty-state/AlertsStatusEmptyState'; @@ -151,7 +150,7 @@ const AlertStatusTable: FC = ({ }} > - + {Messages.notificationDetails} , diff --git a/ui/apps/pmm/src/pages/help-center/help-center-card/HelpCenterCard.tsx b/ui/apps/pmm/src/pages/help-center/help-center-card/HelpCenterCard.tsx index 7c4205000a9..aa89f0e6823 100644 --- a/ui/apps/pmm/src/pages/help-center/help-center-card/HelpCenterCard.tsx +++ b/ui/apps/pmm/src/pages/help-center/help-center-card/HelpCenterCard.tsx @@ -7,11 +7,14 @@ import NorthEast from '@mui/icons-material/NorthEast'; import SaveAlt from '@mui/icons-material/SaveAlt'; import MapOutlined from '@mui/icons-material/MapOutlined'; import { FC, ReactNode, useCallback } from 'react'; -import { semanticTokensLight, semanticTokensDark } from '@percona/percona-ui'; +import { + semanticTokensLight, + semanticTokensDark, + KnowledgeBaseIcon, +} from '@percona/peak-ui'; import { CARD_IDS, START_ICON } from '../HelpCenter.constants'; import { HelpCenterCardProps } from './HelpCenterCard.types'; import { Link } from 'react-router-dom'; -import { Icon } from 'components/icon'; export const HelpCenterCard: FC = ({ card }) => { const { id, title, borderColorKey, description, buttons } = card; @@ -25,7 +28,7 @@ export const HelpCenterCard: FC = ({ card }) => { const getIcon = useCallback((cardId: string): ReactNode => { switch (cardId) { case CARD_IDS.pmmDocs: - return ; + return ; case CARD_IDS.support: return ; case CARD_IDS.forum: diff --git a/ui/apps/pmm/src/pages/help-center/help-center-card/HelpCenterCard.types.ts b/ui/apps/pmm/src/pages/help-center/help-center-card/HelpCenterCard.types.ts index 9ebdede8c91..5afdd0f769e 100644 --- a/ui/apps/pmm/src/pages/help-center/help-center-card/HelpCenterCard.types.ts +++ b/ui/apps/pmm/src/pages/help-center/help-center-card/HelpCenterCard.types.ts @@ -1,4 +1,4 @@ -import type { SemanticTokens } from '@percona/percona-ui'; +import type { SemanticTokens } from '@percona/peak-ui'; export type HelpCardChartKey = keyof SemanticTokens['charts']; diff --git a/ui/apps/pmm/src/pages/rta/overview/RealtimeOverview.tsx b/ui/apps/pmm/src/pages/rta/overview/RealtimeOverview.tsx index 5637ad7056e..268dd883325 100644 --- a/ui/apps/pmm/src/pages/rta/overview/RealtimeOverview.tsx +++ b/ui/apps/pmm/src/pages/rta/overview/RealtimeOverview.tsx @@ -5,13 +5,17 @@ import { Link as RouterLink, useSearchParams, } from 'react-router-dom'; -import { useDetailsPaneNavigation } from '@percona/percona-ui'; +import { useDetailsPaneNavigation } from '@percona/peak-ui'; import { RealtimePage } from '../components/rta-page'; import { useRealtimeQueries, useRealtimeSessions } from 'hooks/api/useRealtime'; import OverviewTable from './table/OverviewTable'; import { DetailsPane } from './details-pane'; import type { QueryData } from 'types/rta.types'; -import { Icon } from 'components/icon'; +import DynamicFeed from '@mui/icons-material/DynamicFeed'; +import FileDownloadOutlined from '@mui/icons-material/FileDownloadOutlined'; +import Pause from '@mui/icons-material/Pause'; +import PlayArrow from '@mui/icons-material/PlayArrow'; +import Refresh from '@mui/icons-material/Refresh'; import { Messages } from './RealtimeOverview.messages'; import { createRealtimeSessionsUrl } from 'utils/link.utils'; import Stack from '@mui/material/Stack'; @@ -145,9 +149,7 @@ const RealtimeOverviewPage: FC = () => { : 'overview-table-resume-button' } size="medium" - startIcon={ - fetching ? : - } + startIcon={fetching ? : } disabled={serviceIds.length === 0} color="inherit" variant="text" @@ -165,7 +167,7 @@ const RealtimeOverviewPage: FC = () => {