feat (ui): Add the view check page

ui/src/alerting/components/CheckCard.tsx

@@ -10,9 +10,7 @@ import InlineLabels from 'src/shared/components/inlineLabels/InlineLabels'
 
 // Constants
 import {DEFAULT_CHECK_NAME} from 'src/alerting/constants'
-import {
-  SEARCH_QUERY_PARAM
-} from 'src/alerting/constants/history'
+import {SEARCH_QUERY_PARAM} from 'src/alerting/constants/history'
 
 // Actions and Selectors
 import {
@@ -105,7 +103,6 @@ const CheckCard: FunctionComponent<Props> = ({
   }
 
   const onView = () => {
-
     const queryParams = new URLSearchParams({
       [SEARCH_QUERY_PARAM]: `"checkID" == "${check.id}"`,
     })

ui/src/alerting/components/CheckHistory.tsx

@@ -46,11 +46,10 @@ const CheckHistory: FC<Props> = ({
   timeZone,
   resourceIDs,
 }) => {
-
   const loadRows = useMemo(() => options => loadStatuses(orgID, options), [
     orgID,
   ])
-
+  const historyType = 'statuses'
   const fields = STATUS_FIELDS
   return (
     <GetResources resources={[ResourceType.Checks]}>
@@ -69,6 +68,7 @@ const CheckHistory: FC<Props> = ({
                   />
                   <AlertHistoryQueryParams
                     searchInput={props.state.searchInput}
+                    historyType={historyType}
                   />
                   {/* <CheckHistoryControls eventViewerProps={props} /> */}
                 </div>

ui/src/alerting/components/CheckHistoryVisualization.tsx

@@ -13,6 +13,7 @@ import TimeSeries from 'src/shared/components/TimeSeries'
 import {createView} from 'src/shared/utils/view'
 import {checkResultsLength} from 'src/shared/utils/vis'
 import {getTimeRangeVars} from 'src/variables/utils/getTimeRangeVars'
+import {TimeRange} from 'src/types'
 
 interface ResourceIDs {
   checkIDs: {[x: string]: boolean}
@@ -28,6 +29,7 @@ interface OwnProps {
 }
 
 type Props = OwnProps
+//TODO maybe update submitToken when we know how
 
 const CheckHistoryVisualization: FC<Props> = ({check, timeZone}) => {
   const view = createView<CheckViewProperties>(get(check, 'type', 'threshold'))
@@ -40,7 +42,7 @@ const CheckHistoryVisualization: FC<Props> = ({check, timeZone}) => {
       submitToken={submitToken}
       queries={[check.query]}
       key={manualRefresh}
-      variables={getTimeRangeVars({lower: 'now() - 5m'})}
+      variables={getTimeRangeVars({lower: 'now() - 5m'} as TimeRange)}
       check={check}
     >
       {({giraffeResult, loading, errorMessage, isInitialFetch, statuses}) => {
@@ -65,6 +67,7 @@ const CheckHistoryVisualization: FC<Props> = ({check, timeZone}) => {
             >
               {config => <Plot config={config} />}
             </CheckPlot>
+            {/* {<CheckHistoryStatuses .../>} */}
           </EmptyQueryView>
         )
       }}