Merge branch 'main' into PMM-10369-implement-websockets-for-checks

percona · Aug 15, 2022 · f2a6ae4 · f2a6ae4
2 parents 094e7b7 + 5ff800b
commit f2a6ae4
Show file tree

Hide file tree

Showing 23 changed files with 105 additions and 50 deletions.
diff --git a/...eInstance/FormParts/ExternalServiceConnectionDetails/ExternalServiceConnectionDetails.tsx b/...eInstance/FormParts/ExternalServiceConnectionDetails/ExternalServiceConnectionDetails.tsx
@@ -45,17 +45,17 @@ export const ExternalServiceConnectionDetails: FC<FormPartProps> = ({ form }) =>
       <h4 className={styles.sectionHeader}>{Messages.form.titles.connectionDetails}</h4>
       <div className={styles.labelWrapper} data-testid="username-label">
         <span>{Messages.form.labels.externalService.serviceName}</span>
-        <LinkTooltip tooltipText={Messages.form.tooltips.externalService.serviceName} icon="info-circle" />
+        <LinkTooltip tooltipContent={Messages.form.tooltips.externalService.serviceName} icon="info-circle" />
       </div>
       <TextInputField name="serviceName" placeholder={Messages.form.placeholders.externalService.serviceName} />
       <div className={styles.labelWrapper} data-testid="username-label">
         <span>{Messages.form.labels.externalService.group}</span>
-        <LinkTooltip tooltipText={Messages.form.tooltips.externalService.group} icon="info-circle" />
+        <LinkTooltip tooltipContent={Messages.form.tooltips.externalService.group} icon="info-circle" />
       </div>
       <TextInputField name="group" />
       <div className={styles.labelWrapper} data-testid="address-label">
         <span>{Messages.form.labels.externalService.connectionParameters}</span>
-        <LinkTooltip tooltipText={Messages.form.tooltips.externalService.url} icon="info-circle" />
+        <LinkTooltip tooltipContent={Messages.form.tooltips.externalService.url} icon="info-circle" />
       </div>
       <RadioButtonGroupField
         name="metricsParameters"
@@ -66,7 +66,7 @@ export const ExternalServiceConnectionDetails: FC<FormPartProps> = ({ form }) =>
         <>
           <div className={styles.labelWrapper} data-testid="address-label">
             <span>{Messages.form.labels.externalService.url}</span>
-            <LinkTooltip tooltipText={Messages.form.tooltips.externalService.url} icon="info-circle" />
+            <LinkTooltip tooltipContent={Messages.form.tooltips.externalService.url} icon="info-circle" />
           </div>
           <div className={styles.urlFieldWrapper}>
             <TextInputField
@@ -81,12 +81,12 @@ export const ExternalServiceConnectionDetails: FC<FormPartProps> = ({ form }) =>
         <>
           <div className={styles.labelWrapper} data-testid="address-label">
             <span>{Messages.form.labels.externalService.schema}</span>
-            <LinkTooltip tooltipText={Messages.form.tooltips.externalService.schema} icon="info-circle" />
+            <LinkTooltip tooltipContent={Messages.form.tooltips.externalService.schema} icon="info-circle" />
           </div>
           <RadioButtonGroupField name="schema" data-testid="http-schema-field" options={schemaOptions} />
           <div className={styles.labelWrapper} data-testid="address-label">
             <span>{Messages.form.labels.externalService.address}</span>
-            <LinkTooltip tooltipText={Messages.form.tooltips.externalService.address} icon="info-circle" />
+            <LinkTooltip tooltipContent={Messages.form.tooltips.externalService.address} icon="info-circle" />
           </div>
           <TextInputField
             name="address"
@@ -95,17 +95,17 @@ export const ExternalServiceConnectionDetails: FC<FormPartProps> = ({ form }) =>
           />
           <div className={styles.labelWrapper} data-testid="service-name-label">
             <span>{Messages.form.labels.externalService.metricsPath}</span>
-            <LinkTooltip tooltipText={Messages.form.tooltips.externalService.metricsPath} icon="info-circle" />
+            <LinkTooltip tooltipContent={Messages.form.tooltips.externalService.metricsPath} icon="info-circle" />
           </div>
           <TextInputField name="metrics_path" placeholder={Messages.form.placeholders.externalService.metricsPath} />
           <div className={styles.labelWrapper} data-testid="port-label">
             <span>{Messages.form.labels.externalService.port}</span>
