fix: [OS-50] Fix reservation list UI performance issues (#332)

* fix connection list slow fetch times and set default phase option to reserved

* Add array length check

* Refactor function

frontend/src/main/js/components/connectionsList.js

@@ -105,6 +105,13 @@ class VlansFormatter extends Component {
 @inject("controlsStore", "connsStore", "mapStore", "modalStore", "commonStore")
 @observer
 class ConnectionsList extends Component {
+    constructor() {
+        super();
+        this.state = {
+            loading: true
+        };
+    }
+
     componentWillMount() {
         this.updateList();
     }
@@ -120,32 +127,70 @@ class ConnectionsList extends Component {
         { delay: 1000 }
     );
 
+    // Whenever the table model changes, or the user sorts or changes pages,
+    // this method gets called and passed the current table model.
+    fetchData = (state, instance) => {
+        this.setState({ loading: true });
+
+        this.props.connsStore.setFilter({
+            sizePerPage: state.pageSize,
+            page: state.page,
+            filtered: state.filtered
+        });
+
+        this.updateList();
+    };
+
+    filterData = (filter, filtered) => {
+        if (filtered.length > 0) {
+            for (let key in filtered) {
+                let itemKey = filtered[key]["id"];
+                let itemValue = filtered[key]["value"];
+
+                if (itemKey === "ports") {
+                    filter[itemKey] = [itemValue];
+                } else if (itemKey === "fixtures") {
+                    filter["vlans"] = [itemValue];
+                } else if (itemKey === "phase") {
+                    filter[itemKey] = itemValue.toLocaleUpperCase();
+                } else {
+                    filter[itemKey] = itemValue;
+                }
+            }
+        }
+        return filter;
+    };
+
     updateList = () => {
         let csFilter = this.props.connsStore.filter;
         let filter = {};
         csFilter.criteria.map(c => {
             filter[c] = this.props.connsStore.filter[c];
         });
 
-        // Setting the sizePerPage to -1 returns us the entire connection list
-        filter.page = csFilter.page;
-        filter.sizePerPage = -1;
-        filter.phase = "ANY";
+        filter.page = csFilter.page + 1;
+        filter.sizePerPage = csFilter.sizePerPage;
+        filter.phase = csFilter.phase;
+
+        // If any filters are applied, apply the filter here
+        filter = this.filterData(filter, csFilter.filtered);
 
         myClient.submit("POST", "/api/conn/list", filter).then(
             successResponse => {
                 let result = JSON.parse(successResponse);
                 let conns = result.connections;
 
                 this.props.connsStore.setFilter({
-                    totalSize: result.totalSize
+                    totalPages: Math.ceil(result.totalSize / result.sizePerPage)
                 });
 
                 conns.map(conn => {
                     transformer.fixSerialization(conn);
                 });
 
                 this.props.connsStore.updateList(conns);
+
+                this.setState({ loading: false });
             },
             failResponse => {
                 this.props.commonStore.addAlert({
@@ -234,7 +279,7 @@ class ConnectionsList extends Component {
                 <select
                     onChange={event => onChange(event.target.value)}
                     style={{ width: "100%" }}
-                    value={filter ? filter.value : "any"}
+                    value={filter ? filter.value : "reserved"}
                 >
                     <option value="any">Any</option>
                     <option value="reserved">Reserved</option>
@@ -333,6 +378,7 @@ class ConnectionsList extends Component {
     render() {
         let cs = this.props.connsStore;
         const format = "Y/MM/DD HH:mm";
+        const { loading } = this.state;
 
         let rows = [];
 
@@ -368,6 +414,10 @@ class ConnectionsList extends Component {
 
         return (
             <ReactTable
+                manual
+                pages={cs.filter.totalPages}
+                loading={loading}
+                onFetchData={this.fetchData}
                 data={rows}
                 columns={this.columns}
                 filterable

frontend/src/main/js/stores/connsStore.js

@@ -128,8 +128,9 @@ class ConnectionsStore {
         phase: "RESERVED",
         state: "ACTIVE",
         sizePerPage: 5,
-        page: 1,
-        totalSize: 0
+        page: 0,
+        totalPages: 1,
+        filtered: []
     };
 
     @action setParamsForEditSchedule(params) {