From 1a38b24d5978e005ca62f287574e85c6b55bf481 Mon Sep 17 00:00:00 2001 From: Matej Kubinec <32638572+matejkubinec@users.noreply.github.com> Date: Mon, 10 Jul 2023 15:34:26 +0200 Subject: [PATCH 1/2] PMM-11637 Adjust branding based on feedback (#614) * PMM-11637 Adjust branding based on feedback Use PMM logo in place of Percona. Use app icon in navbar and preload page. * PMM-11637 Fix icon templated alert in dark mode --- public/app/core/components/Branding/Branding.tsx | 12 ++---------- .../rule-editor/rule-types/TemplatedAlert.tsx | 2 +- public/img/pmm-app-rounded-icon.svg | 11 +++++++++++ public/views/index-template.html | 2 +- 4 files changed, 15 insertions(+), 12 deletions(-) create mode 100644 public/img/pmm-app-rounded-icon.svg diff --git a/public/app/core/components/Branding/Branding.tsx b/public/app/core/components/Branding/Branding.tsx index 0b5388dc93c1..933c0946c97f 100644 --- a/public/app/core/components/Branding/Branding.tsx +++ b/public/app/core/components/Branding/Branding.tsx @@ -10,7 +10,7 @@ export interface BrandComponentProps { } const LoginLogo: FC = ({ className }) => { - return PMM; + return PMM; }; const LoginBackground: FC = ({ className, children }) => { @@ -43,15 +43,7 @@ const LoginBackground: FC = ({ className, children }) => { }; const MenuLogo: FC = ({ className }) => { - const theme = useTheme2(); - - return ( - PMM - ); + return PMM; }; const LoginBoxBackground = () => { diff --git a/public/app/features/alerting/unified/components/rule-editor/rule-types/TemplatedAlert.tsx b/public/app/features/alerting/unified/components/rule-editor/rule-types/TemplatedAlert.tsx index 6cbbace9c280..7add8f093f78 100644 --- a/public/app/features/alerting/unified/components/rule-editor/rule-types/TemplatedAlert.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/rule-types/TemplatedAlert.tsx @@ -20,7 +20,7 @@ const TemplatedAlertRuleType: FC = ({ selected = false, disabled, o Simpler initial alert setup with more robust alerting options. } - image={theme.isLight ? 'public/img/percona-logo-light.svg' : 'public/img/percona-logo.svg'} + image={theme.isLight ? 'public/img/icons/mono/pmm-logo-light.svg' : 'public/img/icons/mono/pmm-logo.svg'} selected={selected} disabled={disabled} value={RuleFormType.templated} diff --git a/public/img/pmm-app-rounded-icon.svg b/public/img/pmm-app-rounded-icon.svg new file mode 100644 index 000000000000..6e11d9353000 --- /dev/null +++ b/public/img/pmm-app-rounded-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/views/index-template.html b/public/views/index-template.html index e6dae61dbb15..9008b69971d6 100644 --- a/public/views/index-template.html +++ b/public/views/index-template.html @@ -72,7 +72,7 @@ height: 60px; background-repeat: no-repeat; background-size: contain; - background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgwIiBoZWlnaHQ9IjE1NSIgdmlld0JveD0iMCAwIDE4MCAxNTUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNDYuMzI2IDk3LjU0NTZDMTY1LjQyMSA4NS4wNjQxIDE3MS42NjkgNTkuNjA0NSAxNjAuMTEzIDM5LjU5NDRDMTU0LjMyMyAyOS41NTc0IDE0NC45NjQgMjIuMzY5NCAxMzMuNzY3IDE5LjM2NzlDMTIzLjM5MyAxNi41ODI4IDExMi41NTcgMTcuNzIxNyAxMDMuMDIxIDIyLjUzOTdMOTAgMEw2Mi45NzIyIDQ2LjgxMDhMMC41MDA5NzcgMTU1SDE3OS40OTlMMTQ2LjMyNiA5Ny41NDU2Wk0xMzAuNzA1IDMwLjgzNDdDMTM4Ljg0NCAzMy4wMDI0IDE0NS42MTcgMzguMjI4NSAxNDkuODM1IDQ1LjUwNTJDMTU4LjEyNyA1OS44NDkzIDE1My44MTkgNzguMDQyOCAxNDAuMzczIDg3LjIzMThMMTA4Ljk2NyAzMi44NDI4QzExNS43MzMgMjkuNTg5NCAxMjMuMzY0IDI4Ljg3OTggMTMwLjcwNSAzMC44MzQ3Wk05MCAyMy43NTY2TDE1OC45MTQgMTQzLjExOEgxMTguNTkyTDY5LjgzMDIgNTguNjg5MUw4OS45OTY0IDIzLjc2MDJMOTAgMjMuNzU2NlpNMjEuMDg1OCAxNDMuMTE4TDYyLjk2ODYgNzAuNTkyM0wxMDQuODUxIDE0My4xMThIMjEuMDg1OFoiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8xMDkzOF83MTMpIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfMTA5MzhfNzEzIiB4MT0iMjEuOTk4MSIgeTE9IjE0Mi41IiB4Mj0iMTYxLjQ5OCIgeTI9IjY1Ljk5OTkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZDMzUxOSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGMEQxMzYiLz4KPC9saW5lYXJHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K'); + background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwIiBoZWlnaHQ9IjE2MCIgdmlld0JveD0iMCAwIDE2MCAxNjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxNjAiIGhlaWdodD0iMTYwIiByeD0iMjQiIGZpbGw9InVybCgjcGFpbnQwX3JhZGlhbF8xMDg3M183Mzc1MCkiLz4KPHBhdGggb3BhY2l0eT0iMC4zMyIgZD0iTTI4IDgxLjc0NzNMNTQuOTY4OCAxMjUuNDg2TDU0Ljk3MzkgMTI1LjQ4MUw2NC40NjY2IDEwOC44NThMODIuMzAyMyAxNDBMMTAzLjI5NCAxMDMuMzQ4TDExMC40ODcgMTE1Ljk0N0wxMzIgODEuNzQ3NkwxMjYuNDMzIDgxLjc0NzNMMTEwLjQ5MiAxMDcuMzI2TDEwNS43NTYgOTkuMDU4TDExNS40ODIgODEuNzQ3M0gxMTAuMDIyTDEwMy4wOTQgOTQuNDA2Mkw5NS44NTkyIDgxLjc0NzNIOTAuODM5NkwxMDAuNjQ0IDk4LjY5MDNMODIuMzA3NCAxMzAuNzExTDY3LjEyNiAxMDQuMjA2TDc5Ljk1MDYgODEuNzQ3M0g3NS4wMjg3TDY0Ljc0NTIgMTAwLjA0OUw1NC4xMzA4IDgxLjc0NzNINDguNzQ3Mkw2Mi4wODU5IDEwNC42OTFMNTQuOTczOSAxMTcuMTA2TDMyLjQ0OTMgODEuNzQ3M0gyOFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xMjEuODE0IDYzLjkwODlDMTIzLjc0NCA2Mi4yMDMyIDEyNS4xNDcgNTkuOTQwOSAxMjUuODIgNTcuNDA3OUMxMjYuNzMyIDUzLjk5MTQgMTI2LjI2NiA1MC40MjE3IDEyNC41MTQgNDcuMzU3NUMxMjIuNzYxIDQ0LjI5MzQgMTE5LjkyOSA0Mi4xMDI2IDExNi41NDEgNDEuMTg4NEMxMTUuNDIxIDQwLjg4NzEgMTE0LjI3NyA0MC43MzM5IDExMy4xMjcgNDAuNzMzOUMxMTEuNzI0IDQwLjczMzkgMTEwLjMxNiA0MC45NzM5IDEwOC45NzMgNDEuNDI4NUwxMDUuMDI3IDM0LjUxODlMOTUuNTM1MiA1MS4xNDE3TDc3LjcwMDQgMjBMNTYuNzA5OSA1Ni42NTIxTDQ5LjUxNzIgNDQuMDUzNEwyOCA4MS43NDczSDEzMkwxMjEuODE0IDYzLjkwODlaTTExMy4xMjcgNDQuOTE2NUMxMTMuOTEyIDQ0LjkxNjUgMTE0LjcwMiA0NS4wMjM3IDExNS40NzIgNDUuMjI4QzExNy43ODIgNDUuODQ1OSAxMTkuNzE3IDQ3LjM0MjIgMTIwLjkyMiA0OS40NDEyQzEyMi4xMjMgNTEuNTM1IDEyMi40NDIgNTMuOTc2MSAxMjEuODE5IDU2LjMxNUMxMjEuNDI0IDU3Ljc5MDkgMTIwLjY5NCA1OS4wOTgzIDExOS42ODYgNjAuMTc1OEwxMTEuMTExIDQ1LjE1NjVDMTExLjc3NCA0NC45OTgyIDExMi40NTggNDQuOTE2NSAxMTMuMTMyIDQ0LjkxNjVIMTEzLjEyN1pNMzUuNDAwMyA3Ny40MzcxTDQ5LjUxMjIgNTIuNjczOEw1NC4yNDgyIDYwLjk0MThMNDQuODcyNCA3Ny40MzcxSDM1LjQwMDNaTTU2LjkwNzUgNjUuNTg5MUw2My41MDI0IDc3LjQzNzFINTAuMzEyNUw1Ni45MDc1IDY1LjU4OTFaTTY4LjM3NTIgNzcuNDM3MUw1OS4zNTkgNjEuMzA5NUw3Ny42OTUzIDI5LjI4OTRMOTIuODc1OSA1NS43OTQxTDgwLjcwNDEgNzcuNDM3MUg2OC4zNzUyWk05NS4yNTY2IDU5Ljk1MTFMMTA1LjA3OCA3Ny40MzcxSDg1LjQzNUw5NS4yNTY2IDU5Ljk1MTFaTTExMC41ODkgNzcuNDM3MUw5Ny45MTU4IDU1LjMwOUwxMDUuMDI3IDQyLjg5NDFMMTI0LjgwNyA3Ny40MzcxSDExMC41ODlaIiBmaWxsPSJ3aGl0ZSIvPgo8ZGVmcz4KPHJhZGlhbEdyYWRpZW50IGlkPSJwYWludDBfcmFkaWFsXzEwODczXzczNzUwIiBjeD0iMCIgY3k9IjAiIHI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDIuNzMxOTcgMTU0LjE3Nykgc2NhbGUoMjEwLjY5MSkiPgo8c3RvcCBvZmZzZXQ9IjAuMjIiIHN0b3AtY29sb3I9IiNBQzMxMDAiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRTg3MzE4Ii8+CjwvcmFkaWFsR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg=='); } .preloader__text { From 3507d74c29ef338a117de44a5fd3e162006de1ce Mon Sep 17 00:00:00 2001 From: Dora <103416234+doracretu3pillar@users.noreply.github.com> Date: Thu, 13 Jul 2023 17:03:08 +0300 Subject: [PATCH 2/2] PMM-12257 Column 'database' added to Advisors tables (#675) * Column 'database' added to Advisors tables * Updated the column to take family parameter from API * Fixed type for CheckDetails * Fixed tests * Remove typechecking * Advisors check do not have family property * Map family to a more user friendly db name --------- Co-authored-by: Artem Gavrilov --- public/app/percona/check/__mocks__/stubs.ts | 5 +++++ .../check/components/AllChecksTab/AllChecksTab.messages.ts | 1 + .../percona/check/components/AllChecksTab/AllChecksTab.tsx | 6 ++++++ .../ChangeCheckIntervalModal.test.tsx | 1 + public/app/percona/check/types.ts | 1 + .../app/percona/shared/services/advisors/Advisors.types.ts | 7 +++++++ .../app/percona/shared/services/advisors/Advisors.utils.ts | 3 ++- 7 files changed, 23 insertions(+), 1 deletion(-) diff --git a/public/app/percona/check/__mocks__/stubs.ts b/public/app/percona/check/__mocks__/stubs.ts index f1c11bf70fc1..69cf46c93524 100644 --- a/public/app/percona/check/__mocks__/stubs.ts +++ b/public/app/percona/check/__mocks__/stubs.ts @@ -171,6 +171,7 @@ export const allChecksStub: CheckDetails[] = [ interval: 'STANDARD', readMoreUrl: 'https://example.com', category: '', + family: 'ADVISOR_CHECK_FAMILY_MONGODB', }, { name: 'test2', @@ -178,6 +179,7 @@ export const allChecksStub: CheckDetails[] = [ description: 'Test number 2', interval: 'RARE', category: '', + family: 'ADVISOR_CHECK_FAMILY_MONGODB', }, { name: 'test3', @@ -187,12 +189,14 @@ export const allChecksStub: CheckDetails[] = [ disabled: true, readMoreUrl: 'https://example.com', category: '', + family: 'ADVISOR_CHECK_FAMILY_MONGODB', }, { name: 'test4', summary: 'Test 4', interval: 'FREQUENT', category: '', + family: 'ADVISOR_CHECK_FAMILY_MONGODB', }, { name: 'test5', @@ -200,5 +204,6 @@ export const allChecksStub: CheckDetails[] = [ disabled: true, interval: 'STANDARD', category: '', + family: 'ADVISOR_CHECK_FAMILY_MONGODB', }, ]; diff --git a/public/app/percona/check/components/AllChecksTab/AllChecksTab.messages.ts b/public/app/percona/check/components/AllChecksTab/AllChecksTab.messages.ts index 37b6b9e91659..9b0d7c0890bc 100644 --- a/public/app/percona/check/components/AllChecksTab/AllChecksTab.messages.ts +++ b/public/app/percona/check/components/AllChecksTab/AllChecksTab.messages.ts @@ -11,6 +11,7 @@ export const Messages = { description: 'Description', category: 'Category', status: 'Status', + family: 'Technology', interval: 'Interval', actions: 'Actions', }, diff --git a/public/app/percona/check/components/AllChecksTab/AllChecksTab.tsx b/public/app/percona/check/components/AllChecksTab/AllChecksTab.tsx index 09fe59d0a5f8..21b4c4ebc7aa 100644 --- a/public/app/percona/check/components/AllChecksTab/AllChecksTab.tsx +++ b/public/app/percona/check/components/AllChecksTab/AllChecksTab.tsx @@ -129,6 +129,12 @@ export const AllChecksTab: FC> }, ], }, + { + Header: Messages.table.columns.family, + accessor: 'family', + type: FilterFieldTypes.TEXT, + noHiddenOverflow: true, + }, { Header: Messages.table.columns.interval, accessor: 'interval', diff --git a/public/app/percona/check/components/AllChecksTab/ChangeCheckIntervalModal/ChangeCheckIntervalModal.test.tsx b/public/app/percona/check/components/AllChecksTab/ChangeCheckIntervalModal/ChangeCheckIntervalModal.test.tsx index 47a7c258625e..3b0f848fc83b 100644 --- a/public/app/percona/check/components/AllChecksTab/ChangeCheckIntervalModal/ChangeCheckIntervalModal.test.tsx +++ b/public/app/percona/check/components/AllChecksTab/ChangeCheckIntervalModal/ChangeCheckIntervalModal.test.tsx @@ -21,6 +21,7 @@ const TEST_CHECK: CheckDetails = { description: 'test description', disabled: false, category: '', + family: 'ADVISOR_CHECK_FAMILY_MONGODB', }; describe('ChangeCheckIntervalModal', () => { diff --git a/public/app/percona/check/types.ts b/public/app/percona/check/types.ts index 6ddc5c349294..0b60d1ccd858 100644 --- a/public/app/percona/check/types.ts +++ b/public/app/percona/check/types.ts @@ -87,6 +87,7 @@ export interface CheckDetails { summary: string; interval: keyof typeof Interval; category: string; + family: string; description?: string; disabled?: boolean; readMoreUrl?: string; diff --git a/public/app/percona/shared/services/advisors/Advisors.types.ts b/public/app/percona/shared/services/advisors/Advisors.types.ts index 6faa35077b33..a68a4361155f 100644 --- a/public/app/percona/shared/services/advisors/Advisors.types.ts +++ b/public/app/percona/shared/services/advisors/Advisors.types.ts @@ -4,6 +4,12 @@ export enum Interval { FREQUENT = 'Frequent', } +export const Family: { [key: string]: string } = { + ADVISOR_CHECK_FAMILY_MYSQL: 'MySQL', + ADVISOR_CHECK_FAMILY_POSTGRESQL: 'PostgreSQL', + ADVISOR_CHECK_FAMILY_MONGODB: 'MongoDB', +}; + export interface Advisor { // Machine-readable name (ID) that is used in expression. name: string; @@ -25,6 +31,7 @@ export interface AdvisorCheck { description: string; summary: string; interval: keyof typeof Interval; + family?: string; } export interface CategorizedAdvisor { diff --git a/public/app/percona/shared/services/advisors/Advisors.utils.ts b/public/app/percona/shared/services/advisors/Advisors.utils.ts index 56a4b3c9e381..bc34581e1c0f 100644 --- a/public/app/percona/shared/services/advisors/Advisors.utils.ts +++ b/public/app/percona/shared/services/advisors/Advisors.utils.ts @@ -1,4 +1,4 @@ -import { Advisor, CategorizedAdvisor } from './Advisors.types'; +import { Advisor, CategorizedAdvisor, Family } from './Advisors.types'; export const groupAdvisorsIntoCategories = (advisors: Advisor[]): CategorizedAdvisor => { const result: CategorizedAdvisor = {}; @@ -8,6 +8,7 @@ export const groupAdvisorsIntoCategories = (advisors: Advisor[]): CategorizedAdv const modifiedChecks = checks.map((check) => ({ ...check, + family: check.family ? Family[check.family] : undefined, disabled: check.disabled ? true : false, }));