[SLOs] Added status filter (elastic#176015)

## Summary

Added status filter !!

Updated to use controls component 

<img width="1520" alt="image"
src="https://github.com/elastic/kibana/assets/3505601/ed1b0063-83b7-4392-b7b0-1093699b2fc4">

---------

Co-authored-by: kibanamachine <[email protected]>

x-pack/plugins/observability/kibana.jsonc

@@ -16,6 +16,7 @@
       "cases",
       "charts",
       "contentManagement",
+      "controls",
       "data",
       "dataViews",
       "dataViewEditor",

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

@@ -19,7 +19,6 @@ import {
 
 import { useKibana } from '../../utils/kibana_react';
 import { sloKeys } from './query_key_factory';
-import { mixKqlWithTags } from './mix_kql_with_tags';
 
 interface SLOListParams {
   kqlQuery?: string;
@@ -29,7 +28,8 @@ interface SLOListParams {
   perPage?: number;
   filters?: Filter[];
   lastRefresh?: number;
-  tags?: SearchState['tags'];
+  tagsFilter?: SearchState['tagsFilter'];
+  statusFilter?: SearchState['statusFilter'];
 }
 
 export interface UseFetchSloListResponse {
@@ -49,7 +49,8 @@ export function useFetchSloList({
   perPage = DEFAULT_SLO_PAGE_SIZE,
   filters: filterDSL = [],
   lastRefresh,
-  tags,
+  tagsFilter,
+  statusFilter,
 }: SLOListParams = {}): UseFetchSloListResponse {
   const {
     http,
@@ -64,22 +65,26 @@ export function useFetchSloList({
   const filters = useMemo(() => {
     try {
       return JSON.stringify(
-        buildQueryFromFilters(filterDSL, dataView, {
-          ignoreFilterIfFieldNotInIndex: true,
-        })
+        buildQueryFromFilters(
+          [
+            ...filterDSL,
+            ...(statusFilter ? [statusFilter] : []),
+            ...(tagsFilter ? [tagsFilter] : []),
+          ],
+          dataView,
+          {
+            ignoreFilterIfFieldNotInIndex: true,
+          }
+        )
       );
     } catch (e) {
       return '';
     }
-  }, [filterDSL, dataView]);
-
-  const kqlQueryValue = useMemo(() => {
-    return mixKqlWithTags(kqlQuery, tags);
-  }, [kqlQuery, tags]);
+  }, [filterDSL, dataView, tagsFilter, statusFilter]);
 
   const { isInitialLoading, isLoading, isError, isSuccess, isRefetching, data } = useQuery({
     queryKey: sloKeys.list({
-      kqlQuery: kqlQueryValue,
+      kqlQuery,
       page,
       perPage,
       sortBy,
@@ -90,7 +95,7 @@ export function useFetchSloList({
     queryFn: async ({ signal }) => {
       return await http.get<FindSLOResponse>(`/api/observability/slos`, {
         query: {
-          ...(kqlQueryValue && { kqlQuery: kqlQueryValue }),
+          ...(kqlQuery && { kqlQuery }),
           ...(sortBy && { sortBy }),
           ...(sortDirection && { sortDirection }),
           ...(page && { page }),

x-pack/plugins/observability/public/pages/slos/components/common/quick_filters.test.tsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { getSelectedOptions } from './quick_filters';
+
+describe('getSelectedOptions', () => {
+  it('it works as expected ', () => {
+    // @ts-expect-error
+    expect(getSelectedOptions({})).toEqual([]);
+    expect(getSelectedOptions()).toEqual([]);
+    expect(
+      getSelectedOptions({
+        meta: {},
+      })
+    ).toEqual([]);
+    expect(
+      getSelectedOptions({
+        meta: {
+          params: ['tag'],
+        },
+      })
+    ).toEqual(['tag']);
+
+    expect(
+      getSelectedOptions({
+        meta: {},
+        query: {
+          match_phrase: {
+            'slo.tags': 'tag',
+          },
+        },
+      })
+    ).toEqual(['tag']);
+
+    expect(
+      getSelectedOptions({
+        meta: {},
+        query: {
+          match_phrase: {
+            status: 'violated',
+          },
+        },
+      })
+    ).toEqual(['violated']);
+  });
+});