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
681cefbb
Unverified
Commit
681cefbb
authored
Dec 15, 2020
by
Hugo Häggmark
Committed by
GitHub
Dec 15, 2020
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
DashboardDS: Fixes display of long queries (#29808)
parent
b8025c77
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
65 additions
and
42 deletions
+65
-42
public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx
+8
-31
public/app/plugins/datasource/dashboard/DashboardQueryRow.tsx
+48
-0
public/app/plugins/datasource/dashboard/types.ts
+9
-1
public/sass/components/_query_editor.scss
+0
-10
No files found.
public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx
View file @
681cefbb
// Libraries
import
React
,
{
PureComponent
}
from
'react'
;
import
React
,
{
PureComponent
}
from
'react'
;
import
{
LegacyForms
,
VerticalGroup
}
from
'@grafana/ui'
;
import
{
DataQuery
,
PanelData
,
SelectableValue
}
from
'@grafana/data'
;
import
{
css
}
from
'emotion'
;
// Types
import
{
DashboardQuery
,
ResultInfo
}
from
'./types'
;
import
{
LegacyForms
,
Icon
}
from
'@grafana/ui'
;
import
{
DataQuery
,
DataQueryError
,
PanelData
,
DataFrame
,
SelectableValue
}
from
'@grafana/data'
;
import
{
DashboardQuery
}
from
'./types'
;
import
config
from
'app/core/config'
;
import
config
from
'app/core/config'
;
import
{
css
}
from
'emotion'
;
import
{
getDatasourceSrv
}
from
'app/features/plugins/datasource_srv'
;
import
{
getDatasourceSrv
}
from
'app/features/plugins/datasource_srv'
;
import
{
PanelModel
}
from
'app/features/dashboard/state'
;
import
{
PanelModel
}
from
'app/features/dashboard/state'
;
import
{
SHARED_DASHBODARD_QUERY
}
from
'./types'
;
import
{
SHARED_DASHBODARD_QUERY
}
from
'./types'
;
import
{
getDashboardSrv
}
from
'app/features/dashboard/services/DashboardSrv'
;
import
{
getDashboardSrv
}
from
'app/features/dashboard/services/DashboardSrv'
;
import
{
filterPanelDataToQuery
}
from
'app/features/query/components/QueryEditorRow'
;
import
{
filterPanelDataToQuery
}
from
'app/features/query/components/QueryEditorRow'
;
import
{
DashboardQueryRow
}
from
'./DashboardQueryRow'
;
const
{
Select
}
=
LegacyForms
;
const
{
Select
}
=
LegacyForms
;
type
ResultInfo
=
{
img
:
string
;
// The Datasource
refId
:
string
;
query
:
string
;
// As text
data
:
DataFrame
[];
error
?:
DataQueryError
;
};
function
getQueryDisplayText
(
query
:
DataQuery
):
string
{
function
getQueryDisplayText
(
query
:
DataQuery
):
string
{
return
JSON
.
stringify
(
query
);
return
JSON
.
stringify
(
query
);
}
}
...
@@ -107,25 +98,11 @@ export class DashboardQueryEditor extends PureComponent<Props, State> {
...
@@ -107,25 +98,11 @@ export class DashboardQueryEditor extends PureComponent<Props, State> {
const
{
results
}
=
this
.
state
;
const
{
results
}
=
this
.
state
;
return
(
return
(
<
div
>
<
VerticalGroup
spacing=
"sm"
>
{
results
.
map
((
target
,
index
)
=>
{
{
results
.
map
((
target
,
index
)
=>
{
return
(
return
<
DashboardQueryRow
editURL=
{
editURL
}
target=
{
target
}
key=
{
`DashboardQueryRow-${index}`
}
/>;
<
div
className=
"query-editor-row__header"
key=
{
index
}
>
<
div
className=
"query-editor-row__ref-id"
>
<
img
src=
{
target
.
img
}
width=
{
16
}
className=
{
css
({
marginRight
:
'8px'
})
}
/>
{
target
.
refId
}
:
</
div
>
<
div
className=
"query-editor-row__collapsed-text"
>
<
a
href=
{
editURL
}
>
{
target
.
query
}
<
Icon
name=
"external-link-alt"
/>
</
a
>
</
div
>
</
div
>
);
})
}
})
}
</
div
>
</
VerticalGroup
>
);
);
}
}
...
...
public/app/plugins/datasource/dashboard/DashboardQueryRow.tsx
0 → 100644
View file @
681cefbb
import
React
,
{
ReactElement
}
from
'react'
;
import
{
css
}
from
'emotion'
;
import
{
Icon
,
useStyles
}
from
'@grafana/ui'
;
import
{
GrafanaTheme
}
from
'@grafana/data'
;
import
{
ResultInfo
}
from
'./types'
;
interface
Props
{
editURL
:
string
;
target
:
ResultInfo
;
}
export
function
DashboardQueryRow
({
editURL
,
target
}:
Props
):
ReactElement
{
const
style
=
useStyles
(
getStyles
);
return
(
<
div
className=
{
style
.
queryEditorRowHeader
}
>
<
div
>
<
img
src=
{
target
.
img
}
width=
{
16
}
className=
{
style
.
logo
}
/>
<
span
>
{
`${target.refId}:`
}
</
span
>
</
div
>
<
div
>
<
a
href=
{
editURL
}
>
{
target
.
query
}
<
Icon
name=
"external-link-alt"
/>
</
a
>
</
div
>
</
div
>
);
}
function
getStyles
(
theme
:
GrafanaTheme
)
{
return
{
logo
:
css
`
label: logo;
margin-right:
${
theme
.
spacing
.
sm
}
;
`
,
queryEditorRowHeader
:
css
`
label: queryEditorRowHeader;
display: flex;
padding: 4px 8px;
flex-flow: row wrap;
background:
${
theme
.
colors
.
bg2
}
;
align-items: center;
`
,
};
}
public/app/plugins/datasource/dashboard/types.ts
View file @
681cefbb
import
{
Data
Query
}
from
'@grafana/data'
;
import
{
Data
Frame
,
DataQuery
,
DataQueryError
}
from
'@grafana/data'
;
export
const
SHARED_DASHBODARD_QUERY
=
'-- Dashboard --'
;
export
const
SHARED_DASHBODARD_QUERY
=
'-- Dashboard --'
;
export
interface
DashboardQuery
extends
DataQuery
{
export
interface
DashboardQuery
extends
DataQuery
{
panelId
?:
number
;
panelId
?:
number
;
}
}
export
type
ResultInfo
=
{
img
:
string
;
// The Datasource
refId
:
string
;
query
:
string
;
// As text
data
:
DataFrame
[];
error
?:
DataQueryError
;
};
public/sass/components/_query_editor.scss
View file @
681cefbb
...
@@ -108,16 +108,6 @@ input[type='text'].tight-form-func-param {
...
@@ -108,16 +108,6 @@ input[type='text'].tight-form-func-param {
}
}
}
}
.query-editor-row__header
{
display
:
flex
;
padding
:
4px
0px
4px
8px
;
position
:
relative
;
height
:
35px
;
background
:
$input-label-bg
;
flex-wrap
:
nowrap
;
align-items
:
center
;
}
.query-editor-row__action
{
.query-editor-row__action
{
margin-left
:
3px
;
margin-left
:
3px
;
background
:
transparent
;
background
:
transparent
;
...
...
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