-            <LinkTooltip tooltipText={Messages.form.tooltips.externalService.port} icon="info-circle" />
+            <LinkTooltip tooltipContent={Messages.form.tooltips.externalService.port} icon="info-circle" />
           </div>
           <TextInputField name="port" placeholder="Port" validators={portValidators} />
           <div className={styles.labelWrapper} data-testid="username-label">
             <span>{Messages.form.labels.externalService.username}</span>
-            <LinkTooltip tooltipText={Messages.form.tooltips.externalService.username} icon="info-circle" />
+            <LinkTooltip tooltipContent={Messages.form.tooltips.externalService.username} icon="info-circle" />
           </div>
           <TextInputField
             name="username"
@@ -114,7 +114,7 @@ export const ExternalServiceConnectionDetails: FC<FormPartProps> = ({ form }) =>
           />
           <div className={styles.labelWrapper} data-testid="password-label">
             <span>{Messages.form.labels.externalService.password}</span>
-            <LinkTooltip tooltipText={Messages.form.tooltips.externalService.password} icon="info-circle" />
+            <LinkTooltip tooltipContent={Messages.form.tooltips.externalService.password} icon="info-circle" />
           </div>
           <PasswordInputField
             name="password"

diff --git a/...ponents/AddRemoteInstance/FormParts/HAProxyConnectionDetails/HAProxyConnectionDetails.tsx b/...ponents/AddRemoteInstance/FormParts/HAProxyConnectionDetails/HAProxyConnectionDetails.tsx
@@ -18,7 +18,7 @@ export const HAProxyConnectionDetails: FC<MainDetailsFormPartProps> = ({ remoteI
       <h4 className={styles.sectionHeader}>{Messages.form.titles.mainDetails}</h4>
       <div className={styles.labelWrapper} data-testid="address-label">
         <span>{Messages.form.labels.mainDetails.address}</span>
-        <LinkTooltip tooltipText={Messages.form.tooltips.mainDetails.address} icon="info-circle" />
+        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.address} icon="info-circle" />
       </div>
       <TextInputField
         name="address"
@@ -27,12 +27,12 @@ export const HAProxyConnectionDetails: FC<MainDetailsFormPartProps> = ({ remoteI
       />
       <div className={styles.labelWrapper} data-testid="service-name-label">
         <span>{Messages.form.labels.mainDetails.serviceName}</span>
-        <LinkTooltip tooltipText={Messages.form.tooltips.mainDetails.serviceName} icon="info-circle" />
+        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.serviceName} icon="info-circle" />
       </div>
       <TextInputField name="serviceName" placeholder={Messages.form.placeholders.mainDetails.serviceName} />
       <div className={styles.labelWrapper} data-testid="port-label">
         <span>{Messages.form.labels.mainDetails.port}</span>
-        <LinkTooltip tooltipText={Messages.form.tooltips.haproxy.port} icon="info-circle" />
+        <LinkTooltip tooltipContent={Messages.form.tooltips.haproxy.port} icon="info-circle" />
       </div>
       <TextInputField
         name="port"
@@ -41,12 +41,12 @@ export const HAProxyConnectionDetails: FC<MainDetailsFormPartProps> = ({ remoteI
       />
       <div className={styles.labelWrapper} data-testid="username-label">
         <span>{Messages.form.labels.mainDetails.username}</span>
-        <LinkTooltip tooltipText={Messages.form.tooltips.haproxy.username} icon="info-circle" />
+        <LinkTooltip tooltipContent={Messages.form.tooltips.haproxy.username} icon="info-circle" />
       </div>
       <TextInputField name="username" placeholder={Messages.form.placeholders.mainDetails.username} format={trim} />
       <div className={styles.labelWrapper} data-testid="password-label">
         <span>{Messages.form.labels.mainDetails.password}</span>
-        <LinkTooltip tooltipText={Messages.form.tooltips.haproxy.password} icon="info-circle" />
+        <LinkTooltip tooltipContent={Messages.form.tooltips.haproxy.password} icon="info-circle" />
       </div>
       <PasswordInputField name="password" placeholder={Messages.form.placeholders.mainDetails.password} format={trim} />
     </div>

diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/Labels/Labels.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/Labels/Labels.tsx
@@ -20,12 +20,12 @@ export const LabelsFormPart: FC = () => {
       />
       <div className={styles.labelWrapper} data-testid="username-label">
         <span>{Messages.form.labels.labels.region}</span>
-        <LinkTooltip tooltipText={Messages.form.tooltips.labels.region} icon="info-circle" />
+        <LinkTooltip tooltipContent={Messages.form.tooltips.labels.region} icon="info-circle" />
       </div>
       <TextInputField name="region" placeholder={Messages.form.placeholders.labels.region} />
       <div className={styles.labelWrapper} data-testid="username-label">
         <span>{Messages.form.labels.labels.az}</span>
-        <LinkTooltip tooltipText={Messages.form.tooltips.labels.az} icon="info-circle" />
+        <LinkTooltip tooltipContent={Messages.form.tooltips.labels.az} icon="info-circle" />
       </div>
       <TextInputField name="az" placeholder={Messages.form.placeholders.labels.az} />
       <TextInputField

diff --git a/...p/percona/add-instance/components/AddRemoteInstance/FormParts/MainDetails/MainDetails.tsx b/...p/percona/add-instance/components/AddRemoteInstance/FormParts/MainDetails/MainDetails.tsx
@@ -20,7 +20,7 @@ export const MainDetailsFormPart: FC<MainDetailsFormPartProps> = ({ form, remote
       <h4 className={styles.sectionHeader}>{Messages.form.titles.mainDetails}</h4>
       <div className={styles.labelWrapper} data-testid="address-label">
         <span>{Messages.form.labels.mainDetails.address}</span>
-        <LinkTooltip tooltipText={Messages.form.tooltips.mainDetails.address} icon="info-circle" />
+        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.address} icon="info-circle" />
       </div>
       <TextInputField
         name="address"
@@ -30,12 +30,12 @@ export const MainDetailsFormPart: FC<MainDetailsFormPartProps> = ({ form, remote
       />
       <div className={styles.labelWrapper} data-testid="service-name-label">
         <span>{Messages.form.labels.mainDetails.serviceName}</span>
-        <LinkTooltip tooltipText={Messages.form.tooltips.mainDetails.serviceName} icon="info-circle" />
+        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.serviceName} icon="info-circle" />
       </div>
       <TextInputField name="serviceName" placeholder={Messages.form.placeholders.mainDetails.serviceName} />
       <div className={styles.labelWrapper} data-testid="port-label">
         <span>{Messages.form.labels.mainDetails.port}</span>
-        <LinkTooltip tooltipText={Messages.form.tooltips.mainDetails.port} icon="info-circle" />
+        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.port} icon="info-circle" />
       </div>
       <TextInputField
         name="port"
@@ -44,7 +44,7 @@ export const MainDetailsFormPart: FC<MainDetailsFormPartProps> = ({ form, remote
       />
       <div className={styles.labelWrapper} data-testid="username-label">
         <span>{Messages.form.labels.mainDetails.username}</span>
-        <LinkTooltip tooltipText={Messages.form.tooltips.mainDetails.username} icon="info-circle" />
+        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.username} icon="info-circle" />
       </div>
       <TextInputField
         key={`username-${tlsFlag}`}
@@ -54,7 +54,7 @@ export const MainDetailsFormPart: FC<MainDetailsFormPartProps> = ({ form, remote
       />
       <div className={styles.labelWrapper} data-testid="password-label">
         <span>{Messages.form.labels.mainDetails.password}</span>
-        <LinkTooltip tooltipText={Messages.form.tooltips.mainDetails.password} icon="info-circle" />
+        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.password} icon="info-circle" />
       </div>
       <PasswordInputField
         key={`password-${tlsFlag}`}

diff --git a/...s/AddRemoteInstance/FormParts/PostgreSQLConnectionDetails/PostgreSQLConnectionDetails.tsx b/...s/AddRemoteInstance/FormParts/PostgreSQLConnectionDetails/PostgreSQLConnectionDetails.tsx
@@ -21,7 +21,7 @@ export const PostgreSQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form
       <h4 className={styles.sectionHeader}>{Messages.form.titles.mainDetails}</h4>
       <div className={styles.labelWrapper} data-testid="address-label">
         <span>{Messages.form.labels.mainDetails.address}</span>
-        <LinkTooltip tooltipText={Messages.form.tooltips.mainDetails.address} icon="info-circle" />
+        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.address} icon="info-circle" />
       </div>
       <TextInputField
         name="address"
@@ -31,12 +31,12 @@ export const PostgreSQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form
       />
       <div className={styles.labelWrapper} data-testid="service-name-label">
         <span>{Messages.form.labels.mainDetails.serviceName}</span>
-        <LinkTooltip tooltipText={Messages.form.tooltips.mainDetails.serviceName} icon="info-circle" />
+        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.serviceName} icon="info-circle" />
       </div>
       <TextInputField name="serviceName" placeholder={Messages.form.placeholders.mainDetails.serviceName} />
       <div className={styles.labelWrapper} data-testid="port-label">
         <span>{Messages.form.labels.mainDetails.port}</span>
-        <LinkTooltip tooltipText={Messages.form.tooltips.mainDetails.port} icon="info-circle" />
+        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.port} icon="info-circle" />
       </div>
       <TextInputField
         name="port"
@@ -45,7 +45,7 @@ export const PostgreSQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form
       />
       <div className={styles.labelWrapper} data-testid="username-label">
         <span>{Messages.form.labels.mainDetails.username}</span>
-        <LinkTooltip tooltipText={Messages.form.tooltips.mainDetails.username} icon="info-circle" />
+        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.username} icon="info-circle" />
       </div>
       <TextInputField
         key={`username-${tlsFlag}`}
@@ -55,7 +55,7 @@ export const PostgreSQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form
       />
       <div className={styles.labelWrapper} data-testid="password-label">
         <span>{Messages.form.labels.mainDetails.password}</span>
-        <LinkTooltip tooltipText={Messages.form.tooltips.mainDetails.password} icon="info-circle" />
+        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.password} icon="info-circle" />
       </div>
       <PasswordInputField
         key={`password-${tlsFlag}`}
@@ -65,7 +65,7 @@ export const PostgreSQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form
       />
       <div className={styles.labelWrapper} data-testid="database-label">
         <span>{Messages.form.labels.postgresqlDetails.database}</span>
-        <LinkTooltip tooltipText={Messages.form.tooltips.postgresqlDetails.database} icon="info-circle" />
+        <LinkTooltip tooltipContent={Messages.form.tooltips.postgresqlDetails.database} icon="info-circle" />
       </div>
       <TextInputField
         key="database"

diff --git a/...percona/integrated-alerting/components/AlertRules/AddAlertRuleModal/AddAlertRuleModal.tsx b/...percona/integrated-alerting/components/AlertRules/AddAlertRuleModal/AddAlertRuleModal.tsx
@@ -221,7 +221,7 @@ export const AddAlertRuleModal: FC<AddAlertRuleModalProps> = ({ isVisible, setVi
             </Field>
             <div className={styles.filtersLabelWrapper}>
               <Label label={Messages.filter.header} dataTestId="filters-field-label" />
-              <LinkTooltip tooltipText={Messages.tooltips.filters} icon="info-circle" />
+              <LinkTooltip tooltipContent={Messages.tooltips.filters} icon="info-circle" />
             </div>
 
             <Button

diff --git a/public/app/percona/settings/Settings.messages.ts b/public/app/percona/settings/Settings.messages.ts
@@ -12,6 +12,7 @@ export const Messages = {
     telemetryTooltip: 'Option to send usage data back to Percona to let us make our product better.',
     telemetryDisclaimer:
       'Disabling Telemetry while Advisor Checks/Alerting is on will prevent PMM from downloading checks and alert templates.',
+    telemetrySummaryTitle: 'We gather and send the following information to Percona:',
     updatesLabel: 'Check for updates',
     updatesLink: `${HOW_TO_DOC_URL}#check-for-updates`,
     updatesTooltip: 'Option to check new versions and ability to update PMM from UI.',

diff --git a/public/app/percona/settings/Settings.service.ts b/public/app/percona/settings/Settings.service.ts
@@ -33,6 +33,7 @@ const toModel = (response: SettingsPayload): Settings => ({
   awsPartitions: response.aws_partitions,
   updatesDisabled: response.updates_disabled,
   telemetryEnabled: response.telemetry_enabled,
+  telemetrySummaries: response.telemetry_summaries,
   metricsResolutions: response.metrics_resolutions,
   dataRetention: response.data_retention,
   sshKey: response.ssh_key,

diff --git a/public/app/percona/settings/Settings.types.ts b/public/app/percona/settings/Settings.types.ts
@@ -111,6 +111,7 @@ export interface SettingsPayload
   azurediscover_enabled: boolean;
   stt_check_intervals: SttCheckIntervalsPayload;
   connected_to_platform: boolean;
+  telemetry_summaries: string[];
 }
 
 export type SettingsAPIChangePayload =
@@ -140,6 +141,7 @@ export interface Settings {
   alertingSettings: AlertingSettings;
   sttCheckIntervals: SttCheckIntervalsSettings;
   isConnectedToPortal?: boolean;
+  telemetrySummaries: string[];
 }
 
 export interface MetricsResolutions {

diff --git a/public/app/percona/settings/__mocks__/Settings.service.ts b/public/app/percona/settings/__mocks__/Settings.service.ts
@@ -12,6 +12,7 @@ export const stub: Settings = {
     hr: '15s',
     mr: '20s',
   },
+  telemetrySummaries: [],
   dataRetention: '',
   sshKey: 'key',
   awsPartitions: [],

diff --git a/public/app/percona/settings/components/Advanced/Advanced.styles.ts b/public/app/percona/settings/components/Advanced/Advanced.styles.ts
@@ -112,5 +112,12 @@ export const getStyles = ({ v1: { breakpoints, spacing, typography, border, colo
       margin: ${spacing.sm};
       fill: ${colors.linkExternal};
     `,
+    telemetryTooltip: css`
+      overflow: auto;
+      max-height: 80vh;
+    `,
+    telemetryListTooltip: css`
+      padding-left: ${spacing.sm};
+    `,
   };
 };
diff --git a/public/app/percona/settings/components/Advanced/Advanced.test.tsx b/public/app/percona/settings/components/Advanced/Advanced.test.tsx
@@ -19,6 +19,7 @@ describe('Advanced::', () => {
                 sttCheckIntervals: { rareInterval: '280800s', standardInterval: '86400s', frequentInterval: '14400s' },
                 dataRetention: '2592000s',
                 telemetryEnabled: true,
+                telemetrySummaries: ['summary1', 'summary2'],
                 updatesDisabled: true,
                 backupEnabled: false,
                 sttEnabled: true,
@@ -52,6 +53,7 @@ describe('Advanced::', () => {
                 sttCheckIntervals: { rareInterval: '280800s', standardInterval: '86400s', frequentInterval: '14400s' },
                 dataRetention: '2592000s',
                 telemetryEnabled: true,
+                telemetrySummaries: ['summary1', 'summary2'],
                 updatesDisabled: true,
                 backupEnabled: false,
                 sttEnabled: true,
@@ -96,6 +98,7 @@ describe('Advanced::', () => {
                 sttCheckIntervals: { rareInterval: '280800s', standardInterval: '86400s', frequentInterval: '14400s' },
                 dataRetention: '2592000s',
                 telemetryEnabled: true,
+                telemetrySummaries: ['summary1', 'summary2'],
                 updatesDisabled: true,
                 backupEnabled: false,
                 sttEnabled: true,
@@ -130,6 +133,7 @@ describe('Advanced::', () => {
                 sttCheckIntervals: { rareInterval: '280800s', standardInterval: '86400s', frequentInterval: '14400s' },
                 dataRetention: '2592000s',
                 telemetryEnabled: true,
+                telemetrySummaries: ['summary1', 'summary2'],
                 updatesDisabled: true,
                 backupEnabled: false,
                 sttEnabled: false,
@@ -167,6 +171,7 @@ describe('Advanced::', () => {
                 sttCheckIntervals: { rareInterval: '280800s', standardInterval: '86400s', frequentInterval: '14400s' },
                 dataRetention: '2592000s',
                 telemetryEnabled: true,
+                telemetrySummaries: ['summary1', 'summary2'],
                 updatesDisabled: true,
                 backupEnabled: false,
                 sttEnabled: true,