feat(stream_routes): show disabled error (#3130)

* feat(stream_routes): show disabled error

* test: add show disabled error case

* fix

Author: SkyeYoung

e2e/pom/stream_routes.ts

@@ -0,0 +1,26 @@
+/**
+ * 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 { uiGoto } from '@e2e/utils/ui';
+import type { Page } from '@playwright/test';
+
+const goto = {
+  toIndex: (page: Page) => uiGoto(page, '/stream_routes'),
+};
+
+export const streamRoutesPom = {
+  ...goto,
+};

e2e/tests/stream_routes.show-disabled-error.spec.ts

@@ -0,0 +1,107 @@
+/**
+ * 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.
+ */
+/**
+ * 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 { exec } from 'node:child_process';
+import { readFile, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import { promisify } from 'node:util';
+
+import { streamRoutesPom } from '@e2e/pom/stream_routes';
+import { test } from '@e2e/utils/test';
+import { expect } from '@playwright/test';
+import { produce, type WritableDraft } from 'immer';
+import { parse, stringify } from 'yaml';
+
+const execAsync = promisify(exec);
+
+type APISIXConf = {
+  apisix: {
+    proxy_mode: string;
+  };
+};
+
+const getE2EServerDir = () => {
+  const currentDir = new URL('.', import.meta.url).pathname;
+  return path.join(currentDir, '../server');
+};
+
+const updateAPISIXConf = async (
+  func: (v: WritableDraft<APISIXConf>) => void
+) => {
+  const confPath = path.join(getE2EServerDir(), 'apisix_conf.yml');
+  const fileContent = await readFile(confPath, 'utf-8');
+  const config = parse(fileContent) as APISIXConf;
+
+  const updatedContent = stringify(produce(config, func));
+  await writeFile(confPath, updatedContent, 'utf-8');
+};
+
+const restartDockerServices = async () => {
+  await execAsync('docker compose restart apisix', { cwd: getE2EServerDir() });
+  const url = 'http://127.0.0.1:6174/ui/';
+  const maxRetries = 20;
+  const interval = 1000;
+  for (let i = 0; i < maxRetries; i++) {
+    const res = await fetch(url);
+    if (res.ok) return;
+    await new Promise((resolve) => setTimeout(resolve, interval));
+  }
+  throw new Error('APISIX is not ready');
+};
+
+test.beforeAll(async () => {
+  await updateAPISIXConf((d) => {
+    d.apisix.proxy_mode = 'http';
+  });
+  await restartDockerServices();
+});
+
+test.afterAll(async () => {
+  await updateAPISIXConf((d) => {
+    d.apisix.proxy_mode = 'http&stream';
+  });
+  await restartDockerServices();
+});
+
+test('show disabled error', async ({ page }) => {
+  await streamRoutesPom.toIndex(page);
+
+  await expect(page.locator('main > span')).toContainText(
+    'stream mode is disabled, can not add stream routes'
+  );
+
+  // Verify the error message is still shown after refresh
+  await page.reload();
+  await expect(page.locator('main > span')).toContainText(
+    'stream mode is disabled, can not add stream routes'
+  );
+});

src/components/page-slice/stream_routes/ErrorComponent.tsx

@@ -0,0 +1,33 @@
+/**
+ * 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 {
+  ErrorComponent,
+  type ErrorComponentProps,
+} from '@tanstack/react-router';
+import { AxiosError } from 'axios';
+
+import type { APISIXRespErr } from '@/config/req';
+
+export const StreamRoutesErrorComponent = (props: ErrorComponentProps) => {
+  if (props.error instanceof AxiosError) {
+    const err = props.error as AxiosError<APISIXRespErr>;
+    if (err.response?.status === 400) {
+      return <span>{err.response?.data.error_msg}</span>;
+    }
+  }
+  return <ErrorComponent {...props} />;
+};

src/config/req.ts

@@ -44,7 +44,7 @@ req.interceptors.request.use((conf) => {
   return conf;
 });
 
-type APISIXRespErr = {
+export type APISIXRespErr = {
   error_msg?: string;
   message?: string;
 };

src/routes/services/detail.$id/stream_routes/add.tsx

@@ -23,6 +23,7 @@ import { useTranslation } from 'react-i18next';
 
 import { FormTOCBox } from '@/components/form-slice/FormSection';
 import PageHeader from '@/components/page/PageHeader';
+import { StreamRoutesErrorComponent } from '@/components/page-slice/stream_routes/ErrorComponent';
 import { StreamRouteAddForm } from '@/routes/stream_routes/add';
 import { CommonFormContext } from '@/utils/form-context';
 
@@ -54,4 +55,5 @@ function RouteComponent() {
 
 export const Route = createFileRoute('/services/detail/$id/stream_routes/add')({
   component: RouteComponent,
+  errorComponent: StreamRoutesErrorComponent,
 });

src/routes/services/detail.$id/stream_routes/detail.$routeId.tsx

@@ -20,6 +20,7 @@ import {
   useParams,
 } from '@tanstack/react-router';
 
+import { StreamRoutesErrorComponent } from '@/components/page-slice/stream_routes/ErrorComponent';
 import { StreamRouteDetail } from '@/routes/stream_routes/detail.$id';
 import { CommonFormContext } from '@/utils/form-context';
 
@@ -47,4 +48,5 @@ export const Route = createFileRoute(
   '/services/detail/$id/stream_routes/detail/$routeId'
 )({
   component: RouteComponent,
+  errorComponent: StreamRoutesErrorComponent,
 });

src/routes/services/detail.$id/stream_routes/index.tsx

@@ -20,6 +20,7 @@ import { useTranslation } from 'react-i18next';
 import { getStreamRouteListQueryOptions } from '@/apis/hooks';
 import PageHeader from '@/components/page/PageHeader';
 import { ToDetailPageBtn } from '@/components/page/ToAddPageBtn';
+import { StreamRoutesErrorComponent } from '@/components/page-slice/stream_routes/ErrorComponent';
 import { queryClient } from '@/config/global';
 import { StreamRouteList } from '@/routes/stream_routes';
 import { pageSearchSchema } from '@/types/schema/pageSearch';
@@ -51,6 +52,7 @@ function StreamRouteComponent() {
 
 export const Route = createFileRoute('/services/detail/$id/stream_routes/')({
   component: StreamRouteComponent,
+  errorComponent: StreamRoutesErrorComponent,
   validateSearch: pageSearchSchema,
   loaderDeps: ({ search }) => search,
   loader: ({ deps }) =>

src/routes/stream_routes/add.tsx

@@ -30,6 +30,7 @@ import {
 } from '@/components/form-slice/FormPartStreamRoute/schema';
 import { FormTOCBox } from '@/components/form-slice/FormSection';
 import PageHeader from '@/components/page/PageHeader';
+import { StreamRoutesErrorComponent } from '@/components/page-slice/stream_routes/ErrorComponent';
 import { req } from '@/config/req';
 import type { APISIXType } from '@/types/schema/apisix';
 import { produceRmUpstreamWhenHas } from '@/utils/form-producer';
@@ -101,4 +102,5 @@ function RouteComponent() {
 
 export const Route = createFileRoute('/stream_routes/add')({
   component: RouteComponent,
+  errorComponent: StreamRoutesErrorComponent,
 });

src/routes/stream_routes/detail.$id.tsx

@@ -36,6 +36,7 @@ import { FormTOCBox } from '@/components/form-slice/FormSection';
 import { FormSectionGeneral } from '@/components/form-slice/FormSectionGeneral';
 import { DeleteResourceBtn } from '@/components/page/DeleteResourceBtn';
 import PageHeader from '@/components/page/PageHeader';
+import { StreamRoutesErrorComponent } from '@/components/page-slice/stream_routes/ErrorComponent';
 import { API_STREAM_ROUTES } from '@/config/constant';
 import { req } from '@/config/req';
 import { APISIX, type APISIXType } from '@/types/schema/apisix';
@@ -166,4 +167,5 @@ function RouteComponent() {
 
 export const Route = createFileRoute('/stream_routes/detail/$id')({
   component: RouteComponent,
+  errorComponent: StreamRoutesErrorComponent,
 });

src/routes/stream_routes/index.tsx

@@ -25,6 +25,7 @@ import type { WithServiceIdFilter } from '@/apis/routes';
 import { DeleteResourceBtn } from '@/components/page/DeleteResourceBtn';
 import PageHeader from '@/components/page/PageHeader';
 import { ToAddPageBtn, ToDetailPageBtn } from '@/components/page/ToAddPageBtn';
+import { StreamRoutesErrorComponent } from '@/components/page-slice/stream_routes/ErrorComponent';
 import { AntdConfigProvider } from '@/config/antdConfigProvider';
 import { API_STREAM_ROUTES } from '@/config/constant';
 import { queryClient } from '@/config/global';
@@ -155,6 +156,7 @@ function StreamRouteComponent() {
 
 export const Route = createFileRoute('/stream_routes/')({
   component: StreamRouteComponent,
+  errorComponent: StreamRoutesErrorComponent,
   validateSearch: pageSearchSchema,
   loaderDeps: ({ search }) => search,
   loader: ({ deps }) =>