Commit Graph

1401 Commits

Author SHA1 Message Date
Torkel Ödegaard
a67eaf6b62
DashboardPage: Refactor state to fix state timing bugs and reduce unnecessary re-renders (#36460)
* DashboardPage: Refactoring state handling to improve performance and fix bugs with state out of sync

* Fixed exit panel editor timing issues

* New tests in RTL

* Updated comment

* Removed unused imports
2021-07-07 18:39:45 +02:00
Torkel Ödegaard
f0cac149da
DashboardGrid: Refactorings and performance improvements (#35942)
* add back only re-render dashboard first time on layout change

* remove panel refs

* Updates

* Improved is in view logic

* Updates

* Remove unnessary auto sizer

* Found another approach that works with resize as well

* Updates

* fixing test

* Fixing ref issues

* Fixed mobile size handling, and view panel handling, removed now unnessary logic

* Updated snapshot
2021-06-22 14:44:18 +02:00
Amir Ajorloo
16850630bf
Chore: Improve the mobile view of the login page (#32962)
* Update the mobile view. Change login wrapper justify-content to flex-start. Make the logo and title smaller. Prevent alert-list from overflowing the screen. Increase the footer items line-height.

* Use already existed media-query and set mobile styles as default

* Update changes based on V8 changes

* Revert footer bottom spacer.
2021-06-16 10:47:12 +02:00
Ashley Harrison
b118e06b6a
SideMenu: make sure the menu overlaps the border to prevent leaving hover state #35728 2021-06-16 10:23:27 +02:00
Ashley Harrison
445356d6aa
remove box-shadow from sidenav items using images for consistency (#35428) 2021-06-09 14:49:55 +01:00
Torkel Ödegaard
d6a9a9b975
Themes: Add border to sidemenu, and reduce border in dark theme a tiny bit (#34737)
* Themes: Add border to sidemenu, and reduce border in dark theme a tiny bit

* Updated
2021-05-29 07:08:05 +02:00
Jack Westbrook
ad3b0b2272
PageToolbar: add bottom padding (#34602)
* fix(pagetoolbar): pad elements top and bottom to keep vertical align and wrapper padding

* fix(sidemenu): prevent mobile sidemenu squashing dashboard, vertically align mobile sidemenu icon

* fix(dashboardsettings): prevent subheader overlap

* fix(pagetoolbar): center align all toolbar elements vertically

* refactor(pagetoolbar): combine vertical paddings to bring back original padding values

* refactor: update padding values for components that use PageToolbar

* fix(playlists): update Empty cta link route to prevent 404

* test(dashboard): update snapshot
2021-05-26 10:49:39 +02:00
Torkel Ödegaard
ff3d8ed866
Login: Minor improvement to mobile login layout (#33961) 2021-05-12 06:37:18 +02:00
Torkel Ödegaard
4fabade35c
v8: Update login page design (#33923)
* Theme: Initial draft of dark login page

* update

* Updated login background

* Updates

* anim test

* Anim tweak

* Animate login box

* Updates

* Updating login page

* Improve footer readability on login page

* Fix sign up button
2021-05-11 16:34:44 +02:00
Torkel Ödegaard
f2e4f41f69
Alerting: Support for alerting for react panels, and lots of fixes to alert annotations for both react and angular (#33608)
* Alerting: Support for alerting for react panels, and lots of fixes to alert annotations for both react and angular

* Fix showing annotations in panel edit
2021-05-03 08:52:05 +02:00
Torkel Ödegaard
9b60f8c404
DashboardSettings: Slight design tweak to fix page toolbar padding and align design (#33575)
* DashboardSettings: Slight design tweak to fix page toolbar padding and align design

* Fixed font weight

* Removed comment

* Update
2021-04-30 17:21:18 +02:00
Torkel Ödegaard
f6ecded86b
Theme: Page styles move to emotion global styles and design tweaks (#33529)
* Theme: Page styles move to emotion global styles and design tweaks

* More style tweaks

* tweaks

* Updating snapshots

* Another fix

* Another fix

* minor fix

* More style tweaks to page toolbar and alert rule page

* minor polish
2021-04-30 10:04:01 +02:00
Hugo Häggmark
22ac0fc3cd
Chore: Migrates remaining Angular modals to React (#33476)
* HelpModal: Migrates to new style

* Alerting: Migrates how to do alerting modal to React

* ApiKeysModal: migrates to new theme

* Dashboard: View dasboard json modal migrated to React and new theme

* PluginPage: migrates update plugin modal to react and new theme

* Chore: deprecates events and functions

* Simplify help modal

* Updated json modal to use Modal.ButtonRow

* Tweak to api key design

* Tests: updates snapshot

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
2021-04-28 15:22:28 +02:00
Ryan McKinley
fac335ee7f
JSON: make the dashboard JSON editor as big as possible (#33453)
Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>
2021-04-28 09:52:26 +02:00
Torkel Ödegaard
5d855dbf33
Theme: Fixes to time picker calendar & variable dropdowns & more (#33407)
* More theme fixes

* more updates

* Fixed alerts in explore
2021-04-27 15:13:08 +02:00
Torkel Ödegaard
e6a9654d0e
Checkbox: Updates to look and feel and using new theme (#33310)
* Checkbox: Updates to look and feel and using new theme

* A few more theme fixes

* Removed comments

* Updated snapshot
2021-04-23 14:40:06 +02:00
Torkel Ödegaard
b6cfb65e40
Annotations: More fixes to the angular annotation editors (#33303)
* Annotations: Fixed angular editor issues

* More angular annotation fixes

* removed console.log
2021-04-23 14:06:30 +02:00
Torkel Ödegaard
44cf2f8efe
Theme: Update theme layering (#33217)
* Theme: Update theme layering

* More updates

* Updates to shadows and dropdowns

* Moved panel option group to emotion global styles

* more minor fixes
2021-04-22 09:18:32 +02:00
Uchechukwu Obasi
438b403acc
Migrates old Card sass file to GlobalStyles (#33183)
* Card: migrates styles from sass to emotion

* removed LayoutSelector component since it's not used in the codebase

* updates card styles with new color name
2021-04-21 16:39:56 +02:00
Uchechukwu Obasi
63e2977837
DashboardPanel: migrates styling from sass to emotion (#33115)
* DashboardPanel: migrates styling from sass to emotion

* fixes frontend test

* removed the theme since it doesn't have any use case in the styles

* updates frontend snapshot test
2021-04-21 12:24:44 +01:00
Torkel Ödegaard
bcd0958849
Theme: Updated font to Inter, updates typography, a start of moving legacy & global styles from sass to emotion (#32988)
* Testing inter font

* new fonts and global styles

* Added Typography component and storybook

* Moving more global legacy types to emotion global styles

* Updated snapshot

* mapp bold to 500

* Updates

* Fixes and moved html & body styles to emotion

* moved helper function down

* Updated snapshot

* More tweaks

* Updates

* added internal tag

* Updated snapshot
2021-04-14 21:49:38 +02:00
Torkel Ödegaard
b0c6cad637
Theme: Updates Alert design and licence warning hook (#32930)
* Theme: Updates Alert design and licence warning hook

* Updated snapshot

* Updated design

* Updated
2021-04-13 18:00:55 +02:00
Torkel Ödegaard
629603dd92
Theming: Updates to select styles and theme model progress (#32797)
* Theming: Updates to select styles and theme model progress

* Progress

* Update menu

* Updated menu group

* Improving button styles

* Added transitions to theme

* solving the hover & selected, focus issues

* Updated snapshot

* adding some colors from figma, but waiting to use them as not enough components use new layer colors

* Updates

* Updates

* Progress

* Renames

* Improvements to theme overview

* updated test

* demo update

* More new theme colors

* Wip new card styles

* Card tweaks hover is not working

* Updates more colors from figma

* Progress

* Progress

* Updated radio button styles

* Progress on new colors

* Progress

* New page toolbar and toolbar button design

* New toolbar button design

* Reverted to older toolbar and button look

* Updated snapshot

* Updated generated files

* Updated design

* Updates

* Added card hover

* Fixed button group

* Updates
2021-04-12 14:23:00 +02:00
Torkel Ödegaard
7b23ed728f
DashboardSettings: Migrates annotations list & edit view from angular to react and new forms styles (#31950)
* Initial commit, list and edit page working

* Progress

* angular and standard editors work

* Unifying more between annotations list and links list

* Remove submenu visibilty stuff

* Update packages/grafana-data/src/types/annotations.ts

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Review feedback

* fixed checkbox

* Fixes

* test(annotationsettings): initial commit of tests

* delete files brought back by master merge

* update datasourcepicker import path

* update emotion import

* test(linksettings): clean up tests

* Fixed test

* test(annotationssettings): add remaining tests

* docs(grafana-data): export namespace for docs build

* docs(grafana-ui): export ColorValueEditorProps for docs build

* docs(grafana-ui): add docs annotation for ColorValueEditorProps

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>
Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>
2021-04-12 09:41:07 +02:00
Piotr Jamróz
d8967b1d60
Graphite: Handle unknown Graphite functions without breaking the visual editor (#32635) 2021-04-09 23:21:53 +02:00
Dominik Prokop
5b2a419df8
Fix inline code being rendered as block in the panel description (#32405) 2021-03-29 11:47:37 +02:00
Piotr Jamróz
9f2fa7c20c
Show graphite functions descriptions (#32305)
* Fix parsing and displaying Graphite function descriptions

* Update docs

* Add support for inf value

* Remove redundant console.log

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

* Remove empty line

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>
2021-03-26 15:16:25 +01:00
Torkel Ödegaard
3e55c967ee
Theming: Support for runtime theme switching and hooks for custom themes (#31301)
* WIP Custom themes

* Load custom themes from URL and via event

* Dynamic page background

* Header color change

* Fixing tests and emotion warnings

* Fixed test

* moving cx to getStyles

* Review fixes

* minor change
2021-02-20 09:02:06 +01:00
Torkel Ödegaard
758d1386cd
DashboardSettings: Update to new form styles (#31022)
* DashboardSettings: Update to new form styles

* Improve header margin and fixing issue in permissions tab

* Updated

* Switch to radio

* Remove unused import
2021-02-09 20:41:07 +01:00
Uchechukwu Obasi
b4d51c9f68
ColorPicker: migrated styles from sass to emotion (#30909)
* ColorPicker: migrated styles from sass to emotion

* fixes frontend test

* updated some changes

* updated some changes

* fixed small import nits
2021-02-09 12:19:12 +01:00
Torkel Ödegaard
5e37361182
Mobile: Fixes issue scrolling on mobile in chrome (#30746) 2021-01-29 17:55:11 +01:00
Torkel Ödegaard
02f8a139db
PanelEdit: Get rid of last remaining usage of navbar-button (#30682) 2021-01-27 20:10:03 +01:00
Torkel Ödegaard
75cb6703a6
DashboardSettings & PanelEdit: Use new PageToolbar (#30675)
* DashboardSettings & PanelEdit: Use new PageToolbar

* Update

* removed back button
2021-01-27 16:46:01 +01:00
Torkel Ödegaard
701ad79bb5
PageToolbar: Extracting navbar styles & layout into a modern emotion based component (#30588)
* Explore: Replaces navbar-button and overriden explore button css classes with ToolbarButton and cleans up scss & markup, removes ResponsiveButton

* Change live button text when paused

* For the dashboard toolbar button I need a transparent button so I refactored the states/variants into a new ToolbarButtonVariatn

* PageToolbar wip

* Progress

* Prgress

* Minor progress

* Fixed back button and responsive titles

* Fixed tv mode

* Updated

* support tv modes and playlist

* more progress

* Fixing lots of view states and responsive features

* Minor fixes

* review fixes

* Fixes to e2e tests

* Review fixes
2021-01-27 15:02:04 +01:00
Jack Westbrook
aaa6ebb231
DashboardSettings: fixes vertical scrolling (#30640)
* fix(dashboardsettings): allow view to scroll vertically

* refactor(dashboardsettings): use theme bg colour instead of palette colour
2021-01-26 15:35:30 +01:00
Ivana Huckova
56fb04e94c
Explore: Update styling of buttons (#30493)
* Switch deprecared toggle group for radio buttons

* Create transparent version of field, label and witch

* Replace divs wiith components

* Move styling from scss to js

* Update buttons

* Remove log generating file

* Update level button
2021-01-21 15:49:38 +01:00
Oscar Kilhed
b40b134e4c
Dashboard: Remove template variables option from ShareModal (#30395)
* Dashboard: Remove template variables option and update style of ShareModal (#29191)

* Simplified design

* Changed to text area component for embed and replaced select with RadioButtonGroup

* Use primitive string instead of SelectableValue in the states

* Changed embed html TextArea to writable and added a copy to clipboard button

* Added some space between the buttons on the snapshot tab and removed unnessecary FieldSet elements

* Add descriptions to the tabs that were missing descriptions

* Capitalization of theme names

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
2021-01-20 15:48:49 +01:00
Jack Westbrook
c0dd1b6d11
Dashboard: migrate version history list (#29970)
* refactor(dashboard): remove redundant directive code from SaveDashboardAsButton

* feat(dashboard): initial commit of rendering version history with react

* feat(dashboard): append versions, use historySrv, UI as functional components

* feat(dashboard): initial commit of versions settings diff view

* refactor(historylist): remove code related to listing versions

* refactor(dashboard): use angular directive to render version comparison

* refactor(dashboard): clean up versions settings

* refactor(dashboard): move version history UI components into own files

* refactor(dashboard): update typings for version history react components

* feat(dashboard): initial commit of react revert dashboard modal

* test(dashboardsettings): clean up historylistctrl tests

* chore(dashboardsettings): remove unused state variable

* test(dashboardsettings): initial commit of VersionSettings component tests

* feat(grafana-ui): add className concatenation on Checkbox label

* Apply suggestions from code review

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

* test(dashboardsettings): add more tests for Versions Settings react component

* test(dashboardsettings): add test to assert latest badge in Version history table

* fix(dashboardsettings): pass string to getDiff instead of react event object

* test(dashboardsettings): remove failing test from versions settings

* Moved scroll area to content, and fixed colors

* Update public/app/features/dashboard/components/DashboardSettings/VersionsSettings.test.tsx

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

* style(dashboardsettings): add new lines to versions settings tests

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
2021-01-19 13:19:01 +01:00
Torkel Ödegaard
abe808bcfd
ToolbarButton: New emotion based component to replace all navbar, DashNavButton and scss styles (#30333)
* ToolbarButton: New emotion based component to replace all navbar, DashNavButton and scss styles

* Component ready for use

* Dam dam dam

* Starting big button design update

* Tried to use main button component but failed

* Minor fix

* Updates

* Updated

* Update packages/grafana-ui/src/components/Button/Button.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Update packages/grafana-ui/src/components/Button/ButtonGroup.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Updated to use spacing base

* Button updates

* Removd unused import

* Remove unused import

* Use correct theme variable for border-radius

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>
2021-01-18 17:16:35 +01:00
Torkel Ödegaard
e54e997801
Badge: Design improvement & reduce contrast (#30328)
* Badge: Design improvement & reduce contrast

* light theme border tweak

* Updated snapshot
2021-01-18 11:51:27 +01:00
Torkel Ödegaard
1ccde2a173
AngularGraph: Fixes issues with legend wrapping after legend refactoring (#30283) 2021-01-15 15:17:46 +01:00
Torkel Ödegaard
4420a959f1
PanelOptionsGroups: Only restore styles from PanelOptionsGroup (#30215) 2021-01-12 12:09:24 +01:00
Torkel Ödegaard
d71073bd96
Links: Add underline on hover for links in NewsPanel (#30166) 2021-01-11 13:22:21 +01:00
Torkel Ödegaard
d066da42f8
Dashboard: Migrating dashboard settings to react (#27561)
* Dashboard: Started migrating dashboard settings

* Restore general settings from angular

* Use react permissions component

* feat(dashboard): add react LinksSettings wrapper for dash-links-editor

* feat(dashboard): add react VersionsSettings wrapper for gf-dashboard-history

* refactor(dashboard): replace DashboardPermissions connectWithStore with connect

* chore(dashboard): folderInfo as undefined

* feat(dashboard): initial commit of dashboard settings json editor

* feat(dashboard): introduce save json functionality

* chore(dashboard): delete obsolete imports

* feat(dashboard): add save and save as buttons to settings nav

* feat(dashboard): add react wrapper for annotations settings

* chore(dashboard): put back canDelete for general settings delete button

* Make editable

* Remove makeEditable from SettingsCtrl

* feat(dashboard): show json editor save button if canSave

* refactor(dashboard): move hasUnsavedFolderChange to dashboard.meta

* feat(dashboard): render hasUnsavedFolderChange view in permissions settings

* feat(dashboard): reset hasUnsavedFolderChange on settingg save success

* feat(dashboard): refresh route on sucessful settings save

* test(dashboard): update snapshots

* refactor(dashboard): automatically infer connected props for dashboard permissions

* refactor(dashboard): give dashboard versions checkboxes some padding

* Update public/app/types/folders.ts

Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>

Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>
Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>
2020-12-17 15:50:11 +01:00
Hugo Häggmark
681cefbb18
DashboardDS: Fixes display of long queries (#29808) 2020-12-15 10:08:02 +01:00
Ivana Huckova
e313c0cea0
@grafana/ui: Fix UI issues for cascader button dropdown and query input (#29727)
* Fix broken cascader width

* Remove text cursor in area where it does not affect slate
2020-12-09 19:01:28 +01:00
Shahzad
3bd4b8756a
PanelHeader: Fix panel header description inline code wrapping (#29628) 2020-12-08 19:55:50 +01:00
Uchechukwu Obasi
53cd59a5a5
Datasources: fixed long error message overflowing container (#29440)
* Fixed: error message overflow container

Signed-off-by: Uchechukwu Obasi <obasiuche62@gmail.com>

* used min-width property for better styling

Signed-off-by: Uchechukwu Obasi <obasiuche62@gmail.com>

* Switched to Alert component

* Fixed passing aria-label to Alert component

* Fixed e2e test (I hope)

* another attempt to fix e2e

* Fixed display name

Co-authored-by: Uchechukwu Obasi <obate@Uchechukwus-MacBook-Pro.local>
Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
2020-12-02 09:30:28 +01:00
Miguel Carvajal
a134ed7bf9
Panels: fix positioning of the header title (#29167)
the menu toggle icon is now absolute positioned and it no longer  affects the centering of the menu title
2020-11-18 10:10:43 +01:00
Torkel Ödegaard
5a11abe954
Events: Remove unused or unnecessary events (#28783)
* Events: Removing unused or unnessary events

* More cleanup

* Updated
2020-11-03 15:29:43 +01:00