+
+ Settings
+
+
+ );
+ }
+
+ return (
+ Please log in
+
+ {props.children}
+
+ );
+}
+
+function Logout() {
+ const [, logout] = useLogout();
+
+ return (
+
+ { logout(); }}>Logout
+
+ );
+}
+
+function App() {
+ return (
+
+ {/* 100vh to fill the whole screen */}
+
+ );
+}
+
+export default App;
diff --git a/client/web/antrea-ui/src/api/account.tsx b/client/web/antrea-ui/src/api/account.tsx
new file mode 100644
index 00000000..1485716a
--- /dev/null
+++ b/client/web/antrea-ui/src/api/account.tsx
@@ -0,0 +1,16 @@
+import api from './axios';
+import { handleError } from './common';
+import { encode } from 'base-64';
+
+export const accountAPI = {
+ updatePassword: async (currentPassword: string, newPassword: string): Promise
+
+
+ 
+
+
+
+
+
+ Antrea UI
+
+
+
+
+
+
+
+
+ {text}
; + } else { + return ( +
+
+ );
+ }
+ }
+ // Normally, just render children
+ return <>{props.children};
+}
diff --git a/client/web/antrea-ui/src/config.tsx b/client/web/antrea-ui/src/config.tsx
new file mode 100644
index 00000000..6707b2c1
--- /dev/null
+++ b/client/web/antrea-ui/src/config.tsx
@@ -0,0 +1,10 @@
+const apiServer = process.env.REACT_APP_API_SERVER || "";
+const apiVersion = "v1";
+
+const config = {
+ apiServer: apiServer,
+ apiVersion: apiVersion,
+ apiUri: `${apiServer}/api/${apiVersion}`,
+};
+
+export default config;
diff --git a/client/web/antrea-ui/src/index.css b/client/web/antrea-ui/src/index.css
new file mode 100644
index 00000000..ec2585e8
--- /dev/null
+++ b/client/web/antrea-ui/src/index.css
@@ -0,0 +1,13 @@
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+}
diff --git a/client/web/antrea-ui/src/index.tsx b/client/web/antrea-ui/src/index.tsx
new file mode 100644
index 00000000..f1343ea4
--- /dev/null
+++ b/client/web/antrea-ui/src/index.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import Summary from './routes/summary';
+import Traceflow from './routes/traceflow';
+import TraceflowResult from './routes/traceflowresult';
+import Settings from './routes/settings';
+import reportWebVitals from './reportWebVitals';
+import {
+ createBrowserRouter,
+ RouterProvider,
+} from "react-router-dom";
+
+const router = createBrowserRouter([
+ {
+ path: "/",
+ element: {text}
+
+
+
+ Update Password
+
+
+
+
+
+
+
+ {props.title}
+
+ | {name} | + )) + } +
|---|
| {v} | + )) + } +
+
+
+
+
+
+ Summary
+
+
+
+
+ Traceflow
+ +
+
+ Missing Traceflow Result
+ ); + } + + const phase = state.status.phase; + + if (phase !== "Succeeded" && phase !== "Failed") { + // The API should guarantee that this never happens + return ( +Invalid Traceflow Phase
+ ); + } + + return ( +
+
+ );
+}
diff --git a/client/web/antrea-ui/src/setupTests.ts b/client/web/antrea-ui/src/setupTests.ts
new file mode 100644
index 00000000..8f2609b7
--- /dev/null
+++ b/client/web/antrea-ui/src/setupTests.ts
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
diff --git a/client/web/antrea-ui/src/store.tsx b/client/web/antrea-ui/src/store.tsx
new file mode 100644
index 00000000..0b8f6508
--- /dev/null
+++ b/client/web/antrea-ui/src/store.tsx
@@ -0,0 +1,36 @@
+import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+interface state {
+ // if token is undefined: we do not have a token in memory but we may have a
+ // valid HTTP cookie with a refresh token
+ // if token is empty string: we do not have a token in memory and we known
+ // that we no longer have a valid HTTP cookie with a refresh token (because
+ // we have attempted a refresh)
+ // if token is a non-empty string: we have an access token
+ token?: string
+}
+
+const initialState = {
+ token: undefined,
+} as state;
+
+const authSlice = createSlice({
+ name: 'auth',
+ initialState: initialState,
+ reducers: {
+ setToken(state, action: PayloadActionResult
+ {phase === "Succeeded" + ?