Feature: Group can display unhealth node

src/components/Tags/index.tsx

@@ -8,13 +8,14 @@ import './style.scss'
 interface TagsProps extends BaseComponentProps {
     data: string[]
     onClick: (name: string) => void
+    shouldError?: (name: string) => boolean
     select: string
     rowHeight: number
     canClick: boolean
 }
 
 export function Tags (props: TagsProps) {
-    const { className, data, onClick, select, canClick, rowHeight: rawHeight } = props
+    const { className, data, onClick, select, canClick, shouldError, rowHeight: rawHeight } = props
 
     const { useTranslation } = containers.useI18n()
     const { t } = useTranslation('Proxies')
@@ -35,7 +36,7 @@ export function Tags (props: TagsProps) {
 
     const tags = data
         .map(t => {
-            const tagClass = classnames({ 'tags-selected': select === t, 'can-click': canClick })
+            const tagClass = classnames({ 'tags-selected': select === t, 'can-click': canClick, error: shouldError && shouldError(t) })
             return (
                 <li className={tagClass} key={t} onClick={() => handleClick(t)}>
                     { t }

src/components/Tags/style.scss

@@ -1,8 +1,6 @@
 @import '~@styles/variables';
 
 $height: 22px;
-$add-height: 25px;
-$delete-height: 22px;
 
 .tags-container {
     display: flex;
@@ -37,6 +35,19 @@ $delete-height: 22px;
         cursor: pointer;
     }
 
+    li.error {
+        color: #fff;
+        background-color: $color-red;
+        border-color: $color-red;
+    }
+
+    li.tags-selected.error {
+        background: linear-gradient(135deg, $color-primary-dark, $color-red);
+        border: none;
+        height: $height + 2px;
+        padding: 0 7px;
+    }
+
     .tags-selected {
         background-color: $color-primary-dark;
         color: #fff;

src/containers/Proxies/components/Group/index.tsx

@@ -9,7 +9,7 @@ interface GroupProps {
 }
 
 export function Group (props: GroupProps) {
-    const { fetch } = containers.useData()
+    const { fetch, data: Data } = containers.useData()
     const { data: Config } = containers.useConfig()
     const { config } = props
 
@@ -31,6 +31,15 @@ export function Group (props: GroupProps) {
         }
     }
 
+    function shouldError (name: string) {
+        const history = Data.proxyMap.get(name)?.history
+        if (history?.length) {
+            return !history.slice(-1)[0].delay
+        }
+
+        return false
+    }
+
     const canClick = config.type === 'Selector'
     return (
         <div className="proxy-group">
@@ -43,6 +52,7 @@ export function Group (props: GroupProps) {
                     className="proxy-group-tags"
                     data={config.all}
                     onClick={handleChangeProxySelected}
+                    shouldError={shouldError}
                     select={config.now}
                     canClick={canClick}
                     rowHeight={30} />

src/lib/request.ts

@@ -51,7 +51,7 @@ interface History {
 
 export interface Proxy {
     name: string
-    type: 'Direct' | 'Reject' | 'Shadowsocks' | 'Vmess' | 'Socks' | 'Http'
+    type: 'Direct' | 'Reject' | 'Shadowsocks' | 'Vmess' | 'Socks' | 'Http' | 'Snell'
     history: History[]
 }
 

src/models/Config.ts

@@ -118,4 +118,6 @@ export interface Data {
     proxyProviders?: API.Provider[]
 
     rules?: API.Rule[]
+
+    proxyMap?: Map<string, API.Proxy>
 }

src/stores/HookStore.ts

@@ -13,7 +13,8 @@ function useData () {
         proxy: [],
         proxyGroup: [],
         proxyProviders: [],
-        rules: []
+        rules: [],
+        proxyMap: new Map<string, API.Proxy>()
     })
 
     const { visible, show, hide } = useVisible()
@@ -51,11 +52,23 @@ function useData () {
             .filter(pd => pd.name !== 'default')
             .filter(pd => pd.vehicleType !== 'Compatible')
 
+        const proxyMap = new Map<string, API.Proxy>()
+        for (const p of proxy) {
+            proxyMap.set(p.name, p as API.Proxy)
+        }
+
+        for (const provider of providers) {
+            for (const p of provider.proxies) {
+                proxyMap.set(p.name, p as API.Proxy)
+            }
+        }
+
         set({
             proxy: proxy as API.Proxy[],
             proxyGroup: general.mode === 'Global' ? [proxyList] : groups as API.Group[],
             proxyProviders: providers,
-            rules: rules.data.rules
+            rules: rules.data.rules,
+            proxyMap
         })
 
         const [version, vErr] = await to(API.getVersion())