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
bb357adc
Unverified
Commit
bb357adc
authored
Apr 09, 2020
by
Ryan McKinley
Committed by
GitHub
Apr 09, 2020
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
NewEditor: don't show field tabs for non data panels (#23487)
parent
ba70b59f
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
26 additions
and
9 deletions
+26
-9
public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx
+26
-9
No files found.
public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx
View file @
bb357adc
...
@@ -74,6 +74,9 @@ export const OptionsPaneContent: React.FC<{
...
@@ -74,6 +74,9 @@ export const OptionsPaneContent: React.FC<{
[
data
,
plugin
,
panel
,
onFieldConfigsChange
]
[
data
,
plugin
,
panel
,
onFieldConfigsChange
]
);
);
// When the panel has no query only show the main tab
const
showMainTab
=
activeTab
===
'options'
||
plugin
.
meta
.
skipDataQuery
;
return
(
return
(
<
div
className=
{
styles
.
panelOptionsPane
}
>
<
div
className=
{
styles
.
panelOptionsPane
}
>
{
plugin
&&
(
{
plugin
&&
(
...
@@ -81,6 +84,7 @@ export const OptionsPaneContent: React.FC<{
...
@@ -81,6 +84,7 @@ export const OptionsPaneContent: React.FC<{
<
TabsBar
className=
{
styles
.
tabsBar
}
>
<
TabsBar
className=
{
styles
.
tabsBar
}
>
<
TabsBarContent
<
TabsBarContent
width=
{
width
}
width=
{
width
}
showFields=
{
!
plugin
.
meta
.
skipDataQuery
}
isSearching=
{
isSearching
}
isSearching=
{
isSearching
}
styles=
{
styles
}
styles=
{
styles
}
activeTab=
{
activeTab
}
activeTab=
{
activeTab
}
...
@@ -91,7 +95,7 @@ export const OptionsPaneContent: React.FC<{
...
@@ -91,7 +95,7 @@ export const OptionsPaneContent: React.FC<{
</
TabsBar
>
</
TabsBar
>
<
TabContent
className=
{
styles
.
tabContent
}
>
<
TabContent
className=
{
styles
.
tabContent
}
>
<
CustomScrollbar
>
<
CustomScrollbar
>
{
activeTab
===
'options'
&&
(
{
showMainTab
?
(
<
PanelOptionsTab
<
PanelOptionsTab
panel=
{
panel
}
panel=
{
panel
}
plugin=
{
plugin
}
plugin=
{
plugin
}
...
@@ -101,9 +105,12 @@ export const OptionsPaneContent: React.FC<{
...
@@ -101,9 +105,12 @@ export const OptionsPaneContent: React.FC<{
onFieldConfigsChange=
{
onFieldConfigsChange
}
onFieldConfigsChange=
{
onFieldConfigsChange
}
onPanelOptionsChanged=
{
onPanelOptionsChanged
}
onPanelOptionsChanged=
{
onPanelOptionsChanged
}
/>
/>
)
:
(
<>
{
activeTab
===
'defaults'
&&
renderFieldOptions
(
plugin
)
}
{
activeTab
===
'overrides'
&&
renderFieldOverrideOptions
(
plugin
)
}
</>
)
}
)
}
{
activeTab
===
'defaults'
&&
renderFieldOptions
(
plugin
)
}
{
activeTab
===
'overrides'
&&
renderFieldOverrideOptions
(
plugin
)
}
</
CustomScrollbar
>
</
CustomScrollbar
>
</
TabContent
>
</
TabContent
>
</
div
>
</
div
>
...
@@ -114,13 +121,14 @@ export const OptionsPaneContent: React.FC<{
...
@@ -114,13 +121,14 @@ export const OptionsPaneContent: React.FC<{
export
const
TabsBarContent
:
React
.
FC
<
{
export
const
TabsBarContent
:
React
.
FC
<
{
width
:
number
;
width
:
number
;
showFields
:
boolean
;
isSearching
:
boolean
;
isSearching
:
boolean
;
activeTab
:
string
;
activeTab
:
string
;
styles
:
OptionsPaneStyles
;
styles
:
OptionsPaneStyles
;
onClose
:
()
=>
void
;
onClose
:
()
=>
void
;
setSearchMode
:
(
mode
:
boolean
)
=>
void
;
setSearchMode
:
(
mode
:
boolean
)
=>
void
;
setActiveTab
:
(
tab
:
string
)
=>
void
;
setActiveTab
:
(
tab
:
string
)
=>
void
;
}
>
=
({
width
,
isSearching
,
activeTab
,
onClose
,
setSearchMode
,
setActiveTab
,
styles
})
=>
{
}
>
=
({
width
,
showFields
,
isSearching
,
activeTab
,
onClose
,
setSearchMode
,
setActiveTab
,
styles
})
=>
{
if
(
isSearching
)
{
if
(
isSearching
)
{
const
defaultStyles
=
{
const
defaultStyles
=
{
transition
:
'width 50ms ease-in-out'
,
transition
:
'width 50ms ease-in-out'
,
...
@@ -156,13 +164,21 @@ export const TabsBarContent: React.FC<{
...
@@ -156,13 +164,21 @@ export const TabsBarContent: React.FC<{
);
);
}
}
// Show the appropriate tabs
let
tabs
=
tabSelections
;
let
active
=
tabs
.
find
(
v
=>
v
.
value
===
activeTab
);
if
(
!
showFields
)
{
active
=
tabSelections
[
0
];
tabs
=
[
active
];
}
return
(
return
(
<>
<>
{
width
<
352
?
(
{
width
<
352
?
(
<
div
className=
"flex-grow-1"
>
<
div
className=
"flex-grow-1"
>
<
Select
<
Select
options=
{
tab
Selection
s
}
options=
{
tabs
}
value=
{
tabSelections
.
find
(
v
=>
v
.
value
===
activeTab
)
}
value=
{
active
}
onChange=
{
v
=>
{
onChange=
{
v
=>
{
setActiveTab
(
v
.
value
);
setActiveTab
(
v
.
value
);
}
}
}
}
...
@@ -170,11 +186,11 @@ export const TabsBarContent: React.FC<{
...
@@ -170,11 +186,11 @@ export const TabsBarContent: React.FC<{
</
div
>
</
div
>
)
:
(
)
:
(
<>
<>
{
tab
Selection
s
.
map
(
item
=>
(
{
tabs
.
map
(
item
=>
(
<
Tab
<
Tab
key=
{
item
.
value
}
key=
{
item
.
value
}
label=
{
item
.
label
}
label=
{
item
.
label
}
active=
{
active
Tab
===
item
.
value
}
active=
{
active
.
value
===
item
.
value
}
onChangeTab=
{
()
=>
setActiveTab
(
item
.
value
)
}
onChangeTab=
{
()
=>
setActiveTab
(
item
.
value
)
}
/>
/>
))
}
))
}
...
@@ -182,6 +198,7 @@ export const TabsBarContent: React.FC<{
...
@@ -182,6 +198,7 @@ export const TabsBarContent: React.FC<{
</>
</>
)
}
)
}
{
/*
<div className={styles.tabsButton}>
<div className={styles.tabsButton}>
<DashNavButton
<DashNavButton
icon="search"
icon="search"
...
@@ -190,7 +207,7 @@ export const TabsBarContent: React.FC<{
...
@@ -190,7 +207,7 @@ export const TabsBarContent: React.FC<{
classSuffix="search-options"
classSuffix="search-options"
onClick={() => setSearchMode(true)}
onClick={() => setSearchMode(true)}
/>
/>
</
div
>
</div>
*/
}
<
div
className=
{
styles
.
tabsButton
}
>
<
div
className=
{
styles
.
tabsButton
}
>
<
DashNavButton
<
DashNavButton
icon=
"angle-right"
icon=
"angle-right"
...
...
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