Comments (2)
HIG-4737 add a history of recent searches
from highlight.
To add a history of recent searches:
-
Update State in
SearchIssues.tsx
:- Add a state to store recent searches.
const [recentSearches, setRecentSearches] = useState<SearchOption[]>([]);
-
Modify
onSelect
Handler:- Update the
onSelect
handler to store the selected search in the recent searches state.
onSelect={(newValue: string) => { const option = options.find((o) => o.value === newValue); if (option) { onSelect(option); setSelectOption(option); setRecentSearches((prev) => [option, ...prev.filter(o => o.id !== option.id)].slice(0, 5)); // Keep only the last 5 searches } }}
- Update the
-
Display Recent Searches:
- Add a section to display recent searches.
<div className={styles.recentSearches}> <h4>Recent Searches</h4> <ul> {recentSearches.map((search) => ( <li key={search.id} onClick={() => onSelect(search.value)}>{search.label}</li> ))} </ul> </div>
-
Add CSS for Recent Searches:
- Update
SearchIssues.module.css
to style the recent searches section.
.recentSearches { margin-top: 20px; } .recentSearches ul { list-style-type: none; padding: 0; } .recentSearches li { cursor: pointer; padding: 5px 0; } .recentSearches li:hover { text-decoration: underline; }
- Update
References
/frontend/src/components/SearchIssues/SearchIssues.tsx
/frontend/src/hooks/useSearchTime.ts
/frontend/src/pages/LogsPage/LogsPage.tsx
from highlight.
Related Issues (20)
- centered text on dropdown for keys HOT 2
- clickTextContent should be searchable in right panel session events HOT 2
- date picker text input breaks HOT 2
- session loaded doesn't highlight the session picker on the left HOT 2
- hitting enter on the group by field increments the limit HOT 2
- session_secure_id column name for logs/traces is not clear HOT 2
- open in new tab session search HOT 2
- cross domain identification - apply identifier across differnet projects based on fingerprint HOT 2
- Unable to start "hobby" instance. HOT 2
- Error search incorrectly showing resolved errors HOT 2
- Active length of session is suspicious HOT 2
- Allow adding of destinations HOT 2
- Send destinations message when destination is created/deleted HOT 2
- Create unified alert detail page HOT 2
- Add alert state changes to alert detail page HOT 2
- Allow alert to open/comment on integration ticket HOT 2
- empty group shows up as metric name HOT 2
- graph tooltip should show key HOT 2
- slack integration has no CTA after completion HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from highlight.