fix bugs from review

elastic · Dec 6, 2020 · 1763c56 · 1763c56
1 parent 66c6728
commit 1763c56
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 6 deletions.
diff --git a/...gins/security_solution/public/timelines/components/timeline/body/column_headers/index.tsx b/...gins/security_solution/public/timelines/components/timeline/body/column_headers/index.tsx
@@ -304,7 +304,9 @@ export const ColumnHeadersComponent = ({
             </EventsThContent>
           </EventsTh>
           <EventsTh>
-            <SortingColumnsContainer>{ColumnSorting}</SortingColumnsContainer>
+            <EuiToolTip content={i18n.SORT_FIELDS}>
+              <SortingColumnsContainer>{ColumnSorting}</SortingColumnsContainer>
+            </EuiToolTip>
           </EventsTh>
 
           {showEventsSelect && (

diff --git a/...ecurity_solution/public/timelines/components/timeline/body/column_headers/translations.ts b/...ecurity_solution/public/timelines/components/timeline/body/column_headers/translations.ts
@@ -22,6 +22,10 @@ export const FULL_SCREEN = i18n.translate('xpack.securitySolution.timeline.fullS
   defaultMessage: 'Full screen',
 });
 
+export const SORT_FIELDS = i18n.translate('xpack.securitySolution.timeline.sortFieldsButton', {
+  defaultMessage: 'Sort fields',
+});
+
 export const TYPE = i18n.translate('xpack.securitySolution.timeline.typeTooltip', {
   defaultMessage: 'Type',
 });

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/constants.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/constants.ts
@@ -7,15 +7,17 @@
 /** The minimum (fixed) width of the Actions column */
 export const MINIMUM_ACTIONS_COLUMN_WIDTH = 50; // px;
 
+/** Additional column width to include when checkboxes are shown **/
+export const SHOW_CHECK_BOXES_COLUMN_WIDTH = 24; // px;
+
 /** The (fixed) width of the Actions column */
-export const DEFAULT_ACTIONS_COLUMN_WIDTH = 24 * 4; // px;
+export const DEFAULT_ACTIONS_COLUMN_WIDTH = SHOW_CHECK_BOXES_COLUMN_WIDTH * 5; // px;
 /**
  * The (fixed) width of the Actions column when the timeline body is used as
  * an events viewer, which has fewer actions than a regular events viewer
  */
-export const EVENTS_VIEWER_ACTIONS_COLUMN_WIDTH = 24 * 3; // px;
-/** Additional column width to include when checkboxes are shown **/
-export const SHOW_CHECK_BOXES_COLUMN_WIDTH = 24; // px;
+export const EVENTS_VIEWER_ACTIONS_COLUMN_WIDTH = SHOW_CHECK_BOXES_COLUMN_WIDTH * 4; // px;
+
 /** The default minimum width of a column (when a width for the column type is not specified) */
 export const DEFAULT_COLUMN_MIN_WIDTH = 180; // px
 /** The default minimum width of a column of type `date` */

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/styles.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/styles.tsx
@@ -99,6 +99,9 @@ export const EventsThGroupActions = styled.div.attrs(({ className = '' }) => ({
   min-width: 0;
   padding-left: ${({ isEventViewer }) =>
     !isEventViewer ? '4px;' : '0;'}; // match timeline event border
+  button {
+    color: ${({ theme }) => theme.eui.euiColorPrimary};
+  }
 `;
 
 export const EventsThGroupData = styled.div.attrs(({ className = '' }) => ({

diff --git a/x-pack/plugins/security_solution/public/timelines/containers/local_storage/index.tsx b/x-pack/plugins/security_solution/public/timelines/containers/local_storage/index.tsx
@@ -32,7 +32,12 @@ export const getTimelinesInStorageByIds = (storage: Storage, timelineIds: Timeli
 
     return {
       ...acc,
-      [timelineId]: timelineModel,
+      [timelineId]: {
+        ...timelineModel,
+        ...(timelineModel.sort != null && !Array.isArray(timelineModel.sort)
+          ? { sort: [timelineModel.sort] }
+          : {}),
+      },
     };
   }, {} as { [K in TimelineIdLiteral]: TimelineModel });
 };