Comments (2)
HIG-4665 dashboard should support saving default query time
from highlight.
To support saving the default query time for the entire dashboard, follow these steps:
-
Update
GraphingEditor
Component:- Add a new setting for default query time.
// Add this inside the GraphingEditor component const [defaultQueryTime, setDefaultQueryTime] = useState(DEFAULT_TIME_PRESETS[2]); // Add a new LabeledRow for default query time <LabeledRow label="Default Query Time" name="defaultQueryTime"> <DateRangePicker selectedValue={defaultQueryTime} onDatesChange={setDefaultQueryTime} presets={DEFAULT_TIME_PRESETS} /> </LabeledRow>
-
Update
DashboardPage
Component:- Save the default query time setting.
// Add this inside the DashboardPage component const [defaultQueryTime, setDefaultQueryTime] = useState(DEFAULT_TIME_PRESETS[2]); // Update the pushNewMetricConfig function to include defaultQueryTime const pushNewMetricConfig = ( nm: DashboardMetricConfig[], newLayout?: Layouts, ) => { let l: Layouts; if (newLayout) { l = newLayout; } else { const newPos = { ...DEFAULT_SINGLE_LAYOUT }; newPos.i = (nm.length - 1).toString(); newPos.y = Math.max(...layout.lg.map((l) => l.y)); newPos.x = Math.max( ...layout.lg .filter((l) => l.y === newPos.y) .map((l) => l.x), ) + LAYOUT_CHART_WIDTH; if (newPos.x > LAYOUT_ROW_WIDTH - LAYOUT_CHART_WIDTH) { newPos.y += 1; newPos.x = 0; } l = { lg: [...layout.lg, newPos].slice(0, nm.length), }; } updateDashboard({ id: dashboard?.id || id, metrics: nm, name: dashboard?.name || '', layout: JSON.stringify(l), defaultQueryTime, // Save defaultQueryTime }); };
-
Utilize
useSearchTime
Hook:- Manage the time state using the
useSearchTime
hook.
// Inside the GraphingEditor component const { startDate, endDate, selectedPreset, updateSearchTime } = useSearchTime({ presets: DEFAULT_TIME_PRESETS, initialPreset: defaultQueryTime, // Use defaultQueryTime as initial preset });
- Manage the time state using the
References
/frontend/src/pages/Graphing/GraphingEditor.tsx
/frontend/src/pages/Dashboards/pages/Dashboard/DashboardPage.tsx
/frontend/src/hooks/useSearchTime.ts
/frontend/src/context/SearchState.ts
/frontend/src/pages/Player/PlayerHook/utils/index.tsx
from highlight.
Related Issues (20)
- suspicious session alerts HOT 2
- overflow on tooltips on the dashboard HOT 2
- don't render tooltip if cursor isn't touching a graph HOT 2
- caching issues on graphs HOT 2
- 'metric view title' doesn't span the full width HOT 2
- Player canvas flickering on load HOT 2
- dev tools traces viewer designs HOT 2
- allow error search on custom structured attributes HOT 2
- add a business tier HOT 2
- Traces Popup shouldn't show when dragging HOT 2
- "Link Issue" input is an old input style HOT 2
- Empty state in devtools is too large, and limits devtools scroll width HOT 2
- super user? auth issue in other projects HOT 2
- Address search UI feedback from BCI HOT 2
- Add 'business tier' designs HOT 2
- Session Search Menu is using AntD HOT 2
- Loading state for logs/traces results need a spinner HOT 2
- AI-based Query Builder - Notes HOT 2
- Permissions for turning on AI features (only allow admins to do this) HOT 2
- Log Group View Icons for View-Switch 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.