Update gap fills table tooltips (#218926)

# Summary
Updated the tooltips for the headings of the table that shows gaps for a
rule as well as a missing tooltip in the rule monitoring tab. For the
detailed list of tooltips refer to the original issue #218345.


# How to test
Make sure you enable the following feature flag in your
`kibana.dev.yaml`:

`xpack.securitySolution.enableExperimental: [
'storeGapsInEventLogEnabled' ]`

Create a rule that runs very often (it could be 1s interval and no look
back). Then disable the rule to generate gaps.
Wait for a bit and enable the rule again. 
You should see the gaps table when visiting the rule details page under
the `execution results` tab.

x-pack/solutions/security/plugins/security_solution/public/detection_engine/common/translations.ts

@@ -1533,3 +1533,10 @@ export const COLUMN_TOTAL_UNFILLED_GAPS_DURATION = i18n.translate(
     defaultMessage: 'Unfilled gaps duration',
   }
 );
+
+export const COLUMN_TOTAL_UNFILLED_GAPS_DURATION_TOOLTIP = i18n.translate(
+  'xpack.securitySolution.detectionEngine.rules.columnTotalUnfilledGapsDurationTooltip',
+  {
+    defaultMessage: 'Sum of remaining unfilled or partially filled gaps',
+  }
+);

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_gaps/components/rule_gaps/index.tsx

