Show outbound traffic in outbounds table (#1711)

* store outbound traffic in database

* show outbound traffic in outbounds table

* add refresh button

1 files changed, 46 insertions, 2 deletions

diff --git a/web/html/xui/xray.html b/web/html/xui/xray.html
index d6f0c0f8..d00b73cc 100644
--- a/web/html/xui/xray.html
+++ b/web/html/xui/xray.html
@@ -341,8 +341,15 @@
                             </a-table>
                         </a-tab-pane>
                         <a-tab-pane key="tpl-3" tab='{{ i18n "pages.xray.Outbounds"}}' style="padding-top: 20px;" force-render="true">
-                            <a-button type="primary" icon="plus" @click="addOutbound()" style="margin-bottom: 10px;">{{ i18n "pages.xray.outbound.addOutbound" }}</a-button>
-                            <a-button type="primary" @click="showWarp()" style="margin-bottom: 10px;">WARP</a-button>
+                            <a-row>
+                                <a-col :xs="12" :sm="12" :lg="12">
+                                    <a-button type="primary" icon="plus" @click="addOutbound()" style="margin-bottom: 10px;">{{ i18n "pages.xray.outbound.addOutbound" }}</a-button>
+                                    <a-button type="primary" @click="showWarp()" style="margin-bottom: 10px;">WARP</a-button>
+                                </a-col>
+                                <a-col :xs="12" :sm="12" :lg="12" style="text-align: right;">
+                                    <a-icon type="sync" :spin="refreshing" @click="refreshOutboundTraffic()" style="margin: 0 5px;"/>
+                                </a-col>
+                            </a-row>
                             <a-table :columns="outboundColumns" bordered
                             :row-key="r => r.key"
                             :data-source="outboundData"
@@ -378,6 +385,9 @@
                                         <a-tag style="margin:0;" v-if="outbound.streamSettings.security=='reality'" color="green">reality</a-tag>
                                     </template>
                                 </template>
+                                <template slot="traffic" slot-scope="text, outbound, index">
+                                    <a-tag color="green">[[ findOutboundTraffic(outbound) ]]</a-tag>
+                                </template>
                             </a-table>
                         </a-tab-pane>
                         <a-tab-pane key="tpl-4" tab='{{ i18n "pages.xray.outbound.reverse"}}' style="padding-top: 20px;" force-render="true">
@@ -463,6 +473,7 @@
         { title: '{{ i18n "pages.xray.outbound.tag"}}', dataIndex: 'tag', align: 'center', width: 50 },
         { title: '{{ i18n "protocol"}}', align: 'center', width: 50, scopedSlots: { customRender: 'protocol' }  },
         { title: '{{ i18n "pages.xray.outbound.address"}}', align: 'center', width: 50, scopedSlots: { customRender: 'address' } },
+        { title: '{{ i18n "pages.inbounds.traffic" }}', align: 'center', width: 50, scopedSlots: { customRender: 'traffic' } },
     ];
 
     const reverseColumns = [
@@ -483,7 +494,9 @@
             oldXraySetting: '',
             xraySetting: '',
             inboundTags: [],
+            outboundsTraffic: [],
             saveBtnDisable: true,
+            refreshing: false,
             restartResult: '',
             isMobile: window.innerWidth <= 768,
             advSettings: 'xraySetting',
@@ -581,6 +594,12 @@
             loading(spinning = true) {
                 this.spinning = spinning;
             },
+            async getOutboundsTraffic() {
+                const msg = await HttpUtil.get("/panel/xray/getOutboundsTraffic");
+                if (msg.success) {
+                    this.outboundsTraffic = msg.obj;
+                }
+            },
             async getXraySetting() {
                 this.loading(true);
                 const msg = await HttpUtil.post("/panel/xray/");
@@ -759,6 +778,14 @@
                 }
                 return true;
             },
+            findOutboundTraffic(o) {
+                for (const otraffic of this.outboundsTraffic) {
+                    if (otraffic.tag == o.tag) {
+                        return sizeFormat(otraffic.up) + ' / ' + sizeFormat(otraffic.down);
+                    }
+                }
+                return sizeFormat(0) + ' / ' + sizeFormat(0);
+            },
             findOutboundAddress(o) {
                 serverObj = null;
                 switch(o.protocol){
@@ -816,6 +843,22 @@
                 outbounds.splice(index,1);
                 this.outboundSettings = JSON.stringify(outbounds);
             },
+            async refreshOutboundTraffic() {
+                if (!this.refreshing) {
+                    this.refreshing = true;
+                    await this.getOutboundsTraffic();
+
+                    data = []
+                    if (this.templateSettings != null) {
+                        this.templateSettings.outbounds.forEach((o, index) => {
+                            data.push({'key': index, ...o});
+                        });
+                    }
+
+                    this.outboundData = data;
+                    this.refreshing = false;
+                }
+            },
             addReverse(){
                 reverseModal.show({
                     title: '{{ i18n "pages.xray.outbound.addReverse"}}',
@@ -949,6 +992,7 @@
         async mounted() {
             await this.getXraySetting();
             await this.getXrayResult();
+            await this.getOutboundsTraffic();
             while (true) {
                 await PromiseUtil.sleep(800);
                 this.saveBtnDisable = this.oldXraySetting === this.xraySetting;