diff --git a/CHANGELOG.md b/CHANGELOG.md index b01b5f48a..378c4bce7 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/plugins/applications/src/components/panel/ApplicationsGallery.tsx b/plugins/applications/src/components/panel/ApplicationsGallery.tsx index 7fd09d530..ed2e932d3 100644 --- a/plugins/applications/src/components/panel/ApplicationsGallery.tsx +++ b/plugins/applications/src/components/panel/ApplicationsGallery.tsx @@ -19,7 +19,6 @@ const ApplicationsGallery: React.FunctionComponent = team, }: IApplicationsGalleryProps) => { const times: IPluginTimes = { - time: 'last15Minutes', timeEnd: Math.floor(Date.now() / 1000), timeStart: Math.floor(Date.now() / 1000) - 900, }; diff --git a/plugins/clickhouse/src/components/page/LogsPage.tsx b/plugins/clickhouse/src/components/page/LogsPage.tsx index e482e4cae..19bc8c9b7 100644 --- a/plugins/clickhouse/src/components/page/LogsPage.tsx +++ b/plugins/clickhouse/src/components/page/LogsPage.tsx @@ -36,9 +36,9 @@ const LogsPage: React.FunctionComponent = ({ 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('') : ''}`, }); }; diff --git a/plugins/clickhouse/src/components/page/LogsToolbar.tsx b/plugins/clickhouse/src/components/page/LogsToolbar.tsx index 202db8667..5e2d90bf7 100644 --- a/plugins/clickhouse/src/components/page/LogsToolbar.tsx +++ b/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 = ({ const changeOptions = ( refresh: boolean, additionalFields: IOptionsAdditionalFields[] | undefined, - time: TTime, timeEnd: number, timeStart: number, ): void => { @@ -66,7 +65,7 @@ const LogsToolbar: React.FunctionComponent = ({ fields: fields, order: additionalFields[1].value, orderBy: additionalFields[0].value, - times: { time: time, timeEnd: timeEnd, timeStart: timeStart }, + times: { timeEnd: timeEnd, timeStart: timeStart }, }); } @@ -74,7 +73,7 @@ const LogsToolbar: React.FunctionComponent = ({ ...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 = ({ values: ['ascending', 'descending'], }, ]} - time={data.times.time} timeEnd={data.times.timeEnd} timeStart={data.times.timeStart} setOptions={changeOptions} diff --git a/plugins/clickhouse/src/components/page/VisualizationPage.tsx b/plugins/clickhouse/src/components/page/VisualizationPage.tsx index 00d78fbb0..7da4091c8 100644 --- a/plugins/clickhouse/src/components/page/VisualizationPage.tsx +++ b/plugins/clickhouse/src/components/page/VisualizationPage.tsx @@ -43,7 +43,7 @@ const VisualizationPage: React.FunctionComponent = ({ 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}`, }); }; diff --git a/plugins/clickhouse/src/components/page/VisualizationToolbar.tsx b/plugins/clickhouse/src/components/page/VisualizationToolbar.tsx index ce5b6c06a..057ca664a 100644 --- a/plugins/clickhouse/src/components/page/VisualizationToolbar.tsx +++ b/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 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 - + diff --git a/plugins/clickhouse/src/components/panel/LogsActions.tsx b/plugins/clickhouse/src/components/panel/LogsActions.tsx index c9d7c0983..63b021852 100644 --- a/plugins/clickhouse/src/components/panel/LogsActions.tsx +++ b/plugins/clickhouse/src/components/panel/LogsActions.tsx @@ -35,9 +35,9 @@ export const Actions: React.FunctionComponent = ({ key={index} component={ `&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} diff --git a/plugins/clickhouse/src/components/panel/LogsChart.tsx b/plugins/clickhouse/src/components/panel/LogsChart.tsx index 8b544aa29..6ef9260dd 100644 --- a/plugins/clickhouse/src/components/panel/LogsChart.tsx +++ b/plugins/clickhouse/src/components/panel/LogsChart.tsx @@ -53,7 +53,6 @@ const LogsChart: React.FunctionComponent = ({ 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), }); diff --git a/plugins/core/src/components/misc/Options.tsx b/plugins/core/src/components/misc/Options.tsx index 5e94553c3..df9be4134 100644 --- a/plugins/core/src/components/misc/Options.tsx +++ b/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 = ({ additionalFields, - time, timeEnd, timeStart, setOptions, @@ -148,21 +124,6 @@ export const Options: React.FunctionComponent = ({ // 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 = ({ setOptions( false, additionalFields, - 'custom', Math.floor(parsedTimeEnd.getTime() / 1000), Math.floor(parsedTimeStart.getTime() / 1000), ); @@ -200,7 +160,6 @@ export const Options: React.FunctionComponent = ({ 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 = ({ // 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 = ({ return (