From b6d724d2768a016a7c9c15d97676aa0ec8d6b8e4 Mon Sep 17 00:00:00 2001
From: Roy Li <me@dada.li>
Date: Fri, 6 Nov 2020 15:10:40 +0800
Subject: [PATCH] feat: show traffic in list view

---
 src/pages/Requests/components/ListItem.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/pages/Requests/components/ListItem.tsx b/src/pages/Requests/components/ListItem.tsx
index 07c429a..4400127 100644
--- a/src/pages/Requests/components/ListItem.tsx
+++ b/src/pages/Requests/components/ListItem.tsx
@@ -2,6 +2,7 @@
 import { jsx } from '@emotion/core'
 import styled from '@emotion/styled/macro'
 import css from '@emotion/css/macro'
+import bytes from 'bytes'
 import dayjs from 'dayjs'
 import tw from 'twin.macro'
 import React from 'react'
@@ -30,9 +31,17 @@ const ListItem: React.FC<{ req: RequestItem }> = ({ req }) => {
         />
         <div tw="text-xs ml-1">#{req.id}</div>
         <div tw="text-xs ml-1">
-          {dayjs.unix(req.startDate).format('HH:mm:ss')}
+          <span> - </span>
+          <span>{dayjs.unix(req.startDate).format('HH:mm:ss')}</span>
+        </div>
+        <div tw="text-xs ml-1">
+          <span> - </span>
+          <span>{bytes(req.inBytes + req.outBytes)}</span>
+        </div>
+        <div tw="text-xs ml-1">
+          <span> - </span>
+          <span>{req.status}</span>
         </div>
-        <div tw="text-xs ml-1">{req.status}</div>
       </div>
     </React.Fragment>
   )