Check statuses (#18171)

* Fix: Loading status checks

The first pass at fixing the loading screen

* Fix: Loading status checks

* Fix: Loading status checks

Fix non used variables

* Fix: Loading status checks

fix copy

* Fix: Loading status checks

prettier

ui/src/alerting/utils/history.ts

@@ -36,7 +36,7 @@ export const loadStatuses = (
   orgID: string,
   {offset, limit, since, until, filter}: LoadRowsOptions
 ): CancelBox<StatusRow[]> => {
-  const start = since ? Math.round(since / 1000) : '-60d'
+  const start = since ? Math.round(since / 1000) : '-1d'
   const fluxFilter = filter ? searchExprToFlux(renameTagKeys(filter)) : null
 
   const query = `

ui/src/eventViewer/components/EventTable.scss

@@ -86,7 +86,7 @@ $event-table--field-margin: $ix-marg-b;
   }
 
   to {
-    opacity: 0.8;
+    opacity: 0.5;
   }
 }
 

ui/src/eventViewer/components/EventTable.tsx

@@ -1,5 +1,6 @@
 // Libraries
-import React, {useLayoutEffect, FC} from 'react'
+import React, {useLayoutEffect, FC, useEffect, useState} from 'react'
+import {connect} from 'react-redux'
 import {AutoSizer, InfiniteLoader, List} from 'react-virtualized'
 
 // Components
@@ -9,6 +10,9 @@ import LoadingRow from 'src/eventViewer/components/LoadingRow'
 import FooterRow from 'src/eventViewer/components/FooterRow'
 import ErrorRow from 'src/eventViewer/components/ErrorRow'
 
+// Actions
+import {notify as notifyAction} from 'src/shared/actions/notifications'
+
 // Utils
 import {
   loadNextRows,
@@ -19,17 +23,42 @@ import {
 import {EventViewerChildProps, Fields} from 'src/eventViewer/types'
 import {RemoteDataState} from 'src/types'
 
-type Props = EventViewerChildProps & {
+// Constants
+import {checkStatusLoading} from 'src/shared/copy/notifications'
+
+type DispatchProps = {
+  notify: typeof notifyAction
+}
+
+type OwnProps = {
   fields: Fields
 }
 
-const EventTable: FC<Props> = ({state, dispatch, loadRows, fields}) => {
+type Props = EventViewerChildProps & DispatchProps & OwnProps
+
+const EventTable: FC<Props> = ({state, dispatch, loadRows, fields, notify}) => {
   const rowCount = getRowCount(state)
 
   const isRowLoaded = ({index}) => !!state.rows[index]
 
+  const isRowLoadedBoolean = !!state.rows[0]
+
   const loadMoreRows = () => loadNextRows(state, dispatch, loadRows)
 
+  const [isLongRunningQuery, setIsLongRunningQuery] = useState(false)
+
+  useEffect(() => {
+    setTimeout(() => {
+      setIsLongRunningQuery(true)
+    }, 5000)
+  })
+
+  useEffect(() => {
+    if (isLongRunningQuery && !isRowLoadedBoolean) {
+      notify(checkStatusLoading)
+    }
+  }, [isLongRunningQuery, isRowLoaded])
+
   const rowRenderer = ({key, index, style}) => {
     const isLastRow = index === state.rows.length
 
@@ -103,4 +132,11 @@ const EventTable: FC<Props> = ({state, dispatch, loadRows, fields}) => {
   )
 }
 
-export default EventTable
+const mdtp: DispatchProps = {
+  notify: notifyAction,
+}
+
+export default connect<{}, DispatchProps, OwnProps>(
+  null,
+  mdtp
+)(EventTable)

ui/src/eventViewer/components/LoadingRow.tsx

@@ -28,7 +28,7 @@ const LoadingRow: FC<Props> = ({index, style}) => {
           style={{
             width: `${width}px`,
             height: `${PLACEHOLDER_HEIGHT}px`,
-            animationDelay: `${(index % 5) / 2}s`,
+            animationDelay: `${((index % 5) / 2) * 100}ms`,
           }}
         />
       </div>

ui/src/shared/copy/notifications.ts

@@ -93,6 +93,11 @@ export const SigninError: Notification = {
   message: `Could not sign in`,
 }
 
+export const checkStatusLoading: Notification = {
+  ...defaultSuccessNotification,
+  message: `Currently loading checks`,
+}
+
 export const QuickstartScraperCreationSuccess: Notification = {
   ...defaultSuccessNotification,
   message: `The InfluxDB Scraper has been configured for ${QUICKSTART_SCRAPER_TARGET_URL}`,