refactor(ui): simplify event viewer field configuration

ui/src/alerting/constants/history.ts

@@ -8,48 +8,75 @@ import NotificationEndpointTableField from 'src/alerting/components/Notification
 import SentTableField from 'src/alerting/components/SentTableField'
 
 // Types
-import {FieldComponents} from 'src/eventViewer/types'
+import {Fields} from 'src/eventViewer/types'
 
-export const STATUS_FIELDS = ['time', 'level', 'check', 'message', 'tags']
-
-export const STATUS_FIELD_COMPONENTS: FieldComponents = {
-  time: TimeTableField,
-  level: LevelTableField,
-  tags: TagsTableField,
-  check: CheckTableField,
-}
-
-export const STATUS_FIELD_WIDTHS = {
-  time: 160,
-  check: 150,
-  message: 300,
-  level: 50,
-  tags: 300,
-}
-
-export const NOTIFICATION_FIELDS = [
-  'time',
-  'level',
-  'check',
-  'notificationRule',
-  'notificationEndpoint',
-  'sent',
+export const STATUS_FIELDS: Fields = [
+  {
+    rowKey: 'time',
+    columnName: 'Time',
+    columnWidth: 160,
+    component: TimeTableField,
+  },
+  {
+    rowKey: 'level',
+    columnName: 'Level',
+    columnWidth: 50,
+    component: LevelTableField,
+  },
+  {
+    rowKey: 'check',
+    columnName: 'Check',
+    columnWidth: 150,
+    component: CheckTableField,
+  },
+  {
+    rowKey: 'message',
+    columnName: 'Message',
+    columnWidth: 300,
+  },
+  {
+    rowKey: 'tags',
+    columnName: 'Tags',
+    columnWidth: 300,
+    component: TagsTableField,
+  },
 ]
 
-export const NOTIFICATION_FIELD_COMPONENTS: FieldComponents = {
-  time: TimeTableField,
-  level: LevelTableField,
-  check: CheckTableField,
-  notificationRule: NotificationRuleTableField,
-  notificationEndpoint: NotificationEndpointTableField,
-  sent: SentTableField,
-}
-
-export const NOTIFICATION_FIELD_WIDTHS = {
-  time: 160,
-  level: 50,
-  check: 150,
-  notificationRule: 200,
-  notificationEndpoint: 200,
-  sent: 50,
-}
+export const NOTIFICATION_FIELDS: Fields = [
+  {
+    rowKey: 'time',
+    columnName: 'Time',
+    columnWidth: 160,
+    component: TimeTableField,
+  },
+  {
+    rowKey: 'level',
+    columnName: 'Level',
+    columnWidth: 50,
+    component: LevelTableField,
+  },
+  {
+    rowKey: 'check',
+    columnName: 'Check',
+    columnWidth: 150,
+    component: CheckTableField,
+  },
+  {
+    rowKey: 'notificationRule',
+    columnName: 'Notification Rule',
+    columnWidth: 200,
+    component: NotificationRuleTableField,
+  },
+  {
+    rowKey: 'notificationEndpoint',
+    columnName: 'Notification Endpoint',
+    columnWidth: 200,
+    component: NotificationEndpointTableField,
+  },
+  {
+    rowKey: 'sent',
+    columnName: 'Sent',
+    columnWidth: 50,
+    component: SentTableField,
+  },
+]

ui/src/alerting/containers/AlertHistoryIndex.tsx

@@ -10,11 +10,7 @@ import AlertHistoryControls from 'src/alerting/containers/AlertHistoryControls'
 // Constants
 import {
   STATUS_FIELDS,
-  STATUS_FIELD_COMPONENTS,
-  STATUS_FIELD_WIDTHS,
   NOTIFICATION_FIELDS,
-  NOTIFICATION_FIELD_COMPONENTS,
-  NOTIFICATION_FIELD_WIDTHS,
 } from 'src/alerting/constants/history'
 
 // Utils
@@ -38,14 +34,6 @@ const AlertHistoryIndex: FC = () => {
   const fields =
     historyType === 'statuses' ? STATUS_FIELDS : NOTIFICATION_FIELDS
 
-  const fieldWidths =
-    historyType === 'statuses' ? STATUS_FIELD_WIDTHS : NOTIFICATION_FIELD_WIDTHS
-
-  const fieldComponents =
-    historyType === 'statuses'
-      ? STATUS_FIELD_COMPONENTS
-      : NOTIFICATION_FIELD_COMPONENTS
-
   return (
     <EventViewer loadRows={loadRows}>
       {props => (
@@ -70,12 +58,7 @@ const AlertHistoryIndex: FC = () => {
             className="alert-history-page--contents"
           >
             <div className="alert-history">
-              <EventTable
-                {...props}
-                fields={fields}
-                fieldWidths={fieldWidths}
-                fieldComponents={fieldComponents}
-              />
+              <EventTable {...props} fields={fields} />
             </div>
           </Page.Contents>
         </Page>

ui/src/eventViewer/components/EventTable.tsx

@@ -16,23 +16,14 @@ import {
 } from 'src/eventViewer/components/EventViewer.reducer'
 
 // Types
-import {EventViewerChildProps, FieldComponents} from 'src/eventViewer/types'
+import {EventViewerChildProps, Fields} from 'src/eventViewer/types'
 import {RemoteDataState} from 'src/types'
 
 type Props = EventViewerChildProps & {
-  fields: string[]
-  fieldWidths: {[field: string]: number}
-  fieldComponents: FieldComponents
+  fields: Fields
 }
 
-const EventTable: FC<Props> = ({
-  state,
-  dispatch,
-  loadRows,
-  fields,
-  fieldWidths,
-  fieldComponents,
-}) => {
+const EventTable: FC<Props> = ({state, dispatch, loadRows, fields}) => {
   const rowCount = getRowCount(state)
 
   const isRowLoaded = ({index}) => !!state.rows[index]
@@ -60,8 +51,6 @@ const EventTable: FC<Props> = ({
         style={style}
         row={state.rows[index]}
         fields={fields}
-        fieldWidths={fieldWidths}
-        fieldComponents={fieldComponents}
       />
     )
   }
@@ -75,7 +64,7 @@ const EventTable: FC<Props> = ({
 
   return (
     <div className="event-table">
-      <Header fields={fields} fieldWidths={fieldWidths} />
+      <Header fields={fields} />
       <div className="event-table--table">
         <AutoSizer>
           {({width, height}) => {

ui/src/eventViewer/components/Header.tsx

@@ -1,34 +1,22 @@
+// Libraries
 import React, {FC} from 'react'
 
-// Adds spaces to camelcased names, e.g. "checkName" to "check Name"
-const stylizeName = (name: string): string => {
-  let result = ''
-
-  for (const c of name) {
-    if (c === c.toUpperCase()) {
-      result = result + ' ' + c
-    } else {
-      result = result + c
-    }
-  }
-
-  return result.toUpperCase()
-}
+// Types
+import {Fields} from 'src/eventViewer/types'
 
 interface Props {
-  fields: string[]
-  fieldWidths: {[field: string]: number}
+  fields: Fields
 }
 
-const Header: FC<Props> = ({fields, fieldWidths}) => {
+const Header: FC<Props> = ({fields}) => {
   return (
     <div className="event-table-header">
-      {fields.map(field => {
-        const style = {flexBasis: `${fieldWidths[field]}px`}
+      {fields.map(({rowKey, columnWidth, columnName}) => {
+        const style = {flexBasis: `${columnWidth}px`}
 
         return (
-          <div key={field} className="event-table-header--field" style={style}>
-            {stylizeName(field)}
+          <div key={rowKey} className="event-table-header--field" style={style}>
+            {columnName}
           </div>
         )
       })}

ui/src/eventViewer/components/TableRow.tsx

@@ -1,41 +1,32 @@
 import React, {FC, CSSProperties} from 'react'
 
-import {Row, FieldComponents} from 'src/eventViewer/types'
+import {Row, Fields} from 'src/eventViewer/types'
 
 interface Props {
   row: Row
   style: CSSProperties
-  fields: string[]
-  fieldWidths: {[field: string]: number}
-  fieldComponents: FieldComponents
+  fields: Fields
 }
 
-const TableRow: FC<Props> = ({
-  row,
-  style,
-  fields,
-  fieldComponents,
-  fieldWidths,
-}) => {
+const TableRow: FC<Props> = ({row, style, fields}) => {
   return (
     <div style={style}>
       <div className="event-row">
-        {fields.map(field => {
-          const Component = fieldComponents[field]
-          const style = {flexBasis: `${fieldWidths[field]}px`}
+        {fields.map(({component: Component, columnWidth, rowKey}) => {
+          const style = {flexBasis: `${columnWidth}px`}
 
           let content
 
-          if (row[field] === undefined) {
+          if (row[rowKey] === undefined) {
             content = null
           } else if (Component) {
-            content = <Component key={field} row={row} />
+            content = <Component key={rowKey} row={row} />
           } else {
-            content = String(row[field])
+            content = String(row[rowKey])
           }
 
           return (
-            <div key={field} className="event-row--field" style={style}>
+            <div key={rowKey} className="event-row--field" style={style}>
               {content}
             </div>
           )

ui/src/eventViewer/types/index.ts

@@ -45,6 +45,11 @@ export interface EventViewerChildProps {
   loadRows: LoadRows
 }
 
-export interface FieldComponents {
-  [fieldName: string]: ComponentType<{row: Row}>
+export interface Field {
+  rowKey: string
+  columnName: string
+  columnWidth: number
+  component?: ComponentType<{row: Row}>
 }
+
+export type Fields = Field[]