added sortings (#469)

* added sortings

* fixed

* handlesort method

src/Components/MetricList/MetricList.less

@@ -27,7 +27,7 @@
 .state {
     flex-shrink: 0;
     padding-top: 6px;
-    width: 25px;
+    width: 50px;
     height: 20px;
     box-sizing: border-box;
 

src/Components/MetricList/MetricList.tsx

@@ -79,7 +79,21 @@ export default function MetricList(props: Props): React.ReactElement {
                         entries.length > MAX_LIST_LENGTH_BEFORE_SCROLLABLE ? "stable" : "auto",
                 }}
             >
-                {status && <div className={cn("state")} />}
+                {status && (
+                    <div className={cn("state")}>
+                        <button
+                            type="button"
+                            className={cn("a11y-span", { sorting: onSort })}
+                            onClick={onSort && (() => onSort("state"))}
+                        >
+                            State
+                            {sortingColumn === "state" && (
+                                <span className={cn("icon")}>{sortingIcon}</span>
+                            )}
+                        </button>
+                    </div>
+                )}
+
                 <div className={cn("name")}>
                     <button
                         type="button"
@@ -140,7 +154,7 @@ export default function MetricList(props: Props): React.ReactElement {
                         // Otherwise, the total height will be the sum of individual row heights.
                         entries.length > MAX_LIST_LENGTH_BEFORE_SCROLLABLE
                             ? METRIC_LIST_HEIGHT
-                            : getTotalSize(entries)
+                            : getTotalSize(entries) + 2
                     }
                     width="100%"
                     itemSize={(index) => getItemSize(...entries[index])}

src/Components/TriggerListItem/TriggerListItem.tsx

@@ -13,8 +13,9 @@ import RouterLink from "../RouterLink/RouterLink";
 import StatusIndicator from "../StatusIndicator/StatusIndicator";
 import TagGroup from "../TagGroup/TagGroup";
 import Tabs, { Tab } from "../Tabs/Tabs";
-import MetricListView from "../MetricList/MetricList";
+import MetricListView, { SortingColumn } from "../MetricList/MetricList";
 import { sanitize } from "dompurify";
+import { sortMetrics } from "../../helpers/sort-metrics";
 import classNames from "classnames/bind";
 
 import styles from "./TriggerListItem.less";
@@ -34,6 +35,8 @@ type Props = {
 type State = {
     showMetrics: boolean;
     metrics: MetricItemList;
+    sortingColumn: SortingColumn;
+    sortingDown: boolean;
 };
 
 export default class TriggerListItem extends React.Component<Props, State> {
@@ -44,28 +47,11 @@ export default class TriggerListItem extends React.Component<Props, State> {
         this.state = {
             showMetrics: false,
             metrics: props.data.last_check?.metrics || {},
+            sortingColumn: "event",
+            sortingDown: false,
         };
     }
 
-    static sortMetricsByValue(metrics: MetricItemList): MetricItemList {
-        return Object.keys(metrics)
-            .sort((x: string, y: string) => {
-                const valueA = metrics[x].value || 0;
-                const valueB = metrics[y].value || 0;
-                if (valueA < valueB) {
-                    return -1;
-                }
-                if (valueA > valueB) {
-                    return 1;
-                }
-                return 0;
-            })
-            .reduce((data: MetricItemList, key: string) => {
-                data[key] = metrics[key];
-                return data;
-            }, {});
-    }
-
     render(): React.ReactNode {
         const { searchMode, data } = this.props;
         const { id, name, targets, tags, throttling, highlights } = data;
@@ -149,6 +135,19 @@ export default class TriggerListItem extends React.Component<Props, State> {
         );
     }
 
+    handleSort(column: SortingColumn) {
+        const { sortingColumn, sortingDown } = this.state;
+
+        if (column === sortingColumn) {
+            this.setState({ sortingDown: !sortingDown });
+        } else {
+            this.setState({
+                sortingColumn: column,
+                sortingDown: true,
+            });
+        }
+    }
+
     getHasExceptionState(): boolean {
         const { data } = this.props;
         const { state: triggerStatus } = data.last_check || {};
@@ -224,6 +223,7 @@ export default class TriggerListItem extends React.Component<Props, State> {
 
     renderMetrics(): React.ReactNode {
         const { onChange, onRemove, data } = this.props;
+        const { sortingColumn, sortingDown } = this.state;
         if (!onChange || !onRemove) {
             return null;
         }
@@ -236,9 +236,14 @@ export default class TriggerListItem extends React.Component<Props, State> {
         const metrics: Array<React.ReactElement> = statuses.map((status: Status) => (
             <Tab key={status} id={status} label={getStatusCaption(status)}>
                 <MetricListView
-                    items={TriggerListItem.sortMetricsByValue(this.filterMetricsByStatus(status))}
-                    sortingColumn="value"
-                    sortingDown
+                    items={sortMetrics(
+                        this.filterMetricsByStatus(status),
+                        sortingColumn,
+                        sortingDown
+                    )}
+                    sortingColumn={sortingColumn}
+                    onSort={(column) => this.handleSort(column)}
+                    sortingDown={sortingDown}
                     onChange={(metric: string, maintenance: number) =>
                         onChange?.(data.id, metric, maintenance)
                     }

src/pages/trigger/trigger.desktop.tsx

@@ -37,7 +37,7 @@ type State = {
 
 class TriggerDesktop extends React.Component<TriggerDesktopProps, State> {
     public state: State = {
-        sortingColumn: "state",
+        sortingColumn: "event",
         sortingDown: false,
     };