Skip to content

feat(webui): Reorganize clp-s search controls onto two different lines; Remove text from buttons. #1853

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
davemarco wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat(webui): Reorganize clp-s search controls onto two different lines; Remove text from buttons. #1853

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0d52a83
latest
Jan 8, 2026
24520ca
latest
Jan 8, 2026
f4d28f6
Merge branch 'main' into move_ui
davemarco Jan 8, 2026
ae5cff2
latest
Jan 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 0 additions & 31 deletions components/webui/client/src/pages/SearchPage/SearchControls/Native/NativeControls.tsx
View file
Open in desktop

This file was deleted.

20 changes: 20 additions & 0 deletions ...ts/webui/client/src/pages/SearchPage/SearchControls/Native/NativeControls/ClpControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import styles from "../../index.module.css";
import TimeRangeInput from "../../TimeRangeInput";
import QueryInput from "../QueryInput";
import SearchButton from "../SearchButton";


/**
* Renders CLP search controls.
*
* @return
*/
const ClpControls = () => (
<div className={styles["inputsAndButtonRow"]}>
<QueryInput/>
<TimeRangeInput/>
<SearchButton/>
</div>
);

export default ClpControls;
30 changes: 30 additions & 0 deletions ...s/webui/client/src/pages/SearchPage/SearchControls/Native/NativeControls/ClpSControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import Dataset from "../../Dataset";
import TimeRangeInput from "../../TimeRangeInput";
import QueryInput from "../QueryInput";
import SearchButton from "../SearchButton";
import nativeStyles from "./index.module.css";


/**
* Renders CLP-S controls.
*
* @return
*/
const ClpSControls = () => (
<>
<div className={nativeStyles["clpSRow"]}>
<Dataset/>
<div className={nativeStyles["clpSTimeRange"]}>
<TimeRangeInput/>
</div>
</div>
<div className={nativeStyles["clpSRow"]}>
<div className={nativeStyles["clpSQuery"]}>
<QueryInput/>
</div>
<SearchButton/>
</div>
</>
);

export default ClpSControls;
13 changes: 13 additions & 0 deletions ...s/webui/client/src/pages/SearchPage/SearchControls/Native/NativeControls/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.clpSRow {
display: flex;
gap: 10px;
}
Comment on lines +1 to +4
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Consider adding vertical alignment.

The .clpSRow flex container lacks align-items, which may cause inconsistent vertical alignment if child elements (search input, buttons, selectors) have different heights. Consider adding align-items: center; for consistent vertical centering.

Additionally, since flex-wrap defaults to nowrap, the controls might overflow horizontally on narrow screens.

♻️ Proposed enhancement 
 .clpSRow {
     display: flex;
     gap: 10px;
+    align-items: center;
 }

Please verify the layout behaviour on small screens (mobile/tablet viewports) to ensure controls remain accessible and don't overflow.

🤖 Prompt for AI Agents 
In
@components/webui/client/src/pages/SearchPage/SearchControls/Native/NativeControls/index.module.css
around lines 1 - 4, The .clpSRow flex container is missing vertical alignment
and wrap behavior; update the .clpSRow rule to add align-items: center to
vertically center child controls and add flex-wrap: wrap (and optionally adjust
gap or introduce a responsive media query) so the controls don’t overflow on
narrow viewports—verify in mobile/tablet sizes that elements wrap cleanly and
remain accessible.


.clpSTimeRange {
margin-left: auto;
}

.clpSQuery {
flex: 1;
min-width: 0;
}
30 changes: 30 additions & 0 deletions components/webui/client/src/pages/SearchPage/SearchControls/Native/NativeControls/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import {CLP_STORAGE_ENGINES} from "@webui/common/config";

import {SETTINGS_STORAGE_ENGINE} from "../../../../../config";
import styles from "../../index.module.css";
import QueryStatus from "../../QueryStatus";
import ClpControls from "./ClpControls";
import ClpSControls from "./ClpSControls";


/**
* Chooses between clp and clp-s native control layouts.
*
* @return
*/
const NativeControls = () => {
const isClpS = CLP_STORAGE_ENGINES.CLP_S === SETTINGS_STORAGE_ENGINE;

return (
<div className={styles["searchControlsContainer"]}>
{isClpS ?
<ClpSControls/> :
<ClpControls/>}
<div className={styles["status"]}>
<QueryStatus/>
</div>
</div>
);
};

export default NativeControls;
5 changes: 1 addition & 4 deletions ...nts/webui/client/src/pages/SearchPage/SearchControls/Native/SearchButton/CancelButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,7 @@ const CancelButton = () => {
icon={<CloseOutlined/>}
size={"middle"}
type={"primary"}
onClick={handleCancelButtonClick}
>
Cancel
</Button>
onClick={handleCancelButtonClick}/>
);
};

Expand Down
5 changes: 1 addition & 4 deletions ...bui/client/src/pages/SearchPage/SearchControls/Native/SearchButton/SubmitButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,10 +136,7 @@ const SubmitButton = () => {
handleSubmitButtonClick().catch((err: unknown) => {
throw err;
});
}}
>
Search
</Button>
}}/>
</Tooltip>
);
};
Expand Down
Loading