Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
N
nexpie-grafana-theme
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Registry
Registry
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kornkitt Poolsup
nexpie-grafana-theme
Commits
6c1f8b9c
Unverified
Commit
6c1f8b9c
authored
Dec 17, 2020
by
Peter Holmberg
Committed by
GitHub
Dec 17, 2020
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Ng Alerting: Remove scroll and fix SplitPane limiters (#29906)
* some layout fixes * use built in limiter
parent
d066da42
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
48 additions
and
31 deletions
+48
-31
public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx
+4
-6
public/app/features/alerting/NextGenAlertingPage.tsx
+42
-25
public/app/features/alerting/components/AlertingQueryEditor.tsx
+2
-0
No files found.
public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx
View file @
6c1f8b9c
...
@@ -76,15 +76,14 @@ export class SplitPaneWrapper extends PureComponent<Props> {
...
@@ -76,15 +76,14 @@ export class SplitPaneWrapper extends PureComponent<Props> {
panel toolbar and editor toolbar (~120px). This is to prevent resizing
panel toolbar and editor toolbar (~120px). This is to prevent resizing
the preview window beyond the browser window.
the preview window beyond the browser window.
*/
*/
const
maxHeight
=
window
.
innerHeight
-
120
;
if
(
Array
.
isArray
(
leftPaneComponents
))
{
if
(
Array
.
isArray
(
leftPaneComponents
))
{
return
(
return
(
<
SplitPane
<
SplitPane
split=
"horizontal"
split=
"horizontal"
maxSize=
{
maxHeight
}
maxSize=
{
-
200
}
primary=
"first"
primary=
"first"
size=
{
topPaneSize
<
200
?
200
:
topPaneSize
}
size=
{
topPaneSize
}
pane2Style=
{
{
minHeight
:
0
}
}
pane2Style=
{
{
minHeight
:
0
}
}
resizerClassName=
{
styles
.
resizerH
}
resizerClassName=
{
styles
.
resizerH
}
onDragStarted=
{
this
.
onDragStarted
}
onDragStarted=
{
this
.
onDragStarted
}
...
@@ -101,7 +100,6 @@ export class SplitPaneWrapper extends PureComponent<Props> {
...
@@ -101,7 +100,6 @@ export class SplitPaneWrapper extends PureComponent<Props> {
render
()
{
render
()
{
const
{
rightPaneVisible
,
rightPaneComponents
,
uiState
}
=
this
.
props
;
const
{
rightPaneVisible
,
rightPaneComponents
,
uiState
}
=
this
.
props
;
// Limit options pane width to 90% of screen.
// Limit options pane width to 90% of screen.
const
maxWidth
=
window
.
innerWidth
*
0.9
;
const
styles
=
getStyles
(
config
.
theme
);
const
styles
=
getStyles
(
config
.
theme
);
// Need to handle when width is relative. ie a percentage of the viewport
// Need to handle when width is relative. ie a percentage of the viewport
...
@@ -117,8 +115,8 @@ export class SplitPaneWrapper extends PureComponent<Props> {
...
@@ -117,8 +115,8 @@ export class SplitPaneWrapper extends PureComponent<Props> {
return
(
return
(
<
SplitPane
<
SplitPane
split=
"vertical"
split=
"vertical"
maxSize=
{
maxWidth
}
maxSize=
{
-
300
}
size=
{
rightPaneSize
>=
300
?
rightPaneSize
:
300
}
size=
{
rightPaneSize
}
primary=
"second"
primary=
"second"
resizerClassName=
{
styles
.
resizerV
}
resizerClassName=
{
styles
.
resizerV
}
onDragStarted=
{
()
=>
(
document
.
body
.
style
.
cursor
=
'col-resize'
)
}
onDragStarted=
{
()
=>
(
document
.
body
.
style
.
cursor
=
'col-resize'
)
}
...
...
public/app/features/alerting/NextGenAlertingPage.tsx
View file @
6c1f8b9c
...
@@ -66,12 +66,12 @@ class NextGenAlertingPage extends PureComponent<Props, State> {
...
@@ -66,12 +66,12 @@ class NextGenAlertingPage extends PureComponent<Props, State> {
<
Button
variant=
"destructive"
key=
"discard"
onClick=
{
this
.
onDiscard
}
>
<
Button
variant=
"destructive"
key=
"discard"
onClick=
{
this
.
onDiscard
}
>
Discard
Discard
</
Button
>,
</
Button
>,
<
Button
variant=
"primary"
key=
"save"
onClick=
{
this
.
onSaveAlert
}
>
Save
</
Button
>,
<
Button
variant=
"secondary"
key=
"test"
onClick=
{
this
.
onTest
}
>
<
Button
variant=
"secondary"
key=
"test"
onClick=
{
this
.
onTest
}
>
Test
Test
</
Button
>,
</
Button
>,
<
Button
variant=
"primary"
key=
"save"
onClick=
{
this
.
onSaveAlert
}
>
Save
</
Button
>,
];
];
}
}
...
@@ -93,21 +93,23 @@ class NextGenAlertingPage extends PureComponent<Props, State> {
...
@@ -93,21 +93,23 @@ class NextGenAlertingPage extends PureComponent<Props, State> {
actions=
{
this
.
renderToolbarActions
()
}
actions=
{
this
.
renderToolbarActions
()
}
titlePadding=
"sm"
titlePadding=
"sm"
/>
/>
<
SplitPaneWrapper
<
div
className=
{
styles
.
splitPanesWrapper
}
>
leftPaneComponents=
{
[
<
SplitPaneWrapper
<
AlertingQueryPreview
key=
"queryPreview"
queryRunner=
{
queryRunner
}
/>,
leftPaneComponents=
{
[
<
AlertingQueryEditor
key=
"queryEditor"
/>,
<
AlertingQueryPreview
key=
"queryPreview"
queryRunner=
{
queryRunner
}
/>,
]
}
<
AlertingQueryEditor
key=
"queryEditor"
/>,
uiState=
{
uiState
}
]
}
updateUiState=
{
updateAlertDefinitionUiState
}
uiState=
{
uiState
}
rightPaneComponents=
{
updateUiState=
{
updateAlertDefinitionUiState
}
<
AlertDefinitionOptions
rightPaneComponents=
{
alertDefinition=
{
alertDefinition
}
<
AlertDefinitionOptions
onChange=
{
this
.
onChangeAlertOption
}
alertDefinition=
{
alertDefinition
}
notificationChannelTypes=
{
notificationChannelTypes
}
onChange=
{
this
.
onChangeAlertOption
}
/>
notificationChannelTypes=
{
notificationChannelTypes
}
}
/>
/>
}
/>
</
div
>
</
div
>
</
div
>
);
);
}
}
...
@@ -131,10 +133,25 @@ const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = {
...
@@ -131,10 +133,25 @@ const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = {
export
default
hot
(
module
)(
connect
(
mapStateToProps
,
mapDispatchToProps
)(
NextGenAlertingPage
));
export
default
hot
(
module
)(
connect
(
mapStateToProps
,
mapDispatchToProps
)(
NextGenAlertingPage
));
const
getStyles
=
stylesFactory
((
theme
:
GrafanaTheme
)
=>
{
const
getStyles
=
stylesFactory
((
theme
:
GrafanaTheme
)
=>
({
return
{
wrapper
:
css
`
wrapper
:
css
`
width: 100%;
background-color:
${
theme
.
colors
.
dashboardBg
}
;
height: 100%;
`
,
position: fixed;
};
z-index:
${
theme
.
zIndex
.
sidemenu
}
;
});
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
${
theme
.
colors
.
dashboardBg
}
;
display: flex;
flex-direction: column;
`
,
splitPanesWrapper
:
css
`
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
position: relative;
`
,
}));
public/app/features/alerting/components/AlertingQueryEditor.tsx
View file @
6c1f8b9c
...
@@ -78,10 +78,12 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
...
@@ -78,10 +78,12 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
return
{
return
{
wrapper
:
css
`
wrapper
:
css
`
padding-left:
${
theme
.
spacing
.
md
}
;
padding-left:
${
theme
.
spacing
.
md
}
;
height: 100%;
`
,
`
,
container
:
css
`
container
:
css
`
padding:
${
theme
.
spacing
.
md
}
;
padding:
${
theme
.
spacing
.
md
}
;
background-color:
${
theme
.
colors
.
panelBg
}
;
background-color:
${
theme
.
colors
.
panelBg
}
;
height: 100%;
`
,
`
,
editorWrapper
:
css
`
editorWrapper
:
css
`
border: 1px solid
${
theme
.
colors
.
panelBorder
}
;
border: 1px solid
${
theme
.
colors
.
panelBorder
}
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment