Moving over to a date picker for selecting the range

opensearch_dashboards.json

@@ -1,7 +1,7 @@
 {
   "id": "opniDashboardsPlugin",
-  "version": "0.4.1",
-  "opensearchDashboardsVersion": "1.1.0",
+  "version": "0.4.2",
+  "opensearchDashboardsVersion": "1.3.2",
   "configPath": ["opni_dashboards"],
   "requiredPlugins": [],
   "server": false,

public/components/InsightsChart/InsightsChart.tsx

@@ -44,7 +44,6 @@ export default class InsightsChart extends Component<InsightsChartProps, Insight
   }
 
   componentDidUpdate(prevProps: Readonly<InsightsChartProps>): void {
-    console.log('pr', prevProps, this.props);
     if (this.props.granularity !== prevProps.granularity || !isSameRange(this.props.range, prevProps.range) || this.props.clusterId !== prevProps.clusterId) {
       this.load();
     }

public/components/Selector/Selector.tsx

@@ -6,12 +6,16 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiButton,
+  EuiSuperDatePicker
 } from '@elastic/eui';
 import { Settings } from '@elastic/charts';
 import { Granularity } from '../../utils/time';
 
 export interface Settings {
-  range: number;
+  range: {
+    start: string;
+    end: string;
+  };
   granularity: Granularity;
   cluster: string;
 }
@@ -22,21 +26,6 @@ export interface SelectorProps {
   onRefresh: () => void;
 };
 
-const RANGE_OPTIONS = [
-  {
-    value: 86400000, //ms
-    text: '24h'
-  },
-  {
-    value: 43200000, //ms
-    text: '12h'
-  },
-  {
-    value: 3600000, //ms
-    text: '1h'
-  }
-];
-
 const GRANULARITY_OPTIONS: {text: string, value: Granularity}[] = [
   {
     value: '1h',
@@ -60,7 +49,10 @@ const CLUSTER_OPTIONS = [
 ];
 
 export const DEFAULT_SETTINGS: Settings = {
-  range: RANGE_OPTIONS[0].value,
+  range: {
+    start: 'now-24h',
+    end: 'now'
+  },
   granularity: GRANULARITY_OPTIONS[0].value,
   cluster: CLUSTER_OPTIONS[0].value
 };
@@ -78,16 +70,26 @@ export default class Selector extends Component<SelectorProps> {
   render() {
     const { range, granularity, cluster } = this.props.settings;
     const clusterOptions = [...CLUSTER_OPTIONS, ...this.props.clusterIds.map(id => ({ value: id, text: id}))];
+    const onTimeChange = (newRange) => {
+      this.onChange('range')({start: newRange.start, end: newRange.end});
+      setTimeout(() => this.props.onRefresh());
+    };
+
     return (
       <EuiFlexGroup style={{ padding: '0 15px' }} className="selector" >
         <EuiFlexItem>
           <EuiFlexItem><EuiSelect options={clusterOptions} prepend="Cluster" value={cluster} onChange={this.onChange('cluster')} /></EuiFlexItem>
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiFlexGroup justifyContent="flexEnd" className="right">
-            <EuiFlexItem><EuiSelect options={RANGE_OPTIONS} prepend="Range" value={range} onChange={this.onChange('range', 'number')} /></EuiFlexItem>
             <EuiFlexItem><EuiSelect options={GRANULARITY_OPTIONS} prepend="Period" value={granularity} onChange={this.onChange('granularity')} /></EuiFlexItem>
-            <EuiFlexItem><EuiButton iconType="refresh" onClick={this.props.onRefresh}>Refresh</EuiButton></EuiFlexItem>
+            <EuiFlexItem>
+            <EuiSuperDatePicker
+              start={range.start}
+              end={range.end}
+              onTimeChange={onTimeChange}
+            />
+            </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
       </EuiFlexGroup>

public/pages/Insights/Insights.tsx

@@ -3,13 +3,13 @@ import { CoreConsumer } from '../../utils/CoreContext';
 import InsightsChart from '../../components/InsightsChart';
 import Selector from '../../components/Selector';
 import Breakdowns from '../../components/Breakdowns';
-import moment from 'moment';
 import { DEFAULT_SETTINGS, Settings } from '../../components/Selector/Selector';
-import { roundTime, Range, Granularity } from '../../utils/time';
+import { Range, Granularity } from '../../utils/time';
 import AnomalyChart from '../../components/AnomalyChart';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { getClusterIds } from '../../utils/requests';
 import Loading from '../../components/Loading';
+import dateMath from '@elastic/datemath';
 
 interface MainState {
   settings: Settings,
@@ -28,19 +28,16 @@ class Main extends Component<any, MainState> {
       settings: { ...DEFAULT_SETTINGS },
       clustersRequest: new Promise(() => {}),
       clusters: [],
-      range: this.getAbsoluteRange(),
+      range: this.getAbsoluteRange(DEFAULT_SETTINGS.range),
       granularity: DEFAULT_SETTINGS.granularity,
       cluster: DEFAULT_SETTINGS.cluster
     };
   }
 
-  getAbsoluteRange = (): Range => {
-    const now = moment();
-    const end = roundTime(now, moment.duration(30, 'm'));
-
+  getAbsoluteRange = (range: { start: string; end: string;}): Range => {
     return {
-      start: end.clone().subtract(this.state?.settings.range || DEFAULT_SETTINGS.range, 'ms'),
-      end
+      start: dateMath.parse(range.start),
+      end: dateMath.parse(range.end)
     }
   }
 
@@ -53,8 +50,9 @@ class Main extends Component<any, MainState> {
   }
 
   onRefresh = () => {
+    console.log('goober');
     this.setState({ 
-      range: this.getAbsoluteRange(),
+      range: this.getAbsoluteRange(this.state.settings.range),
       cluster: this.state.settings.cluster,
       granularity: this.state.settings.granularity
     });

public/utils/requests.ts

@@ -129,8 +129,6 @@ export async function getAnomalies(range: Range, granularity: Granularity, clust
   const byComponent: AnomalyByComponent = {};
   const buckets = results.rawResponse?.aggregations?.histogram?.buckets;
 
-  console.log('bbb', buckets);
-
   buckets.forEach(bucket => {
     const timestamp = bucket.key;
     const components = bucket.filtered.buckets.anomaly.component.buckets;