@@ -56,14 +56,24 @@ const getGapsTableColumns = (hasCRUDPermissions: boolean, ruleId: string, enable
     {
       field: 'status',
       sortable: true,
-      name: <TableHeaderTooltipCell title={i18n.GAPS_TABLE_STATUS_LABEL} tooltipContent="" />,
+      name: (
+        <TableHeaderTooltipCell
+          title={i18n.GAPS_TABLE_STATUS_LABEL}
+          tooltipContent={i18n.GAPS_TABLE_STATUS_LABEL_TOOLTIP}
+        />
+      ),
       render: (value: GapStatus) => getStatusLabel(value),
       width: '10%',
     },
     {
       field: '@timestamp',
       sortable: true,
-      name: <TableHeaderTooltipCell title={i18n.GAPS_TABLE_EVENT_TIME_LABEL} tooltipContent="" />,
+      name: (
+        <TableHeaderTooltipCell
+          title={i18n.GAPS_TABLE_EVENT_TIME_LABEL}
+          tooltipContent={i18n.GAPS_TABLE_EVENT_TIME_LABEL_TOOLTIP}
+        />
+      ),
       render: (value: Gap['@timestamp']) => (
         <FormattedDate value={value} fieldName={'@timestamp'} />
       ),
@@ -72,7 +82,10 @@ const getGapsTableColumns = (hasCRUDPermissions: boolean, ruleId: string, enable
     {
       field: 'in_progress_intervals',
       name: (
-        <TableHeaderTooltipCell title={i18n.GAPS_TABLE_MANUAL_FILL_TASKS_LABEL} tooltipContent="" />
+        <TableHeaderTooltipCell
+          title={i18n.GAPS_TABLE_MANUAL_FILL_TASKS_LABEL}
+          tooltipContent={i18n.GAPS_TABLE_MANUAL_FILL_TASKS_LABEL_TOOLTIP}
+        />
       ),
       render: (value: Gap['in_progress_intervals']) => {
         if (!value || !value.length) return null;
@@ -86,7 +99,7 @@ const getGapsTableColumns = (hasCRUDPermissions: boolean, ruleId: string, enable
       name: (
         <TableHeaderTooltipCell
           title={i18n.GAPS_TABLE_EVENT_TIME_COVERED_LABEL}
-          tooltipContent=""
+          tooltipContent={i18n.GAPS_TABLE_EVENT_TIME_COVERED_LABEL_TOOLTIP}
         />
       ),
       render: (item: Gap) => {
@@ -106,7 +119,7 @@ const getGapsTableColumns = (hasCRUDPermissions: boolean, ruleId: string, enable
                 </p>
               </EuiText>
             </EuiFlexItem>
-            <EuiFlexItem style={{ maxWidth: '40px' }}>
+            <EuiFlexItem css={{ maxWidth: '40px' }}>
               <EuiProgress value={value} max={100} size="xs" />
             </EuiFlexItem>
           </EuiFlexGroup>
@@ -115,7 +128,12 @@ const getGapsTableColumns = (hasCRUDPermissions: boolean, ruleId: string, enable
     },
     {
       field: 'range',
-      name: <TableHeaderTooltipCell title={i18n.GAPS_TABLE_GAP_RANGE_LABEL} tooltipContent={''} />,
+      name: (
+        <TableHeaderTooltipCell
+          title={i18n.GAPS_TABLE_GAP_RANGE_LABEL}
+          tooltipContent={i18n.GAPS_TABLE_GAP_RANGE_LABEL_TOOLTIP}
+        />
+      ),
       render: (value: Gap['range']) => (
         <>
           <FormattedDate value={value?.gte} fieldName={'start'} />
@@ -129,7 +147,10 @@ const getGapsTableColumns = (hasCRUDPermissions: boolean, ruleId: string, enable
       field: 'total_gap_duration_ms',
       sortable: true,
       name: (
-        <TableHeaderTooltipCell title={i18n.GAPS_TABLE_GAP_DURATION_TOOLTIP} tooltipContent={''} />
+        <TableHeaderTooltipCell
+          title={i18n.GAPS_TABLE_GAP_DURATION_LABEL}
+          tooltipContent={i18n.GAPS_TABLE_GAP_DURATION_LABEL_TOOLTIP}
+        />
       ),
       render: (value: Gap['total_gap_duration_ms']) => (
         <> {value != null ? moment.duration(value, 'ms').humanize() : getEmptyTagValue()}</>

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_gaps/components/rule_gaps/translations.tsx

@@ -13,6 +13,13 @@ export const GAPS_TABLE_STATUS_LABEL = i18n.translate(
   }
 );
 
+export const GAPS_TABLE_STATUS_LABEL_TOOLTIP = i18n.translate(
+  'xpack.securitySolution.gapsTable.statusLabelTooltip',
+  {
+    defaultMessage: 'Status of gap',
+  }
+);
+
 export const GAPS_TABLE_ACTIONS_LABEL = i18n.translate(
   'xpack.securitySolution.gapsTable.actionsLabel',
   {
@@ -48,6 +55,13 @@ export const GAPS_TABLE_MANUAL_FILL_TASKS_LABEL = i18n.translate(
   }
 );
 
+export const GAPS_TABLE_MANUAL_FILL_TASKS_LABEL_TOOLTIP = i18n.translate(
+  'xpack.securitySolution.gapsTable.manualFillTasksLabelTooltip',
+  {
+    defaultMessage: 'Status of manual run filling the gap',
+  }
+);
+
 export const GAPS_TABLE_IN_PROGRESS_LABEL = i18n.translate(
   'xpack.securitySolution.gapsTable.inProgressIntervalsLabel',
   {
@@ -62,6 +76,13 @@ export const GAPS_TABLE_EVENT_TIME_COVERED_LABEL = i18n.translate(
   }
 );
 
+export const GAPS_TABLE_EVENT_TIME_COVERED_LABEL_TOOLTIP = i18n.translate(
+  'xpack.securitySolution.gapsTable.eventTimeCoveredLabelTooltip',
+  {
+    defaultMessage: 'Progress of manual run filling the gap',
+  }
+);
+
 export const GAPS_TABLE_GAP_RANGE_LABEL = i18n.translate(
   'xpack.securitySolution.gapsTable.gapRangeLabel',
   {
@@ -69,13 +90,27 @@ export const GAPS_TABLE_GAP_RANGE_LABEL = i18n.translate(
   }
 );
 
-export const GAPS_TABLE_GAP_DURATION_TOOLTIP = i18n.translate(
+export const GAPS_TABLE_GAP_RANGE_LABEL_TOOLTIP = i18n.translate(
+  'xpack.securitySolution.gapsTable.gapRangeLabelTooltip',
+  {
+    defaultMessage: 'Time range of gap',
+  }
+);
+
+export const GAPS_TABLE_GAP_DURATION_LABEL = i18n.translate(
   'xpack.securitySolution.gapsTable.gapDurationTooltip',
   {
     defaultMessage: 'Total gap duration',
   }
 );
 
+export const GAPS_TABLE_GAP_DURATION_LABEL_TOOLTIP = i18n.translate(
+  'xpack.securitySolution.gapsTable.gapDurationLabelTooltip',
+  {
+    defaultMessage: 'How long gap lasted',
+  }
+);
+
 export const GAPS_TABLE_FILL_GAP_BUTTON_LABEL = i18n.translate(
   'xpack.securitySolution.gapsTable.fillGapButtonLabel',
   {
@@ -125,6 +160,13 @@ export const GAPS_TABLE_EVENT_TIME_LABEL = i18n.translate(
   }
 );
 
+export const GAPS_TABLE_EVENT_TIME_LABEL_TOOLTIP = i18n.translate(
+  'xpack.securitySolution.gapsTable.eventTimeLabelTooltip',
+  {
+    defaultMessage: 'Date and time gap was discovered',
+  }
+);
+
 export const GAP_FILL_DISABLED_MESSAGE = i18n.translate(
   'xpack.securitySolution.gapsTable.gapFillDisabledMessage',
   {

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/use_columns.tsx

@@ -476,7 +476,7 @@ export const useMonitoringColumns = ({
             customTooltip={
               <div style={{ maxWidth: '20px' }}>
                 <PopoverTooltip columnName={i18n.COLUMN_GAP} anchorColor="subdued">
-                  <EuiText style={{ width: 300 }}>
+                  <EuiText css={{ width: 300 }}>
                     <FormattedMessage
                       defaultMessage="Duration of most recent gap in Rule execution. Adjust Rule look-back or {seeDocs} for mitigating gaps."
                       id="xpack.securitySolution.detectionEngine.rules.allRules.columns.gapTooltip"
@@ -505,7 +505,12 @@ export const useMonitoringColumns = ({
       },
       {
         field: 'gap_info.total_unfilled_duration_ms',
-        name: i18n.COLUMN_TOTAL_UNFILLED_GAPS_DURATION,
+        name: (
+          <TableHeaderTooltipCell
+            title={i18n.COLUMN_TOTAL_UNFILLED_GAPS_DURATION}
+            tooltipContent={i18n.COLUMN_TOTAL_UNFILLED_GAPS_DURATION_TOOLTIP}
+          />
+        ),
         render: (value: number | undefined) => (
           <EuiText data-test-subj="gap_info" size="s">
             {value != null && value > 0