Beautify link status.

client/src/components/windows/manage_links/LinksStatusWidget.tsx

@@ -1,10 +1,10 @@
-import { Box, Typography } from '@material-ui/core';
+import { Box, LinearProgress, Typography } from '@material-ui/core';
 import React, { useCallback, useEffect, useReducer, useState } from 'react';
 import { $enum } from 'ts-enum-util';
 import { ItemType, QueryElemProperty, QueryResponseType } from '../../../api';
 import { queryItems } from '../../../lib/backend/queries';
 import { QueryElem, QueryLeafBy, QueryLeafOp } from '../../../lib/query/Query';
-import { ExternalStore, StoreURLIdentifiers } from '../../common/StoreLinkIcon';
+import StoreLinkIcon, { ExternalStore, StoreURLIdentifiers } from '../../common/StoreLinkIcon';
 
 var _ = require('lodash');
 
@@ -93,19 +93,46 @@ export default function LinksStatusWidget(props: {
         return s in linkedCounts;
     }
 
-    return <>
-        {$enum(ExternalStore).getValues().map((s: ExternalStore) => {
-            return <Box>
-                {totalCounts && storeReady(s) && <Box>
-                    <Typography>
-                        {s}:<br />
-                        {linkedCounts[s].songs} / {totalCounts.songs} songs linked<br />
-                        {linkedCounts[s].artists} / {totalCounts.artists} artists linked<br />
-                        {linkedCounts[s].albums} / {totalCounts.albums} albums linked<br />
-                        <br />
-                    </Typography>
-                </Box>}
-            </Box>
-        })}
-    </>
+    return <Box display="flex" flexDirection="column" alignItems="left">
+        <table>
+            {$enum(ExternalStore).getValues().map((s: ExternalStore) => {
+                if (!totalCounts) { return <></>; }
+                if (!storeReady(s)) { return <></>; }
+                let tot = totalCounts;
+                let lin = linkedCounts[s];
+                let perc = {
+                    songs: Math.round((lin.songs || 0) / (tot.songs || 1) * 100),
+                    artists: Math.round((lin.artists || 0) / (tot.artists || 1) * 100),
+                    albums: Math.round((lin.albums || 0) / (tot.albums || 1) * 100),
+                }
+                return <>
+                    {totalCounts && storeReady(s) && <>
+                        <tr>
+                            <td rowSpan={3}>
+                                <Box display="flex" flexDirection="column" alignItems="center">
+                                    <StoreLinkIcon whichStore={s} />
+                                    <Typography>{s}</Typography>
+                                </Box>
+                            </td>
+                            <td><Typography>Linked artists:</Typography></td>
+                            <td><Box minWidth="200px"><LinearProgress variant="determinate" color="secondary" value={perc.artists} /></Box></td>
+                            <td><Typography>{lin.artists} / {tot.artists}</Typography></td>
+                        </tr>
+                        <tr>
+                            <td><Typography>Linked albums:</Typography></td>
+                            <td><Box minWidth="200px"><LinearProgress variant="determinate" color="secondary" value={perc.albums} /></Box></td>
+                            <td><Typography>{lin.albums} / {tot.albums}</Typography></td>
+                        </tr>
+                        <tr>
+                            <td><Typography>Linked songs:</Typography></td>
+                            <td><Box minWidth="200px"><LinearProgress variant="determinate" color="secondary" value={perc.songs} /></Box></td>
+                            <td><Typography>{lin.songs} / {tot.songs}</Typography></td>
+                        </tr>
+                        <tr><td colSpan={4}>&nbsp;</td></tr>
+                    </>
+                    }
+                </>;
+            })}
+        </table>
+    </Box >
 }