feat: add support for disabling ssl certificate validation to able co…

…nnect self-signed es cluster

Signed-off-by: seven <[email protected]>

components.d.ts

@@ -20,6 +20,8 @@ declare module 'vue' {
     NGridItem: typeof import('naive-ui')['NGridItem']
     NIcon: typeof import('naive-ui')['NIcon']
     NInput: typeof import('naive-ui')['NInput']
+    NInputGroup: typeof import('naive-ui')['NInputGroup']
+    NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
@@ -30,8 +32,10 @@ declare module 'vue' {
     NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
+    NSwitch: typeof import('naive-ui')['NSwitch']
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']
+    NTooltip: typeof import('naive-ui')['NTooltip']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterMain: typeof import('./src/components/RouterMain.vue')['default']
     RouterView: typeof import('vue-router')['RouterView']

package.json

@@ -27,6 +27,7 @@
     "electron-squirrel-startup": "^1.0.0",
     "electron-store": "^8.1.0",
     "monaco-editor": "^0.46.0",
+    "node-fetch": "^2.7.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
     "update-electron-app": "^3.0.0",
@@ -42,11 +43,12 @@
     "@electron-forge/maker-squirrel": "^7.2.0",
     "@electron-forge/maker-zip": "^7.2.0",
     "@electron-forge/plugin-auto-unpack-natives": "^7.2.0",
-    "@electron-forge/publisher-github": "^7.2.0",
     "@electron-forge/plugin-vite": "^7.2.0",
+    "@electron-forge/publisher-github": "^7.2.0",
     "@types/debug": "^4.1.12",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.11.19",
+    "@types/node-fetch": "^2.6.11",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vicons/antd": "^0.12.0",

src/assets/styles/theme.scss

@@ -30,4 +30,4 @@ body {
   color: var(--text-color);
   transition: .3s;
   font-size: 14px;
-}
+}

src/common/httpClient.ts

@@ -2,17 +2,16 @@ import { CustomError } from './customError';
 import { Buffer } from 'buffer';
 import { lang } from '../lang';
 
-const catchHandler = (err: unknown) => {
-  if (err instanceof CustomError) {
-    if (err.status === 401) {
-      throw new CustomError(err.status, lang.global.t('connection.unAuthorized'));
-    }
-    throw new CustomError(err.status, err.details);
+const { fetchApi } = window;
+
+const handleFetch = (result: { data: unknown; status: number; details: string }) => {
+  if ([404, 400].includes(result.status) || (result.status >= 200 && result.status < 300)) {
+    return result.data || JSON.parse(result.details);
   }
-  if (err instanceof Error) {
-    throw new CustomError(500, err.message);
+  if (result.status === 401) {
+    throw new CustomError(result.status, lang.global.t('connection.unAuthorized'));
   }
-  throw new CustomError(500, `unknown error, trace: ${JSON.stringify(err)}`);
+  throw new CustomError(result.status, result.details);
 };
 
 const buildURL = (host: string, port: number, path?: string, queryParameters?: string) => {
@@ -31,6 +30,7 @@ const fetchWrapper = async ({
   port,
   username,
   password,
+  ssl,
 }: {
   method: string;
   path?: string;
@@ -40,39 +40,37 @@ const fetchWrapper = async ({
   password?: string;
   host: string;
   port: number;
+  ssl: boolean;
 }) => {
   const authorization =
     username || password
       ? `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`
       : undefined;
 
   const url = buildURL(host, port, path, queryParameters);
-  try {
-    const result = await fetch(url, {
-      method,
-      headers: { 'Content-Type': 'application/json', authorization } as unknown as Headers,
-      body: payload ? JSON.stringify(payload) : undefined,
-    });
-    if (result.ok) {
-      return await result.json();
-    }
-    throw new CustomError(result.status, await result.text());
-  } catch (e) {
-    throw catchHandler(e);
-  }
+  const { data, status, details } = await fetchApi.fetch(url, {
+    method,
+    authorization,
+    payload: payload ? JSON.stringify(payload) : undefined,
+    ssl,
+  });
+  return handleFetch({ data, status, details });
 };
+
 export const loadHttpClient = (con: {
   host: string;
   port: number;
   username?: string;
   password?: string;
+  sslCertVerification: boolean;
 }) => ({
   get: async (path?: string, queryParameters?: string) =>
     fetchWrapper({
       ...con,
       method: 'GET',
       path,
       queryParameters,
+      ssl: con.sslCertVerification,
     }),
   post: async (path: string, queryParameters?: string, payload?: unknown) =>
     fetchWrapper({
@@ -81,6 +79,7 @@ export const loadHttpClient = (con: {
       path,
       queryParameters,
       payload,
+      ssl: con.sslCertVerification,
     }),
   put: async (path: string, queryParameters?: string, payload?: unknown) =>
     fetchWrapper({
@@ -89,6 +88,7 @@ export const loadHttpClient = (con: {
       path,
       queryParameters,
       payload,
+      ssl: con.sslCertVerification,
     }),
 
   delete: async (path: string, queryParameters?: string, payload?: unknown) =>
@@ -98,5 +98,6 @@ export const loadHttpClient = (con: {
       path,
       queryParameters,
       payload,
+      ssl: con.sslCertVerification,
     }),
 });

src/electron/fetchApi.ts

@@ -0,0 +1,47 @@
+import Electron from 'electron';
+import fetch from 'node-fetch';
+import { CustomError, debug } from '../common';
+import * as https from 'https';
+
+type FetchApiOptions = {
+  method: string;
+  authorization: string;
+  payload: string | undefined;
+  ssl: boolean;
+};
+
+export type FetchApiInput = {
+  method: string;
+  url: string;
+  options: FetchApiOptions;
+};
+
+const fetchApi: { [key: string]: (key: string, val: unknown) => unknown } = {
+  fetch: async (url: string, { method, authorization, payload, ssl }: FetchApiOptions) => {
+    const agent = url.startsWith('https')
+      ? new https.Agent({
+          rejectUnauthorized: ssl,
+        })
+      : undefined;
+    try {
+      const result = await fetch(url, {
+        method,
+        headers: { 'Content-Type': 'application/json', authorization } as unknown as Headers,
+        body: payload,
+        agent,
+      });
+      if (result.ok) {
+        return { status: result.status, data: await result.json() };
+      }
+      throw new CustomError(result.status, await result.text());
+    } catch (e) {
+      debug('error encountered while node-fetch fetch target:', e);
+      return { status: e.status || 500, details: e.details || e.message };
+    }
+  },
+};
+export const registerFetchApiListener = (ipcMain: Electron.IpcMain) => {
+  ipcMain.handle('fetchApi', (_, { method, url, options }: FetchApiInput) =>
+    fetchApi[method.toLowerCase()](url, options),
+  );
+};

src/electron/main.ts

@@ -5,6 +5,7 @@ import { debug } from '../common';
 import { githubLink } from '../config';
 import { registerStoreApiListener } from './storeApi';
 import { registerSourceFileApiListener } from './sourceFIleApi';
+import { registerFetchApiListener } from './fetchApi';
 
 declare const MAIN_WINDOW_VITE_DEV_SERVER_URL: string;
 declare const MAIN_WINDOW_VITE_NAME: string;
@@ -104,6 +105,7 @@ ipcMain.on('open-github', () => {
 
 registerStoreApiListener(ipcMain);
 registerSourceFileApiListener(ipcMain);
+registerFetchApiListener(ipcMain);
 
 try {
   autoUpdater.setFeedURL({

src/electron/preload.ts

@@ -23,3 +23,8 @@ contextBridge.exposeInMainWorld('sourceFileAPI', {
   onSaveShortcut: (callback: (value: unknown) => void) =>
     ipcRenderer.on('save-shortcout', (_event, value) => callback(value)),
 });
+
+contextBridge.exposeInMainWorld('fetchApi', {
+  fetch: async (url: string, options: unknown) =>
+    ipcRenderer.invoke('fetchApi', { method: 'fetch', url, options }),
+});