fix(logs): add logs cache

src/containers/App.tsx

@@ -12,12 +12,16 @@ import Logs from '@containers/Logs'
 import Rules from '@containers/Rules'
 import Settings from '@containers/Settings'
 import SlideBar from '@containers/Sidebar'
+import { getLogsStreamReader } from '@lib/request'
 
 export interface AppProps extends I18nProps {
 }
 
 @hot(module)
 export default class App extends React.Component<AppProps, {}> {
+    componentDidMount () {
+        getLogsStreamReader()
+    }
     render () {
         const routes = [
             { path: '/', name: 'Overview', component: Overview, exact: true },

src/containers/Logs/index.tsx

@@ -4,8 +4,7 @@ import { translate } from 'react-i18next'
 import { I18nProps } from '@models'
 import { Card, Header } from '@components'
 import './style.scss'
-import { StreamReader } from '@lib/streamer'
-import { getExternalControllerConfig, getConfig } from '@lib/request'
+import { getLogsStreamReader } from '@lib/request'
 
 interface Log {
     type: string
@@ -27,11 +26,9 @@ class Logs extends React.Component<LogsProps, LogsState> {
     private streamReader = null
     private listRef = React.createRef<HTMLUListElement>()
     async componentDidMount () {
-        const externalController = await getExternalControllerConfig()
-        const { data: config } = await getConfig()
-        const logUrl = `http://${externalController.hostname}:${externalController.port}/logs?level=${config['log-level']}`
-        this.streamReader = new StreamReader({ url: logUrl })
-        let logs = []
+        this.streamReader = await getLogsStreamReader()
+        let logs = this.streamReader.buffer()
+        this.setState({ logs }, () => this.scrollToBottom())
         this.streamReader.subscribe('data', (data) => {
             logs = [].concat(this.state.logs, data.map(d => ({ ...d, time: new Date() })))
             this.setState({ logs }, () => this.scrollToBottom())

src/lib/request.ts

@@ -2,8 +2,10 @@ import axios, { AxiosInstance } from 'axios'
 import { Partial, getLocalStorageItem } from '@lib/helper'
 import { isClashX } from '@lib/jsBridge'
 import { rootStores } from '@lib/createStore'
+import { StreamReader } from './streamer'
 
 let instance: AxiosInstance
+let logsStreamReader = null
 
 export interface Config {
     port: number
@@ -116,3 +118,14 @@ export async function getExternalControllerConfig () {
 
     return { hostname, port, secret }
 }
+
+export async function getLogsStreamReader () {
+    if (logsStreamReader) {
+        return logsStreamReader
+    }
+    const externalController = await getExternalControllerConfig()
+    const { data: config } = await getConfig()
+    const logUrl = `http://${externalController.hostname}:${externalController.port}/logs?level=${config['log-level']}`
+    logsStreamReader = new StreamReader({ url: logUrl, bufferLength: 200 })
+    return logsStreamReader
+}

src/stores/ConfigStore.ts

@@ -29,7 +29,6 @@ export class ConfigStore {
 
             // otherwise parse ini
             const config = yaml.parse(rawConfig)
-            console.log(config)
             const externalController = config['external-controller'] as string || ''
             const host = externalController.split(':')