Merge pull request #386 from grafana/181-add-github-star

1322 - add GitHub star on the navigation bar

grafana-plugin/src/GrafanaPluginRootPage.tsx

@@ -14,8 +14,8 @@ import { rootStore } from 'state';
 import { useStore } from 'state/useStore';
 import { useNavModel } from 'utils/hooks';
 
-import './vars.css';
-import './index.css';
+import './style/vars.css';
+import './style/index.css';
 
 import { AppFeature } from './state/features';
 
@@ -91,6 +91,7 @@ export const Root = observer((props: AppRootProps) => {
   const pathWithoutLeadingSlash = path.replace(/^\//, '');
 
   const store = useStore();
+  const { backendLicense } = store;
 
   useEffect(() => {
     store.updateBasicData();
@@ -120,11 +121,13 @@ export const Root = observer((props: AppRootProps) => {
         grafanaUser: window.grafanaBootData.user,
         enableLiveSettings: store.hasFeature(AppFeature.LiveSettings),
         enableCloudPage: store.hasFeature(AppFeature.CloudConnection),
+        backendLicense,
       }),
       [meta, pathWithoutLeadingSlash, page, store.features]
     )
   );
   useEffect(() => {
+    /* @ts-ignore */
     onNavChanged(navModel);
   }, [navModel, onNavChanged]);
 

grafana-plugin/src/assets/img/github_star.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#F5B73D">
+  <path d="M8 .2l4.9 15.2L0 6h16L3.1 15.4z"/>
+</svg> 

grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.tsx

@@ -111,15 +111,6 @@ const AlertTemplatesForm = (props: AlertTemplatesFormProps) => {
     return groups;
   }, [filteredTemplatesToRender]);
 
-  const handleChangeActiveTemplate = useCallback(
-    (templateName) => {
-      const template = groups[activeGroup].find((template: Template) => template.name === templateName);
-
-      setActiveTemplate(template);
-    },
-    [groups, activeGroup]
-  );
-
   const getGroupByTemplateName = (templateName: string) => {
     Object.values(groups).find((group) => {
       const foundTemplate = group.find((obj: any) => {

grafana-plugin/src/components/NavBar/NavBarSubtitle.module.css

@@ -0,0 +1,21 @@
+.root {
+  display: flex;
+  align-items: center;
+}
+
+.navbar-star-icon {
+  margin-right: 4px;
+}
+
+.navbar-heading {
+  padding: 4px;
+  margin: 0 0 0 8px;
+  border: 1px solid var(--gray-9);
+  width: initial;
+  font-size: 12px;
+}
+
+.navbar-link {
+  display: flex;
+  align-items: center;
+}

grafana-plugin/src/components/NavBar/NavBarSubtitle.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { Card } from '@grafana/ui';
+import cn from 'classnames/bind';
+
+import gitHubStarSVG from 'assets/img/github_star.svg';
+import { APP_SUBTITLE, GRAFANA_LICENSE_OSS } from 'utils/consts';
+
+import styles from './NavBarSubtitle.module.css';
+
+const cx = cn.bind(styles);
+
+function NavBarSubtitle({ backendLicense }: { backendLicense: string }) {
+  if (backendLicense === GRAFANA_LICENSE_OSS) {
+    return (
+      <div className={cx('root')}>
+        {APP_SUBTITLE}
+        <Card heading={undefined} className={cx('navbar-heading')}>
+          <a href="https://github.com/grafana/oncall" className={cx('navbar-link')} target="_blank" rel="noreferrer">
+            <img src={gitHubStarSVG} className={cx('navbar-star-icon')} alt="" /> Star us on GitHub
+          </a>
+        </Card>
+      </div>
+    );
+  }
+
+  return <>{APP_SUBTITLE}</>;
+}
+
+export default NavBarSubtitle;

grafana-plugin/src/containers/DefaultPageLayout/DefaultPageLayout.tsx

@@ -3,13 +3,14 @@ import React, { FC, useEffect, useState, useCallback } from 'react';
 
 import { AppRootProps } from '@grafana/data';
 import { getLocationSrv } from '@grafana/runtime';
-import { Alert, Button } from '@grafana/ui';
+import { Alert } from '@grafana/ui';
 import cn from 'classnames/bind';
 import { observer } from 'mobx-react';
 
 import PluginLink from 'components/PluginLink/PluginLink';
 import { useStore } from 'state/useStore';
 import { UserAction } from 'state/userAction';
+import { GRAFANA_LICENSE_OSS } from 'utils/consts';
 import { useForceUpdate } from 'utils/hooks';
 import { getItem, setItem } from 'utils/localStorage';
 import sanitize from 'utils/sanitize';
@@ -89,7 +90,7 @@ const DefaultPageLayout: FC<DefaultPageLayoutProps> = observer((props) => {
             />
           </Alert>
         )}
-        {store.backendLicense === 'OpenSource' &&
+        {store.backendLicense === GRAFANA_LICENSE_OSS &&
           store.backendVersion &&
           plugin?.version &&
           store.backendVersion !== plugin?.version && (

grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.tsx

@@ -25,7 +25,7 @@ import WithConfirm from 'components/WithConfirm/WithConfirm';
 import logo from 'img/logo.svg';
 import { makeRequest } from 'network';
 import { createGrafanaToken, getPluginSyncStatus, startPluginSync, updateGrafanaToken } from 'state/plugin';
-import { openNotification } from 'utils';
+import { GRAFANA_LICENSE_OSS } from 'utils/consts';
 import { getItem, setItem } from 'utils/localStorage';
 
 import styles from './PluginConfigPage.module.css';
@@ -152,7 +152,7 @@ export const PluginConfigPage = (props: Props) => {
       setPluginStatusMessage(
         `Connected to OnCall${versionInfo}\n - OnCall URL: ${plugin.meta.jsonData.onCallApiUrl}\n - Grafana URL: ${plugin.meta.jsonData.grafanaUrl}`
       );
-      setIsSelfHostedInstall(plugin.meta.jsonData?.license === 'OpenSource');
+      setIsSelfHostedInstall(plugin.meta.jsonData?.license === GRAFANA_LICENSE_OSS);
       setPluginStatusOk(true);
     } else {
       setPluginStatusMessage(

grafana-plugin/src/img/grafanaGlobalStyles.css

@@ -33,3 +33,7 @@
     white-space: nowrap;
   }
 }
+
+.page-header__info-block {
+  flex-grow: 1; /* Stretch the navigation subtitle panel */
+}

grafana-plugin/src/utils/consts.ts

@@ -3,5 +3,7 @@ import plugin from '../../package.json'; // eslint-disable-line
 export const APP_TITLE = 'Grafana OnCall';
 export const APP_SUBTITLE = `Developer-friendly incident response (${plugin?.version})`;
 
+export const GRAFANA_LICENSE_OSS = 'OpenSource';
+
 // Reusable breakpoint sizes
 export const BREAKPOINT_TABS = 1024;

grafana-plugin/src/utils/hooks.tsx

@@ -1,11 +1,12 @@
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useMemo } from 'react';
 
 import { AppRootProps, NavModelItem } from '@grafana/data';
 
+import NavBarSubtitle from 'components/NavBar/NavBarSubtitle';
 import { PageDefinition } from 'pages';
 
-import { APP_TITLE, APP_SUBTITLE } from './consts';
+import { APP_TITLE } from './consts';
 
 type Args = {
   meta: AppRootProps['meta'];
@@ -17,6 +18,7 @@ type Args = {
   };
   enableLiveSettings: boolean;
   enableCloudPage: boolean;
+  backendLicense: string;
 };
 
 export function useForceUpdate() {
@@ -24,7 +26,16 @@ export function useForceUpdate() {
   return () => setValue((value) => value + 1);
 }
 
-export function useNavModel({ meta, pages, path, page, grafanaUser, enableLiveSettings, enableCloudPage }: Args) {
+export function useNavModel({
+  meta,
+  pages,
+  path,
+  page,
+  grafanaUser,
+  enableLiveSettings,
+  enableCloudPage,
+  backendLicense,
+}: Args) {
   return useMemo(() => {
     const tabs: NavModelItem[] = [];
 
@@ -54,7 +65,7 @@ export function useNavModel({ meta, pages, path, page, grafanaUser, enableLiveSe
     const node = {
       text: APP_TITLE,
       img: meta.info.logos.large,
-      subTitle: APP_SUBTITLE,
+      subTitle: <NavBarSubtitle backendLicense={backendLicense} />,
       url: path,
       children: tabs,
     };