Merge pull request #502 from smiclea/download-web-log

Move download web requests button from About Modal

src/components/pages/AboutModal/AboutModal.jsx

@@ -18,8 +18,6 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import logger from '../../../utils/ApiLogger'
-
 import Modal from '../../molecules/Modal/Modal'
 import LicenceComponent from '../../organisms/Licence'
 
@@ -80,10 +78,6 @@ const TextLine = styled.div`
     margin-left: 6px;
   }
 `
-const LinkMock = styled.span`
-  text-decoration: underline;
-  cursor: pointer;
-`
 
 type Props = {
   onRequestClose: () => void,
@@ -124,9 +118,6 @@ class AboutModal extends React.Component<Props, State> {
               <AboutContentWrapper>
                 <Logo />
                 <Text>
-                  <TextLine>
-                    <LinkMock onClick={() => { logger.download() }} >Download Web UI Log</LinkMock>
-                  </TextLine>
                   <TextLine>
                     © {new Date().getFullYear()} Cloudbase Solutions. All Rights Reserved.
                   </TextLine>

src/components/pages/LogsPage/DownloadsContent.jsx

@@ -81,6 +81,12 @@ const LogDownload = styled.div`
   cursor: pointer;
   margin-right: 16px;
 `
+const Seperator = styled.div`
+  width: 465px;
+  height: 1px;
+  background: #d6d6d6;
+  margin-top: 16px;
+`
 
 type State = {
   startDate: ?Date,
@@ -157,6 +163,15 @@ class DownloadsContent extends React.Component<Props, State> {
           />
           <LogName>diagnostics</LogName>
         </Log>
+        <Log>
+          <LogDownload
+            onClick={() => {
+              this.props.onDownloadClick('__ui__')
+            }}
+          />
+          <LogName>web-requests</LogName>
+        </Log>
+        <Seperator />
         {this.props.logs.map(log => (
           <Log key={log.log_name}>
             <LogDownload

src/components/pages/LogsPage/LogsPage.jsx

@@ -29,6 +29,7 @@ import StreamText from './StreamText'
 import logStore from '../../../stores/LogStore'
 import notificationStore from '../../../stores/NotificationStore'
 import projectStore from '../../../stores/ProjectStore'
+import apiLogger from '../../../utils/ApiLogger'
 
 const TAB_ITEMS = [
   { label: 'Download', value: 'downloads' },
@@ -129,6 +130,11 @@ class LogsPage extends React.Component<{}, State> {
       return
     }
 
+    if (logName === '__ui__') {
+      apiLogger.download()
+      return
+    }
+
     if (startDate && endDate && endDate.getTime() < startDate.getTime()) {
       notificationStore.alert('End time must be greater than start time', 'error')
       return