Dashboard: Spelling corrections in end-user visible dialogs (#53340)

.github/renovate.json5

@@ -18,7 +18,7 @@
     "d3-scale-chromatic", // we should bump this once we move to esm modules
     "execa", // we should bump this once we move to esm modules
     "history", // we should bump this together with react-router-dom
-    "@mdx-js/react", // storybook peer-depends on it's 1.x version, we should upgrade this when we upgrade storybook
+    "@mdx-js/react", // storybook peer-depends on its 1.x version, we should upgrade this when we upgrade storybook
     "monaco-editor", // due to us exposing this via @grafana/ui/CodeEditor's props bumping can break plugins
     "node-fetch", // we should bump this once we move to esm modules
     "react-hook-form", // due to us exposing these hooks via @grafana/ui form components bumping can break plugins

docs/sources/setup-grafana/configure-security/configure-database-encryption/integrate-with-hashicorp-vault.md

@@ -66,7 +66,7 @@ The argument to Vault consists of three parts separated by a colon:
 - The third part specifies which field of that secret should be used.
 
 For example, if you place a Key/Value secret for the Grafana admin user in _secret/grafana/admin_defaults_
-the syntax for accessing it's _password_ field would be `$__vault{kv:secret/grafana/admin_defaults:password}`.
+the syntax for accessing its _password_ field would be `$__vault{kv:secret/grafana/admin_defaults:password}`.
 
 ### Secrets engines
 

docs/sources/visualizations/node-graph.md

@@ -46,7 +46,7 @@ For example, you can have the percentage of errors represented by a red portion
 
 Edges can also show statistics when you hover over the edge. Similar to nodes, you can open a context menu with additional details and links by clicking on the edge.
 
-The first data source supporting this visualization is X-Ray data source for it's Service map feature. For more information, refer to the [X-Ray plugin documentation](https://grafana.com/grafana/plugins/grafana-x-ray-datasource).
+The first data source supporting this visualization is X-Ray data source for its Service map feature. For more information, refer to the [X-Ray plugin documentation](https://grafana.com/grafana/plugins/grafana-x-ray-datasource).
 
 ## Navigating the node graph
 
@@ -90,9 +90,9 @@ Data source needs to return two data frames, one for nodes and one for edges. Yo
 
 Required fields:
 
-| Field name | Type   | Description                                                                                   |
+| Field name | Type   | Description                                                                                  |
-| ---------- | ------ | --------------------------------------------------------------------------------------------- |
+| ---------- | ------ | -------------------------------------------------------------------------------------------- |
-| id         | string | Unique identifier of the node. This ID is referenced by edge in it's source and target field. |
+| id         | string | Unique identifier of the node. This ID is referenced by edge in its source and target field. |
 
 Optional fields:
 

e2e/dashboards-suite/new-custom-variable.spec.ts

@@ -44,7 +44,7 @@ describe('Variables - Custom', () => {
     e2e.components.CallToActionCard.buttonV2('Add variable').click();
     e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelectV2().type('Custom{enter}');
 
-    // Set it's name, label, and content
+    // Set its name, label, and content
     fillInCustomVariable('VariableUnderTest', 'Variable under test', 'One : 1,Two : 2, Three : 3');
     assertPreviewValues(['One', 'Two', 'Three']);
 

packages/grafana-ui/src/components/JSONFormatter/json_explorer/json_explorer.ts

@@ -71,7 +71,7 @@ export class JsonExplorer {
    *   preview. Any object with more properties that thin number will be
    *   truncated.
    *
-   * @param {string} [key=undefined] The key that this object in it's parent
+   * @param {string} [key=undefined] The key that this object in its parent
    * context
    */
   constructor(

packages/grafana-ui/src/components/SetInterval/SetInterval.tsx

@@ -57,7 +57,7 @@ export class SetInterval extends PureComponent<Props> {
       )
       .subscribe();
 
-    // When component has mounted, propsSubject emits it's first value
+    // When component has mounted, propsSubject emits its first value
     this.propsSubject.next(this.props);
   }
 

pkg/services/ngalert/provisioning/contactpoints_test.go

@@ -60,7 +60,7 @@ func TestContactPointService(t *testing.T) {
 		require.Equal(t, "slack", cps[1].Type)
 	})
 
-	t.Run("it's possbile to use a custom uid", func(t *testing.T) {
+	t.Run("it's possible to use a custom uid", func(t *testing.T) {
 		customUID := "1337"
 		sut := createContactPointServiceSut(secretsService)
 		newCp := createTestContactPoint()
@@ -75,7 +75,7 @@ func TestContactPointService(t *testing.T) {
 		require.Equal(t, customUID, cps[1].UID)
 	})
 
-	t.Run("it's not possbile to use the same uid twice", func(t *testing.T) {
+	t.Run("it's not possible to use the same uid twice", func(t *testing.T) {
 		customUID := "1337"
 		sut := createContactPointServiceSut(secretsService)
 		newCp := createTestContactPoint()

pkg/services/provisioning/dashboards/dashboard.go

@@ -106,7 +106,7 @@ func (provider *Provisioner) PollChanges(ctx context.Context) {
 }
 
 // GetProvisionerResolvedPath returns resolved path for the specified provisioner name. Can be used to generate
-// relative path to provisioning file from it's external_id.
+// relative path to provisioning file from its external_id.
 func (provider *Provisioner) GetProvisionerResolvedPath(name string) string {
 	for _, reader := range provider.fileReaders {
 		if reader.Cfg.Name == name {

public/app/core/history/RichHistoryLocalStorage.ts

@@ -217,7 +217,7 @@ function createDataQuery(query: RichHistoryLocalStorageDTO, individualQuery: Dat
     // ElasticSearch (maybe other datasoures too) before grafana7
     return JSON.parse(individualQuery);
   }
-  // prometehus (maybe other datasources too) before grafana7
+  // prometheus (maybe other datasources too) before grafana7
   return { expr: individualQuery, refId: letters[index] };
 }
 

public/app/core/services/echo/EchoSrv.ts

@@ -14,6 +14,6 @@ export const reportPerformance = (metric: string, value: number) => {
   });
 };
 
-// Sentry will process the error, adding it's own metadata, applying any sampling rules,
+// Sentry will process the error, adding its own metadata, applying any sampling rules,
 // then push it to EchoSrv as SentryEvent
 export const reportError = (error: Error) => captureException(error);

public/app/core/services/echo/backends/grafana-javascript-agent/GrafanaJavascriptAgentBackend.ts

@@ -48,7 +48,7 @@ export class GrafanaJavascriptAgentBackend
       instrumentations.push(new WebVitalsInstrumentation());
     }
 
-    // initialize GrafanaJavascriptAgent so it can set up it's hooks and start collecting errors
+    // initialize GrafanaJavascriptAgent so it can set up its hooks and start collecting errors
     const grafanaJavaScriptAgentOptions: BrowserConfig = {
       globalObjectKey: options.globalObjectKey || 'grafanaAgent',
       preventGlobalExposure: options.preventGlobalExposure || false,

public/app/core/services/echo/backends/sentry/SentryBackend.ts

@@ -29,7 +29,7 @@ export class SentryEchoBackend implements EchoBackend<SentryEchoEvent, SentryEch
       this.transports.push(new CustomEndpointTransport({ endpoint: options.customEndpoint }));
     }
 
-    // initialize Sentry so it can set up it's hooks and start collecting errors
+    // initialize Sentry so it can set up its hooks and start collecting errors
     const sentryOptions: BrowserOptions = {
       release: options.buildInfo.version,
       environment: options.buildInfo.env,

public/app/core/utils/tracing.ts

@@ -33,7 +33,7 @@ export function getNonOverlappingDuration(ranges: Array<[number, number]>): numb
 
 /**
  * Returns a map of the spans with children array for easier processing. It will also contain empty spans in case
- * span is missing but other spans are it's children. This is more generic because it needs to allow iterating over
+ * span is missing but other spans are its children. This is more generic because it needs to allow iterating over
  * both arrays and dataframe views.
  */
 export function makeSpanMap<T>(getSpan: (index: number) => { span: T; id: string; parentIds: string[] } | undefined): {

public/app/features/alerting/unified/components/rules/RuleState.tsx

@@ -20,7 +20,7 @@ export const RuleState: FC<Props> = ({ rule, isDeleting, isCreating }) => {
   const style = useStyles2(getStyle);
   const { promRule } = rule;
 
-  // return how long the rule has been in it's firing state, if any
+  // return how long the rule has been in its firing state, if any
   const forTime = useMemo(() => {
     if (
       promRule &&

public/app/features/alerting/unified/utils/redux.ts

@@ -61,7 +61,7 @@ function requestStateReducer<T, ThunkArg = void, ThunkApiConfig = {}>(
 }
 
 /*
- * createAsyncSlice creates a slice based on a given async action, exposing it's state.
+ * createAsyncSlice creates a slice based on a given async action, exposing its state.
  * takes care to only use state of the latest invocation of the action if there are several in flight.
  */
 export function createAsyncSlice<T, ThunkArg = void, ThunkApiConfig = {}>(

public/app/features/dashboard/state/actions.ts

@@ -43,7 +43,7 @@ export function updateDashboardPermission(
 
       const updated = toUpdateItem(item);
 
-      // if this is the item we want to update, update it's permission
+      // if this is the item we want to update, update its permission
       if (itemToUpdate === item) {
         updated.permission = level;
       }

public/app/features/explore/RichHistory/RichHistoryCard.tsx

@@ -49,8 +49,8 @@ export type Props<T extends DataQuery = DataQuery> = ConnectedProps<typeof conne
 
 const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
   /* Hard-coded value so all buttons and icons on right side of card are aligned */
-  const rigtColumnWidth = '240px';
+  const rightColumnWidth = '240px';
-  const rigtColumnContentWidth = '170px';
+  const rightColumnContentWidth = '170px';
 
   /* If datasource was removed, card will have inactive color */
   const cardColor = theme.colors.bg2;
@@ -90,7 +90,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
       font-weight: ${theme.typography.weight.semibold};
     `,
     queryActionButtons: css`
-      max-width: ${rigtColumnContentWidth};
+      max-width: ${rightColumnContentWidth};
       display: flex;
       justify-content: flex-end;
       font-size: ${theme.typography.size.base};
@@ -100,7 +100,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
     `,
     queryContainer: css`
       font-weight: ${theme.typography.weight.semibold};
-      width: calc(100% - ${rigtColumnWidth});
+      width: calc(100% - ${rightColumnWidth});
     `,
     queryRow: css`
       border-top: 1px solid ${theme.colors.border1};
@@ -112,7 +112,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
       }
     `,
     updateCommentContainer: css`
-      width: calc(100% + ${rigtColumnWidth});
+      width: calc(100% + ${rightColumnWidth});
       margin-top: ${theme.spacing.sm};
     `,
     comment: css`
@@ -130,7 +130,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
       width: 100%;
     `,
     runButton: css`
-      max-width: ${rigtColumnContentWidth};
+      max-width: ${rightColumnContentWidth};
       display: flex;
       justify-content: flex-end;
       button {

public/app/features/folders/state/actions.ts

@@ -89,7 +89,7 @@ export function updateFolderPermission(itemToUpdate: DashboardAcl, level: Permis
 
       const updated = toUpdateItem(item);
 
-      // if this is the item we want to update, update it's permission
+      // if this is the item we want to update, update its permission
       if (itemToUpdate === item) {
         updated.permission = level;
       }

public/app/features/live/dashboard/DashboardChangedModal.tsx

@@ -37,7 +37,7 @@ export class DashboardChangedModal extends PureComponent<Props, State> {
   continueEditing: ActionInfo = {
     label: 'Continue editing',
     description:
-      'Keep your local changes and continue editing.  Note: when you save, this will overwrite the most recent chages',
+      'Keep your local changes and continue editing.  Note: when you save, this will overwrite the most recent changes',
     action: () => {
       this.onDismiss();
     },

public/app/features/scenes/components/NestedScene.tsx

@@ -29,7 +29,7 @@ export class NestedScene extends SceneObjectBase<NestedSceneState> {
     });
   };
 
-  /** Removes itself from it's parent's children array */
+  /** Removes itself from its parent's children array */
   onRemove = () => {
     const parent = this.parent!;
     if ('children' in parent.state) {

public/app/features/scenes/core/types.ts

@@ -69,7 +69,7 @@ export interface SceneObject<TState extends SceneObjectState = SceneObjectState>
   /** Get the scene editor */
   getSceneEditor(): SceneEditor;
 
-  /** Returns a deep clone this object and all it's children */
+  /** Returns a deep clone this object and all its children */
   clone(state?: Partial<TState>): this;
 
   /** A React component to use for rendering the object */

public/app/features/variables/adhoc/picker/AdHocFilter.tsx

@@ -22,7 +22,7 @@ interface Props {
 }
 
 /**
- * Simple filtering component that automatically uses datasource APIs to get available labels and it's values, for
+ * Simple filtering component that automatically uses datasource APIs to get available labels and its values, for
  * dynamic visual filtering without need for much setup. Instead of having single onChange prop this reports all the
  * change events with separate props so it is usable with AdHocPicker.
  *

public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/utils.ts

@@ -298,8 +298,8 @@ export const pipelineOptions: PipelineOptions = {
 
 /**
  * Given a metric `MetricA` and an array of metrics, returns all children of `MetricA`.
- * `MetricB` is considered a child of `MetricA` if `MetricA` is referenced by `MetricB` in it's `field` attribute
+ * `MetricB` is considered a child of `MetricA` if `MetricA` is referenced by `MetricB` in its `field` attribute
- * (`MetricA.id === MetricB.field`) or in it's pipeline aggregation variables (for bucket_scripts).
+ * (`MetricA.id === MetricB.field`) or in its pipeline aggregation variables (for bucket_scripts).
  * @param metric
  * @param metrics
  */

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/QueryField.tsx

@@ -42,7 +42,7 @@ const QueryField: React.FC<AzureQueryEditorFieldProps> = ({ query, datasource, o
       getPromise(),
     ] as const;
 
-    // the kusto schema call might fail, but its okay for that to happen silently
+    // the kusto schema call might fail, but it's okay for that to happen silently
     Promise.all(promises).then(([schema, { monaco, editor }]) => {
       const languages = monaco.languages as unknown as MonacoLanguages;
 

public/app/plugins/datasource/loki/backendResultTransformer.ts

@@ -10,7 +10,7 @@ function isMetricFrame(frame: DataFrame): boolean {
   return frame.fields.every((field) => field.type === FieldType.time || field.type === FieldType.number);
 }
 
-// returns a new frame, with meta shallow merged with it's original meta
+// returns a new frame, with meta shallow merged with its original meta
 function setFrameMeta(frame: DataFrame, meta: QueryResultMeta): DataFrame {
   const { meta: oldMeta, ...rest } = frame;
   // meta maybe be undefined, we need to handle that

public/app/plugins/datasource/loki/datasource.ts

@@ -568,11 +568,11 @@ export class LokiDatasource
             // and any other that were logged in the same ns but before the row. Right now these rows will be lost
             // because the are before but came it he response that should return only rows after.
             from: timestamp,
-            // convert to ns, we loose some precision here but it is not that important at the far points of the context
+            // convert to ns, we lose some precision here but it is not that important at the far points of the context
             to: toUtc(row.timeEpochMs + contextTimeBuffer),
           }
         : {
-            // convert to ns, we loose some precision here but it is not that important at the far points of the context
+            // convert to ns, we lose some precision here but it is not that important at the far points of the context
             from: toUtc(row.timeEpochMs - contextTimeBuffer),
             to: timestamp,
           };

public/app/plugins/datasource/loki/language_provider.ts

@@ -387,7 +387,7 @@ export default class LokiLanguageProvider extends LanguageProvider {
   }
 
   /**
-   * Fetch labels for a selector. This is cached by it's args but also by the global timeRange currently selected as
+   * Fetch labels for a selector. This is cached by its args but also by the global timeRange currently selected as
    * they can change over requested time.
    * @param name
    */

public/app/plugins/datasource/loki/live_streams_result_transformer.ts

@@ -50,7 +50,7 @@ function createUid(ts: string, labelsString: string, line: string, usedUids: any
   let id = uuidv5(`${ts}_${labelsString}_${line}`, UUID_NAMESPACE);
 
   // Check if generated id is unique
-  // If not and we've already used it, append it's count after it
+  // If not and we've already used it, append its count after it
   if (id in usedUids) {
     // Increase the count
     const newCount = usedUids[id] + 1;

public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx

@@ -51,7 +51,7 @@ export const LokiQueryEditorSelector = React.memo<LokiQueryEditorProps>((props)
 
       if (newEditorMode === QueryEditorMode.Builder) {
         const result = buildVisualQueryFromString(query.expr || '');
-        // If there are errors, give user a chance to decide if they want to go to builder as that can loose some data.
+        // If there are errors, give user a chance to decide if they want to go to builder as that can lose some data.
         if (result.errors.length) {
           setParseModalOpen(true);
           return;
@@ -81,7 +81,7 @@ export const LokiQueryEditorSelector = React.memo<LokiQueryEditorProps>((props)
       <ConfirmModal
         isOpen={parseModalOpen}
         title="Query parsing"
-        body="There were errors while trying to parse the query. Continuing to visual builder may loose some parts of the query."
+        body="There were errors while trying to parse the query. Continuing to visual builder may lose some parts of the query."
         confirmText="Continue"
         onConfirm={() => {
           onChange({ ...query, editorMode: QueryEditorMode.Builder });

public/app/plugins/datasource/loki/querybuilder/parsing.ts

@@ -155,7 +155,7 @@ export function handleExpression(expr: string, node: SyntaxNode, context: Contex
     }
 
     default: {
-      // Any other nodes we just ignore and go to it's children. This should be fine as there are lot's of wrapper
+      // Any other nodes we just ignore and go to its children. This should be fine as there are lots of wrapper
       // nodes that can be skipped.
       // TODO: there are probably cases where we will just skip nodes we don't support and we should be able to
       //  detect those and report back.

public/app/plugins/datasource/prometheus/language_provider.ts

@@ -507,7 +507,7 @@ export default class PromQlLanguageProvider extends LanguageProvider {
   }
 
   /**
-   * Fetch labels for a series. This is cached by it's args but also by the global timeRange currently selected as
+   * Fetch labels for a series. This is cached by its args but also by the global timeRange currently selected as
    * they can change over requested time.
    * @param name
    * @param withName

public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx

@@ -43,7 +43,7 @@ export const PromQueryEditorSelector = React.memo<Props>((props) => {
 
       if (newMetricEditorMode === QueryEditorMode.Builder) {
         const result = buildVisualQueryFromString(query.expr || '');
-        // If there are errors, give user a chance to decide if they want to go to builder as that can loose some data.
+        // If there are errors, give user a chance to decide if they want to go to builder as that can lose some data.
         if (result.errors.length) {
           setParseModalOpen(true);
           return;
@@ -77,7 +77,7 @@ export const PromQueryEditorSelector = React.memo<Props>((props) => {
       <ConfirmModal
         isOpen={parseModalOpen}
         title="Query parsing"
-        body="There were errors while trying to parse the query. Continuing to visual builder may loose some parts of the query."
+        body="There were errors while trying to parse the query. Continuing to visual builder may lose some parts of the query."
         confirmText="Continue"
         onConfirm={() => {
           changeEditorMode(query, QueryEditorMode.Builder, onChange);

public/app/plugins/datasource/prometheus/querybuilder/parsing.ts

@@ -154,7 +154,7 @@ export function handleExpression(expr: string, node: SyntaxNode, context: Contex
         // parsing.
         context.errors.push(makeError(expr, node));
       }
-      // Any other nodes we just ignore and go to it's children. This should be fine as there are lot's of wrapper
+      // Any other nodes we just ignore and go to its children. This should be fine as there are lots of wrapper
       // nodes that can be skipped.
       // TODO: there are probably cases where we will just skip nodes we don't support and we should be able to
       //  detect those and report back.

public/app/plugins/datasource/prometheus/querybuilder/shared/operationUtils.ts

@@ -311,7 +311,7 @@ function getOnLabelAddedHandler(changeToOperationId: string) {
   return function onParamChanged(index: number, op: QueryBuilderOperation, def: QueryBuilderOperationDef) {
     // Check if we actually have the label param. As it's optional the aggregation can have one less, which is the
     // case of just simple aggregation without label. When user adds the label it now has the same number of params
-    // as it's definition, and now we can change it to it's `_by` variant.
+    // as its definition, and now we can change it to its `_by` variant.
     if (op.params.length === def.params.length) {
       return {
         ...op,

public/app/plugins/datasource/prometheus/querybuilder/shared/parsingUtils.ts

@@ -32,7 +32,7 @@ const variableRegex = /\$(\w+)|\[\[([\s\S]+?)(?::(\w+))?\]\]|\${(\w+)(?:\.([^:^\
 
 /**
  * As variables with $ are creating parsing errors, we first replace them with magic string that is parsable and at
- * the same time we can get the variable and it's format back from it.
+ * the same time we can get the variable and its format back from it.
  * @param expr
  */
 export function replaceVariables(expr: string) {

public/app/plugins/panel/nodeGraph/NodeGraph.tsx

@@ -162,7 +162,7 @@ export function NodeGraph({ getLinks, dataFrames, nodeLimit }: Props) {
     focusedNodeId
   );
 
-  // If we move from grid to graph layout and we have focused node lets get it's position to center there. We want do
+  // If we move from grid to graph layout and we have focused node lets get its position to center there. We want do
   // do it specifically only in that case.
   const focusPosition = useFocusPositionOnLayout(config, nodes, focusedNodeId);
   const { panRef, zoomRef, onStepUp, onStepDown, isPanning, position, scale, isMaxZoom, isMinZoom } = usePanAndZoom(

public/app/plugins/panel/nodeGraph/layout.worker.js

@@ -44,7 +44,7 @@ export function layout(nodes, edges, config) {
 }
 
 /**
- * This initializes positions of the graph by going from the root to it's children and laying it out in a grid from left
+ * This initializes positions of the graph by going from the root to its children and laying it out in a grid from left
  * to right. This works only so, so because service map graphs can have cycles and children levels are not ordered in a
  * way to minimize the edge lengths. Nevertheless this seems to make the graph easier to nudge with the forces later on
  * than with the d3 default initial positioning. Also we can fix the root positions later on for a bit more neat
@@ -125,7 +125,7 @@ function initializePositions(nodes, edges) {
 }
 
 /**
- * Makes sure that the center of the graph based on it's bound is in 0, 0 coordinates.
+ * Makes sure that the center of the graph based on its bound is in 0, 0 coordinates.
  * Modifies the nodes directly.
  */
 function centerNodes(nodes) {

public/app/plugins/panel/timeseries/migrations.ts

@@ -412,7 +412,7 @@ export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSour
             value: threshold.value,
             color: 'transparent',
           });
-          // if next is a lt we need to use it's color
+          // if next is a lt we need to use its color
         } else if (next && next.op === 'lt') {
           steps.push({
             value: threshold.value,

public/app/types/events.ts

@@ -111,7 +111,7 @@ export class PanelTransformationsChangedEvent extends BusEventBase {
 }
 
 /**
- * Used by panel editor to know when panel plugin it'self trigger option updates
+ * Used by panel editor to know when panel plugin itself trigger option updates
  */
 export class PanelOptionsChangedEvent extends BusEventBase {
   static type = 'panels-options-changed';