From 70848e88414cc17ab8b4fe006ba7ab8579728ddb Mon Sep 17 00:00:00 2001 From: shubham4443 Date: Sat, 13 Feb 2021 19:46:36 +0530 Subject: [PATCH 1/4] added notification in sidenav when an sc update is available --- src/components/sidenav/Sidenav.jsx | 16 ++++++++++++--- src/operations/cluster.js | 20 +++++++++++++++++-- src/services/cluster.js | 31 ++++++++++++++++++++++++++++++ src/utils.js | 5 ++--- 4 files changed, 64 insertions(+), 8 deletions(-) diff --git a/src/components/sidenav/Sidenav.jsx b/src/components/sidenav/Sidenav.jsx index 4672ede5..89439402 100644 --- a/src/components/sidenav/Sidenav.jsx +++ b/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 } 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 (
store.dispatch(set("uiState.showSidenav", false))}>
@@ -116,7 +119,14 @@ const Sidenav = (props) => {
-
+ {isUpdateAvailable ? +
+ Upgrade to v{scLatestVersion} +
+
+ UI Version - v{uiVersion} +
+ :
@@ -125,7 +135,7 @@ const Sidenav = (props) => { {planName}
-
+
} ); diff --git a/src/operations/cluster.js b/src/operations/cluster.js index c82a8239..34f3cb42 100644 --- a/src/operations/cluster.js +++ b/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 -} \ No newline at end of file +} + +const setScLatestVersion = (latestVersion) => store.dispatch(set("scLatestVersion", latestVersion)) \ No newline at end of file diff --git a/src/services/cluster.js b/src/services/cluster.js index 6142e21f..20f52fe1 100644 --- a/src/services/cluster.js +++ b/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 \ No newline at end of file diff --git a/src/utils.js b/src/utils.js index a59514bf..0ef0c659 100644 --- a/src/utils.js +++ b/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) From d3e6a0be7d40b2a10adf66fc7028b44a627c0990 Mon Sep 17 00:00:00 2001 From: shubham4443 Date: Sat, 27 Feb 2021 16:18:02 +0530 Subject: [PATCH 2/4] made changes as per design --- src/components/sidenav/Sidenav.jsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/sidenav/Sidenav.jsx b/src/components/sidenav/Sidenav.jsx index 89439402..229763cf 100644 --- a/src/components/sidenav/Sidenav.jsx +++ b/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, Button } from "antd"; +import { Collapse, Divider, Typography, Space, Button, Popover } from "antd"; import { capitalizeFirstCharacter } from '../../utils'; import { getEnv } from '../../operations/cluster'; import { projectModules } from '../../constants'; @@ -123,8 +123,10 @@ const Sidenav = (props) => {
Upgrade to v{scLatestVersion}
-
- UI Version - v{uiVersion} +
+ + +
:
From c8e12bc8e5b352c1c89de11791377d62f8e1c12c Mon Sep 17 00:00:00 2001 From: shubham4443 Date: Sat, 27 Feb 2021 23:00:05 +0530 Subject: [PATCH 3/4] popover for ui version --- src/components/sidenav/Sidenav.jsx | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/src/components/sidenav/Sidenav.jsx b/src/components/sidenav/Sidenav.jsx index 229763cf..56752795 100644 --- a/src/components/sidenav/Sidenav.jsx +++ b/src/components/sidenav/Sidenav.jsx @@ -61,7 +61,7 @@ const Sidenav = (props) => { } const isUpdateAvailable = scLatestVersion && scLatestVersion !== version - + return (
store.dispatch(set("uiState.showSidenav", false))}>
@@ -120,7 +120,7 @@ const Sidenav = (props) => {
{isUpdateAvailable ? -
+
Upgrade to v{scLatestVersion}
@@ -129,15 +129,16 @@ const Sidenav = (props) => {
:
- -
- - SC Version - v{version} - UI Version - v{uiVersion} - {planName} - -
-
} + + + +
+ + SC Version - v{version} + {planName} + +
+
}
); From 182d1277db3c88ff08e0d2dfe7a40b53d075f381 Mon Sep 17 00:00:00 2001 From: shubham4443 Date: Tue, 2 Mar 2021 23:55:24 +0530 Subject: [PATCH 4/4] removed ternary operator --- src/components/sidenav/Sidenav.jsx | 33 ++++++++++++++---------------- src/components/sidenav/sidenav.css | 10 ++++++++- 2 files changed, 24 insertions(+), 19 deletions(-) diff --git a/src/components/sidenav/Sidenav.jsx b/src/components/sidenav/Sidenav.jsx index 56752795..4c291f48 100644 --- a/src/components/sidenav/Sidenav.jsx +++ b/src/components/sidenav/Sidenav.jsx @@ -119,26 +119,23 @@ const Sidenav = (props) => { - {isUpdateAvailable ? -
+
+ {isUpdateAvailable && +
Upgrade to v{scLatestVersion} -
-
- - - -
- :
- - - -
- - SC Version - v{version} - {planName} - -
} +
+ + + +
+ + SC Version - v{version} + {planName} + +
+
+
); diff --git a/src/components/sidenav/sidenav.css b/src/components/sidenav/sidenav.css index bd575ae5..601dafe5 100644 --- a/src/components/sidenav/sidenav.css +++ b/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;