diff --git a/grafana-plugin/src/components/HamburgerMenu/HamburgerMenu.module.scss b/grafana-plugin/src/components/HamburgerMenu/HamburgerMenu.module.scss index f6a05cdc..a9fbc840 100644 --- a/grafana-plugin/src/components/HamburgerMenu/HamburgerMenu.module.scss +++ b/grafana-plugin/src/components/HamburgerMenu/HamburgerMenu.module.scss @@ -1,34 +1,30 @@ .hamburgerMenu { cursor: pointer; color: var(--primary-text-color); + border: var(--border-weak); + border-radius: var(--border-radius); + background-color: var(--button-background); + display: inline-flex; + flex-direction: column; + align-items: center; + vertical-align: middle; + justify-content: center; + padding: 4px; + + &:hover { + background-color: var(--button-hover-background); + } &--withBackground { - display: inline-flex; - flex-direction: column; - align-items: center; - vertical-align: middle; - justify-content: center; - background-color: var(--button-background); - border: 1px solid transparent; height: 32px; width: 30px; - padding: 4px; cursor: pointer; color: var(--primary-text-color); } &--small { - display: inline-flex; - flex-direction: column; - align-items: center; - vertical-align: middle; - justify-content: center; - background-color: var(--button-background); - color: var(--primary-text-color); - border: 1px solid transparent; height: 24px; width: 22px; - padding: 4px; cursor: pointer; color: var(--primary-text-color); } diff --git a/grafana-plugin/src/components/HamburgerMenu/HamburgerMenu.tsx b/grafana-plugin/src/components/HamburgerMenu/HamburgerMenu.tsx index 02937ad6..9e6dc0df 100644 --- a/grafana-plugin/src/components/HamburgerMenu/HamburgerMenu.tsx +++ b/grafana-plugin/src/components/HamburgerMenu/HamburgerMenu.tsx @@ -22,7 +22,7 @@ const HamburgerMenu: React.FC = (props) => { return (
{ if (stopPropagation) { e.stopPropagation(); diff --git a/grafana-plugin/src/containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.tsx b/grafana-plugin/src/containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.tsx index f249bccf..9062d98b 100644 --- a/grafana-plugin/src/containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.tsx +++ b/grafana-plugin/src/containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; -import { ConfirmModal, HorizontalGroup, Icon } from '@grafana/ui'; +import { ConfirmModal, HorizontalGroup, Icon, IconName } from '@grafana/ui'; import cn from 'classnames/bind'; import { observer } from 'mobx-react'; @@ -44,7 +44,9 @@ const CollapsedIntegrationRouteDisplay: React.FC channel + ); return ( <> @@ -105,14 +107,17 @@ const CollapsedIntegrationRouteDisplay: React.FC Publish to ChatOps - {chatOpsAvailableChannels - .filter((it) => it) - .map((chatOpsChannel) => ( - <> + {chatOpsAvailableChannels.map( + (chatOpsChannel: { name: string; icon: IconName }, chatOpsIndex) => ( +
{chatOpsChannel.name} - - ))} +
+ ) + )}
)} diff --git a/grafana-plugin/src/pages/integration/Integration.helper.ts b/grafana-plugin/src/pages/integration/Integration.helper.ts index 9bc61266..7fb9688b 100644 --- a/grafana-plugin/src/pages/integration/Integration.helper.ts +++ b/grafana-plugin/src/pages/integration/Integration.helper.ts @@ -54,6 +54,11 @@ const IntegrationHelper = { return totalDiffString; }, + fetchChatOps(_store: RootStore): Promise { + // in oncall-private this fetches MSTeams data + return Promise.resolve(); + }, + hasChatopsInstalled(store: RootStore) { const hasSlack = Boolean(store.teamStore.currentTeam?.slack_team_identity); const hasTelegram = diff --git a/grafana-plugin/src/pages/integration/Integration.tsx b/grafana-plugin/src/pages/integration/Integration.tsx index 5cfb41c1..7a71337e 100644 --- a/grafana-plugin/src/pages/integration/Integration.tsx +++ b/grafana-plugin/src/pages/integration/Integration.tsx @@ -119,6 +119,7 @@ class Integration extends React.Component { } = this.props; const { + store, store: { alertReceiveChannelStore }, } = this.props; @@ -126,7 +127,11 @@ class Integration extends React.Component { this.openEditTemplateModal(query.template, query.routeId && query.routeId); } - await Promise.all([this.loadIntegration(), alertReceiveChannelStore.updateTemplates(id)]); + await Promise.all([ + this.loadIntegration(), + IntegrationHelper.fetchChatOps(store), + alertReceiveChannelStore.updateTemplates(id), + ]); } render() { diff --git a/grafana-plugin/src/style/vars.css b/grafana-plugin/src/style/vars.css index dad58ac6..daffb8d1 100644 --- a/grafana-plugin/src/style/vars.css +++ b/grafana-plugin/src/style/vars.css @@ -64,7 +64,8 @@ --shadows-z3: 0 13px 20px 1px rgba(24, 26, 27, 0.18); --tag-text-success: rgb(50, 96, 43); --tag-border-success: rgb(148, 203, 140); - --button-background: rgba(36, 41, 46, 0.16); + --button-background: rgba(36, 41, 46, 0.08); + --button-hover-background: rgba(36, 41, 46, 0.15); --box-background: rgba(244, 245, 245); } @@ -99,6 +100,7 @@ --shadows-z3: 0 8px 24px rgb(1, 4, 9); --tag-text-success: rgb(165, 214, 159); --tag-border-success: rgb(49, 100, 43); - --button-background: rgba(204, 204, 220, 0.16); + --button-background: rgba(204, 204, 220, 0.1); + --button-hover-background: rgba(204, 204, 220, 0.14); --box-background: rgba(10, 10, 10, 0.4); }