[Enhancement]: Add support for custom filter

package.json

@@ -65,7 +65,9 @@
     "redux-logger": "2.7.4",
     "redux-thunk": "2.3.0",
     "taffydb": "^2.7.3",
-    "whatwg-fetch": "2.0.2"
+    "whatwg-fetch": "2.0.2",
+    "rc-time-picker": "^3.4.0",
+    "react-day-picker": "^7.2.4"
   },
   "scripts": {
     "start": "node scripts/alias; react-scripts start",

src/components/App/redux/actions.js

@@ -8,6 +8,7 @@ export const ActionTypes = {
     ACTION_NAV_BAR_HAS_LINKS: "ACTION_NAV_BAR_HAS_LINKS",
     ACTION_UPDATE_HEADER_COLOR: "ACTION_UPDATE_HEADER_COLOR",
     ACTION_UPDATE_PAGE: "ACTION_UPDATE_PAGE",
+    ACTION_UPDATE_CUSTOM_FILTER: "ACTION_UPDATE_CUSTOM_FILTER",
 };
 
 export const ActionKeyStore = {
@@ -18,7 +19,8 @@ export const ActionKeyStore = {
     VISUALIZATION_TYPE: "visualizationType",
     HEADERCOLOR: "headerColor",
     UPDATEPAGE: "updatePage",
-    FILTER_CONTEXT: "filterContext"
+    FILTER_CONTEXT: "filterContext",
+    CUSTOM_FILTER: "CUSTOM_FILTER",
 };
 
 
@@ -80,4 +82,12 @@ export const Actions = {
             id: id
         }
     },
+
+    setCustomFilterContext: (customFilter) => {
+        return {
+            type: ActionTypes.ACTION_UPDATE_CUSTOM_FILTER,
+            customFilter: customFilter
+        }
+    },
+
 };

src/components/App/redux/reducer.js

@@ -1,6 +1,6 @@
 import { Map } from "immutable";
 import { ActionTypes, ActionKeyStore } from "./actions"
-
+import _object from 'lodash/object';
 
 let initialState = Map(); // eslint-disable-line
 initialState = initialState.set(ActionKeyStore.MAIN_MENU_OPENED, false);
@@ -11,6 +11,7 @@ initialState = initialState.set(ActionKeyStore.FILTER_CONTEXT, {});
 initialState = initialState.set(ActionKeyStore.HASLINKS, false);
 initialState = initialState.set(ActionKeyStore.HEADERCOLOR, Map());
 initialState = initialState.set(ActionKeyStore.UPDATEPAGE, "");
+initialState = initialState.set(ActionKeyStore.CUSTOM_FILTER, {});
 
 function toggleMainMenu(state) {
     return state.set(ActionKeyStore.MAIN_MENU_OPENED,  !state.get(ActionKeyStore.MAIN_MENU_OPENED));
@@ -24,6 +25,10 @@ function setTitleIcon(state, aTitleIcon) {
     return state.set(ActionKeyStore.NAV_BAR_TITLE_ICON,  aTitleIcon);
 }
 
+function setCustomFilterContext(state, aFilter) {
+    return state.set(ActionKeyStore.CUSTOM_FILTER, aFilter);  
+}
+
 function updateContext(state, aContext) {
     let currentContext = state.get(ActionKeyStore.CONTEXT);
     return state.set(ActionKeyStore.CONTEXT,  Object.assign({}, currentContext, aContext));
@@ -65,6 +70,9 @@ function interfaceReducer(state = initialState, action) {
         case ActionTypes.ACTION_UPDATE_CONTEXT:
             return updateContext(state, action.context);
 
+        case ActionTypes.ACTION_UPDATE_CUSTOM_FILTER:
+            return setCustomFilterContext(state, action.customFilter);
+
         case ActionTypes.ACTION_FILTER_CONTEXT:
             return filterContext(state, action.context);
 

src/components/Dashboard/default.js

@@ -46,6 +46,10 @@ export const defaultFilterOptions = {
                     "unit": "d",
                     "duration": "7"
                 }
+            },
+            {
+              "label": "Custom Time",
+              "value": "custom",
             }
         ]
     },

src/components/Dashboard/index.js

