apache · sandeepk318 · Jun 1, 2026
diff --git a/ambari-admin/src/main/resources/ui/ambari-admin/.eslintrc.cjs b/ambari-admin/src/main/resources/ui/ambari-admin/.eslintrc.cjs
@@ -0,0 +1,35 @@
+/**
+ * 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.
+ */
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/ambari-admin/src/main/resources/ui/ambari-admin/package.json b/ambari-admin/src/main/resources/ui/ambari-admin/package.json
@@ -5,50 +5,53 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "test": "vitest",
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
-    "@fortawesome/react-fontawesome": "^0.2.2",
-    "@tanstack/react-table": "^8.20.5",
-    "@types/lodash": "^4.17.12",
-    "axios": "^1.7.7",
+    "@fortawesome/react-fontawesome": "^3.1.1",
+    "@tanstack/react-table": "^8.17.3",
+    "@types/react-table": "^7.7.20",
+    "axios": "^1.7.2",
     "bootstrap": "^5.3.3",
-    "history": "^5.3.0",
     "lodash": "^4.17.21",
-    "path": "^0.12.7",
-    "react": "^18.3.1",
-    "react-bootstrap": "^2.10.5",
-    "react-dom": "^18.3.1",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.10.2",
+    "react-bootstrap-icons": "^1.11.4",
+    "react-cookie": "^7.1.4",
+    "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
     "react-router-dom": "^5.3.4",
-    "react-select": "^5.8.3",
-    "sass": "^1.77.6"
+    "react-select": "^5.8.0",
+    "react-table": "^7.8.0",
+    "sass": "1.77.6"
   },
   "devDependencies": {
-    "@eslint/js": "^9.11.1",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
-    "@types/axios": "^0.14.4",
-    "@types/history": "^5.0.0",
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.13",
+    "@types/lodash": "^4.17.6",
+    "@types/node": "^22.5.0",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
     "@types/react-router-dom": "^5.3.3",
-    "@vitejs/plugin-react": "^4.3.2",
+    "@types/testing-library__react": "^10.2.0",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-istanbul": "^2.1.1",
-    "eslint": "^9.11.1",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.12",
-    "globals": "^15.9.0",
-    "jsdom": "^25.0.1",
-    "typescript": "^5.5.3",
-    "typescript-eslint": "^8.7.0",
-    "vite": "^5.4.8",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "jsdom": "^25.0.0",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.21",
     "vitest": "^2.1.1"
   }
 }
diff --git a/ambari-admin/src/main/resources/ui/ambari-admin/src/AmbariAboutModal.tsx b/ambari-admin/src/main/resources/ui/ambari-admin/src/AmbariAboutModal.tsx
@@ -0,0 +1,102 @@
+/**
+ * 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 { useContext, useEffect, useState } from "react";
+import { Button, Image, Modal } from "react-bootstrap";
+import ClusterApi from "./api/clusterApi";
+import AppContent from "./context/AppContext";
+import { get } from "lodash";
+import Spinner from "./components/Spinner";
+import AmbariLogo from "./assets/img/ambari-logo.png"
+type AmbariAboutModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export default function AmbariAboutModal({
+  isOpen,
+  onClose,
+}: AmbariAboutModalProps) {
+  const { ambariVersion, setAmbariVersion } = useContext(AppContent);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    async function getAmbariAboutInfo() {
+      setLoading(true);
+      const data: any = await ClusterApi.adminAboutInfo(
+        "RootServiceComponents/component_version,RootServiceComponents/properties/server.os_family&minimal_response=true"
+      );
+      console.log("version", get(data, "RootServiceComponents.component_version"))
+      setAmbariVersion(get(data, "RootServiceComponents.component_version"));
+      setLoading(false);
+    }
+    if (!ambariVersion) {
+      getAmbariAboutInfo();
+    }
+  }, []);
+
+  return (
+    <Modal
+      show={isOpen}
+      onHide={onClose}
+      size="lg"
+      className="custom-modal-container"
+    >
+      <Modal.Header closeButton>
+        <Modal.Title>
+          <h3>About</h3>
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        {loading ? (
+          <Spinner />
+        ) : (
+          <div className="d-flex">
+            <Image
+              src={AmbariLogo}
+              height={75}
+              width={75}
+              className="me-5"
+            />
+            <div>
+              <h2>Apache Ambari</h2>
+              <div className="mb-3">Version {ambariVersion}</div>
+              <div>
+                <a href="http://ambari.apache.org/" className="custom-link">
+                  Get involved!
+                </a>
+              </div>
+              <div>
+                <a
+                  href="http://www.apache.org/licenses/LICENSE-2.0"
+                  className="custom-link"
+                >
+                  Licensed under the Apache License, Version 2.0
+                </a>
+              </div>
+            </div>
+          </div>
+        )}
+      </Modal.Body>
+      <Modal.Footer>
+        <Button className="custom-btn" variant="success" onClick={onClose}>
+          OK
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}