feat(*): Minor UI improvements (timeseries point size, plugin info to…

…oltip) (#194)

src/pages/ProfilesExplorerView/components/SceneLabelValuesTimeseries.tsx

@@ -143,6 +143,7 @@ export class SceneLabelValuesTimeseries extends SceneObjectBase<SceneLabelValues
           custom: {
             fillOpacity: series.length >= LabelsDataSource.MAX_TIMESERIES_LABEL_VALUES ? 0 : 9,
             gradientMode: series.length === 1 ? GraphGradientMode.None : GraphGradientMode.Opacity,
+            pointSize: 3,
           },
         },
         overrides: this.getOverrides(series),
@@ -171,6 +172,7 @@ export class SceneLabelValuesTimeseries extends SceneObjectBase<SceneLabelValues
           min: 0,
           custom: {
             fillOpacity: 0,
+            pointSize: 5,
           },
         },
         overrides: this.getOverrides(series),

src/pages/ProfilesExplorerView/components/SceneProfilesExplorer/SceneProfilesExplorer.tsx

@@ -21,7 +21,7 @@ import { IconButton, InlineLabel, useStyles2 } from '@grafana/ui';
 import { displayError, displaySuccess } from '@shared/domain/displayStatus';
 import { prepareHistoryEntry } from '@shared/domain/prepareHistoryEntry';
 import { reportInteraction } from '@shared/domain/reportInteraction';
-import { VersionInfoTooltip } from '@shared/ui/VersionInfoTooltip';
+import { PluginInfo } from '@shared/ui/PluginInfo';
 import { History } from 'history';
 import React, { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
@@ -469,7 +469,7 @@ export class SceneProfilesExplorer extends SceneObjectBase<SceneProfilesExplorer
                   onClick={actions.onClickShareLink}
                 />
 
-                <VersionInfoTooltip />
+                <PluginInfo />
               </div>
             </div>
           </div>

src/shared/ui/PageTitle.tsx

@@ -6,7 +6,7 @@ import { QueryAnalysisTooltip } from '@shared/components/QueryAnalysisTooltip/Qu
 import React, { memo, ReactNode } from 'react';
 import { Helmet } from 'react-helmet';
 
-import { VersionInfoTooltip } from './VersionInfoTooltip';
+import { PluginInfo } from './PluginInfo';
 
 type PageTitleProps = {
   title: ReactNode;
@@ -31,7 +31,7 @@ function PageTitleComponent({ title, queryAnalysis }: PageTitleProps) {
             </h1>
           </div>
           <div className={styles.infoArea}>
-            <VersionInfoTooltip />
+            <PluginInfo />
             {queryAnalysis ? <QueryAnalysisTooltip data={queryAnalysis} /> : null}
           </div>
         </Stack>

src/shared/ui/PluginInfo.tsx

@@ -0,0 +1,80 @@
+import { css } from '@emotion/css';
+import { GrafanaTheme2, usePluginContext } from '@grafana/data';
+import { config } from '@grafana/runtime';
+import { Dropdown, IconButton, Menu, useStyles2 } from '@grafana/ui';
+import React from 'react';
+
+import { GIT_COMMIT } from '../../version';
+
+const pluginCommitSha: string = GIT_COMMIT;
+const pluginCommitURL = `https://github.com/grafana/explore-profiles/commit/${pluginCommitSha}`;
+
+const { buildInfo: grafanaBuildInfo } = config;
+
+function InfoMenuHeader() {
+  const styles = useStyles2(getStyles);
+
+  const {
+    meta: {
+      info: { version, updated },
+    },
+  } = usePluginContext();
+
+  return (
+    <div className={styles.menuHeader}>
+      <h5>🔥 Explore profiles v{version}</h5>
+      <div className={styles.subTitle}>Last update: {updated}</div>
+    </div>
+  );
+}
+
+function InfoMenu() {
+  const isDev = pluginCommitSha === 'dev';
+  const shortCommitSha = isDev ? pluginCommitSha : pluginCommitSha.slice(0, 8);
+
+  return (
+    <Menu header={<InfoMenuHeader />}>
+      <Menu.Item
+        label={`Commit SHA: ${shortCommitSha}`}
+        icon="github"
+        onClick={() => window.open(pluginCommitURL)}
+        disabled={isDev}
+      />
+      <Menu.Item
+        label="Contribute"
+        icon="external-link-alt"
+        onClick={() => window.open('https://github.com/grafana/explore-profiles/blob/main/docs/CONTRIBUTING.md')}
+      />
+      <Menu.Item
+        label="Documentation"
+        icon="document-info"
+        onClick={() => window.open('https://grafana.com/docs/grafana/latest/explore/simplified-exploration/profiles')}
+      />
+      <Menu.Divider />
+      <Menu.Item
+        label={`Grafana ${grafanaBuildInfo.edition} v${grafanaBuildInfo.version} (${grafanaBuildInfo.env})`}
+        icon="github"
+        onClick={() => window.open(`https://github.com/grafana/grafana/commit/${grafanaBuildInfo.commit}`)}
+      />
+    </Menu>
+  );
+}
+
+export function PluginInfo() {
+  return (
+    <Dropdown overlay={() => <InfoMenu />} placement="bottom-end">
+      <IconButton name="info-circle" aria-label="Plugin info" title="Plugin info" />
+    </Dropdown>
+  );
+}
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  menuHeader: css`
+    padding: ${theme.spacing(0.5, 1)};
+    white-space: nowrap;
+  `,
+  subTitle: css`
+    color: ${theme.colors.text.secondary};
+    font-size: ${theme.typography.bodySmall.fontSize};
+  `,
+});