Chore: change query log time range (#28052)

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
2025-11-10 18:39:12 +08:00
parent b9bc48d8dd
commit 2c62a77cf4
18 changed files with 410 additions and 48 deletions
--- a/web/app/components/base/date-and-time-picker/calendar/index.tsx
+++ b/web/app/components/base/date-and-time-picker/calendar/index.tsx
@@ -8,9 +8,10 @@ const Calendar: FC<CalendarProps> = ({
  selectedDate,
  onDateClick,
  wrapperClassName,
+  getIsDateDisabled,
 }) => {
  return <div className={wrapperClassName}>
-    <DaysOfWeek/>
+    <DaysOfWeek />
    <div className='grid grid-cols-7 gap-0.5 p-2'>
      {
        days.map(day => <CalendarItem
@@ -18,6 +19,7 @@ const Calendar: FC<CalendarProps> = ({
          day={day}
          selectedDate={selectedDate}
          onClick={onDateClick}
+          isDisabled={getIsDateDisabled ? getIsDateDisabled(day.date) : false}
        />)
      }
    </div>
--- a/web/app/components/base/date-and-time-picker/calendar/item.tsx
+++ b/web/app/components/base/date-and-time-picker/calendar/item.tsx
@@ -7,6 +7,7 @@ const Item: FC<CalendarItemProps> = ({
  day,
  selectedDate,
  onClick,
+  isDisabled,
 }) => {
  const { date, isCurrentMonth } = day
  const isSelected = selectedDate?.isSame(date, 'date')
@@ -14,11 +15,12 @@ const Item: FC<CalendarItemProps> = ({

  return (
    <button type="button"
-      onClick={() => onClick(date)}
+      onClick={() => !isDisabled && onClick(date)}
      className={cn(
        'system-sm-medium relative flex items-center justify-center rounded-lg px-1 py-2',
        isCurrentMonth ? 'text-text-secondary' : 'text-text-quaternary hover:text-text-secondary',
        isSelected ? 'system-sm-medium bg-components-button-primary-bg text-components-button-primary-text' : 'hover:bg-state-base-hover',
+        isDisabled && 'cursor-not-allowed text-text-quaternary hover:bg-transparent',
      )}
    >
      {date.date()}
--- a/web/app/components/base/date-and-time-picker/date-picker/index.tsx
+++ b/web/app/components/base/date-and-time-picker/date-picker/index.tsx
@@ -36,6 +36,8 @@ const DatePicker = ({
  renderTrigger,
  triggerWrapClassName,
  popupZIndexClassname = 'z-[11]',
+  noConfirm,
+  getIsDateDisabled,
 }: DatePickerProps) => {
  const { t } = useTranslation()
  const [isOpen, setIsOpen] = useState(false)
@@ -120,11 +122,20 @@ const DatePicker = ({
    setCurrentDate(currentDate.clone().subtract(1, 'month'))
  }, [currentDate])

+  const handleConfirmDate = useCallback((passedInSelectedDate?: Dayjs) => {
+    // passedInSelectedDate may be a click event when noConfirm is false
+    const nextDate = (dayjs.isDayjs(passedInSelectedDate) ? passedInSelectedDate : selectedDate)
+    onChange(nextDate ? nextDate.tz(timezone) : undefined)
+    setIsOpen(false)
+  }, [selectedDate, onChange, timezone])
+
  const handleDateSelect = useCallback((day: Dayjs) => {
    const newDate = cloneTime(day, selectedDate || getDateWithTimezone({ timezone }))
    setCurrentDate(newDate)
    setSelectedDate(newDate)
-  }, [selectedDate, timezone])
+    if (noConfirm)
+      handleConfirmDate(newDate)
+  }, [selectedDate, timezone, noConfirm, handleConfirmDate])

  const handleSelectCurrentDate = () => {
    const newDate = getDateWithTimezone({ timezone })
@@ -134,12 +145,6 @@ const DatePicker = ({
    setIsOpen(false)
  }

-  const handleConfirmDate = () => {
-    // debugger
-    onChange(selectedDate ? selectedDate.tz(timezone) : undefined)
-    setIsOpen(false)
-  }
-
  const handleClickTimePicker = () => {
    if (view === ViewType.date) {
      setView(ViewType.time)
@@ -270,6 +275,7 @@ const DatePicker = ({
                days={days}
                selectedDate={selectedDate}
                onDateClick={handleDateSelect}
+                getIsDateDisabled={getIsDateDisabled}
              />
            ) : view === ViewType.yearMonth ? (
              <YearAndMonthPickerOptions
@@ -290,7 +296,7 @@ const DatePicker = ({

          {/* Footer */}
          {
-            [ViewType.date, ViewType.time].includes(view) ? (
+            [ViewType.date, ViewType.time].includes(view) && !noConfirm && (
              <DatePickerFooter
                needTimePicker={needTimePicker}
                displayTime={displayTime}
@@ -299,7 +305,10 @@ const DatePicker = ({
                handleSelectCurrentDate={handleSelectCurrentDate}
                handleConfirmDate={handleConfirmDate}
              />
-            ) : (
+            )
+          }
+          {
+            ![ViewType.date, ViewType.time].includes(view) && (
              <YearAndMonthPickerFooter
                handleYearMonthCancel={handleYearMonthCancel}
                handleYearMonthConfirm={handleYearMonthConfirm}
--- a/web/app/components/base/date-and-time-picker/types.ts
+++ b/web/app/components/base/date-and-time-picker/types.ts
@@ -30,6 +30,8 @@ export type DatePickerProps = {
  renderTrigger?: (props: TriggerProps) => React.ReactNode
  minuteFilter?: (minutes: string[]) => string[]
  popupZIndexClassname?: string
+  noConfirm?: boolean
+  getIsDateDisabled?: (date: Dayjs) => boolean
 }

 export type DatePickerHeaderProps = {
@@ -80,12 +82,14 @@ export type CalendarProps = {
  selectedDate: Dayjs | undefined
  onDateClick: (date: Dayjs) => void
  wrapperClassName?: string
+  getIsDateDisabled?: (date: Dayjs) => boolean
 }

 export type CalendarItemProps = {
  day: Day
  selectedDate: Dayjs | undefined
  onClick: (date: Dayjs) => void
+  isDisabled: boolean
 }

 export type TimeOptionsProps = {
--- a/web/app/components/base/icons/assets/vender/other/hourglass-shape.svg
+++ b/web/app/components/base/icons/assets/vender/other/hourglass-shape.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 14C8 11.7909 6.20914 10 4 10C1.79086 10 0 11.7909 0 14V0C8.05332e-08 2.20914 1.79086 4 4 4C6.20914 4 8 2.20914 8 0V14Z" fill="#C8CEDA" fill-opacity="1"/>
+</svg>
--- a/web/app/components/base/icons/src/vender/other/HourglassShape.json
+++ b/web/app/components/base/icons/src/vender/other/HourglassShape.json
@@ -0,0 +1,27 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "8",
+			"height": "14",
+			"viewBox": "0 0 8 14",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M8 14C8 11.7909 6.20914 10 4 10C1.79086 10 0 11.7909 0 14V0C8.05332e-08 2.20914 1.79086 4 4 4C6.20914 4 8 2.20914 8 0V14Z",
+					"fill": "currentColor",
+					"fill-opacity": "1"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "HourglassShape"
+}
--- a/web/app/components/base/icons/src/vender/other/HourglassShape.tsx
+++ b/web/app/components/base/icons/src/vender/other/HourglassShape.tsx
@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './HourglassShape.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>;
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'HourglassShape'
+
+export default Icon
--- a/web/app/components/base/icons/src/vender/other/index.ts
+++ b/web/app/components/base/icons/src/vender/other/index.ts
@@ -1,6 +1,7 @@
 export { default as AnthropicText } from './AnthropicText'
 export { default as Generator } from './Generator'
 export { default as Group } from './Group'
+export { default as HourglassShape } from './HourglassShape'
 export { default as Mcp } from './Mcp'
 export { default as NoToolPlaceholder } from './NoToolPlaceholder'
 export { default as Openai } from './Openai'
--- a/web/app/components/base/select/index.tsx
+++ b/web/app/components/base/select/index.tsx
@@ -31,7 +31,7 @@ export type Item = {
 export type ISelectProps = {
  className?: string
  wrapperClassName?: string
-  renderTrigger?: (value: Item | null) => React.JSX.Element | null
+  renderTrigger?: (value: Item | null, isOpen: boolean) => React.JSX.Element | null
  items?: Item[]
  defaultValue?: number | string
  disabled?: boolean
@@ -216,7 +216,7 @@ const SimpleSelect: FC<ISelectProps> = ({
    >
      {({ open }) => (
        <div className={classNames('group/simple-select relative h-9', wrapperClassName)}>
-          {renderTrigger && <ListboxButton className='w-full'>{renderTrigger(selectedItem)}</ListboxButton>}
+          {renderTrigger && <ListboxButton className='w-full'>{renderTrigger(selectedItem, open)}</ListboxButton>}
          {!renderTrigger && (
            <ListboxButton onClick={() => {
              onOpenChange?.(open)