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
9baa54e9
Commit
9baa54e9
authored
Nov 20, 2018
by
Torkel Ödegaard
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
added alert tab to new react panel editor
parent
51e71949
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
124 additions
and
31 deletions
+124
-31
public/app/features/alerting/AlertTabCtrl.ts
+3
-0
public/app/features/dashboard/dashgrid/AlertTab.tsx
+72
-0
public/app/features/dashboard/dashgrid/GeneralTab.tsx
+1
-1
public/app/features/dashboard/dashgrid/PanelEditor.tsx
+45
-24
public/app/plugins/panel/graph/module.ts
+0
-5
public/sass/components/_panel_editor.scss
+3
-1
No files found.
public/app/features/alerting/AlertTabCtrl.ts
View file @
9baa54e9
import
_
from
'lodash'
;
import
_
from
'lodash'
;
import
coreModule
from
'app/core/core_module'
;
import
{
ThresholdMapper
}
from
'./state/ThresholdMapper'
;
import
{
ThresholdMapper
}
from
'./state/ThresholdMapper'
;
import
{
QueryPart
}
from
'app/core/components/query_part/query_part'
;
import
{
QueryPart
}
from
'app/core/components/query_part/query_part'
;
import
alertDef
from
'./state/alertDef'
;
import
alertDef
from
'./state/alertDef'
;
...
@@ -430,3 +431,5 @@ export function alertTab() {
...
@@ -430,3 +431,5 @@ export function alertTab() {
controller
:
AlertTabCtrl
,
controller
:
AlertTabCtrl
,
};
};
}
}
coreModule
.
directive
(
'alertTab'
,
alertTab
);
public/app/features/dashboard/dashgrid/AlertTab.tsx
0 → 100644
View file @
9baa54e9
import
React
,
{
PureComponent
}
from
'react'
;
import
{
getAngularLoader
,
AngularComponent
}
from
'app/core/services/AngularLoader'
;
import
{
EditorTabBody
}
from
'./EditorTabBody'
;
import
'app/features/alerting/AlertTabCtrl'
;
interface
Props
{
angularPanel
?:
AngularComponent
;
}
export
class
AlertTab
extends
PureComponent
<
Props
>
{
element
:
any
;
component
:
AngularComponent
;
constructor
(
props
)
{
super
(
props
);
}
componentDidMount
()
{
if
(
this
.
shouldLoadAlertTab
())
{
this
.
loadAlertTab
();
}
}
componentDidUpdate
(
prevProps
:
Props
)
{
if
(
this
.
shouldLoadAlertTab
())
{
this
.
loadAlertTab
();
}
}
shouldLoadAlertTab
()
{
return
this
.
props
.
angularPanel
&&
this
.
element
;
}
componentWillUnmount
()
{
if
(
this
.
component
)
{
this
.
component
.
destroy
();
}
}
loadAlertTab
()
{
const
{
angularPanel
}
=
this
.
props
;
const
scope
=
angularPanel
.
getScope
();
// When full page reloading in edit mode the angular panel has on fully compiled & instantiated yet
if
(
!
scope
.
$$childHead
)
{
setTimeout
(()
=>
{
this
.
forceUpdate
();
});
return
;
}
const
panelCtrl
=
scope
.
$$childHead
.
ctrl
;
const
loader
=
getAngularLoader
();
const
template
=
'<alert-tab />'
;
const
scopeProps
=
{
ctrl
:
panelCtrl
,
};
this
.
component
=
loader
.
load
(
this
.
element
,
scopeProps
,
template
);
}
render
()
{
return
(
<
EditorTabBody
toolbarItems=
{
[]
}
>
<
div
ref=
{
element
=>
(
this
.
element
=
element
)
}
/>
</
EditorTabBody
>
);
}
}
public/app/features/dashboard/dashgrid/GeneralTab.tsx
View file @
9baa54e9
...
@@ -51,7 +51,7 @@ export class GeneralTab extends PureComponent<Props> {
...
@@ -51,7 +51,7 @@ export class GeneralTab extends PureComponent<Props> {
return
(
return
(
<
EditorTabBody
main=
{
currentDataSource
}
toolbarItems=
{
[]
}
>
<
EditorTabBody
main=
{
currentDataSource
}
toolbarItems=
{
[]
}
>
<
div
ref=
{
element
=>
(
this
.
element
=
element
)
}
style=
{
{
width
:
'100%'
}
}
/>
<
div
ref=
{
element
=>
(
this
.
element
=
element
)
}
/>
</
EditorTabBody
>
</
EditorTabBody
>
);
);
}
}
...
...
public/app/features/dashboard/dashgrid/PanelEditor.tsx
View file @
9baa54e9
...
@@ -4,7 +4,9 @@ import classNames from 'classnames';
...
@@ -4,7 +4,9 @@ import classNames from 'classnames';
import
{
QueriesTab
}
from
'./QueriesTab'
;
import
{
QueriesTab
}
from
'./QueriesTab'
;
import
{
VisualizationTab
}
from
'./VisualizationTab'
;
import
{
VisualizationTab
}
from
'./VisualizationTab'
;
import
{
GeneralTab
}
from
'./GeneralTab'
;
import
{
GeneralTab
}
from
'./GeneralTab'
;
import
{
AlertTab
}
from
'./AlertTab'
;
import
config
from
'app/core/config'
;
import
{
store
}
from
'app/store/store'
;
import
{
store
}
from
'app/store/store'
;
import
{
updateLocation
}
from
'app/core/actions'
;
import
{
updateLocation
}
from
'app/core/actions'
;
import
{
AngularComponent
}
from
'app/core/services/AngularLoader'
;
import
{
AngularComponent
}
from
'app/core/services/AngularLoader'
;
...
@@ -28,16 +30,8 @@ interface PanelEditorTab {
...
@@ -28,16 +30,8 @@ interface PanelEditorTab {
}
}
export
class
PanelEditor
extends
PureComponent
<
PanelEditorProps
>
{
export
class
PanelEditor
extends
PureComponent
<
PanelEditorProps
>
{
tabs
:
PanelEditorTab
[];
constructor
(
props
)
{
constructor
(
props
)
{
super
(
props
);
super
(
props
);
this
.
tabs
=
[
{
id
:
'general'
,
text
:
'General'
,
icon
:
'gicon gicon-preferences'
},
{
id
:
'queries'
,
text
:
'Queries'
,
icon
:
'fa fa-database'
},
{
id
:
'visualization'
,
text
:
'Visualization'
,
icon
:
'fa fa-line-chart'
},
];
}
}
onChangeTab
=
(
tab
:
PanelEditorTab
)
=>
{
onChangeTab
=
(
tab
:
PanelEditorTab
)
=>
{
...
@@ -50,10 +44,48 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
...
@@ -50,10 +44,48 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
this
.
forceUpdate
();
this
.
forceUpdate
();
};
};
render
(
)
{
render
CurrentTab
(
activeTab
:
string
)
{
const
{
panel
,
dashboard
,
onTypeChanged
,
plugin
,
angularPanel
}
=
this
.
props
;
const
{
panel
,
dashboard
,
onTypeChanged
,
plugin
,
angularPanel
}
=
this
.
props
;
const
{
location
}
=
store
.
getState
();
const
activeTab
=
location
.
query
.
tab
||
'queries'
;
switch
(
activeTab
)
{
case
'general'
:
return
<
GeneralTab
panel=
{
panel
}
/>;
case
'queries'
:
return
<
QueriesTab
panel=
{
panel
}
dashboard=
{
dashboard
}
/>;
case
'alert'
:
return
<
AlertTab
angularPanel=
{
angularPanel
}
/>;
case
'visualization'
:
return
(
<
VisualizationTab
panel=
{
panel
}
dashboard=
{
dashboard
}
plugin=
{
plugin
}
onTypeChanged=
{
onTypeChanged
}
angularPanel=
{
angularPanel
}
/>
);
default
:
return
null
;
}
}
render
()
{
const
{
plugin
}
=
this
.
props
;
const
activeTab
=
store
.
getState
().
location
.
query
.
tab
||
'queries'
;
const
tabs
=
[
{
id
:
'general'
,
text
:
'General'
,
icon
:
'gicon gicon-preferences'
},
{
id
:
'queries'
,
text
:
'Queries'
,
icon
:
'fa fa-database'
},
{
id
:
'visualization'
,
text
:
'Visualization'
,
icon
:
'fa fa-line-chart'
},
];
if
(
config
.
alertingEnabled
&&
plugin
.
id
===
'graph'
)
{
tabs
.
push
({
id
:
'alert'
,
text
:
'Alert'
,
icon
:
'gicon gicon-alert'
,
});
}
return
(
return
(
<
div
className=
"panel-editor-container__editor"
>
<
div
className=
"panel-editor-container__editor"
>
...
@@ -65,23 +97,12 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
...
@@ -65,23 +97,12 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
<
div
className=
"panel-editor-tabs"
>
<
div
className=
"panel-editor-tabs"
>
<
ul
className=
"gf-tabs"
>
<
ul
className=
"gf-tabs"
>
{
t
his
.
t
abs
.
map
(
tab
=>
{
{
tabs
.
map
(
tab
=>
{
return
<
TabItem
tab=
{
tab
}
activeTab=
{
activeTab
}
onClick=
{
this
.
onChangeTab
}
key=
{
tab
.
id
}
/>;
return
<
TabItem
tab=
{
tab
}
activeTab=
{
activeTab
}
onClick=
{
this
.
onChangeTab
}
key=
{
tab
.
id
}
/>;
})
}
})
}
</
ul
>
</
ul
>
</
div
>
</
div
>
{
this
.
renderCurrentTab
(
activeTab
)
}
{
activeTab
===
'general'
&&
<
GeneralTab
panel=
{
panel
}
/>
}
{
activeTab
===
'queries'
&&
<
QueriesTab
panel=
{
panel
}
dashboard=
{
dashboard
}
/>
}
{
activeTab
===
'visualization'
&&
(
<
VisualizationTab
panel=
{
panel
}
dashboard=
{
dashboard
}
plugin=
{
plugin
}
onTypeChanged=
{
onTypeChanged
}
angularPanel=
{
angularPanel
}
/>
)
}
</
div
>
</
div
>
);
);
}
}
...
...
public/app/plugins/panel/graph/module.ts
View file @
9baa54e9
...
@@ -138,11 +138,6 @@ class GraphCtrl extends MetricsPanelCtrl {
...
@@ -138,11 +138,6 @@ class GraphCtrl extends MetricsPanelCtrl {
this
.
addEditorTab
(
'Display options'
,
'public/app/plugins/panel/graph/tab_display.html'
);
this
.
addEditorTab
(
'Display options'
,
'public/app/plugins/panel/graph/tab_display.html'
);
this
.
addEditorTab
(
'Axes'
,
axesEditorComponent
);
this
.
addEditorTab
(
'Axes'
,
axesEditorComponent
);
this
.
addEditorTab
(
'Legend'
,
'public/app/plugins/panel/graph/tab_legend.html'
);
this
.
addEditorTab
(
'Legend'
,
'public/app/plugins/panel/graph/tab_legend.html'
);
// if (config.alertingEnabled) {
// this.addEditorTab('Alert', alertTab, 5);
// }
this
.
subTabIndex
=
0
;
this
.
subTabIndex
=
0
;
}
}
...
...
public/sass/components/_panel_editor.scss
View file @
9baa54e9
...
@@ -10,12 +10,14 @@
...
@@ -10,12 +10,14 @@
&
--edit
{
&
--edit
{
flex
:
1
1
0
;
flex
:
1
1
0
;
height
:
unset
;
height
:
unset
;
margin
:
0
$dashboard-padding
;
}
}
&
--view
{
&
--view
{
flex
:
1
1
0
;
flex
:
1
1
0
;
height
:
80%
;
height
:
80%
;
padding
:
$dashboard-padding
;
margin
:
0
$dashboard-padding
;
padding-top
:
$dashboard-padding
;
}
}
}
}
...
...
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