Implement embeddable dashboard on GitHub

plugins/main/common/constants.ts

@@ -227,6 +227,8 @@ export const DATA_SOURCE_FILTER_CONTROLLED_PINNED_AGENT = 'pinned-agent';
 export const DATA_SOURCE_FILTER_CONTROLLED_CLUSTER_MANAGER = 'cluster-manager';
 export const DATA_SOURCE_FILTER_CONTROLLED_VULNERABILITIES_RULE_GROUP =
   'vulnerabilities-rule-group';
+export const DATA_SOURCE_FILTER_CONTROLLED_GITHUB_RULE_GROUP =
+  'github-rule-group';
 export const DATA_SOURCE_FILTER_CONTROLLED_DOCKER_RULE_GROUP =
   'docker-rule-group';
 export const DATA_SOURCE_FILTER_CONTROLLED_MITRE_ATTACK_RULE =

plugins/main/public/components/common/custom-search-bar/custom-search-bar.tsx

@@ -1,66 +1,98 @@
 import React, { useState, useEffect } from 'react';
-import { Filter } from '../../../../../../src/plugins/data/public/';
+import {
+  Filter,
+  IndexPattern,
+} from '../../../../../../src/plugins/data/public/';
 import {
   FilterMeta,
   FilterState,
   FilterStateStore,
 } from '../../../../../../src/plugins/data/common';
-
 import { AppState } from '../../../react-services/app-state';
-
 import { EuiFlexGroup, EuiFlexItem, EuiSwitch } from '@elastic/eui';
-
+import { tFilter } from '../data-source';
 //@ts-ignore
 import { KbnSearchBar } from '../../kbn-search-bar';
 import { MultiSelect } from './components';
 import { useFilterManager } from '../hooks';
+import useSearchBar, { tUseSearchBarProps } from '../search-bar/use-search-bar';
 import { getCustomValueSuggestion } from '../../../components/overview/office-panel/config/helpers/helper-value-suggestion';
+import { I18nProvider } from '@osd/i18n/react';
+import { getPlugins } from '../../../kibana-services';
+
+type CustomSearchBarProps = {
+  filterInputs: {
+    type: string;
+    key: string;
+    placeholder: string;
+  }[];
+  filterDrillDownValue: { field: string; value: string };
+  searchBarProps: tUseSearchBarProps;
+  indexPattern: IndexPattern;
+  setFilters: (filters: tFilter[]) => void;
+};
 
