[core] Make time selection more intuitive

CHANGELOG.md

@@ -19,6 +19,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 ### Changed
 
 - [#179](https://github.com/kobsio/kobs/pull/179): [clickhouse] Add sorting and show milliseconds in time column.
+- [#181](https://github.com/kobsio/kobs/pull/181): :warning: _Breaking change:_ :warning: [core] Make the time selection across all plugins more intuitive. For that we removed the `time` property from the Options component and showing the formatted timestamp instead.
 
 ## [v0.6.0](https://github.com/kobsio/kobs/releases/tag/v0.6.0) (2021-10-11)
 

plugins/applications/src/components/panel/ApplicationsGallery.tsx

@@ -19,7 +19,6 @@ const ApplicationsGallery: React.FunctionComponent<IApplicationsGalleryProps> =
   team,
 }: IApplicationsGalleryProps) => {
   const times: IPluginTimes = {
-    time: 'last15Minutes',
     timeEnd: Math.floor(Date.now() / 1000),
     timeStart: Math.floor(Date.now() / 1000) - 900,
   };

plugins/clickhouse/src/components/page/LogsPage.tsx

@@ -36,9 +36,9 @@ const LogsPage: React.FunctionComponent<ILogsPageProps> = ({ name, displayName,
 
     history.push({
       pathname: location.pathname,
-      search: `?query=${encodeURIComponent(opts.query)}&order=${opts.order}&orderBy=${opts.orderBy}&time=${
-        opts.times.time
-      }&timeEnd=${opts.times.timeEnd}&timeStart=${opts.times.timeStart}${fields.length > 0 ? fields.join('') : ''}`,
+      search: `?query=${encodeURIComponent(opts.query)}&order=${opts.order}&orderBy=${opts.orderBy}&timeEnd=${
+        opts.times.timeEnd
+      }&timeStart=${opts.times.timeStart}${fields.length > 0 ? fields.join('') : ''}`,
     });
   };
 

plugins/clickhouse/src/components/page/LogsToolbar.tsx

@@ -11,7 +11,7 @@ import {
 import { FilterIcon, SearchIcon } from '@patternfly/react-icons';
 import React, { useEffect, useState } from 'react';
 
-import { IOptionsAdditionalFields, Options, TTime } from '@kobsio/plugin-core';
+import { IOptionsAdditionalFields, Options } from '@kobsio/plugin-core';
 import { IOptions } from '../../utils/interfaces';
 
 interface ILogsToolbarProps extends IOptions {
@@ -53,7 +53,6 @@ const LogsToolbar: React.FunctionComponent<ILogsToolbarProps> = ({
   const changeOptions = (
     refresh: boolean,
     additionalFields: IOptionsAdditionalFields[] | undefined,
-    time: TTime,
     timeEnd: number,
     timeStart: number,
   ): void => {
@@ -66,15 +65,15 @@ const LogsToolbar: React.FunctionComponent<ILogsToolbarProps> = ({
           fields: fields,
           order: additionalFields[1].value,
           orderBy: additionalFields[0].value,
-          times: { time: time, timeEnd: timeEnd, timeStart: timeStart },
+          times: { timeEnd: timeEnd, timeStart: timeStart },
         });
       }
 
       setData({
         ...tmpData,
         order: additionalFields[1].value,
         orderBy: additionalFields[0].value,
-        times: { time: time, timeEnd: timeEnd, timeStart: timeStart },
+        times: { timeEnd: timeEnd, timeStart: timeStart },
       });
     }
   };
@@ -110,7 +109,6 @@ const LogsToolbar: React.FunctionComponent<ILogsToolbarProps> = ({
                     values: ['ascending', 'descending'],
                   },
                 ]}
-                time={data.times.time}
                 timeEnd={data.times.timeEnd}
                 timeStart={data.times.timeStart}
                 setOptions={changeOptions}

plugins/clickhouse/src/components/page/VisualizationPage.tsx

@@ -43,7 +43,7 @@ const VisualizationPage: React.FunctionComponent<IVisualizationPageProps> = ({
   const changeOptions = (): void => {
     history.push({
       pathname: location.pathname,
-      search: `?query=${tmpOptions.query}&time=${tmpOptions.times.time}&timeEnd=${tmpOptions.times.timeEnd}&timeStart=${tmpOptions.times.timeStart}&chart=${tmpOptions.chart}&limit=${tmpOptions.limit}&groupBy=${tmpOptions.groupBy}&operation=${tmpOptions.operation}&operationField=${tmpOptions.operationField}&order=${tmpOptions.order}`,
+      search: `?query=${tmpOptions.query}&timeEnd=${tmpOptions.times.timeEnd}&timeStart=${tmpOptions.times.timeStart}&chart=${tmpOptions.chart}&limit=${tmpOptions.limit}&groupBy=${tmpOptions.groupBy}&operation=${tmpOptions.operation}&operationField=${tmpOptions.operationField}&order=${tmpOptions.order}`,
     });
   };
 

plugins/clickhouse/src/components/page/VisualizationToolbar.tsx

@@ -9,7 +9,7 @@ import {
 import { FilterIcon } from '@patternfly/react-icons';
 import React from 'react';
 
-import { IOptionsAdditionalFields, Options, TTime } from '@kobsio/plugin-core';
+import { IOptionsAdditionalFields, Options } from '@kobsio/plugin-core';
 import { IVisualizationOptions } from '../../utils/interfaces';
 
 interface IVisualizationToolbarProps {
@@ -31,11 +31,10 @@ const VisualizationToolbar: React.FunctionComponent<IVisualizationToolbarProps>
   const changeOptions = (
     refresh: boolean,
     additionalFields: IOptionsAdditionalFields[] | undefined,
-    time: TTime,
     timeEnd: number,
     timeStart: number,
   ): void => {
-    setOptions({ ...options, times: { time: time, timeEnd: timeEnd, timeStart: timeStart } });
+    setOptions({ ...options, times: { timeEnd: timeEnd, timeStart: timeStart } });
   };
 
   return (
@@ -47,12 +46,7 @@ const VisualizationToolbar: React.FunctionComponent<IVisualizationToolbarProps>
               <TextInput aria-label="Query" type="text" value={options.query} onChange={changeQuery} />
             </ToolbarItem>
             <ToolbarItem>
-              <Options
-                time={options.times.time}
-                timeEnd={options.times.timeEnd}
-                timeStart={options.times.timeStart}
-                setOptions={changeOptions}
-              />
+              <Options timeEnd={options.times.timeEnd} timeStart={options.times.timeStart} setOptions={changeOptions} />
             </ToolbarItem>
           </ToolbarGroup>
         </ToolbarToggleGroup>

plugins/clickhouse/src/components/panel/LogsActions.tsx

@@ -35,9 +35,9 @@ export const Actions: React.FunctionComponent<IActionsProps> = ({
               key={index}
               component={
                 <Link
-                  to={`/${name}?time=${times.time}&timeEnd=${times.timeEnd}&timeStart=${times.timeStart}&query=${
-                    query.query
-                  }${query.fields ? query.fields.map((field) => `&field=${field}`).join('') : ''}`}
+                  to={`/${name}?timeEnd=${times.timeEnd}&timeStart=${times.timeStart}&query=${query.query}${
+                    query.fields ? query.fields.map((field) => `&field=${field}`).join('') : ''
+                  }`}
                 >
                   {query.name}
                 </Link>

plugins/clickhouse/src/components/panel/LogsChart.tsx

@@ -53,7 +53,6 @@ const LogsChart: React.FunctionComponent<ILogsChartProps> = ({ buckets, changeTi
             onBrushDomainChangeEnd={(domain: IDomain): void => {
               if (changeTime && domain.x.length === 2) {
                 changeTime({
-                  time: 'custom',
                   timeEnd: Math.floor(domain.x[1].getTime() / 1000),
                   timeStart: Math.floor(domain.x[0].getTime() / 1000),
                 });

plugins/core/src/components/misc/Options.tsx

@@ -36,8 +36,7 @@ export interface IOptionsAdditionalFields {
 // TTime is the type with all possible values for the time property. A value of "custom" identifies that a user
 // specified a custom start and end time via the text input fields. The other values are used for the quick select
 // options.
-export type TTime =
-  | 'custom'
+type TTime =
   | 'last12Hours'
   | 'last15Minutes'
   | 'last1Day'
@@ -53,26 +52,6 @@ export type TTime =
   | 'last7Days'
   | 'last90Days';
 
-// TTimeOptions is an array with all available type for TTime. It is used to verify that the value of a string is an
-//valid option for the TTime type.
-export const TTimeOptions = [
-  'custom',
-  'last12Hours',
-  'last15Minutes',
-  'last1Day',
-  'last1Hour',
-  'last1Year',
-  'last2Days',
-  'last30Days',
-  'last30Minutes',
-  'last3Hours',
-  'last5Minutes',
-  'last6Hours',
-  'last6Months',
-  'last7Days',
-  'last90Days',
-];
-
 // ITime is the interface for a time in the times map. It contains a label which should be displayed in the Options
 // component and the seconds between the start and the end time.
 interface ITime {
@@ -110,13 +89,11 @@ const times: ITimes = {
 // properties in the parent component.
 interface IOptionsProps {
   additionalFields?: IOptionsAdditionalFields[];
-  time: TTime;
   timeEnd: number;
   timeStart: number;
   setOptions: (
     refresh: boolean,
     additionalFields: IOptionsAdditionalFields[] | undefined,
-    time: TTime,
     timeEnd: number,
     timeStart: number,
   ) => void;
@@ -130,7 +107,6 @@ interface IOptionsProps {
 // second button can be used to refresh the start and end time for the current selection.
 export const Options: React.FunctionComponent<IOptionsProps> = ({
   additionalFields,
-  time,
   timeEnd,
   timeStart,
   setOptions,
@@ -148,21 +124,6 @@ export const Options: React.FunctionComponent<IOptionsProps> = ({
   // change the start and end time to the new values. If the string couldn't be parsed, the user will see an error below
   // the corresponding input field.
   const apply = (): void => {
-    // If the time wasn't changed by the user, we keep the selected time interval and only refresh the time for the
-    // selected interval and change the additional fields. This allows a user to adjust an additional field without
-    // switching to a custom time interval.
-    if (customTimeEnd === formatTime(timeEnd) && customTimeStart === formatTime(timeStart) && time !== 'custom') {
-      setOptions(
-        false,
-        additionalFields,
-        time,
-        Math.floor(Date.now() / 1000),
-        Math.floor(Date.now() / 1000) - times[time].seconds,
-      );
-      setShow(false);
-      return;
-    }
-
     // Get a new date object for the users current timezone. This allows us to ignore the timezone, while parsing the
     // provided time string. The parsed date object will be in UTC, to transform the parsed date into the users timezone
     // we have to add the minutes between UTC and the users timezon (getTimezoneOffset()).
@@ -186,7 +147,6 @@ export const Options: React.FunctionComponent<IOptionsProps> = ({
       setOptions(
         false,
         additionalFields,
-        'custom',
         Math.floor(parsedTimeEnd.getTime() / 1000),
         Math.floor(parsedTimeStart.getTime() / 1000),
       );
@@ -200,7 +160,6 @@ export const Options: React.FunctionComponent<IOptionsProps> = ({
     setOptions(
       false,
       additionalFields,
-      t,
       Math.floor(Date.now() / 1000),
       Math.floor(Date.now() / 1000) - times[t].seconds,
     );
@@ -219,15 +178,12 @@ export const Options: React.FunctionComponent<IOptionsProps> = ({
   // refreshTimes is used to refresh the start and end time, when the user selected a time range from the quick
   // selection list.
   const refreshTimes = (): void => {
-    if (time !== 'custom') {
-      setOptions(
-        true,
-        additionalFields,
-        time,
-        Math.floor(Date.now() / 1000),
-        Math.floor(Date.now() / 1000) - times[time].seconds,
-      );
-    }
+    setOptions(
+      true,
+      additionalFields,
+      Math.floor(Date.now() / 1000),
+      Math.floor(Date.now() / 1000) - (timeEnd - timeStart),
+    );
   };
 
   // useEffect is used to update the UI, every time a property changes.
@@ -240,7 +196,7 @@ export const Options: React.FunctionComponent<IOptionsProps> = ({
   return (
     <React.Fragment>
       <Button variant={ButtonVariant.control} onClick={(): void => setShow(true)}>
-        {time === 'custom' ? `${formatTime(timeStart)} to ${formatTime(timeEnd)}` : times[time].label}
+        {formatTime(timeStart)} to {formatTime(timeEnd)}
       </Button>
 
       <Button variant={ButtonVariant.control} onClick={refreshTimes}>

plugins/core/src/context/PluginsContext.tsx

@@ -2,8 +2,6 @@ import { Alert, AlertActionLink, AlertVariant, Spinner } from '@patternfly/react
 import { QueryObserverResult, useQuery } from 'react-query';
 import React from 'react';
 
-import { TTime } from '../components/misc/Options';
-
 // IPluginDefaults is the interface which is used for the default property of the plugin panel components. This is
 // required, so that a user must not define a cluster or namespace in a plugin. Instead we will use the cluster or
 // namespace of the parent team or application.
@@ -17,7 +15,6 @@ export interface IPluginDefaults {
 // only data for a selected time range in a plugin. For example the Prometheus uses these properties to show only
 // metrics for the selected time range.
 export interface IPluginTimes {
-  time: TTime;
   timeEnd: number;
   timeStart: number;
 }

plugins/core/src/utils/time.ts

@@ -1,4 +1,3 @@
-import { TTime, TTimeOptions } from '../components/misc/Options';
 import { IPluginTimes } from '../context/PluginsContext';
 
 // timeDifference calculates the difference of two given timestamps and returns a human readable string for the
@@ -34,17 +33,11 @@ export const formatTime = (timestamp: number): string => {
 
 // getTimeParams returns a times object for the parsed time parameters from a URL.
 export const getTimeParams = (params: URLSearchParams): IPluginTimes => {
-  const time = params.get('time');
   const timeEnd = params.get('timeEnd');
   const timeStart = params.get('timeStart');
 
   return {
-    time: time && TTimeOptions.includes(time) ? (time as TTime) : 'last15Minutes',
-    timeEnd:
-      time && TTimeOptions.includes(time) && timeEnd ? parseInt(timeEnd as string) : Math.floor(Date.now() / 1000),
-    timeStart:
-      time && TTimeOptions.includes(time) && timeStart
-        ? parseInt(timeStart as string)
-        : Math.floor(Date.now() / 1000) - 900,
+    timeEnd: timeEnd ? parseInt(timeEnd as string) : Math.floor(Date.now() / 1000),
+    timeStart: timeStart ? parseInt(timeStart as string) : Math.floor(Date.now() / 1000) - 900,
   };
 };

plugins/dashboards/src/components/dashboards/Dashboard.tsx

@@ -45,7 +45,6 @@ const Dashboard: React.FunctionComponent<IDashboardProps> = ({
   // times is the state for the users selected time. The default value will always be the last 15 minutes. This is
   // required for some plugins (e.g. the Prometheus plugin), which making use of a time range.
   const [times, setTimes] = useState<IPluginTimes>({
-    time: 'last15Minutes',
     timeEnd: Math.floor(Date.now() / 1000),
     timeStart: Math.floor(Date.now() / 1000) - 900,
   });

plugins/dashboards/src/components/dashboards/DashboardToolbar.tsx

@@ -2,7 +2,7 @@ import { Card, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem, ToolbarToggle
 import { FilterIcon } from '@patternfly/react-icons';
 import React from 'react';
 
-import { IOptionsAdditionalFields, IPluginTimes, Options, TTime } from '@kobsio/plugin-core';
+import { IOptionsAdditionalFields, IPluginTimes, Options } from '@kobsio/plugin-core';
 import DashboardToolbarVariable from './DashboardToolbarVariable';
 import { IVariableValues } from '../../utils/interfaces';
 
@@ -48,16 +48,14 @@ const DashboardToolbar: React.FunctionComponent<IDashboardToolbarProps> = ({
             <ToolbarGroup style={{ width: '100%' }}>
               <ToolbarItem alignment={{ default: 'alignRight' }}>
                 <Options
-                  time={times.time}
                   timeEnd={times.timeEnd}
                   timeStart={times.timeStart}
                   setOptions={(
                     refresh: boolean,
                     additionalFields: IOptionsAdditionalFields[] | undefined,
-                    time: TTime,
                     timeEnd: number,
                     timeStart: number,
-                  ): void => setTimes({ time: time, timeEnd: timeEnd, timeStart: timeStart })}
+                  ): void => setTimes({ timeEnd: timeEnd, timeStart: timeStart })}
                 />
               </ToolbarItem>
             </ToolbarGroup>

plugins/elasticsearch/src/components/page/Page.tsx

@@ -27,9 +27,9 @@ const Page: React.FunctionComponent<IPluginPageProps> = ({ name, displayName, de
 
     history.push({
       pathname: location.pathname,
-      search: `?query=${opts.query}&time=${opts.times.time}&timeEnd=${opts.times.timeEnd}&timeStart=${
-        opts.times.timeStart
-      }${fields.length > 0 ? fields.join('') : ''}`,
+      search: `?query=${opts.query}&timeEnd=${opts.times.timeEnd}&timeStart=${opts.times.timeStart}${
+        fields.length > 0 ? fields.join('') : ''
+      }`,
     });
   };