Migrate Traefik Proxy dashboard UI to React

webui/src/libs/fetch.ts

@@ -0,0 +1,24 @@
+import { BASE_PATH } from './utils'
+
+export default async function (input: RequestInfo, init?: RequestInit): Promise<JSON> {
+  const res = await fetch(`${BASE_PATH}${input}`, init)
+  if (!res.ok) throw new Error(res.statusText)
+  return await res.json()
+}
+
+export const fetchPage = async function (
+  input: RequestInfo,
+  init?: RequestInit,
+): Promise<Response & { data: unknown[]; nextPage: number }> {
+  const res = await fetch(`${BASE_PATH}${input}`, init)
+
+  if (!res.ok) throw new Error(res.statusText)
+
+  return res.json().then((data) => {
+    return {
+      ...res,
+      data,
+      nextPage: parseInt(res.headers.get('X-Next-Page') || '1'),
+    }
+  })
+}

webui/src/libs/fetchMany.ts

@@ -0,0 +1,16 @@
+import { Key } from 'swr'
+
+import { BASE_PATH } from './utils'
+
+export default async function <JSON>(key: Key): Promise<JSON[] | undefined> {
+  const [baseUrl, params, init] = key as Array<string | string[] | RequestInit>
+
+  if (!params || !Array.isArray(params)) return
+
+  const requests = params.map((param) => {
+    const apiUrl = `${BASE_PATH}${baseUrl}${param}`
+    return fetch(apiUrl, init as RequestInit).then((res) => res.json())
+  })
+
+  return await Promise.all(requests)
+}

webui/src/libs/objectHandlers.ts

@@ -0,0 +1,8 @@
+type ObjectWithMessage = {
+  message?: string
+}
+
+export const getValidData = <T extends ObjectWithMessage>(data?: T[]): T[] =>
+  data ? data.filter((item) => !item.message) : []
+export const getErrorData = <T extends ObjectWithMessage>(data?: T[]): T[] =>
+  data ? data.filter((item) => !!item.message) : []

webui/src/libs/parsers.ts

@@ -0,0 +1,14 @@
+import { Middleware } from 'hooks/use-resource-detail'
+
+export const parseMiddlewareType = (middleware: Middleware): string | undefined => {
+  if (middleware.plugin) {
+    const pluginObject = middleware.plugin || {}
+    const [pluginName] = Object.keys(pluginObject)
+
+    if (pluginName) {
+      return pluginName
+    }
+  }
+
+  return middleware.type
+}

webui/src/libs/utils.ts

@@ -0,0 +1,8 @@
+const getBasePath = () => {
+  const { VITE_APP_BASE_API_URL } = import.meta.env
+  const basePath = window.APIUrl || VITE_APP_BASE_API_URL || ''
+
+  return basePath.endsWith('/') ? basePath.slice(0, -1) : basePath
+}
+
+export const BASE_PATH = getBasePath()