Skip to content

Commit

Permalink
Feat/pseudo dhcp (#109)
Browse files Browse the repository at this point in the history 
* ✨ feat: pseudo dhcp
  • Loading branch information
@m1m1sha
m1m1sha committed May 17, 2024
1 parent bad6a59 commit 0ead308
Show file tree
Hide file tree
Showing 14 changed files with 313 additions and 112 deletions.
2 changes: 2 additions & 0 deletions easytier-gui/locales/cn.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ public_server: 公共服务器
manual: 手动
standalone: 独立
virtual_ipv4: 虚拟IPv4地址
virtual_ipv4_dhcp: DHCP
network_name: 网络名称
network_secret: 网络密码
public_server_url: 公共服务器地址
Expand Down Expand Up @@ -59,3 +60,4 @@ run_network: 运行网络
stop_network: 停止网络
network_running: 运行中
network_stopped: 已停止
dhcp_experimental_warning: 实验性警告！使用DHCP时如果组网环境中发生IP冲突，将自动更改IP。
2 changes: 2 additions & 0 deletions easytier-gui/locales/en.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ public_server: Public Server
manual: Manual
standalone: Standalone
virtual_ipv4: Virtual IPv4
virtual_ipv4_dhcp: DHCP
network_name: Network Name
network_secret: Network Secret
public_server_url: Public Server URL
Expand Down Expand Up @@ -59,3 +60,4 @@ run_network: Run Network
stop_network: Stop Network
network_running: running
network_stopped: stopped
dhcp_experimental_warning: Experimental warning! if there is an IP conflict in the network when using DHCP, the IP will be automatically changed.
18 changes: 10 additions & 8 deletions easytier-gui/src-tauri/src/main.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ impl Default for NetworkingMethod {
struct NetworkConfig {
instance_id: String,

dhcp: bool,
virtual_ipv4: String,
hostname: Option<String>,
network_name: String,
Expand All @@ -53,7 +54,7 @@ struct NetworkConfig {
proxy_cidrs: Vec<String>,

enable_vpn_portal: bool,
vpn_portal_listne_port: i32,
vpn_portal_listen_port: i32,
vpn_portal_client_network_addr: String,
vpn_portal_client_network_len: i32,

Expand All @@ -72,18 +73,19 @@ impl NetworkConfig {
.with_context(|| format!("failed to parse instance id: {}", self.instance_id))?,
);
cfg.set_hostname(self.hostname.clone());
cfg.set_dhcp(self.dhcp);
cfg.set_inst_name(self.network_name.clone());
cfg.set_network_identity(NetworkIdentity::new(
self.network_name.clone(),
self.network_secret.clone(),
));

if self.virtual_ipv4.len() > 0 {
cfg.set_ipv4(
self.virtual_ipv4.parse().with_context(|| {
if !self.dhcp {
if self.virtual_ipv4.len() > 0 {
cfg.set_ipv4(Some(self.virtual_ipv4.parse().with_context(|| {
format!("failed to parse ipv4 address: {}", self.virtual_ipv4)
})?,
)
})?))
}
}

match self.networking_method {
Expand Down Expand Up @@ -150,12 +152,12 @@ impl NetworkConfig {
client_cidr: cidr
.parse()
.with_context(|| format!("failed to parse vpn portal client cidr: {}", cidr))?,
wireguard_listen: format!("0.0.0.0:{}", self.vpn_portal_listne_port)
wireguard_listen: format!("0.0.0.0:{}", self.vpn_portal_listen_port)
.parse()
.with_context(|| {
format!(
"failed to parse vpn portal wireguard listen port. {}",
self.vpn_portal_listne_port
self.vpn_portal_listen_port
)
})?,
});
Expand Down
32 changes: 24 additions & 8 deletions easytier-gui/src/components/Config.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import InputGroup from 'primevue/inputgroup'
import InputGroupAddon from 'primevue/inputgroupaddon'
import { getOsHostname } from '~/composables/network'
import { i18n } from '~/modules/i18n'
import { NetworkingMethod } from '~/types/network'
const props = defineProps<{
Expand All @@ -12,10 +11,12 @@ const props = defineProps<{
defineEmits(['runNetwork'])
const { t } = useI18n()
const networking_methods = ref([
{ value: NetworkingMethod.PublicServer, label: i18n.global.t('public_server') },
{ value: NetworkingMethod.Manual, label: i18n.global.t('manual') },
{ value: NetworkingMethod.Standalone, label: i18n.global.t('standalone') },
{ value: NetworkingMethod.PublicServer, label: t('public_server') },
{ value: NetworkingMethod.Manual, label: t('manual') },
{ value: NetworkingMethod.Standalone, label: t('standalone') },
])
const networkStore = useNetworkStore()
Expand Down Expand Up @@ -56,14 +57,29 @@ onMounted(async () => {
<template>
<div class="flex flex-column h-full">
<div class="flex flex-column">
<div class="w-7/12 self-center ">
<Message severity="warn">
{{ $t('dhcp_experimental_warning') }}
</Message>
</div>
<div class="w-7/12 self-center ">
<Panel :header="$t('basic_settings')">
<div class="flex flex-column gap-y-2">
<div class="flex flex-row gap-x-9 flex-wrap">
<div class="flex flex-column gap-2 basis-5/12 grow">
<label for="virtual_ip">{{ $t('virtual_ipv4') }}</label>
<div class="flex align-items-center" for="virtual_ip">
<label class="mr-2"> {{ $t('virtual_ipv4') }} </label>
<Checkbox v-model="curNetwork.dhcp" input-id="virtual_ip_auto" :binary="true" />

<label for="virtual_ip_auto" class="ml-2">
{{ t('virtual_ipv4_dhcp') }}
</label>
</div>
<InputGroup>
<InputText id="virtual_ip" v-model="curNetwork.virtual_ipv4" aria-describedby="virtual_ipv4-help" />
<InputText
id="virtual_ip" v-model="curNetwork.virtual_ipv4" :disabled="curNetwork.dhcp"
aria-describedby="virtual_ipv4-help"
/>
<InputGroupAddon>
<span>/24</span>
</InputGroupAddon>
Expand Down Expand Up @@ -112,7 +128,7 @@ onMounted(async () => {

<Divider />

<Panel :header="$t('advanced_settings')" toggleable>
<Panel :header="$t('advanced_settings')" toggleable collapsed>
<div class="flex flex-column gap-y-2">
<div class="flex flex-row gap-x-9 flex-wrap">
<div class="flex flex-column gap-2 basis-5/12 grow">
Expand Down Expand Up @@ -154,7 +170,7 @@ onMounted(async () => {
</InputGroup>
</div>
<InputNumber
v-if="curNetwork.enable_vpn_portal" v-model="curNetwork.vpn_portal_listne_port"
v-if="curNetwork.enable_vpn_portal" v-model="curNetwork.vpn_portal_listen_port"
:placeholder="$t('vpn_portal_listen_port')" class="" :format="false" :min="0" :max="65535"
/>
</div>
Expand Down
143 changes: 76 additions & 67 deletions easytier-gui/src/components/Status.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const curNetworkInst = computed(() => {
const peerRouteInfos = computed(() => {
if (curNetworkInst.value)
return curNetworkInst.value.detail.peer_route_pairs
return curNetworkInst.value.detail?.peer_route_pairs || []
return []
})
Expand Down Expand Up @@ -116,6 +116,13 @@ const myNodeInfoChips = computed(() => {
if (!my_node_info)
return chips
// virtual ipv4
chips.push({
label: `Virtual IPv4: ${my_node_info.virtual_ipv4}`,
icon: '',
} as Chip)
// local ipv4s
const local_ipv4s = my_node_info.ips?.interface_ipv4s
for (const [idx, ip] of local_ipv4s?.entries()) {
Expand Down Expand Up @@ -290,82 +297,84 @@ function showEventLogs() {
</template>
</Card>
<Card v-if="!curNetworkInst?.error_msg">
<template #title>
{{ $t('my_node_info') }}
</template>
<template #content>
<div class="flex w-full flex-column gap-y-5">
<div class="m-0 flex flex-row justify-center gap-x-5">
<div
class="rounded-full w-32 h-32 flex flex-column align-items-center pt-4"
style="border: 1px solid green"
>
<div class="font-bold">
{{ $t('peer_count') }}
</div>
<div class="text-5xl mt-1">
{{ peerCount }}
<template v-else>
<Card>
<template #title>
{{ $t('my_node_info') }}
</template>
<template #content>
<div class="flex w-full flex-column gap-y-5">
<div class="m-0 flex flex-row justify-center gap-x-5">
<div
class="rounded-full w-32 h-32 flex flex-column align-items-center pt-4"
style="border: 1px solid green"
>
<div class="font-bold">
{{ $t('peer_count') }}
</div>
<div class="text-5xl mt-1">
{{ peerCount }}
</div>
</div>
</div>

<div
class="rounded-full w-32 h-32 flex flex-column align-items-center pt-4"
style="border: 1px solid purple"
>
<div class="font-bold">
{{ $t('upload') }}
</div>
<div class="text-xl mt-2">
{{ txRate }}/s
<div
class="rounded-full w-32 h-32 flex flex-column align-items-center pt-4"
style="border: 1px solid purple"
>
<div class="font-bold">
{{ $t('upload') }}
</div>
<div class="text-xl mt-2">
{{ txRate }}/s
</div>
</div>
</div>

<div
class="rounded-full w-32 h-32 flex flex-column align-items-center pt-4"
style="border: 1px solid fuchsia"
>
<div class="font-bold">
{{ $t('download') }}
</div>
<div class="text-xl mt-2">
{{ rxRate }}/s
<div
class="rounded-full w-32 h-32 flex flex-column align-items-center pt-4"
style="border: 1px solid fuchsia"
>
<div class="font-bold">
{{ $t('download') }}
</div>
<div class="text-xl mt-2">
{{ rxRate }}/s
</div>
</div>
</div>
</div>

<div class="flex flex-row align-items-center flex-wrap w-full">
<Chip
v-for="(chip, i) in myNodeInfoChips" :key="i" :label="chip.label" :icon="chip.icon"
class="mr-2 mt-2"
/>
</div>
<div class="flex flex-row align-items-center flex-wrap w-full">
<Chip
v-for="(chip, i) in myNodeInfoChips" :key="i" :label="chip.label" :icon="chip.icon"
class="mr-2 mt-2"
/>
</div>

<div v-if="myNodeInfo" class="m-0 flex flex-row justify-center gap-x-5 text-sm">
<Button severity="info" :label="$t('show_vpn_portal_config')" @click="showVpnPortalConfig" />
<Button severity="info" :label="$t('show_event_log')" @click="showEventLogs" />
<div v-if="myNodeInfo" class="m-0 flex flex-row justify-center gap-x-5 text-sm">
<Button severity="info" :label="$t('show_vpn_portal_config')" @click="showVpnPortalConfig" />
<Button severity="info" :label="$t('show_event_log')" @click="showEventLogs" />
</div>
</div>
</div>
</template>
</Card>
</template>
</Card>

<Divider />
<Divider />

<Card v-if="!curNetworkInst?.error_msg">
<template #title>
{{ $t('peer_info') }}
</template>
<template #content>
<DataTable :value="peerRouteInfos" column-resize-mode="fit" table-style="width: 100%">
<Column field="route.ipv4_addr" style="width: 100px;" :header="$t('virtual_ipv4')" />
<Column field="route.hostname" style="max-width: 250px;" :header="$t('hostname')" />
<Column :field="routeCost" style="width: 100px;" :header="$t('route_cost')" />
<Column :field="latencyMs" style="width: 80px;" :header="$t('latency')" />
<Column :field="txBytes" style="width: 80px;" :header="$t('upload_bytes')" />
<Column :field="rxBytes" style="width: 80px;" :header="$t('download_bytes')" />
<Column :field="lossRate" style="width: 100px;" :header="$t('loss_rate')" />
</DataTable>
</template>
</Card>
<Card>
<template #title>
{{ $t('peer_info') }}
</template>
<template #content>
<DataTable :value="peerRouteInfos" column-resize-mode="fit" table-style="width: 100%">
<Column field="route.ipv4_addr" style="width: 100px;" :header="$t('virtual_ipv4')" />
<Column field="route.hostname" style="max-width: 250px;" :header="$t('hostname')" />
<Column :field="routeCost" style="width: 100px;" :header="$t('route_cost')" />
<Column :field="latencyMs" style="width: 80px;" :header="$t('latency')" />
<Column :field="txBytes" style="width: 80px;" :header="$t('upload_bytes')" />
<Column :field="rxBytes" style="width: 80px;" :header="$t('download_bytes')" />
<Column :field="lossRate" style="width: 100px;" :header="$t('loss_rate')" />
</DataTable>
</template>
</Card>
</template>
</div>
</template>
15 changes: 7 additions & 8 deletions easytier-gui/src/pages/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@ enum Severity {
const messageBarSeverity = ref(Severity.None)
const messageBarContent = ref('')
const toast = useToast()
const networkStore = useNetworkStore()
Expand Down Expand Up @@ -108,12 +107,8 @@ onMounted(() => {
})
onUnmounted(() => clearInterval(intervalId))
const curNetworkHasInstance = computed(() => {
return networkStore.networkInstanceIds.includes(networkStore.curNetworkId)
})
const activeStep = computed(() => {
return curNetworkHasInstance.value ? 1 : 0
return networkStore.networkInstanceIds.includes(networkStore.curNetworkId) ? 1 : 0
})
const setting_menu = ref()
Expand Down Expand Up @@ -190,8 +185,12 @@ function isRunning(id: string) {
<div class="flex items-start content-center">
<div class="mr-3">
<span>{{ slotProps.value.network_name }}</span>
<span v-if="isRunning(slotProps.value.instance_id)" class="ml-3">
{{ slotProps.value.virtual_ipv4 }}
<span
v-if="isRunning(slotProps.value.instance_id) && networkStore.instances[slotProps.value.instance_id].detail && (networkStore.instances[slotProps.value.instance_id].detail?.my_node_info.virtual_ipv4 !== '')"
class="ml-3"
>
{{ networkStore.instances[slotProps.value.instance_id].detail
? networkStore.instances[slotProps.value.instance_id].detail?.my_node_info.virtual_ipv4 : '' }}
</span>
</div>
<Tag
Expand Down
2 changes: 1 addition & 1 deletion easytier-gui/src/stores/network.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export const useNetworkStore = defineStore('networkStore', {
instance_id: instanceId,
running: false,
error_msg: '',
detail: {} as NetworkInstanceRunningInfo,
detail: undefined,
}
},

Expand Down
15 changes: 15 additions & 0 deletions easytier-gui/src/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,3 +31,18 @@
border-radius: 10px;
margin-bottom: 1rem;
}

::-webkit-scrollbar {
width: 4px;
height: 4px;
border-radius: 4px;
}

::-webkit-scrollbar-track {
border-radius: 4px;
}

::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: #0000005d;
}
Loading

0 comments on commit 0ead308

Please sign in to comment.