From b61b49842399f0c9acba5936d89871cd589bf172 Mon Sep 17 00:00:00 2001
From: Zoe Steinkamp <zoe.steinkamp@gmail.com>
Date: Mon, 16 Dec 2019 15:17:46 -0700
Subject: [PATCH] feat (ui): Add the view check page

wrapping up styling and routing
---
 .../components/AlertHistoryQueryParams.tsx        |  2 +-
 ui/src/alerting/components/CheckCard.tsx          |  4 +---
 ui/src/alerting/components/CheckHistory.scss      |  6 ++++++
 ui/src/alerting/components/CheckHistory.tsx       | 15 ++-------------
 .../alerting/components/CheckHistoryControls.tsx  |  2 +-
 .../components/CheckHistoryVisualization.tsx      |  2 --
 ui/src/index.tsx                                  |  2 +-
 ui/src/style/chronograf.scss                      |  1 +
 8 files changed, 13 insertions(+), 21 deletions(-)
 create mode 100644 ui/src/alerting/components/CheckHistory.scss

diff --git a/ui/src/alerting/components/AlertHistoryQueryParams.tsx b/ui/src/alerting/components/AlertHistoryQueryParams.tsx
index 73015ea6b3..acacc07dd8 100644
--- a/ui/src/alerting/components/AlertHistoryQueryParams.tsx
+++ b/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])
 
diff --git a/ui/src/alerting/components/CheckCard.tsx b/ui/src/alerting/components/CheckCard.tsx
index 7ecb53865b..a087d8911c 100644
--- a/ui/src/alerting/components/CheckCard.tsx
+++ b/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) => {
diff --git a/ui/src/alerting/components/CheckHistory.scss b/ui/src/alerting/components/CheckHistory.scss
new file mode 100644
index 0000000000..3ffa4f5770
--- /dev/null
+++ b/ui/src/alerting/components/CheckHistory.scss
@@ -0,0 +1,6 @@
+.alert-history-contents {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
diff --git a/ui/src/alerting/components/CheckHistory.tsx b/ui/src/alerting/components/CheckHistory.tsx
index c3ba8cdc89..1b820ab78f 100644
--- a/ui/src/alerting/components/CheckHistory.tsx
+++ b/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}
diff --git a/ui/src/alerting/components/CheckHistoryControls.tsx b/ui/src/alerting/components/CheckHistoryControls.tsx
index 1aaaee37fb..e0ea78259a 100644
--- a/ui/src/alerting/components/CheckHistoryControls.tsx
+++ b/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..."
diff --git a/ui/src/alerting/components/CheckHistoryVisualization.tsx b/ui/src/alerting/components/CheckHistoryVisualization.tsx
index 834a6ea23c..5fe56f528d 100644
--- a/ui/src/alerting/components/CheckHistoryVisualization.tsx
+++ b/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>
         )
       }}
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
index dfb968b2e4..796b6f1cac 100644
--- a/ui/src/index.tsx
+++ b/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>
diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss
index 5c988e2638..5bd10cc082 100644
--- a/ui/src/style/chronograf.scss
+++ b/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';