fleet/frontend/context/query.tsx
Jacob Shandling 2adf3ce477
UI – Componentize "Discard data" option and add it to Edit Query page (#14343)
## Addresses #13470 

- [x] Save query
  - [x] Add checkbox
    - [x] default unchecked
- [x] If global setting is disabled (that is, "Disable query reports" is
_enabled_)
      - [x] this box is disabled
      - [x] copy below is changed
- [x] If enabled locally but globally disabled, box is checked and
disabled
- [x] If user clicks "Edit anyway", the normal checkbox state is
restored, allowing them to edit it anyway., e.g. to prepare for enabling
globally before doing so
- [x] banner under [certain
conditions](https://www.figma.com/file/ss8dSfoueq3REJxoGaxkNw/%237766-See-latest-query-results?type=design&node-id=470%3A9996&mode=design&t=XDBlQetD7kqdEdh9-1)
  - [x] 2 x update help text
- [x] Edit query
  - [x] checkbox
  - [x] back button
  - [x] 2 x help text updates
- [x] save changes modals when
[conditions](https://www.figma.com/file/ss8dSfoueq3REJxoGaxkNw/%237766-See-latest-query-results?type=design&node-id=470%3A8745&mode=design&t=XDBlQetD7kqdEdh9-1)
are met:
    - [x] changed SQL
    - [x] other 
- [x] Mange queries - update[
tooltip](https://www.figma.com/file/ss8dSfoueq3REJxoGaxkNw/%237766-See-latest-query-results?type=design&node-id=470%3A10035&mode=design&t=ACwsj3wVdqzCXulq-1)
- [x] Significant cleanup and improvement of styles and structure around
the Edit Queries page


<img width="854" alt="Screenshot 2023-10-05 at 3 44 05 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/9831570f-3c83-4e59-b040-649d52faa257">
<img width="854" alt="Screenshot 2023-10-05 at 3 44 15 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/dec76eba-46d1-4e43-87e9-e7fc44e84691">
<img width="854" alt="Screenshot 2023-10-05 at 3 45 09 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/a7879b21-49b0-476a-81ab-6b465967510f">
<img width="854" alt="Screenshot 2023-10-05 at 3 45 29 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/14a90d0a-2a52-4e59-8ee8-fb76fce55417">
<img width="1105" alt="Screenshot 2023-10-05 at 3 46 58 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/6c488fbe-4e5a-442b-8b62-2ddd15bda1fe">
<img width="1105" alt="Screenshot 2023-10-05 at 3 47 10 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/649534c5-d859-41f9-8c8a-6882b1dc2219">
<img width="1105" alt="Screenshot 2023-10-05 at 3 47 24 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/eaa0469c-a57a-474d-87bc-21cf2133dd3c">


## Checklist for submitter

- [x] Added/updated tests
- [ ] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2023-10-09 11:31:31 -07:00

270 lines
10 KiB
TypeScript

import React, { createContext, useReducer, ReactNode } from "react";
import { find } from "lodash";
import { osqueryTables } from "utilities/osquery_tables";
import { DEFAULT_QUERY } from "utilities/constants";
import { DEFAULT_OSQUERY_TABLE, IOsQueryTable } from "interfaces/osquery_table";
import { SelectedPlatformString } from "interfaces/platform";
import { QueryLoggingOption } from "interfaces/schedulable_query";
import {
DEFAULT_TARGETS,
DEFAULT_TARGETS_BY_TYPE,
ISelectedTargetsByType,
ITarget,
} from "interfaces/target";
type Props = {
children: ReactNode;
};
type InitialStateType = {
selectedOsqueryTable: IOsQueryTable;
lastEditedQueryId: number | null;
lastEditedQueryName: string;
lastEditedQueryDescription: string;
lastEditedQueryBody: string;
lastEditedQueryObserverCanRun: boolean;
lastEditedQueryFrequency: number;
lastEditedQueryPlatforms: SelectedPlatformString;
lastEditedQueryMinOsqueryVersion: string;
lastEditedQueryLoggingType: QueryLoggingOption;
lastEditedQueryDiscardData: boolean;
selectedQueryTargets: ITarget[]; // Mimicks old selectedQueryTargets still used for policies for SelectTargets.tsx and running a live query
selectedQueryTargetsByType: ISelectedTargetsByType; // New format by type for cleaner app wide state
setLastEditedQueryId: (value: number | null) => void;
setLastEditedQueryName: (value: string) => void;
setLastEditedQueryDescription: (value: string) => void;
setLastEditedQueryBody: (value: string) => void;
setLastEditedQueryObserverCanRun: (value: boolean) => void;
setLastEditedQueryFrequency: (value: number) => void;
setLastEditedQueryPlatforms: (value: SelectedPlatformString) => void;
setLastEditedQueryMinOsqueryVersion: (value: string) => void;
setLastEditedQueryLoggingType: (value: string) => void;
setLastEditedQueryDiscardData: (value: boolean) => void;
setSelectedOsqueryTable: (tableName: string) => void;
setSelectedQueryTargets: (value: ITarget[]) => void;
setSelectedQueryTargetsByType: (value: ISelectedTargetsByType) => void;
};
export type IQueryContext = InitialStateType;
const initialState = {
selectedOsqueryTable:
find(osqueryTables, { name: "users" }) || DEFAULT_OSQUERY_TABLE,
lastEditedQueryId: null,
lastEditedQueryName: DEFAULT_QUERY.name,
lastEditedQueryDescription: DEFAULT_QUERY.description,
lastEditedQueryBody: DEFAULT_QUERY.query,
lastEditedQueryObserverCanRun: DEFAULT_QUERY.observer_can_run,
lastEditedQueryFrequency: DEFAULT_QUERY.interval,
lastEditedQueryPlatforms: DEFAULT_QUERY.platform,
lastEditedQueryMinOsqueryVersion: DEFAULT_QUERY.min_osquery_version,
lastEditedQueryLoggingType: DEFAULT_QUERY.logging,
lastEditedQueryDiscardData: DEFAULT_QUERY.discard_data,
selectedQueryTargets: DEFAULT_TARGETS,
selectedQueryTargetsByType: DEFAULT_TARGETS_BY_TYPE,
setLastEditedQueryId: () => null,
setLastEditedQueryName: () => null,
setLastEditedQueryDescription: () => null,
setLastEditedQueryBody: () => null,
setLastEditedQueryObserverCanRun: () => null,
setLastEditedQueryFrequency: () => null,
setLastEditedQueryPlatforms: () => null,
setLastEditedQueryMinOsqueryVersion: () => null,
setLastEditedQueryLoggingType: () => null,
setLastEditedQueryDiscardData: () => null,
setSelectedOsqueryTable: () => null,
setSelectedQueryTargets: () => null,
setSelectedQueryTargetsByType: () => null,
};
const actions = {
SET_SELECTED_OSQUERY_TABLE: "SET_SELECTED_OSQUERY_TABLE",
SET_LAST_EDITED_QUERY_INFO: "SET_LAST_EDITED_QUERY_INFO",
SET_SELECTED_QUERY_TARGETS: "SET_SELECTED_QUERY_TARGETS",
SET_SELECTED_QUERY_TARGETS_BY_TYPE: "SET_SELECTED_QUERY_TARGETS_BY_TYPE",
} as const;
const reducer = (state: InitialStateType, action: any) => {
switch (action.type) {
case actions.SET_SELECTED_OSQUERY_TABLE:
return {
...state,
selectedOsqueryTable:
find(osqueryTables, { name: action.tableName }) ||
DEFAULT_OSQUERY_TABLE,
};
case actions.SET_LAST_EDITED_QUERY_INFO:
return {
...state,
lastEditedQueryId:
typeof action.lastEditedQueryId === "undefined"
? state.lastEditedQueryId
: action.lastEditedQueryId,
lastEditedQueryName:
typeof action.lastEditedQueryName === "undefined"
? state.lastEditedQueryName
: action.lastEditedQueryName,
lastEditedQueryDescription:
typeof action.lastEditedQueryDescription === "undefined"
? state.lastEditedQueryDescription
: action.lastEditedQueryDescription,
lastEditedQueryBody:
typeof action.lastEditedQueryBody === "undefined"
? state.lastEditedQueryBody
: action.lastEditedQueryBody,
lastEditedQueryObserverCanRun:
typeof action.lastEditedQueryObserverCanRun === "undefined"
? state.lastEditedQueryObserverCanRun
: action.lastEditedQueryObserverCanRun,
lastEditedQueryFrequency:
typeof action.lastEditedQueryFrequency === "undefined"
? state.lastEditedQueryFrequency
: action.lastEditedQueryFrequency,
lastEditedQueryPlatforms:
typeof action.lastEditedQueryPlatforms === "undefined"
? state.lastEditedQueryPlatforms
: action.lastEditedQueryPlatforms,
lastEditedQueryMinOsqueryVersion:
typeof action.lastEditedQueryMinOsqueryVersion === "undefined"
? state.lastEditedQueryMinOsqueryVersion
: action.lastEditedQueryMinOsqueryVersion,
lastEditedQueryLoggingType:
typeof action.lastEditedQueryLoggingType === "undefined"
? state.lastEditedQueryLoggingType
: action.lastEditedQueryLoggingType,
lastEditedQueryDiscardData:
typeof action.lastEditedQueryDiscardData === "undefined"
? state.lastEditedQueryDiscardData
: action.lastEditedQueryDiscardData,
};
case actions.SET_SELECTED_QUERY_TARGETS:
return {
...state,
selectedQueryTargets:
typeof action.selectedQueryTargets === "undefined"
? state.selectedQueryTargets
: action.selectedQueryTargets,
};
case actions.SET_SELECTED_QUERY_TARGETS_BY_TYPE:
return {
...state,
selectedQueryTargetsByType:
typeof action.selectedQueryTargetsByType === "undefined"
? state.selectedQueryTargetsByType
: action.selectedQueryTargetsByType,
};
default:
return state;
}
};
export const QueryContext = createContext<InitialStateType>(initialState);
const QueryProvider = ({ children }: Props) => {
const [state, dispatch] = useReducer(reducer, initialState);
const value = {
selectedOsqueryTable: state.selectedOsqueryTable,
lastEditedQueryId: state.lastEditedQueryId,
lastEditedQueryName: state.lastEditedQueryName,
lastEditedQueryDescription: state.lastEditedQueryDescription,
lastEditedQueryBody: state.lastEditedQueryBody,
lastEditedQueryObserverCanRun: state.lastEditedQueryObserverCanRun,
lastEditedQueryFrequency: state.lastEditedQueryFrequency,
lastEditedQueryPlatforms: state.lastEditedQueryPlatforms,
lastEditedQueryMinOsqueryVersion: state.lastEditedQueryMinOsqueryVersion,
lastEditedQueryLoggingType: state.lastEditedQueryLoggingType,
lastEditedQueryDiscardData: state.lastEditedQueryDiscardData,
selectedQueryTargets: state.selectedQueryTargets,
selectedQueryTargetsByType: state.selectedQueryTargetsByType,
setLastEditedQueryId: (lastEditedQueryId: number | null) => {
dispatch({
type: actions.SET_LAST_EDITED_QUERY_INFO,
lastEditedQueryId,
});
},
setLastEditedQueryName: (lastEditedQueryName: string) => {
dispatch({
type: actions.SET_LAST_EDITED_QUERY_INFO,
lastEditedQueryName,
});
},
setLastEditedQueryDescription: (lastEditedQueryDescription: string) => {
dispatch({
type: actions.SET_LAST_EDITED_QUERY_INFO,
lastEditedQueryDescription,
});
},
setLastEditedQueryBody: (lastEditedQueryBody: string) => {
dispatch({
type: actions.SET_LAST_EDITED_QUERY_INFO,
lastEditedQueryBody,
});
},
setLastEditedQueryObserverCanRun: (
lastEditedQueryObserverCanRun: boolean
) => {
dispatch({
type: actions.SET_LAST_EDITED_QUERY_INFO,
lastEditedQueryObserverCanRun,
});
},
setLastEditedQueryFrequency: (lastEditedQueryFrequency: number) => {
dispatch({
type: actions.SET_LAST_EDITED_QUERY_INFO,
lastEditedQueryFrequency,
});
},
setLastEditedQueryPlatforms: (lastEditedQueryPlatforms: string) => {
dispatch({
type: actions.SET_LAST_EDITED_QUERY_INFO,
lastEditedQueryPlatforms,
});
},
setLastEditedQueryMinOsqueryVersion: (
lastEditedQueryMinOsqueryVersion: string
) => {
dispatch({
type: actions.SET_LAST_EDITED_QUERY_INFO,
lastEditedQueryMinOsqueryVersion,
});
},
setLastEditedQueryLoggingType: (lastEditedQueryLoggingType: string) => {
dispatch({
type: actions.SET_LAST_EDITED_QUERY_INFO,
lastEditedQueryLoggingType,
});
},
setLastEditedQueryDiscardData: (lastEditedQueryDiscardData: boolean) => {
dispatch({
type: actions.SET_LAST_EDITED_QUERY_INFO,
lastEditedQueryDiscardData,
});
},
setSelectedQueryTargets: (selectedQueryTargets: ITarget[]) => {
dispatch({
type: actions.SET_SELECTED_QUERY_TARGETS,
selectedQueryTargets,
});
},
setSelectedQueryTargetsByType: (
selectedQueryTargetsByType: ISelectedTargetsByType
) => {
dispatch({
type: actions.SET_SELECTED_QUERY_TARGETS_BY_TYPE,
selectedQueryTargetsByType,
});
},
setSelectedOsqueryTable: (tableName: string) => {
dispatch({ type: actions.SET_SELECTED_OSQUERY_TABLE, tableName });
},
};
return (
<QueryContext.Provider value={value}>{children}</QueryContext.Provider>
);
};
export default QueryProvider;