The open and composable observability and data visualization platform. Visualize metrics, logs, and traces from multiple sources like Prometheus, Loki, Elasticsearch, InfluxDB, Postgres and many more.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
grafana/public/app/features/explore/CorrelationUnsavedChangesMo...

36 lines
940 B

Correlations: Add an editor in Explore (#73315) * Start adding correlations editor mode * Add selector for merge conflict resolution * Enable saving * Build out new corelation helper component * flesh out save with label/description, change color * Have breadcrumb exit correlation editor mode * Add extension property to show/hide, use it for correlations * Bring in feature toggle * Remove unnecessary param * Cleanup * Parse logs json * Work on correlation edit mode bar * Tinker with a top element for the editor mode * Handle various explore state changes with correlations editor mode * WIP - add unsaved changes modal * Have correlation bar always rendered, sometimes hidden * Add various prompt modals * Clear correlations data on mode bar unmount, only use not left pane changes to count as dirty * Move special logic to explore * Remove all shouldShow logic from plugin extensions * remove grafana data changes * WIP - clean up correlations state * Interpolate data before sending to onclick * Override outline button coloring to account for dark background * More cleanup, more color tweaking * Prettier formatting, change state to refer to editor * Fix tests * More state change tweaks * ensure correlation save ability, change correlation editor state vars * fix import * Remove independent selector for editorMode, work close pane into editor exit flow * Add change datasource post action * Clean up based on PR feedback, handle closing left panel with helper better * Remove breadcrumb additions, add section and better ID to cmd palette action * Interpolate query results if it is ran with a helper with vars * Pass the datasource query along with the correlate link to ensure the datasource unique ID requirement passes * Use different onmount function to capture state of panes at time of close instead of time of mount * Fix node graph’s datalink not working * Actually commit the fix to saving * Fix saving correlations with mixed datasource to use the first query correlation UID * Add tracking * Use query datasources in mixed scenario, move exit tracking to click handler * Add correlations to a place where both can be used in the correlations editor * Be more selective on when we await the datasource get * Fix CSS to use objects * Update betterer * Add test around new decorator functionality * Add tests for decorate with correlations * Some reorganization and a few tweaks based on feedback * Move dirty state change to state function and out of component * Change the verbiage around a little * Various suggestions from Gio Co-authored-by: Giordano Ricci <me@giordanoricci.com> * More small Gio-related tweaks * Tie helper data to datasource - clear it out when the datasource changes * Missed another Gio tweak * Fix linter error * Only clear helper data on left pane changes * Add height offset for correlation editor bar so it doesn’t scroll off page --------- Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com> Co-authored-by: Giordano Ricci <me@giordanoricci.com>
2 years ago
import { css } from '@emotion/css';
import { Button, Modal } from '@grafana/ui';
interface UnsavedChangesModalProps {
message: string;
Correlations: Add an editor in Explore (#73315) * Start adding correlations editor mode * Add selector for merge conflict resolution * Enable saving * Build out new corelation helper component * flesh out save with label/description, change color * Have breadcrumb exit correlation editor mode * Add extension property to show/hide, use it for correlations * Bring in feature toggle * Remove unnecessary param * Cleanup * Parse logs json * Work on correlation edit mode bar * Tinker with a top element for the editor mode * Handle various explore state changes with correlations editor mode * WIP - add unsaved changes modal * Have correlation bar always rendered, sometimes hidden * Add various prompt modals * Clear correlations data on mode bar unmount, only use not left pane changes to count as dirty * Move special logic to explore * Remove all shouldShow logic from plugin extensions * remove grafana data changes * WIP - clean up correlations state * Interpolate data before sending to onclick * Override outline button coloring to account for dark background * More cleanup, more color tweaking * Prettier formatting, change state to refer to editor * Fix tests * More state change tweaks * ensure correlation save ability, change correlation editor state vars * fix import * Remove independent selector for editorMode, work close pane into editor exit flow * Add change datasource post action * Clean up based on PR feedback, handle closing left panel with helper better * Remove breadcrumb additions, add section and better ID to cmd palette action * Interpolate query results if it is ran with a helper with vars * Pass the datasource query along with the correlate link to ensure the datasource unique ID requirement passes * Use different onmount function to capture state of panes at time of close instead of time of mount * Fix node graph’s datalink not working * Actually commit the fix to saving * Fix saving correlations with mixed datasource to use the first query correlation UID * Add tracking * Use query datasources in mixed scenario, move exit tracking to click handler * Add correlations to a place where both can be used in the correlations editor * Be more selective on when we await the datasource get * Fix CSS to use objects * Update betterer * Add test around new decorator functionality * Add tests for decorate with correlations * Some reorganization and a few tweaks based on feedback * Move dirty state change to state function and out of component * Change the verbiage around a little * Various suggestions from Gio Co-authored-by: Giordano Ricci <me@giordanoricci.com> * More small Gio-related tweaks * Tie helper data to datasource - clear it out when the datasource changes * Missed another Gio tweak * Fix linter error * Only clear helper data on left pane changes * Add height offset for correlation editor bar so it doesn’t scroll off page --------- Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com> Co-authored-by: Giordano Ricci <me@giordanoricci.com>
2 years ago
onDiscard: () => void;
onCancel: () => void;
onSave: () => void;
}
export const CorrelationUnsavedChangesModal = ({ onSave, onDiscard, onCancel, message }: UnsavedChangesModalProps) => {
Correlations: Add an editor in Explore (#73315) * Start adding correlations editor mode * Add selector for merge conflict resolution * Enable saving * Build out new corelation helper component * flesh out save with label/description, change color * Have breadcrumb exit correlation editor mode * Add extension property to show/hide, use it for correlations * Bring in feature toggle * Remove unnecessary param * Cleanup * Parse logs json * Work on correlation edit mode bar * Tinker with a top element for the editor mode * Handle various explore state changes with correlations editor mode * WIP - add unsaved changes modal * Have correlation bar always rendered, sometimes hidden * Add various prompt modals * Clear correlations data on mode bar unmount, only use not left pane changes to count as dirty * Move special logic to explore * Remove all shouldShow logic from plugin extensions * remove grafana data changes * WIP - clean up correlations state * Interpolate data before sending to onclick * Override outline button coloring to account for dark background * More cleanup, more color tweaking * Prettier formatting, change state to refer to editor * Fix tests * More state change tweaks * ensure correlation save ability, change correlation editor state vars * fix import * Remove independent selector for editorMode, work close pane into editor exit flow * Add change datasource post action * Clean up based on PR feedback, handle closing left panel with helper better * Remove breadcrumb additions, add section and better ID to cmd palette action * Interpolate query results if it is ran with a helper with vars * Pass the datasource query along with the correlate link to ensure the datasource unique ID requirement passes * Use different onmount function to capture state of panes at time of close instead of time of mount * Fix node graph’s datalink not working * Actually commit the fix to saving * Fix saving correlations with mixed datasource to use the first query correlation UID * Add tracking * Use query datasources in mixed scenario, move exit tracking to click handler * Add correlations to a place where both can be used in the correlations editor * Be more selective on when we await the datasource get * Fix CSS to use objects * Update betterer * Add test around new decorator functionality * Add tests for decorate with correlations * Some reorganization and a few tweaks based on feedback * Move dirty state change to state function and out of component * Change the verbiage around a little * Various suggestions from Gio Co-authored-by: Giordano Ricci <me@giordanoricci.com> * More small Gio-related tweaks * Tie helper data to datasource - clear it out when the datasource changes * Missed another Gio tweak * Fix linter error * Only clear helper data on left pane changes * Add height offset for correlation editor bar so it doesn’t scroll off page --------- Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com> Co-authored-by: Giordano Ricci <me@giordanoricci.com>
2 years ago
return (
<Modal
isOpen={true}
title={`Unsaved changes to correlation`}
Correlations: Add an editor in Explore (#73315) * Start adding correlations editor mode * Add selector for merge conflict resolution * Enable saving * Build out new corelation helper component * flesh out save with label/description, change color * Have breadcrumb exit correlation editor mode * Add extension property to show/hide, use it for correlations * Bring in feature toggle * Remove unnecessary param * Cleanup * Parse logs json * Work on correlation edit mode bar * Tinker with a top element for the editor mode * Handle various explore state changes with correlations editor mode * WIP - add unsaved changes modal * Have correlation bar always rendered, sometimes hidden * Add various prompt modals * Clear correlations data on mode bar unmount, only use not left pane changes to count as dirty * Move special logic to explore * Remove all shouldShow logic from plugin extensions * remove grafana data changes * WIP - clean up correlations state * Interpolate data before sending to onclick * Override outline button coloring to account for dark background * More cleanup, more color tweaking * Prettier formatting, change state to refer to editor * Fix tests * More state change tweaks * ensure correlation save ability, change correlation editor state vars * fix import * Remove independent selector for editorMode, work close pane into editor exit flow * Add change datasource post action * Clean up based on PR feedback, handle closing left panel with helper better * Remove breadcrumb additions, add section and better ID to cmd palette action * Interpolate query results if it is ran with a helper with vars * Pass the datasource query along with the correlate link to ensure the datasource unique ID requirement passes * Use different onmount function to capture state of panes at time of close instead of time of mount * Fix node graph’s datalink not working * Actually commit the fix to saving * Fix saving correlations with mixed datasource to use the first query correlation UID * Add tracking * Use query datasources in mixed scenario, move exit tracking to click handler * Add correlations to a place where both can be used in the correlations editor * Be more selective on when we await the datasource get * Fix CSS to use objects * Update betterer * Add test around new decorator functionality * Add tests for decorate with correlations * Some reorganization and a few tweaks based on feedback * Move dirty state change to state function and out of component * Change the verbiage around a little * Various suggestions from Gio Co-authored-by: Giordano Ricci <me@giordanoricci.com> * More small Gio-related tweaks * Tie helper data to datasource - clear it out when the datasource changes * Missed another Gio tweak * Fix linter error * Only clear helper data on left pane changes * Add height offset for correlation editor bar so it doesn’t scroll off page --------- Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com> Co-authored-by: Giordano Ricci <me@giordanoricci.com>
2 years ago
onDismiss={onCancel}
icon="exclamation-triangle"
className={css({ width: '600px' })}
Correlations: Add an editor in Explore (#73315) * Start adding correlations editor mode * Add selector for merge conflict resolution * Enable saving * Build out new corelation helper component * flesh out save with label/description, change color * Have breadcrumb exit correlation editor mode * Add extension property to show/hide, use it for correlations * Bring in feature toggle * Remove unnecessary param * Cleanup * Parse logs json * Work on correlation edit mode bar * Tinker with a top element for the editor mode * Handle various explore state changes with correlations editor mode * WIP - add unsaved changes modal * Have correlation bar always rendered, sometimes hidden * Add various prompt modals * Clear correlations data on mode bar unmount, only use not left pane changes to count as dirty * Move special logic to explore * Remove all shouldShow logic from plugin extensions * remove grafana data changes * WIP - clean up correlations state * Interpolate data before sending to onclick * Override outline button coloring to account for dark background * More cleanup, more color tweaking * Prettier formatting, change state to refer to editor * Fix tests * More state change tweaks * ensure correlation save ability, change correlation editor state vars * fix import * Remove independent selector for editorMode, work close pane into editor exit flow * Add change datasource post action * Clean up based on PR feedback, handle closing left panel with helper better * Remove breadcrumb additions, add section and better ID to cmd palette action * Interpolate query results if it is ran with a helper with vars * Pass the datasource query along with the correlate link to ensure the datasource unique ID requirement passes * Use different onmount function to capture state of panes at time of close instead of time of mount * Fix node graph’s datalink not working * Actually commit the fix to saving * Fix saving correlations with mixed datasource to use the first query correlation UID * Add tracking * Use query datasources in mixed scenario, move exit tracking to click handler * Add correlations to a place where both can be used in the correlations editor * Be more selective on when we await the datasource get * Fix CSS to use objects * Update betterer * Add test around new decorator functionality * Add tests for decorate with correlations * Some reorganization and a few tweaks based on feedback * Move dirty state change to state function and out of component * Change the verbiage around a little * Various suggestions from Gio Co-authored-by: Giordano Ricci <me@giordanoricci.com> * More small Gio-related tweaks * Tie helper data to datasource - clear it out when the datasource changes * Missed another Gio tweak * Fix linter error * Only clear helper data on left pane changes * Add height offset for correlation editor bar so it doesn’t scroll off page --------- Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com> Co-authored-by: Giordano Ricci <me@giordanoricci.com>
2 years ago
>
<h5>{message}</h5>
Correlations: Add an editor in Explore (#73315) * Start adding correlations editor mode * Add selector for merge conflict resolution * Enable saving * Build out new corelation helper component * flesh out save with label/description, change color * Have breadcrumb exit correlation editor mode * Add extension property to show/hide, use it for correlations * Bring in feature toggle * Remove unnecessary param * Cleanup * Parse logs json * Work on correlation edit mode bar * Tinker with a top element for the editor mode * Handle various explore state changes with correlations editor mode * WIP - add unsaved changes modal * Have correlation bar always rendered, sometimes hidden * Add various prompt modals * Clear correlations data on mode bar unmount, only use not left pane changes to count as dirty * Move special logic to explore * Remove all shouldShow logic from plugin extensions * remove grafana data changes * WIP - clean up correlations state * Interpolate data before sending to onclick * Override outline button coloring to account for dark background * More cleanup, more color tweaking * Prettier formatting, change state to refer to editor * Fix tests * More state change tweaks * ensure correlation save ability, change correlation editor state vars * fix import * Remove independent selector for editorMode, work close pane into editor exit flow * Add change datasource post action * Clean up based on PR feedback, handle closing left panel with helper better * Remove breadcrumb additions, add section and better ID to cmd palette action * Interpolate query results if it is ran with a helper with vars * Pass the datasource query along with the correlate link to ensure the datasource unique ID requirement passes * Use different onmount function to capture state of panes at time of close instead of time of mount * Fix node graph’s datalink not working * Actually commit the fix to saving * Fix saving correlations with mixed datasource to use the first query correlation UID * Add tracking * Use query datasources in mixed scenario, move exit tracking to click handler * Add correlations to a place where both can be used in the correlations editor * Be more selective on when we await the datasource get * Fix CSS to use objects * Update betterer * Add test around new decorator functionality * Add tests for decorate with correlations * Some reorganization and a few tweaks based on feedback * Move dirty state change to state function and out of component * Change the verbiage around a little * Various suggestions from Gio Co-authored-by: Giordano Ricci <me@giordanoricci.com> * More small Gio-related tweaks * Tie helper data to datasource - clear it out when the datasource changes * Missed another Gio tweak * Fix linter error * Only clear helper data on left pane changes * Add height offset for correlation editor bar so it doesn’t scroll off page --------- Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com> Co-authored-by: Giordano Ricci <me@giordanoricci.com>
2 years ago
<Modal.ButtonRow>
<Button variant="secondary" onClick={onCancel} fill="outline">
Cancel
</Button>
<Button variant="destructive" onClick={onDiscard}>
Continue without saving
Correlations: Add an editor in Explore (#73315) * Start adding correlations editor mode * Add selector for merge conflict resolution * Enable saving * Build out new corelation helper component * flesh out save with label/description, change color * Have breadcrumb exit correlation editor mode * Add extension property to show/hide, use it for correlations * Bring in feature toggle * Remove unnecessary param * Cleanup * Parse logs json * Work on correlation edit mode bar * Tinker with a top element for the editor mode * Handle various explore state changes with correlations editor mode * WIP - add unsaved changes modal * Have correlation bar always rendered, sometimes hidden * Add various prompt modals * Clear correlations data on mode bar unmount, only use not left pane changes to count as dirty * Move special logic to explore * Remove all shouldShow logic from plugin extensions * remove grafana data changes * WIP - clean up correlations state * Interpolate data before sending to onclick * Override outline button coloring to account for dark background * More cleanup, more color tweaking * Prettier formatting, change state to refer to editor * Fix tests * More state change tweaks * ensure correlation save ability, change correlation editor state vars * fix import * Remove independent selector for editorMode, work close pane into editor exit flow * Add change datasource post action * Clean up based on PR feedback, handle closing left panel with helper better * Remove breadcrumb additions, add section and better ID to cmd palette action * Interpolate query results if it is ran with a helper with vars * Pass the datasource query along with the correlate link to ensure the datasource unique ID requirement passes * Use different onmount function to capture state of panes at time of close instead of time of mount * Fix node graph’s datalink not working * Actually commit the fix to saving * Fix saving correlations with mixed datasource to use the first query correlation UID * Add tracking * Use query datasources in mixed scenario, move exit tracking to click handler * Add correlations to a place where both can be used in the correlations editor * Be more selective on when we await the datasource get * Fix CSS to use objects * Update betterer * Add test around new decorator functionality * Add tests for decorate with correlations * Some reorganization and a few tweaks based on feedback * Move dirty state change to state function and out of component * Change the verbiage around a little * Various suggestions from Gio Co-authored-by: Giordano Ricci <me@giordanoricci.com> * More small Gio-related tweaks * Tie helper data to datasource - clear it out when the datasource changes * Missed another Gio tweak * Fix linter error * Only clear helper data on left pane changes * Add height offset for correlation editor bar so it doesn’t scroll off page --------- Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com> Co-authored-by: Giordano Ricci <me@giordanoricci.com>
2 years ago
</Button>
<Button variant="primary" onClick={onSave}>
Save correlation
</Button>
</Modal.ButtonRow>
</Modal>
);
};