remove toggle sorting functionality from TableComponent (#630)

remove toggle sorting functionality from TableComponent:
- tables displaying metrics allowed to toggle between being sorted and unsorted when clicking the same button. This was confusing behavior for the user.
- this PR removes the toggle functionality and introduces a BaseTable Component that extends antd's component without the capability to toggle
- Fixes: #566

Signed-off-by: Franziska von der Goltz <franziska@vdgoltz.eu>

web/app/js/components/BaseTable.jsx

@@ -0,0 +1,31 @@
+import { Table } from 'antd';
+
+// BaseTable extends ant-design's table, but overwrites the `toggleSortOrder`
+// method, in order to remove the default behavior of unsorting a column when
+// the same sorting arrow is pressed twice:
+// https://github.com/ant-design/ant-design/blob/master/components/table/Table.tsx#L348
+export default class BaseTable extends Table {
+  constructor(props) {
+    super(props);
+    Table.prototype.toggleSortOrder = this.toggleSortOrder;
+  }
+
+  toggleSortOrder(order, column) {
+    const newState = {
+      sortOrder: order,
+      sortColumn: column,
+    };
+
+    if (this.getSortOrderColumns().length === 0) {
+      this.setState(newState);
+    }
+
+    const onChange = this.props.onChange;
+    if (onChange) {
+      onChange.apply(null, this.prepareParamsArguments({
+        ...this.state,
+        ...newState,
+      }));
+    }
+  }
+}

web/app/js/components/MetricsTable.jsx

@@ -1,7 +1,8 @@
 import _ from 'lodash';
+import BaseTable from './BaseTable.jsx';
 import { metricToFormatter } from './util/Utils.js';
 import React from 'react';
-import { Table, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
 
 /*
   Table to display Success Rate, Requests and Latency in tabs.
@@ -82,7 +83,7 @@ const columnDefinitions = (sortable = true, resource, ConduitLink) => {
 
 const numericSort = (a, b) => (_.isNil(a) ? -1 : a) - (_.isNil(b) ? -1 : b);
 
-export default class MetricsTable extends React.Component {
+export default class MetricsTable extends BaseTable {
   constructor(props) {
     super(props);
     this.api = this.props.api;
@@ -105,7 +106,7 @@ export default class MetricsTable extends React.Component {
     let tableData = this.preprocessMetrics();
     let columns = _.compact(columnDefinitions(this.props.sortable, resource, this.api.ConduitLink));
 
-    return (<Table
+    return (<BaseTable
       dataSource={tableData}
       columns={columns}
       pagination={false}