feat(ui): display graphic in time machine top when in empty state (#17271)

* feat(ui): display graphic in time machine top when in empty state

* chore(ui): prettier fix

ui/src/timeMachine/components/TimeMachine.scss

@@ -53,3 +53,14 @@
     left: 0;
   }
 }
+
+.time-machine--view__empty {
+  background-position: center center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-image: url('../../assets/images/radial-power-level.svg');
+
+  > .cell--view-empty {
+    justify-content: flex-end;
+  }
+}

ui/src/timeMachine/components/Vis.tsx

@@ -3,6 +3,7 @@ import React, {SFC} from 'react'
 import {connect} from 'react-redux'
 import {FromFluxResult} from '@influxdata/giraffe'
 import {AutoSizer} from 'react-virtualized'
+import classnames from 'classnames'
 
 // Components
 import EmptyQueryView, {ErrorFormat} from 'src/shared/components/EmptyQueryView'
@@ -88,8 +89,14 @@ const TimeMachineVis: SFC<Props> = ({
     symbolColumns,
   }
 
+  const noQueries =
+    loading === RemoteDataState.NotStarted || !viewProperties.queries.length
+  const timeMachineViewClassName = classnames('time-machine--view', {
+    'time-machine--view__empty': noQueries,
+  })
+
   return (
-    <div className="time-machine--view">
+    <div className={timeMachineViewClassName}>
       <ErrorBoundary>
         <EmptyQueryView
           loading={loading}