ui: Redesign Events section on Metrics page

Current change is required to fit date and
event message after date format was changed.
Before, Events section had two columns and it
could not fit full date string in the second
column without wrapping to several rows what
made it not readable.

Now, instead of showing two separate columns,
date of event is displayed under event message
and both event name and date can occupy entire
width of events table.

Number of events to show on Metrics page is
decreased from 10 to 5.

Release note: None

Release justification: bug fixes and low-risk updates to new functionality

pkg/ui/src/views/cluster/containers/events/events.spec.tsx

@@ -10,7 +10,7 @@
 
 import React from "react";
 import { assert } from "chai";
-import { shallow } from "enzyme";
+import { mount, shallow } from "enzyme";
 import _ from "lodash";
 import Long from "long";
 import * as sinon from "sinon";
@@ -20,6 +20,7 @@ import * as protos from  "src/js/protos";
 import { EventBoxUnconnected as EventBox, EventRow, getEventInfo } from "src/views/cluster/containers/events";
 import { refreshEvents } from "src/redux/apiReducers";
 import { allEvents } from "src/util/eventTypes";
+import { ToolTipWrapper } from "src/views/shared/components/toolTip";
 
 type Event = protos.cockroach.server.serverpb.EventsResponse.Event;
 
@@ -37,7 +38,7 @@ function makeEventBox(
 }
 
 function makeEvent(event: Event) {
-  return shallow(<EventRow event={event}></EventRow>);
+  return mount(<EventRow event={event}></EventRow>);
 }
 
 describe("<EventBox>", function() {
@@ -91,21 +92,19 @@ describe("<EventRow>", function () {
       });
 
       const provider = makeEvent(e);
-      assert.lengthOf(provider.first().children(), 2);
-      const tooltip = provider.first().childAt(0).childAt(0).childAt(0).childAt(0).childAt(0);
-      assert(_.includes(tooltip.text(), "created database"));
+      assert.isTrue(provider.find("div.events__message > span").text().includes("created database"));
+      assert.isTrue(provider.find(ToolTipWrapper).exists());
     });
 
     it("correctly renders an unknown event", function () {
       const e = new protos.cockroach.server.serverpb.EventsResponse.Event({
         target_id: Long.fromNumber(1),
         event_type: "unknown",
       });
-
       const provider = makeEvent(e);
-      assert.lengthOf(provider.first().children(), 2);
-      const tooltip = provider.first().childAt(0).childAt(0).childAt(0).childAt(0).childAt(0);
-      assert(_.includes(tooltip.text(), "Unknown Event Type"));
+
+      assert.isTrue(provider.find("div.events__message > span").text().includes("unknown"));
+      assert.isTrue(provider.find(ToolTipWrapper).exists());
     });
   });
 });

pkg/ui/src/views/cluster/containers/events/events.styl

@@ -11,38 +11,38 @@
 @require "~styl/base/palette.styl"
 @require "~src/components/core/index.styl"
 
+$event-message-line-height = 22px
+
 .events
   font-family Lato-Regular
   table
     width 100%
     border-collapse collapse
     tr
-      height 60px
       border-bottom 1px solid $table-border-color
       &:last-child
         border 0
-    td
-      padding-left 0
+      td
+        padding 10px 0 8px
+    tr:first-child > td
+      padding 0 0 8px
+
 
 .events__message
-  font-family $font-family--base
-  font-size 14px
-  line-height 22px
+  font-size $font-size--medium
   color $colors--neutral-8
   text-overflow ellipsis
   display block
-  white-space nowrap
   overflow hidden
-  width 169px
-  margin-bottom 18px
+  line-height $event-message-line-height
+  width 240px
+  max-height $event-message-line-height * 2
 
 .events__timestamp
-  font-family $font-family--base
-  font-size 12px
-  line-height 20px
+  font-size $font-size--small
   color $colors--neutral-6
-  margin-left 20px
-  width 65px
+  letter-spacing 0.3px
+  line-height $line-height--small
 
 .events__more-link
   text-align center

pkg/ui/src/views/cluster/containers/events/index.tsx

@@ -30,7 +30,7 @@ import "./events.styl";
 type Event$Properties = protos.cockroach.server.serverpb.EventsResponse.IEvent;
 
 // Number of events to show in the sidebar.
-const EVENT_BOX_NUM_EVENTS = 10;
+const EVENT_BOX_NUM_EVENTS = 5;
 
 const eventsSortSetting = new LocalSetting<AdminUIState, SortSetting>(
   "events/sort_setting", (s) => s.localSettings,
@@ -65,12 +65,17 @@ export class EventRow extends React.Component<EventRowProps, {}> {
     const e = getEventInfo(event);
     return <tr>
       <td>
-        <ToolTipWrapper placement="left" text={ e.content }>
-          <div className="events__message">{e.content}</div>
+        <ToolTipWrapper
+          placement="left"
+          text={ e.content }
+        >
+          <div className="events__message">
+            {e.content}
+          </div>
         </ToolTipWrapper>
-      </td>
-      <td>
-        <div className="events__timestamp">{e.fromNowString}</div>
+        <div className="events__timestamp">
+          {e.fromNowString}
+        </div>
       </td>
     </tr>;
   }