Notification when an update is available

src/components/sidenav/Sidenav.jsx

@@ -6,7 +6,7 @@ import { useSelector } from "react-redux";
 import store from "../../store"
 import { set } from "automate-redux"
 import { DownOutlined, InfoCircleOutlined } from '@ant-design/icons';
-import { Collapse, Divider, Typography, Space } from "antd";
+import { Collapse, Divider, Typography, Space, Button, Popover } from "antd";
 import { capitalizeFirstCharacter } from '../../utils';
 import { getEnv } from '../../operations/cluster';
 import { projectModules } from '../../constants';
@@ -50,6 +50,7 @@ const Sidenav = (props) => {
   const showSidenav = useSelector(state => state.uiState.showSidenav)
   const sideNavActiveKeys = useSelector(state => state.uiState.sideNavActiveKeys)
   const { plan, version } = useSelector(state => getEnv(state))
+  const scLatestVersion = useSelector(state => state.scLatestVersion)
   const planName = getPlanName(plan)
   const closeSidenav = () => {
     store.dispatch(set("uiState.showSidenav", false))
@@ -59,6 +60,8 @@ const Sidenav = (props) => {
     store.dispatch(set("uiState.sideNavActiveKeys", activeKeys))
   }
 
+  const isUpdateAvailable = scLatestVersion && scLatestVersion !== version
+
   return (
     <div className="sidenav-container">
       <div className={showSidenav ? 'overlay' : 'no-overlay'} onClick={() => store.dispatch(set("uiState.showSidenav", false))}></div>
@@ -116,16 +119,23 @@ const Sidenav = (props) => {
             <SidenavItem name="Settings" icon="settings" active={props.selectedItem === projectModules.SETTINGS} />
           </Link>
         </div>
+        <div className="sidenav-bottom-content">
+        {isUpdateAvailable &&
+          <div className="sc-update">
+            Upgrade to v{scLatestVersion} <Button type="primary" ghost style={{ marginLeft: 9 }}>Update</Button>
+          </div>}
         <div className="sidenav-version">
-          <InfoCircleOutlined style={{ fontSize: "20px", fontWeight: "700" }} />
+          <Popover placement="right" content={`UI Version - v${uiVersion}`}>
+            <InfoCircleOutlined style={{ fontSize: "20px", fontWeight: "700", cursor: "pointer" }} />
+          </Popover>
           <div className="sidenav-version-content">
             <Space direction="vertical" size={4}>
               <Typography.Text>SC Version - v{version}</Typography.Text>
-              <Typography.Text>UI Version - v{uiVersion}</Typography.Text>
               <Typography.Text type="secondary">{planName}</Typography.Text>
             </Space>
           </div>
         </div>
+        </div>
       </div>
     </div>
   );

src/components/sidenav/sidenav.css

@@ -52,10 +52,18 @@
   padding: 16px;
   border-top: 1px solid #eee;
   width: 100%;
-  margin-top: auto;
   display: flex;
 }
 
+.sidenav-bottom-content {
+  margin-top: auto;
+}
+
+.sc-update {
+  background-color: #D2E0FF; 
+  padding: 16px; 
+}
+
 .sidenav-version .sidenav-version-content {
   display: inline-block;
   margin-left: 16px;

src/operations/cluster.js

@@ -1,6 +1,7 @@
 import { set, get } from "automate-redux";
 import client from "../client";
 import store from "../store";
+import { getAPIToken } from "./projects";
 
 export function loadClusterSettings() {
   return new Promise((resolve, reject) => {
@@ -39,11 +40,12 @@ export function saveClusterSetting(key, value) {
   })
 }
 
-export function loadClusterEnv() {
+export function loadClusterEnv(projectId) {
   return new Promise((resolve, reject) => {
     client.cluster.fetchEnv()
       .then(env => {
         setEnv(env)
+        getScLatestVersion(projectId, env.version)
         resolve()
       })
       .catch(error => reject(error))
@@ -119,6 +121,18 @@ export function removeClusterLicense() {
   })
 }
 
+function getScLatestVersion(projectId, currentVersion) {
+  return new Promise((resolve, reject) => {
+    const internalToken = getAPIToken(store.getState())
+    client.cluster.fetchScLatestVersion(projectId, currentVersion, () => internalToken)
+    .then((latestVersion) => {
+      setScLatestVersion(latestVersion)
+      resolve()
+    })
+    .catch(error => reject(error))
+  })
+}
+
 export function getEnv(state) {
   return get(state, "env", {})
 }
@@ -171,4 +185,6 @@ export function isLoggedIn(state) {
   }
 
   return true
-}
+}
+
+const setScLatestVersion = (latestVersion) => store.dispatch(set("scLatestVersion", latestVersion))

src/services/cluster.js

@@ -1,3 +1,7 @@
+import { spaceCloudClusterOrigin } from "../constants"
+import { createGraphQLClient } from "./client"
+import gql from 'graphql-tag';
+
 class Cluster {
   constructor(client) {
     this.client = client
@@ -132,6 +136,33 @@ class Cluster {
       }).catch(ex => reject({title: "Failed to login", msg: ex.message}))
     })
   }
+
+  fetchScLatestVersion(projectId, currentVersion, getToken) {
+    let uri = `/v1/api/${projectId}/graphql`
+    if (spaceCloudClusterOrigin) {
+      uri = spaceCloudClusterOrigin + uri;
+    }
+    const graphqlClient = createGraphQLClient(uri, getToken)
+    return new Promise((resolve, reject) => {
+      graphqlClient.query({
+        query: gql`
+        query {
+          sc_version(where: {version_no: $currentVersion},limit:1, sort:["-version_code"]) @db {
+            compatible_version
+          }
+        }
+        `,
+        variables: { currentVersion }
+      }).then(res => {
+        const { data, errors } = res
+        if (errors && errors.length > 0) {
+          reject(errors[0].message)
+          return
+        }
+        resolve(data.sc_version ? data.sc_version[0].compatible_version : "")
+      }).catch(ex => reject(ex.toString()))
+    })
+  }
 }
 
 export default Cluster

src/utils.js

@@ -407,9 +407,9 @@ export function redirectToLogin() {
 // Its intended to be called whenever the mission control is (re)loaded.
 export function performSetup() {
   return new Promise((resolve, reject) => {
-
+    const { projectId } = extractPathInfo(history.location.pathname)
     // Load cluster environment and refresh token (if present) parallely
-    const promises = [loadClusterEnv(), refreshClusterTokenIfPresent()]
+    const promises = [loadClusterEnv(projectId), refreshClusterTokenIfPresent()]
 
     Promise.all(promises)
       .then(() => {
@@ -450,7 +450,6 @@ export function performSetup() {
         })
 
       // Refresh admin token periodically (every 15 minutes)
-      const { projectId } = extractPathInfo(history.location.pathname)
       loadProjectAPIToken(projectId)
     }, 15 * 60 * 1000)