ui: removed metric function setDefaultTime

Removed setter the default graph time window based on the age of the older node in the cluster because we have default redux scale. That fixed our problem when we using the time dropdown on the metrics page and clicking on "10m" we get result with "6h" duration.

Resolves: #46145

Release justification: bug fixes and low-risk updates to new functionality

Release note (ui): default timescale on metrics page is always 10m. previously it defaulted to the age of the longest running node

pkg/ui/src/redux/timewindow.ts

@@ -136,10 +136,10 @@ export class TimeWindowState {
   currentWindow: TimeWindow;
   // True if scale has changed since currentWindow was generated.
   scaleChanged: boolean;
-  useTimeRage: boolean;
+  useTimeRange: boolean;
   constructor() {
     this.scale = availableTimeScales["Past 10 Minutes"];
-    this.useTimeRage = false;
+    this.useTimeRange = false;
     this.scaleChanged = false;
   }
 }
@@ -156,16 +156,16 @@ export function timeWindowReducer(state = new TimeWindowState(), action: Action)
       const { payload: data } = action as PayloadAction<TimeWindow>;
       state = _.clone(state);
       state.currentWindow = data;
-      state.useTimeRage = true;
+      state.useTimeRange = true;
       state.scaleChanged = false;
       return state;
     case SET_SCALE:
       const { payload: scale } = action as PayloadAction<TimeScale>;
       state = _.clone(state);
       if (scale.key === "Custom") {
-        state.useTimeRage = true;
+        state.useTimeRange = true;
       } else {
-        state.useTimeRage = false;
+        state.useTimeRange = false;
       }
       state.scale = scale;
       state.scaleChanged = true;

pkg/ui/src/views/app/containers/timewindow/index.tsx

@@ -89,7 +89,7 @@ class TimeWindowManager extends React.Component<TimeWindowManagerProps, TimeWind
    */
   setWindow(props: TimeWindowManagerProps) {
     if (!props.timeWindow.scale.windowEnd) {
-      if (!props.timeWindow.useTimeRage) {
+      if (!props.timeWindow.useTimeRange) {
         const now = props.now ? props.now() : moment();
         props.setTimeWindow({
           start: now.clone().subtract(props.timeWindow.scale.windowSize),

pkg/ui/src/views/cluster/containers/timescale/index.tsx

@@ -15,23 +15,15 @@ import React from "react";
 import { connect } from "react-redux";
 import { RouteComponentProps, withRouter } from "react-router-dom";
 import { refreshNodes } from "src/redux/apiReducers";
-import { LocalSetting } from "src/redux/localsettings";
 import { AdminUIState } from "src/redux/state";
 import * as timewindow from "src/redux/timewindow";
-import { LongToMoment } from "src/util/convert";
 import { INodeStatus } from "src/util/proto";
 import Dropdown, { ArrowDirection, DropdownOption } from "src/views/shared/components/dropdown";
 import TimeFrameControls from "../../components/controls";
 import RangeSelect, { DateTypes } from "../../components/range";
 import "./timescale.styl";
 import { Divider } from "antd";
 
-// Tracks whether the default timescale been set once in the app. Tracked across
-// the entire app so that changing pages doesn't cause it to reset.
-const timescaleDefaultSet = new LocalSetting(
-  "timescale/default_set", (s: AdminUIState) => s.localSettings, false,
-);
-
 interface TimeScaleDropdownProps extends RouteComponentProps {
   currentScale: timewindow.TimeScale;
   currentWindow: timewindow.TimeWindow;
@@ -43,8 +35,6 @@ interface TimeScaleDropdownProps extends RouteComponentProps {
   nodeStatuses: INodeStatus[];
   nodeStatusesValid: boolean;
   // Track whether the default has been set.
-  setDefaultSet: typeof timescaleDefaultSet.set;
-  defaultTimescaleSet: boolean;
   useTimeRange: boolean;
 }
 
@@ -143,27 +133,8 @@ class TimeScaleDropdown extends React.Component<TimeScaleDropdownProps, {}> {
     return timescaleOptions;
   }
 
-  // Sets the default timescale based on the start time of the oldest node.
-  setDefaultTime(props: TimeScaleDropdownProps = this.props) {
-    if (props.nodeStatusesValid && !props.defaultTimescaleSet) {
-      const oldestNode = _.minBy(props.nodeStatuses, (nodeStatus: INodeStatus) => nodeStatus.started_at);
-      const clusterStarted = LongToMoment(oldestNode.started_at);
-      // TODO (maxlang): This uses the longest uptime, not the oldest
-      const clusterDurationHrs = moment.utc().diff(clusterStarted, "hours");
-      if (clusterDurationHrs > 1) {
-        if (clusterDurationHrs < 6) {
-          props.setTimeScale(props.availableScales["Past 1 Hour"]);
-        } else if (clusterDurationHrs < 12) {
-          props.setTimeScale(props.availableScales["Past 6 Hours"]);
-        }
-      }
-      props.setDefaultSet(true);
-    }
-  }
-
   componentDidMount() {
     this.props.refreshNodes();
-    this.setDefaultTime();
     this.getQueryParams();
   }
 
@@ -191,8 +162,6 @@ class TimeScaleDropdown extends React.Component<TimeScaleDropdownProps, {}> {
   componentDidUpdate() {
     if (!this.props.nodeStatusesValid) {
       this.props.refreshNodes();
-    } else if (!this.props.useTimeRange) {
-      this.setDefaultTime(this.props);
     }
   }
 
@@ -326,14 +295,12 @@ export default withRouter(connect(
       currentScale: (state.timewindow as timewindow.TimeWindowState).scale,
       currentWindow: (state.timewindow as timewindow.TimeWindowState).currentWindow,
       availableScales: timewindow.availableTimeScales,
-      useTimeRange: state.timewindow.useTimeRage,
-      defaultTimescaleSet: timescaleDefaultSet.selector(state),
+      useTimeRange: state.timewindow.useTimeRange,
     };
   },
   {
     setTimeScale: timewindow.setTimeScale,
     setTimeRange: timewindow.setTimeRange,
     refreshNodes: refreshNodes,
-    setDefaultSet: timescaleDefaultSet.set,
   },
 )(TimeScaleDropdown));