From dc4d4def8d12a61d589b4780884ad015dad58427 Mon Sep 17 00:00:00 2001 From: aabidsofi19 Date: Tue, 5 Sep 2023 13:10:14 +0530 Subject: [PATCH 1/5] Add fallback errorFn for datafetch Signed-off-by: aabidsofi19 --- provider-ui/lib/data-fetch.js | 34 ++++++++++++++++++++-------------- ui/lib/data-fetch.js | 7 ++++++- 2 files changed, 26 insertions(+), 15 deletions(-) diff --git a/provider-ui/lib/data-fetch.js b/provider-ui/lib/data-fetch.js index 5d25f7ee1f0..a1ca30f4b3a 100644 --- a/provider-ui/lib/data-fetch.js +++ b/provider-ui/lib/data-fetch.js @@ -1,4 +1,4 @@ -import fetch from 'isomorphic-unfetch' +import fetch from "isomorphic-unfetch"; // This can be migrated as a custom hook in React const dataFetch = (url, options = {}, successFn, errorFn) => { @@ -6,29 +6,35 @@ const dataFetch = (url, options = {}, successFn, errorFn) => { // const signal = controller.signal; // options.signal = signal; // setTimeout(() => controller.abort(), 10000); // nice to have but will mess with the load test + if (errorFn === undefined) { + errorFn = (err) => { + console.error(`Error fetching ${url} --DataFetch`, err); + }; + } fetch(url, options) - .then(res => { + .then((res) => { if (res.status === 401 || res.redirected) { - if (window.location.host.endsWith('3000')) { - window.location = '/user/login' // for local dev thru node server + if (window.location.host.endsWith("3000")) { + window.location = "/user/login"; // for local dev thru node server } else { - window.location.reload() // for use with Go server + window.location.reload(); // for use with Go server } } - let result + let result; if (res.ok) { // console.log(`res type: ${res.type}`); try { - result = res.json() + result = res.json(); } catch (e) { - result = res.text() + result = res.text(); } - return result + return result; } else { - res.text().then(errorFn) + res.text().then(errorFn); } - }).then(successFn) - .catch(errorFn) -} + }) + .then(successFn) + .catch(errorFn); +}; -export default dataFetch +export default dataFetch; diff --git a/ui/lib/data-fetch.js b/ui/lib/data-fetch.js index 32c349db411..06f952cb4f0 100644 --- a/ui/lib/data-fetch.js +++ b/ui/lib/data-fetch.js @@ -5,6 +5,11 @@ const dataFetch = (url, options = {}, successFn, errorFn) => { // const signal = controller.signal; // options.signal = signal; // setTimeout(() => controller.abort(), 10000); // nice to have but will mess with the load test + if (errorFn === undefined) { + errorFn = (err) => { + console.error(`Error fetching ${url} --DataFetch`, err); + }; + } fetch(url, options) .then(res => { if (res.status === 401 || res.redirected) { @@ -33,7 +38,7 @@ const dataFetch = (url, options = {}, successFn, errorFn) => { }).then(successFn) .catch((e) => { - if(e.then) { + if (e.then) { e.then(text => errorFn(text)) return; } From c70daf6e11d0549c71090ea26f84730ddd7dcc4a Mon Sep 17 00:00:00 2001 From: aabidsofi19 Date: Tue, 5 Sep 2023 13:11:27 +0530 Subject: [PATCH 2/5] Add error details to notifs Signed-off-by: aabidsofi19 --- .../ConnectionWizard/helpers/common.js | 7 +- .../helpers/kubernetesHelpers.js | 81 ++++++++++--------- 2 files changed, 45 insertions(+), 43 deletions(-) diff --git a/ui/components/ConnectionWizard/helpers/common.js b/ui/components/ConnectionWizard/helpers/common.js index a8b196e5e8a..3d2428d6e9d 100644 --- a/ui/components/ConnectionWizard/helpers/common.js +++ b/ui/components/ConnectionWizard/helpers/common.js @@ -12,11 +12,12 @@ export const closeButtonForSnackbarAction = (closeSnackbar) => (key) => ( export const successHandlerGenerator = (notify, msg, cb) => (res) => { if (res !== undefined) { if (cb !== undefined) cb(res) - notify({ message : `${msg}: ${res}`, event_type : EVENT_TYPES.SUCCESS }) + notify({ message: `${msg}: ${res}`, details: res, event_type: EVENT_TYPES.SUCCESS }) } } export const errorHandlerGenerator = (notify, msg, cb) => (err) => { if (cb !== undefined) cb(err) - notify({ message : `${msg}: ${err}`, event_type : EVENT_TYPES.ERROR }) -} + err = typeof err !== "string" ? err.toString() : err + notify({ message: `${msg}`, details: err, event_type: EVENT_TYPES.ERROR }) +} \ No newline at end of file diff --git a/ui/components/ConnectionWizard/helpers/kubernetesHelpers.js b/ui/components/ConnectionWizard/helpers/kubernetesHelpers.js index aa33a5bbf38..49004ddead5 100644 --- a/ui/components/ConnectionWizard/helpers/kubernetesHelpers.js +++ b/ui/components/ConnectionWizard/helpers/kubernetesHelpers.js @@ -1,5 +1,4 @@ import dataFetch from "../../../lib/data-fetch"; -import { updateProgress } from "../../../lib/store"; import { EVENT_TYPES } from "../../../lib/event-types"; /** @@ -7,10 +6,10 @@ import { EVENT_TYPES } from "../../../lib/event-types"; * @param {(res) => void} successHandler * @param {(err) => void} errorHandler */ -export const pingKubernetes = (successHandler,errorHandler, context) => { +export const pingKubernetes = (successHandler, errorHandler, connectionId) => { dataFetch( - "/api/system/kubernetes/ping?connection_id=" + context, - { credentials : "include" }, + "/api/system/kubernetes/ping?connection_id=" + connectionId, + { credentials: "include" }, successHandler, errorHandler ); @@ -28,9 +27,9 @@ export const pingKubernetes = (successHandler,errorHandler, context) => { * * @return {true|false} */ -export const isKubernetesConnected = (isClusterConfigured,kubernetesPingStatus) => { +export const isKubernetesConnected = (isClusterConfigured, kubernetesPingStatus) => { - if (isClusterConfigured){ + if (isClusterConfigured) { if (kubernetesPingStatus) return true } @@ -38,13 +37,13 @@ export const isKubernetesConnected = (isClusterConfigured,kubernetesPingStatus) } -export const deleteKubernetesConfig = (successCb,errorCb, id) => +export const deleteKubernetesConfig = (successCb, errorCb, connectionId) => dataFetch( - "/api/system/kubernetes/contexts/" + id, + "/api/system/kubernetes/contexts/" + connectionId, { - method : "DELETE", - credentials : "include", }, - updateProgress({ showProgress : false }), + method: "DELETE", + credentials: "include", + }, successCb, errorCb ) @@ -62,18 +61,18 @@ export const fetchContexts = (updateProgress, k8sfile) => { // formData.append('contextName', contextName); formData.append("k8sfile", k8sfile); - updateProgress({ showProgress : true }); + updateProgress({ showProgress: true }); return new Promise((res, rej) => { dataFetch( "/api/system/kubernetes/contexts", { - method : "POST", - credentials : "include", - body : formData, + method: "POST", + credentials: "include", + body: formData, }, (result) => { - updateProgress({ showProgress : false }); + updateProgress({ showProgress: false }); if (typeof result !== "undefined") { let ctName = ""; @@ -83,7 +82,7 @@ export const fetchContexts = (updateProgress, k8sfile) => { } }); - res({ result, currentContextName : ctName }) + res({ result, currentContextName: ctName }) } }, (err) => rej(err) @@ -101,25 +100,27 @@ export const submitConfig = (notify, updateProgress, updateK8SConfig, contextNam formData.append("contextName", contextName); formData.append("k8sfile", k8sfile); } - updateProgress({ showProgress : true }); + updateProgress({ showProgress: true }); dataFetch( "/api/system/kubernetes", { - method : "POST", - credentials : "include", - body : formData, + method: "POST", + credentials: "include", + body: formData, }, (result) => { - updateProgress({ showProgress : false }); + updateProgress({ showProgress: false }); if (typeof result !== "undefined") { - notify({ message : "Kubernetes config was validated!", event_type : EVENT_TYPES.SUCCESS }); - updateK8SConfig({ k8sConfig : { - inClusterConfig : inClusterConfigForm, - k8sfile, - contextName : result.contextName, - clusterConfigured : true, - configuredServer : result.configuredServer, - }, }); + notify({ message: "Kubernetes config was validated!", event_type: EVENT_TYPES.SUCCESS }); + updateK8SConfig({ + k8sConfig: { + inClusterConfig: inClusterConfigForm, + k8sfile, + contextName: result.contextName, + clusterConfigured: true, + configuredServer: result.configuredServer, + }, + }); } }, (err) => alert(err) @@ -134,16 +135,16 @@ export const submitConfig = (notify, updateProgress, updateK8SConfig, contextNam */ export function extractKubernetesCredentials(data) { const credentials = { - credentialName : data.name, - secret : { - clusterName : data.cluster.name, - clusterServerURL : data.cluster.cluster.server, - auth : { - clusterUserName : data.auth.name, - clusterToken : data.auth.user.token, - clusterClientCertificateData : data.auth.user['client-certificate-data'], - clusterCertificateAuthorityData : data.cluster.cluster['certificate-authority-data'], - clusterClientKeyData : data.auth.user['client-key-data'], + credentialName: data.name, + secret: { + clusterName: data.cluster.name, + clusterServerURL: data.cluster.cluster.server, + auth: { + clusterUserName: data.auth.name, + clusterToken: data.auth.user.token, + clusterClientCertificateData: data.auth.user['client-certificate-data'], + clusterCertificateAuthorityData: data.cluster.cluster['certificate-authority-data'], + clusterClientKeyData: data.auth.user['client-key-data'], } } }; From f905effca6e6aeb826cd3bda7b52231539af2da9 Mon Sep 17 00:00:00 2001 From: aabidsofi19 Date: Tue, 5 Sep 2023 13:18:34 +0530 Subject: [PATCH 3/5] fix notifications Signed-off-by: aabidsofi19 --- ui/components/Header.js | 290 ++++++++++++++++++++-------------------- 1 file changed, 145 insertions(+), 145 deletions(-) diff --git a/ui/components/Header.js b/ui/components/Header.js index 20bfd6967b3..d2262540a8b 100644 --- a/ui/components/Header.js +++ b/ui/components/Header.js @@ -45,159 +45,159 @@ import RemoteComponent from './RemoteComponent'; import { CapabilitiesRegistry } from "../utils/disabledComponents"; import ExtensionPointSchemaValidator from '../utils/ExtensionPointSchemaValidator'; import dataFetch from '../lib/data-fetch'; -import { withNotify } from '../utils/hooks/useNotification'; +import { useNotification, withNotify } from '../utils/hooks/useNotification'; const lightColor = 'rgba(255, 255, 255, 0.7)'; const styles = (theme) => ({ - secondaryBar : { zIndex : 0, }, - menuButton : { marginLeft : -theme.spacing(1), }, - iconButtonAvatar : { padding : 4, }, - link : { - textDecoration : 'none', - color : theme.palette.secondary.link + secondaryBar: { zIndex: 0, }, + menuButton: { marginLeft: -theme.spacing(1), }, + iconButtonAvatar: { padding: 4, }, + link: { + textDecoration: 'none', + color: theme.palette.secondary.link }, - button : { borderColor : lightColor, }, - notifications : { - paddingLeft : theme.spacing(4), - paddingRight : theme.spacing(0), - marginLeft : theme.spacing(4), + button: { borderColor: lightColor, }, + notifications: { + paddingLeft: theme.spacing(4), + paddingRight: theme.spacing(0), + marginLeft: theme.spacing(4), }, - userContainer : { - paddingLeft : 1, - display : 'flex', + userContainer: { + paddingLeft: 1, + display: 'flex', - alignItems : 'center' + alignItems: 'center' }, - userSpan : { marginLeft : theme.spacing(1), }, - pageTitleWrapper : { - flexGrow : 1, - marginRight : 'auto', + userSpan: { marginLeft: theme.spacing(1), }, + pageTitleWrapper: { + flexGrow: 1, + marginRight: 'auto', }, - betaBadge : { color : '#EEEEEE', fontWeight : '300', fontSize : '13px' }, - pageTitle : { - paddingLeft : theme.spacing(2), - fontSize : '1.25rem', - [theme.breakpoints.up('sm')] : { fontSize : '1.65rem', }, + betaBadge: { color: '#EEEEEE', fontWeight: '300', fontSize: '13px' }, + pageTitle: { + paddingLeft: theme.spacing(2), + fontSize: '1.25rem', + [theme.breakpoints.up('sm')]: { fontSize: '1.65rem', }, }, - appBarOnDrawerOpen : { - backgroundColor : theme.palette.secondary.mainBackground, - shadowColor : " #808080", - zIndex : theme.zIndex.drawer + 1, - [theme.breakpoints.between(635, 732)] : { padding : theme.spacing(0.75, 1.4), }, - [theme.breakpoints.between(600, 635)] : { padding : theme.spacing(0.4, 1.4), }, + appBarOnDrawerOpen: { + backgroundColor: theme.palette.secondary.mainBackground, + shadowColor: " #808080", + zIndex: theme.zIndex.drawer + 1, + [theme.breakpoints.between(635, 732)]: { padding: theme.spacing(0.75, 1.4), }, + [theme.breakpoints.between(600, 635)]: { padding: theme.spacing(0.4, 1.4), }, }, - appBarOnDrawerClosed : { - backgroundColor : theme.palette.secondary.mainBackground, - zIndex : theme.zIndex.drawer + 1, + appBarOnDrawerClosed: { + backgroundColor: theme.palette.secondary.mainBackground, + zIndex: theme.zIndex.drawer + 1, }, - toolbarOnDrawerClosed : { + toolbarOnDrawerClosed: { - minHeight : 59, - padding : theme.spacing(2.4), - paddingLeft : 34, - paddingRight : 34, - backgroundColor : theme.palette.secondary.mainBackground, + minHeight: 59, + padding: theme.spacing(2.4), + paddingLeft: 34, + paddingRight: 34, + backgroundColor: theme.palette.secondary.mainBackground, }, - toolbarOnDrawerOpen : { - minHeight : 58, - padding : theme.spacing(2.4), - paddingLeft : 34, - paddingRight : 34, - backgroundColor : theme.palette.secondary.mainBackground, - [theme.breakpoints.between(620, 732)] : { minHeight : 68, paddingLeft : 20, paddingRight : 20 }, + toolbarOnDrawerOpen: { + minHeight: 58, + padding: theme.spacing(2.4), + paddingLeft: 34, + paddingRight: 34, + backgroundColor: theme.palette.secondary.mainBackground, + [theme.breakpoints.between(620, 732)]: { minHeight: 68, paddingLeft: 20, paddingRight: 20 }, }, - itemActiveItem : { color : "#00B39F" }, - headerIcons : { fontSize : "1.5rem", height : "1.5rem", width : "1.5rem" }, - cbadge : { - fontSize : "0.65rem", - backgroundColor : "white", - borderRadius : "50%", - color : "black", - height : "1.30rem", - width : "1.30rem", - display : "flex", - justifyContent : "center", - alignItems : "center", - position : "absolute", - zIndex : 1, - right : "-0.75rem", - top : "-0.29rem" + itemActiveItem: { color: "#00B39F" }, + headerIcons: { fontSize: "1.5rem", height: "1.5rem", width: "1.5rem" }, + cbadge: { + fontSize: "0.65rem", + backgroundColor: "white", + borderRadius: "50%", + color: "black", + height: "1.30rem", + width: "1.30rem", + display: "flex", + justifyContent: "center", + alignItems: "center", + position: "absolute", + zIndex: 1, + right: "-0.75rem", + top: "-0.29rem" }, - cbadgeContainer : { - display : "flex", - justifyContent : "center", - alignItems : "center", - position : "relative" + cbadgeContainer: { + display: "flex", + justifyContent: "center", + alignItems: "center", + position: "relative" }, - icon : { - width : 24, - height : 24 + icon: { + width: 24, + height: 24 }, - Chip : { - width : '12.8rem', - textAlign : 'center', - cursor : "pointer", - "& .MuiChip-label" : { - flexGrow : 1 + Chip: { + width: '12.8rem', + textAlign: 'center', + cursor: "pointer", + "& .MuiChip-label": { + flexGrow: 1 }, - overflow : "hidden", - whiteSpace : "nowrap", - textOverflow : "ellipsis" + overflow: "hidden", + whiteSpace: "nowrap", + textOverflow: "ellipsis" }, - cMenuContainer : { - backgroundColor : theme.palette.secondary.headerColor, - marginTop : "-0.7rem", - borderRadius : "3px", - padding : "1rem", - zIndex : 1201, - boxShadow : "20px #979797", - transition : "linear .2s", - transitionProperty : "height" + cMenuContainer: { + backgroundColor: theme.palette.secondary.headerColor, + marginTop: "-0.7rem", + borderRadius: "3px", + padding: "1rem", + zIndex: 1201, + boxShadow: "20px #979797", + transition: "linear .2s", + transitionProperty: "height" }, - alertEnter : { - opacity : "0", - transform : "scale(0.9)", + alertEnter: { + opacity: "0", + transform: "scale(0.9)", }, - alertEnterActive : { - opacity : "1", - transform : "translateX(0)", - transition : "opacity 300ms, transform 300ms" + alertEnterActive: { + opacity: "1", + transform: "translateX(0)", + transition: "opacity 300ms, transform 300ms" }, - chip : { - margin : "0.25rem 0", + chip: { + margin: "0.25rem 0", }, - AddIcon : { - width : theme.spacing(2.5), - paddingRight : theme.spacing(0.5), + AddIcon: { + width: theme.spacing(2.5), + paddingRight: theme.spacing(0.5), }, - searchIcon : { - width : theme.spacing(3.5), + searchIcon: { + width: theme.spacing(3.5), }, - darkThemeToggle : { + darkThemeToggle: { - marginLeft : "1.5em", + marginLeft: "1.5em", }, - toggle : { - appearance : "none", - outline : "none", - cursor : "pointer", - width : "1.5rem", - height : "1.5rem", - boxShadow : "inset calc(1.5rem * 0.33) calc(1.5rem * -0.25) 0", - borderRadius : "999px", - color : "#00B39F", - transition : "all 500ms", - zIndex : "1", - '&:checked' : { - width : "1.5rem", - height : "1.5rem", - borderRadius : "50%", - background : "orange", - boxShadow : "0 0 10px orange, 0 0 60px orange,0 0 200px yellow, inset 0 0 80px yellow", + toggle: { + appearance: "none", + outline: "none", + cursor: "pointer", + width: "1.5rem", + height: "1.5rem", + boxShadow: "inset calc(1.5rem * 0.33) calc(1.5rem * -0.25) 0", + borderRadius: "999px", + color: "#00B39F", + transition: "all 500ms", + zIndex: "1", + '&:checked': { + width: "1.5rem", + height: "1.5rem", + borderRadius: "50%", + background: "orange", + boxShadow: "0 0 10px orange, 0 0 60px orange,0 0 200px yellow, inset 0 0 80px yellow", } }, @@ -269,18 +269,18 @@ function K8sContextMenu({ const [showFullContextMenu, setShowFullContextMenu] = React.useState(false); const [transformProperty, setTransformProperty] = React.useState(100); const deleteCtxtRef = React.createRef(); - + const { notify } = useNotification() const styleSlider = { - position : "absolute", - left : "-5rem", - zIndex : "-1", - bottom : showFullContextMenu ? "-55%" : "-110%", - transform : showFullContextMenu ? `translateY(${transformProperty}%)` : "translateY(0)" + position: "absolute", + left: "-5rem", + zIndex: "-1", + bottom: showFullContextMenu ? "-55%" : "-110%", + transform: showFullContextMenu ? `translateY(${transformProperty}%)` : "translateY(0)" } const ctxStyle = { ...disabledStyle, - marginRight : "0.5rem", + marginRight: "0.5rem", } const getOperatorStatus = (contextId) => { @@ -334,33 +334,33 @@ function K8sContextMenu({ return STATUS.NOT_CONNECTED; } - const handleKubernetesClick = (id) => { - updateProgress({ showProgress : true }) - const notify = this.props.notify; + const handleKubernetesClick = (name, connectionID) => { + + updateProgress({ showProgress: true }) + // const notify = this.props.notify; pingKubernetes( - successHandlerGenerator (notify, "Kubernetes pinged", () => updateProgress({ showProgress : false })), - errorHandlerGenerator(notify, "Kubernetes not pinged", () => updateProgress({ showProgress : false })), - id + successHandlerGenerator(notify, `Kubernetes pinged ${name}`, () => updateProgress({ showProgress: false }),), + errorHandlerGenerator(notify, `Not able to ping kubernetes ${name}`, () => updateProgress({ showProgress: false })), + connectionID ) } const handleKubernetesDelete = (name, connectionID) => async () => { let responseOfDeleteK8sCtx = await deleteCtxtRef.current.show({ - title : `Delete ${name} context ?`, - subtitle : `Are you sure you want to delete ${name} cluster from Meshery?`, - options : ["CONFIRM", "CANCEL"] + title: `Delete ${name} context ?`, + subtitle: `Are you sure you want to delete ${name} cluster from Meshery?`, + options: ["CONFIRM", "CANCEL"] }); if (responseOfDeleteK8sCtx === "CONFIRM") { const successCallback = async () => { const updatedConfig = await loadActiveK8sContexts() if (Array.isArray(updatedConfig)) { - updateK8SConfig({ k8sConfig : updatedConfig }) + updateK8SConfig({ k8sConfig: updatedConfig }) } } - const notify = this.props.notify; deleteKubernetesConfig( - successHandlerGenerator(notify, "Kubernetes config removed", successCallback), - errorHandlerGenerator(notify, "Not able to remove config"), + successHandlerGenerator(notify, `Kubernetes config removed for ${name}`, successCallback), + errorHandlerGenerator(notify, `Not able to remove config for ${name}`), connectionID ) } @@ -485,16 +485,16 @@ function K8sContextMenu({ handleKubernetesClick(ctx.connection_id)} + onClick={() => handleKubernetesClick(ctx.name, ctx.connection_id)} avatar={ meshStatus ? : } variant="filled" From d5883c263351f0d01d2baeceb2b5185f8a80c4fd Mon Sep 17 00:00:00 2001 From: aabidsofi19 Date: Tue, 5 Sep 2023 13:19:05 +0530 Subject: [PATCH 4/5] lint & formatting Signed-off-by: aabidsofi19 --- .../ConnectionWizard/helpers/common.js | 4 +- .../helpers/kubernetesHelpers.js | 60 ++-- ui/components/Header.js | 282 +++++++++--------- 3 files changed, 173 insertions(+), 173 deletions(-) diff --git a/ui/components/ConnectionWizard/helpers/common.js b/ui/components/ConnectionWizard/helpers/common.js index 3d2428d6e9d..4126a3e4175 100644 --- a/ui/components/ConnectionWizard/helpers/common.js +++ b/ui/components/ConnectionWizard/helpers/common.js @@ -12,12 +12,12 @@ export const closeButtonForSnackbarAction = (closeSnackbar) => (key) => ( export const successHandlerGenerator = (notify, msg, cb) => (res) => { if (res !== undefined) { if (cb !== undefined) cb(res) - notify({ message: `${msg}: ${res}`, details: res, event_type: EVENT_TYPES.SUCCESS }) + notify({ message : `${msg}: ${res}`, details : res, event_type : EVENT_TYPES.SUCCESS }) } } export const errorHandlerGenerator = (notify, msg, cb) => (err) => { if (cb !== undefined) cb(err) err = typeof err !== "string" ? err.toString() : err - notify({ message: `${msg}`, details: err, event_type: EVENT_TYPES.ERROR }) + notify({ message : `${msg}`, details : err, event_type : EVENT_TYPES.ERROR }) } \ No newline at end of file diff --git a/ui/components/ConnectionWizard/helpers/kubernetesHelpers.js b/ui/components/ConnectionWizard/helpers/kubernetesHelpers.js index 49004ddead5..a8f84d82c78 100644 --- a/ui/components/ConnectionWizard/helpers/kubernetesHelpers.js +++ b/ui/components/ConnectionWizard/helpers/kubernetesHelpers.js @@ -9,7 +9,7 @@ import { EVENT_TYPES } from "../../../lib/event-types"; export const pingKubernetes = (successHandler, errorHandler, connectionId) => { dataFetch( "/api/system/kubernetes/ping?connection_id=" + connectionId, - { credentials: "include" }, + { credentials : "include" }, successHandler, errorHandler ); @@ -41,8 +41,8 @@ export const deleteKubernetesConfig = (successCb, errorCb, connectionId) => dataFetch( "/api/system/kubernetes/contexts/" + connectionId, { - method: "DELETE", - credentials: "include", + method : "DELETE", + credentials : "include", }, successCb, errorCb @@ -61,18 +61,18 @@ export const fetchContexts = (updateProgress, k8sfile) => { // formData.append('contextName', contextName); formData.append("k8sfile", k8sfile); - updateProgress({ showProgress: true }); + updateProgress({ showProgress : true }); return new Promise((res, rej) => { dataFetch( "/api/system/kubernetes/contexts", { - method: "POST", - credentials: "include", - body: formData, + method : "POST", + credentials : "include", + body : formData, }, (result) => { - updateProgress({ showProgress: false }); + updateProgress({ showProgress : false }); if (typeof result !== "undefined") { let ctName = ""; @@ -82,7 +82,7 @@ export const fetchContexts = (updateProgress, k8sfile) => { } }); - res({ result, currentContextName: ctName }) + res({ result, currentContextName : ctName }) } }, (err) => rej(err) @@ -100,25 +100,25 @@ export const submitConfig = (notify, updateProgress, updateK8SConfig, contextNam formData.append("contextName", contextName); formData.append("k8sfile", k8sfile); } - updateProgress({ showProgress: true }); + updateProgress({ showProgress : true }); dataFetch( "/api/system/kubernetes", { - method: "POST", - credentials: "include", - body: formData, + method : "POST", + credentials : "include", + body : formData, }, (result) => { - updateProgress({ showProgress: false }); + updateProgress({ showProgress : false }); if (typeof result !== "undefined") { - notify({ message: "Kubernetes config was validated!", event_type: EVENT_TYPES.SUCCESS }); + notify({ message : "Kubernetes config was validated!", event_type : EVENT_TYPES.SUCCESS }); updateK8SConfig({ - k8sConfig: { - inClusterConfig: inClusterConfigForm, + k8sConfig : { + inClusterConfig : inClusterConfigForm, k8sfile, - contextName: result.contextName, - clusterConfigured: true, - configuredServer: result.configuredServer, + contextName : result.contextName, + clusterConfigured : true, + configuredServer : result.configuredServer, }, }); } @@ -135,16 +135,16 @@ export const submitConfig = (notify, updateProgress, updateK8SConfig, contextNam */ export function extractKubernetesCredentials(data) { const credentials = { - credentialName: data.name, - secret: { - clusterName: data.cluster.name, - clusterServerURL: data.cluster.cluster.server, - auth: { - clusterUserName: data.auth.name, - clusterToken: data.auth.user.token, - clusterClientCertificateData: data.auth.user['client-certificate-data'], - clusterCertificateAuthorityData: data.cluster.cluster['certificate-authority-data'], - clusterClientKeyData: data.auth.user['client-key-data'], + credentialName : data.name, + secret : { + clusterName : data.cluster.name, + clusterServerURL : data.cluster.cluster.server, + auth : { + clusterUserName : data.auth.name, + clusterToken : data.auth.user.token, + clusterClientCertificateData : data.auth.user['client-certificate-data'], + clusterCertificateAuthorityData : data.cluster.cluster['certificate-authority-data'], + clusterClientKeyData : data.auth.user['client-key-data'], } } }; diff --git a/ui/components/Header.js b/ui/components/Header.js index d2262540a8b..947bfffc730 100644 --- a/ui/components/Header.js +++ b/ui/components/Header.js @@ -49,155 +49,155 @@ import { useNotification, withNotify } from '../utils/hooks/useNotification'; const lightColor = 'rgba(255, 255, 255, 0.7)'; const styles = (theme) => ({ - secondaryBar: { zIndex: 0, }, - menuButton: { marginLeft: -theme.spacing(1), }, - iconButtonAvatar: { padding: 4, }, - link: { - textDecoration: 'none', - color: theme.palette.secondary.link + secondaryBar : { zIndex : 0, }, + menuButton : { marginLeft : -theme.spacing(1), }, + iconButtonAvatar : { padding : 4, }, + link : { + textDecoration : 'none', + color : theme.palette.secondary.link }, - button: { borderColor: lightColor, }, - notifications: { - paddingLeft: theme.spacing(4), - paddingRight: theme.spacing(0), - marginLeft: theme.spacing(4), + button : { borderColor : lightColor, }, + notifications : { + paddingLeft : theme.spacing(4), + paddingRight : theme.spacing(0), + marginLeft : theme.spacing(4), }, - userContainer: { - paddingLeft: 1, - display: 'flex', + userContainer : { + paddingLeft : 1, + display : 'flex', - alignItems: 'center' + alignItems : 'center' }, - userSpan: { marginLeft: theme.spacing(1), }, - pageTitleWrapper: { - flexGrow: 1, - marginRight: 'auto', + userSpan : { marginLeft : theme.spacing(1), }, + pageTitleWrapper : { + flexGrow : 1, + marginRight : 'auto', }, - betaBadge: { color: '#EEEEEE', fontWeight: '300', fontSize: '13px' }, - pageTitle: { - paddingLeft: theme.spacing(2), - fontSize: '1.25rem', - [theme.breakpoints.up('sm')]: { fontSize: '1.65rem', }, + betaBadge : { color : '#EEEEEE', fontWeight : '300', fontSize : '13px' }, + pageTitle : { + paddingLeft : theme.spacing(2), + fontSize : '1.25rem', + [theme.breakpoints.up('sm')] : { fontSize : '1.65rem', }, }, - appBarOnDrawerOpen: { - backgroundColor: theme.palette.secondary.mainBackground, - shadowColor: " #808080", - zIndex: theme.zIndex.drawer + 1, - [theme.breakpoints.between(635, 732)]: { padding: theme.spacing(0.75, 1.4), }, - [theme.breakpoints.between(600, 635)]: { padding: theme.spacing(0.4, 1.4), }, + appBarOnDrawerOpen : { + backgroundColor : theme.palette.secondary.mainBackground, + shadowColor : " #808080", + zIndex : theme.zIndex.drawer + 1, + [theme.breakpoints.between(635, 732)] : { padding : theme.spacing(0.75, 1.4), }, + [theme.breakpoints.between(600, 635)] : { padding : theme.spacing(0.4, 1.4), }, }, - appBarOnDrawerClosed: { - backgroundColor: theme.palette.secondary.mainBackground, - zIndex: theme.zIndex.drawer + 1, + appBarOnDrawerClosed : { + backgroundColor : theme.palette.secondary.mainBackground, + zIndex : theme.zIndex.drawer + 1, }, - toolbarOnDrawerClosed: { + toolbarOnDrawerClosed : { - minHeight: 59, - padding: theme.spacing(2.4), - paddingLeft: 34, - paddingRight: 34, - backgroundColor: theme.palette.secondary.mainBackground, + minHeight : 59, + padding : theme.spacing(2.4), + paddingLeft : 34, + paddingRight : 34, + backgroundColor : theme.palette.secondary.mainBackground, }, - toolbarOnDrawerOpen: { - minHeight: 58, - padding: theme.spacing(2.4), - paddingLeft: 34, - paddingRight: 34, - backgroundColor: theme.palette.secondary.mainBackground, - [theme.breakpoints.between(620, 732)]: { minHeight: 68, paddingLeft: 20, paddingRight: 20 }, + toolbarOnDrawerOpen : { + minHeight : 58, + padding : theme.spacing(2.4), + paddingLeft : 34, + paddingRight : 34, + backgroundColor : theme.palette.secondary.mainBackground, + [theme.breakpoints.between(620, 732)] : { minHeight : 68, paddingLeft : 20, paddingRight : 20 }, }, - itemActiveItem: { color: "#00B39F" }, - headerIcons: { fontSize: "1.5rem", height: "1.5rem", width: "1.5rem" }, - cbadge: { - fontSize: "0.65rem", - backgroundColor: "white", - borderRadius: "50%", - color: "black", - height: "1.30rem", - width: "1.30rem", - display: "flex", - justifyContent: "center", - alignItems: "center", - position: "absolute", - zIndex: 1, - right: "-0.75rem", - top: "-0.29rem" + itemActiveItem : { color : "#00B39F" }, + headerIcons : { fontSize : "1.5rem", height : "1.5rem", width : "1.5rem" }, + cbadge : { + fontSize : "0.65rem", + backgroundColor : "white", + borderRadius : "50%", + color : "black", + height : "1.30rem", + width : "1.30rem", + display : "flex", + justifyContent : "center", + alignItems : "center", + position : "absolute", + zIndex : 1, + right : "-0.75rem", + top : "-0.29rem" }, - cbadgeContainer: { - display: "flex", - justifyContent: "center", - alignItems: "center", - position: "relative" + cbadgeContainer : { + display : "flex", + justifyContent : "center", + alignItems : "center", + position : "relative" }, - icon: { - width: 24, - height: 24 + icon : { + width : 24, + height : 24 }, - Chip: { - width: '12.8rem', - textAlign: 'center', - cursor: "pointer", - "& .MuiChip-label": { - flexGrow: 1 + Chip : { + width : '12.8rem', + textAlign : 'center', + cursor : "pointer", + "& .MuiChip-label" : { + flexGrow : 1 }, - overflow: "hidden", - whiteSpace: "nowrap", - textOverflow: "ellipsis" + overflow : "hidden", + whiteSpace : "nowrap", + textOverflow : "ellipsis" }, - cMenuContainer: { - backgroundColor: theme.palette.secondary.headerColor, - marginTop: "-0.7rem", - borderRadius: "3px", - padding: "1rem", - zIndex: 1201, - boxShadow: "20px #979797", - transition: "linear .2s", - transitionProperty: "height" + cMenuContainer : { + backgroundColor : theme.palette.secondary.headerColor, + marginTop : "-0.7rem", + borderRadius : "3px", + padding : "1rem", + zIndex : 1201, + boxShadow : "20px #979797", + transition : "linear .2s", + transitionProperty : "height" }, - alertEnter: { - opacity: "0", - transform: "scale(0.9)", + alertEnter : { + opacity : "0", + transform : "scale(0.9)", }, - alertEnterActive: { - opacity: "1", - transform: "translateX(0)", - transition: "opacity 300ms, transform 300ms" + alertEnterActive : { + opacity : "1", + transform : "translateX(0)", + transition : "opacity 300ms, transform 300ms" }, - chip: { - margin: "0.25rem 0", + chip : { + margin : "0.25rem 0", }, - AddIcon: { - width: theme.spacing(2.5), - paddingRight: theme.spacing(0.5), + AddIcon : { + width : theme.spacing(2.5), + paddingRight : theme.spacing(0.5), }, - searchIcon: { - width: theme.spacing(3.5), + searchIcon : { + width : theme.spacing(3.5), }, - darkThemeToggle: { + darkThemeToggle : { - marginLeft: "1.5em", + marginLeft : "1.5em", }, - toggle: { - appearance: "none", - outline: "none", - cursor: "pointer", - width: "1.5rem", - height: "1.5rem", - boxShadow: "inset calc(1.5rem * 0.33) calc(1.5rem * -0.25) 0", - borderRadius: "999px", - color: "#00B39F", - transition: "all 500ms", - zIndex: "1", - '&:checked': { - width: "1.5rem", - height: "1.5rem", - borderRadius: "50%", - background: "orange", - boxShadow: "0 0 10px orange, 0 0 60px orange,0 0 200px yellow, inset 0 0 80px yellow", + toggle : { + appearance : "none", + outline : "none", + cursor : "pointer", + width : "1.5rem", + height : "1.5rem", + boxShadow : "inset calc(1.5rem * 0.33) calc(1.5rem * -0.25) 0", + borderRadius : "999px", + color : "#00B39F", + transition : "all 500ms", + zIndex : "1", + '&:checked' : { + width : "1.5rem", + height : "1.5rem", + borderRadius : "50%", + background : "orange", + boxShadow : "0 0 10px orange, 0 0 60px orange,0 0 200px yellow, inset 0 0 80px yellow", } }, @@ -271,16 +271,16 @@ function K8sContextMenu({ const deleteCtxtRef = React.createRef(); const { notify } = useNotification() const styleSlider = { - position: "absolute", - left: "-5rem", - zIndex: "-1", - bottom: showFullContextMenu ? "-55%" : "-110%", - transform: showFullContextMenu ? `translateY(${transformProperty}%)` : "translateY(0)" + position : "absolute", + left : "-5rem", + zIndex : "-1", + bottom : showFullContextMenu ? "-55%" : "-110%", + transform : showFullContextMenu ? `translateY(${transformProperty}%)` : "translateY(0)" } const ctxStyle = { ...disabledStyle, - marginRight: "0.5rem", + marginRight : "0.5rem", } const getOperatorStatus = (contextId) => { @@ -336,26 +336,26 @@ function K8sContextMenu({ const handleKubernetesClick = (name, connectionID) => { - updateProgress({ showProgress: true }) + updateProgress({ showProgress : true }) // const notify = this.props.notify; pingKubernetes( - successHandlerGenerator(notify, `Kubernetes pinged ${name}`, () => updateProgress({ showProgress: false }),), - errorHandlerGenerator(notify, `Not able to ping kubernetes ${name}`, () => updateProgress({ showProgress: false })), + successHandlerGenerator(notify, `Kubernetes pinged ${name}`, () => updateProgress({ showProgress : false }),), + errorHandlerGenerator(notify, `Not able to ping kubernetes ${name}`, () => updateProgress({ showProgress : false })), connectionID ) } const handleKubernetesDelete = (name, connectionID) => async () => { let responseOfDeleteK8sCtx = await deleteCtxtRef.current.show({ - title: `Delete ${name} context ?`, - subtitle: `Are you sure you want to delete ${name} cluster from Meshery?`, - options: ["CONFIRM", "CANCEL"] + title : `Delete ${name} context ?`, + subtitle : `Are you sure you want to delete ${name} cluster from Meshery?`, + options : ["CONFIRM", "CANCEL"] }); if (responseOfDeleteK8sCtx === "CONFIRM") { const successCallback = async () => { const updatedConfig = await loadActiveK8sContexts() if (Array.isArray(updatedConfig)) { - updateK8SConfig({ k8sConfig: updatedConfig }) + updateK8SConfig({ k8sConfig : updatedConfig }) } } deleteKubernetesConfig( @@ -377,7 +377,7 @@ function K8sContextMenu({ }, []) return ( <> -
+
@@ -430,7 +430,7 @@ function K8sContextMenu({ InputProps={{ endAdornment : ( - + ) }} /> @@ -461,7 +461,7 @@ function K8sContextMenu({ } - {contexts?.contexts?.map((ctx,idx) => { + {contexts?.contexts?.map((ctx, idx) => { const meshStatus = getMeshSyncStatus(ctx.id); const brokerStatus = getBrokerStatus(ctx.id); const operStatus = getOperatorStatus(ctx.id); @@ -490,11 +490,11 @@ function K8sContextMenu({ meshStatus ? : } variant="filled" @@ -675,4 +675,4 @@ const mapDispatchToProps = (dispatch) => ({ }); -export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(withNotify(Header))); +export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(withNotify(Header))); \ No newline at end of file From 152ff2730b0b5a74f0b36ec76f9d26dba712c41e Mon Sep 17 00:00:00 2001 From: aabidsofi19 <65964225+aabidsofi19@users.noreply.github.com> Date: Wed, 6 Sep 2023 04:36:19 +0000 Subject: [PATCH 5/5] Fixed notification details Signed-off-by: aabidsofi19 <65964225+aabidsofi19@users.noreply.github.com> --- ui/components/ConnectionWizard/helpers/common.js | 8 +++++++- ui/components/Header.js | 4 ++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/ui/components/ConnectionWizard/helpers/common.js b/ui/components/ConnectionWizard/helpers/common.js index 4126a3e4175..4ef17d7ec87 100644 --- a/ui/components/ConnectionWizard/helpers/common.js +++ b/ui/components/ConnectionWizard/helpers/common.js @@ -9,10 +9,16 @@ export const closeButtonForSnackbarAction = (closeSnackbar) => (key) => ( ) + + export const successHandlerGenerator = (notify, msg, cb) => (res) => { + if (res !== undefined) { if (cb !== undefined) cb(res) - notify({ message : `${msg}: ${res}`, details : res, event_type : EVENT_TYPES.SUCCESS }) + if (typeof res == "object") { + res = JSON.stringify(res) + } + notify({ message : `${msg}`, details : `${res}`, event_type : EVENT_TYPES.SUCCESS }) } } diff --git a/ui/components/Header.js b/ui/components/Header.js index 947bfffc730..e7dbaddf20d 100644 --- a/ui/components/Header.js +++ b/ui/components/Header.js @@ -339,8 +339,8 @@ function K8sContextMenu({ updateProgress({ showProgress : true }) // const notify = this.props.notify; pingKubernetes( - successHandlerGenerator(notify, `Kubernetes pinged ${name}`, () => updateProgress({ showProgress : false }),), - errorHandlerGenerator(notify, `Not able to ping kubernetes ${name}`, () => updateProgress({ showProgress : false })), + successHandlerGenerator(notify, `Kubernetes pinged: ${name}`, () => updateProgress({ showProgress : false }),), + errorHandlerGenerator(notify, `Not able to ping kubernetes: ${name}`, () => updateProgress({ showProgress : false })), connectionID ) }