From 344005aa4eec78e17be55aec4ddb11b5d56d9569 Mon Sep 17 00:00:00 2001
From: chs97 <623528324@qq.com>
Date: Sat, 27 Oct 2018 15:23:43 +0800
Subject: [PATCH] feat(logs): update logs page

---
 src/containers/Logs/index.tsx   | 25 ++++++++++++++++---------
 src/containers/Rules/style.scss | 12 ++++++++++++
 src/stores/ConfigStore.ts       |  1 -
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/containers/Logs/index.tsx b/src/containers/Logs/index.tsx
index 9a56b4b..d856721 100644
--- a/src/containers/Logs/index.tsx
+++ b/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 () {
-        const logs: Log[] = Array.from(
-            { length: 32 },
-            () => ({ type: 'info', payload: 'google.com match DomainSuffix using Proxy', time: new Date() })
-        )
-        this.setState({ logs }, () => this.scrollToBottom())
+    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.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 => (
-                                    <li>
-                                        <span className="logs-panel-time">{ dayjs().format('YYYY-MM-DD HH:mm:ss') }</span>
+                                (log, index) => (
+                                    <li key={index}>
+                                        <span className="logs-panel-time">{ dayjs(log.time).format('YYYY-MM-DD HH:mm:ss') }</span>
                                         <span>[{ log.type }] { log.payload }</span>
                                     </li>
                                 )
diff --git a/src/containers/Rules/style.scss b/src/containers/Rules/style.scss
index 03c783a..7ed93b3 100644
--- a/src/containers/Rules/style.scss
+++ b/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 {
diff --git a/src/stores/ConfigStore.ts b/src/stores/ConfigStore.ts
index a1774ed..5cc7e7b 100644
--- a/src/stores/ConfigStore.ts
+++ b/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,