(
[window.localStorage.getItem('disableDialog')]
);
+ const handleBulkShowClick = useCallback((e: React.SyntheticEvent) => {
+ e.stopPropagation();
+ if (isDialogDisabled) {
+ bulkShow.mutate();
+ } else {
+ state.setBulkShow(true);
+ bulkShowState.update('showHide', true);
+ }
+ }, []);
+
+ const handleBulkHideClick = useCallback((e: React.SyntheticEvent) => {
+ e.stopPropagation();
+ if (isDialogDisabled) {
+ bulkHide.mutate();
+ } else {
+ state.setBulkShow(false);
+ bulkHideState.update('showHide', true);
+ }
+ }, []);
+
return (
<>
@@ -76,32 +97,16 @@ export const BulkEdit = observer(
content={
}
From e3075b73649b5cd6ced41db62d01823069b1e21f Mon Sep 17 00:00:00 2001
From: Huiqing Li
Date: Mon, 3 Apr 2023 13:14:18 -0700
Subject: [PATCH 29/57] bulk edit using queries
---
.../Campaign/Explore/Panels/BulkEdit.tsx | 83 +++++++++++++++----
.../Campaign/Explore/Panels/Host/Host.tsx | 1 -
.../Explore/Panels/Meta/BeaconMeta.tsx | 9 +-
.../hooks/use-check-nonHideable-entities.ts | 22 +++--
4 files changed, 87 insertions(+), 28 deletions(-)
diff --git a/applications/client/src/views/Campaign/Explore/Panels/BulkEdit.tsx b/applications/client/src/views/Campaign/Explore/Panels/BulkEdit.tsx
index da99b9c5..98f97af7 100644
--- a/applications/client/src/views/Campaign/Explore/Panels/BulkEdit.tsx
+++ b/applications/client/src/views/Campaign/Explore/Panels/BulkEdit.tsx
@@ -6,7 +6,7 @@ import { createState, CarbonIcon } from '@redeye/client/components';
import { store } from '@redeye/client/store';
import { CoreTokens, PopoverButton, popoverOffset, ThemeClasses, Txt } from '@redeye/ui-styles';
import { observer } from 'mobx-react-lite';
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
import type { ComponentProps } from 'react';
import type { UseMutationResult } from '@tanstack/react-query';
import { InfoType } from '@redeye/client/types';
@@ -37,20 +37,22 @@ type HostRowProps = ComponentProps<'div'> & {
export const BulkEdit = observer(
({ typeName, count = 0, bulkShow, bulkHide, bulkShowState, bulkHideState }) => {
const state = createState({
+ cantHideEntities: false,
+ isDialogDisabled: window.localStorage.getItem('disableDialog') === 'true',
bulkShow: true,
setBulkShow(bool: boolean) {
this.bulkShow = bool;
},
});
- const isDialogDisabled = useMemo(
- () => window.localStorage.getItem('disableDialog') === 'true',
- [window.localStorage.getItem('disableDialog')]
- );
+ // const isDialogDisabled = useMemo(
+ // () => window.localStorage.getItem('disableDialog') === 'true',
+ // [window.localStorage.getItem('disableDialog')]
+ // );
const handleBulkShowClick = useCallback((e: React.SyntheticEvent) => {
e.stopPropagation();
- if (isDialogDisabled) {
+ if (window.localStorage.getItem('disableDialog') === 'true') {
bulkShow.mutate();
} else {
state.setBulkShow(true);
@@ -58,15 +60,62 @@ export const BulkEdit = observer(
}
}, []);
- const handleBulkHideClick = useCallback((e: React.SyntheticEvent) => {
- e.stopPropagation();
- if (isDialogDisabled) {
- bulkHide.mutate();
- } else {
- state.setBulkShow(false);
- bulkHideState.update('showHide', true);
- }
- }, []);
+ const handleBulkHideClick = useCallback(
+ async (e: React.SyntheticEvent) => {
+ e.stopPropagation();
+ state.update('cantHideEntities', false);
+ state.update('isDialogDisabled', window.localStorage.getItem('disableDialog') === 'true');
+ // const entityIds = typeName === 'Beacon' ? 'beaconIds' : 'hostIds';
+ const data =
+ typeName === 'Beacon'
+ ? await store.graphqlStore.queryNonHideableEntities({
+ campaignId: store.campaign.id!,
+ beaconIds: store.campaign?.beaconGroupSelect.selectedBeacons,
+ })
+ : await store.graphqlStore.queryNonHideableEntities({
+ campaignId: store.campaign.id!,
+ hostIds: [
+ ...(store.campaign?.hostGroupSelect.selectedHosts || ''),
+ ...(store.campaign?.hostGroupSelect.selectedServers || ''),
+ ],
+ });
+ const cantHideEntities =
+ ((typeName === 'Beacon'
+ ? data?.nonHideableEntities.beacons?.length
+ : [...(data?.nonHideableEntities.hosts || ''), ...(data?.nonHideableEntities.servers || '')]?.length) ||
+ 0) > 0;
+
+ const isDialogDisabled =
+ (window.localStorage.getItem('disableDialog') === 'true' && !cantHideEntities) || false;
+ state.update('cantHideEntities', cantHideEntities);
+ state.update('isDialogDisabled', isDialogDisabled);
+ // console.log(
+ // store.campaign?.beaconGroupSelect.selectedBeacons,
+ // data?.nonHideableEntities.beacons,
+ // data?.nonHideableEntities.servers,
+ // cantHideEntities,
+ // isDialogDisabled,
+ // state.isDialogDisabled,
+ // window.localStorage.getItem('disableDialog') === 'true',
+ // !cantHideEntities,
+ // bulkHideState.showHide
+ // );
+
+ if (isDialogDisabled) {
+ bulkHide.mutate();
+ } else {
+ state.setBulkShow(false);
+ bulkHideState.update('showHide', true);
+ }
+ },
+ [
+ store.campaign?.beaconGroupSelect.selectedBeacons,
+ store.campaign?.hostGroupSelect.selectedHosts,
+ state.bulkShow,
+ state.cantHideEntities,
+ state.isDialogDisabled,
+ ]
+ );
return (
<>
@@ -112,7 +161,7 @@ export const BulkEdit = observer(
}
/>
- {!isDialogDisabled && (
+ {!state.isDialogDisabled && (
(
}
}}
onHide={() => (state.bulkShow ? bulkShow.mutate() : bulkHide.mutate())}
- // last={last} // todo - need a way to disable hide last item
+ cantHideEntities={state.cantHideEntities}
bulk={count > 1}
/>
)}
diff --git a/applications/client/src/views/Campaign/Explore/Panels/Host/Host.tsx b/applications/client/src/views/Campaign/Explore/Panels/Host/Host.tsx
index 6fb21608..2944f5bf 100644
--- a/applications/client/src/views/Campaign/Explore/Panels/Host/Host.tsx
+++ b/applications/client/src/views/Campaign/Explore/Panels/Host/Host.tsx
@@ -73,7 +73,6 @@ export const HostRow = observer(({ host, ...props }) => {
);
const handleQuickMetaClick = useCallback(async () => {
- // let data1:{ nonHideableEntities: CantHideEntitiesModel }
const data = await store.graphqlStore.queryNonHideableEntities({
campaignId: store.campaign.id!,
hostIds: [(host.cobaltStrikeServer ? host?.serverId : host?.id) || ''],
diff --git a/applications/client/src/views/Campaign/Explore/Panels/Meta/BeaconMeta.tsx b/applications/client/src/views/Campaign/Explore/Panels/Meta/BeaconMeta.tsx
index bda07a1a..12bc6df8 100644
--- a/applications/client/src/views/Campaign/Explore/Panels/Meta/BeaconMeta.tsx
+++ b/applications/client/src/views/Campaign/Explore/Panels/Meta/BeaconMeta.tsx
@@ -19,7 +19,7 @@ import { BeaconLinkRow } from './BeaconLinkRow';
import { ToggleHiddenDialog } from './HideDialog';
import { MetaGridLayout, MetaLabel, MetaSection, SaveInputButton, ToggleHiddenButton } from './MetaComponents';
import { useToggleHidden } from '../hooks/use-toggle-hidden';
-// import { useCheckNonHideableEntities } from '../hooks/use-check-nonHideable-entities';
+import { useCheckNonHideableEntities } from '../hooks/use-check-nonHideable-entities';
const useGetLastBeaconCommand = (
store: AppStore,
@@ -94,10 +94,9 @@ export const BeaconMeta = observer((props) => {
// hooks not working? AAA
// const { cantHideEntities: last, isDialogDisabled: is2 } = useCheckNonHideableEntities(
- // 'beacon',
- // beacon?.hidden || false,
- // [beacon?.id || '']
- // );
+ const testAAA = useCheckNonHideableEntities('beacon', beacon?.hidden || false, [beacon?.id || '']);
+ console.log('testAAA: ', testAAA);
+ // test queryNonHideableEntities
const { data } = useQuery(
['beacons', 'can-hide', store.campaign?.id],
diff --git a/applications/client/src/views/Campaign/Explore/Panels/hooks/use-check-nonHideable-entities.ts b/applications/client/src/views/Campaign/Explore/Panels/hooks/use-check-nonHideable-entities.ts
index cbf9dfdb..b5d21b0f 100644
--- a/applications/client/src/views/Campaign/Explore/Panels/hooks/use-check-nonHideable-entities.ts
+++ b/applications/client/src/views/Campaign/Explore/Panels/hooks/use-check-nonHideable-entities.ts
@@ -1,10 +1,9 @@
-import { isDefined } from '@redeye/client/components';
import type { HostModel, BeaconModel } from '@redeye/client/store';
import { useStore } from '@redeye/client/store';
import { useQuery } from '@tanstack/react-query';
import { useMemo } from 'react';
-export const useCheckNonHideableEntities = (typeName: string, hidden: boolean, beaconIds: string[]) => {
+export const useCheckNonHideableEntities = async (typeName: string, hidden: boolean, beaconIds: string[]) => {
const store = useStore();
// const last = useMemo(
@@ -18,19 +17,32 @@ export const useCheckNonHideableEntities = (typeName: string, hidden: boolean, b
// // : false,
// [typeName, unhiddenServerCount, unhiddenHostCount, unhiddenBeaconCount, data?.nonHideableEntities]
// );
-
+ const entityIds = typeName === 'Beacon' ? 'beaconIds' : 'hostIds';
const { data } = useQuery(
['beacons', 'can-hide', store.campaign?.id],
async () =>
await store.graphqlStore.queryNonHideableEntities({
campaignId: store.campaign.id!,
- // beaconIds,
+ beaconIds,
// beaconIds: ['COMPUTER02-330588776'],
// beaconIds: ['COMPUTER03-500978634', 'COMPUTER03-1042756528'],
- beaconIds: store.campaign?.beaconGroupSelect.selectedBeacons.map((beaconId) => beaconId),
+ // beaconIds: store.campaign?.beaconGroupSelect.selectedBeacons.map((beaconId) => beaconId),
// beaconIds: ['COMPUTER02-1166658656', 'COMPUTER02-2146137244'],
+ // [entityIds]: ['COMPUTER03-1042756528'],
})
);
+
+ // const data = await store.graphqlStore.queryNonHideableEntities({
+ // campaignId: store.campaign.id!,
+ // beaconIds,
+ // // beaconIds: ['COMPUTER02-330588776'],
+ // // beaconIds: ['COMPUTER03-500978634', 'COMPUTER03-1042756528'],
+ // // beaconIds: store.campaign?.beaconGroupSelect.selectedBeacons.map((beaconId) => beaconId),
+ // // beaconIds: ['COMPUTER02-1166658656', 'COMPUTER02-2146137244'],
+ // // [entityIds]: ['COMPUTER03-1042756528'],
+ // // beaconIds: ['COMPUTER02-1166658656', 'COMPUTER02-330588776', 'COMPUTER02-2146137244'],
+ // });
+
if (data?.nonHideableEntities) {
console.log(
'2',
From 9be022cdb3fbaa256cb9438beb01dc6349141917 Mon Sep 17 00:00:00 2001
From: Huiqing Li
Date: Mon, 3 Apr 2023 16:49:30 -0700
Subject: [PATCH 30/57] refactor hooks, still promise in meta...
---
.../Explore/Panels/Meta/BeaconMeta.tsx | 18 +++++++---
.../hooks/use-check-nonHideable-entities.ts | 33 ++++++-------------
2 files changed, 24 insertions(+), 27 deletions(-)
diff --git a/applications/client/src/views/Campaign/Explore/Panels/Meta/BeaconMeta.tsx b/applications/client/src/views/Campaign/Explore/Panels/Meta/BeaconMeta.tsx
index 12bc6df8..628d592d 100644
--- a/applications/client/src/views/Campaign/Explore/Panels/Meta/BeaconMeta.tsx
+++ b/applications/client/src/views/Campaign/Explore/Panels/Meta/BeaconMeta.tsx
@@ -2,7 +2,7 @@ import { Button, InputGroup, MenuItem } from '@blueprintjs/core';
import { DateInput2 } from '@blueprintjs/datetime2';
import { CarbonIcon, dateTimeFormat, isDefined } from '@redeye/client/components';
import { createState } from '@redeye/client/components/mobx-create-state';
-import type { AppStore, CommandGroupModel, CommandModel } from '@redeye/client/store';
+import type { AppStore, CantHideEntitiesModel, CommandGroupModel, CommandModel } from '@redeye/client/store';
import { BeaconType } from '@redeye/client/store/graphql/BeaconTypeEnum';
import { SortDirection, SortOption, useStore } from '@redeye/client/store';
import { InfoType } from '@redeye/client/types';
@@ -21,6 +21,16 @@ import { MetaGridLayout, MetaLabel, MetaSection, SaveInputButton, ToggleHiddenBu
import { useToggleHidden } from '../hooks/use-toggle-hidden';
import { useCheckNonHideableEntities } from '../hooks/use-check-nonHideable-entities';
+type BeaconQueryResult = {
+ data:
+ | {
+ nonHideableEntities: CantHideEntitiesModel;
+ }
+ | undefined;
+ cantHideEntities: boolean;
+ isDialogDisabled: boolean;
+};
+
const useGetLastBeaconCommand = (
store: AppStore,
beaconId: string,
@@ -92,10 +102,10 @@ export const BeaconMeta = observer((props) => {
// const { last, isDialogDisabled } = useCheckLastUnhidden('beacon', beacon?.hidden || false);
- // hooks not working? AAA
+ // hooks resolve promise? AAA
// const { cantHideEntities: last, isDialogDisabled: is2 } = useCheckNonHideableEntities(
- const testAAA = useCheckNonHideableEntities('beacon', beacon?.hidden || false, [beacon?.id || '']);
- console.log('testAAA: ', testAAA);
+ const beaconQueryResult = useCheckNonHideableEntities('Beacon', beacon?.hidden || false, [beacon?.id || '']);
+ console.log('beaconQueryResult: ', beaconQueryResult);
// test queryNonHideableEntities
const { data } = useQuery(
diff --git a/applications/client/src/views/Campaign/Explore/Panels/hooks/use-check-nonHideable-entities.ts b/applications/client/src/views/Campaign/Explore/Panels/hooks/use-check-nonHideable-entities.ts
index b5d21b0f..7d99ade1 100644
--- a/applications/client/src/views/Campaign/Explore/Panels/hooks/use-check-nonHideable-entities.ts
+++ b/applications/client/src/views/Campaign/Explore/Panels/hooks/use-check-nonHideable-entities.ts
@@ -3,60 +3,47 @@ import { useStore } from '@redeye/client/store';
import { useQuery } from '@tanstack/react-query';
import { useMemo } from 'react';
-export const useCheckNonHideableEntities = async (typeName: string, hidden: boolean, beaconIds: string[]) => {
+export const useCheckNonHideableEntities = async (typeName: 'Beacon' | 'Host', hidden: boolean, ids: string[]) => {
const store = useStore();
- // const last = useMemo(
- // () => data?.nonHideableEntities?.beacons?.[0] === beaconIds?.[0] || false,
- // // typeName === 'server'
- // // ? unhiddenServerCount === 1
- // // : typeName === 'host'
- // // ? unhiddenHostCount === 1
- // // : typeName === 'beacon'
- // // ? unhiddenBeaconCount === 1
- // // : false,
- // [typeName, unhiddenServerCount, unhiddenHostCount, unhiddenBeaconCount, data?.nonHideableEntities]
- // );
const entityIds = typeName === 'Beacon' ? 'beaconIds' : 'hostIds';
const { data } = useQuery(
['beacons', 'can-hide', store.campaign?.id],
async () =>
await store.graphqlStore.queryNonHideableEntities({
campaignId: store.campaign.id!,
- beaconIds,
+ [entityIds]: ids,
+ // beaconIds:ids,
// beaconIds: ['COMPUTER02-330588776'],
// beaconIds: ['COMPUTER03-500978634', 'COMPUTER03-1042756528'],
// beaconIds: store.campaign?.beaconGroupSelect.selectedBeacons.map((beaconId) => beaconId),
// beaconIds: ['COMPUTER02-1166658656', 'COMPUTER02-2146137244'],
- // [entityIds]: ['COMPUTER03-1042756528'],
})
);
+ // // Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
// const data = await store.graphqlStore.queryNonHideableEntities({
// campaignId: store.campaign.id!,
- // beaconIds,
+ // // ids,
// // beaconIds: ['COMPUTER02-330588776'],
// // beaconIds: ['COMPUTER03-500978634', 'COMPUTER03-1042756528'],
// // beaconIds: store.campaign?.beaconGroupSelect.selectedBeacons.map((beaconId) => beaconId),
// // beaconIds: ['COMPUTER02-1166658656', 'COMPUTER02-2146137244'],
- // // [entityIds]: ['COMPUTER03-1042756528'],
- // // beaconIds: ['COMPUTER02-1166658656', 'COMPUTER02-330588776', 'COMPUTER02-2146137244'],
+ // [entityIds]: ids,
// });
if (data?.nonHideableEntities) {
console.log(
'2',
store.campaign?.beaconGroupSelect.selectedBeacons.map((beaconId) => beaconId),
- beaconIds,
+ ids,
data?.nonHideableEntities?.beacons,
- beaconIds[0] === ['COMPUTER02-330588776'][0],
- data?.nonHideableEntities?.beacons?.[0] === beaconIds?.[0]
+ ids[0] === ['COMPUTER02-330588776'][0],
+ data?.nonHideableEntities?.beacons?.[0] === ids?.[0]
);
- // console.log(data?.nonHideableEntities, cantHideEntities, isDialogDisabled)
}
- // const last = (data?.nonHideable/Entities?.beacons?.length || 0) > 0;
- const cantHideEntities = useMemo(() => (data?.nonHideableEntities?.beacons?.length || 0) > 0, [beaconIds, data]);
+ const cantHideEntities = useMemo(() => (data?.nonHideableEntities?.beacons?.length || 0) > 0, [ids, data]);
const isDialogDisabled = useMemo(
() =>
From 8d3322c76368cb4b0447771a3d62cf761a4ea58b Mon Sep 17 00:00:00 2001
From: Huiqing Li
Date: Mon, 3 Apr 2023 16:50:15 -0700
Subject: [PATCH 31/57] auto close bulkMeta menu when dialog onClose
---
.../Campaign/Explore/Panels/BulkEdit.tsx | 106 +++++++++---------
1 file changed, 50 insertions(+), 56 deletions(-)
diff --git a/applications/client/src/views/Campaign/Explore/Panels/BulkEdit.tsx b/applications/client/src/views/Campaign/Explore/Panels/BulkEdit.tsx
index 98f97af7..1a718f00 100644
--- a/applications/client/src/views/Campaign/Explore/Panels/BulkEdit.tsx
+++ b/applications/client/src/views/Campaign/Explore/Panels/BulkEdit.tsx
@@ -50,8 +50,7 @@ export const BulkEdit = observer(
// [window.localStorage.getItem('disableDialog')]
// );
- const handleBulkShowClick = useCallback((e: React.SyntheticEvent) => {
- e.stopPropagation();
+ const handleBulkShowClick = useCallback(() => {
if (window.localStorage.getItem('disableDialog') === 'true') {
bulkShow.mutate();
} else {
@@ -60,62 +59,57 @@ export const BulkEdit = observer(
}
}, []);
- const handleBulkHideClick = useCallback(
- async (e: React.SyntheticEvent) => {
- e.stopPropagation();
- state.update('cantHideEntities', false);
- state.update('isDialogDisabled', window.localStorage.getItem('disableDialog') === 'true');
- // const entityIds = typeName === 'Beacon' ? 'beaconIds' : 'hostIds';
- const data =
- typeName === 'Beacon'
- ? await store.graphqlStore.queryNonHideableEntities({
- campaignId: store.campaign.id!,
- beaconIds: store.campaign?.beaconGroupSelect.selectedBeacons,
- })
- : await store.graphqlStore.queryNonHideableEntities({
- campaignId: store.campaign.id!,
- hostIds: [
- ...(store.campaign?.hostGroupSelect.selectedHosts || ''),
- ...(store.campaign?.hostGroupSelect.selectedServers || ''),
- ],
- });
- const cantHideEntities =
- ((typeName === 'Beacon'
- ? data?.nonHideableEntities.beacons?.length
- : [...(data?.nonHideableEntities.hosts || ''), ...(data?.nonHideableEntities.servers || '')]?.length) ||
- 0) > 0;
+ const handleBulkHideClick = useCallback(async () => {
+ state.update('cantHideEntities', false);
+ state.update('isDialogDisabled', window.localStorage.getItem('disableDialog') === 'true');
+ // const entityIds = typeName === 'Beacon' ? 'beaconIds' : 'hostIds';
+ const data =
+ typeName === 'Beacon'
+ ? await store.graphqlStore.queryNonHideableEntities({
+ campaignId: store.campaign.id!,
+ beaconIds: store.campaign?.beaconGroupSelect.selectedBeacons,
+ })
+ : await store.graphqlStore.queryNonHideableEntities({
+ campaignId: store.campaign.id!,
+ hostIds: [
+ ...(store.campaign?.hostGroupSelect.selectedHosts || ''),
+ ...(store.campaign?.hostGroupSelect.selectedServers || ''),
+ ],
+ });
+ const cantHideEntities =
+ ((typeName === 'Beacon'
+ ? data?.nonHideableEntities.beacons?.length
+ : [...(data?.nonHideableEntities.hosts || ''), ...(data?.nonHideableEntities.servers || '')]?.length) || 0) >
+ 0;
- const isDialogDisabled =
- (window.localStorage.getItem('disableDialog') === 'true' && !cantHideEntities) || false;
- state.update('cantHideEntities', cantHideEntities);
- state.update('isDialogDisabled', isDialogDisabled);
- // console.log(
- // store.campaign?.beaconGroupSelect.selectedBeacons,
- // data?.nonHideableEntities.beacons,
- // data?.nonHideableEntities.servers,
- // cantHideEntities,
- // isDialogDisabled,
- // state.isDialogDisabled,
- // window.localStorage.getItem('disableDialog') === 'true',
- // !cantHideEntities,
- // bulkHideState.showHide
- // );
+ const isDialogDisabled = (window.localStorage.getItem('disableDialog') === 'true' && !cantHideEntities) || false;
+ state.update('cantHideEntities', cantHideEntities);
+ state.update('isDialogDisabled', isDialogDisabled);
+ // console.log(
+ // store.campaign?.beaconGroupSelect.selectedBeacons,
+ // data?.nonHideableEntities.beacons,
+ // data?.nonHideableEntities.servers,
+ // cantHideEntities,
+ // isDialogDisabled,
+ // state.isDialogDisabled,
+ // window.localStorage.getItem('disableDialog') === 'true',
+ // !cantHideEntities,
+ // bulkHideState.showHide
+ // );
- if (isDialogDisabled) {
- bulkHide.mutate();
- } else {
- state.setBulkShow(false);
- bulkHideState.update('showHide', true);
- }
- },
- [
- store.campaign?.beaconGroupSelect.selectedBeacons,
- store.campaign?.hostGroupSelect.selectedHosts,
- state.bulkShow,
- state.cantHideEntities,
- state.isDialogDisabled,
- ]
- );
+ if (isDialogDisabled) {
+ bulkHide.mutate();
+ } else {
+ state.setBulkShow(false);
+ bulkHideState.update('showHide', true);
+ }
+ }, [
+ store.campaign?.beaconGroupSelect.selectedBeacons,
+ store.campaign?.hostGroupSelect.selectedHosts,
+ state.bulkShow,
+ state.cantHideEntities,
+ state.isDialogDisabled,
+ ]);
return (
<>
From f69f815a6da6cc501dccbdcab2235a4943724cef Mon Sep 17 00:00:00 2001
From: Huiqing Li
Date: Mon, 3 Apr 2023 17:00:09 -0700
Subject: [PATCH 32/57] dialog plurals update for bulkMeta count
---
.../views/Campaign/Explore/Panels/Meta/HideDialog.tsx | 10 +++++++---
1 file changed, 7 insertions(+), 3 deletions(-)
diff --git a/applications/client/src/views/Campaign/Explore/Panels/Meta/HideDialog.tsx b/applications/client/src/views/Campaign/Explore/Panels/Meta/HideDialog.tsx
index 8a2ab090..a9d7137e 100644
--- a/applications/client/src/views/Campaign/Explore/Panels/Meta/HideDialog.tsx
+++ b/applications/client/src/views/Campaign/Explore/Panels/Meta/HideDialog.tsx
@@ -49,7 +49,7 @@ export const ToggleHiddenDialog = observer(
};
const dialogTitle = isHidingFinal
- ? `Cannot hide final ${infoType.toLowerCase()}`
+ ? `Cannot hide final ${infoType.toLowerCase()}${bulk ? 's' : ''}`
: // : `${verb} this ${infoType.toLowerCase()}?`;
`${verb} ${bulk ? 'these' : 'this'} ${infoType.toLowerCase()}${bulk ? 's' : ''}?`;
@@ -59,8 +59,12 @@ export const ToggleHiddenDialog = observer(
{isHidingFinal ? (
<>
- {plural} this {infoType.toLowerCase()} will create a state in which the UI has no content. To hide this{' '}
- {infoType}, you must unhide another {infoType.toLowerCase()}.
+ {`${plural} ${
+ bulk ? 'these' : 'this'
+ } ${infoType.toLowerCase()} will create a state in which the UI has no content. To hide ${
+ bulk ? 'these ' : 'this '
+ }${infoType.toLowerCase()}${bulk ? 's' : ''}, you must
+ unhide another ${infoType.toLowerCase()}.`}
To unhide {infoType.toLowerCase()}s, toggle
From 5277d3ced7457d4019b3c4d0691a8faa47a108b7 Mon Sep 17 00:00:00 2001
From: Huiqing Li
Date: Tue, 4 Apr 2023 16:54:26 -0700
Subject: [PATCH 33/57] use checkNonHidden hooks for all meta tabs
---
.../Explore/Panels/Meta/BeaconMeta.tsx | 41 +++----------------
.../Campaign/Explore/Panels/Meta/HostMeta.tsx | 23 +++--------
.../Explore/Panels/Meta/ServerMeta.tsx | 23 +++--------
.../hooks/use-check-nonHideable-entities.ts | 41 +++++--------------
4 files changed, 27 insertions(+), 101 deletions(-)
diff --git a/applications/client/src/views/Campaign/Explore/Panels/Meta/BeaconMeta.tsx b/applications/client/src/views/Campaign/Explore/Panels/Meta/BeaconMeta.tsx
index 628d592d..3e1c9b74 100644
--- a/applications/client/src/views/Campaign/Explore/Panels/Meta/BeaconMeta.tsx
+++ b/applications/client/src/views/Campaign/Explore/Panels/Meta/BeaconMeta.tsx
@@ -2,7 +2,7 @@ import { Button, InputGroup, MenuItem } from '@blueprintjs/core';
import { DateInput2 } from '@blueprintjs/datetime2';
import { CarbonIcon, dateTimeFormat, isDefined } from '@redeye/client/components';
import { createState } from '@redeye/client/components/mobx-create-state';
-import type { AppStore, CantHideEntitiesModel, CommandGroupModel, CommandModel } from '@redeye/client/store';
+import type { AppStore, CommandGroupModel, CommandModel } from '@redeye/client/store';
import { BeaconType } from '@redeye/client/store/graphql/BeaconTypeEnum';
import { SortDirection, SortOption, useStore } from '@redeye/client/store';
import { InfoType } from '@redeye/client/types';
@@ -11,7 +11,7 @@ import { useMutation, useQuery } from '@tanstack/react-query';
import type { Ref } from 'mobx-keystone';
import { observer } from 'mobx-react-lite';
import moment from 'moment-timezone';
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
import type { ItemRenderer } from '@blueprintjs/select';
import { Select2 } from '@blueprintjs/select';
import { CaretDown16 } from '@carbon/icons-react';
@@ -21,16 +21,6 @@ import { MetaGridLayout, MetaLabel, MetaSection, SaveInputButton, ToggleHiddenBu
import { useToggleHidden } from '../hooks/use-toggle-hidden';
import { useCheckNonHideableEntities } from '../hooks/use-check-nonHideable-entities';
-type BeaconQueryResult = {
- data:
- | {
- nonHideableEntities: CantHideEntitiesModel;
- }
- | undefined;
- cantHideEntities: boolean;
- isDialogDisabled: boolean;
-};
-
const useGetLastBeaconCommand = (
store: AppStore,
beaconId: string,
@@ -100,30 +90,9 @@ export const BeaconMeta = observer((props) => {
},
});
- // const { last, isDialogDisabled } = useCheckLastUnhidden('beacon', beacon?.hidden || false);
-
- // hooks resolve promise? AAA
- // const { cantHideEntities: last, isDialogDisabled: is2 } = useCheckNonHideableEntities(
- const beaconQueryResult = useCheckNonHideableEntities('Beacon', beacon?.hidden || false, [beacon?.id || '']);
- console.log('beaconQueryResult: ', beaconQueryResult);
- // test queryNonHideableEntities
-
- const { data } = useQuery(
- ['beacons', 'can-hide', store.campaign?.id],
- async () =>
- await store.graphqlStore.queryNonHideableEntities({
- campaignId: store.campaign.id!,
- beaconIds: [beacon?.id!],
- })
- );
- const cantHideEntities = useMemo(() => (data?.nonHideableEntities?.beacons?.length || 0) > 0, [beacon?.id, data]);
-
- const isDialogDisabled = useMemo(
- () =>
- window.localStorage.getItem('disableDialog') === 'true' &&
- (!cantHideEntities || (cantHideEntities && beacon?.hidden)),
- [window.localStorage.getItem('disableDialog'), cantHideEntities, beacon?.hidden]
- );
+ const { cantHideEntities, isDialogDisabled } = useCheckNonHideableEntities('beacons', beacon?.hidden || false, [
+ beacon?.id || '',
+ ]);
useEffect(() => {
state.update('displayDeath', beacon?.meta?.[0]?.maybeCurrent?.endTime);
diff --git a/applications/client/src/views/Campaign/Explore/Panels/Meta/HostMeta.tsx b/applications/client/src/views/Campaign/Explore/Panels/Meta/HostMeta.tsx
index 084ffce4..b4bfffa5 100644
--- a/applications/client/src/views/Campaign/Explore/Panels/Meta/HostMeta.tsx
+++ b/applications/client/src/views/Campaign/Explore/Panels/Meta/HostMeta.tsx
@@ -3,12 +3,12 @@ import { createState } from '@redeye/client/components/mobx-create-state';
import { hostQuery, useStore } from '@redeye/client/store';
import { InfoType } from '@redeye/client/types';
import { Txt } from '@redeye/ui-styles';
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
import { observer } from 'mobx-react-lite';
-import { useMemo } from 'react';
import { ToggleHiddenDialog } from './HideDialog';
import { MetaGridLayout, MetaLabel, MetaSection, SaveInputButton, ToggleHiddenButton } from './MetaComponents';
import { useToggleHidden } from '../hooks/use-toggle-hidden';
+import { useCheckNonHideableEntities } from '../hooks/use-check-nonHideable-entities';
export const HostMeta = observer((props) => {
const store = useStore();
@@ -23,21 +23,10 @@ export const HostMeta = observer((props) => {
async () => await store.graphqlStore.mutateToggleHostHidden({ campaignId: store.campaign?.id!, hostId: host?.id! })
);
- const { data } = useQuery(
- ['hosts', 'can-hide', store.campaign?.id],
- async () =>
- await store.graphqlStore.queryNonHideableEntities({
- campaignId: store.campaign.id!,
- hostIds: [host?.id!],
- })
- );
- const cantHideEntities = useMemo(() => (data?.nonHideableEntities?.hosts?.length || 0) > 0, [host?.id, data]);
-
- const isDialogDisabled = useMemo(
- () =>
- window.localStorage.getItem('disableDialog') === 'true' &&
- (!cantHideEntities || (cantHideEntities && !!host?.current?.hidden)),
- [window.localStorage.getItem('disableDialog'), cantHideEntities, !!host?.current?.hidden]
+ const { cantHideEntities, isDialogDisabled } = useCheckNonHideableEntities(
+ 'hosts',
+ !!host?.current?.hidden || false,
+ [host?.id || '']
);
const { mutate: displayNameMutate } = useMutation(
diff --git a/applications/client/src/views/Campaign/Explore/Panels/Meta/ServerMeta.tsx b/applications/client/src/views/Campaign/Explore/Panels/Meta/ServerMeta.tsx
index 3abc38e3..9e121d5c 100644
--- a/applications/client/src/views/Campaign/Explore/Panels/Meta/ServerMeta.tsx
+++ b/applications/client/src/views/Campaign/Explore/Panels/Meta/ServerMeta.tsx
@@ -8,12 +8,12 @@ import { serverQuery, useStore } from '@redeye/client/store';
import { ServerType } from '@redeye/client/store/graphql/ServerTypeEnum';
import { InfoType } from '@redeye/client/types';
import { ToggleHiddenDialog } from '@redeye/client/views';
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
import { observer } from 'mobx-react-lite';
import { MenuItem2 } from '@blueprintjs/popover2';
-import { useMemo } from 'react';
import { MetaGridLayout, MetaLabel, MetaSection, SaveInputButton, ToggleHiddenButton } from './MetaComponents';
import { useToggleHidden } from '../hooks/use-toggle-hidden';
+import { useCheckNonHideableEntities } from '../hooks/use-check-nonHideable-entities';
export const ServerMeta = observer((props) => {
const store = useStore();
@@ -29,22 +29,9 @@ export const ServerMeta = observer((props) => {
},
});
- const { data } = useQuery(
- ['servers', 'can-hide', store.campaign?.id],
- async () =>
- await store.graphqlStore.queryNonHideableEntities({
- campaignId: store.campaign.id!,
- hostIds: [server?.id || ''],
- })
- );
- const cantHideEntities = useMemo(() => (data?.nonHideableEntities?.servers?.length || 0) > 0, [server?.id, data]);
-
- const isDialogDisabled = useMemo(
- () =>
- window.localStorage.getItem('disableDialog') === 'true' &&
- (!cantHideEntities || (cantHideEntities && !!server?.hidden)),
- [window.localStorage.getItem('disableDialog'), cantHideEntities, !!server?.hidden]
- );
+ const { cantHideEntities, isDialogDisabled } = useCheckNonHideableEntities('servers', !!server?.hidden, [
+ server?.id || '',
+ ]);
const { mutate: serverMetaUpdate } = useMutation(
async () => {
diff --git a/applications/client/src/views/Campaign/Explore/Panels/hooks/use-check-nonHideable-entities.ts b/applications/client/src/views/Campaign/Explore/Panels/hooks/use-check-nonHideable-entities.ts
index 7d99ade1..2f7912b9 100644
--- a/applications/client/src/views/Campaign/Explore/Panels/hooks/use-check-nonHideable-entities.ts
+++ b/applications/client/src/views/Campaign/Explore/Panels/hooks/use-check-nonHideable-entities.ts
@@ -1,49 +1,30 @@
-import type { HostModel, BeaconModel } from '@redeye/client/store';
import { useStore } from '@redeye/client/store';
import { useQuery } from '@tanstack/react-query';
import { useMemo } from 'react';
-export const useCheckNonHideableEntities = async (typeName: 'Beacon' | 'Host', hidden: boolean, ids: string[]) => {
+export const useCheckNonHideableEntities = (
+ typeName: 'beacons' | 'hosts' | 'servers',
+ hidden: boolean,
+ ids: string[]
+) => {
const store = useStore();
- const entityIds = typeName === 'Beacon' ? 'beaconIds' : 'hostIds';
+ const entityIds = typeName === 'beacons' ? 'beaconIds' : 'hostIds';
const { data } = useQuery(
- ['beacons', 'can-hide', store.campaign?.id],
+ [typeName, 'can-hide', store.campaign?.id, ids],
async () =>
await store.graphqlStore.queryNonHideableEntities({
campaignId: store.campaign.id!,
[entityIds]: ids,
- // beaconIds:ids,
+ // beaconIds: ids,
// beaconIds: ['COMPUTER02-330588776'],
// beaconIds: ['COMPUTER03-500978634', 'COMPUTER03-1042756528'],
// beaconIds: store.campaign?.beaconGroupSelect.selectedBeacons.map((beaconId) => beaconId),
- // beaconIds: ['COMPUTER02-1166658656', 'COMPUTER02-2146137244'],
+ // beaconIds: ['COMPUTER02-1166658656', 'COMPUTER02-330588776', 'COMPUTER02-2146137244'],
})
);
- // // Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
- // const data = await store.graphqlStore.queryNonHideableEntities({
- // campaignId: store.campaign.id!,
- // // ids,
- // // beaconIds: ['COMPUTER02-330588776'],
- // // beaconIds: ['COMPUTER03-500978634', 'COMPUTER03-1042756528'],
- // // beaconIds: store.campaign?.beaconGroupSelect.selectedBeacons.map((beaconId) => beaconId),
- // // beaconIds: ['COMPUTER02-1166658656', 'COMPUTER02-2146137244'],
- // [entityIds]: ids,
- // });
-
- if (data?.nonHideableEntities) {
- console.log(
- '2',
- store.campaign?.beaconGroupSelect.selectedBeacons.map((beaconId) => beaconId),
- ids,
- data?.nonHideableEntities?.beacons,
- ids[0] === ['COMPUTER02-330588776'][0],
- data?.nonHideableEntities?.beacons?.[0] === ids?.[0]
- );
- }
-
- const cantHideEntities = useMemo(() => (data?.nonHideableEntities?.beacons?.length || 0) > 0, [ids, data]);
+ const cantHideEntities = useMemo(() => (data?.nonHideableEntities?.[typeName]?.length || 0) > 0, [ids, data]);
const isDialogDisabled = useMemo(
() =>
@@ -51,6 +32,6 @@ export const useCheckNonHideableEntities = async (typeName: 'Beacon' | 'Host', h
[window.localStorage.getItem('disableDialog'), cantHideEntities, hidden]
);
- console.log('cantHideEntities: ', cantHideEntities, 'isDialogDisabled: ', isDialogDisabled);
+ // console.log('data', data, 'cantHideEntities: ', cantHideEntities, 'isDialogDisabled: ', isDialogDisabled);
return { data, cantHideEntities, isDialogDisabled };
};
From 867d93334a6f94c89a2662d2b6c2a872cc671d93 Mon Sep 17 00:00:00 2001
From: Huiqing Li
Date: Tue, 4 Apr 2023 17:08:36 -0700
Subject: [PATCH 34/57] change typeName to beacons/hosts to match with backend
---
.../client/src/views/Campaign/Explore/Explore.tsx | 4 ++--
.../client/src/views/Campaign/Explore/Panels/BulkEdit.tsx | 8 ++++----
2 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/applications/client/src/views/Campaign/Explore/Explore.tsx b/applications/client/src/views/Campaign/Explore/Explore.tsx
index 1d3401ae..f131d3bc 100644
--- a/applications/client/src/views/Campaign/Explore/Explore.tsx
+++ b/applications/client/src/views/Campaign/Explore/Explore.tsx
@@ -216,7 +216,7 @@ export const Explore = observer(({ ...props }) => {
{store.router?.params.tab === Tabs.HOSTS && store.campaign?.hostGroupSelect.groupSelect && (
(({ ...props }) => {
{store.router?.params.tab === Tabs.BEACONS && store.campaign?.beaconGroupSelect.groupSelect && (
& {
- typeName: 'Host' | 'Beacon';
+ typeName: 'hosts' | 'beacons';
count: number;
bulkShow: UseMutationResult;
bulkHide: UseMutationResult;
@@ -64,7 +64,7 @@ export const BulkEdit = observer(
state.update('isDialogDisabled', window.localStorage.getItem('disableDialog') === 'true');
// const entityIds = typeName === 'Beacon' ? 'beaconIds' : 'hostIds';
const data =
- typeName === 'Beacon'
+ typeName === 'beacons'
? await store.graphqlStore.queryNonHideableEntities({
campaignId: store.campaign.id!,
beaconIds: store.campaign?.beaconGroupSelect.selectedBeacons,
@@ -77,7 +77,7 @@ export const BulkEdit = observer(
],
});
const cantHideEntities =
- ((typeName === 'Beacon'
+ ((typeName === 'beacons'
? data?.nonHideableEntities.beacons?.length
: [...(data?.nonHideableEntities.hosts || ''), ...(data?.nonHideableEntities.servers || '')]?.length) || 0) >
0;
@@ -159,7 +159,7 @@ export const BulkEdit = observer(
{
e.stopPropagation();
From 8616d989937a7d736bc4329b01449cf3debb52b2 Mon Sep 17 00:00:00 2001
From: Huiqing Li
Date: Wed, 5 Apr 2023 14:37:33 -0700
Subject: [PATCH 35/57] omg indeterminate state finally done for beacon/host
checkbox...
---
.../client/src/store/campaign/campaign.ts | 10 +++++++
.../src/views/Campaign/Explore/Explore.tsx | 8 +++++-
.../Campaign/Explore/Panels/Beacon/Beacon.tsx | 9 ++++---
.../Campaign/Explore/Panels/BulkEdit.tsx | 27 ++++++++++---------
.../Campaign/Explore/Panels/Host/Host.tsx | 15 ++++++++---
.../Explore/components/ControlBar.tsx | 6 ++++-
6 files changed, 53 insertions(+), 22 deletions(-)
diff --git a/applications/client/src/store/campaign/campaign.ts b/applications/client/src/store/campaign/campaign.ts
index 8309f560..3291fa78 100644
--- a/applications/client/src/store/campaign/campaign.ts
+++ b/applications/client/src/store/campaign/campaign.ts
@@ -29,6 +29,12 @@ export enum CampaignLoadingMessage {
DONE = 'Done',
}
+export enum Status {
+ READY = 'ready',
+ LOADING = 'loading',
+ CANT_HIDE = 'cantHide',
+}
+
@model('CampaignStore')
export class CampaignStore extends ExtendedModel(() => ({
baseModel: modelClass(RedEyeModel),
@@ -48,6 +54,8 @@ export class CampaignStore extends ExtendedModel(() => ({
fetchEnabled: prop(true).withSetter(),
isLoading: prop('').withSetter().withSetter(),
error: prop('').withSetter(),
+
+ // Bulk Selection
hostGroupSelect: prop<{
groupSelect: boolean;
selectedHosts: string[];
@@ -57,6 +65,8 @@ export class CampaignStore extends ExtendedModel(() => ({
groupSelect: boolean;
selectedBeacons: string[];
}>(() => ({ groupSelect: false, selectedBeacons: [] })).withSetter(),
+ bulkSelectStatus: prop(() => Status.READY).withSetter(),
+ bulkSelectCantHideEntityIds: prop(() => []).withSetter(),
},
})) {
@observable sortMemory: {
diff --git a/applications/client/src/views/Campaign/Explore/Explore.tsx b/applications/client/src/views/Campaign/Explore/Explore.tsx
index f131d3bc..e25b28ef 100644
--- a/applications/client/src/views/Campaign/Explore/Explore.tsx
+++ b/applications/client/src/views/Campaign/Explore/Explore.tsx
@@ -4,7 +4,7 @@ import { Launch16 } from '@carbon/icons-react';
import { css } from '@emotion/react';
import { CarbonIcon, ScrollBox } from '@redeye/client/components';
import { createState } from '@redeye/client/components/mobx-create-state';
-import { SortDirection, useStore } from '@redeye/client/store';
+import { SortDirection, Status, useStore } from '@redeye/client/store';
import { InfoType, Tabs } from '@redeye/client/types/explore';
import { TabsStyled, CoreTokens } from '@redeye/ui-styles';
import { autorun } from 'mobx';
@@ -146,6 +146,12 @@ export const Explore = observer(({ ...props }) => {
selectedServers: [],
});
}
+ if (store.campaign?.bulkSelectCantHideEntityIds.length > 0) {
+ store.campaign?.setBulkSelectCantHideEntityIds([]);
+ }
+ if (store.campaign?.bulkSelectStatus !== Status.READY) {
+ store.campaign?.setBulkSelectStatus(Status.READY);
+ }
}, [store.router.params.tab]);
return (
diff --git a/applications/client/src/views/Campaign/Explore/Panels/Beacon/Beacon.tsx b/applications/client/src/views/Campaign/Explore/Panels/Beacon/Beacon.tsx
index 1beac2e6..d2c7bace 100644
--- a/applications/client/src/views/Campaign/Explore/Panels/Beacon/Beacon.tsx
+++ b/applications/client/src/views/Campaign/Explore/Panels/Beacon/Beacon.tsx
@@ -93,10 +93,13 @@ export const BeaconRow = observer(({ beacon, ...props }) => {
{store.campaign?.beaconGroupSelect.groupSelect && (
+ indeterminate={store.campaign.bulkSelectCantHideEntityIds.includes(beacon?.id)}
+ onClick={(e) => {
+ const cantHideEntityIds = store.campaign.bulkSelectCantHideEntityIds.filter((id) => id !== beacon?.id);
+ store.campaign.setBulkSelectCantHideEntityIds(cantHideEntityIds);
// @ts-ignore
- e.target.checked && beacon?.id ? state.AddBeacon(beacon?.id) : state.RemoveBeacon(beacon?.id!)
- }
+ return e.target.checked && beacon?.id ? state.AddBeacon(beacon?.id) : state.RemoveBeacon(beacon?.id!);
+ }}
css={css`
margin-bottom: 0;
`}
diff --git a/applications/client/src/views/Campaign/Explore/Panels/BulkEdit.tsx b/applications/client/src/views/Campaign/Explore/Panels/BulkEdit.tsx
index 388c6c3b..3cdf39de 100644
--- a/applications/client/src/views/Campaign/Explore/Panels/BulkEdit.tsx
+++ b/applications/client/src/views/Campaign/Explore/Panels/BulkEdit.tsx
@@ -43,6 +43,9 @@ export const BulkEdit = observer(
setBulkShow(bool: boolean) {
this.bulkShow = bool;
},
+ updateBulkSelect(ids: string[]) {
+ store.campaign.setBulkSelectCantHideEntityIds(ids);
+ },
});
// const isDialogDisabled = useMemo(
@@ -76,6 +79,13 @@ export const BulkEdit = observer(
...(store.campaign?.hostGroupSelect.selectedServers || ''),
],
});
+ const cantHideEntityIds =
+ (typeName === 'beacons'
+ ? data?.nonHideableEntities.beacons?.slice()
+ : [
+ ...(data?.nonHideableEntities.hosts?.slice() || ''),
+ ...(data?.nonHideableEntities.servers?.slice() || ''),
+ ]) || [];
const cantHideEntities =
((typeName === 'beacons'
? data?.nonHideableEntities.beacons?.length
@@ -85,17 +95,7 @@ export const BulkEdit = observer(
const isDialogDisabled = (window.localStorage.getItem('disableDialog') === 'true' && !cantHideEntities) || false;
state.update('cantHideEntities', cantHideEntities);
state.update('isDialogDisabled', isDialogDisabled);
- // console.log(
- // store.campaign?.beaconGroupSelect.selectedBeacons,
- // data?.nonHideableEntities.beacons,
- // data?.nonHideableEntities.servers,
- // cantHideEntities,
- // isDialogDisabled,
- // state.isDialogDisabled,
- // window.localStorage.getItem('disableDialog') === 'true',
- // !cantHideEntities,
- // bulkHideState.showHide
- // );
+ state.updateBulkSelect(cantHideEntityIds);
if (isDialogDisabled) {
bulkHide.mutate();
@@ -115,8 +115,8 @@ export const BulkEdit = observer(
<>
- {count} {typeName}
- {count === 1 ? '' : 's'} Selected
+ {count} {typeName === 'beacons' ? 'Beacon' : 'Host'}
+ {count <= 1 ? '' : 's'} Selected
(
hasBackdrop: true,
}}
stopPropagation
+ disabled={count === 0}
icon={