diff --git a/ui/apps/pmm/package.json b/ui/apps/pmm/package.json index 3875848d4fb..b159a276dee 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/peak-ui": "1.0.25", + "@percona/percona-ui": "1.0.23", "@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 04b8057e162..928c45f1ff5 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/peak-ui'; +} from '@percona/percona-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 8d49cde3def..537403555cd 100644 --- a/ui/apps/pmm/src/components/app-bar/AppBar.tsx +++ b/ui/apps/pmm/src/components/app-bar/AppBar.tsx @@ -10,7 +10,6 @@ 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 = () => ( @@ -40,7 +39,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 66d9387b0e0..ada32d59cbc 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/peak-ui'; +import { Tooltip } from '@percona/percona-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 407ec03a165..d2f478eaa0d 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/peak-ui'; +import { Card } from '@percona/percona-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 da85f577fca..36c394d4fbf 100644 --- a/ui/apps/pmm/src/components/ha-icon/HighAvailabilityIcon.tsx +++ b/ui/apps/pmm/src/components/ha-icon/HighAvailabilityIcon.tsx @@ -1,7 +1,6 @@ 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'; @@ -14,7 +13,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'), - // todo: move to peak-ui + '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 'emergency-home': () => import('icons/emergency-home.svg?react'), - // todo: move to peak-ui + // todo: move to percona-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 81257723e1c..875deb49373 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/peak-ui'; +import { ThemeContextProvider, pmmThemeOptions } from '@percona/percona-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: 'pmm-rounded', + icon: 'home', 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 7454e1659c5..d6c0ded0e73 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/peak-ui'; +import { NavItem } from '@percona/percona-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 5fc6d6e9fbd..4e3548af60a 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 e5aea6e0024..8e055172d2a 100644 --- a/ui/apps/pmm/src/contexts/navigation/navigation.constants.ts +++ b/ui/apps/pmm/src/contexts/navigation/navigation.constants.ts @@ -1,37 +1,5 @@ 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> = { @@ -51,7 +19,7 @@ export const NAV_DIVIDERS: Record<'home' | 'inventory' | 'backups', NavItem> = { export const NAV_HOME_PAGE: NavItem = { id: 'home-page', - icon: HomeIcon, + icon: 'home', text: 'Home page', url: `${PMM_NEW_NAV_GRAFANA_PATH}/`, matches: [ @@ -66,24 +34,24 @@ export const NAV_HOME_PAGE: NavItem = { export const NAV_MYSQL: NavItem = { id: 'mysql', text: 'MySQL', - icon: PerconaMyIcon, + icon: 'percona-my', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/mysql-instance-overview/mysql-instances-overview`, children: [ { id: 'mysql-overview', - icon: PageviewOutlined, + icon: 'overview', text: 'Overview', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/mysql-instance-overview/mysql-instances-overview`, }, { id: 'mysql-summary', - icon: AppsRounded, + icon: 'summary', text: 'Summary', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/mysql-instance-summary/mysql-instance-summary`, }, { id: 'mysql-high-availability', - icon: Graph5Icon, + icon: 'high-availability', text: 'High availability', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/mysql-group-replicaset-summary`, children: [ @@ -152,25 +120,25 @@ export const NAV_MYSQL: NavItem = { // export const NAV_MONGO: NavItem = { id: 'mongo', - icon: PerconaMoIcon, + icon: 'percona-mo', text: 'MongoDB', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/mongodb-instance-overview/mongodb-instances-overview`, children: [ { id: 'mongo-overview', - icon: PageviewOutlined, + icon: 'overview', text: 'Overview', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/mongodb-instance-overview/mongodb-instances-overview`, }, { id: 'mongo-summary', - icon: AppsRounded, + icon: 'summary', text: 'Summary', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/mongodb-instance-summary/mongodb-instance-summary`, }, { id: 'mongo-high-availability', - icon: Graph5Icon, + icon: 'high-availability', text: 'High availability', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/mongodb-cluster-summary`, children: [ @@ -220,25 +188,25 @@ export const NAV_MONGO: NavItem = { export const NAV_POSTGRESQL: NavItem = { id: 'postgre', text: 'PostgreSQL', - icon: PerconaPoIcon, + icon: 'percona-po', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/postgresql-instance-overview/postgresql-instances-overview`, children: [ { id: 'postgresql-overwiew', text: 'Overview', - icon: PageviewOutlined, + icon: 'overview', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/postgresql-instance-overview/postgresql-instances-overview`, }, { id: 'postgresql-summary', text: 'Summary', - icon: AppsRounded, + icon: 'summary', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/postgresql-instance-summary/postgresql-instance-summary`, }, { id: 'postgresql-ha', text: 'High availability', - icon: Graph5Icon, + icon: 'high-availability', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/postgresql-replication-overview`, children: [ { @@ -266,19 +234,19 @@ export const NAV_POSTGRESQL: NavItem = { // export const NAV_OS: NavItem = { id: 'system', - icon: SettingsApplicationsOutlined, + icon: 'operating-system', text: 'Operating system', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/node-instance-overview/nodes-overview`, children: [ { id: 'node-overview', - icon: PageviewOutlined, + icon: 'overview', text: 'Overview', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/node-instance-overview/nodes-overview`, }, { id: 'node-summary', - icon: AppsRounded, + icon: 'summary', text: 'Summary', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/node-instance-summary/node-summary`, }, @@ -325,7 +293,7 @@ export const NAV_OS: NavItem = { // export const NAV_HAPROXY: NavItem = { id: 'haproxy', - icon: HaproxyIcon, + icon: 'haproxy', text: 'HAProxy', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/haproxy-instance-summary/haproxy-instance-summary`, }; @@ -335,7 +303,7 @@ export const NAV_HAPROXY: NavItem = { // export const NAV_PROXYSQL: NavItem = { id: 'proxysql', - icon: ProxyIcon, + icon: 'proxysql', text: 'ProxySQL', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/proxysql-instance-summary/proxysql-instance-summary`, }; @@ -346,67 +314,67 @@ export const NAV_PROXYSQL: NavItem = { export const NAV_VALKEY: NavItem = { id: 'valkey', text: 'Valkey', - icon: PerconaVaIcon, + icon: 'percona-va', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/valkey-overview/valkey-redis-overview`, children: [ { id: 'valkey-overview', text: 'Overview', - icon: PageviewOutlined, + icon: 'overview', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/valkey-overview/valkey-redis-overview`, }, { id: 'valkey-load', text: 'Load', - icon: Groups, + icon: 'my-organization', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/valkey-load/valkey-redis-load`, }, { id: 'valkey-memory', text: 'Memory', - icon: MemoryOutlined, + icon: 'memory', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/valkey-memory/valkey-redis-memory`, }, { id: 'valkey-network', text: 'Network', - icon: NetworkNodeIcon, + icon: 'network', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/valkey-network/valkey-redis-network`, }, { id: 'valkey-clients', text: 'Clients', - icon: Groups, + icon: 'my-organization', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/valkey-clients/valkey-redis-clients`, }, { id: 'valkey-cluster-details', text: 'Cluster Details', - icon: Graph5Icon, + icon: 'high-availability', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/valkey-cluster-details/valkey-redis-cluster-detail`, }, { id: 'valkey-replication', text: 'Replication', - icon: Graph5Icon, + icon: 'high-availability', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/valkey-replication/valkey-redis-replication`, }, { id: 'valkey-persistence', text: 'Persistence', - icon: Groups, + icon: 'my-organization', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/valkey-persistence-details/valkey-redis-persistence-details`, }, { id: 'valkey-commands', text: 'Command details', - icon: Groups, + icon: 'my-organization', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/valkey-command-details/valkey-redis-command-detail`, }, { id: 'valkey-slowlog', text: 'Slow Log', - icon: Groups, + icon: 'my-organization', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/valkey-slowlog/valkey-redis-slowlog`, }, ], @@ -417,7 +385,7 @@ export const NAV_VALKEY: NavItem = { // export const NAV_QAN: NavItem = { id: 'qan', - icon: QueryStatsIcon, + icon: 'qan', text: 'Query Analytics (QAN)', url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/pmm-qan/pmm-query-analytics`, matches: ['*', `${PMM_NEW_NAV_PATH}/rta/*`], @@ -428,7 +396,7 @@ export const NAV_QAN: NavItem = { // export const NAV_RTA: NavItem = { id: 'rta', - icon: QueryStatsIcon, + icon: 'qan', text: 'Real-Time Query Analysis', url: `${PMM_NEW_NAV_PATH}/rta/selection`, }; @@ -438,14 +406,14 @@ export const NAV_RTA: NavItem = { // export const NAV_DASHBOARDS: NavItem = { id: 'dashboards', - icon: DashboardOutlined, + icon: 'dashboards', text: 'All dashboards', url: `${PMM_NEW_NAV_GRAFANA_PATH}/dashboards`, }; export const NAV_DASHBOARDS_BROWSE: NavItem = { id: 'dashboards-browse', - icon: SearchInsightsIcon, + icon: 'browse-dashboards', text: 'Browse all dashboards', url: `${PMM_NEW_NAV_GRAFANA_PATH}/dashboards`, }; @@ -495,7 +463,7 @@ export const NAV_EXPLORE_BUILDER: NavItem = { export const NAV_EXPLORE: NavItem = { id: 'explore', - icon: ExploreOutlined, + icon: 'explore', text: 'Explore', url: `${PMM_NEW_NAV_GRAFANA_PATH}/explore`, matches: [ @@ -564,14 +532,14 @@ export const NAV_ALERTS_SETTINGS: NavItem = { export const NAV_ALERTS: NavItem = { id: 'alerts', - icon: NotificationsOutlined, + icon: 'alerts', text: 'Alerts', url: `${PMM_NEW_NAV_PATH}/alerting/status`, }; export const NAV_ADVISORS: NavItem = { id: 'advisors', - icon: NetworkIntelligenceIcon, + icon: 'intelligence', text: 'Advisors', url: `${PMM_NEW_NAV_GRAFANA_PATH}/advisors`, }; @@ -587,7 +555,7 @@ export const NAV_ADVISORS_INSIGHTS = { // export const NAV_INVENTORY: NavItem = { id: 'inventory', - icon: Graph4Icon, + icon: 'inventory', text: 'Inventory', url: `${PMM_NEW_NAV_GRAFANA_PATH}/inventory`, children: [ @@ -617,7 +585,7 @@ export const NAV_INVENTORY: NavItem = { // export const NAV_BACKUPS: NavItem = { id: 'backups', - icon: SettingsBackupRestore, + icon: 'backups', text: 'Backups', url: `${PMM_NEW_NAV_GRAFANA_PATH}/backup/inventory`, children: [ @@ -650,7 +618,7 @@ export const NAV_BACKUPS: NavItem = { // export const NAV_CONFIGURATION: NavItem = { id: 'configuration', - icon: SettingsOutlined, + icon: 'configuration', text: 'Configuration', url: `${PMM_NEW_NAV_PATH}/settings`, matches: [ @@ -710,7 +678,7 @@ export const NAV_CONFIGURATION: NavItem = { // export const NAV_USERS_AND_ACCESS: NavItem = { id: 'users-and-access', - icon: Security, + icon: 'encrypted', text: 'Users and access', url: PMM_NEW_NAV_GRAFANA_PATH + '/admin/access', children: [ @@ -746,7 +714,7 @@ export const NAV_ACCESS_CONTROL: NavItem = { // export const NAV_ACCOUNT: NavItem = { id: 'account', - icon: AccountCircleOutlined, + icon: 'account', text: 'Account', url: PMM_NEW_NAV_GRAFANA_PATH + '/profile', children: [ @@ -776,7 +744,7 @@ export const NAV_THEME_TOGGLE: NavItem = { export const NAV_SIGN_OUT: NavItem = { id: 'sign-out', - icon: Logout, + icon: 'sign-out', text: 'Sign out', url: '/graph/logout', target: '_self', @@ -784,7 +752,7 @@ export const NAV_SIGN_OUT: NavItem = { export const NAV_HELP: NavItem = { id: 'help', - icon: HelpOutline, + icon: 'help', text: 'Help', url: `${PMM_NEW_NAV_PATH}/help`, }; @@ -811,7 +779,7 @@ export const NAV_FOLDER_MAP: Record = { }; export const NAV_OTHER_DASHBOARDS_TEMPLATE: Partial = { - icon: Search, + icon: 'search', text: 'Other dashboards', }; @@ -820,7 +788,7 @@ export const NAV_OTHER_DASHBOARDS_TEMPLATE: Partial = { */ export const NAV_HIGH_AVAILABILITY: NavItem = { id: 'high-availability', - icon: CirclesExtIcon, + icon: 'cluster', text: 'PMM HA', url: `${PMM_NEW_NAV_GRAFANA_PATH}/high-availability`, }; @@ -833,7 +801,7 @@ export const NAV_HIGH_AVAILABILITY_LEADER: NavItem = { export const NAV_HIGH_AVAILABILITY_NODES: NavItem = { id: 'high-availability-nodes', - icon: NorthEast, + icon: 'arrow-link', 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 52f8ad5289e..62e54718f2e 100644 --- a/ui/apps/pmm/src/contexts/navigation/navigation.utils.tsx +++ b/ui/apps/pmm/src/contexts/navigation/navigation.utils.tsx @@ -1,5 +1,3 @@ -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'; @@ -206,7 +204,7 @@ export const addAccount = ( children.push({ ...NAV_THEME_TOGGLE, - icon: colorMode === 'light' ? DarkModeOutlined : LightModeOutlined, + icon: colorMode === 'light' ? 'theme-dark' : 'theme-light', 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 7904a31e1e9..3f0733facd8 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/peak-ui'; +import { ColorModeContext } from '@percona/percona-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 new file mode 100644 index 00000000000..21608f98c31 --- /dev/null +++ b/ui/apps/pmm/src/icons/account.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/alerts.svg b/ui/apps/pmm/src/icons/alerts.svg new file mode 100644 index 00000000000..e37d3ef1583 --- /dev/null +++ b/ui/apps/pmm/src/icons/alerts.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/arrow-link.svg b/ui/apps/pmm/src/icons/arrow-link.svg new file mode 100644 index 00000000000..947c6bb0153 --- /dev/null +++ b/ui/apps/pmm/src/icons/arrow-link.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/backups.svg b/ui/apps/pmm/src/icons/backups.svg new file mode 100644 index 00000000000..4a4d3b4e2b3 --- /dev/null +++ b/ui/apps/pmm/src/icons/backups.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/bottom-panel-close.svg b/ui/apps/pmm/src/icons/bottom-panel-close.svg new file mode 100644 index 00000000000..cca07327e59 --- /dev/null +++ b/ui/apps/pmm/src/icons/bottom-panel-close.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/ui/apps/pmm/src/icons/bottom-panel-open.svg b/ui/apps/pmm/src/icons/bottom-panel-open.svg new file mode 100644 index 00000000000..689368f9fd9 --- /dev/null +++ b/ui/apps/pmm/src/icons/bottom-panel-open.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/ui/apps/pmm/src/icons/browse-dashboards.svg b/ui/apps/pmm/src/icons/browse-dashboards.svg new file mode 100644 index 00000000000..3515afeb8aa --- /dev/null +++ b/ui/apps/pmm/src/icons/browse-dashboards.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/check.svg b/ui/apps/pmm/src/icons/check.svg new file mode 100644 index 00000000000..270186596e1 --- /dev/null +++ b/ui/apps/pmm/src/icons/check.svg @@ -0,0 +1,19 @@ + + + + + + + + + + \ No newline at end of file diff --git a/ui/apps/pmm/src/icons/cluster.svg b/ui/apps/pmm/src/icons/cluster.svg new file mode 100644 index 00000000000..19915311197 --- /dev/null +++ b/ui/apps/pmm/src/icons/cluster.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/collapse-content.svg b/ui/apps/pmm/src/icons/collapse-content.svg new file mode 100644 index 00000000000..1e97caababc --- /dev/null +++ b/ui/apps/pmm/src/icons/collapse-content.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/ui/apps/pmm/src/icons/configuration.svg b/ui/apps/pmm/src/icons/configuration.svg new file mode 100644 index 00000000000..6d84edef6bb --- /dev/null +++ b/ui/apps/pmm/src/icons/configuration.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/dashboards.svg b/ui/apps/pmm/src/icons/dashboards.svg new file mode 100644 index 00000000000..efa241c81cc --- /dev/null +++ b/ui/apps/pmm/src/icons/dashboards.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/dynamic-feed.svg b/ui/apps/pmm/src/icons/dynamic-feed.svg new file mode 100644 index 00000000000..d9c3110e6b4 --- /dev/null +++ b/ui/apps/pmm/src/icons/dynamic-feed.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/ui/apps/pmm/src/icons/electric-bolt-off.svg b/ui/apps/pmm/src/icons/electric-bolt-off.svg new file mode 100644 index 00000000000..96620541cf2 --- /dev/null +++ b/ui/apps/pmm/src/icons/electric-bolt-off.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/ui/apps/pmm/src/icons/electric-bolt.svg b/ui/apps/pmm/src/icons/electric-bolt.svg new file mode 100644 index 00000000000..979e348270a --- /dev/null +++ b/ui/apps/pmm/src/icons/electric-bolt.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/expand-content.svg b/ui/apps/pmm/src/icons/expand-content.svg new file mode 100644 index 00000000000..05fd873e09f --- /dev/null +++ b/ui/apps/pmm/src/icons/expand-content.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/ui/apps/pmm/src/icons/explore.svg b/ui/apps/pmm/src/icons/explore.svg new file mode 100644 index 00000000000..2cd1368c6f1 --- /dev/null +++ b/ui/apps/pmm/src/icons/explore.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/file-download.svg b/ui/apps/pmm/src/icons/file-download.svg new file mode 100644 index 00000000000..ea4f5596715 --- /dev/null +++ b/ui/apps/pmm/src/icons/file-download.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/ui/apps/pmm/src/icons/graph-6.svg b/ui/apps/pmm/src/icons/graph-6.svg new file mode 100644 index 00000000000..093932bb079 --- /dev/null +++ b/ui/apps/pmm/src/icons/graph-6.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/ui/apps/pmm/src/icons/haproxy.svg b/ui/apps/pmm/src/icons/haproxy.svg new file mode 100644 index 00000000000..585510aab74 --- /dev/null +++ b/ui/apps/pmm/src/icons/haproxy.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/help-fill.svg b/ui/apps/pmm/src/icons/help-fill.svg new file mode 100644 index 00000000000..fc53b939573 --- /dev/null +++ b/ui/apps/pmm/src/icons/help-fill.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/ui/apps/pmm/src/icons/help.svg b/ui/apps/pmm/src/icons/help.svg new file mode 100644 index 00000000000..3cdd5e2066c --- /dev/null +++ b/ui/apps/pmm/src/icons/help.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/high-availability.svg b/ui/apps/pmm/src/icons/high-availability.svg new file mode 100644 index 00000000000..74c9c3348f9 --- /dev/null +++ b/ui/apps/pmm/src/icons/high-availability.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/home.svg b/ui/apps/pmm/src/icons/home.svg new file mode 100644 index 00000000000..37004b95070 --- /dev/null +++ b/ui/apps/pmm/src/icons/home.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/inventory.svg b/ui/apps/pmm/src/icons/inventory.svg new file mode 100644 index 00000000000..7b8ab71a42c --- /dev/null +++ b/ui/apps/pmm/src/icons/inventory.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/knowledge-base.svg b/ui/apps/pmm/src/icons/knowledge-base.svg new file mode 100644 index 00000000000..30b024899f4 --- /dev/null +++ b/ui/apps/pmm/src/icons/knowledge-base.svg @@ -0,0 +1,12 @@ + + + \ No newline at end of file diff --git a/ui/apps/pmm/src/icons/memory.svg b/ui/apps/pmm/src/icons/memory.svg new file mode 100644 index 00000000000..a9ce3ce844d --- /dev/null +++ b/ui/apps/pmm/src/icons/memory.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/ui/apps/pmm/src/icons/my-organization.svg b/ui/apps/pmm/src/icons/my-organization.svg new file mode 100644 index 00000000000..9346136f722 --- /dev/null +++ b/ui/apps/pmm/src/icons/my-organization.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/ui/apps/pmm/src/icons/network.svg b/ui/apps/pmm/src/icons/network.svg new file mode 100644 index 00000000000..0e8f011ea30 --- /dev/null +++ b/ui/apps/pmm/src/icons/network.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/ui/apps/pmm/src/icons/operating-system.svg b/ui/apps/pmm/src/icons/operating-system.svg new file mode 100644 index 00000000000..c30b6fdbc3c --- /dev/null +++ b/ui/apps/pmm/src/icons/operating-system.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/overview.svg b/ui/apps/pmm/src/icons/overview.svg new file mode 100644 index 00000000000..8fff71e8027 --- /dev/null +++ b/ui/apps/pmm/src/icons/overview.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/pause.svg b/ui/apps/pmm/src/icons/pause.svg new file mode 100644 index 00000000000..261b4b51cf6 --- /dev/null +++ b/ui/apps/pmm/src/icons/pause.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/ui/apps/pmm/src/icons/percona-intelligence.svg b/ui/apps/pmm/src/icons/percona-intelligence.svg new file mode 100644 index 00000000000..ddd7858d2ab --- /dev/null +++ b/ui/apps/pmm/src/icons/percona-intelligence.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/percona-mo.svg b/ui/apps/pmm/src/icons/percona-mo.svg new file mode 100644 index 00000000000..a371e8cd9b6 --- /dev/null +++ b/ui/apps/pmm/src/icons/percona-mo.svg @@ -0,0 +1 @@ + \ 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 new file mode 100644 index 00000000000..e5f21d04c7b --- /dev/null +++ b/ui/apps/pmm/src/icons/percona-my.svg @@ -0,0 +1 @@ + \ 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 new file mode 100644 index 00000000000..a9c41f90dc9 --- /dev/null +++ b/ui/apps/pmm/src/icons/percona-po.svg @@ -0,0 +1 @@ + diff --git a/ui/apps/pmm/src/icons/percona-va.svg b/ui/apps/pmm/src/icons/percona-va.svg new file mode 100644 index 00000000000..92db187b593 --- /dev/null +++ b/ui/apps/pmm/src/icons/percona-va.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui/apps/pmm/src/icons/percona.svg b/ui/apps/pmm/src/icons/percona.svg new file mode 100644 index 00000000000..b13e768cdc6 --- /dev/null +++ b/ui/apps/pmm/src/icons/percona.svg @@ -0,0 +1,25 @@ + + + + + + + + + \ 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 new file mode 100644 index 00000000000..0bcbb9c415f --- /dev/null +++ b/ui/apps/pmm/src/icons/play-arrow.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/ui/apps/pmm/src/icons/proxysql.svg b/ui/apps/pmm/src/icons/proxysql.svg new file mode 100644 index 00000000000..b31db2aef36 --- /dev/null +++ b/ui/apps/pmm/src/icons/proxysql.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/qan.svg b/ui/apps/pmm/src/icons/qan.svg new file mode 100644 index 00000000000..d6da16cf5d3 --- /dev/null +++ b/ui/apps/pmm/src/icons/qan.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/real-time-database-off.svg b/ui/apps/pmm/src/icons/real-time-database-off.svg new file mode 100644 index 00000000000..dfbeb3d0bb0 --- /dev/null +++ b/ui/apps/pmm/src/icons/real-time-database-off.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ui/apps/pmm/src/icons/refresh.svg b/ui/apps/pmm/src/icons/refresh.svg new file mode 100644 index 00000000000..818ec0770a3 --- /dev/null +++ b/ui/apps/pmm/src/icons/refresh.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/ui/apps/pmm/src/icons/search.svg b/ui/apps/pmm/src/icons/search.svg new file mode 100644 index 00000000000..d835907d85a --- /dev/null +++ b/ui/apps/pmm/src/icons/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/sign-out.svg b/ui/apps/pmm/src/icons/sign-out.svg new file mode 100644 index 00000000000..597b59d754b --- /dev/null +++ b/ui/apps/pmm/src/icons/sign-out.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/summary.svg b/ui/apps/pmm/src/icons/summary.svg new file mode 100644 index 00000000000..9cdb38a371c --- /dev/null +++ b/ui/apps/pmm/src/icons/summary.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/theme-dark.svg b/ui/apps/pmm/src/icons/theme-dark.svg new file mode 100644 index 00000000000..949c7ce09c3 --- /dev/null +++ b/ui/apps/pmm/src/icons/theme-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/theme-light.svg b/ui/apps/pmm/src/icons/theme-light.svg new file mode 100644 index 00000000000..a040c64597a --- /dev/null +++ b/ui/apps/pmm/src/icons/theme-light.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/icons/users-and-access.svg b/ui/apps/pmm/src/icons/users-and-access.svg new file mode 100644 index 00000000000..f0631933941 --- /dev/null +++ b/ui/apps/pmm/src/icons/users-and-access.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/apps/pmm/src/pages/alerting/status/AlertsPage.tsx b/ui/apps/pmm/src/pages/alerting/status/AlertsPage.tsx index 73f74c8cd0d..55ab535cb23 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/peak-ui'; +import { useDetailsPaneNavigation } from '@percona/percona-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 070309e2113..1110ecbcd3b 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,14 +9,12 @@ 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 { - BottomPanelCloseIcon, - UseDetailsPaneNavigationResult, -} from '@percona/peak-ui'; +import { UseDetailsPaneNavigationResult } from '@percona/percona-ui'; import RawDataTab from './raw-data/RawDataTab'; import { useAlertDetailsPane } from './AlertDetailsPane.utils'; @@ -119,7 +117,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 841975aa672..fe2d22e77c7 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/peak-ui'; +import { Chip, CodeBlock } from '@percona/percona-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 89f128691be..d48c38f6d26 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/peak-ui'; +import { CodeBlock } from '@percona/percona-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 1fb39eeb2e3..696a70aaea7 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/peak-ui'; +import { Chip, MRT_ColumnDef } from '@percona/percona-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 a16f2aa25e1..5d04491338e 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 { BottomPanelOpenIcon, Table, useNavigableRows } from '@percona/peak-ui'; +import { Table, useNavigableRows } from '@percona/percona-ui'; import { type MRT_Row } from 'material-react-table'; import { FC, useMemo, useState } from 'react'; import { ALERT_STATUS_COLUMNS } from './AlertStatusTable.constants'; @@ -30,6 +30,7 @@ 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'; @@ -150,7 +151,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 aa89f0e6823..7c4205000a9 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,14 +7,11 @@ 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, - KnowledgeBaseIcon, -} from '@percona/peak-ui'; +import { semanticTokensLight, semanticTokensDark } from '@percona/percona-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; @@ -28,7 +25,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 5afdd0f769e..9ebdede8c91 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/peak-ui'; +import type { SemanticTokens } from '@percona/percona-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 268dd883325..5637ad7056e 100644 --- a/ui/apps/pmm/src/pages/rta/overview/RealtimeOverview.tsx +++ b/ui/apps/pmm/src/pages/rta/overview/RealtimeOverview.tsx @@ -5,17 +5,13 @@ import { Link as RouterLink, useSearchParams, } from 'react-router-dom'; -import { useDetailsPaneNavigation } from '@percona/peak-ui'; +import { useDetailsPaneNavigation } from '@percona/percona-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 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 { Icon } from 'components/icon'; import { Messages } from './RealtimeOverview.messages'; import { createRealtimeSessionsUrl } from 'utils/link.utils'; import Stack from '@mui/material/Stack'; @@ -149,7 +145,9 @@ const RealtimeOverviewPage: FC = () => { : 'overview-table-resume-button' } size="medium" - startIcon={fetching ? : } + startIcon={ + fetching ? : + } disabled={serviceIds.length === 0} color="inherit" variant="text" @@ -167,7 +165,7 @@ const RealtimeOverviewPage: FC = () => {