zRains commented on code in PR #3970:
URL: https://github.com/apache/ambari/pull/3970#discussion_r2020148856
##########
ambari-admin/src/main/resources/ui/ambari-admin/src/NavBar.tsx:
##########
@@ -0,0 +1,98 @@
+import { faUser } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useEffect, useState } from "react";
+import {
+ Container,
+ Navbar,
+ Nav,
+ Dropdown,
+ DropdownDivider,
+} from "react-bootstrap";
+import {
+ decryptData,
+ getFromLocalStorage,
+ parseJSONData
+} from "./api/Utility.ts";
+import { get } from "lodash";
+import AmbariAboutModal from "./AmbariAboutModal";
+
+type NavBarProps = {
+ subPath: string;
+ clusterName: string;
+};
+
+export default function NavBar({ subPath, clusterName }: NavBarProps) {
+ const [showAmbariAboutModal, setShowAmbariAboutModal] = useState(false);
+ const [loginUserName, setLoginUserName] = useState("");
+ const [ambariLsVal, setAmbariLsVal] = useState(null);
+
+ useEffect(() => {
+ let ambariKey = getFromLocalStorage('ambari');
+ if (ambariKey) {
+ setAmbariLsVal(parseJSONData(decryptData(ambariKey)));
+ }
+ }, []);
+
+ useEffect(() => {
+ if (ambariLsVal) {
+ const loginName = get(ambariLsVal, 'app.loginName');
+ if (loginName) {
+ setLoginUserName(loginName);
+ }
+ }
+ }, [ambariLsVal]);
+
+ return (
+ <div>
+ {showAmbariAboutModal ? (
+ <AmbariAboutModal
+ isOpen={showAmbariAboutModal}
+ onClose={() => setShowAmbariAboutModal(false)}
+ />
+ ) : null}
+ <Navbar collapseOnSelect expand="lg" className="bg-white">
+ <Container className="d-flex justify-content-between">
+ <Navbar.Brand
+ className="text-black m-0 breadcrumb d-flex
align-items-center"
+ style={{ fontSize: 24 }}
+ >
+ {" "}
Review Comment:
Remove redundant strings.
##########
ambari-admin/src/main/resources/ui/ambari-admin/src/api/logout.ts:
##########
@@ -0,0 +1,35 @@
+import { encryptData, decryptData, getFromLocalStorage, parseJSONData,
setInLocalStorage } from "./Utility.ts";
+import { adminApi } from "./configs/axiosConfig.ts";
+import { AxiosError } from 'axios';
+
+const signOut = async () => {
+ // var data = JSON.parse(decryptData(localStorage.getItem("ambari")));
+ let ambariKey = getFromLocalStorage('ambari');
+ let data;
+ if (ambariKey) {
+ data = parseJSONData(decryptData(ambariKey));
+ }
+ delete data.app.authenticated;
+ delete data.app.loginName;
+ delete data.app.user;
+
+ //with encrypting set data in LS
+ setInLocalStorage('ambari', encryptData(JSON.stringify(data)));
+
+ const headers = {
+ 'Authorization': 'Basic ' + 'invalid_username:password'
Review Comment:
The current ambari-server uses cookie-based authentication, but it seems
you’ve implemented it using a JWT approach. What is the purpose of this here?
##########
ambari-admin/src/main/resources/ui/ambari-admin/src/NavBar.tsx:
##########
@@ -0,0 +1,98 @@
+import { faUser } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useEffect, useState } from "react";
+import {
+ Container,
+ Navbar,
+ Nav,
+ Dropdown,
+ DropdownDivider,
+} from "react-bootstrap";
+import {
+ decryptData,
+ getFromLocalStorage,
+ parseJSONData
+} from "./api/Utility.ts";
+import { get } from "lodash";
+import AmbariAboutModal from "./AmbariAboutModal";
Review Comment:
File missing.
##########
ambari-admin/src/main/resources/ui/ambari-admin/src/NavBar.tsx:
##########
@@ -0,0 +1,98 @@
+import { faUser } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useEffect, useState } from "react";
+import {
+ Container,
+ Navbar,
+ Nav,
+ Dropdown,
+ DropdownDivider,
+} from "react-bootstrap";
+import {
+ decryptData,
+ getFromLocalStorage,
+ parseJSONData
+} from "./api/Utility.ts";
+import { get } from "lodash";
+import AmbariAboutModal from "./AmbariAboutModal";
+
+type NavBarProps = {
+ subPath: string;
+ clusterName: string;
+};
+
+export default function NavBar({ subPath, clusterName }: NavBarProps) {
+ const [showAmbariAboutModal, setShowAmbariAboutModal] = useState(false);
+ const [loginUserName, setLoginUserName] = useState("");
+ const [ambariLsVal, setAmbariLsVal] = useState(null);
+
+ useEffect(() => {
+ let ambariKey = getFromLocalStorage('ambari');
+ if (ambariKey) {
+ setAmbariLsVal(parseJSONData(decryptData(ambariKey)));
+ }
+ }, []);
+
+ useEffect(() => {
+ if (ambariLsVal) {
+ const loginName = get(ambariLsVal, 'app.loginName');
+ if (loginName) {
+ setLoginUserName(loginName);
+ }
+ }
+ }, [ambariLsVal]);
+
+ return (
+ <div>
+ {showAmbariAboutModal ? (
+ <AmbariAboutModal
+ isOpen={showAmbariAboutModal}
+ onClose={() => setShowAmbariAboutModal(false)}
+ />
+ ) : null}
Review Comment:
My understanding is that `isOpen` alone can control the display and hiding
of `AmbariAboutModal`. Why is an additional layer of render conditional
wrapping needed?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: dev-unsubscr...@ambari.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscr...@ambari.apache.org
For additional commands, e-mail: dev-h...@ambari.apache.org
