feat(slo): store search state in url

x-pack/plugins/observability/public/components/burn_rate_rule_editor/burn_rate_rule_editor.tsx

@@ -31,7 +31,7 @@ type Props = Pick<
 
 export function BurnRateRuleEditor(props: Props) {
   const { setRuleParams, ruleParams, errors } = props;
-  const { isLoading: loadingInitialSlo, slo: initialSlo } = useFetchSloDetails({
+  const { isLoading: loadingInitialSlo, data: initialSlo } = useFetchSloDetails({
     sloId: ruleParams?.sloId,
   });
 

x-pack/plugins/observability/public/embeddable/slo/overview/slo_overview.tsx

@@ -26,7 +26,12 @@ export function SloOverview({ sloId, sloInstanceId, lastReloadRequestTime }: Emb
     application: { navigateToUrl },
     http: { basePath },
   } = useKibana().services;
-  const { isLoading, slo, refetch, isRefetching } = useFetchSloDetails({
+  const {
+    isLoading,
+    data: slo,
+    refetch,
+    isRefetching,
+  } = useFetchSloDetails({
     sloId,
     instanceId: sloInstanceId,
   });

x-pack/plugins/observability/public/embeddable/slo/overview/slo_selector.tsx

@@ -26,7 +26,11 @@ export function SloSelector({ initialSlo, onSelected, hasError }: Props) {
   const [options, setOptions] = useState<Array<EuiComboBoxOptionOption<string>>>([]);
   const [selectedOptions, setSelectedOptions] = useState<Array<EuiComboBoxOptionOption<string>>>();
   const [searchValue, setSearchValue] = useState<string>('');
-  const { isInitialLoading, isLoading, sloList } = useFetchSloList({
+  const {
+    isInitialLoading,
+    isLoading,
+    data: sloList,
+  } = useFetchSloList({
     kqlQuery: `slo.name: ${searchValue.replaceAll(' ', '*')}*`,
   });
 

x-pack/plugins/observability/public/hooks/slo/__storybook_mocks__/use_fetch_slo_list.ts

@@ -15,7 +15,7 @@ export const useFetchSloList = (): UseFetchSloListResponse => {
     isRefetching: false,
     isError: false,
     isSuccess: true,
-    sloList,
+    data: sloList,
     refetch: function () {} as UseFetchSloListResponse['refetch'],
   };
 };

x-pack/plugins/observability/public/hooks/slo/use_fetch_slo_details.ts

@@ -5,13 +5,13 @@
  * 2.0.
  */
 
+import { ALL_VALUE, GetSLOResponse } from '@kbn/slo-schema';
 import {
   QueryObserverResult,
   RefetchOptions,
   RefetchQueryFilters,
   useQuery,
 } from '@tanstack/react-query';
-import { ALL_VALUE, GetSLOResponse, SLOWithSummaryResponse } from '@kbn/slo-schema';
 import { useKibana } from '../../utils/kibana_react';
 import { sloKeys } from './query_key_factory';
 
@@ -21,7 +21,7 @@ export interface UseFetchSloDetailsResponse {
   isRefetching: boolean;
   isSuccess: boolean;
   isError: boolean;
-  slo: SLOWithSummaryResponse | undefined;
+  data: GetSLOResponse | undefined;
   refetch: <TPageData>(
     options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined
   ) => Promise<QueryObserverResult<GetSLOResponse | undefined, unknown>>;
@@ -65,7 +65,7 @@ export function useFetchSloDetails({
   );
 
   return {
-    slo: data,
+    data,
     isLoading,
     isInitialLoading,
     isRefetching,

x-pack/plugins/observability/public/hooks/slo/use_fetch_slo_list.ts

@@ -33,7 +33,7 @@ export interface UseFetchSloListResponse {
   isRefetching: boolean;
   isSuccess: boolean;
   isError: boolean;
-  sloList: FindSLOResponse | undefined;
+  data: FindSLOResponse | undefined;
   refetch: <TPageData>(
     options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined
   ) => Promise<QueryObserverResult<FindSLOResponse | undefined, unknown>>;
@@ -48,16 +48,13 @@ export function useFetchSloList({
   sortBy = 'status',
   sortDirection = 'desc',
   shouldRefetch,
-}: SLOListParams | undefined = {}): UseFetchSloListResponse {
+}: SLOListParams = {}): UseFetchSloListResponse {
   const {
     http,
     notifications: { toasts },
   } = useKibana().services;
   const queryClient = useQueryClient();
-
-  const [stateRefetchInterval, setStateRefetchInterval] = useState<number | undefined>(
-    SHORT_REFETCH_INTERVAL
-  );
+  const [stateRefetchInterval, setStateRefetchInterval] = useState<number>(SHORT_REFETCH_INTERVAL);
 
   const { isInitialLoading, isLoading, isError, isSuccess, isRefetching, data, refetch } = useQuery(
     {
@@ -115,7 +112,7 @@ export function useFetchSloList({
   );
 
   return {
-    sloList: data,
+    data,
     isInitialLoading,
     isLoading,
     isRefetching,

x-pack/plugins/observability/public/pages/slo_details/slo_details.test.tsx

@@ -124,7 +124,7 @@ describe('SLO Details Page', () => {
     it('navigates to the SLO List page', async () => {
       const slo = buildSlo();
       useParamsMock.mockReturnValue(slo.id);
-      useFetchSloDetailsMock.mockReturnValue({ isLoading: false, slo });
+      useFetchSloDetailsMock.mockReturnValue({ isLoading: false, data: slo });
       useLicenseMock.mockReturnValue({ hasAtLeast: () => false });
 
       render(<SloDetailsPage />);
@@ -135,7 +135,7 @@ describe('SLO Details Page', () => {
 
   it('renders the PageNotFound when the SLO cannot be found', async () => {
     useParamsMock.mockReturnValue('nonexistent');
-    useFetchSloDetailsMock.mockReturnValue({ isLoading: false, slo: undefined });
+    useFetchSloDetailsMock.mockReturnValue({ isLoading: false, data: undefined });
     useLicenseMock.mockReturnValue({ hasAtLeast: () => true });
 
     render(<SloDetailsPage />);
@@ -146,7 +146,7 @@ describe('SLO Details Page', () => {
   it('renders the loading spinner when fetching the SLO', async () => {
     const slo = buildSlo();
     useParamsMock.mockReturnValue(slo.id);
-    useFetchSloDetailsMock.mockReturnValue({ isLoading: true, slo: undefined });
+    useFetchSloDetailsMock.mockReturnValue({ isLoading: true, data: undefined });
     useLicenseMock.mockReturnValue({ hasAtLeast: () => true });
 
     render(<SloDetailsPage />);
@@ -159,7 +159,7 @@ describe('SLO Details Page', () => {
   it('renders the SLO details page with loading charts when summary data is loading', async () => {
     const slo = buildSlo({ id: HEALTHY_STEP_DOWN_ROLLING_SLO });
     useParamsMock.mockReturnValue(slo.id);
-    useFetchSloDetailsMock.mockReturnValue({ isLoading: false, slo });
+    useFetchSloDetailsMock.mockReturnValue({ isLoading: false, data: slo });
     useLicenseMock.mockReturnValue({ hasAtLeast: () => true });
     useFetchHistoricalSummaryMock.mockReturnValue({
       isLoading: true,
@@ -178,7 +178,7 @@ describe('SLO Details Page', () => {
   it('renders the SLO details page with the overview and chart panels', async () => {
     const slo = buildSlo({ id: HEALTHY_STEP_DOWN_ROLLING_SLO });
     useParamsMock.mockReturnValue(slo.id);
-    useFetchSloDetailsMock.mockReturnValue({ isLoading: false, slo });
+    useFetchSloDetailsMock.mockReturnValue({ isLoading: false, data: slo });
     useLicenseMock.mockReturnValue({ hasAtLeast: () => true });
 
     render(<SloDetailsPage />);
@@ -194,7 +194,7 @@ describe('SLO Details Page', () => {
   it("renders a 'Edit' button under actions menu", async () => {
     const slo = buildSlo();
     useParamsMock.mockReturnValue(slo.id);
-    useFetchSloDetailsMock.mockReturnValue({ isLoading: false, slo });
+    useFetchSloDetailsMock.mockReturnValue({ isLoading: false, data: slo });
     useLicenseMock.mockReturnValue({ hasAtLeast: () => true });
 
     render(<SloDetailsPage />);
@@ -206,7 +206,7 @@ describe('SLO Details Page', () => {
   it("renders a 'Create alert rule' button under actions menu", async () => {
     const slo = buildSlo();
     useParamsMock.mockReturnValue(slo.id);
-    useFetchSloDetailsMock.mockReturnValue({ isLoading: false, slo });
+    useFetchSloDetailsMock.mockReturnValue({ isLoading: false, data: slo });
     useLicenseMock.mockReturnValue({ hasAtLeast: () => true });
 
     render(<SloDetailsPage />);
@@ -218,7 +218,7 @@ describe('SLO Details Page', () => {
   it("renders a 'Manage rules' button under actions menu", async () => {
     const slo = buildSlo();
     useParamsMock.mockReturnValue(slo.id);
-    useFetchSloDetailsMock.mockReturnValue({ isLoading: false, slo });
+    useFetchSloDetailsMock.mockReturnValue({ isLoading: false, data: slo });
     useLicenseMock.mockReturnValue({ hasAtLeast: () => true });
 
     render(<SloDetailsPage />);
@@ -230,7 +230,7 @@ describe('SLO Details Page', () => {
   it("renders a 'Clone' button under actions menu", async () => {
     const slo = buildSlo();
     useParamsMock.mockReturnValue(slo.id);
-    useFetchSloDetailsMock.mockReturnValue({ isLoading: false, slo });
+    useFetchSloDetailsMock.mockReturnValue({ isLoading: false, data: slo });
     useLicenseMock.mockReturnValue({ hasAtLeast: () => true });
 
     render(<SloDetailsPage />);
@@ -271,7 +271,7 @@ describe('SLO Details Page', () => {
   it("renders a 'Delete' button under actions menu", async () => {
     const slo = buildSlo();
     useParamsMock.mockReturnValue(slo.id);
-    useFetchSloDetailsMock.mockReturnValue({ isLoading: false, slo });
+    useFetchSloDetailsMock.mockReturnValue({ isLoading: false, data: slo });
     useLicenseMock.mockReturnValue({ hasAtLeast: () => true });
 
     render(<SloDetailsPage />);
@@ -301,7 +301,7 @@ describe('SLO Details Page', () => {
   it('renders the Overview tab by default', async () => {
     const slo = buildSlo();
     useParamsMock.mockReturnValue(slo.id);
-    useFetchSloDetailsMock.mockReturnValue({ isLoading: false, slo });
+    useFetchSloDetailsMock.mockReturnValue({ isLoading: false, data: slo });
     useLicenseMock.mockReturnValue({ hasAtLeast: () => true });
     useFetchActiveAlertsMock.mockReturnValue({
       isLoading: false,
@@ -320,7 +320,7 @@ describe('SLO Details Page', () => {
     it("renders a 'Explore in APM' button under actions menu", async () => {
       const slo = buildSlo({ indicator: buildApmAvailabilityIndicator() });
       useParamsMock.mockReturnValue(slo.id);
-      useFetchSloDetailsMock.mockReturnValue({ isLoading: false, slo });
+      useFetchSloDetailsMock.mockReturnValue({ isLoading: false, data: slo });
       useLicenseMock.mockReturnValue({ hasAtLeast: () => true });
 
       render(<SloDetailsPage />);
@@ -334,7 +334,7 @@ describe('SLO Details Page', () => {
     it("does not render a 'Explore in APM' button under actions menu", async () => {
       const slo = buildSlo();
       useParamsMock.mockReturnValue(slo.id);
-      useFetchSloDetailsMock.mockReturnValue({ isLoading: false, slo });
+      useFetchSloDetailsMock.mockReturnValue({ isLoading: false, data: slo });
       useLicenseMock.mockReturnValue({ hasAtLeast: () => true });
 
       render(<SloDetailsPage />);

x-pack/plugins/observability/public/pages/slo_details/slo_details.tsx

@@ -45,7 +45,7 @@ export function SloDetailsPage() {
   const sloInstanceId = useGetInstanceIdQueryParam();
   const { storeAutoRefreshState, getAutoRefreshState } = useAutoRefreshStorage();
   const [isAutoRefreshing, setIsAutoRefreshing] = useState(getAutoRefreshState());
-  const { isLoading, slo } = useFetchSloDetails({
+  const { isLoading, data: slo } = useFetchSloDetails({
     sloId,
     instanceId: sloInstanceId,
     shouldRefetch: isAutoRefreshing,

x-pack/plugins/observability/public/pages/slo_edit/slo_edit.test.tsx

@@ -147,7 +147,7 @@ describe('SLO Edit Page', () => {
         .spyOn(Router, 'useLocation')
         .mockReturnValue({ pathname: 'foo', search: '', state: '', hash: '' });
 
-      useFetchSloMock.mockReturnValue({ isLoading: false, slo: undefined });
+      useFetchSloMock.mockReturnValue({ isLoading: false, data: undefined });
 
       useFetchIndicesMock.mockReturnValue({
         isLoading: false,
@@ -201,7 +201,7 @@ describe('SLO Edit Page', () => {
           .spyOn(Router, 'useLocation')
           .mockReturnValue({ pathname: 'foo', search: '', state: '', hash: '' });
 
-        useFetchSloMock.mockReturnValue({ isLoading: false, slo: undefined });
+        useFetchSloMock.mockReturnValue({ isLoading: false, data: undefined });
 
         useFetchIndicesMock.mockReturnValue({
           isLoading: false,
@@ -237,7 +237,7 @@ describe('SLO Edit Page', () => {
           .spyOn(Router, 'useLocation')
           .mockReturnValue({ pathname: 'foo', search: '', state: '', hash: '' });
 
-        useFetchSloMock.mockReturnValue({ isLoading: false, slo: undefined });
+        useFetchSloMock.mockReturnValue({ isLoading: false, data: undefined });
 
         useFetchIndicesMock.mockReturnValue({
           isLoading: false,
@@ -287,7 +287,7 @@ describe('SLO Edit Page', () => {
           data: ['some-index'],
         });
 
-        useFetchSloMock.mockReturnValue({ isLoading: false, slo: undefined });
+        useFetchSloMock.mockReturnValue({ isLoading: false, data: undefined });
 
         const mockCreate = jest.fn();
         const mockUpdate = jest.fn();
@@ -377,7 +377,7 @@ describe('SLO Edit Page', () => {
           .spyOn(Router, 'useLocation')
           .mockReturnValue({ pathname: 'foo', search: '', state: '', hash: '' });
 
-        useFetchSloMock.mockReturnValue({ isLoading: false, slo: undefined });
+        useFetchSloMock.mockReturnValue({ isLoading: false, data: undefined });
 
         useFetchApmSuggestionsMock.mockReturnValue({
           suggestions: ['cartService'],
@@ -428,7 +428,7 @@ describe('SLO Edit Page', () => {
           .spyOn(Router, 'useLocation')
           .mockReturnValue({ pathname: 'foo', search: '', state: '', hash: '' });
 
-        useFetchSloMock.mockReturnValue({ isLoading: false, slo });
+        useFetchSloMock.mockReturnValue({ isLoading: false, data: slo });
 
         useFetchIndicesMock.mockReturnValue({
           isLoading: false,
@@ -496,7 +496,7 @@ describe('SLO Edit Page', () => {
           data: ['some-index'],
         });
 
-        useFetchSloMock.mockReturnValue({ isLoading: false, slo });
+        useFetchSloMock.mockReturnValue({ isLoading: false, data: slo });
 
         const mockCreate = jest.fn();
         const mockUpdate = jest.fn();
@@ -537,7 +537,7 @@ describe('SLO Edit Page', () => {
           .spyOn(Router, 'useLocation')
           .mockReturnValue({ pathname: 'foo', search: '', state: '', hash: '' });
 
-        useFetchSloMock.mockReturnValue({ isLoading: false, slo });
+        useFetchSloMock.mockReturnValue({ isLoading: false, data: slo });
 
         useFetchApmSuggestionsMock.mockReturnValue({
           suggestions: ['cartService'],
@@ -607,7 +607,7 @@ describe('SLO Edit Page', () => {
           .spyOn(Router, 'useLocation')
           .mockReturnValue({ pathname: 'foo', search: '', state: '', hash: '' });
 
-        useFetchSloMock.mockReturnValue({ isLoading: false, slo });
+        useFetchSloMock.mockReturnValue({ isLoading: false, data: slo });
 
         useFetchIndicesMock.mockReturnValue({
           isLoading: false,
@@ -648,7 +648,7 @@ describe('SLO Edit Page', () => {
           .spyOn(Router, 'useLocation')
           .mockReturnValue({ pathname: 'foo', search: '', state: '', hash: '' });
 
-        useFetchSloMock.mockReturnValue({ isLoading: false, slo });
+        useFetchSloMock.mockReturnValue({ isLoading: false, data: slo });
 
         useFetchIndicesMock.mockReturnValue({
           isLoading: false,
@@ -693,7 +693,7 @@ describe('SLO Edit Page', () => {
           .spyOn(Router, 'useLocation')
           .mockReturnValue({ pathname: 'foo', search: 'create-rule=true', state: '', hash: '' });
 
-        useFetchSloMock.mockReturnValue({ isLoading: false, slo });
+        useFetchSloMock.mockReturnValue({ isLoading: false, data: slo });
 
         useFetchIndicesMock.mockReturnValue({
           isLoading: false,

x-pack/plugins/observability/public/pages/slo_edit/slo_edit.tsx

@@ -33,7 +33,7 @@ export function SloEditPage() {
   const { sloId } = useParams<{ sloId: string | undefined }>();
   const { hasAtLeast } = useLicense();
   const hasRightLicense = hasAtLeast('platinum');
-  const { slo, isInitialLoading } = useFetchSloDetails({ sloId });
+  const { data: slo, isInitialLoading } = useFetchSloDetails({ sloId });
 
   useBreadcrumbs([
     {