mirror of
https://github.com/kubeshark/kubeshark.git
synced 2025-07-24 13:10:51 +00:00
Merge branch 'develop' into feature/multiarch_build
This commit is contained in:
commit
f973748c61
@ -9,6 +9,8 @@ import filterUIExample2 from "./assets/filter-ui-example-2.png"
|
||||
import variables from '../variables.module.scss';
|
||||
import {useRecoilState} from "recoil";
|
||||
import queryAtom from "../recoil/query";
|
||||
import useKeyPress from "../hooks/useKeyPress"
|
||||
import shortcutsKeyboard from "../configs/shortcutsKeyboard"
|
||||
|
||||
interface FiltersProps {
|
||||
backgroundColor: string
|
||||
@ -60,6 +62,8 @@ export const QueryForm: React.FC<QueryFormProps> = ({backgroundColor, ws, openWe
|
||||
setQuery(e.target.value);
|
||||
}
|
||||
|
||||
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
ws.close();
|
||||
if (query) {
|
||||
@ -70,6 +74,8 @@ export const QueryForm: React.FC<QueryFormProps> = ({backgroundColor, ws, openWe
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
useKeyPress(shortcutsKeyboard.ctrlEnter, handleSubmit, formRef.current);
|
||||
|
||||
return <>
|
||||
<form
|
||||
ref={formRef}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { Button } from "@material-ui/core";
|
||||
import React, { useState } from "react";
|
||||
import React, { useState,useRef } from "react";
|
||||
import { adminUsername } from "../consts";
|
||||
import Api, { FormValidationErrorType } from "../helpers/api";
|
||||
import { toast } from 'react-toastify';
|
||||
@ -7,6 +7,9 @@ import LoadingOverlay from "./LoadingOverlay";
|
||||
import { useCommonStyles } from "../helpers/commonStyle";
|
||||
import {useSetRecoilState} from "recoil";
|
||||
import entPageAtom, {Page} from "../recoil/entPage";
|
||||
import useKeyPress from "../hooks/useKeyPress"
|
||||
import shortcutsKeyboard from "../configs/shortcutsKeyboard"
|
||||
|
||||
|
||||
const api = Api.getInstance();
|
||||
|
||||
@ -16,6 +19,7 @@ interface InstallPageProps {
|
||||
|
||||
export const InstallPage: React.FC<InstallPageProps> = ({onFirstLogin}) => {
|
||||
|
||||
const formRef = useRef(null);
|
||||
const classes = useCommonStyles();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [password, setPassword] = useState("");
|
||||
@ -54,13 +58,9 @@ export const InstallPage: React.FC<InstallPageProps> = ({onFirstLogin}) => {
|
||||
|
||||
}
|
||||
|
||||
const handleFormOnKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Enter") {
|
||||
onFormSubmit();
|
||||
}
|
||||
};
|
||||
useKeyPress(shortcutsKeyboard.enter, onFormSubmit, formRef.current);
|
||||
|
||||
return <div className="centeredForm" onKeyPress={handleFormOnKeyPress}>
|
||||
return <div className="centeredForm" ref={formRef}>
|
||||
{isLoading && <LoadingOverlay/>}
|
||||
<div className="form-title left-text">Setup</div>
|
||||
<span className="form-subtitle">Welcome to Mizu, please set up the admin user to continue</span>
|
||||
|
@ -1,11 +1,14 @@
|
||||
import { Button } from "@material-ui/core";
|
||||
import React, { useState } from "react";
|
||||
import React, { useState,useRef } from "react";
|
||||
import { toast } from "react-toastify";
|
||||
import Api from "../helpers/api";
|
||||
import { useCommonStyles } from "../helpers/commonStyle";
|
||||
import LoadingOverlay from "./LoadingOverlay";
|
||||
import entPageAtom, {Page} from "../recoil/entPage";
|
||||
import {useSetRecoilState} from "recoil";
|
||||
import useKeyPress from "../hooks/useKeyPress"
|
||||
import shortcutsKeyboard from "../configs/shortcutsKeyboard"
|
||||
|
||||
|
||||
const api = Api.getInstance();
|
||||
|
||||
@ -15,6 +18,7 @@ const LoginPage: React.FC = () => {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const formRef = useRef(null);
|
||||
|
||||
const setEntPage = useSetRecoilState(entPageAtom);
|
||||
|
||||
@ -36,13 +40,9 @@ const LoginPage: React.FC = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleFormOnKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Enter") {
|
||||
onFormSubmit();
|
||||
}
|
||||
};
|
||||
useKeyPress(shortcutsKeyboard.enter, onFormSubmit, formRef.current);
|
||||
|
||||
return <div className="centeredForm" onKeyPress={handleFormOnKeyPress}>
|
||||
return <div className="centeredForm" ref={formRef}>
|
||||
{isLoading && <LoadingOverlay/>}
|
||||
<div className="form-title left-text">Login</div>
|
||||
<div className="form-input">
|
||||
|
7
ui/src/configs/shortcutsKeyboard.ts
Normal file
7
ui/src/configs/shortcutsKeyboard.ts
Normal file
@ -0,0 +1,7 @@
|
||||
const dictionary = {
|
||||
ctrlEnter : [{metaKey : true, code:"Enter"}, {ctrlKey:true, code:"Enter"}], // support Ctrl/command
|
||||
enter : [{code:"Enter"}]
|
||||
};
|
||||
|
||||
|
||||
export default dictionary;
|
35
ui/src/hooks/useKeyPress.ts
Normal file
35
ui/src/hooks/useKeyPress.ts
Normal file
@ -0,0 +1,35 @@
|
||||
import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
|
||||
|
||||
const useKeyPress = (eventConfigs, callback, node = null) => {
|
||||
// implement the callback ref pattern
|
||||
const callbackRef = useRef(callback);
|
||||
useLayoutEffect(() => {
|
||||
callbackRef.current = callback;
|
||||
});
|
||||
|
||||
// handle what happens on key press
|
||||
const handleKeyPress = useCallback(
|
||||
(event) => {
|
||||
// check if one of the key is part of the ones we want
|
||||
if (eventConfigs.some((eventConfig) => Object.keys(eventConfig).every(nameKey => eventConfig[nameKey] === event[nameKey]))) {
|
||||
callbackRef.current(event);
|
||||
}
|
||||
},
|
||||
[eventConfigs]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
// target is either the provided node or the document
|
||||
const targetNode = node ?? document;
|
||||
// attach the event listener
|
||||
targetNode &&
|
||||
targetNode.addEventListener("keydown", handleKeyPress);
|
||||
|
||||
// remove the event listener
|
||||
return () =>
|
||||
targetNode &&
|
||||
targetNode.removeEventListener("keydown", handleKeyPress);
|
||||
}, [handleKeyPress, node]);
|
||||
};
|
||||
|
||||
export default useKeyPress;
|
Loading…
Reference in New Issue
Block a user