Fix some issues in server sorting

- Removed the need for switch statements by giving sort options properties - Added serverUUID to /v1/network/servers endpoint data
2022-09-10 09:09:52 +03:00 · 2022-09-10 09:09:52 +03:00 · b8258a38a6
parent 9654e4a8d3
commit b8258a38a6
4 changed files with 69 additions and 69 deletions
--- a/Plan/common/src/main/java/com/djrapitops/plan/delivery/rendering/json/JSONFactory.java
+++ b/Plan/common/src/main/java/com/djrapitops/plan/delivery/rendering/json/JSONFactory.java
@ -217,6 +217,7 @@ public class JSONFactory {
                    ServerUUID serverUUID = entry.getKey();
                    Map<String, Object> server = new HashMap<>();
                    server.put("name", entry.getValue().getIdentifiableName());
+                    server.put("serverUUID", entry.getValue().getUuid().toString());

                    Optional<DateObj<Integer>> recentPeak = db.query(TPSQueries.fetchPeakPlayerCount(serverUUID, now - TimeUnit.DAYS.toMillis(2L)));
                    Optional<DateObj<Integer>> allTimePeak = db.query(TPSQueries.fetchAllTimePeakPlayerCount(serverUUID));
--- a/Plan/react/dashboard/src/components/cards/network/ServersTableCard.js
+++ b/Plan/react/dashboard/src/components/cards/network/ServersTableCard.js
@ -1,14 +1,7 @@
 import React, {useCallback, useState} from 'react';
 import {Card, Dropdown} from "react-bootstrap-v5";
 import ServersTable, {ServerSortOption} from "../../table/ServersTable";
-import {
-    faNetworkWired,
-    faSort,
-    faSortAlphaDown,
-    faSortAlphaUp,
-    faSortNumericDown,
-    faSortNumericUp
-} from "@fortawesome/free-solid-svg-icons";
+import {faNetworkWired} from "@fortawesome/free-solid-svg-icons";
 import {useTranslation} from "react-i18next";
 import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
 import DropdownToggle from "react-bootstrap-v5/lib/esm/DropdownToggle";
@ -21,33 +14,20 @@ const SortDropDown = ({sortBy, sortReversed, setSortBy}) => {
    const sortOptions = Object.values(ServerSortOption);

    const getSortIcon = useCallback(() => {
-        switch (sortBy) {
-            case ServerSortOption.ALPHABETICAL:
-                return sortReversed ? faSortAlphaUp : faSortAlphaDown;
-            case ServerSortOption.PLAYERS_ONLINE:
-            // case ServerSortOption.DOWNTIME:
-            case ServerSortOption.AVERAGE_TPS:
-            case ServerSortOption.LOW_TPS_SPIKES:
-            case ServerSortOption.NEW_PLAYERS:
-            case ServerSortOption.UNIQUE_PLAYERS:
-            case ServerSortOption.REGISTERED_PLAYERS:
-                return sortReversed ? faSortNumericDown : faSortNumericUp;
-            default:
-                return faSort;
-        }
-    }, [sortBy, sortReversed])
+        return sortReversed ? sortBy.iconDesc : sortBy.iconAsc;
+    }, [sortBy, sortReversed]);

    return (
-        <Dropdown className="float-end">
+        <Dropdown className="float-end" style={{position: "absolute", right: "0.5rem"}}>
            <DropdownToggle variant=''>
-                <Fa icon={getSortIcon()}/> {t(sortBy)}
+                <Fa icon={getSortIcon()}/> {t(sortBy.label)}
            </DropdownToggle>

            <DropdownMenu>
                <h6 className="dropdown-header">{t('html.label.sortBy')}</h6>
                {sortOptions.map((option, i) => (
                    <DropdownItem key={i} onClick={() => setSortBy(option)}>
-                        {t(option)}
+                        {t(option.label)}
                    </DropdownItem>
                ))}
            </DropdownMenu>
--- a/Plan/react/dashboard/src/components/table/ServersTable.js
+++ b/Plan/react/dashboard/src/components/table/ServersTable.js
@ -1,11 +1,21 @@
 import React from "react";
 import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
-import {faCaretSquareRight, faLineChart, faLink, faServer, faUser, faUsers} from "@fortawesome/free-solid-svg-icons";
+import {
+    faCaretSquareRight,
+    faLineChart,
+    faLink,
+    faServer,
+    faSortAlphaDown,
+    faSortAlphaUp,
+    faSortNumericDown,
+    faSortNumericUp,
+    faUser,
+    faUsers
+} from "@fortawesome/free-solid-svg-icons";
 import {useTheme} from "../../hooks/themeHook";
 import {useTranslation} from "react-i18next";
 import Scrollable from "../Scrollable";
 import {NavLink} from "react-router-dom";
-import {calculateSum} from "../../util/calculation";

 const ServerRow = ({server, onQuickView}) => {
    const {t} = useTranslation();
@ -13,7 +23,8 @@ const ServerRow = ({server, onQuickView}) => {
        <tr>
            <td>{server.name}</td>
            <td className="p-1">
-                <NavLink to={"/server/" + encodeURIComponent(server.name)}
+                <NavLink to={"/server/" + encodeURIComponent(server.serverUUID)}
+                         title={t('html.label.serverAnalysis') + ': ' + server.name}
                         className={'btn bg-transparent col-light-green'}><Fa
                    icon={faLink}/> {t('html.label.serverAnalysis')}
                </NavLink>
@ -32,6 +43,7 @@ const ServerRow = ({server, onQuickView}) => {
    );
 }

+const sortKeepOrder = () => 0;
 const sortBySometimesNumericProperty = (propertyName) => (a, b) => {
    if (typeof (a[propertyName]) === 'number' && typeof (b[propertyName]) === 'number') return a[propertyName] - b[propertyName];
    if (typeof (a[propertyName]) === 'number') return 1;
@ -40,24 +52,7 @@ const sortBySometimesNumericProperty = (propertyName) => (a, b) => {
 }
 const sortByNumericProperty = (propertyName) => (a, b) => b[propertyName] - a[propertyName]; // Biggest first
 const sortBeforeReverse = (servers, sortBy) => {
-    const sorting = [...servers];
-    switch (sortBy) {
-        case ServerSortOption.PLAYERS_ONLINE:
-            return sorting.sort(sortBySometimesNumericProperty('online'));
-        case ServerSortOption.AVERAGE_TPS:
-            return sorting.sort(sortBySometimesNumericProperty('avg_tps'));
-        case ServerSortOption.UNIQUE_PLAYERS:
-            return sorting.sort(sortByNumericProperty('unique_players'));
-        case ServerSortOption.NEW_PLAYERS:
-            return sorting.sort(sortByNumericProperty('new_players'));
-        case ServerSortOption.REGISTERED_PLAYERS:
-            return sorting.sort(sortByNumericProperty('players'));
-        // case ServerSortOption.DOWNTIME:
-        //     return servers.sort(sortByNumericProperty('downtime_raw'));
-        case ServerSortOption.ALPHABETICAL:
-        default:
-            return sorting;
-    }
+    return [...servers].sort(sortBy.sortFunction);
 }

 const reverse = (array) => {
@ -72,15 +67,54 @@ const sort = (servers, sortBy, sortReversed) => {
    return sortReversed ? reverse(sortBeforeReverse(servers, sortBy)) : sortBeforeReverse(servers, sortBy);
 }

+const SortOptionIcon = {
+    LETTERS: {
+        iconAsc: faSortAlphaDown,
+        iconDesc: faSortAlphaUp
+    },
+    NUMBERS: {
+        iconAsc: faSortNumericUp,
+        iconDesc: faSortNumericDown
+    }
+}
+
 export const ServerSortOption = {
-    ALPHABETICAL: 'html.label.alphabetical',
-    AVERAGE_TPS: 'html.label.averageTps7days',
+    ALPHABETICAL: {
+        label: 'html.label.alphabetical',
+        sortFunction: sortKeepOrder,
+        ...SortOptionIcon.LETTERS
+    },
+    AVERAGE_TPS: {
+        label: 'html.label.averageTps7days',
+        sortFunction: sortBySometimesNumericProperty('avg_tps'),
+        ...SortOptionIcon.NUMBERS
+    },
    // DOWNTIME: 'html.label.downtime',
-    LOW_TPS_SPIKES: 'html.label.lowTpsSpikes7days',
-    NEW_PLAYERS: 'html.label.newPlayers7days',
-    PLAYERS_ONLINE: 'html.label.playersOnlineNow',
-    REGISTERED_PLAYERS: 'html.label.registeredPlayers',
-    UNIQUE_PLAYERS: 'html.label.uniquePlayers7days',
+    LOW_TPS_SPIKES: {
+        label: 'html.label.lowTpsSpikes7days',
+        sortFunction: sortByNumericProperty('low_tps_spikes'),
+        ...SortOptionIcon.NUMBERS
+    },
+    NEW_PLAYERS: {
+        label: 'html.label.newPlayers7days',
+        sortFunction: sortByNumericProperty('new_players'),
+        ...SortOptionIcon.NUMBERS
+    },
+    PLAYERS_ONLINE: {
+        label: 'html.label.playersOnlineNow',
+        sortFunction: sortBySometimesNumericProperty('online'),
+        ...SortOptionIcon.NUMBERS
+    },
+    REGISTERED_PLAYERS: {
+        label: 'html.label.registeredPlayers',
+        sortFunction: sortByNumericProperty('players'),
+        ...SortOptionIcon.NUMBERS
+    },
+    UNIQUE_PLAYERS: {
+        label: 'html.label.uniquePlayers7days',
+        sortFunction: sortByNumericProperty('unique_players'),
+        ...SortOptionIcon.NUMBERS
+    },
 }

 const ServersTable = ({servers, onSelect, sortBy, sortReversed}) => {
@ -111,14 +145,6 @@ const ServersTable = ({servers, onSelect, sortBy, sortReversed}) => {
                        <td>-</td>
                    </tr>}
                </tbody>
-                {sortedServers.length && <tfoot>
-                <tr>
-                    <td><b>{t('html.label.total')}</b></td>
-                    <td></td>
-                    <td>{calculateSum(servers.map(s => s.players))}</td>
-                    <td>{calculateSum(servers.map(s => s.online))}</td>
-                </tr>
-                </tfoot>}
            </table>
        </Scrollable>
    )
--- a/Plan/react/dashboard/src/util/calculation.js
+++ b/Plan/react/dashboard/src/util/calculation.js
@ -1,7 +0,0 @@
-export const calculateSum = array => {
-    let sum = 0;
-    for (let item of array) {
-        if (typeof (item) === "number") sum += item;
-    }
-    return sum;
-}