[core] Change options handling

This commit changes the options handling again. In #181 we removed the
time parameter and since then we always showed the absolute time in the
options button. It turned out that this was very unintuitive for users,
so that we re-add the "time" property and show the relative time (e.g.
when a user selects "Last 15 Minutes").

We replaced the Options component with a Toolbar component, so that we
only display one button to trigger the search. Before this we displayed
a refresh button and a search button, which confused users. They didn't
exactly know when to use which button. Now with only one button
displayed we use a similar approach like Grafana, Kibana, etc. that the
time is always refreshed when the time is relative and the user clicks
on the search button.

We also use the current url only to get the initial options for a
component. When the user changes the options, we adjust the url and
directly adjust the options state, instead of using the adjust url to
set the new options.

CHANGELOG.md

@@ -23,6 +23,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 ### Changed
 
 - [#217](https://github.com/kobsio/kobs/pull/217): [azure] Use resource groups to get a list of container instances.
+- [#225](https://github.com/kobsio/kobs/pull/225): [core] :warning: _Breaking change:_ :warning: Change options handling accross all plugins and re-add `time` property.
 
 ## [v0.7.0](https://github.com/kobsio/kobs/releases/tag/v0.7.0) (2021-11-19)
 

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

@@ -19,6 +19,7 @@ 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/azure/src/components/containerinstances/DetailsMetrics.tsx

@@ -20,6 +20,7 @@ const DetailsMetrics: React.FunctionComponent<IDetailsMetricsProps> = ({
   containerGroup,
 }: IDetailsMetricsProps) => {
   const [times, setTimes] = useState<IPluginTimes>({
+    time: 'last15Minutes',
     timeEnd: Math.floor(Date.now() / 1000),
     timeStart: Math.floor(Date.now() / 1000) - 900,
   });

plugins/azure/src/components/costmanagement/ActualCosts.tsx

@@ -64,7 +64,6 @@ const ActualCosts: React.FunctionComponent<IActualCostsProps> = ({ name, timefra
     );
   }
 
-  console.log(data);
   if (!data) {
     return null;
   }

plugins/azure/src/components/kubernetesservices/DetailsMetricsAPIServer.tsx

@@ -20,6 +20,7 @@ const DetailsMetricsAPIServer: React.FunctionComponent<IDetailsMetricsAPIServerP
   managedCluster,
 }: IDetailsMetricsAPIServerProps) => {
   const [times, setTimes] = useState<IPluginTimes>({
+    time: 'last15Minutes',
     timeEnd: Math.floor(Date.now() / 1000),
     timeStart: Math.floor(Date.now() / 1000) - 900,
   });

plugins/azure/src/components/kubernetesservices/DetailsMetricsNode.tsx

@@ -20,6 +20,7 @@ const DetailsMetricsNode: React.FunctionComponent<IDetailsMetricsNodeProps> = ({
   managedCluster,
 }: IDetailsMetricsNodeProps) => {
   const [times, setTimes] = useState<IPluginTimes>({
+    time: 'last15Minutes',
     timeEnd: Math.floor(Date.now() / 1000),
     timeStart: Math.floor(Date.now() / 1000) - 900,
   });

plugins/azure/src/components/kubernetesservices/DetailsMetricsPod.tsx

@@ -20,6 +20,7 @@ const DetailsMetricsPod: React.FunctionComponent<IDetailsMetricsPodProps> = ({
   managedCluster,
 }: IDetailsMetricsPodProps) => {
   const [times, setTimes] = useState<IPluginTimes>({
+    time: 'last15Minutes',
     timeEnd: Math.floor(Date.now() / 1000),
     timeStart: Math.floor(Date.now() / 1000) - 900,
   });

plugins/azure/src/components/metrics/MetricsToolbar.tsx

@@ -1,37 +1,21 @@
-import { Card, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem, ToolbarToggleGroup } from '@patternfly/react-core';
-import { FilterIcon } from '@patternfly/react-icons';
+import { Card } from '@patternfly/react-core';
 import React from 'react';
 
-import { IOptionsAdditionalFields, IPluginTimes, Options } from '@kobsio/plugin-core';
+import { IOptionsAdditionalFields, IPluginTimes, Toolbar } from '@kobsio/plugin-core';
 
 interface IMetricsToolbarProps {
   times: IPluginTimes;
   setTimes: (times: IPluginTimes) => void;
 }
 
 const MetricsToolbar: React.FunctionComponent<IMetricsToolbarProps> = ({ times, setTimes }: IMetricsToolbarProps) => {
+  const changeOptions = (times: IPluginTimes, additionalFields: IOptionsAdditionalFields[] | undefined): void => {
+    setTimes(times);
+  };
+
   return (
     <Card style={{ maxWidth: '100%' }}>
-      <Toolbar id="dashboard-toolbar" style={{ zIndex: 300 }}>
-        <ToolbarContent>
-          <ToolbarToggleGroup style={{ width: '100%' }} toggleIcon={<FilterIcon />} breakpoint="lg">
-            <ToolbarGroup style={{ width: '100%' }}>
-              <ToolbarItem alignment={{ default: 'alignRight' }}>
-                <Options
-                  timeEnd={times.timeEnd}
-                  timeStart={times.timeStart}
-                  setOptions={(
-                    refresh: boolean,
-                    additionalFields: IOptionsAdditionalFields[] | undefined,
-                    timeEnd: number,
-                    timeStart: number,
-                  ): void => setTimes({ timeEnd: timeEnd, timeStart: timeStart })}
-                />
-              </ToolbarItem>
-            </ToolbarGroup>
-          </ToolbarToggleGroup>
-        </ToolbarContent>
-      </Toolbar>
+      <Toolbar times={times} showOptions={true} showSearchButton={false} setOptions={changeOptions} />
     </Card>
   );
 };