feat (ui): Add the view check page

wrapping up styling and routing

ui/src/alerting/components/AlertHistoryQueryParams.tsx

@@ -22,7 +22,7 @@ const AlertHistoryQueryParams: FC<Props> = ({searchInput, historyType}) => {
   useEffect(() => {
     updateQueryParams({
       [SEARCH_QUERY_PARAM]: searchInput || null,
-      [HISTORY_TYPE_QUERY_PARAM]: historyType,
+      [HISTORY_TYPE_QUERY_PARAM]: historyType || null ,
     })
   }, [searchInput, historyType])
 

ui/src/alerting/components/CheckCard.tsx

@@ -106,14 +106,12 @@ const CheckCard: FunctionComponent<Props> = ({
   }
 
   const onView = () => {
-    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}`)
+    router.push(`/orgs/${orgID}/checks/${check.id}/?${queryParams}`)
   }
 
   const handleAddCheckLabel = (label: Label) => {

ui/src/alerting/components/CheckHistory.scss

@@ -0,0 +1,6 @@
+.alert-history-contents {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}

ui/src/alerting/components/CheckHistory.tsx

@@ -39,7 +39,6 @@ interface StateProps {
 }
 
 type Props = OwnProps & StateProps
-//TODO maybe update submitToken when we know how
 
 const CheckHistory: FC<Props> = ({
   params: {orgID},
@@ -47,7 +46,6 @@ const CheckHistory: FC<Props> = ({
   timeZone,
   resourceIDs,
 }) => {
-  const historyType = 'statuses'
 
   const loadRows = useMemo(() => options => loadStatuses(orgID, options), [
     orgID,
@@ -71,9 +69,8 @@ const CheckHistory: FC<Props> = ({
                   />
                   <AlertHistoryQueryParams
                     searchInput={props.state.searchInput}
-                    historyType={historyType}
                   />
-                  <CheckHistoryControls eventViewerProps={props} />
+                  {/* <CheckHistoryControls eventViewerProps={props} /> */}
                 </div>
               </Page.Header>
               <Page.Contents
@@ -81,15 +78,7 @@ const CheckHistory: FC<Props> = ({
                 scrollable={false}
                 className="alert-history-page--contents"
               >
-                <div
-                  className="zoescool"
-                  style={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                    width: '100%',
-                  }}
-                >
+                <div className="alert-history-contents">
                   <CheckHistoryVisualization
                     check={check}
                     timeZone={timeZone}

ui/src/alerting/components/CheckHistoryControls.tsx

@@ -19,7 +19,7 @@ const CheckHistoryControls: FC<Props> = ({eventViewerProps}) => {
   return (
     <div className="alert-history-controls">
       <div className="alert-history-controls--right">
-        <BackToTopButton {...eventViewerProps} />
+        {/* <BackToTopButton {...eventViewerProps} /> */}
         <SearchBar
           {...eventViewerProps}
           placeholder="Search statuses..."

ui/src/alerting/components/CheckHistoryVisualization.tsx

@@ -28,7 +28,6 @@ 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'))
@@ -66,7 +65,6 @@ const CheckHistoryVisualization: FC<Props> = ({check, timeZone}) => {
             >
               {config => <Plot config={config} />}
             </CheckPlot>
-            {/* {<CheckHistoryStatuses .../>} */}
           </EmptyQueryView>
         )
       }}

ui/src/index.tsx

@@ -447,7 +447,7 @@ class Root extends PureComponent {
                             component={AlertHistoryIndex}
                           />
                           <Route
-                            path="alerting/checks/:checkID"
+                            path="checks/:checkID"
                             component={CheckHistory}
                           />
                         </Route>

ui/src/style/chronograf.scss

@@ -117,6 +117,7 @@
 @import 'src/alerting/components/notifications/NewRuleOverlay.scss';
 @import 'src/shared/components/dashed_button/DashedButton.scss';
 @import 'src/alerting/components/AlertingIndex.scss';
+@import 'src/alerting/components/CheckHistory.scss';
 @import 'src/alerting/components/builder/AlertBuilder.scss';
 @import 'src/eventViewer/components/EventTable.scss';
 @import 'src/alerting/components/AlertHistoryIndex.scss';