added more widgets

web/src/components/DialogTorrentDetailsContent/index.jsx

@@ -9,6 +9,9 @@ import {
   ArrowUpward as ArrowUpwardIcon,
   SwapVerticalCircle as SwapVerticalCircleIcon,
   ViewAgenda as ViewAgendaIcon,
+  Widgets as WidgetsIcon,
+  PhotoSizeSelectSmall as PhotoSizeSelectSmallIcon,
+  Build as BuildIcon,
 } from '@material-ui/icons'
 import axios from 'axios'
 import { playlistTorrHost, streamHost, torrentsHost, viewedHost } from 'utils/Hosts'
@@ -117,9 +120,63 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
         'loading'
       ) : isDetailedCacheView ? (
         <DetailedTorrentCacheViewWrapper>
-          <div>PiecesCount: {PiecesCount}</div>
-          <div>PiecesLength: {humanizeSize(PiecesLength)}</div>
-          <div>status: {statString}</div>
+          <StatisticsWrapper>
+            <StatisticsField
+              title='Download speed'
+              value={humanizeSize(downloadSpeed) || '0 B'}
+              iconBg='#118f00'
+              valueBg='#13a300'
+              icon={ArrowDownwardIcon}
+            />
+
+            <StatisticsField
+              title='Upload speed'
+              value={humanizeSize(uploadSpeed) || '0 B'}
+              iconBg='#0146ad'
+              valueBg='#0058db'
+              icon={ArrowUpwardIcon}
+            />
+
+            <StatisticsField
+              title='Peers'
+              value={getPeerString(torrent)}
+              iconBg='#cdc118'
+              valueBg='#d8cb18'
+              icon={SwapVerticalCircleIcon}
+            />
+
+            <StatisticsField
+              title='Torrent size'
+              value={humanizeSize(torrentSize)}
+              iconBg='#01a292'
+              valueBg='#01ad9b'
+              icon={ViewAgendaIcon}
+            />
+
+            <StatisticsField
+              title='Pieces count'
+              value={PiecesCount}
+              iconBg='#b6c95e'
+              valueBg='#c0d076'
+              icon={WidgetsIcon}
+            />
+
+            <StatisticsField
+              title='Pieces length'
+              value={humanizeSize(PiecesLength)}
+              iconBg='#0982c8'
+              valueBg='#098cd7'
+              icon={PhotoSizeSelectSmallIcon}
+            />
+
+            <StatisticsField
+              title='Torrent status'
+              value={statString}
+              iconBg='#aea25b'
+              valueBg='#b4aa6e'
+              icon={BuildIcon}
+            />
+          </StatisticsWrapper>
           <TorrentCache cache={cache} cacheMap={cacheMap} />
         </DetailedTorrentCacheViewWrapper>
       ) : (

web/src/components/DialogTorrentDetailsContent/style.js

@@ -91,20 +91,20 @@ export const SectionHeader = styled.div`
 `
 
 export const DetailedTorrentCacheViewWrapper = styled.div`
-  padding-top: 50px;
+  padding: 40px;
   overflow: auto;
   min-height: 80vh;
 `
 
 export const StatisticsWrapper = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(210px, min-content));
+  grid-template-columns: repeat(auto-fit, minmax(max-content, 220px));
   gap: 20px;
 `
 
 export const StatisticsFieldWrapper = styled.div`
   display: grid;
-  grid-template-columns: 40px max-content;
+  grid-template-columns: 40px 1fr;
   grid-template-rows: min-content 50px;
   grid-template-areas:
     'title title'