feat(logs): update logs page

src/containers/Logs/index.tsx

@@ -4,6 +4,8 @@ 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'
 
 interface Log {
     type: string
@@ -22,13 +24,18 @@ class Logs extends React.Component<LogsProps, LogsState> {
         logs: []
     }
 
+    private streamReader = null
     private listRef = React.createRef<HTMLUListElement>()
-    componentDidMount () {
+    async componentDidMount () {
-        const logs: Log[] = Array.from(
+        const externalController = await getExternalControllerConfig()
-            { length: 32 },
+        const { data: config } = await getConfig()
-            () => ({ type: 'info', payload: 'google.com match DomainSuffix using Proxy', time: new Date() })
+        const logUrl = `http://${externalController.hostname}:${externalController.port}/logs?level=${config['log-level']}`
-        )
+        this.streamReader = new StreamReader({ url: logUrl })
+        let logs = []
+        this.streamReader.subscribe('data', (data) => {
+            logs = [].concat(this.state.logs, data.map(d => ({ ...d, time: new Date() })))
             this.setState({ logs }, () => this.scrollToBottom())
+        })
     }
 
     scrollToBottom = () => {
@@ -45,9 +52,9 @@ class Logs extends React.Component<LogsProps, LogsState> {
                     <ul className="logs-panel" ref={this.listRef}>
                         {
                             this.state.logs.map(
-                                log => (
+                                (log, index) => (
-                                    <li>
+                                    <li key={index}>
-                                        <span className="logs-panel-time">{ dayjs().format('YYYY-MM-DD HH:mm:ss') }</span>
+                                        <span className="logs-panel-time">{ dayjs(log.time).format('YYYY-MM-DD HH:mm:ss') }</span>
                                         <span>[{ log.type }] { log.payload }</span>
                                     </li>
                                 )

src/containers/Rules/style.scss

@@ -1,8 +1,20 @@
 @import '~@styles/variables';
 
 .rules-card {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
     margin-top: 25px;
     padding: 0;
+
+    .rules {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        flex-basis: 0;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
 }
 
 .rule-item {

src/stores/ConfigStore.ts

@@ -46,7 +46,6 @@ export class ConfigStore {
                 payload: r[1],
                 proxy: r[2]
             }))
-            console.log(rule)
             this.config = {
                 general: {
                     port: config.port || 0,