feat(ui): link to alerting history from alerting page

ui/src/alerting/components/AlertHistoryIndex.tsx

@@ -6,6 +6,7 @@ import {Page} from '@influxdata/clockface'
 import EventViewer from 'src/eventViewer/components/EventViewer'
 import EventTable from 'src/eventViewer/components/EventTable'
 import AlertHistoryControls from 'src/alerting/components/AlertHistoryControls'
+import AlertHistoryQueryParams from 'src/alerting/components/AlertHistoryQueryParams'
 
 // Constants
 import {
@@ -14,7 +15,12 @@ import {
 } from 'src/alerting/constants/history'
 
 // Utils
-import {loadStatuses, loadNotifications} from 'src/alerting/utils/history'
+import {
+  loadStatuses,
+  loadNotifications,
+  getInitialHistoryType,
+  getInitialState,
+} from 'src/alerting/utils/history'
 
 // Types
 import {AlertHistoryType} from 'src/types'
@@ -24,7 +30,9 @@ interface Props {
 }
 
 const AlertHistoryIndex: FC<Props> = ({params: {orgID}}) => {
-  const [historyType, setHistoryType] = useState<AlertHistoryType>('statuses')
+  const [historyType, setHistoryType] = useState<AlertHistoryType>(
+    getInitialHistoryType()
+  )
 
   const loadRows = useMemo(() => {
     return historyType === 'statuses'
@@ -36,7 +44,7 @@ const AlertHistoryIndex: FC<Props> = ({params: {orgID}}) => {
     historyType === 'statuses' ? STATUS_FIELDS : NOTIFICATION_FIELDS
 
   return (
-    <EventViewer loadRows={loadRows}>
+    <EventViewer loadRows={loadRows} initialState={getInitialState()}>
       {props => (
         <Page
           titleTag="Check Statuses | InfluxDB 2.0"
@@ -45,6 +53,10 @@ const AlertHistoryIndex: FC<Props> = ({params: {orgID}}) => {
           <Page.Header fullWidth={true}>
             <div className="alert-history-page--header">
               <Page.Title title="Check Statuses" />
+              <AlertHistoryQueryParams
+                searchInput={props.state.searchInput}
+                historyType={historyType}
+              />
               <AlertHistoryControls
                 historyType={historyType}
                 onSetHistoryType={setHistoryType}

ui/src/alerting/components/AlertHistoryQueryParams.tsx

@@ -0,0 +1,32 @@
+// Libraries
+import {useEffect, FC} from 'react'
+
+// Utils
+import {updateQueryParams} from 'src/shared/utils/queryParams'
+
+// Constants
+import {
+  HISTORY_TYPE_QUERY_PARAM,
+  SEARCH_QUERY_PARAM,
+} from 'src/alerting/constants/history'
+
+// Types
+import {AlertHistoryType} from 'src/types'
+
+interface Props {
+  searchInput: string
+  historyType: AlertHistoryType
+}
+
+const AlertHistoryQueryParams: FC<Props> = ({searchInput, historyType}) => {
+  useEffect(() => {
+    updateQueryParams({
+      [SEARCH_QUERY_PARAM]: searchInput || null,
+      [HISTORY_TYPE_QUERY_PARAM]: historyType,
+    })
+  }, [searchInput, historyType])
+
+  return null
+}
+
+export default AlertHistoryQueryParams

ui/src/alerting/components/CheckCard.tsx

@@ -10,6 +10,10 @@ import InlineLabels from 'src/shared/components/inlineLabels/InlineLabels'
 
 // Constants
 import {DEFAULT_CHECK_NAME} from 'src/alerting/constants'
+import {
+  SEARCH_QUERY_PARAM,
+  HISTORY_TYPE_QUERY_PARAM,
+} from 'src/alerting/constants/history'
 
 // Actions and Selectors
 import {
@@ -23,7 +27,7 @@ import {createLabel as createLabelAsync} from 'src/labels/actions'
 import {viewableLabels} from 'src/labels/selectors'
 
 // Types
-import {Check, Label, AppState} from 'src/types'
+import {Check, Label, AppState, AlertHistoryType} from 'src/types'
 
 interface DispatchProps {
   updateCheck: typeof updateCheck
@@ -83,7 +87,14 @@ const CheckCard: FunctionComponent<Props> = ({
   }
 
   const onCheckClick = () => {
-    router.push(`/orgs/${orgID}/alerting/checks/${check.id}/`)
+    const historyType: AlertHistoryType = 'statuses'
+
+    const queryParams = new URLSearchParams({
+      [HISTORY_TYPE_QUERY_PARAM]: historyType,
+      [SEARCH_QUERY_PARAM]: `"checkID" == "${check.id}"`,
+    })
+
+    router.push(`/orgs/${orgID}/alert-history?${queryParams}`)
   }
 
   const handleAddCheckLabel = (label: Label) => {

ui/src/alerting/components/endpoints/EndpointCard.tsx

@@ -21,8 +21,19 @@ import {SlideToggle, ComponentSize, ResourceCard} from '@influxdata/clockface'
 import EndpointCardMenu from 'src/alerting/components/endpoints/EndpointCardMenu'
 import InlineLabels from 'src/shared/components/inlineLabels/InlineLabels'
 
+// Constants
+import {
+  SEARCH_QUERY_PARAM,
+  HISTORY_TYPE_QUERY_PARAM,
+} from 'src/alerting/constants/history'
+
 // Types
-import {NotificationEndpoint, Label, AppState} from 'src/types'
+import {
+  NotificationEndpoint,
+  Label,
+  AppState,
+  AlertHistoryType,
+} from 'src/types'
 import {Action} from 'src/alerting/actions/notifications/endpoints'
 
 interface DispatchProps {
@@ -70,7 +81,14 @@ const EndpointCard: FC<Props> = ({
     onUpdateEndpointProperties(id, {name})
   }
   const handleClick = () => {
-    router.push(`orgs/${orgID}/alerting/endpoints/${endpoint.id}/`)
+    const historyType: AlertHistoryType = 'notifications'
+
+    const queryParams = new URLSearchParams({
+      [HISTORY_TYPE_QUERY_PARAM]: historyType,
+      [SEARCH_QUERY_PARAM]: `"notificationEndpointID" == "${endpoint.id}"`,
+    })
+
+    router.push(`/orgs/${orgID}/alert-history?${queryParams}`)
   }
   const nameComponent = (
     <ResourceCard.EditableName

ui/src/alerting/components/notifications/RuleCard.tsx

@@ -10,6 +10,10 @@ import InlineLabels from 'src/shared/components/inlineLabels/InlineLabels'
 
 // Constants
 import {DEFAULT_NOTIFICATION_RULE_NAME} from 'src/alerting/constants'
+import {
+  SEARCH_QUERY_PARAM,
+  HISTORY_TYPE_QUERY_PARAM,
+} from 'src/alerting/constants/history'
 
 // Actions and Selectors
 import {
@@ -23,7 +27,12 @@ import {viewableLabels} from 'src/labels/selectors'
 import {createLabel as createLabelAsync} from 'src/labels/actions'
 
 // Types
-import {NotificationRuleDraft, AppState, Label} from 'src/types'
+import {
+  NotificationRuleDraft,
+  AppState,
+  Label,
+  AlertHistoryType,
+} from 'src/types'
 
 interface DispatchProps {
   onUpdateRuleProperties: typeof updateRuleProperties
@@ -83,7 +92,14 @@ const RuleCard: FC<Props> = ({
   }
 
   const onRuleClick = () => {
-    router.push(`/orgs/${orgID}/alerting/rules/${rule.id}/`)
+    const historyType: AlertHistoryType = 'notifications'
+
+    const queryParams = new URLSearchParams({
+      [HISTORY_TYPE_QUERY_PARAM]: historyType,
+      [SEARCH_QUERY_PARAM]: `"notificationRuleID" == "${rule.id}"`,
+    })
+
+    router.push(`/orgs/${orgID}/alert-history?${queryParams}`)
   }
 
   const handleAddRuleLabel = (label: Label) => {

ui/src/alerting/constants/history.ts

@@ -93,3 +93,6 @@ export const EXAMPLE_NOTIFICATION_SEARCHES = [
   '"level" != "ok"',
   '"notification rule" == "my rule"',
 ]
+
+export const HISTORY_TYPE_QUERY_PARAM = 'type'
+export const SEARCH_QUERY_PARAM = 'filter'

ui/src/alerting/utils/history.ts

@@ -4,17 +4,27 @@ import {fromFlux} from '@influxdata/giraffe'
 
 // Utils
 import {runQuery, RunQueryResult} from 'src/shared/apis/query'
-import {searchExprToFlux} from 'src/eventViewer/utils/search'
+import {parseSearchInput, searchExprToFlux} from 'src/eventViewer/utils/search'
 import {findNodes} from 'src/shared/utils/ast'
+import {readQueryParams} from 'src/shared/utils/queryParams'
 
 // Constants
 import {
   STATUS_BUCKET,
   NOTIFICATION_BUCKET,
+  HISTORY_TYPE_QUERY_PARAM,
+  SEARCH_QUERY_PARAM,
 } from 'src/alerting/constants/history'
 
 // Types
-import {CancelBox, StatusRow, NotificationRow} from 'src/types'
+import {State as EventViewerState} from 'src/eventViewer/components/EventViewer.reducer'
+
+import {
+  CancelBox,
+  StatusRow,
+  NotificationRow,
+  AlertHistoryType,
+} from 'src/types'
 
 import {
   LoadRowsOptions,
@@ -161,3 +171,23 @@ const processResponse = ({
     cancel,
   }
 }
+
+export const getInitialHistoryType = (): AlertHistoryType => {
+  return readQueryParams()[HISTORY_TYPE_QUERY_PARAM] || 'statuses'
+}
+
+export const getInitialState = (): Partial<EventViewerState> => {
+  const searchInput = readQueryParams()[SEARCH_QUERY_PARAM]
+
+  if (!searchInput) {
+    return {}
+  }
+
+  try {
+    const searchExpr = parseSearchInput(searchInput)
+
+    return {searchInput, searchExpr}
+  } catch {
+    return {searchInput}
+  }
+}

ui/src/eventViewer/components/EventViewer.tsx

@@ -12,14 +12,19 @@ import {
 
 // Types
 import {LoadRows, EventViewerChildProps} from 'src/eventViewer/types'
+import {State} from 'src/eventViewer/components/EventViewer.reducer'
 
 interface Props {
   loadRows: LoadRows
   children: (props: EventViewerChildProps) => ReactElement
+  initialState?: Partial<State>
 }
 
-const EventViewer: FC<Props> = ({loadRows, children}) => {
-  const [state, dispatch] = useReducer(reducer, INITIAL_STATE)
+const EventViewer: FC<Props> = ({loadRows, children, initialState}) => {
+  const [state, dispatch] = useReducer(reducer, {
+    ...INITIAL_STATE,
+    ...initialState,
+  })
 
   useEffect(() => {
     loadNextRows(state, dispatch, loadRows, Date.now())