diff --git a/grafana-plugin/src/GrafanaPluginRootPage.tsx b/grafana-plugin/src/GrafanaPluginRootPage.tsx index e258d30e..1115e2e5 100644 --- a/grafana-plugin/src/GrafanaPluginRootPage.tsx +++ b/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'; diff --git a/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.tsx b/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.tsx index ac749fa5..c23f16a8 100644 --- a/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.tsx +++ b/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) => { diff --git a/grafana-plugin/src/components/NavBar/NavBarSubtitle.module.css b/grafana-plugin/src/components/NavBar/NavBarSubtitle.module.css new file mode 100644 index 00000000..360f2acc --- /dev/null +++ b/grafana-plugin/src/components/NavBar/NavBarSubtitle.module.css @@ -0,0 +1,20 @@ +:root { + --orange: #F5B73D; +} + +.navbar-container { + display: flex; + align-items: center; +} + +.navbar-star-icon { + fill: var(--orange); +} + +.navbar-heading { + padding: 4px; + margin-left: 8px; + border: 1px solid var(--gray-9); + width: initial; + font-size: 12px; +} diff --git a/grafana-plugin/src/components/NavBar/NavBarSubtitle.tsx b/grafana-plugin/src/components/NavBar/NavBarSubtitle.tsx new file mode 100644 index 00000000..8edf9c3d --- /dev/null +++ b/grafana-plugin/src/components/NavBar/NavBarSubtitle.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import cn from 'classnames/bind'; + +import { Card, Icon } from '@grafana/ui'; + +import { APP_SUBTITLE } from 'utils/consts'; + +import styles from './NavBarSubtitle.module.css'; + +const cx = cn.bind(styles); + +function NavBarSubtitle() { + return ( +
+ {APP_SUBTITLE} + + + Star us on GitHub + + +
+ ); +} + +export default NavBarSubtitle; diff --git a/grafana-plugin/src/img/grafanaGlobalStyles.css b/grafana-plugin/src/img/grafanaGlobalStyles.css index 4da2ec43..8eab37df 100644 --- a/grafana-plugin/src/img/grafanaGlobalStyles.css +++ b/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 */ +} \ No newline at end of file diff --git a/grafana-plugin/src/index.css b/grafana-plugin/src/style/index.css similarity index 100% rename from grafana-plugin/src/index.css rename to grafana-plugin/src/style/index.css diff --git a/grafana-plugin/src/vars.css b/grafana-plugin/src/style/vars.css similarity index 100% rename from grafana-plugin/src/vars.css rename to grafana-plugin/src/style/vars.css diff --git a/grafana-plugin/src/utils/hooks.ts b/grafana-plugin/src/utils/hooks.tsx similarity index 92% rename from grafana-plugin/src/utils/hooks.ts rename to grafana-plugin/src/utils/hooks.tsx index b26ff31e..1757dc2a 100644 --- a/grafana-plugin/src/utils/hooks.ts +++ b/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']; @@ -54,7 +55,7 @@ export function useNavModel({ meta, pages, path, page, grafanaUser, enableLiveSe const node = { text: APP_TITLE, img: meta.info.logos.large, - subTitle: APP_SUBTITLE, + subTitle: , url: path, children: tabs, };