add actions label temp solution

elastic · Jul 13, 2021 · 16dad65 · 16dad65
1 parent 8bb0f07
commit 16dad65
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx b/x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx
@@ -7,6 +7,8 @@
 
 import { EuiButtonIcon, EuiDataGridColumn } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import styled from 'styled-components';
+
 import React, { Suspense, useState } from 'react';
 import {
   ALERT_DURATION,
@@ -20,6 +22,8 @@ import type { TimelinesUIStart } from '../../../../timelines/public';
 import type { TopAlert } from './';
 import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
 import type { ActionProps, ColumnHeaderOptions, RowRenderer } from '../../../../timelines/common';
+// import { EventsThContent } from '../../../../timelines/public';
+
 import { getRenderCellValue } from './render_cell_value';
 import { usePluginContext } from '../../hooks/use_plugin_context';
 import { decorateResponse } from './decorate_response';
@@ -34,6 +38,28 @@ interface AlertsTableTGridProps {
   setRefetch: (ref: () => void) => void;
 }
 
+// TODO import EventsThContent from timelines plugin and customize a few css properties (position & padding-top)
+const EventsThContent = styled.div.attrs(({ className = '' }) => ({
+  className: `siemEventsTable__thContent ${className}`,
+}))<{ textAlign?: string; width?: number }>`
+  font-size: ${({ theme }) => theme.eui.euiFontSizeXS};
+  font-weight: ${({ theme }) => theme.eui.euiFontWeightSemiBold};
+  line-height: ${({ theme }) => theme.eui.euiLineHeight};
+  min-width: 0;
+  position: relative;
+  top: 3px;
+  padding: ${({ theme }) => theme.eui.paddingSizes.xs};
+  text-align: ${({ textAlign }) => textAlign};
+  width: ${({ width }) =>
+    width != null
+      ? `${width}px`
+      : '100%'}; /* Using width: 100% instead of flex: 1 and max-width: 100% for IE11 */
+
+  > button.euiButtonIcon,
+  > .euiToolTipAnchor > button.euiButtonIcon {
+    margin-left: ${({ theme }) => `-${theme.eui.paddingSizes.xs}`};
+  }
+`;
 /**
  * columns implements a subset of `EuiDataGrid`'s `EuiDataGridColumn` interface,
  * plus additional TGrid column properties
@@ -99,7 +125,9 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
     {
       id: 'expand',
       width: 40,
-      headerCellRender: () => null,
+      headerCellRender: () => {
+        return <EventsThContent>Actions</EventsThContent>; // TODO: internationalization
+      },
       rowCellRender: ({ data }: ActionProps) => {
         const dataFieldEs = data.reduce((acc, d) => ({ ...acc, [d.field]: d.value }), {});
         const decoratedAlerts = decorateResponse(

diff --git a/x-pack/plugins/observability/public/pages/alerts/render_cell_value.tsx b/x-pack/plugins/observability/public/pages/alerts/render_cell_value.tsx
@@ -63,8 +63,8 @@ export const getRenderCellValue = ({
       if (columnId === ALERT_DURATION) {
         setCellProps({
           style: {
-            backgroundColor: 'green', // TEMP
             textAlign: 'right',
+            paddingRight: '15px',
           },
         });
       }

diff --git a/x-pack/plugins/timelines/public/index.ts b/x-pack/plugins/timelines/public/index.ts
@@ -10,6 +10,7 @@ import { PluginInitializerContext } from '../../../../src/core/public';
 import { TimelinesPlugin } from './plugin';
 export * as tGridActions from './store/t_grid/actions';
 export * as tGridSelectors from './store/t_grid/selectors';
+export { EventsThContent } from './components/t_grid/styles';
 export type {
   Inspect,
   SortField,