-export const CustomSearchBar = ({ filtersValues, filterDrillDownValue = { field: '', value: '' }, ...props }) => {
-  const { filterManager, filters } = useFilterManager();
+const plugins = getPlugins();
+const SearchBar = getPlugins().data.ui.SearchBar;
+
+export const CustomSearchBar = ({
+  filterInputs,
+  filterDrillDownValue = { field: '', value: '' },
+  searchBarProps,
+  indexPattern,
+  setFilters
+}: CustomSearchBarProps) => {
+  //const { filterManager, filters } = useFilterManager(); // remove
+  const { filters } = searchBarProps;
   const defaultSelectedOptions = () => {
     const array = [];
-    filtersValues.forEach((item) => {
+    filterInputs.forEach(item => {
       array[item.key] = [];
     });
 
     return array;
   };
   const [avancedFiltersState, setAvancedFiltersState] = useState(false);
-  const [selectedOptions, setSelectedOptions] = useState(defaultSelectedOptions);
+  const [selectedOptions, setSelectedOptions] = useState(
+    defaultSelectedOptions,
+  );
   const [values, setValues] = useState(Array);
   const [selectReference, setSelectReference] = useState('');
 
   useEffect(() => {
-      setPluginPlatformFilters(values, selectReference);
-      refreshCustomSelectedFilter();
+    setPluginPlatformFilters(values, selectReference);
+    refreshCustomSelectedFilter();
   }, [values]);
 
   useEffect(() => {
     onFiltersUpdated();
   }, [filters]);
 
-
-  const checkSelectDrillDownValue = (key) => {
-    return filterDrillDownValue.field === key && filterDrillDownValue.value != '' ? true : false
-  }
+  const checkSelectDrillDownValue = key => {
+    return filterDrillDownValue.field === key &&
+      filterDrillDownValue.value != ''
+      ? true
+      : false;
+  };
   const onFiltersUpdated = () => {
     refreshCustomSelectedFilter();
   };
 
   const changeSwitch = () => {
-    setAvancedFiltersState((state) => !state);
+    setAvancedFiltersState(state => !state);
   };
 
   const buildCustomFilter = (isPinned: boolean, values?: any): Filter => {
-    const newFilters = values.map((element) => ({
+    const newFilters = values.map(element => ({
       match_phrase: {
         [element.value]: {
           query: element.filterByKey ? element.key : element.label,
         },
       },
     }));
-    const params = values.map((item) => item.filterByKey ? item.key.toString() : item.label);
+    const params = values.map(item =>
+      item.filterByKey ? item.key.toString() : item.label,
+    );
     const meta: FilterMeta = {
       disabled: false,
       negate: false,
@@ -69,10 +101,12 @@ export const CustomSearchBar = ({ filtersValues, filterDrillDownValue = { field:
       alias: null,
       type: 'phrases',
       value: params.join(','),
-      index: AppState.getCurrentPattern(),
+      index: indexPattern.id,
     };
     const $state: FilterState = {
-      store: isPinned ? FilterStateStore.GLOBAL_STATE : FilterStateStore.APP_STATE,
+      store: isPinned
+        ? FilterStateStore.GLOBAL_STATE
+        : FilterStateStore.APP_STATE,
     };
     const query = {
       bool: {
@@ -84,58 +118,73 @@ export const CustomSearchBar = ({ filtersValues, filterDrillDownValue = { field:
     return { meta, $state, query };
   };
 
+  // not use filter manager
   const setPluginPlatformFilters = (values: any[], selectReference: String) => {
-    const currentFilters = filterManager
-      .getFilters()
-      .filter((item) => item.meta.key != selectReference);
-    filterManager.removeAll();
-    filterManager.addFilters(currentFilters);
+    const currentFilters = filters.filter(
+      item => item.meta.key != selectReference,
+    );
+    //filterManager.removeAll();
+    //filterManager.addFilters(currentFilters);
+    setFilters(currentFilters);
     if (values.length != 0) {
       const customFilter = buildCustomFilter(false, values);
-      filterManager.addFilters(customFilter);
+      //filterManager.addFilters(customFilter);
+      setFilters([...currentFilters, customFilter]);
     }
   };
 
+  // not use filter manager
   const refreshCustomSelectedFilter = () => {
     setSelectedOptions(defaultSelectedOptions);
-    const filters =
-      filterManager
-        .getFilters()
+    const currentFilters =
+      filters
         .filter(
-          (item) =>
-            item.meta.type === 'phrases' && Object.keys(selectedOptions).includes(item.meta.key)
+          item =>
+            item.meta.type === 'phrases' &&
+            Object.keys(selectedOptions).includes(item.meta.key),
         )
-        .map((element) => ({ params: element.meta.params, key: element.meta.key })) || [];
-
-    const getFilterCustom = (item) => {
-      return item.params.map((element) => ({ checked: 'on', label: item.key === 'data.office365.UserType' ? getLabelUserType(element) : element, value: item.key, key: element, filterByKey: item.key === 'data.office365.UserType' ? true : false}));
+        .map(element => ({
+          params: element.meta.params,
+          key: element.meta.key,
+        })) || [];
+
+    const getFilterCustom = item => {
+      return item;
+      // ToDo: Check how it works
+      //return item.params.map((element) => ({ checked: 'on', label: item.key === 'data.office365.UserType' ? getLabelUserType(element) : element, value: item.key, key: element, filterByKey: item.key === 'data.office365.UserType' ? true : false}));
     };
-    const getLabelUserType = (element) => {
-      const userTypeOptions = getCustomValueSuggestion('data.office365.UserType')
-      return userTypeOptions.find((item,index) =>  index.toString() === element)
-    }
-    const filterCustom = filters.map((item) => getFilterCustom(item)) || [];
+    const getLabelUserType = element => {
+      const userTypeOptions = getCustomValueSuggestion(
+        'data.office365.UserType',
+      );
+      return userTypeOptions.find(
+        (item, index) => index.toString() === element,
+      );
+    };
+    const filterCustom = filters.map(item => getFilterCustom(item)) || [];
     if (filterCustom.length != 0) {
-      filterCustom.forEach((item) => {
+      /*filterCustom.forEach((item) => {
         item.forEach((element) => {
           setSelectedOptions((prevState) => ({
             ...prevState,
             [element.value]: [...prevState[element.value], element],
           }));
         });
       });
+      */
     }
   };
 
   const onChange = (values: any[], id: string) => {
-    setSelectReference(id)
+    setSelectReference(id);
     setValues(values);
   };
 
-  const onRemove = (filter) => {
-    const currentFilters = filterManager.getFilters().filter((item) => item.meta.key != filter);
-    filterManager.removeAll();
-    filterManager.addFilters(currentFilters);
+  const onRemove = filter => {
+    const currentFilters = filters.filter(item => item.meta.key != filter);
+    //filterManager.removeAll();
+    //filterManager.addFilters(currentFilters);
+    setFilters(currentFilters);
     refreshCustomSelectedFilter();
   };
 
@@ -157,41 +206,47 @@ export const CustomSearchBar = ({ filtersValues, filterDrillDownValue = { field:
   };
 
   return (
-    <>
+    <I18nProvider>
       <EuiFlexGroup
-        className="custom-kbn-search-bar"
-        alignItems="center"
+        className='custom-kbn-search-bar'
+        alignItems='center'
         style={{ margin: '0 8px' }}
       >
         {!avancedFiltersState
-          ? filtersValues.map((item, key) => (
-              <EuiFlexItem key={key}>{getComponent(item)}</EuiFlexItem>
-            ))
+          ? filterInputs.map((item, key) => (
+            <EuiFlexItem key={key}>{getComponent(item)}</EuiFlexItem>
+          ))
           : ''}
         <EuiFlexItem>
-          <KbnSearchBar
-            showFilterBar={false}
-            showQueryInput={avancedFiltersState}
-            onFiltersUpdated={onFiltersUpdated}
-          />
+          <div className='wz-search-bar'>
+            <SearchBar
+              {...searchBarProps}
+              showFilterBar={false}
+              showQueryInput={avancedFiltersState}
+              onFiltersUpdated={onFiltersUpdated}
+            />
+          </div>
         </EuiFlexItem>
       </EuiFlexGroup>
-      <EuiFlexGroup justifyContent="flexEnd" style={{ margin: '0 20px' }}>
+      <EuiFlexGroup justifyContent='flexEnd' style={{ margin: '0 20px' }}>
         <EuiFlexItem className={'filters-search-bar'} style={{ margin: '0px' }}>
-          <KbnSearchBar
-            showDatePicker={false}
-            showQueryInput={false}
-            onFiltersUpdated={onFiltersUpdated}
-          />
+          <div className='wz-search-bar'>
+            <SearchBar
+              {...searchBarProps}
+              showDatePicker={false}
+              showQueryInput={false}
+              onFiltersUpdated={onFiltersUpdated}
+            />
+          </div>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiSwitch
-            label="Advanced filters"
+            label='Advanced filters'
             checked={avancedFiltersState}
             onChange={() => changeSwitch()}
           />
         </EuiFlexItem>
       </EuiFlexGroup>
-    </>
+    </I18nProvider>
   );
 };

plugins/main/public/components/common/data-grid/use-data-grid.ts

@@ -26,7 +26,7 @@ export type tDataGridColumn = {
   ) => string | React.ReactNode;
 } & EuiDataGridColumn;
 
-type tDataGridProps = {
+export type tDataGridProps = {
   indexPattern: IndexPattern;
   results: SearchResponse;
   defaultColumns: tDataGridColumn[];

plugins/main/public/components/common/data-source/hooks/use-data-source.ts

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
   IDataSourceFactoryConstructor,
   tDataSourceRepository,
@@ -43,8 +43,11 @@ type tUseDataSourceNotLoadedReturns = {
   filterManager: null;
 };
 
-export function useDataSource<T extends tParsedIndexPattern, K extends PatternDataSource>(
-  props: tUseDataSourceProps<T, K>
+export function useDataSource<
+  T extends tParsedIndexPattern,
+  K extends PatternDataSource,
+>(
+  props: tUseDataSourceProps<T, K>,
 ): tUseDataSourceLoadedReturns<K> | tUseDataSourceNotLoadedReturns {
   const {
     filters: initialFilters = [],
@@ -59,6 +62,7 @@ export function useDataSource<T extends tParsedIndexPattern, K extends PatternDa
     throw new Error('DataSource and repository are required');
   }
 
+  const [subscription, setSubscription] = useState<any>();
   const [dataSource, setDataSource] = useState<PatternDataSource>();
   const [dataSourceFilterManager, setDataSourceFilterManager] =
     useState<PatternDataSourceFilterManager | null>(null);
@@ -82,14 +86,14 @@ export function useDataSource<T extends tParsedIndexPattern, K extends PatternDa
     return await dataSourceFilterManager?.fetch(params);
   };
 
-  useEffect(() => {
-
-    let subscription;
-    (async () => {
+  const initialize = async () => {
     setIsLoading(true);
     const factory = injectedFactory || new PatternDataSourceFactory();
     const patternsData = await repository.getAll();
-    const dataSources = await factory.createAll(DataSourceConstructor, patternsData);
+    const dataSources = await factory.createAll(
+      DataSourceConstructor,
+      patternsData,
+    );
     const selector = new PatternDataSourceSelector(dataSources, repository);
     const dataSource = await selector.getSelectedDataSource();
     if (!dataSource) {
@@ -100,23 +104,29 @@ export function useDataSource<T extends tParsedIndexPattern, K extends PatternDa
       dataSource,
       initialFilters,
       injectedFilterManager,
-      initialFetchFilters
+      initialFetchFilters,
     );
     // what the filters update
-    subscription = dataSourceFilterManager.getUpdates$().subscribe({
+    let subscription = dataSourceFilterManager.getUpdates$().subscribe({
       next: () => {
         // this is necessary to remove the hidden filters from the filter manager and not show them in the search bar
-        dataSourceFilterManager.setFilters(dataSourceFilterManager.getFilters());
+        dataSourceFilterManager.setFilters(
+          dataSourceFilterManager.getFilters(),
+        );
         setAllFilters(dataSourceFilterManager.getFilters());
         setFetchFilters(dataSourceFilterManager.getFetchFilters());
       },
     });
+    setSubscription(subscription);
     setAllFilters(dataSourceFilterManager.getFilters());
     setFetchFilters(dataSourceFilterManager.getFetchFilters());
     setDataSourceFilterManager(dataSourceFilterManager);
     setIsLoading(false);
-  })();
-    return () => subscription.unsubscribe();
+  };
+
+  useEffect(() => {
+    initialize();
+    return () => subscription && subscription.unsubscribe();
   }, []);
 
   if (isLoading) {