[refactor] Update OIDCProvider & EventItem

.env.exmaple

@@ -0,0 +1,7 @@
+SD_BACKEND_URL="https://localhost:8080/v2"
+
+SD_CLIENT_ID=""
+SD_AUTHORITY_URL=""
+SD_REDIRECT_URL="https://localhost/signin-oidc"
+SD_LOGOUT_REDIRECT_URL="https://localhost/signout-callback-oidc"
+SD_AUTH_SECRET=""

package.json

@@ -27,13 +27,13 @@
   },
   "devDependencies": {
     "@farmfe/cli": "^1.0.4",
-    "@farmfe/core": "^1.4.1",
+    "@farmfe/core": "^1.4.4",
     "@farmfe/js-plugin-postcss": "^1.9.0",
-    "@farmfe/plugin-react": "^1.2.4",
+    "@farmfe/plugin-react": "^1.2.6",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@types/lodash": "^4.17.13",
-    "@types/node": "^22.9.1",
+    "@types/node": "^22.9.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/react-helmet": "^6.1.11",

src/Components/Auth/index.tsx

@@ -12,32 +12,20 @@ import { useRouter } from "../Router";
  * @version 1.0.0
  */
 export function OIDCProvider({ children }: { children: ReactNode }): ReactNode {
-  const { Rep } = useRouter();
+  const { Reload } = useRouter();
 
   return (
     <AuthProvider
-      client_id="status-dashboard"
+      client_id={process.env.SD_CLIENT_ID}
       scope="openid profile email"
       userStore={new WebStorageStateStore({ store: window.localStorage })}
-      onSigninCallback={() => {
-        Rep("/");
-        location.reload();
-      }}
-      authority={
-        process.env.NODE_ENV === "development"
-          ? "http://80.158.108.251:8080/realms/sd2"
-          : "https://keycloak.eco.tsi-dev.otc-service.com/realms/eco"
-      }
-      post_logout_redirect_uri={
-        process.env.NODE_ENV === "development"
-          ? "http://localhost:9000/Logout"
-          : "https://sd3.eco.tsi-dev.otc-service.com/Logout"
-      }
-      redirect_uri={
-        process.env.NODE_ENV === "development"
-          ? "http://localhost:9000/Login"
-          : "https://sd3.eco.tsi-dev.otc-service.com/Login"
-      }
+      onSigninCallback={() => Reload("/")}
+      onSignoutCallback={() => Reload("/")}
+      matchSignoutCallback={(args) => window.location.href === args.post_logout_redirect_uri}
+      authority={process.env.SD_AUTHORITY_URL}
+      post_logout_redirect_uri={process.env.SD_LOGOUT_REDIRECT_URL}
+      redirect_uri={process.env.SD_REDIRECT_URL}
+      client_secret={process.env.SD_AUTH_SECRET}
     >
       <AuthHandler />
       {children}

src/Components/History/EventItem.tsx

@@ -36,14 +36,6 @@ export function EventItem({ Prev, Curr }: IEventItem) {
     }
   }, [label.current]);
 
-  const status = useMemo(() => {
-    return chain(Array.from(Curr.Histories))
-      .orderBy(x => x.Created, "desc")
-      .map(x => x.Status)
-      .first()
-      .value() ?? EventStatus.Investigating;
-  }, [Curr.Histories]);
-
   const services = useMemo(() => {
     return chain(Array.from(Curr.RegionServices))
       .map(x => x.Service)
@@ -73,7 +65,7 @@ export function EventItem({ Prev, Curr }: IEventItem) {
 
   let color: any;
 
-  switch (status) {
+  switch (Curr.Status) {
     case EventStatus.Investigating:
     case EventStatus.Fixing:
     case EventStatus.Monitoring:
@@ -112,7 +104,7 @@ export function EventItem({ Prev, Curr }: IEventItem) {
 
         <div className="flex gap-x-2.5">
           <ScaleTag color={color}>
-            {status}
+            {Curr.Status}
           </ScaleTag>
 
           {services.slice(0, 3).map(service => (

src/Pages/index.tsx

@@ -20,9 +20,12 @@ export function Layout() {
 
   const match = useMemo(() => {
     switch (path) {
-      case "Login":
+      case "signin-oidc":
         return <ScaleLoadingSpinner size="large" text="Login Redirecting..." />;
 
+      case "signout-callback-oidc":
+        return <ScaleLoadingSpinner size="large" text="Logout Redirecting..." />;
+
       case "Reload":
         return <ScaleLoadingSpinner size="large" text="Reloading..." />;
 

src/Services/Status.tsx

@@ -184,20 +184,18 @@ export function StatusContext({ children }: { children: JSX.Element }) {
   const [db, setDB] = useState(DB);
 
   const url = process.env.SD_BACKEND_URL;
-  const uri = process.env.SD_BACKEND_API;
-  const file = process.env.SD_BACKEND_FILE === "true";
 
   useRequest(
     async () => {
       log.info(`Loading status data from v2...`);
 
-      const compLink = file ? "/mock.json" : `${url}${uri}/components`;
+      const compLink = `${url}/components`;
       const compRes = await fetch(compLink);
       const compData = await compRes.json();
 
       log.debug("Components Status loaded.", compData);
 
-      const eventLink = file ? "/event.json" : `${url}${uri}/incidents`;
+      const eventLink = `${url}/incidents`;
       const eventRes = await fetch(eventLink);
       const eventData = (await eventRes.json()).data;