centralcloud/oncall-engine
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Unifiy logo with IRM (#3552)

Browse source 
# What this PR does

https://github.com/grafana/oncall/issues/1905
This commit is contained in:
Rares Mardare 2023-12-12 13:16:07 +02:00 • committed by GitHub
parent c1b82e3418
commit 2c67df8663
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 45 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
grafana-plugin/e2e-tests/integrations/heartbeat.test.ts
View file

@ -7,6 +7,7 @@ const HEARTBEAT_SETTINGS_FORM_TEST_ID = 'heartbeat-settings-form';
test.describe("updating an integration's heartbeat interval works", async () => {
const _openHeartbeatSettingsForm = async (page: Page) => {
await page.getByTestId('integration-settings-context-menu-wrapper').getByRole('img').click();
await page.waitForTimeout(1000);
await page.getByTestId('integration-heartbeat-settings').click();
};
@ -29,6 +30,8 @@ test.describe("updating an integration's heartbeat interval works", async () =>
await heartbeatSettingsForm.getByTestId('update-heartbeat').click();
await page.waitForTimeout(1000);
await _openHeartbeatSettingsForm(page);
const heartbeatIntervalValue = await heartbeatSettingsForm

7
grafana-plugin/e2e-tests/utils/schedule.ts
View file

@ -20,13 +20,6 @@ export const createOnCallSchedule = async (page: Page, scheduleName: string, use
await clickButton({ page, buttonText: 'Add rotation' });
/**
* Drag the modal such that the "Create" button will always be visible within the viewport. We cannot scroll
* on the modal itself
* https://playwright.dev/docs/input#dragging-manually
*/
await page.locator('.ReactModal__Content .drag-handler').dragTo(page.locator('.page-header__logo'));
await selectDropdownValue({
page,
selectType: 'grafanaSelect',

2
grafana-plugin/package.json
View file

@ -122,7 +122,7 @@
"@grafana/data": "^9.2.4",
"@grafana/faro-web-sdk": "^1.0.0-beta4",
"@grafana/faro-web-tracing": "^1.0.0-beta4",
"@grafana/labels": "~1.4.2",
"@grafana/labels": "~1.4.4",
"@grafana/runtime": "9.3.0-beta1",
"@grafana/ui": "^10.2.0",
"@lifeomic/attempt": "^3.0.3",

8
grafana-plugin/src/PluginPage.tsx
View file

@ -3,8 +3,10 @@ import React from 'react';
import { PluginPageProps, PluginPage as RealPluginPage } from '@grafana/runtime';
import Header from 'navbar/Header/Header';
import RenderConditionally from 'components/RenderConditionally/RenderConditionally';
import { pages } from 'pages';
import { isTopNavbar } from 'plugin/GrafanaPluginRootPage.helpers';
import { DEFAULT_PAGE } from 'utils/consts';
interface AppPluginPageProps extends PluginPageProps {
page?: string;
@ -14,10 +16,14 @@ export const PluginPage = (isTopNavbar() ? RealPlugin : PluginPageFallback) as R
function RealPlugin(props: AppPluginPageProps): React.ReactNode {
const { page } = props;
const isDefaultPage = page === DEFAULT_PAGE;
return (
<RealPluginPage {...props}>
<Header />
<RenderConditionally shouldRender={isDefaultPage}>
<Header />
</RenderConditionally>
{pages[page]?.text && !pages[page]?.hideTitle && (
<h3 className="page-title" data-testid="page-title">
{pages[page].text}

8
grafana-plugin/src/containers/ColumnsSelectorWrapper/ColumnsModal.tsx
View file

@ -12,8 +12,10 @@ import {
VerticalGroup,
useStyles2,
} from '@grafana/ui';
import cn from 'classnames/bind';
import { observer } from 'mobx-react';
import styles from 'assets/style/utils.css';
import Block from 'components/GBlock/Block';
import Text from 'components/Text/Text';
import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
@ -28,6 +30,8 @@ import { useDebouncedCallback } from 'utils/hooks';
import { getColumnsSelectorWrapperStyles } from './ColumnsSelectorWrapper.styles';
const cx = cn.bind(styles);
interface ColumnsModalProps {
isModalOpen: boolean;
labelKeys: Array<ApiSchemas['LabelKey']>;
@ -108,7 +112,7 @@ export const ColumnsModal: React.FC<ColumnsModalProps> = observer(
{!result.isCollapsed && (
<Block bordered withBackground fullWidth className={styles.valuesBlock}>
{result.values === undefined ? (
<LoadingPlaceholder text="Loading..." className="loadingPlaceholder" />
<LoadingPlaceholder text="Loading..." className={cx('loadingPlaceholder')} />
) : (
renderLabelValues(result.name, result.values)
)}
@ -135,7 +139,7 @@ export const ColumnsModal: React.FC<ColumnsModalProps> = observer(
variant="primary"
onClick={onAddNewColumns}
>
{isLoading ? <LoadingPlaceholder className={'loader'} text="Loading..." /> : 'Add'}
{isLoading ? <LoadingPlaceholder className={cx('loadingPlaceholder')} text="Loading..." /> : 'Add'}
</Button>
</WithPermissionControlTooltip>
</HorizontalGroup>

19
grafana-plugin/src/navbar/Header/Header.module.scss
View file

@ -4,7 +4,8 @@
.header-topnavbar {
padding-top: 0;
padding-bottom: 36px;
padding-bottom: 0;
margin-bottom: 32px;
}
.navbar-heading {
@ -25,6 +26,7 @@
.navbar-left {
display: flex;
flex-basis: 100%;
align-items: flex-start;
}
.navbar-heading-container {
@ -34,6 +36,7 @@
flex-direction: row;
column-gap: 8px;
row-gap: 8px;
margin-left: -50px;
}
.irm-icon {
@ -44,7 +47,6 @@
}
.banners {
padding-top: 12px;
margin-bottom: 24px;
&:empty {
@ -52,3 +54,16 @@
margin-bottom: 0;
}
}
.logo-container,
.page-header__img {
height: 32px;
}
.logo-container {
margin-top: 2px;
}
.page-header__title {
margin-bottom: 8px;
}

5
grafana-plugin/src/navbar/Header/Header.tsx
View file

@ -23,8 +23,8 @@ const Header = observer(() => {
<div className={cx('root')}>
<div className={cx('page-header__inner', { 'header-topnavbar': isTopNavbar() })}>
<div className={cx('navbar-left')}>
<span className="page-header__logo">
<img className="page-header__img" src={logo} alt="Grafana OnCall" />
<span className={cx('page-header__logo', 'logo-container')}>
<img className={cx('page-header__img')} src={logo} alt="Grafana OnCall" />
</span>
<div className="page-header__info-block">{renderHeading()}</div>
</div>
@ -41,6 +41,7 @@ const Header = observer(() => {
<h1 className={cx('page-header__title')}>Grafana OnCall</h1>
<div className={cx('navbar-heading-container')}>
<div className={cx('page-header__sub-title')}>{APP_SUBTITLE}</div>
<Card heading={undefined} className={cx('navbar-heading')}>
<a
href="https://github.com/grafana/oncall"

4
grafana-plugin/src/pages/integrations/Integrations.module.scss
View file

@ -7,6 +7,10 @@
width: 40px;
}
.title {
margin-bottom: 16px;
}
.tabsBar {
margin-bottom: 24px;
}

8
grafana-plugin/yarn.lock
View file

@ -2027,10 +2027,10 @@
"@opentelemetry/sdk-trace-web" "^1.8.0"
"@opentelemetry/semantic-conventions" "^1.8.0"
"@grafana/labels@~1.4.2":
version "1.4.2"
resolved "https://registry.yarnpkg.com/@grafana/labels/-/labels-1.4.2.tgz#3ce4fb4e06c86793df85622de9fd47793261a849"
integrity sha512-4d/+SnLxxBGCYGZI/BAtF1s6M/K5cxFmOEDmUORBs5sXTiUXHsvNXbsh1ACfcH/wCUlbypYY6FQULSAWs6pOeQ==
"@grafana/labels@~1.4.4":
version "1.4.4"
resolved "https://registry.yarnpkg.com/@grafana/labels/-/labels-1.4.4.tgz#f8fc6e99fa42f416c9b8def73929545c78f372e2"
integrity sha512-QJqBATeKHrUNTETnqTKFVeevjP/Z4N1m7gbzhZ6hOMs7vPt75csWZ7pMjURNU/UXmP5uoEADJnj9rw8kvrAtHQ==
dependencies:
"@emotion/css" "^11.11.2"
"@grafana/ui" "^10.0.0"