Show version in UI (for admin users).

Closes #73 and #158.

ui/src/components/Menu.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 
-import { Menu, MenuProps } from "antd";
+import { Menu, MenuProps, Typography } from "antd";
 import {
   CloudOutlined,
   HomeOutlined,
@@ -20,13 +20,18 @@ import {
   ListTenantsResponse,
 } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
 
+import { GetVersionResponse } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
+
 import Autocomplete, { OptionCallbackFunc, OptionsCallbackFunc } from "../components/Autocomplete";
+import Admin from "../components/Admin";
 import TenantStore from "../stores/TenantStore";
 import SessionStore from "../stores/SessionStore";
+import InternalStore from "../stores/InternalStore";
 
 function SideMenu() {
   const [tenantId, setTenantId] = useState<string>("");
   const [selectedKey, setSelectedKey] = useState<string>("");
+  const [version, setVersion] = useState<string>("");
 
   const location = useLocation();
   const navigate = useNavigate();
@@ -136,6 +141,12 @@ function SideMenu() {
     setTenant();
     parseLocation();
 
+    if (SessionStore.isAdmin()) {
+      InternalStore.getVersion((resp: GetVersionResponse) => {
+        setVersion(resp.getVersion());
+      });
+    }
+
     return () => {
       SessionStore.removeListener("tenant.change", setTenant);
     };
@@ -244,7 +255,7 @@ function SideMenu() {
     <div>
       <Autocomplete
         placeholder="Select tenant"
-        className="organiation-select"
+        className="tenant-select"
         getOption={getTenantOption}
         getOptions={getTenantOptions}
         onSelect={onTenantSelect}
@@ -257,6 +268,11 @@ function SideMenu() {
         expandIcon={<div></div>}
         items={items}
       />
+      <Admin>
+        <Typography.Text type="secondary" className="version">
+          Version: v{version}
+        </Typography.Text>
+      </Admin>
     </div>
   );
 }

ui/src/index.css

@@ -36,12 +36,18 @@
   left: 0;
 }
 
-.layout-menu .organiation-select {
+.layout-menu .tenant-select {
   margin-left: 24px;
   margin-bottom: 12px;
   width: 252px;
 }
 
+.layout-menu .version {
+  display: block;
+  margin-left: 24px;
+  margin-top: 12px;
+}
+
 .layout-content {
   margin-top: 65px;
 }

ui/src/stores/InternalStore.ts

@@ -24,6 +24,7 @@ import {
   ListRegionsResponse,
   GetRegionRequest,
   GetRegionResponse,
+  GetVersionResponse,
 } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
 
 import SessionStore from "./SessionStore";
@@ -224,6 +225,17 @@ class InternalStore extends EventEmitter {
       callbackFunc(resp);
     });
   };
+
+  getVersion = (callbackFunc: (resp: GetVersionResponse) => void) => {
+    this.client.getVersion(new google_protobuf_empty_pb.Empty(), SessionStore.getMetadata(), (err, resp) => {
+      if (err !== null) {
+        HandleError(err);
+        return;
+      }
+
+      callbackFunc(resp);
+    });
+  };
 }
 
 const internalStore = new InternalStore();