From 5427a5ff617d90cee0efaa565df0a7c10360ca26 Mon Sep 17 00:00:00 2001
From: Zoe Steinkamp <zoe.steinkamp@gmail.com>
Date: Fri, 6 Dec 2019 07:49:15 -0700
Subject: [PATCH] feat (ui): Add the view check page
Comparmentalizing the view
Co-Authored-By: Deniz Kusefoglu <deniz@influxdata.com>
---
ui/src/alerting/components/CheckHistory.tsx | 51 +----------
.../components/CheckHistoryVisualization.tsx | 90 +++++++++++++++++++
2 files changed, 94 insertions(+), 47 deletions(-)
create mode 100644 ui/src/alerting/components/CheckHistoryVisualization.tsx
diff --git a/ui/src/alerting/components/CheckHistory.tsx b/ui/src/alerting/components/CheckHistory.tsx
index b1689a071b..4ee6e5f879 100644
--- a/ui/src/alerting/components/CheckHistory.tsx
+++ b/ui/src/alerting/components/CheckHistory.tsx
@@ -9,6 +9,7 @@ import {get} from 'lodash'
import EventViewer from 'src/eventViewer/components/EventViewer'
import EventTable from 'src/eventViewer/components/EventTable'
import CheckHistoryControls from 'src/alerting/components/CheckHistoryControls'
+import CheckHistoryVisualization from 'src/alerting/components/CheckHistoryVisualization'
import AlertHistoryQueryParams from 'src/alerting/components/AlertHistoryQueryParams'
import CheckPlot from 'src/shared/components/CheckPlot'
import EmptyQueryView, {ErrorFormat} from 'src/shared/components/EmptyQueryView'
@@ -26,6 +27,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 { queries } from 'react-testing-library'
interface ResourceIDs {
checkIDs: {[x: string]: boolean}
@@ -65,8 +67,6 @@ const CheckHistory: FC<Props> = ({
const loadRows = useMemo(() => options => loadStatuses(orgID, options), [
orgID,
])
- const [submitToken, setSubmitToken] = useState(0)
- const [manualRefresh, setManualRefresh] = useState(0)
const fields = STATUS_FIELDS
return (
@@ -95,52 +95,9 @@ const CheckHistory: FC<Props> = ({
scrollable={false}
className="alert-history-page--contents"
>
- {/* {<CheckHistoryVisualization .../>} */}
- <TimeSeries
- submitToken={submitToken}
- queries={[check.query]}
- key={manualRefresh}
- variables={getTimeRangeVars({lower: 'now() - 5m'})}
- check={check}
- >
- {({
- giraffeResult,
- loading,
- errorMessage,
- isInitialFetch,
- statuses,
- }) => {
- return (
- <EmptyQueryView
- errorFormat={ErrorFormat.Tooltip}
- errorMessage={errorMessage}
- hasResults={checkResultsLength(giraffeResult)}
- loading={loading}
- isInitialFetch={isInitialFetch}
- queries={[check.query]}
- fallbackNote={null}
- >
- <CheckPlot
- check={check}
- table={get(giraffeResult, 'table')}
- fluxGroupKeyUnion={get(
- giraffeResult,
- 'fluxGroupKeyUnion'
- )}
- loading={loading}
- timeZone={timeZone}
- viewProperties={properties}
- statuses={statuses}
- >
- {config => <Plot config={config} />}
- </CheckPlot>
- {/* {<CheckHistoryStatuses .../>} */}
- </EmptyQueryView>
- )
- }}
- </TimeSeries>
+ <CheckHistoryVisualization check={check} timeZone={timeZone}} />
<div className="alert-history">
- <EventTable {...props} fields={fields} />
+ {/* <EventTable {...props} fields={fields} /> */}
</div>
</Page.Contents>
</Page>
diff --git a/ui/src/alerting/components/CheckHistoryVisualization.tsx b/ui/src/alerting/components/CheckHistoryVisualization.tsx
new file mode 100644
index 0000000000..56830ec84d
--- /dev/null
+++ b/ui/src/alerting/components/CheckHistoryVisualization.tsx
@@ -0,0 +1,90 @@
+// Libraries
+import React, {FC, createContext, useState, useEffect} from 'react'
+import {get} from 'lodash'
+
+// Components
+import { Plot } from '@influxdata/giraffe'
+import CheckPlot from 'src/shared/components/CheckPlot'
+import EmptyQueryView, {ErrorFormat} from 'src/shared/components/EmptyQueryView'
+
+
+// Types
+import { Check, TimeZone, CheckViewProperties} from 'src/types'
+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'
+
+interface ResourceIDs {
+ checkIDs: {[x: string]: boolean}
+ endpointIDs: {[x: string]: boolean}
+ ruleIDs: {[x: string]: boolean}
+}
+
+export const ResourceIDsContext = createContext<ResourceIDs>(null)
+
+interface OwnProps {
+ check: Check
+ timeZone: TimeZone
+}
+
+
+
+type Props = OwnProps
+//TODO maybe update submitToken when we know how
+
+const CheckHistoryVisualization: FC<Props> = ({
+ check,
+ timeZone
+}) => {
+ let properties: CheckViewProperties
+
+ useEffect(() => {
+ const view = createView<CheckViewProperties>(
+ get(check, 'type', 'threshold')
+ )
+ properties = view.properties
+ }, [check])
+
+ const [submitToken, setSubmitToken] = useState(0)
+ const [manualRefresh, setManualRefresh] = useState(0)
+
+ return (
+ <TimeSeries
+ submitToken={submitToken}
+ queries={[check.query]}
+ key={manualRefresh}
+ variables={getTimeRangeVars({lower: 'now() - 5m'})}
+ check={check}
+ >
+ {({giraffeResult, loading, errorMessage, isInitialFetch, statuses}) => {
+ return (
+ <EmptyQueryView
+ errorFormat={ErrorFormat.Tooltip}
+ errorMessage={errorMessage}
+ hasResults={checkResultsLength(giraffeResult)}
+ loading={loading}
+ isInitialFetch={isInitialFetch}
+ queries={[check.query]}
+ fallbackNote={null}
+ >
+ <CheckPlot
+ check={check}
+ table={get(giraffeResult, 'table')}
+ fluxGroupKeyUnion={get(giraffeResult, 'fluxGroupKeyUnion')}
+ loading={loading}
+ timeZone={timeZone}
+ viewProperties={properties}
+ statuses={statuses}
+ >
+ {config => <Plot config={config} />}
+ </CheckPlot>
+ {/* {<CheckHistoryStatuses .../>} */}
+ </EmptyQueryView>
+ )
+ }}
+ </TimeSeries>
+ )
+}
+
+export default CheckHistoryVisualization