mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Edit dashboard UI text (#32520)
* Update DashboardPermissions.tsx * Update DashboardRow.tsx * Update AutoRefreshIntervals.tsx * Update JsonEditorSettings.tsx * ui updates * Update FolderPickerCtrl.ts * Update LinkSettingsEdit.tsx * Update LinkSettingsHeader.tsx * Update LinkSettingsList.tsx * Update actions.ts * Update AngularPanelOptions.tsx * Update getFieldOverrideElements.tsx * Update OptionsPaneOptions.tsx * Update types.ts * Update usePanelLatestData.ts * Update VisualizationButton.tsx * Update RowOptionsModal.tsx * Update SaveDashboardAsForm.tsx * Update SaveDashboardForm.tsx * Update SaveProvisionedDashboardForm.tsx * Update SaveDashboardErrorProxy.tsx * text edits * Update ShareSnapshot.tsx * Update PanelTypeCard.tsx * Update TransformationsEditor.tsx * Update panel.test.ts * text edits * Update DashboardSrv.ts * Update VersionHistoryButtons.tsx * Update DiffViewer.tsx * Update VersionHistoryTable.tsx * Update DashboardGrid.tsx * Update DashboardPanel.tsx * Update PanelPluginError.tsx * Update DashboardMigrator.ts
This commit is contained in:
Diana Payton
GitHub
parent
7896423fb5
commit
a3d1cf03a9
@ -91,7 +91,7 @@ export class DashboardPermissionsUnconnected extends PureComponent<Props, State>
|
||||
const { isAdding } = this.state;
|
||||
|
||||
return hasUnsavedFolderChange ? (
|
||||
<h5>You have changed folder, please save to view permissions.</h5>
|
||||
<h5>You have changed a folder, please save to view permissions.</h5>
|
||||
) : (
|
||||
<div>
|
||||
<div className="page-action-bar">
|
||||
@ -101,7 +101,7 @@ export class DashboardPermissionsUnconnected extends PureComponent<Props, State>
|
||||
</Tooltip>
|
||||
<div className="page-action-bar__spacer" />
|
||||
<Button className="pull-right" onClick={this.onOpenAddPermissions} disabled={isAdding}>
|
||||
Add Permission
|
||||
Add permission
|
||||
</Button>
|
||||
</div>
|
||||
<SlideDown in={isAdding}>
|
||||
|
||||
@ -52,7 +52,7 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
|
||||
onDelete = () => {
|
||||
appEvents.publish(
|
||||
new ShowConfirmModalEvent({
|
||||
title: 'Delete Row',
|
||||
title: 'Delete row',
|
||||
text: 'Are you sure you want to remove this row and all its panels?',
|
||||
altActionText: 'Delete row only',
|
||||
icon: 'trash-alt',
|
||||
|
||||
@ -58,7 +58,7 @@ export const AutoRefreshIntervals: FC<Props> = ({
|
||||
return (
|
||||
<Field
|
||||
label="Auto refresh"
|
||||
description="Define the auto refresh intervals that should be available in the auto refresh dropdown"
|
||||
description="Define the auto refresh intervals that should be available in the auto refresh list."
|
||||
error={invalidIntervalsMessage}
|
||||
invalid={!!invalidIntervalsMessage}
|
||||
>
|
||||
|
||||
@ -26,8 +26,8 @@ export const JsonEditorSettings: React.FC<Props> = ({ dashboard }) => {
|
||||
<>
|
||||
<h3 className="dashboard-settings__header">JSON Model</h3>
|
||||
<div className="dashboard-settings__subheader">
|
||||
The JSON Model below is data structure that defines the dashboard. Including settings, panel settings & layout,
|
||||
queries etc.
|
||||
The JSON model below is the data structure that defines the dashboard. This includes dashboard settings, panel
|
||||
settings, layout, queries, and so on.
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -46,7 +46,7 @@ export const JsonEditorSettings: React.FC<Props> = ({ dashboard }) => {
|
||||
</div>
|
||||
{dashboard.meta.canSave && (
|
||||
<Button className="m-t-3" onClick={onClick}>
|
||||
Save Changes
|
||||
Save changes
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
|
||||
@ -62,9 +62,9 @@ describe('LinksSettings', () => {
|
||||
// @ts-ignore
|
||||
render(<LinksSettings dashboard={linklessDashboard} />);
|
||||
|
||||
expect(screen.getByRole('heading', { name: 'Dashboard Links' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('heading', { name: 'Dashboard links' })).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByLabelText(selectors.components.CallToActionCard.button('Add Dashboard Link'))
|
||||
screen.getByLabelText(selectors.components.CallToActionCard.button('Add dashboard link'))
|
||||
).toBeInTheDocument();
|
||||
expect(screen.queryByRole('table')).not.toBeInTheDocument();
|
||||
});
|
||||
@ -77,7 +77,7 @@ describe('LinksSettings', () => {
|
||||
|
||||
expect(tableBodyRows.length).toBe(links.length);
|
||||
expect(
|
||||
screen.queryByLabelText(selectors.components.CallToActionCard.button('Add Dashboard Link'))
|
||||
screen.queryByLabelText(selectors.components.CallToActionCard.button('Add dashboard link'))
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
@ -156,7 +156,7 @@ describe('LinksSettings', () => {
|
||||
|
||||
userEvent.click(screen.getByText('Link'));
|
||||
|
||||
expect(screen.queryByText('Url')).toBeInTheDocument();
|
||||
expect(screen.queryByText('URL')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Tooltip')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Icon')).toBeInTheDocument();
|
||||
|
||||
|
||||
@ -67,7 +67,7 @@ export class TimePickerSettings extends PureComponent<Props, State> {
|
||||
/>
|
||||
<Field
|
||||
label="Now delay now"
|
||||
description="Enter 1m to ignore the last minute (because it can contain incomplete metrics)"
|
||||
description="Enter 1m to ignore the last minute. It might contain incomplete metrics."
|
||||
>
|
||||
<Input
|
||||
invalid={!this.state.isNowDelayValid}
|
||||
|
||||
@ -45,8 +45,8 @@ const getModalBody = (panels: PanelModel[], title: string) => {
|
||||
<>
|
||||
<p>Do you want to delete this dashboard?</p>
|
||||
<p>
|
||||
This dashboard contains {totalAlerts} alert{totalAlerts > 1 ? 's' : ''}. Deleting this dashboard will also
|
||||
delete those alerts
|
||||
This dashboard contains {totalAlerts} alert{totalAlerts > 1 ? 's' : ''}. Deleting this dashboard also deletes
|
||||
deletes those alerts
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
@ -69,15 +69,15 @@ const ProvisionedDeleteModal = ({ hideModal, provisionedId }: { hideModal(): voi
|
||||
`}
|
||||
>
|
||||
<p>
|
||||
This dashboard is managed by Grafanas provisioning and cannot be deleted. Remove the dashboard from the config
|
||||
file to delete it.
|
||||
This dashboard is managed by Grafana provisioning and cannot be deleted. Remove the dashboard from the config file
|
||||
to delete it.
|
||||
</p>
|
||||
<p>
|
||||
<i>
|
||||
See{' '}
|
||||
<a
|
||||
className="external-link"
|
||||
href="http://docs.grafana.org/administration/provisioning/#dashboards"
|
||||
href="https://grafana.com/docs/grafana/latest/administration/provisioning/#dashboards"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
|
||||
@ -66,7 +66,7 @@ export class FolderPickerCtrl {
|
||||
}
|
||||
|
||||
if (this.isEditor && this.enableCreateNew && query === '') {
|
||||
result.unshift({ title: '-- New Folder --', id: -1 });
|
||||
result.unshift({ title: '-- New folder --', id: -1 });
|
||||
}
|
||||
|
||||
if (this.enableReset && query === '' && this.initialTitle !== '') {
|
||||
@ -113,7 +113,7 @@ export class FolderPickerCtrl {
|
||||
|
||||
return promiseToDigest(this.$scope)(
|
||||
createFolder({ title: this.newFolderName }).then((result: { title: string; id: number }) => {
|
||||
appEvents.emit(AppEvents.alertSuccess, ['Folder Created', 'OK']);
|
||||
appEvents.emit(AppEvents.alertSuccess, ['Folder created', 'OK']);
|
||||
|
||||
this.closeCreateFolder();
|
||||
this.folder = { text: result.title, value: result.id };
|
||||
|
||||
@ -98,7 +98,7 @@ export const LinkSettingsEdit: React.FC<LinkSettingsEditProps> = ({ mode, editLi
|
||||
)}
|
||||
{linkSettings.type === 'link' && (
|
||||
<>
|
||||
<Field label="Url">
|
||||
<Field label="URL">
|
||||
<Input name="url" value={linkSettings.url} onChange={onChange} />
|
||||
</Field>
|
||||
<Field label="Tooltip">
|
||||
|
||||
@ -17,7 +17,7 @@ export const LinkSettingsHeader: React.FC<LinkSettingsHeaderProps> = ({ onNavCli
|
||||
<HorizontalGroup align="center" justify="space-between">
|
||||
<h3>
|
||||
<span onClick={onNavClick} className={isEditing ? 'pointer' : ''}>
|
||||
Dashboard Links
|
||||
Dashboard links
|
||||
</span>
|
||||
{isEditing && (
|
||||
<span>
|
||||
|
||||
@ -36,13 +36,13 @@ export const LinkSettingsList: React.FC<LinkSettingsListProps> = ({ dashboard, s
|
||||
{dashboard.links.length === 0 ? (
|
||||
<EmptyListCTA
|
||||
onClick={setupNew}
|
||||
title="There are no dashboard links added yet"
|
||||
title="No dashboard links added yet"
|
||||
buttonIcon="link"
|
||||
buttonTitle="Add Dashboard Link"
|
||||
infoBoxTitle="What are Dashboard Links?"
|
||||
buttonTitle="Add dashboard link"
|
||||
infoBoxTitle="What are dashboard links?"
|
||||
infoBox={{
|
||||
__html:
|
||||
'<p>Dashboard Links allow you to place links to other dashboards and web sites directly below the dashboard header.</p>',
|
||||
'<p>Dashboard links allow you to place links to other dashboards and web sites directly below the dashboard header.</p>',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { connect, MapStateToProps, MapDispatchToProps } from 'react-redux';
|
||||
|
||||
// Utils & Services
|
||||
// Utils and services
|
||||
import { AngularComponent, getAngularLoader } from '@grafana/runtime';
|
||||
|
||||
// Types
|
||||
@ -69,7 +69,7 @@ export class AngularPanelOptionsUnconnected extends PureComponent<Props> {
|
||||
|
||||
const scope = angularPanelComponent.getScope();
|
||||
|
||||
// When full page reloading in edit mode the angular panel has on fully compiled & instantiated yet
|
||||
// When full page reloading in edit mode the angular panel has on fully compiled and instantiated yet
|
||||
if (!scope.$$childHead) {
|
||||
setTimeout(() => {
|
||||
this.forceUpdate();
|
||||
|
||||
@ -41,7 +41,7 @@ export const OptionsPaneOptions: React.FC<Props> = (props) => {
|
||||
if (isSearching) {
|
||||
mainBoxElements.push(renderSearchHits(allOptions, justOverrides, searchQuery));
|
||||
|
||||
// If searching for angular panel then we need to add notice that results are limited
|
||||
// If searching for angular panel, then we need to add notice that results are limited
|
||||
if (props.plugin.angularPanelCtrl) {
|
||||
mainBoxElements.push(
|
||||
<div className={styles.searchNotice} key="Search notice">
|
||||
@ -60,7 +60,7 @@ export const OptionsPaneOptions: React.FC<Props> = (props) => {
|
||||
<AngularPanelOptions plugin={plugin} dashboard={dashboard} panel={panel} key="AngularOptions" />
|
||||
);
|
||||
}
|
||||
// Then add all panel & field defaults
|
||||
// Then add all panel and field defaults
|
||||
for (const item of vizOptions) {
|
||||
mainBoxElements.push(item.render());
|
||||
}
|
||||
|
||||
@ -51,7 +51,7 @@ export const VisualizationButtonUnconnected: FC<Props> = ({
|
||||
<ButtonGroup>
|
||||
<ToolbarButton
|
||||
className={styles.vizButton}
|
||||
tooltip="Click to change visualisation"
|
||||
tooltip="Click to change visualization"
|
||||
imgSrc={plugin.meta.info.logos.small}
|
||||
isOpen={isVizPickerOpen}
|
||||
onClick={onToggleOpen}
|
||||
|
||||
@ -62,7 +62,7 @@ export function getFieldOverrideCategories(props: OptionPaneRenderProps): Option
|
||||
const matcherUi = fieldMatchersUI.get(override.matcher.id);
|
||||
const configPropertiesOptions = getOverrideProperties(registry);
|
||||
const isSystemOverride = isSystemOverrideGuard(override);
|
||||
// A way force open new override categories
|
||||
// A way to force open new override categories
|
||||
const forceOpen = override.properties.length === 0 ? 1 : 0;
|
||||
|
||||
const category = new OptionsPaneCategoryDescriptor({
|
||||
@ -229,7 +229,7 @@ export function getFieldOverrideCategories(props: OptionPaneRenderProps): Option
|
||||
// margin: ${theme.spacing.md};
|
||||
// `}
|
||||
// >
|
||||
// Field override rules give you a fine grained control over how your data is displayed.
|
||||
// Field override rules give you fine-grained control over how your data is displayed.
|
||||
// </FeatureInfoBox>
|
||||
|
||||
return categories;
|
||||
|
||||
@ -131,7 +131,7 @@ export function panelEditorCleanUp(): ThunkResult<void> {
|
||||
|
||||
updateDuplicateLibraryPanels(panel, dashboard!, dispatch);
|
||||
|
||||
// restore the source panel id before we update source panel
|
||||
// restore the source panel ID before we update source panel
|
||||
modifiedSaveModel.id = sourcePanel.id;
|
||||
|
||||
sourcePanel.restoreModel(modifiedSaveModel);
|
||||
|
||||
@ -24,7 +24,7 @@ export enum DisplayMode {
|
||||
export const displayModes = [
|
||||
{ value: DisplayMode.Fill, label: 'Fill', description: 'Use all available space' },
|
||||
{ value: DisplayMode.Fit, label: 'Fit', description: 'Fit in the space keeping ratio' },
|
||||
{ value: DisplayMode.Exact, label: 'Exact', description: 'Same size as the dashboard' },
|
||||
{ value: DisplayMode.Exact, label: 'Exact', description: 'Make same size as the dashboard' },
|
||||
];
|
||||
|
||||
/** @internal */
|
||||
|
||||
@ -33,7 +33,7 @@ export const usePanelLatestData = (panel: PanelModel, options: GetDataOptions):
|
||||
};
|
||||
/**
|
||||
* Adding separate options to dependencies array to avoid additional hook for comparing previous options with current.
|
||||
* Otherwise, passing different references to the same object may cause troubles.
|
||||
* Otherwise, passing different references to the same object might cause troubles.
|
||||
*/
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [panel, options.withFieldConfig, options.withTransforms]);
|
||||
|
||||
@ -14,7 +14,7 @@ export interface RowOptionsModalProps {
|
||||
export const RowOptionsModal: FC<RowOptionsModalProps> = ({ repeat, title, onDismiss, onUpdate }) => {
|
||||
const styles = getStyles();
|
||||
return (
|
||||
<Modal isOpen={true} title="Row Options" icon="copy" onDismiss={onDismiss} className={styles.modal}>
|
||||
<Modal isOpen={true} title="Row options" icon="copy" onDismiss={onDismiss} className={styles.modal}>
|
||||
<RowOptionsForm repeat={repeat} title={title} onCancel={onDismiss} onUpdate={onUpdate} />
|
||||
</Modal>
|
||||
);
|
||||
|
||||
@ -41,7 +41,7 @@ export const SaveDashboardErrorProxy: React.FC<SaveDashboardErrorProxyProps> = (
|
||||
Someone else has updated this dashboard <br /> <small>Would you still like to save this dashboard?</small>
|
||||
</div>
|
||||
}
|
||||
confirmText="Save & Overwrite"
|
||||
confirmText="Save and overwrite"
|
||||
onConfirm={async () => {
|
||||
await onDashboardSave(dashboardSaveModel, { overwrite: true }, dashboard);
|
||||
onDismiss();
|
||||
@ -59,7 +59,7 @@ export const SaveDashboardErrorProxy: React.FC<SaveDashboardErrorProxyProps> = (
|
||||
<small>Would you still like to save this dashboard?</small>
|
||||
</div>
|
||||
}
|
||||
confirmText="Save & Overwrite"
|
||||
confirmText="Save and overwrite"
|
||||
onConfirm={async () => {
|
||||
await onDashboardSave(dashboardSaveModel, { overwrite: true }, dashboard);
|
||||
onDismiss();
|
||||
@ -80,11 +80,14 @@ const ConfirmPluginDashboardSaveModal: React.FC<SaveDashboardModalProps> = ({ on
|
||||
const styles = getConfirmPluginDashboardSaveModalStyles(theme);
|
||||
|
||||
return (
|
||||
<Modal className={styles.modal} title="Plugin Dashboard" icon="copy" isOpen={true} onDismiss={onDismiss}>
|
||||
<Modal className={styles.modal} title="Plugin dashboard" icon="copy" isOpen={true} onDismiss={onDismiss}>
|
||||
<div className={styles.modalContent}>
|
||||
<div className={styles.modalText}>
|
||||
Your changes will be lost when you update the plugin.
|
||||
<br /> <small>Use Save As to create custom version.</small>
|
||||
<br />
|
||||
<small>
|
||||
Use <strong>Save As</strong> to create custom version.
|
||||
</small>
|
||||
</div>
|
||||
<HorizontalGroup justify="center">
|
||||
<SaveDashboardAsButton dashboard={dashboard} onSaveSuccess={onDismiss} />
|
||||
|
||||
@ -51,7 +51,7 @@ export const SaveDashboardAsForm: React.FC<SaveDashboardFormProps & { isNew?: bo
|
||||
|
||||
const validateDashboardName = (getFormValues: () => SaveDashboardAsFormDTO) => async (dashboardName: string) => {
|
||||
if (dashboardName && dashboardName === getFormValues().$folder.title?.trim()) {
|
||||
return 'Dashboard name cannot be the same as folder';
|
||||
return 'Dashboard name cannot be the same as folder name';
|
||||
}
|
||||
try {
|
||||
await validationSrv.validateNewDashboardName(getFormValues().$folder.id, dashboardName);
|
||||
|
||||
@ -55,7 +55,7 @@ export const SaveDashboardForm: React.FC<SaveDashboardFormProps> = ({ dashboard,
|
||||
)}
|
||||
{(hasVariableChanged || hasTimeChanged) && <div className="gf-form-group" />}
|
||||
|
||||
<TextArea name="message" ref={register} placeholder="Add a note to describe your changes..." autoFocus />
|
||||
<TextArea name="message" ref={register} placeholder="Add a note to describe your changes." autoFocus />
|
||||
</div>
|
||||
|
||||
<HorizontalGroup>
|
||||
|
||||
@ -31,14 +31,14 @@ export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({
|
||||
<>
|
||||
<VerticalGroup spacing="lg">
|
||||
<small>
|
||||
This dashboard cannot be saved from Grafana's UI since it has been provisioned from another source. Copy
|
||||
the JSON or save it to a file below. Then you can update your dashboard in corresponding provisioning source.
|
||||
This dashboard cannot be saved from the Grafana UI because it has been provisioned from another source. Copy
|
||||
the JSON or save it to a file below, then you can update your dashboard in the provisioning source.
|
||||
<br />
|
||||
<i>
|
||||
See{' '}
|
||||
<a
|
||||
className="external-link"
|
||||
href="http://docs.grafana.org/administration/provisioning/#dashboards"
|
||||
href="https://grafana.com/docs/grafana/latest/administration/provisioning/#dashboards"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
|
||||
@ -92,9 +92,9 @@ export class ShareEmbed extends PureComponent<Props, State> {
|
||||
<RadioButtonGroup options={themeOptions} value={selectedTheme} onChange={this.onThemeChange} />
|
||||
</Field>
|
||||
<Field
|
||||
label="Embed html"
|
||||
description="The html code below can be pasted and included in another web page. Unless anonymous access is enabled,
|
||||
the user viewing that page need to be signed into grafana for the graph to load."
|
||||
label="Embed HTML"
|
||||
description="The HTML code below can be pasted and included in another web page. Unless anonymous access is enabled,
|
||||
the user viewing that page need to be signed into Grafana for the graph to load."
|
||||
>
|
||||
<TextArea rows={5} value={iframeHtml} onChange={this.onIframeHtmlChange}></TextArea>
|
||||
</Field>
|
||||
|
||||
@ -210,13 +210,13 @@ export class ShareSnapshot extends PureComponent<Props, State> {
|
||||
<>
|
||||
<div>
|
||||
<p className="share-modal-info-text">
|
||||
A snapshot is an instant way to share an interactive dashboard publicly. When created, we{' '}
|
||||
<strong>strip sensitive data</strong> like queries (metric, template and annotation) and panel links,
|
||||
leaving only the visible metric data and series names embedded into your dashboard.
|
||||
A snapshot is an instant way to share an interactive dashboard publicly. When created, we strip sensitive
|
||||
data like queries (metric, template, and annotation) and panel links, leaving only the visible metric data
|
||||
and series names embedded in your dashboard.
|
||||
</p>
|
||||
<p className="share-modal-info-text">
|
||||
Keep in mind, your <strong>snapshot can be viewed by anyone</strong> that has the link and can reach the
|
||||
URL. Share wisely.
|
||||
Keep in mind, your snapshot <em>can be viewed by anyone</em> that has the link and can access the URL. Share
|
||||
wisely.
|
||||
</p>
|
||||
</div>
|
||||
<Field label="Snapshot name">
|
||||
@ -227,7 +227,7 @@ export class ShareSnapshot extends PureComponent<Props, State> {
|
||||
</Field>
|
||||
<Field
|
||||
label="Timeout (seconds)"
|
||||
description="You may need to configure the timeout value if it takes a long time to collect your dashboard's
|
||||
description="You might need to configure the timeout value if it takes a long time to collect your dashboard
|
||||
metrics."
|
||||
>
|
||||
<Input type="number" width={21} value={timeoutSeconds} onChange={this.onTimeoutChange} />
|
||||
@ -270,7 +270,7 @@ export class ShareSnapshot extends PureComponent<Props, State> {
|
||||
<div className="pull-right" style={{ padding: '5px' }}>
|
||||
Did you make a mistake?{' '}
|
||||
<LinkButton variant="link" target="_blank" onClick={this.deleteSnapshot}>
|
||||
delete snapshot.
|
||||
Delete snapshot.
|
||||
</LinkButton>
|
||||
</div>
|
||||
</>
|
||||
@ -281,8 +281,8 @@ export class ShareSnapshot extends PureComponent<Props, State> {
|
||||
return (
|
||||
<div className="share-modal-header">
|
||||
<p className="share-modal-info-text">
|
||||
The snapshot has now been deleted. If you have already accessed it once, it might take up to an hour before it
|
||||
is removed from browser caches or CDN caches.
|
||||
The snapshot has been deleted. If you have already accessed it once, then it might take up to an hour before
|
||||
before it is removed from browser caches or CDN caches.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -126,7 +126,7 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
|
||||
this.props.panel.setTransformations(transformations.map((t) => t.transformation));
|
||||
}
|
||||
|
||||
// Transformation uid are stored in a name-X form. name is NOT unique hence we need to parse the ids and increase X
|
||||
// Transformation UIDs are stored in a name-X form. name is NOT unique hence we need to parse the IDs and increase X
|
||||
// for transformations with the same name
|
||||
getTransformationNextId = (name: string) => {
|
||||
const { transformations } = this.state;
|
||||
@ -275,11 +275,12 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
|
||||
url={getDocsLink(DocsId.Transformations)}
|
||||
>
|
||||
<p>
|
||||
Transformations allow you to join, calculate, re-order, hide and rename your query results before
|
||||
being visualized. <br />
|
||||
Many transforms are not suitable if you're using the Graph visualization as it currently only
|
||||
supports time series. <br />
|
||||
It can help to switch to Table visualization to understand what a transformation is doing. <br />
|
||||
Transformations allow you to join, calculate, re-order, hide, and rename your query results before
|
||||
they are visualized. <br />
|
||||
Many transforms are not suitable if you're using the Graph visualization, as it currently
|
||||
only only supports time series data. <br />
|
||||
It can help to switch to the Table visualization to understand what a transformation is doing.{' '}
|
||||
<br />
|
||||
</p>
|
||||
</FeatureInfoBox>
|
||||
);
|
||||
|
||||
@ -9,7 +9,7 @@ export const DiffViewer: React.FC<ReactDiffViewerProps> = ({ oldValue, newValue
|
||||
|
||||
const styles = {
|
||||
variables: {
|
||||
// the light theme supplied by ReactDiffViewer is very similar to grafana
|
||||
// the light theme supplied by ReactDiffViewer is very similar to Grafana
|
||||
// the dark theme needs some tweaks.
|
||||
dark: {
|
||||
diffViewerBackground: theme.colors.dashboardBg,
|
||||
|
||||
@ -21,7 +21,7 @@ export const VersionsHistoryButtons: React.FC<VersionsButtonsType> = ({
|
||||
Show more versions
|
||||
</Button>
|
||||
)}
|
||||
<Tooltip content="Select 2 versions to start comparing" placement="bottom">
|
||||
<Tooltip content="Select two versions to start comparing" placement="bottom">
|
||||
<Button type="button" disabled={canCompare} onClick={getDiff} icon="code-branch">
|
||||
Compare versions
|
||||
</Button>
|
||||
|
||||
@ -15,7 +15,7 @@ export const VersionHistoryTable: React.FC<VersionsTableProps> = ({ versions, on
|
||||
<th className="width-4"></th>
|
||||
<th className="width-4">Version</th>
|
||||
<th className="width-14">Date</th>
|
||||
<th className="width-10">Updated By</th>
|
||||
<th className="width-10">Updated by</th>
|
||||
<th>Notes</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
|
||||
@ -146,19 +146,19 @@ function getPanelStateBadgeDisplayModel(panel: PanelPluginMeta): BadgeProps | nu
|
||||
return {
|
||||
text: 'Deprecated',
|
||||
color: 'red',
|
||||
tooltip: `${panel.name} panel is deprecated`,
|
||||
tooltip: `${panel.name} Panel is deprecated`,
|
||||
};
|
||||
case PluginState.alpha:
|
||||
return {
|
||||
text: 'Alpha',
|
||||
color: 'blue',
|
||||
tooltip: `${panel.name} panel is experimental`,
|
||||
tooltip: `${panel.name} Panel is experimental`,
|
||||
};
|
||||
case PluginState.beta:
|
||||
return {
|
||||
text: 'Beta',
|
||||
color: 'blue',
|
||||
tooltip: `${panel.name} panel is in beta`,
|
||||
tooltip: `${panel.name} Panel is in beta`,
|
||||
};
|
||||
default:
|
||||
return null;
|
||||
|
||||
@ -216,7 +216,7 @@ export class DashboardPage extends PureComponent<Props, State> {
|
||||
|
||||
if (!panel) {
|
||||
// Panel not found
|
||||
this.props.notifyApp(createErrorNotification(`Panel with id ${urlPanelId} not found`));
|
||||
this.props.notifyApp(createErrorNotification(`Panel with ID ${urlPanelId} not found`));
|
||||
// Clear url state
|
||||
locationService.partial({ editPanel: null, viewPanel: null });
|
||||
return;
|
||||
|
||||
@ -153,7 +153,7 @@ export class DashboardGrid extends PureComponent<Props> {
|
||||
|
||||
this.props.dashboard.sortPanelsByGridPos();
|
||||
|
||||
// Call render() after any changes. This is called when the layour loads
|
||||
// Call render() after any changes. This is called when the layout loads
|
||||
this.forceUpdate();
|
||||
};
|
||||
|
||||
|
||||
@ -112,7 +112,7 @@ export class DashboardPanelUnconnected extends PureComponent<Props, State> {
|
||||
const { isViewing, plugin } = this.props;
|
||||
const { isLazy } = this.state;
|
||||
|
||||
// if we have not loaded plugin exports yet, wait
|
||||
// If we have not loaded plugin exports yet, wait
|
||||
if (!plugin) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@ -39,7 +39,7 @@ export function getPanelPluginLoadError(meta: PanelPluginMeta, err: any): PanelP
|
||||
const text = (
|
||||
<>
|
||||
Check the server startup logs for more information. <br />
|
||||
If this plugin was loaded from git, make sure it was compiled.
|
||||
If this plugin was loaded from Git, then make sure it was compiled.
|
||||
</>
|
||||
);
|
||||
return <PanelPluginError title={`Error loading: ${meta.id}`} text={text} />;
|
||||
|
||||
@ -86,7 +86,7 @@ export class ChangeTracker {
|
||||
return true;
|
||||
}
|
||||
|
||||
//Ignore changes if the user has been signed out
|
||||
// Ignore changes if the user has been signed out
|
||||
if (!contextSrv.isSignedIn) {
|
||||
return true;
|
||||
}
|
||||
|
||||
@ -71,7 +71,7 @@ export class DashboardSrv {
|
||||
coreModule.service('dashboardSrv', DashboardSrv);
|
||||
|
||||
//
|
||||
// Code below is to export the service to react components
|
||||
// Code below is to export the service to React components
|
||||
//
|
||||
|
||||
let singletonInstance: DashboardSrv;
|
||||
|
||||
@ -91,7 +91,7 @@ export class DashboardMigrator {
|
||||
|
||||
// schema version 3 changes
|
||||
if (oldVersion < 3) {
|
||||
// ensure panel ids
|
||||
// ensure panel IDs
|
||||
let maxId = this.dashboard.getNextPanelId();
|
||||
panelUpgrades.push((panel: any) => {
|
||||
if (!panel.id) {
|
||||
@ -116,7 +116,7 @@ export class DashboardMigrator {
|
||||
}
|
||||
|
||||
if (oldVersion < 6) {
|
||||
// move pulldowns to new schema
|
||||
// move drop-downs to new schema
|
||||
const annotations: any = _.find(old.pulldowns, { type: 'annotations' });
|
||||
|
||||
if (annotations) {
|
||||
|
||||
@ -30,7 +30,7 @@ describe('applyPanelTimeOverrides', () => {
|
||||
timeFrom: '2h',
|
||||
};
|
||||
|
||||
// @ts-ignore: PanelModel type incositency
|
||||
// @ts-ignore: PanelModel type inconsistency
|
||||
const overrides = applyPanelTimeOverrides(panelModel, dashboardTimeRange);
|
||||
|
||||
expect(overrides.timeRange.from.toISOString()).toBe(dateTime([2019, 1, 11, 12]).toISOString());
|
||||
@ -47,7 +47,7 @@ describe('applyPanelTimeOverrides', () => {
|
||||
const expectedFromDate = dateTime([2019, 1, 11, 10, 0, 0]).toDate();
|
||||
const expectedToDate = dateTime([2019, 1, 11, 16, 0, 0]).toDate();
|
||||
|
||||
// @ts-ignore: PanelModel type incositency
|
||||
// @ts-ignore: PanelModel type inconsistency
|
||||
const overrides = applyPanelTimeOverrides(panelModel, dashboardTimeRange);
|
||||
|
||||
expect(overrides.timeRange.from.toISOString()).toBe(expectedFromDate.toISOString());
|
||||
@ -65,7 +65,7 @@ describe('applyPanelTimeOverrides', () => {
|
||||
const expectedFromDate = dateTime([2019, 1, 11, 10, 0, 0]).toDate();
|
||||
const expectedToDate = dateTime([2019, 1, 11, 12, 0, 0]).toDate();
|
||||
|
||||
// @ts-ignore: PanelModel type incositency
|
||||
// @ts-ignore: PanelModel type inconsistency
|
||||
const overrides = applyPanelTimeOverrides(panelModel, dashboardTimeRange);
|
||||
|
||||
expect(overrides.timeRange.from.toISOString()).toBe(expectedFromDate.toISOString());
|
||||
|
||||
@ -23,12 +23,14 @@ import { ShowConfirmModalEvent, ShowModalReactEvent } from '../../../types/event
|
||||
export const removePanel = (dashboard: DashboardModel, panel: PanelModel, ask: boolean) => {
|
||||
// confirm deletion
|
||||
if (ask !== false) {
|
||||
const text2 = panel.alert ? 'Panel includes an alert rule, removing panel will also remove alert rule' : undefined;
|
||||
const text2 = panel.alert
|
||||
? 'Panel includes an alert rule. removing the panel will also remove the alert rule'
|
||||
: undefined;
|
||||
const confirmText = panel.alert ? 'YES' : undefined;
|
||||
|
||||
appEvents.publish(
|
||||
new ShowConfirmModalEvent({
|
||||
title: 'Remove Panel',
|
||||
title: 'Remove panel',
|
||||
text: 'Are you sure you want to remove this panel?',
|
||||
text2: text2,
|
||||
icon: 'trash-alt',
|
||||
@ -54,7 +56,7 @@ export const copyPanel = (panel: PanelModel) => {
|
||||
}
|
||||
|
||||
store.set(LS_PANEL_COPY_KEY, JSON.stringify(saveModel));
|
||||
appEvents.emit(AppEvents.alertSuccess, ['Panel copied. Open Add Panel to paste']);
|
||||
appEvents.emit(AppEvents.alertSuccess, ['Panel copied. Click **Add panel** icon to paste.']);
|
||||
};
|
||||
|
||||
export const sharePanel = (dashboard: DashboardModel, panel: PanelModel) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user