Add version mismatch warning (#241)

* add version mismatch warning

* add link to update docs

engine/apps/api/serializers/organization.py

@@ -3,6 +3,7 @@ from datetime import timedelta
 import humanize
 import pytz
 from django.apps import apps
+from django.conf import settings
 from django.utils import timezone
 from rest_framework import fields, serializers
 
@@ -109,7 +110,25 @@ class CurrentOrganizationSerializer(OrganizationSerializer):
 
     def get_limits(self, obj):
         user = self.context["request"].user
-        return obj.notifications_limit_web_report(user)
+        if not settings.OSS_INSTALLATION:
+            return obj.notifications_limit_web_report(user)
+
+        # show a version warning on OSS installations in case backend and frontend are different versions
+        frontend_version = self.context["request"].headers.get("X-OnCall-Plugin-Version")
+        backend_version = settings.VERSION
+        version_warning = {}
+        if backend_version and frontend_version and backend_version != frontend_version:
+            text = (
+                "Version mismatch! Please make sure you have the same versions of the Grafana OnCall plugin "
+                "and Grafana OnCall engine, "
+                "otherwise there could be issues with your Grafana OnCall installation! "
+                f"Current plugin version: {frontend_version}, current engine version: {backend_version}. "
+                "Please see the update instructions: "
+                "https://grafana.com/docs/oncall/latest/open-source/#update-grafana-oncall-oss"
+            )
+            version_warning = {"period_title": "Version mismatch", "show_limits_warning": True, "warning_text": text}
+
+        return version_warning or obj.notifications_limit_web_report(user)
 
     def get_env_status(self, obj):
         LiveSetting.populate_settings_if_needed()

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

@@ -1,3 +1,4 @@
+import plugin from '../../../package.json'; // eslint-disable-line
 import React, { FC, useEffect, useState, useCallback } from 'react';
 
 import { AppRootProps } from '@grafana/data';
@@ -88,14 +89,30 @@ const DefaultPageLayout: FC<DefaultPageLayoutProps> = observer((props) => {
             />
           </Alert>
         )}
-        {currentTeam?.limits.show_limits_warning && !getItem(currentTeam.limits.warning_text) && (
-          <Alert
-            className={styles.alert}
-            severity="warning"
-            title={currentTeam?.limits.warning_text}
-            onRemove={getRemoveAlertHandler(currentTeam?.limits.warning_text)}
-          />
+        {store.backendVersion && plugin?.version && store.backendVersion !== plugin?.version && (
+          <Alert className={styles.alert} severity="warning" title={'Version mismatch!'}>
+            Please make sure you have the same versions of the Grafana OnCall plugin and the Grafana OnCall engine,
+            otherwise there could be issues with your Grafana OnCall installation!
+            <br />
+            {`Current plugin version: ${plugin.version}, current engine version: ${store.backendVersion}`}
+            <br />
+            Please see{' '}
+            <a href={'https://grafana.com/docs/oncall/latest/open-source/#update-grafana-oncall-oss'}>
+              the update instructions
+            </a>
+            .
+          </Alert>
         )}
+        {currentTeam?.limits.show_limits_warning &&
+          currentTeam?.limits.period_title !== 'Version mismatch' && // don't show version mismatch warning twice
+          !getItem(currentTeam.limits.warning_text) && (
+            <Alert
+              className={styles.alert}
+              severity="warning"
+              title={currentTeam?.limits.warning_text}
+              onRemove={getRemoveAlertHandler(currentTeam?.limits.warning_text)}
+            />
+          )}
         {Boolean(
           currentTeam &&
             currentUser &&

grafana-plugin/src/state/rootBaseStore.ts

@@ -38,6 +38,9 @@ export class RootBaseStore {
   @observable
   appLoading = true;
 
+  @observable
+  backendVersion = '';
+
   @observable
   pluginIsInitialized = true;
 
@@ -134,6 +137,7 @@ export class RootBaseStore {
       this.initializationError = 'OnCall was not able to connect back to this Grafana';
       return;
     }
+    this.backendVersion = get_sync_response.version;
     this.appLoading = false;
   }