From 82791378ec298c22d11d979affbf557cc77be842 Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Mon, 19 Jun 2023 14:50:58 +0800
Subject: [PATCH] feat(config): show interface ip addresses in interface select

---
 src/apis/query.ts                  |  2 ++
 src/components/ConfigFormModal.tsx | 22 ++++++++++++++++++++--
 src/schemas/gql/gql.ts             | 12 ++++++------
 src/schemas/gql/graphql.ts         |  4 ++++
 4 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/apis/query.ts b/src/apis/query.ts
index 5af93474..463350e2 100644
--- a/src/apis/query.ts
+++ b/src/apis/query.ts
@@ -65,6 +65,7 @@ export const getInterfacesRequest = (gqlClient: GraphQLClient) => {
             interfaces(up: $up) {
               name
               ifindex
+              ip
               flag {
                 default {
                   gateway
@@ -129,6 +130,7 @@ export const useGeneralQuery = () => {
               interfaces(up: $up) {
                 name
                 ifindex
+                ip
                 flag {
                   default {
                     gateway
diff --git a/src/components/ConfigFormModal.tsx b/src/components/ConfigFormModal.tsx
index 06fe8fdd..55cce7e6 100644
--- a/src/components/ConfigFormModal.tsx
+++ b/src/components/ConfigFormModal.tsx
@@ -12,6 +12,7 @@ import {
   Select,
   Slider,
   Stack,
+  Text,
   TextInput,
   Title,
 } from '@mantine/core'
@@ -46,6 +47,7 @@ import {
 import { GlobalInput } from '~/schemas/gql/graphql'
 
 import { FormActions } from './FormActions'
+import { SelectItemWithDescription } from './SelectItemWithDescription'
 
 const schema = z.object({
   name: z.string().nonempty(),
@@ -174,9 +176,16 @@ export const ConfigFormDrawer = forwardRef(({ opened, onClose }: { opened: boole
     if (interfaces) {
       return interfaces
         .filter(({ flag }) => !!flag.default)
-        .map(({ name }) => ({
+        .map(({ name, ip }) => ({
           label: name,
           value: name,
+          description: (
+            <Stack spacing="xs">
+              {ip.map((addr, i) => (
+                <Text key={i}>{addr}</Text>
+              ))}
+            </Stack>
+          ),
         }))
     }
 
@@ -187,9 +196,16 @@ export const ConfigFormDrawer = forwardRef(({ opened, onClose }: { opened: boole
     const interfaces = generalQuery?.general.interfaces
 
     if (interfaces) {
-      return interfaces.map(({ name }) => ({
+      return interfaces.map(({ name, ip }) => ({
         label: name,
         value: name,
+        description: (
+          <Stack spacing="xs">
+            {ip.map((addr, i) => (
+              <Text key={i}>{addr}</Text>
+            ))}
+          </Stack>
+        ),
       }))
     }
 
@@ -313,6 +329,7 @@ export const ConfigFormDrawer = forwardRef(({ opened, onClose }: { opened: boole
                   <MultiSelect
                     label={t('lanInterface')}
                     description={t('descriptions.config.lanInterface')}
+                    itemComponent={SelectItemWithDescription}
                     data={lanInterfacesData}
                     {...form.getInputProps('lanInterface')}
                   />
@@ -320,6 +337,7 @@ export const ConfigFormDrawer = forwardRef(({ opened, onClose }: { opened: boole
                   <MultiSelect
                     label={t('wanInterface')}
                     description={t('descriptions.config.wanInterface')}
+                    itemComponent={SelectItemWithDescription}
                     withAsterisk
                     data={wanInterfacesData}
                     {...form.getInputProps('wanInterface')}
diff --git a/src/schemas/gql/gql.ts b/src/schemas/gql/gql.ts
index 2564b089..e58deae1 100644
--- a/src/schemas/gql/gql.ts
+++ b/src/schemas/gql/gql.ts
@@ -82,11 +82,11 @@ const documents = {
     types.ModeDocument,
   '\n        query Defaults($paths: [String!]) {\n          jsonStorage(paths: $paths)\n        }\n      ':
     types.DefaultsDocument,
-  '\n        query Interfaces($up: Boolean) {\n          general {\n            interfaces(up: $up) {\n              name\n              ifindex\n              flag {\n                default {\n                  gateway\n                }\n              }\n            }\n          }\n        }\n      ':
+  '\n        query Interfaces($up: Boolean) {\n          general {\n            interfaces(up: $up) {\n              name\n              ifindex\n              ip\n              flag {\n                default {\n                  gateway\n                }\n              }\n            }\n          }\n        }\n      ':
     types.InterfacesDocument,
   '\n          query JsonStorage($paths: [String!]) {\n            jsonStorage(paths: $paths)\n          }\n        ':
     types.JsonStorageDocument,
-  '\n          query General($up: Boolean) {\n            general {\n              dae {\n                running\n                modified\n              }\n              interfaces(up: $up) {\n                name\n                ifindex\n                flag {\n                  default {\n                    gateway\n                  }\n                }\n              }\n            }\n          }\n        ':
+  '\n          query General($up: Boolean) {\n            general {\n              dae {\n                running\n                modified\n              }\n              interfaces(up: $up) {\n                name\n                ifindex\n                ip\n                flag {\n                  default {\n                    gateway\n                  }\n                }\n              }\n            }\n          }\n        ':
     types.GeneralDocument,
   '\n          query Nodes {\n            nodes {\n              edges {\n                id\n                name\n                link\n                address\n                protocol\n                tag\n              }\n            }\n          }\n        ':
     types.NodesDocument,
@@ -337,8 +337,8 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: '\n        query Interfaces($up: Boolean) {\n          general {\n            interfaces(up: $up) {\n              name\n              ifindex\n              flag {\n                default {\n                  gateway\n                }\n              }\n            }\n          }\n        }\n      '
-): (typeof documents)['\n        query Interfaces($up: Boolean) {\n          general {\n            interfaces(up: $up) {\n              name\n              ifindex\n              flag {\n                default {\n                  gateway\n                }\n              }\n            }\n          }\n        }\n      ']
+  source: '\n        query Interfaces($up: Boolean) {\n          general {\n            interfaces(up: $up) {\n              name\n              ifindex\n              ip\n              flag {\n                default {\n                  gateway\n                }\n              }\n            }\n          }\n        }\n      '
+): (typeof documents)['\n        query Interfaces($up: Boolean) {\n          general {\n            interfaces(up: $up) {\n              name\n              ifindex\n              ip\n              flag {\n                default {\n                  gateway\n                }\n              }\n            }\n          }\n        }\n      ']
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -349,8 +349,8 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: '\n          query General($up: Boolean) {\n            general {\n              dae {\n                running\n                modified\n              }\n              interfaces(up: $up) {\n                name\n                ifindex\n                flag {\n                  default {\n                    gateway\n                  }\n                }\n              }\n            }\n          }\n        '
-): (typeof documents)['\n          query General($up: Boolean) {\n            general {\n              dae {\n                running\n                modified\n              }\n              interfaces(up: $up) {\n                name\n                ifindex\n                flag {\n                  default {\n                    gateway\n                  }\n                }\n              }\n            }\n          }\n        ']
+  source: '\n          query General($up: Boolean) {\n            general {\n              dae {\n                running\n                modified\n              }\n              interfaces(up: $up) {\n                name\n                ifindex\n                ip\n                flag {\n                  default {\n                    gateway\n                  }\n                }\n              }\n            }\n          }\n        '
+): (typeof documents)['\n          query General($up: Boolean) {\n            general {\n              dae {\n                running\n                modified\n              }\n              interfaces(up: $up) {\n                name\n                ifindex\n                ip\n                flag {\n                  default {\n                    gateway\n                  }\n                }\n              }\n            }\n          }\n        ']
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/src/schemas/gql/graphql.ts b/src/schemas/gql/graphql.ts
index 3a781baf..993908a5 100644
--- a/src/schemas/gql/graphql.ts
+++ b/src/schemas/gql/graphql.ts
@@ -885,6 +885,7 @@ export type InterfacesQuery = {
       __typename?: 'Interface'
       name: string
       ifindex: number
+      ip: Array<string>
       flag: {
         __typename?: 'InterfaceFlag'
         default?: Array<{ __typename?: 'DefaultRoute'; gateway?: string | null }> | null
@@ -912,6 +913,7 @@ export type GeneralQuery = {
       __typename?: 'Interface'
       name: string
       ifindex: number
+      ip: Array<string>
       flag: {
         __typename?: 'InterfaceFlag'
         default?: Array<{ __typename?: 'DefaultRoute'; gateway?: string | null }> | null
@@ -2665,6 +2667,7 @@ export const InterfacesDocument = {
                     selections: [
                       { kind: 'Field', name: { kind: 'Name', value: 'name' } },
                       { kind: 'Field', name: { kind: 'Name', value: 'ifindex' } },
+                      { kind: 'Field', name: { kind: 'Name', value: 'ip' } },
                       {
                         kind: 'Field',
                         name: { kind: 'Name', value: 'flag' },
@@ -2778,6 +2781,7 @@ export const GeneralDocument = {
                     selections: [
                       { kind: 'Field', name: { kind: 'Name', value: 'name' } },
                       { kind: 'Field', name: { kind: 'Name', value: 'ifindex' } },
+                      { kind: 'Field', name: { kind: 'Name', value: 'ip' } },
                       {
                         kind: 'Field',
                         name: { kind: 'Name', value: 'flag' },