Show loading while generating diagnostics log

Disables clicking repeatedly on diagnostics log download button by
showing a loading animation instead of the regular download button.

src/components/pages/LogsPage/DownloadsContent.jsx

@@ -23,6 +23,7 @@ import type { Log as LogType } from '../../../types/Log'
 
 import { Close } from '../../atoms/TextInput'
 import DatetimePicker from '../../molecules/DatetimePicker'
+import StatusIcon from '../../atoms/StatusIcon'
 
 import StyleProps from '../../styleUtils/StyleProps'
 
@@ -73,13 +74,14 @@ const Log = styled.div`
     margin-top: 0;
   }
 `
-const LogName = styled.div``
+const LogName = styled.div`
+  margin-left: 16px;
+`
 const LogDownload = styled.div`
   ${StyleProps.exactSize('16px')}
   background: url('${downloadImage}') center no-repeat;
   background-size: contain;
   cursor: pointer;
-  margin-right: 16px;
 `
 const Seperator = styled.div`
   width: 465px;
@@ -95,6 +97,7 @@ type State = {
 type Props = {
   logs: LogType[],
   onDownloadClick: (logName: string, startDate: ?Date, endDate: ?Date) => void,
+  generatingDiagnostics: boolean,
 }
 @observer
 class DownloadsContent extends React.Component<Props, State> {
@@ -156,11 +159,16 @@ class DownloadsContent extends React.Component<Props, State> {
     return (
       <Logs>
         <Log>
-          <LogDownload
-            onClick={() => {
-              this.props.onDownloadClick('__diagnostics__')
-            }}
-          />
+          {this.props.generatingDiagnostics ? (
+            <StatusIcon status="RUNNING" />
+          ) :
+            (
+              <LogDownload
+                onClick={() => {
+                  this.props.onDownloadClick('__diagnostics__')
+                }}
+              />
+            )}
           <LogName>diagnostics</LogName>
         </Log>
         <Log>

src/components/pages/LogsPage/LogsPage.jsx

@@ -168,6 +168,7 @@ class LogsPage extends React.Component<{}, State> {
             <DownloadContent
               logs={logStore.logs}
               onDownloadClick={(l, s, e) => { this.handleDownloadClick(l, s, e) }}
+              generatingDiagnostics={logStore.generatingDiagnostics}
             />
           </TabContent>
         )

src/stores/LogStore.js

@@ -36,6 +36,7 @@ class LogStore {
   @observable logs: Log[] = []
   @observable loading: boolean = false
   @observable liveFeed: string[] = []
+  @observable generatingDiagnostics: boolean = false
 
   @action async getLogs(options?: { showLoading?: boolean }) {
     if (options && options.showLoading) {
@@ -67,7 +68,8 @@ class LogStore {
     DomUtils.executeDownloadLink(url)
   }
 
-  async downloadDiagnostics() {
+  @action async downloadDiagnostics() {
+    this.generatingDiagnostics = true
     let baseUrl = `${servicesUrl.coriolis}/${apiCaller.projectId}`
     let [diagnosticsResp, replicasResp, migrationsResp] = await Promise.all([
       apiCaller.send({ url: `${baseUrl}/diagnostics` }),
@@ -81,6 +83,9 @@ class LogStore {
     zip.file('migrations.json', JSON.stringify(migrationsResp.data))
     let zipContent = await zip.generateAsync({ type: 'blob' })
     saveAs(zipContent, 'diagnostics.zip')
+    runInAction(() => {
+      this.generatingDiagnostics = false
+    })
   }
 
   socket: WebSocket