feat: can healthcheck a provider

src/api/proxies.js

@@ -53,9 +53,15 @@ export async function fetchProviderProxies(config) {
 
 export async function updateProviderByName(config, name) {
   const { url, init } = getURLAndInit(config);
-  const options = {
+  const options = { ...init, method: 'PUT' };
-    ...init,
-    method: 'PUT'
-  };
   return await fetch(url + '/providers/proxies/' + name, options);
 }
+
+export async function healthcheckProviderByName(config, name) {
+  const { url, init } = getURLAndInit(config);
+  const options = { ...init, method: 'GET' };
+  return await fetch(
+    url + '/providers/proxies/' + name + '/healthcheck',
+    options
+  );
+}

src/components/ProxyProvider.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ChevronDown, RotateCw } from 'react-feather';
+import { ChevronDown, RotateCw, Zap } from 'react-feather';
 import { formatDistance } from 'date-fns';
 import ResizeObserver from 'resize-observer-polyfill';
 import { motion } from 'framer-motion';
@@ -12,7 +12,10 @@ import { SectionNameType } from './shared/Basic';
 import { ProxyList, ProxyListSummaryView } from './ProxyGroup';
 import { ButtonWithIcon, ButtonPlain } from './Button';
 
-import { updateProviderByName } from '../store/proxies';
+import {
+  updateProviderByName,
+  healthcheckProviderByName
+} from '../store/proxies';
 
 import s from './ProxyProvider.module.css';
 
@@ -42,6 +45,10 @@ function ProxyProvider({ item, dispatch }: Props) {
     () => dispatch(updateProviderByName(apiConfig, item.name)),
     [apiConfig, dispatch, item.name]
   );
+  const healthcheckProvider = useCallback(
+    () => dispatch(healthcheckProviderByName(apiConfig, item.name)),
+    [apiConfig, dispatch, item.name]
+  );
 
   const [isCollapsibleOpen, setCollapsibleOpen] = useState(false);
   const toggle = useCallback(() => setCollapsibleOpen(x => !x), []);
@@ -67,6 +74,11 @@ function ProxyProvider({ item, dispatch }: Props) {
             icon={<Refresh />}
             onClick={updateProvider}
           />
+          <ButtonWithIcon
+            text="Health Check"
+            icon={<Zap size={16} />}
+            onClick={healthcheckProvider}
+          />
         </div>
       </Collapsible2>
       <Collapsible2 isOpen={!isCollapsibleOpen}>

src/components/ProxyProvider.module.css

@@ -33,6 +33,12 @@
 
 .actionFooter {
   display: flex;
+  button {
+    margin: 0 5px;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
 }
 
 .refresh {

src/store/proxies.js

@@ -66,6 +66,19 @@ export function updateProviderByName(apiConfig, name) {
   };
 }
 
+export function healthcheckProviderByName(apiConfig, name) {
+  return async dispatch => {
+    try {
+      await proxiesAPI.healthcheckProviderByName(apiConfig, name);
+    } catch (x) {
+      // ignore
+    }
+    // should be optimized
+    // but ¯\_(ツ)_/¯
+    dispatch(fetchProxies(apiConfig));
+  };
+}
+
 export function switchProxy(apiConfig, name1, name2) {
   return async dispatch => {
     proxiesAPI