AMBARI-26343 React Implementation: Authentication Components

ambari-admin/src/main/resources/ui/ambari-admin/package.json

@@ -16,6 +16,7 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@tanstack/react-table": "^8.20.5",
     "@types/lodash": "^4.17.12",
+    "@types/recharts": "^1.8.29",
     "axios": "^1.7.7",
     "bootstrap": "^5.3.3",
     "history": "^5.3.0",
@@ -27,6 +28,7 @@
     "react-hot-toast": "^2.4.1",
     "react-router-dom": "^5.3.4",
     "react-select": "^5.8.3",
+    "recharts": "^2.15.1",
     "sass": "^1.77.6"
   },
   "devDependencies": {
@@ -36,6 +38,7 @@
     "@testing-library/react": "^16.0.1",
     "@types/axios": "^0.14.4",
     "@types/history": "^5.0.0",
+    "@types/node": "^22.13.11",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",

ambari-admin/src/main/resources/ui/ambari-admin/src/App.tsx

@@ -24,65 +24,88 @@ import NavBar from "./layout/NavBar";
 import AppContent from "./context/AppContext";
 import { Toaster } from "react-hot-toast";
 import { HashRouter } from "react-router-dom";
+import { AuthProvider, useAuth } from "./context/AuthContext";
+import Login from "./screens/Login";
 
-function App() {
+// Main application component that requires authentication
+const MainApp: React.FC = () => {
   const [selectedOption, setSelectedOption] = useState<string>(
     SideItemLabels.CLUSTERINFORMATION
   );
   const [rbacData, setRbacData] = useState({});
   const [ambariVersion, setAmbariVersion] = useState<string>("");
   const [permissionLabelList, setPermissionLabelList] = useState<string[]>([]);
   const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+  const { logout } = useAuth();
 
-  console.log("In App");
+  console.log("In MainApp");
 
   return (
-    <HashRouter>
-      <AppContent.Provider
-        value={{
-          selectedOption,
-          setSelectedOption,
-          rbacData,
-          setRbacData,
-          permissionLabelList,
-          setPermissionLabelList,
-          ambariVersion,
-          setAmbariVersion,
-        }}
-      >
-        <Toaster />
-        <div className="d-flex h-100" style={{ maxHeight: "100vh" }}>
-          <SideBar
-            clusterExists={false}
-            isSidebarCollapsed={isSidebarCollapsed}
-            setIsSidebarCollapsed={setIsSidebarCollapsed}
-            isRoot
+    <AppContent.Provider
+      value={{
+        selectedOption,
+        setSelectedOption,
+        rbacData,
+        setRbacData,
+        permissionLabelList,
+        setPermissionLabelList,
+        ambariVersion,
+        setAmbariVersion,
+      }}
+    >
+      <Toaster />
+      <div className="d-flex h-100" style={{ maxHeight: "100vh" }}>
+        <SideBar
+          clusterExists={false}
+          isSidebarCollapsed={isSidebarCollapsed}
+          setIsSidebarCollapsed={setIsSidebarCollapsed}
+          isRoot
+          onLogout={logout}
+        />
+        <div
+          className={`d-flex flex-column ${isSidebarCollapsed?"main-content-collapsed":"main-content"}`}
+          style={{
+            background: "#e6e6e6",
+            maxHeight: "100%",
+            overflowY: "scroll",
+            height: "100%",
+            position: "absolute",
+            left: isSidebarCollapsed?"60px":"230px",
+            width: "calc(100% - " + (isSidebarCollapsed ? "60px" : "230px") + ")",
+          }}
+        >
+          <NavBar
+            subPath={selectedOption}
+            clusterName={""}
           />
-          <div
-            className={`d-flex flex-column ${isSidebarCollapsed?"main-content-collapsed":"main-content"}`}
-            style={{
-              background: "#e6e6e6",
-              maxHeight: "100%",
-              overflowY: "scroll",
-              height: "100%",
-              position: "absolute",
-              left: isSidebarCollapsed?"60px":"230px",
-            }}
-          >
-            <NavBar
-              subPath={selectedOption}
-              clusterName={""}
-            />
-            <Container className="mt-4">
-              <Card className="p-4 rounded-0">
-                <Routes />
-              </Card>
-            </Container>
-          </div>
+          <Container className="mt-4">
+            <Card className="p-4 rounded-0">
+              <Routes />
+            </Card>
+          </Container>
         </div>
-      </AppContent.Provider>
+      </div>
+    </AppContent.Provider>
+  );
+};
+
+// App wrapper that handles authentication state
+function App() {
+  return (
+    <HashRouter>
+      <AuthProvider>
+        <AppRouter />
+      </AuthProvider>
     </HashRouter>
   );
 }
 
+// Router component that conditionally renders Login or MainApp
+const AppRouter: React.FC = () => {
+  const { isAuthenticated } = useAuth();
+
+  // Render Login page or MainApp based on authentication status
+  return isAuthenticated ? <MainApp /> : <Login />;
+};
+
 export default App;

ambari-admin/src/main/resources/ui/ambari-admin/src/components/LoadingSpinner/LoadingSpinner.scss

@@ -0,0 +1,39 @@
+/**
+ * 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.
+ */
+
+.loading-spinner-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100%;
+
+  .loading-spinner-content {
+    text-align: center;
+
+    .spinner-border {
+      width: 3rem;
+      height: 3rem;
+    }
+
+    p {
+      font-size: 1.2rem;
+      color: #666;
+    }
+  }
+}

ambari-admin/src/main/resources/ui/ambari-admin/src/components/LoadingSpinner/index.tsx

@@ -0,0 +1,38 @@
+/**
+ * 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.
+ */
+
+import React from 'react';
+import { Spinner, Container } from 'react-bootstrap';
+import './LoadingSpinner.scss';
+
+interface LoadingSpinnerProps {
+  message?: string;
+}
+
+const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({ message = 'Loading...' }) => {
+  return (
+    <Container className="loading-spinner-container">
+      <div className="loading-spinner-content">
+        <Spinner animation="border" role="status" variant="primary" />
+        <p className="mt-3">{message}</p>
+      </div>
+    </Container>
+  );
+};
+
+export default LoadingSpinner;

ambari-admin/src/main/resources/ui/ambari-admin/src/components/LoginForm/LoginForm.scss

@@ -0,0 +1,74 @@
+/**
+ * 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.
+ */
+
+.login-form {
+  width: 100%;
+
+  h2 {
+    margin-bottom: 20px;
+    font-size: 1.5rem;
+    font-weight: normal;
+  }
+
+  .form-label {
+    font-weight: normal;
+    margin-bottom: 5px;
+  }
+
+  .form-control {
+    margin-bottom: 5px;
+    border-radius: 0;
+
+    &:focus {
+      box-shadow: none;
+      border-color: #ccc;
+    }
+
+    &.is-invalid {
+      border-color: #dc3545;
+      background-image: none;
+      padding-right: 0.75rem;
+    }
+  }
+
+  .invalid-feedback {
+    margin-bottom: 10px;
+    font-size: 0.8rem;
+  }
+
+  .sign-in-button {
+    background-color: #5cb85c;
+    border-color: #5cb85c;
+    border-radius: 0;
+    width: 100px;
+    text-transform: uppercase;
+    font-size: 0.8rem;
+    font-weight: bold;
+    margin-top: 10px;
+
+    &:hover, &:focus {
+      background-color: #4cae4c;
+      border-color: #4cae4c;
+    }
+
+    &:disabled {
+      background-color: #8bc58b;
+      border-color: #8bc58b;
+    }
+  }
+}