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

Rares/coming soon (#1272)

Browse source 
# What this PR does

Added Coming Soon label for `iOS`

- [x] `CHANGELOG.md` updated
This commit is contained in:
Rares Mardare 2023-02-02 14:55:22 +02:00 • committed by GitHub
parent bc0276fb22
commit 3f6e6168a8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 222 additions and 154 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Add [`django-dbconn-retry` library](https://github.com/jdelic/django-dbconn-retry) to `INSTALLED_APPS` to attempt
to alleviate occasional `django.db.utils.OperationalError` errors
- Improve alerts and alert group endpoint response time in internal API with caching ([1261](https://github.com/grafana/oncall/pull/1261))
- Added Coming Soon for iOS on Mobile App screen
### Changed

294
grafana-plugin/src/containers/MobileAppConnection/__snapshots__/MobileAppConnection.test.tsx.snap
View file

@ -37,24 +37,6 @@ exports[`MobileAppConnection if we disconnect the app, it disconnects and fetche
class="css-1j7sh2x-vertical-group"
style="width: 100%; height: 100%;"
>
<div
class="css-bxa289-layoutChildrenWrapper"
>
<div
class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
>
<img
alt="Apple"
class="icon"
src="[object Object]"
/>
<span
class="root text icon-text text--primary text--medium"
>
iOS
</span>
</div>
</div>
<div
class="css-bxa289-layoutChildrenWrapper"
>
@ -80,6 +62,30 @@ exports[`MobileAppConnection if we disconnect the app, it disconnects and fetche
</div>
</a>
</div>
<div
class="css-bxa289-layoutChildrenWrapper"
>
<div
class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
>
<img
alt="Apple"
class="icon"
src="[object Object]"
/>
<span
class="root text icon-text text--primary text--medium"
>
iOS
</span>
<span
class="root icon-tag"
style="background-color: rgb(41, 156, 70);"
>
Coming Soon
</span>
</div>
</div>
</div>
</div>
</div>
@ -2375,24 +2381,6 @@ exports[`MobileAppConnection it shows a QR code if the app isn't already connect
class="css-1j7sh2x-vertical-group"
style="width: 100%; height: 100%;"
>
<div
class="css-bxa289-layoutChildrenWrapper"
>
<div
class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
>
<img
alt="Apple"
class="icon"
src="[object Object]"
/>
<span
class="root text icon-text text--primary text--medium"
>
iOS
</span>
</div>
</div>
<div
class="css-bxa289-layoutChildrenWrapper"
>
@ -2418,6 +2406,30 @@ exports[`MobileAppConnection it shows a QR code if the app isn't already connect
</div>
</a>
</div>
<div
class="css-bxa289-layoutChildrenWrapper"
>
<div
class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
>
<img
alt="Apple"
class="icon"
src="[object Object]"
/>
<span
class="root text icon-text text--primary text--medium"
>
iOS
</span>
<span
class="root icon-tag"
style="background-color: rgb(41, 156, 70);"
>
Coming Soon
</span>
</div>
</div>
</div>
</div>
</div>
@ -2481,24 +2493,6 @@ exports[`MobileAppConnection it shows a loading message if it is currently disco
class="css-1j7sh2x-vertical-group"
style="width: 100%; height: 100%;"
>
<div
class="css-bxa289-layoutChildrenWrapper"
>
<div
class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
>
<img
alt="Apple"
class="icon"
src="[object Object]"
/>
<span
class="root text icon-text text--primary text--medium"
>
iOS
</span>
</div>
</div>
<div
class="css-bxa289-layoutChildrenWrapper"
>
@ -2524,6 +2518,30 @@ exports[`MobileAppConnection it shows a loading message if it is currently disco
</div>
</a>
</div>
<div
class="css-bxa289-layoutChildrenWrapper"
>
<div
class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
>
<img
alt="Apple"
class="icon"
src="[object Object]"
/>
<span
class="root text icon-text text--primary text--medium"
>
iOS
</span>
<span
class="root icon-tag"
style="background-color: rgb(41, 156, 70);"
>
Coming Soon
</span>
</div>
</div>
</div>
</div>
</div>
@ -2587,24 +2605,6 @@ exports[`MobileAppConnection it shows a loading message if it is currently fetch
class="css-1j7sh2x-vertical-group"
style="width: 100%; height: 100%;"
>
<div
class="css-bxa289-layoutChildrenWrapper"
>
<div
class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
>
<img
alt="Apple"
class="icon"
src="[object Object]"
/>
<span
class="root text icon-text text--primary text--medium"
>
iOS
</span>
</div>
</div>
<div
class="css-bxa289-layoutChildrenWrapper"
>
@ -2630,6 +2630,30 @@ exports[`MobileAppConnection it shows a loading message if it is currently fetch
</div>
</a>
</div>
<div
class="css-bxa289-layoutChildrenWrapper"
>
<div
class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
>
<img
alt="Apple"
class="icon"
src="[object Object]"
/>
<span
class="root text icon-text text--primary text--medium"
>
iOS
</span>
<span
class="root icon-tag"
style="background-color: rgb(41, 156, 70);"
>
Coming Soon
</span>
</div>
</div>
</div>
</div>
</div>
@ -2693,24 +2717,6 @@ exports[`MobileAppConnection it shows a message when the mobile app is already c
class="css-1j7sh2x-vertical-group"
style="width: 100%; height: 100%;"
>
<div
class="css-bxa289-layoutChildrenWrapper"
>
<div
class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
>
<img
alt="Apple"
class="icon"
src="[object Object]"
/>
<span
class="root text icon-text text--primary text--medium"
>
iOS
</span>
</div>
</div>
<div
class="css-bxa289-layoutChildrenWrapper"
>
@ -2736,6 +2742,30 @@ exports[`MobileAppConnection it shows a message when the mobile app is already c
</div>
</a>
</div>
<div
class="css-bxa289-layoutChildrenWrapper"
>
<div
class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
>
<img
alt="Apple"
class="icon"
src="[object Object]"
/>
<span
class="root text icon-text text--primary text--medium"
>
iOS
</span>
<span
class="root icon-tag"
style="background-color: rgb(41, 156, 70);"
>
Coming Soon
</span>
</div>
</div>
</div>
</div>
</div>
@ -2899,24 +2929,6 @@ exports[`MobileAppConnection it shows an error message if there was an error dis
class="css-1j7sh2x-vertical-group"
style="width: 100%; height: 100%;"
>
<div
class="css-bxa289-layoutChildrenWrapper"
>
<div
class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
>
<img
alt="Apple"
class="icon"
src="[object Object]"
/>
<span
class="root text icon-text text--primary text--medium"
>
iOS
</span>
</div>
</div>
<div
class="css-bxa289-layoutChildrenWrapper"
>
@ -2942,6 +2954,30 @@ exports[`MobileAppConnection it shows an error message if there was an error dis
</div>
</a>
</div>
<div
class="css-bxa289-layoutChildrenWrapper"
>
<div
class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
>
<img
alt="Apple"
class="icon"
src="[object Object]"
/>
<span
class="root text icon-text text--primary text--medium"
>
iOS
</span>
<span
class="root icon-tag"
style="background-color: rgb(41, 156, 70);"
>
Coming Soon
</span>
</div>
</div>
</div>
</div>
</div>
@ -2996,24 +3032,6 @@ exports[`MobileAppConnection it shows an error message if there was an error fet
class="css-1j7sh2x-vertical-group"
style="width: 100%; height: 100%;"
>
<div
class="css-bxa289-layoutChildrenWrapper"
>
<div
class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
>
<img
alt="Apple"
class="icon"
src="[object Object]"
/>
<span
class="root text icon-text text--primary text--medium"
>
iOS
</span>
</div>
</div>
<div
class="css-bxa289-layoutChildrenWrapper"
>
@ -3039,6 +3057,30 @@ exports[`MobileAppConnection it shows an error message if there was an error fet
</div>
</a>
</div>
<div
class="css-bxa289-layoutChildrenWrapper"
>
<div
class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
>
<img
alt="Apple"
class="icon"
src="[object Object]"
/>
<span
class="root text icon-text text--primary text--medium"
>
iOS
</span>
<span
class="root icon-tag"
style="background-color: rgb(41, 156, 70);"
>
Coming Soon
</span>
</div>
</div>
</div>
</div>
</div>

8
grafana-plugin/src/containers/MobileAppConnection/parts/DownloadIcons/DownloadIcons.module.scss
View file

@ -13,4 +13,12 @@
display: flex;
align-items: center;
min-height: 80px;
column-gap: 12px;
}
.icon-tag {
border-radius: 12px;
font-size: 12px;
padding: 2px 8px;
cursor: default;
}

42
grafana-plugin/src/containers/MobileAppConnection/parts/DownloadIcons/__snapshots__/DownloadIcons.test.tsx.snap
View file

@ -31,24 +31,6 @@ exports[`DownloadIcons it renders properly 1`] = `
class="css-1j7sh2x-vertical-group"
style="width: 100%; height: 100%;"
>
<div
class="css-bxa289-layoutChildrenWrapper"
>
<div
class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
>
<img
alt="Apple"
class="icon"
src="[object Object]"
/>
<span
class="root text icon-text text--primary text--medium"
>
iOS
</span>
</div>
</div>
<div
class="css-bxa289-layoutChildrenWrapper"
>
@ -74,6 +56,30 @@ exports[`DownloadIcons it renders properly 1`] = `
</div>
</a>
</div>
<div
class="css-bxa289-layoutChildrenWrapper"
>
<div
class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
>
<img
alt="Apple"
class="icon"
src="[object Object]"
/>
<span
class="root text icon-text text--primary text--medium"
>
iOS
</span>
<span
class="root icon-tag"
style="background-color: rgb(41, 156, 70);"
>
Coming Soon
</span>
</div>
</div>
</div>
</div>
</div>

17
grafana-plugin/src/containers/MobileAppConnection/parts/DownloadIcons/index.tsx
View file

@ -6,7 +6,9 @@ import cn from 'classnames/bind';
import AppleLogoSVG from 'assets/img/brand/apple-logo.svg';
import PlayStoreLogoSVG from 'assets/img/brand/play-store-logo.svg';
import Block from 'components/GBlock/Block';
import Tag from 'components/Tag/Tag';
import Text from 'components/Text/Text';
import { COLOR_PRIMARY } from 'utils/consts';
import styles from './DownloadIcons.module.scss';
@ -19,12 +21,6 @@ const DownloadIcons: FC = () => (
</Text>
<Text type="primary">The Grafana IRM app is available on both the App Store and Google Play Store.</Text>
<VerticalGroup>
<Block hover fullWidth withBackground bordered className={cx('icon-block')}>
<img src={AppleLogoSVG} alt="Apple" className={cx('icon')} />
<Text type="primary" className={cx('icon-text')}>
iOS
</Text>
</Block>
<a
style={{ width: '100%' }}
href="https://play.google.com/store/apps/details?id=com.grafana.oncall.prod"
@ -38,6 +34,15 @@ const DownloadIcons: FC = () => (
</Text>
</Block>
</a>
<Block hover fullWidth withBackground bordered className={cx('icon-block')}>
<img src={AppleLogoSVG} alt="Apple" className={cx('icon')} />
<Text type="primary" className={cx('icon-text')}>
iOS
</Text>
<Tag color={COLOR_PRIMARY} className={cx('icon-tag')}>
Coming Soon
</Tag>
</Block>
</VerticalGroup>
</VerticalGroup>
);

9
grafana-plugin/src/pages/incident/Incident.helpers.tsx
View file

@ -13,12 +13,13 @@ import { User } from 'models/user/user.types';
import SilenceDropdown from 'pages/incidents/parts/SilenceDropdown';
import { move } from 'state/helpers';
import { UserActions } from 'utils/authorization';
import { COLOR_DANGER, COLOR_PRIMARY, COLOR_SECONDARY, COLOR_WARNING } from 'utils/consts';
export function getIncidentStatusTag(alert: Alert) {
switch (alert.status) {
case IncidentStatus.New:
return (
<Tag color="#E02F44">
<Tag color={COLOR_DANGER}>
<Text strong size="small">
Firing
</Text>
@ -26,7 +27,7 @@ export function getIncidentStatusTag(alert: Alert) {
);
case IncidentStatus.Acknowledged:
return (
<Tag color="#C69B06">
<Tag color={COLOR_WARNING}>
<Text strong size="small">
Acknowledged
</Text>
@ -34,7 +35,7 @@ export function getIncidentStatusTag(alert: Alert) {
);
case IncidentStatus.Resolved:
return (
<Tag color="#299C46">
<Tag color={COLOR_PRIMARY}>
<Text strong size="small">
Resolved
</Text>
@ -42,7 +43,7 @@ export function getIncidentStatusTag(alert: Alert) {
);
case IncidentStatus.Silenced:
return (
<Tag color="#464C54">
<Tag color={COLOR_SECONDARY}>
<Text strong size="small">
Silenced
</Text>

5
grafana-plugin/src/utils/consts.ts
View file

@ -30,3 +30,8 @@ export const FARO_ENDPOINT_PROD =
export const DOCS_SLACK_SETUP = 'https://grafana.com/docs/grafana-cloud/oncall/open-source/#slack-setup';
export const DOCS_TELEGRAM_SETUP = 'https://grafana.com/docs/grafana-cloud/oncall/chat-options/configure-telegram/';
export const COLOR_DANGER = '#E02F44';
export const COLOR_WARNING = '#C69B06';
export const COLOR_PRIMARY = '#299C46';
export const COLOR_SECONDARY = '#464C54';