[master] fix: Fix the z-index of monitorController modal (#4378)

fix: Fix Index of monitorController modal Signed-off-by: lannyfu <[email protected]> Co-authored-by: lannyfu <[email protected]>
kubesphere · Dec 23, 2024 · 138b52e · 138b52e
1 parent 33a987c
commit 138b52e
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/packages/shared/src/components/Base/Card/MonitorController/Modal/index.tsx b/packages/shared/src/components/Base/Card/MonitorController/Modal/index.tsx
@@ -161,6 +161,7 @@ function MonitorControllerModal({
         step={initializeParams.step}
         times={initializeParams.times}
         onChange={handleChange}
+        zIndex={1000}
       />
       {renderAutoRefresh}
       <IconButton onClick={handleRefresh}>

diff --git a/packages/shared/src/components/TimeSelector/CustomRange.tsx b/packages/shared/src/components/TimeSelector/CustomRange.tsx
@@ -27,6 +27,7 @@ interface Props {
   timeOps?: string[];
   onSubmit?: (value: ValueType) => void;
   onCancel?: () => void;
+  zIndex?: number;
 }
 
 interface FormValue {
@@ -77,6 +78,7 @@ function CustomRange({
   timeOps = DEFAULT_TIME_OPTIONS,
   onSubmit,
   onCancel,
+  zIndex = 100,
 }: Props) {
   const formRef = useRef<FormInstance<FormValue>>(null);
 
@@ -120,7 +122,7 @@ function CustomRange({
             disabledDate={disabledDate}
             disabledTime={disabledRangeTime}
             showTime
-            popupStyle={{ zIndex: 100 }}
+            popupStyle={{ zIndex }}
             showNow={false}
             format="YYYY-MM-DD HH:mm:ss"
           ></DatePicker>
@@ -129,7 +131,7 @@ function CustomRange({
           <DatePicker
             disabledDate={disabledDate}
             disabledTime={disabledRangeTime}
-            popupStyle={{ zIndex: 100 }}
+            popupStyle={{ zIndex }}
             showTime
             showNow={false}
             format="YYYY-MM-DD HH:mm:ss"

diff --git a/packages/shared/src/components/TimeSelector/index.tsx b/packages/shared/src/components/TimeSelector/index.tsx
@@ -22,6 +22,7 @@ interface Props {
   onChange?: (val: Omit<ValueType, 'lastTime'>) => void;
   onToggle?: (toggled: boolean) => void;
   timeOps?: string[];
+  zIndex?: number;
 }
 
 function TimeSelector({
@@ -34,6 +35,7 @@ function TimeSelector({
   timeOps,
   onChange,
   onToggle,
+  zIndex,
 }: Props) {
   const [visible, setVisible] = useState<boolean>(false);
   const [selfValue, setSelfValue] = useState<ValueType>({
@@ -101,6 +103,7 @@ function TimeSelector({
             showStep={showStep}
             onSubmit={handleTimeChange}
             onCancel={hideSelector}
+            zIndex={zIndex}
           />
         )}
       </Content>