mirror of https://github.com/grafana/grafana
Adela Almasan
7 months ago
commit
05ae5be918
|
@ -0,0 +1,93 @@ |
||||
package sqleng |
||||
|
||||
import ( |
||||
"context" |
||||
"encoding/json" |
||||
"errors" |
||||
"fmt" |
||||
"net" |
||||
"strings" |
||||
|
||||
"github.com/grafana/grafana-plugin-sdk-go/backend" |
||||
"github.com/grafana/grafana-plugin-sdk-go/backend/log" |
||||
) |
||||
|
||||
func (e *DataSourceHandler) CheckHealth(ctx context.Context, req *backend.CheckHealthRequest) (*backend.CheckHealthResult, error) { |
||||
if err := e.db.Ping(); err != nil { |
||||
logCheckHealthError(ctx, e.dsInfo, err) |
||||
if strings.EqualFold(req.PluginContext.User.Role, "Admin") { |
||||
return ErrToHealthCheckResult(err) |
||||
} |
||||
return &backend.CheckHealthResult{Status: backend.HealthStatusError, Message: e.TransformQueryError(e.log, err).Error()}, nil |
||||
} |
||||
return &backend.CheckHealthResult{Status: backend.HealthStatusOk, Message: "Database Connection OK"}, nil |
||||
} |
||||
|
||||
// ErrToHealthCheckResult converts error into user friendly health check message
|
||||
// This should be called with non nil error. If the err parameter is empty, we will send Internal Server Error
|
||||
func ErrToHealthCheckResult(err error) (*backend.CheckHealthResult, error) { |
||||
if err == nil { |
||||
return &backend.CheckHealthResult{Status: backend.HealthStatusError, Message: "Internal Server Error"}, nil |
||||
} |
||||
res := &backend.CheckHealthResult{Status: backend.HealthStatusError, Message: err.Error()} |
||||
details := map[string]string{ |
||||
"verboseMessage": err.Error(), |
||||
"errorDetailsLink": "https://grafana.com/docs/grafana/latest/datasources/mssql", |
||||
} |
||||
var opErr *net.OpError |
||||
if errors.As(err, &opErr) { |
||||
res.Message = "Network error: Failed to connect to the server" |
||||
if opErr != nil && opErr.Err != nil { |
||||
res.Message += fmt.Sprintf(". Error message: %s", opErr.Err.Error()) |
||||
} |
||||
} |
||||
if strings.HasPrefix(err.Error(), "mssql: ") { |
||||
res.Message = "Database error: Failed to connect to the mssql server" |
||||
if unwrappedErr := errors.Unwrap(err); unwrappedErr != nil { |
||||
details["verboseMessage"] = unwrappedErr.Error() |
||||
} |
||||
} |
||||
detailBytes, marshalErr := json.Marshal(details) |
||||
if marshalErr != nil { |
||||
return res, nil |
||||
} |
||||
res.JSONDetails = detailBytes |
||||
return res, nil |
||||
} |
||||
|
||||
func logCheckHealthError(ctx context.Context, dsInfo DataSourceInfo, err error) { |
||||
logger := log.DefaultLogger.FromContext(ctx) |
||||
configSummary := map[string]any{ |
||||
"config_url_length": len(dsInfo.URL), |
||||
"config_user_length": len(dsInfo.User), |
||||
"config_database_length": len(dsInfo.Database), |
||||
"config_json_data_database_length": len(dsInfo.JsonData.Database), |
||||
"config_max_open_conns": dsInfo.JsonData.MaxOpenConns, |
||||
"config_max_idle_conns": dsInfo.JsonData.MaxIdleConns, |
||||
"config_conn_max_life_time": dsInfo.JsonData.ConnMaxLifetime, |
||||
"config_conn_timeout": dsInfo.JsonData.ConnectionTimeout, |
||||
"config_ssl_mode": dsInfo.JsonData.Mode, |
||||
"config_tls_configuration_method": dsInfo.JsonData.ConfigurationMethod, |
||||
"config_tls_skip_verify": dsInfo.JsonData.TlsSkipVerify, |
||||
"config_timezone": dsInfo.JsonData.Timezone, |
||||
"config_time_interval": dsInfo.JsonData.TimeInterval, |
||||
"config_enable_secure_proxy": dsInfo.JsonData.SecureDSProxy, |
||||
"config_allow_clear_text_passwords": dsInfo.JsonData.AllowCleartextPasswords, |
||||
"config_authentication_type": dsInfo.JsonData.AuthenticationType, |
||||
"config_ssl_root_cert_file_length": len(dsInfo.JsonData.RootCertFile), |
||||
"config_ssl_cert_file_length": len(dsInfo.JsonData.CertFile), |
||||
"config_ssl_key_file_length": len(dsInfo.JsonData.CertKeyFile), |
||||
"config_encrypt_length": len(dsInfo.JsonData.Encrypt), |
||||
"config_server_name_length": len(dsInfo.JsonData.Servername), |
||||
"config_password_length": len(dsInfo.DecryptedSecureJSONData["password"]), |
||||
"config_tls_ca_cert_length": len(dsInfo.DecryptedSecureJSONData["tlsCACert"]), |
||||
"config_tls_client_cert_length": len(dsInfo.DecryptedSecureJSONData["tlsClientCert"]), |
||||
"config_tls_client_key_length": len(dsInfo.DecryptedSecureJSONData["tlsClientKey"]), |
||||
} |
||||
configSummaryJson, marshalError := json.Marshal(configSummary) |
||||
if marshalError != nil { |
||||
logger.Error("Check health failed", "error", err, "message_type", "ds_config_health_check_error") |
||||
return |
||||
} |
||||
logger.Error("Check health failed", "error", err, "message_type", "ds_config_health_check_error_detailed", "details", string(configSummaryJson)) |
||||
} |
||||
@ -0,0 +1,60 @@ |
||||
package sqleng |
||||
|
||||
import ( |
||||
"errors" |
||||
"net" |
||||
"testing" |
||||
|
||||
"github.com/grafana/grafana-plugin-sdk-go/backend" |
||||
mssql "github.com/microsoft/go-mssqldb" |
||||
"github.com/stretchr/testify/assert" |
||||
"github.com/stretchr/testify/require" |
||||
) |
||||
|
||||
func TestErrToHealthCheckResult(t *testing.T) { |
||||
tests := []struct { |
||||
name string |
||||
err error |
||||
want *backend.CheckHealthResult |
||||
}{ |
||||
{ |
||||
name: "without error", |
||||
want: &backend.CheckHealthResult{Status: backend.HealthStatusError, Message: "Internal Server Error"}, |
||||
}, |
||||
{ |
||||
name: "network error", |
||||
err: errors.Join(errors.New("foo"), &net.OpError{Op: "read", Net: "tcp", Err: errors.New("some op")}), |
||||
want: &backend.CheckHealthResult{ |
||||
Status: backend.HealthStatusError, |
||||
Message: "Network error: Failed to connect to the server. Error message: some op", |
||||
JSONDetails: []byte(`{"errorDetailsLink":"https://grafana.com/docs/grafana/latest/datasources/mssql","verboseMessage":"foo\nread tcp: some op"}`), |
||||
}, |
||||
}, |
||||
{ |
||||
name: "db error", |
||||
err: errors.Join(errors.New("foo"), &mssql.Error{Message: "error foo occurred in mssql server"}), |
||||
want: &backend.CheckHealthResult{ |
||||
Status: backend.HealthStatusError, |
||||
Message: "foo\nmssql: error foo occurred in mssql server", |
||||
JSONDetails: []byte(`{"errorDetailsLink":"https://grafana.com/docs/grafana/latest/datasources/mssql","verboseMessage":"foo\nmssql: error foo occurred in mssql server"}`), |
||||
}, |
||||
}, |
||||
{ |
||||
name: "regular error", |
||||
err: errors.New("internal server error"), |
||||
want: &backend.CheckHealthResult{ |
||||
Status: backend.HealthStatusError, |
||||
Message: "internal server error", |
||||
JSONDetails: []byte(`{"errorDetailsLink":"https://grafana.com/docs/grafana/latest/datasources/mssql","verboseMessage":"internal server error"}`), |
||||
}, |
||||
}, |
||||
} |
||||
for _, tt := range tests { |
||||
t.Run(tt.name, func(t *testing.T) { |
||||
got, err := ErrToHealthCheckResult(tt.err) |
||||
require.Nil(t, err) |
||||
assert.Equal(t, string(tt.want.JSONDetails), string(got.JSONDetails)) |
||||
require.Equal(t, tt.want, got) |
||||
}) |
||||
} |
||||
} |
||||
@ -0,0 +1,130 @@ |
||||
import { useMemo } from 'react'; |
||||
|
||||
import { sceneGraph, SceneObjectBase, VizPanel } from '@grafana/scenes'; |
||||
import { Button } from '@grafana/ui'; |
||||
import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor'; |
||||
import { OptionsPaneItemDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor'; |
||||
import { getVisualizationOptions2 } from 'app/features/dashboard/components/PanelEditor/getVisualizationOptions'; |
||||
|
||||
import { |
||||
PanelBackgroundSwitch, |
||||
PanelDescriptionTextArea, |
||||
PanelFrameTitleInput, |
||||
} from '../panel-edit/getPanelFrameOptions'; |
||||
import { EditableDashboardElement, isDashboardLayoutItem } from '../scene/types'; |
||||
import { dashboardSceneGraph } from '../utils/dashboardSceneGraph'; |
||||
|
||||
export class VizPanelEditPaneBehavior extends SceneObjectBase implements EditableDashboardElement { |
||||
public isEditableDashboardElement: true = true; |
||||
|
||||
private getPanel(): VizPanel { |
||||
const panel = this.parent; |
||||
|
||||
if (!(panel instanceof VizPanel)) { |
||||
throw new Error('VizPanelEditPaneBehavior must have a VizPanel parent'); |
||||
} |
||||
|
||||
return panel; |
||||
} |
||||
|
||||
public useEditPaneOptions(): OptionsPaneCategoryDescriptor[] { |
||||
const panel = this.getPanel(); |
||||
const layoutElement = panel.parent!; |
||||
|
||||
const panelOptions = useMemo(() => { |
||||
return new OptionsPaneCategoryDescriptor({ |
||||
title: 'Panel options', |
||||
id: 'panel-options', |
||||
isOpenDefault: true, |
||||
}) |
||||
.addItem( |
||||
new OptionsPaneItemDescriptor({ |
||||
title: 'Title', |
||||
value: panel.state.title, |
||||
popularRank: 1, |
||||
render: function renderTitle() { |
||||
return <PanelFrameTitleInput panel={panel} />; |
||||
}, |
||||
}) |
||||
) |
||||
.addItem( |
||||
new OptionsPaneItemDescriptor({ |
||||
title: 'Description', |
||||
value: panel.state.description, |
||||
render: function renderDescription() { |
||||
return <PanelDescriptionTextArea panel={panel} />; |
||||
}, |
||||
}) |
||||
) |
||||
.addItem( |
||||
new OptionsPaneItemDescriptor({ |
||||
title: 'Transparent background', |
||||
render: function renderTransparent() { |
||||
return <PanelBackgroundSwitch panel={panel} />; |
||||
}, |
||||
}) |
||||
); |
||||
}, [panel]); |
||||
|
||||
const layoutCategory = useMemo(() => { |
||||
if (isDashboardLayoutItem(layoutElement) && layoutElement.getOptions) { |
||||
return layoutElement.getOptions(); |
||||
} |
||||
return undefined; |
||||
}, [layoutElement]); |
||||
|
||||
const { options, fieldConfig, _pluginInstanceState } = panel.useState(); |
||||
const dataProvider = sceneGraph.getData(panel); |
||||
const { data } = dataProvider.useState(); |
||||
|
||||
const visualizationOptions = useMemo(() => { |
||||
const plugin = panel.getPlugin(); |
||||
if (!plugin) { |
||||
return []; |
||||
} |
||||
|
||||
return getVisualizationOptions2({ |
||||
panel, |
||||
data, |
||||
plugin: plugin, |
||||
eventBus: panel.getPanelContext().eventBus, |
||||
instanceState: _pluginInstanceState, |
||||
}); |
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [data, panel, options, fieldConfig, _pluginInstanceState]); |
||||
|
||||
const categories = [panelOptions]; |
||||
if (layoutCategory) { |
||||
categories.push(layoutCategory); |
||||
} |
||||
|
||||
categories.push(...visualizationOptions); |
||||
|
||||
return categories; |
||||
} |
||||
|
||||
public getTypeName(): string { |
||||
return 'Panel'; |
||||
} |
||||
|
||||
public onDelete = () => { |
||||
const layout = dashboardSceneGraph.getLayoutManagerFor(this); |
||||
layout.removePanel(this.getPanel()); |
||||
}; |
||||
|
||||
public renderActions(): React.ReactNode { |
||||
return ( |
||||
<> |
||||
<Button size="sm" variant="secondary"> |
||||
Edit |
||||
</Button> |
||||
<Button size="sm" variant="secondary"> |
||||
Copy |
||||
</Button> |
||||
<Button size="sm" variant="destructive" fill="outline" onClick={this.onDelete}> |
||||
Delete |
||||
</Button> |
||||
</> |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,242 @@ |
||||
import { css, cx } from '@emotion/css'; |
||||
import { useMemo, useRef } from 'react'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { selectors } from '@grafana/e2e-selectors'; |
||||
import { SceneObjectState, SceneObjectBase, SceneComponentProps, sceneGraph } from '@grafana/scenes'; |
||||
import { Button, Icon, Input, RadioButtonGroup, Switch, useStyles2 } from '@grafana/ui'; |
||||
import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor'; |
||||
import { OptionsPaneItemDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor'; |
||||
|
||||
import { getDashboardSceneFor, getDefaultVizPanel } from '../../utils/utils'; |
||||
import { useLayoutCategory } from '../layouts-shared/DashboardLayoutSelector'; |
||||
import { DashboardLayoutManager, EditableDashboardElement, LayoutParent } from '../types'; |
||||
|
||||
import { RowsLayoutManager } from './RowsLayoutManager'; |
||||
|
||||
export interface RowItemState extends SceneObjectState { |
||||
layout: DashboardLayoutManager; |
||||
title?: string; |
||||
isCollapsed?: boolean; |
||||
isHeaderHidden?: boolean; |
||||
height?: 'expand' | 'min'; |
||||
} |
||||
|
||||
export class RowItem extends SceneObjectBase<RowItemState> implements LayoutParent, EditableDashboardElement { |
||||
public isEditableDashboardElement: true = true; |
||||
|
||||
public useEditPaneOptions(): OptionsPaneCategoryDescriptor[] { |
||||
const row = this; |
||||
|
||||
const rowOptions = useMemo(() => { |
||||
return new OptionsPaneCategoryDescriptor({ |
||||
title: 'Row options', |
||||
id: 'row-options', |
||||
isOpenDefault: true, |
||||
}) |
||||
.addItem( |
||||
new OptionsPaneItemDescriptor({ |
||||
title: 'Title', |
||||
render: () => <RowTitleInput row={row} />, |
||||
}) |
||||
) |
||||
.addItem( |
||||
new OptionsPaneItemDescriptor({ |
||||
title: 'Height', |
||||
render: () => <RowHeightSelect row={row} />, |
||||
}) |
||||
) |
||||
.addItem( |
||||
new OptionsPaneItemDescriptor({ |
||||
title: 'Hide row header', |
||||
render: () => <RowHeaderSwitch row={row} />, |
||||
}) |
||||
); |
||||
}, [row]); |
||||
|
||||
const { layout } = this.useState(); |
||||
const layoutOptions = useLayoutCategory(layout); |
||||
|
||||
return [rowOptions, layoutOptions]; |
||||
} |
||||
|
||||
public getTypeName(): string { |
||||
return 'Row'; |
||||
} |
||||
|
||||
public onDelete = () => { |
||||
const layout = sceneGraph.getAncestor(this, RowsLayoutManager); |
||||
layout.removeRow(this); |
||||
}; |
||||
|
||||
public renderActions(): React.ReactNode { |
||||
return ( |
||||
<> |
||||
<Button size="sm" variant="secondary"> |
||||
Copy |
||||
</Button> |
||||
<Button size="sm" variant="primary" onClick={this.onAddPanel} fill="outline"> |
||||
Add panel |
||||
</Button> |
||||
<Button size="sm" variant="destructive" fill="outline" onClick={this.onDelete}> |
||||
Delete |
||||
</Button> |
||||
</> |
||||
); |
||||
} |
||||
|
||||
public getLayout(): DashboardLayoutManager { |
||||
return this.state.layout; |
||||
} |
||||
|
||||
public switchLayout(layout: DashboardLayoutManager): void { |
||||
this.setState({ layout }); |
||||
} |
||||
|
||||
public onCollapseToggle = () => { |
||||
this.setState({ isCollapsed: !this.state.isCollapsed }); |
||||
}; |
||||
|
||||
public onAddPanel = () => { |
||||
const vizPanel = getDefaultVizPanel(); |
||||
this.state.layout.addPanel(vizPanel); |
||||
}; |
||||
|
||||
public onEdit = () => { |
||||
const dashboard = getDashboardSceneFor(this); |
||||
dashboard.state.editPane.selectObject(this); |
||||
}; |
||||
|
||||
public static Component = ({ model }: SceneComponentProps<RowItem>) => { |
||||
const { layout, title, isCollapsed, height = 'expand' } = model.useState(); |
||||
const { isEditing } = getDashboardSceneFor(model).useState(); |
||||
const styles = useStyles2(getStyles); |
||||
const titleInterpolated = sceneGraph.interpolate(model, title, undefined, 'text'); |
||||
const ref = useRef<HTMLDivElement>(null); |
||||
const shouldGrow = !isCollapsed && height === 'expand'; |
||||
|
||||
return ( |
||||
<div |
||||
className={cx(styles.wrapper, isCollapsed && styles.wrapperCollapsed, shouldGrow && styles.wrapperGrow)} |
||||
ref={ref} |
||||
> |
||||
<div className={styles.rowHeader}> |
||||
<button |
||||
onClick={model.onCollapseToggle} |
||||
className={styles.rowTitleButton} |
||||
aria-label={isCollapsed ? 'Expand row' : 'Collapse row'} |
||||
data-testid={selectors.components.DashboardRow.title(titleInterpolated)} |
||||
> |
||||
<Icon name={isCollapsed ? 'angle-right' : 'angle-down'} /> |
||||
<span className={styles.rowTitle} role="heading"> |
||||
{titleInterpolated} |
||||
</span> |
||||
</button> |
||||
{isEditing && <Button icon="pen" variant="secondary" size="sm" fill="text" onClick={() => model.onEdit()} />} |
||||
</div> |
||||
{!isCollapsed && <layout.Component model={layout} />} |
||||
</div> |
||||
); |
||||
}; |
||||
} |
||||
|
||||
function getStyles(theme: GrafanaTheme2) { |
||||
return { |
||||
rowHeader: css({ |
||||
width: '100%', |
||||
display: 'flex', |
||||
gap: theme.spacing(1), |
||||
padding: theme.spacing(0, 0, 0.5, 0), |
||||
margin: theme.spacing(0, 0, 1, 0), |
||||
alignItems: 'center', |
||||
|
||||
'&:hover, &:focus-within': { |
||||
'& > div': { |
||||
opacity: 1, |
||||
}, |
||||
}, |
||||
|
||||
'& > div': { |
||||
marginBottom: 0, |
||||
marginRight: theme.spacing(1), |
||||
}, |
||||
}), |
||||
rowTitleButton: css({ |
||||
display: 'flex', |
||||
alignItems: 'center', |
||||
cursor: 'pointer', |
||||
background: 'transparent', |
||||
border: 'none', |
||||
minWidth: 0, |
||||
gap: theme.spacing(1), |
||||
}), |
||||
rowTitle: css({ |
||||
fontSize: theme.typography.h5.fontSize, |
||||
fontWeight: theme.typography.fontWeightMedium, |
||||
whiteSpace: 'nowrap', |
||||
overflow: 'hidden', |
||||
textOverflow: 'ellipsis', |
||||
maxWidth: '100%', |
||||
flexGrow: 1, |
||||
minWidth: 0, |
||||
}), |
||||
wrapper: css({ |
||||
display: 'flex', |
||||
flexDirection: 'column', |
||||
width: '100%', |
||||
}), |
||||
wrapperGrow: css({ |
||||
flexGrow: 1, |
||||
}), |
||||
wrapperCollapsed: css({ |
||||
flexGrow: 0, |
||||
borderBottom: `1px solid ${theme.colors.border.weak}`, |
||||
}), |
||||
rowActions: css({ |
||||
display: 'flex', |
||||
opacity: 0, |
||||
}), |
||||
}; |
||||
} |
||||
|
||||
export function RowTitleInput({ row }: { row: RowItem }) { |
||||
const { title } = row.useState(); |
||||
|
||||
return <Input value={title} onChange={(e) => row.setState({ title: e.currentTarget.value })} />; |
||||
} |
||||
|
||||
export function RowHeaderSwitch({ row }: { row: RowItem }) { |
||||
const { isHeaderHidden } = row.useState(); |
||||
|
||||
return ( |
||||
<Switch |
||||
value={isHeaderHidden} |
||||
onChange={() => { |
||||
row.setState({ |
||||
isHeaderHidden: !row.state.isHeaderHidden, |
||||
}); |
||||
}} |
||||
/> |
||||
); |
||||
} |
||||
|
||||
export function RowHeightSelect({ row }: { row: RowItem }) { |
||||
const { height = 'expand' } = row.useState(); |
||||
|
||||
const options = [ |
||||
{ label: 'Expand', value: 'expand' as const }, |
||||
{ label: 'Min', value: 'min' as const }, |
||||
]; |
||||
|
||||
return ( |
||||
<RadioButtonGroup |
||||
options={options} |
||||
value={height} |
||||
onChange={(option) => |
||||
row.setState({ |
||||
height: option, |
||||
}) |
||||
} |
||||
/> |
||||
); |
||||
} |
||||
@ -0,0 +1,113 @@ |
||||
import { css } from '@emotion/css'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { SceneComponentProps, SceneObjectBase, SceneObjectState, VizPanel } from '@grafana/scenes'; |
||||
import { useStyles2 } from '@grafana/ui'; |
||||
|
||||
import { ResponsiveGridLayoutManager } from '../layout-responsive-grid/ResponsiveGridLayoutManager'; |
||||
import { DashboardLayoutManager, LayoutRegistryItem } from '../types'; |
||||
|
||||
import { RowItem } from './RowItem'; |
||||
|
||||
interface RowsLayoutManagerState extends SceneObjectState { |
||||
rows: RowItem[]; |
||||
} |
||||
|
||||
export class RowsLayoutManager extends SceneObjectBase<RowsLayoutManagerState> implements DashboardLayoutManager { |
||||
public isDashboardLayoutManager: true = true; |
||||
|
||||
public editModeChanged(isEditing: boolean): void {} |
||||
|
||||
public addPanel(vizPanel: VizPanel): void {} |
||||
|
||||
public addNewRow(): void { |
||||
this.setState({ |
||||
rows: [ |
||||
...this.state.rows, |
||||
new RowItem({ |
||||
title: 'New row', |
||||
layout: ResponsiveGridLayoutManager.createEmpty(), |
||||
}), |
||||
], |
||||
}); |
||||
} |
||||
|
||||
public getNextPanelId(): number { |
||||
return 0; |
||||
} |
||||
|
||||
public removePanel(panel: VizPanel) {} |
||||
|
||||
public removeRow(row: RowItem) { |
||||
this.setState({ |
||||
rows: this.state.rows.filter((r) => r !== row), |
||||
}); |
||||
} |
||||
|
||||
public duplicatePanel(panel: VizPanel): void { |
||||
throw new Error('Method not implemented.'); |
||||
} |
||||
|
||||
public getVizPanels(): VizPanel[] { |
||||
const panels: VizPanel[] = []; |
||||
|
||||
for (const row of this.state.rows) { |
||||
const innerPanels = row.state.layout.getVizPanels(); |
||||
panels.push(...innerPanels); |
||||
} |
||||
|
||||
return panels; |
||||
} |
||||
|
||||
public getOptions() { |
||||
return []; |
||||
} |
||||
|
||||
public getDescriptor(): LayoutRegistryItem { |
||||
return RowsLayoutManager.getDescriptor(); |
||||
} |
||||
|
||||
public static getDescriptor(): LayoutRegistryItem { |
||||
return { |
||||
name: 'Rows', |
||||
description: 'Rows layout', |
||||
id: 'rows-layout', |
||||
createFromLayout: RowsLayoutManager.createFromLayout, |
||||
}; |
||||
} |
||||
|
||||
public static createEmpty() { |
||||
return new RowsLayoutManager({ rows: [] }); |
||||
} |
||||
|
||||
public static createFromLayout(layout: DashboardLayoutManager): RowsLayoutManager { |
||||
const row = new RowItem({ layout: layout.clone(), title: 'Row title' }); |
||||
|
||||
return new RowsLayoutManager({ rows: [row] }); |
||||
} |
||||
|
||||
public static Component = ({ model }: SceneComponentProps<RowsLayoutManager>) => { |
||||
const { rows } = model.useState(); |
||||
const styles = useStyles2(getStyles); |
||||
|
||||
return ( |
||||
<div className={styles.wrapper}> |
||||
{rows.map((row) => ( |
||||
<RowItem.Component model={row} key={row.state.key!} /> |
||||
))} |
||||
</div> |
||||
); |
||||
}; |
||||
} |
||||
|
||||
function getStyles(theme: GrafanaTheme2) { |
||||
return { |
||||
wrapper: css({ |
||||
display: 'flex', |
||||
flexDirection: 'column', |
||||
gap: theme.spacing(1), |
||||
height: '100%', |
||||
width: '100%', |
||||
}), |
||||
}; |
||||
} |
||||
@ -0,0 +1,66 @@ |
||||
import { useMemo } from 'react'; |
||||
|
||||
import { Select } from '@grafana/ui'; |
||||
import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor'; |
||||
import { OptionsPaneItemDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor'; |
||||
|
||||
import { DashboardLayoutManager, isLayoutParent, LayoutRegistryItem } from '../types'; |
||||
|
||||
import { layoutRegistry } from './layoutRegistry'; |
||||
|
||||
export interface Props { |
||||
layoutManager: DashboardLayoutManager; |
||||
} |
||||
|
||||
export function DashboardLayoutSelector({ layoutManager }: { layoutManager: DashboardLayoutManager }) { |
||||
const layouts = layoutRegistry.list(); |
||||
const options = layouts.map((layout) => ({ |
||||
label: layout.name, |
||||
value: layout, |
||||
})); |
||||
|
||||
const currentLayoutId = layoutManager.getDescriptor().id; |
||||
const currentLayoutOption = options.find((option) => option.value.id === currentLayoutId); |
||||
|
||||
return ( |
||||
<Select |
||||
options={options} |
||||
value={currentLayoutOption} |
||||
onChange={(option) => changeLayoutTo(layoutManager, option.value!)} |
||||
/> |
||||
); |
||||
} |
||||
|
||||
export function useLayoutCategory(layoutManager: DashboardLayoutManager) { |
||||
return useMemo(() => { |
||||
const layoutCategory = new OptionsPaneCategoryDescriptor({ |
||||
title: 'Layout', |
||||
id: 'layout-options', |
||||
isOpenDefault: true, |
||||
}); |
||||
|
||||
layoutCategory.addItem( |
||||
new OptionsPaneItemDescriptor({ |
||||
title: 'Type', |
||||
render: function renderTitle() { |
||||
return <DashboardLayoutSelector layoutManager={layoutManager} />; |
||||
}, |
||||
}) |
||||
); |
||||
|
||||
if (layoutManager.getOptions) { |
||||
for (const option of layoutManager.getOptions()) { |
||||
layoutCategory.addItem(option); |
||||
} |
||||
} |
||||
|
||||
return layoutCategory; |
||||
}, [layoutManager]); |
||||
} |
||||
|
||||
function changeLayoutTo(currentLayout: DashboardLayoutManager, newLayoutDescriptor: LayoutRegistryItem) { |
||||
const layoutParent = currentLayout.parent; |
||||
if (layoutParent && isLayoutParent(layoutParent)) { |
||||
layoutParent.switchLayout(newLayoutDescriptor.createFromLayout(currentLayout)); |
||||
} |
||||
} |
||||
@ -1,105 +0,0 @@ |
||||
import { css } from '@emotion/css'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { useStyles2, Field, Select } from '@grafana/ui'; |
||||
|
||||
import { getDashboardSceneFor } from '../../utils/utils'; |
||||
import { DashboardLayoutManager, isLayoutParent, LayoutRegistryItem } from '../types'; |
||||
|
||||
import { layoutRegistry } from './layoutRegistry'; |
||||
|
||||
interface Props { |
||||
layoutManager: DashboardLayoutManager; |
||||
children: React.ReactNode; |
||||
} |
||||
|
||||
export function LayoutEditChrome({ layoutManager, children }: Props) { |
||||
const styles = useStyles2(getStyles); |
||||
const { isEditing } = getDashboardSceneFor(layoutManager).useState(); |
||||
|
||||
const layouts = layoutRegistry.list(); |
||||
const options = layouts.map((layout) => ({ |
||||
label: layout.name, |
||||
value: layout, |
||||
})); |
||||
|
||||
const currentLayoutId = layoutManager.getDescriptor().id; |
||||
const currentLayoutOption = options.find((option) => option.value.id === currentLayoutId); |
||||
|
||||
return ( |
||||
<div className={styles.wrapper}> |
||||
{isEditing && ( |
||||
<div className={styles.editHeader}> |
||||
<Field label="Layout type"> |
||||
<Select |
||||
options={options} |
||||
value={currentLayoutOption} |
||||
onChange={(option) => changeLayoutTo(layoutManager, option.value!)} |
||||
/> |
||||
</Field> |
||||
{layoutManager.renderEditor?.()} |
||||
</div> |
||||
)} |
||||
{children} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
function getStyles(theme: GrafanaTheme2) { |
||||
return { |
||||
editHeader: css({ |
||||
width: '100%', |
||||
display: 'flex', |
||||
gap: theme.spacing(1), |
||||
padding: theme.spacing(0, 1, 0.5, 1), |
||||
margin: theme.spacing(0, 0, 1, 0), |
||||
alignItems: 'flex-end', |
||||
borderBottom: `1px solid ${theme.colors.border.weak}`, |
||||
paddingBottom: theme.spacing(1), |
||||
|
||||
'&:hover, &:focus-within': { |
||||
'& > div': { |
||||
opacity: 1, |
||||
}, |
||||
}, |
||||
|
||||
'& > div': { |
||||
marginBottom: 0, |
||||
marginRight: theme.spacing(1), |
||||
}, |
||||
}), |
||||
wrapper: css({ |
||||
display: 'flex', |
||||
flexDirection: 'column', |
||||
flex: '1 1 0', |
||||
width: '100%', |
||||
}), |
||||
icon: css({ |
||||
display: 'flex', |
||||
alignItems: 'center', |
||||
cursor: 'pointer', |
||||
background: 'transparent', |
||||
border: 'none', |
||||
gap: theme.spacing(1), |
||||
}), |
||||
rowTitle: css({}), |
||||
rowActions: css({ |
||||
display: 'flex', |
||||
opacity: 0, |
||||
[theme.transitions.handleMotion('no-preference', 'reduce')]: { |
||||
transition: 'opacity 200ms ease-in', |
||||
}, |
||||
|
||||
'&:hover, &:focus-within': { |
||||
opacity: 1, |
||||
}, |
||||
}), |
||||
}; |
||||
} |
||||
|
||||
function changeLayoutTo(currentLayout: DashboardLayoutManager, newLayoutDescriptor: LayoutRegistryItem) { |
||||
const layoutParent = currentLayout.parent; |
||||
if (layoutParent && isLayoutParent(layoutParent)) { |
||||
layoutParent.switchLayout(newLayoutDescriptor.createFromLayout(currentLayout)); |
||||
} |
||||
} |
||||
@ -1,21 +0,0 @@ |
||||
import { SelectableValue } from '@grafana/data'; |
||||
|
||||
import { AzureCredentialsType, AzureAuthType } from '../types'; |
||||
|
||||
export enum AzureCloud { |
||||
Public = 'AzureCloud', |
||||
None = '', |
||||
} |
||||
|
||||
export const KnownAzureClouds: Array<SelectableValue<AzureCloud>> = [{ value: AzureCloud.Public, label: 'Azure' }]; |
||||
|
||||
export function isCredentialsComplete(credentials: AzureCredentialsType): boolean { |
||||
switch (credentials.authType) { |
||||
case AzureAuthType.MSI: |
||||
return true; |
||||
case AzureAuthType.CLIENT_SECRET: |
||||
return !!(credentials.azureCloud && credentials.tenantId && credentials.clientId && credentials.clientSecret); |
||||
case AzureAuthType.AD_PASSWORD: |
||||
return !!(credentials.clientId && credentials.password && credentials.userId); |
||||
} |
||||
} |
||||
@ -1,167 +1,26 @@ |
||||
import { DataSourceSettings } from '@grafana/data'; |
||||
import { GrafanaBootConfig } from '@grafana/runtime'; |
||||
|
||||
import { |
||||
AzureCloud, |
||||
AzureCredentialsType, |
||||
ConcealedSecretType, |
||||
AzureAuthSecureJSONDataType, |
||||
AzureAuthJSONDataType, |
||||
AzureAuthType, |
||||
} from '../types'; |
||||
|
||||
export const getDefaultCredentials = (managedIdentityEnabled: boolean, cloud: string): AzureCredentialsType => { |
||||
if (managedIdentityEnabled) { |
||||
return { authType: AzureAuthType.MSI }; |
||||
AzureCredentials, |
||||
AzureDataSourceSettings, |
||||
getDatasourceCredentials, |
||||
getDefaultAzureCloud, |
||||
} from '@grafana/azure-sdk'; |
||||
import { config } from '@grafana/runtime'; |
||||
|
||||
export const getDefaultCredentials = (): AzureCredentials => { |
||||
if (config.azure.managedIdentityEnabled) { |
||||
return { authType: 'msi' }; |
||||
} else { |
||||
return { authType: AzureAuthType.CLIENT_SECRET, azureCloud: cloud }; |
||||
return { authType: 'clientsecret', azureCloud: getDefaultAzureCloud() }; |
||||
} |
||||
}; |
||||
|
||||
export const getSecret = ( |
||||
storedServerSide: boolean, |
||||
secret: string | symbol | undefined |
||||
): undefined | string | ConcealedSecretType => { |
||||
const concealedSecret: ConcealedSecretType = Symbol('Concealed client secret'); |
||||
if (storedServerSide) { |
||||
// The secret is concealed server side, so return the symbol
|
||||
return concealedSecret; |
||||
} else { |
||||
return typeof secret === 'string' && secret.length > 0 ? secret : undefined; |
||||
export const getCredentials = (dsSettings: AzureDataSourceSettings): AzureCredentials => { |
||||
const credentials = getDatasourceCredentials(dsSettings); |
||||
if (credentials) { |
||||
return credentials; |
||||
} |
||||
}; |
||||
|
||||
export const getCredentials = ( |
||||
dsSettings: DataSourceSettings<AzureAuthJSONDataType, AzureAuthSecureJSONDataType>, |
||||
bootConfig: GrafanaBootConfig |
||||
): AzureCredentialsType => { |
||||
// JSON data
|
||||
const credentials = dsSettings.jsonData?.azureCredentials; |
||||
|
||||
// Secure JSON data/fields
|
||||
const clientSecretStoredServerSide = dsSettings.secureJsonFields?.azureClientSecret; |
||||
const clientSecret = dsSettings.secureJsonData?.azureClientSecret; |
||||
const passwordStoredServerSide = dsSettings.secureJsonFields?.password; |
||||
const password = dsSettings.secureJsonData?.password; |
||||
|
||||
// BootConfig data
|
||||
const managedIdentityEnabled = !!bootConfig.azure?.managedIdentityEnabled; |
||||
const cloud = bootConfig.azure?.cloud || AzureCloud.Public; |
||||
|
||||
// If no credentials saved, then return empty credentials
|
||||
// of type based on whether the managed identity enabled
|
||||
if (!credentials) { |
||||
return getDefaultCredentials(managedIdentityEnabled, cloud); |
||||
} |
||||
|
||||
switch (credentials.authType) { |
||||
case AzureAuthType.MSI: |
||||
if (managedIdentityEnabled) { |
||||
return { |
||||
authType: AzureAuthType.MSI, |
||||
}; |
||||
} else { |
||||
// If authentication type is managed identity but managed identities were disabled in Grafana config,
|
||||
// then we should fallback to an empty app registration (client secret) configuration
|
||||
return { |
||||
authType: AzureAuthType.CLIENT_SECRET, |
||||
azureCloud: cloud, |
||||
}; |
||||
} |
||||
case AzureAuthType.CLIENT_SECRET: |
||||
return { |
||||
authType: AzureAuthType.CLIENT_SECRET, |
||||
azureCloud: credentials.azureCloud || cloud, |
||||
tenantId: credentials.tenantId, |
||||
clientId: credentials.clientId, |
||||
clientSecret: getSecret(clientSecretStoredServerSide, clientSecret), |
||||
}; |
||||
case AzureAuthType.AD_PASSWORD: |
||||
return { |
||||
authType: AzureAuthType.AD_PASSWORD, |
||||
userId: credentials.userId, |
||||
clientId: credentials.clientId, |
||||
password: getSecret(passwordStoredServerSide, password), |
||||
}; |
||||
} |
||||
}; |
||||
|
||||
export const updateCredentials = ( |
||||
dsSettings: DataSourceSettings<AzureAuthJSONDataType>, |
||||
bootConfig: GrafanaBootConfig, |
||||
credentials: AzureCredentialsType |
||||
): DataSourceSettings<AzureAuthJSONDataType> => { |
||||
// BootConfig data
|
||||
const managedIdentityEnabled = !!bootConfig.azure?.managedIdentityEnabled; |
||||
const cloud = bootConfig.azure?.cloud || AzureCloud.Public; |
||||
|
||||
switch (credentials.authType) { |
||||
case AzureAuthType.MSI: |
||||
if (!managedIdentityEnabled) { |
||||
throw new Error('Managed Identity authentication is not enabled in Grafana config.'); |
||||
} |
||||
|
||||
dsSettings = { |
||||
...dsSettings, |
||||
jsonData: { |
||||
...dsSettings.jsonData, |
||||
azureCredentials: { |
||||
authType: AzureAuthType.MSI, |
||||
}, |
||||
}, |
||||
}; |
||||
|
||||
return dsSettings; |
||||
|
||||
case AzureAuthType.CLIENT_SECRET: |
||||
dsSettings = { |
||||
...dsSettings, |
||||
jsonData: { |
||||
...dsSettings.jsonData, |
||||
azureCredentials: { |
||||
authType: AzureAuthType.CLIENT_SECRET, |
||||
azureCloud: credentials.azureCloud || cloud, |
||||
tenantId: credentials.tenantId, |
||||
clientId: credentials.clientId, |
||||
}, |
||||
}, |
||||
secureJsonData: { |
||||
...dsSettings.secureJsonData, |
||||
azureClientSecret: |
||||
typeof credentials.clientSecret === 'string' && credentials.clientSecret.length > 0 |
||||
? credentials.clientSecret |
||||
: undefined, |
||||
}, |
||||
secureJsonFields: { |
||||
...dsSettings.secureJsonFields, |
||||
azureClientSecret: typeof credentials.clientSecret === 'symbol', |
||||
}, |
||||
}; |
||||
|
||||
return dsSettings; |
||||
|
||||
case AzureAuthType.AD_PASSWORD: |
||||
return { |
||||
...dsSettings, |
||||
jsonData: { |
||||
...dsSettings.jsonData, |
||||
azureCredentials: { |
||||
authType: AzureAuthType.AD_PASSWORD, |
||||
userId: credentials.userId, |
||||
clientId: credentials.clientId, |
||||
}, |
||||
}, |
||||
secureJsonData: { |
||||
...dsSettings.secureJsonData, |
||||
password: |
||||
typeof credentials.password === 'string' && credentials.password.length > 0 |
||||
? credentials.password |
||||
: undefined, |
||||
}, |
||||
secureJsonFields: { |
||||
...dsSettings.secureJsonFields, |
||||
password: typeof credentials.password === 'symbol', |
||||
}, |
||||
}; |
||||
} |
||||
return getDefaultCredentials(); |
||||
}; |
||||
|
||||
Loading…
Reference in new issue