@@ -108,20 +108,33 @@ export class DashboardView extends React.Component {
         const {
             configuration,
             context,
-            filterContext
+            filterContext,
+            customFilterContent,
         } = this.props;
 
         const links = configuration.get("links");
         if (!links || links.count() === 0)
             return;
 
         const currentUrl = window.location.pathname;
-        let contextWithFilter = Object.assign({}, context, filterContext)
 
         return (
             <div style={style.navigationContainer}>
                 <ul className="list-inline" style={style.linksList}>
                     {links.map((link, index) => {
+                        let dId = link.toJS().url.split('dashboards/')[1];
+                        let contextWithFilter = {};
+                        if(filterContext[dId]) {
+                          if(customFilterContent[dId]) {
+                            contextWithFilter = Object.assign({}, filterContext[dId], customFilterContent[dId])
+                          }
+                          else {
+                            contextWithFilter = {...filterContext[dId]}
+                          }
+                        }
+                        else {
+                          contextWithFilter = Object.assign({}, context)
+                        }
 
                         let targetURL = process.env.PUBLIC_URL + link.get("url");
                         let highlight = currentUrl === link.get("url") ? style.activeLink : style.link;
@@ -188,7 +201,7 @@ export class DashboardView extends React.Component {
                 <div>
                     {this.renderNavigationBarIfNeeded()}
 
-                    <FiltersToolBar filterOptions={filterOptions} />
+                    <FiltersToolBar filterOptions={filterOptions} dashboardId={configuration.toJS().id} />
                     <div style={style.gridContainer}>
                         <ResponsiveReactGridLayout
                             rowHeight={10}
@@ -228,6 +241,8 @@ const mapStateToProps = (state, ownProps) => ({
 
     filterContext: state.interface.get(InterfaceActionKeyStore.FILTER_CONTEXT),
 
+    customFilterContent: state.interface.get(InterfaceActionKeyStore.CUSTOM_FILTER),
+
     configuration: state.configurations.getIn([
         ConfigurationsActionKeyStore.DASHBOARDS,
         ownProps.match.params.id,

src/components/FiltersToolBar/CustomFilter.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import moment from 'moment/moment';
+
+import { DateTimePicker } from '../../ui-components';
+import objectPath from 'object-path';
+
+export default class CustomFilter extends React.Component {
+
+    formatSelectedDateTime = (startDate, endDate) => {
+        const currentTimestamp = new Date().getTime() / 1000;
+        const startTimeDiff = Math.round((currentTimestamp - startDate) / 60);
+        const endTimeDiff = Math.round((currentTimestamp - endDate) / 60);
+
+        return {
+            startTime: `now-${startTimeDiff}m`,
+            endTime: `now-${endTimeDiff}m`
+        };
+    }
+
+    handleSubmit = (props) => {
+        const {
+            startDate,
+            endDate,
+            startTime,
+            endTime,
+            interval
+        } = props;
+
+        const startDateTime = moment(startDate.toISOString().split('T')[0] + " " + startTime.format('HH:mm')).format();
+        const endDateTime = moment(endDate.toISOString().split('T')[0] + " " + endTime.format('HH:mm')).format();
+        const fromDate = new Date(startDateTime);
+        const toDate = new Date(endDateTime);
+        const customFilters = this.formatSelectedDateTime(
+            Math.round(fromDate.getTime() / 1000),
+            Math.round(toDate.getTime() / 1000)
+        );
+
+        this.props.resetCustomFilter({
+            startTime: objectPath.get(customFilters, 'startTime') || null,
+            endTime: objectPath.get(customFilters, 'endTime') || null,
+            interval: interval,
+            formatStartTime: `${fromDate.toLocaleDateString()} ${fromDate.getHours()}:${fromDate.getMinutes()}`,
+            formatEndTime: `${toDate.toLocaleDateString()} ${toDate.getHours()}:${toDate.getMinutes()}`
+        });
+    }
+
+    toggleModal = () => {
+        this.props.resetCustomFilter();
+    }
+
+    render() {
+        return (
+            <div>
+                <DateTimePicker
+                    showTime={true}
+                    showInterval={true}
+                    onHandleSubmit={this.handleSubmit}
+                    onToggleModal={this.toggleModal}
+                />
+            </div>
+        );
+    }
+}