ATLAS-5062: UI:Fix for improving logout mechanism in Atlas UI code base.

dashboard/src/utils/Utils.ts

@@ -23,6 +23,8 @@ import sanitizeHtml from "sanitize-html";
 import { cloneDeep, toArrayifObject, uniq } from "./Helper";
 import { attributeFilter } from "./CommonViewFunction";
 import { Messages } from "./Messages";
+import { fetchApi } from "@api/apiMethods/fetchApi";
+import { NavigateFunction } from "react-router-dom";
 
 interface childrenInterface {
   gType: string;
@@ -797,6 +799,66 @@ const globalSearchParams = {
   dslParams: {}
 };
 
+export const handleLogout = async (
+  checkKnoxSSOVal: string | boolean | undefined,
+  navigate: NavigateFunction,
+  errorCode?:string
+) => {
+  try {
+    let logoutUrl = getBaseUrl(window.location.pathname) + "/logout";
+    await fetchApi(logoutUrl, {
+      headers: {
+        "cache-control": "no-cache"
+      }
+    });
+    if (checkKnoxSSOVal !== undefined || checkKnoxSSOVal !== null) {
+      if (checkKnoxSSOVal?.toString() == "false") {
+         localStorage.setItem("atlas_ui", "v3");
+        window.location.replace("login.jsp");
+        window.localStorage.clear();
+      } else {
+        navigate("/knoxSSOWarning", { state: { errorCode: errorCode || "" } });
+      }
+    } else {
+      localStorage.setItem("atlas_ui", "v3");
+      window.location.replace("login.jsp");
+    }
+  } catch (error) {
+    toast.error(`Error occurred while logout! ${error}`);
+  }
+};
+
+const checkKnoxSSO = async (navigate: NavigateFunction) => {
+  let checkKnoxSSOresp: any = {};
+  let checkssoUrl = getBaseUrl(window.location.pathname) + "/api/atlas/admin/checksso";
+  try {
+    checkKnoxSSOresp = await fetchApi(checkssoUrl, {
+      method: "GET",
+      headers: {
+        "cache-control": "no-cache"
+      }
+    });
+    const { data = "" } = checkKnoxSSOresp || {};
+    if (
+      localStorage.getItem("idleTimerLoggedOut") == "true" &&
+      data?.toString() == "true"
+    ) {
+      window.location.replace("index.html?action=timeout");
+    } else if (data?.toString() == "true") {
+      // Pass "checkSSOTrue" to handleLogout
+      handleLogout(data, navigate, "checkSSOTrue");
+    } else {
+      handleLogout(data, navigate);
+    }
+  } catch (error) {
+    const respStatus = checkKnoxSSOresp?.status || "";
+    if (respStatus == "419") {
+      window.location.replace("login.jsp");
+    }
+    console.error(`Error occurred while logout! ${error}`);
+  }
+};
+
 export {
   customSortBy,
   customSortByObjectKeys,
@@ -835,5 +897,6 @@ export {
   setNavigate,
   getNavigate,
   globalSearchParams,
-  globalSearchFilterInitialQuery
+  globalSearchFilterInitialQuery,
+  checkKnoxSSO
 };

dashboard/src/views/ErrorPage.tsx

@@ -16,35 +16,54 @@
  */
 
 import { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
 import errorIcon from "/img/error-404-icon.png";
 import { Stack, Typography } from "@mui/material";
 import { CustomButton } from "@components/muiComponents";
+import { useLocation } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+
 
 export const ErrorPage = (props: { errorCode: string }) => {
   let navigate = useNavigate();
-  const [errorCode, setErrorCode] = useState<string | null>(null);
+  const location = useLocation();
+  const code = location.state?.errorCode || props.errorCode || "404";
+
+  const [errorCode, setErrorCode] = useState<string>("");
   const [errorInfo, setErrorInfo] = useState<any>(null);
 
   useEffect(() => {
-    if (props.errorCode == "checkSSOTrue") {
+    if (code == "checkSSOTrue") {
       setErrorCode("Sign Out Is Not Complete!");
       setErrorInfo(
         <Typography>
-          Authentication to this instance of Ranger is managed externally(for
-          example,Apache Knox). You can still open this instance of Ranger from
+          Authentication to this instance of Atlas is managed externally(for
+          example,Apache Knox). You can still open this instance of Atlas from
           the same web browser without re-authentication.To prevent
-          additionalPage not found (404). access to Ranger,
+          additionalPage not found (404). access to Atlas,
           <strong>close all browser windows and exit the browser</strong>.
         </Typography>
       );
     }
-    if (props.errorCode == "404") {
+    else if (code == "404") {
       setErrorCode("Page not found (404).");
       setErrorInfo("Sorry, this page isn't here or has moved.");
     }
   });
 
+  const handleBackWithReload = () => {
+    localStorage.setItem("doGoBackAfterReload", "true");
+    window.location.reload();
+  };
+
+  useEffect(() => {
+    if (localStorage.getItem("doGoBackAfterReload") === "true") {
+      localStorage.removeItem("doGoBackAfterReload");
+      setTimeout(() => {
+        window.history.back();
+      }, 1000); 
+    }
+  }, []);
+
   return (
     <Stack
       data-id="pageNotFoundPage"
@@ -74,7 +93,7 @@ export const ErrorPage = (props: { errorCode: string }) => {
           </Stack>
         </Stack>
         <Stack direction="row" spacing={2} className="mt-2">
-          {props.errorCode !== "checkSSOTrue" && (
+          {code !== "checkSSOTrue" && (
             <CustomButton
               size="small"
               variant="contained"
@@ -84,6 +103,16 @@ export const ErrorPage = (props: { errorCode: string }) => {
               Return to Dashboard
             </CustomButton>
           )}
+          {code == "checkSSOTrue" && (
+            <CustomButton
+              size="small"
+              variant="contained"
+              color="primary"
+              onClick={handleBackWithReload}
+            >
+              Go Back
+            </CustomButton>
+          )}
         </Stack>
       </Stack>
     </Stack>

dashboard/src/views/Layout/Header.tsx

@@ -57,6 +57,7 @@ import { globalSessionData } from "@utils/Enum";
 import { downloadSearchResultsFileUrl } from "@api/apiUrlLinks/downloadApiUrl";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import { AntSwitch } from "@utils/Muiutils";
+import { checkKnoxSSO } from "@utils/Utils";
 
 interface Header {
   handleOpenModal: () => void;
@@ -145,8 +146,7 @@ const Header: React.FC<Header> = ({
 
   const handleLogout = () => {
     localStorage.setItem("atlas_ui", "v3");
-    let path = getBaseUrl(window.location.pathname);
-    window.location.href = path + "/logout.html";
+    checkKnoxSSO(navigate);
     handleClose();
   };
 

dashboard/src/views/Layout/Layout.tsx

@@ -17,17 +17,18 @@
 
 import { useEffect, useState } from "react";
 import SideBarBody from "../SideBar/SideBarBody";
-import { Navigate, useLocation } from "react-router-dom";
+import { Navigate, useLocation, useNavigate } from "react-router-dom";
 import Statistics from "@views/Statistics/Statistics";
 import CustomModal from "@components/Modal";
 import About from "./About";
 import { useIdleTimer } from "react-idle-timer";
 import { Typography } from "@mui/material";
-import { getBaseUrl } from "@utils/Utils";
+import { checkKnoxSSO } from "@utils/Utils";
 import { useAppSelector } from "@hooks/reducerHook";
 
 const Layout: React.FC = () => {
   const location = useLocation();
+  const navigate = useNavigate();
   const { sessionObj = "" }: any = useAppSelector(
     (state: any) => state.session
   );
@@ -90,8 +91,7 @@ const Layout: React.FC = () => {
 
   const handleLogout = () => {
     localStorage.setItem("atlas_ui", "v3");
-    let path = getBaseUrl(window.location.pathname);
-    window.location.href = path + "/logout.html";
+    checkKnoxSSO(navigate);
     handleCloseSessionModal();
   };
 

dashboard/src/views/Router.tsx

@@ -15,9 +15,10 @@
  * limitations under the License.
  */
 
-import { Routes, Route, HashRouter } from "react-router-dom";
+import { Routes, Route, HashRouter, useLocation } from "react-router-dom";
 import { lazy } from "react";
 import DebugMetrics from "@views/Layout/DebugMetrics";
+import ErrorPage from "./ErrorPage";
 
 const Layout = lazy(() => import("@views/Layout/Layout"));
 const SearchResult = lazy(() => import("@views/SearchResult/SearchResult"));
@@ -50,7 +51,14 @@ const RelationshipDetailsLayout = lazy(
     import("@views/DetailPage/RelationshipDetails/RelationshipDetailsLayout")
 );
 
+const KnoxSSOWarningWrapper = () => {
+  const location = useLocation();
+  const errorCode = location.state?.errorCode || "";
+  return <ErrorPage errorCode={errorCode} />;
+};
+
 const Router = () => {
+
   return (
     <HashRouter>
       <Routes>
@@ -77,6 +85,11 @@ const Router = () => {
             element={<RelationshipDetailsLayout />}
           />
           <Route path="/debugMetrics" element={<DebugMetrics />} />
+
+          <Route
+            path="/knoxSSOWarning"
+            element={<KnoxSSOWarningWrapper />}
+          />
           <Route path="*" element={<DashBoard />} />
         </Route>
       </Routes>

dashboardv2/public/css/scss/common.scss

@@ -386,4 +386,45 @@ pre {
 
 .termBox {
     z-index: 1;
+}
+
+.new-error-page {
+  height: calc(100vh - 200px);
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items:center;
+}
+
+.new-error-box {
+  display: table;
+  max-width: 40%;
+  min-width: 450px;
+}
+
+.error-white-bg {
+  background-color: #fff;
+  display: flex;
+  flex-direction:column;
+  gap:1rem;
+}
+
+.new-icon-box,
+.new-description-box {
+  display: table-cell;
+  vertical-align: middle;
+  color: #888;
+}
+
+.new-icon-box {
+  width: 60px;
+  text-align: center;
+}
+
+.m-t-xs{
+  margin-top:5px;
+}
+
+.m-t-md{
+  margin-top:15px;
 }

dashboardv2/public/js/templates/common/ErrorView_templ.html

@@ -0,0 +1,36 @@
+{{!-- 
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+--}}
+
+<div data-id="pageNotFoundPage" class="new-error-page">
+    <div class="new-error-box">
+        <div class="error-white-bg">
+            <div class="new-icon-box">
+                <img src="img/error-404-icon.png" style="margin-top:5px">
+            </div>
+            <div class="new-description-box">
+                <h4 class="m-t-xs m-b-xs" data-id="msg"></h4>
+                <div data-id="moreInfo"></div>
+            </div>
+             <div class="m-t-md">
+                <a href="javascript:;" class="btn btn-primary btn-sm" data-id="goBack">
+                <i class="fa-fw fa fa-long-arrow-left"></i> Go back
+                </a>
+                <a href="#/" class="btn btn-sm" data-id="home">Home</a>
+            </div>
+        </div>
+    </div>
+</div>

dashboardv2/public/js/utils/Messages.js

@@ -56,6 +56,11 @@ define(['require'], function(require) {
         getAbbreviationMsg: function(abbrev, type) {
             var msg = abbrev ? "s were" : " was";
             return msg + this[type];
+        },
+        errorMsg: {
+            signOutIsNotComplete: 'Authentication to this instance of Atlas is managed externally(for example,Apache Knox). \
+                                   You can still open this instance of Atlas from the same web browser without re-authentication. \
+                                   To prevent additional access to Atlas, <b>close all browser windows and exit the browser</b>.'
         }
     };
     return Messages;

dashboardv2/public/js/utils/UrlLinks.js

@@ -298,6 +298,12 @@ define(['require', 'utils/Enums', 'utils/Utils', 'underscore'], function(require
         },
         downloadSearchResultsFileUrl: function(fileName) {
             return this.baseUrlV2 + '/search/download/' + fileName;
+        },
+        checkKnoxSsoApiUrl: function() {
+            return this.baseUrl + '/admin/checksso';
+        },
+        logOutUrl: function() {
+            return UrlLinks.apiBaseUrl + '/logout';
         }
     });
 

dashboardv2/public/js/utils/Utils.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums', 'moment', 'store', 'modules/Modal', 'DOMPurify', 'moment-timezone', 'pnotify.buttons', 'pnotify.confirm', 'trumbowyg'], function(require, Globals, pnotify, Messages, Enums, moment, store, Modal, DOMPurify) {
+define(['App','require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums', 'moment', 'store', 'modules/Modal', 'DOMPurify', 'moment-timezone', 'pnotify.buttons', 'pnotify.confirm', 'trumbowyg'], function(App,require, Globals, pnotify, Messages, Enums, moment, store, Modal, DOMPurify) {
     'use strict';
 
     var Utils = {};
@@ -1222,7 +1222,8 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
             }
 
             if (currentConfig.redirectUrl) {
-                window.location.href = currentConfig.redirectUrl;
+                App.rNHeader.currentView.checkKnoxSSO();
+
             }
         };