Minor UI touches (#24371)

* Justify to alignment in stat

* No stats label in inspect

* Use sentence case in panel names

* typos

* typo

* Typo

* Query -> query options

* prettier

* Transformer -> transform data

* Do not show deprecated plugins in the viz picker

* Update viz picker layout

public/app/features/dashboard/components/Inspector/InspectDataTab.tsx

@@ -114,7 +114,7 @@ export class InspectDataTab extends PureComponent<Props, State> {
       <div className={styles.dataTabContent} aria-label={selectors.components.PanelInspector.Data.content}>
         <div className={styles.toolbar}>
           {data.length > 1 && (
-            <Field label="Transformer" className="flex-grow-1">
+            <Field label="Transform data" className="flex-grow-1">
               <Select options={transformationOptions} value={transformId} onChange={this.onTransformationChange} />
             </Field>
           )}

public/app/features/dashboard/components/Inspector/PanelInspector.tsx

@@ -241,7 +241,6 @@ export class PanelInspectorUnconnected extends PureComponent<Props, State> {
 
     return (
       <div style={{ paddingBottom: '16px' }}>
-        <div className="section-heading">{name}</div>
         <table className="filter-table width-30">
           <tbody>
             {stats.map((stat, index) => {

public/app/features/dashboard/panel_editor/QueryOptions.tsx

@@ -293,7 +293,7 @@ export class QueryOptions extends PureComponent<Props, State> {
 
     return (
       <QueryOperationRow
-        title="Options"
+        title="Query options"
         headerElement={this.renderCollapsedText(styles)}
         isOpen={isOpen}
         onOpen={this.onOpenOptions}

public/app/features/dashboard/panel_editor/VizTypePicker.tsx

@@ -87,7 +87,12 @@ export const VizTypePicker: React.FC<Props> = ({ searchQuery, onTypeChange, curr
   return (
     <div className={styles.grid}>
       {hasResults ? (
-        renderList.map((plugin, index) => renderVizPlugin(plugin, index))
+        renderList.map((plugin, index) => {
+          if (plugin.state === PluginState.deprecated) {
+            return null;
+          }
+          return renderVizPlugin(plugin, index);
+        })
       ) : (
         <EmptySearchResult>Could not find anything matching your query</EmptySearchResult>
       )}
@@ -103,7 +108,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       max-width: 100%;
       display: grid;
       grid-gap: ${theme.spacing.md};
-      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+      grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
     `,
   };
 });

public/app/plugins/panel/alertlist/plugin.json

@@ -1,6 +1,6 @@
 {
   "type": "panel",
-  "name": "Alert List",
+  "name": "Alert list",
   "id": "alertlist",
 
   "skipDataQuery": true,

public/app/plugins/panel/annolist/plugin.json

@@ -1,6 +1,6 @@
 {
   "type": "panel",
-  "name": "Annotations list (alpha)",
+  "name": "Annotations list",
   "id": "annolist",
   "state": "alpha",
 

public/app/plugins/panel/bargauge/plugin.json

@@ -1,6 +1,6 @@
 {
   "type": "panel",
-  "name": "Bar Gauge",
+  "name": "Bar gauge",
   "id": "bargauge",
   "state": "beta",
 

public/app/plugins/panel/gauge/module.tsx

@@ -11,7 +11,7 @@ export const plugin = new PanelPlugin<GaugeOptions>(GaugePanel)
     builder
       .addBooleanSwitch({
         path: 'showThresholdLabels',
-        name: 'Show threshold Labels',
+        name: 'Show threshold labels',
         description: 'Render the threshold values around the gauge bar',
         defaultValue: false,
       })

public/app/plugins/panel/graph/tab_display.html

@@ -119,7 +119,7 @@
 </div>
 
 <div class="gf-form-group">
-  <h5 class="section-heading">Stacking & Null value</h5>
+  <h5 class="section-heading">Stacking and null value</h5>
   <gf-form-switch
     class="gf-form"
     label="Stack"

public/app/plugins/panel/graph2/plugin.json

@@ -1,6 +1,6 @@
 {
   "type": "panel",
-  "name": "React Graph",
+  "name": "React graph",
   "id": "graph2",
   "state": "alpha",
 

public/app/plugins/panel/homelinks/plugin.json

@@ -1,6 +1,6 @@
 {
   "type": "panel",
-  "name": "Home Links",
+  "name": "Home links",
   "id": "homelinks",
 
   "hideFromList": true,

public/app/plugins/panel/news/plugin.json

@@ -1,6 +1,6 @@
 {
   "type": "panel",
-  "name": "News Panel",
+  "name": "News",
   "id": "news",
 
   "skipDataQuery": true,

public/app/plugins/panel/piechart/plugin.json

@@ -1,6 +1,6 @@
 {
   "type": "panel",
-  "name": "PieChart v2",
+  "name": "Pie chart v2",
   "id": "piechart",
   "state": "alpha",
 

public/app/plugins/panel/stat/module.tsx

@@ -36,7 +36,7 @@ export const plugin = new PanelPlugin<StatPanelOptions>(StatPanel)
       })
       .addRadio({
         path: 'justifyMode',
-        name: 'Justify mode',
+        name: 'Alignment mode',
         description: 'Value & title posititioning',
         defaultValue: 'auto',
         settings: {

public/app/plugins/panel/stat/types.ts

@@ -31,7 +31,7 @@ export function addStandardDataReduceOptions(
   builder.addRadio({
     path: 'reduceOptions.values',
     name: 'Show',
-    description: 'Calculate a single value per colum or series or show each row',
+    description: 'Calculate a single value per column or series or show each row',
     settings: {
       options: [
         { value: false, label: 'Calculate' },