jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Support absolute date operator type

Browse Source 
Summary: Project doc: https://docs.google.com/document/d/1miofxds9DJgWScj0zFyBbdpRH5Rj0T9FqiCapof5-vU

Reviewed By: lblasa

Differential Revision: D48644510

fbshipit-source-id: 0a1a382f3052c0e1e1f78ad6e8c51211fb78f9ce
This commit is contained in:
Andrey Goncharov
2023-08-30 07:26:35 -07:00
committed by Facebook GitHub Bot
parent 7b9ddb617f
commit cb6dd36dc1
6 changed files with 124 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
desktop/flipper-plugin/package.json
View File

@@ -16,6 +16,7 @@
"@types/react": "17.0.39",
"@types/react-color": "^3.0.6",
"@types/react-dom": "^17.0.13",
"dayjs": "^1.11.9",
"eventemitter3": "^4.0.7",
"flipper-common": "0.0.0",
"flipper-plugin-core": "0.0.0",

75
desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchAbsoluteDateTerm.tsx Normal file
View File

@@ -0,0 +1,75 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
import {DatePicker, DatePickerProps} from 'antd';
import React from 'react';
type PowerSearchAbsoluteTermProps = {
onCancel: () => void;
onChange: (value: Date) => void;
dateOnly?: boolean;
minValue?: Date;
maxValue?: Date;
};
export const DATE_ONLY_FORMAT = 'YYYY-MM-DD';
export const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
export const PowerSearchAbsoluteDateTerm: React.FC<
PowerSearchAbsoluteTermProps
> = ({onCancel, onChange, dateOnly, minValue, maxValue}) => {
const disabledDate: DatePickerProps['disabledDate'] = React.useCallback(
(date) => {
if (minValue !== undefined && date < minValue) {
return true;
}
if (maxValue !== undefined && date > maxValue) {
return true;
}
return false;
},
[minValue, maxValue],
);
const format = dateOnly ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss';
const valueRef = React.useRef<Date>();
return (
<DatePicker
autoFocus
style={{width: 100}}
placeholder="..."
format={format}
onChange={(newValue) => {
if (!newValue) {
onCancel();
return;
}
const newDate = newValue.toDate();
valueRef.current = newDate;
onChange(newDate);
}}
onKeyDown={(event) => {
if (event.key === 'Escape') {
onCancel();
}
}}
onBlur={() => {
if (!valueRef.current) {
onCancel();
}
}}
disabledDate={disabledDate}
showTime={!dateOnly}
defaultOpen
/>
);
};

1
desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchConfig.tsx
View File

@@ -35,7 +35,6 @@ export type AbsoluteDateOperatorConfig = {
dateOnly?: boolean;
minValue?: Date;
maxValue?: Date;
isNegative?: boolean;
};
export type OperatorConfig =

11
desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchExampleConfig.tsx
View File

@@ -77,14 +77,12 @@ const operators = {
newer_than_absolute_date: {
key: 'newer_than_absolute_date',
label: 'is after',
isNegative: false,
valueType: 'ABSOLUTE_DATE',
dateOnly: false,
},
newer_than_absolute_date_no_time: {
key: 'newer_than_absolute_date_no_time',
label: 'is after the day',
isNegative: false,
valueType: 'ABSOLUTE_DATE',
dateOnly: true,
},
@@ -138,6 +136,15 @@ export const powerSearchExampleConfig: PowerSearchConfig = {
less_than_float: operators.less_than_float,
},
},
date: {
key: 'date',
label: 'Date',
operators: {
newer_than_absolute_date_no_time:
operators.newer_than_absolute_date_no_time,
newer_than_absolute_date: operators.newer_than_absolute_date,
},
},
caller: {
key: 'caller',
label: 'Caller',

34
desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx
View File

@@ -9,7 +9,13 @@
import {CloseOutlined} from '@ant-design/icons';
import {Button, Space} from 'antd';
import dayjs from 'dayjs';
import * as React from 'react';
import {
DATE_ONLY_FORMAT,
DATE_TIME_FORMAT,
PowerSearchAbsoluteDateTerm,
} from './PowerSearchAbsoluteDateTerm';
import {FieldConfig, OperatorConfig} from './PowerSearchConfig';
import {PowerSearchEnumTerm} from './PowerSearchEnumTerm';
import {PowerSearchFloatTerm} from './PowerSearchFloatTerm';
@@ -101,10 +107,26 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
);
break;
}
case 'ABSOLUTE_DATE': {
searchValueComponent = (
<PowerSearchAbsoluteDateTerm
onCancel={onCancel}
onChange={(newValue) => {
onFinalize({
...searchTerm,
searchValue: newValue,
});
}}
minValue={searchTerm.operator.minValue}
maxValue={searchTerm.operator.maxValue}
dateOnly={searchTerm.operator.dateOnly}
/>
);
break;
}
default: {
console.error(
'PowerSearchTerm -> unknown operator.valueType',
searchTerm.operator.valueType,
searchTerm,
);
}
@@ -119,6 +141,16 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
);
break;
}
case 'ABSOLUTE_DATE': {
searchValueComponent = (
<Button>
{searchTerm.operator.dateOnly
? dayjs(searchTerm.searchValue).format(DATE_ONLY_FORMAT)
: dayjs(searchTerm.searchValue).format(DATE_TIME_FORMAT)}
</Button>
);
break;
}
case 'NO_VALUE': {
searchValueComponent = null;
break;

5
desktop/yarn.lock
View File

@@ -6836,6 +6836,11 @@ dayjs@1.x:
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.7.tgz#2cf5f91add28116748440866a0a1d26f3a6ce468"
integrity sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==
dayjs@^1.11.9:
version "1.11.9"
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.9.tgz#9ca491933fadd0a60a2c19f6c237c03517d71d1a"
integrity sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA==
debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6.9, debug@~2.6.3:
version "2.6.9"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"