fix: 防火墙与进程守护加载样式调整 (#1864)

This commit is contained in:
ssongliu 2023-08-07 22:46:27 +08:00 committed by GitHub
parent 2e73857b42
commit 9b02e88e3c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 267 additions and 251 deletions

View file

@ -3,6 +3,7 @@ package client
import (
"fmt"
"strings"
"sync"
"github.com/1Panel-dev/1Panel/backend/buserr"
"github.com/1Panel-dev/1Panel/backend/constant"
@ -60,39 +61,48 @@ func (f *Firewall) Reload() error {
}
func (f *Firewall) ListPort() ([]FireInfo, error) {
stdout, err := cmd.Exec("firewall-cmd --zone=public --list-ports")
if err != nil {
return nil, err
}
ports := strings.Split(strings.ReplaceAll(stdout, "\n", ""), " ")
var wg sync.WaitGroup
var datas []FireInfo
for _, port := range ports {
if len(port) == 0 {
continue
wg.Add(2)
go func() {
defer wg.Done()
stdout, err := cmd.Exec("firewall-cmd --zone=public --list-ports")
if err != nil {
return
}
var itemPort FireInfo
if strings.Contains(port, "/") {
itemPort.Port = strings.Split(port, "/")[0]
itemPort.Protocol = strings.Split(port, "/")[1]
ports := strings.Split(strings.ReplaceAll(stdout, "\n", ""), " ")
for _, port := range ports {
if len(port) == 0 {
continue
}
var itemPort FireInfo
if strings.Contains(port, "/") {
itemPort.Port = strings.Split(port, "/")[0]
itemPort.Protocol = strings.Split(port, "/")[1]
}
itemPort.Strategy = "accept"
datas = append(datas, itemPort)
}
itemPort.Strategy = "accept"
datas = append(datas, itemPort)
}
}()
stdout1, err := cmd.Exec("firewall-cmd --zone=public --list-rich-rules")
if err != nil {
return nil, err
}
rules := strings.Split(stdout1, "\n")
for _, rule := range rules {
if len(rule) == 0 {
continue
go func() {
defer wg.Done()
stdout1, err := cmd.Exec("firewall-cmd --zone=public --list-rich-rules")
if err != nil {
return
}
itemRule := f.loadInfo(rule)
if len(itemRule.Port) != 0 && itemRule.Family == "ipv4" {
datas = append(datas, itemRule)
rules := strings.Split(stdout1, "\n")
for _, rule := range rules {
if len(rule) == 0 {
continue
}
itemRule := f.loadInfo(rule)
if len(itemRule.Port) != 0 && itemRule.Family == "ipv4" {
datas = append(datas, itemRule)
}
}
}
}()
wg.Wait()
return datas, nil
}

View file

@ -1,111 +1,113 @@
<template>
<div v-loading="loading" style="position: relative">
<div>
<FireRouter />
<FireStatus
v-show="fireName !== '-'"
ref="fireStatuRef"
@search="search"
v-model:loading="loading"
v-model:name="fireName"
v-model:mask-show="maskShow"
v-model:status="fireStatus"
/>
<div v-if="fireName !== '-'">
<el-card v-if="fireStatus != 'running' && maskShow" class="mask-prompt">
<span>{{ $t('firewall.firewallNotStart') }}</span>
</el-card>
<div v-loading="loading">
<FireStatus
v-show="fireName !== '-'"
ref="fireStatuRef"
@search="search"
v-model:loading="loading"
v-model:name="fireName"
v-model:mask-show="maskShow"
v-model:status="fireStatus"
/>
<LayoutContent :title="$t('firewall.ipRule')" :class="{ mask: fireStatus != 'running' }">
<template #toolbar>
<el-row>
<el-col :span="16">
<el-button type="primary" @click="onOpenDialog('create')">
{{ $t('commons.button.create') }} {{ $t('firewall.ipRule') }}
</el-button>
<el-button @click="onDelete(null)" plain :disabled="selects.length === 0">
{{ $t('commons.button.delete') }}
</el-button>
</el-col>
<el-col :span="8">
<TableSetting @search="search()" />
<div class="search-button">
<el-input
v-model="searchName"
clearable
@clear="search()"
suffix-icon="Search"
@keyup.enter="search()"
@change="search()"
:placeholder="$t('commons.button.search')"
></el-input>
</div>
</el-col>
</el-row>
</template>
<template #main>
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
@search="search"
:data="data"
>
<el-table-column type="selection" fix />
<el-table-column :min-width="80" :label="$t('firewall.address')" prop="address">
<template #default="{ row }">
<span v-if="row.address && row.address !== 'Anywhere'">{{ row.address }}</span>
<span v-else>{{ $t('firewall.allIP') }}</span>
</template>
</el-table-column>
<el-table-column :min-width="80" :label="$t('firewall.strategy')" prop="strategy">
<template #default="{ row }">
<el-button
v-if="row.strategy === 'accept'"
@click="onChangeStatus(row, 'drop')"
link
type="success"
>
{{ $t('firewall.allow') }}
<div v-if="fireName !== '-'">
<el-card v-if="fireStatus != 'running' && maskShow" class="mask-prompt">
<span>{{ $t('firewall.firewallNotStart') }}</span>
</el-card>
<LayoutContent :title="$t('firewall.ipRule')" :class="{ mask: fireStatus != 'running' }">
<template #toolbar>
<el-row>
<el-col :span="16">
<el-button type="primary" @click="onOpenDialog('create')">
{{ $t('commons.button.create') }} {{ $t('firewall.ipRule') }}
</el-button>
<el-button v-else link type="danger" @click="onChangeStatus(row, 'accept')">
{{ $t('firewall.deny') }}
<el-button @click="onDelete(null)" plain :disabled="selects.length === 0">
{{ $t('commons.button.delete') }}
</el-button>
</template>
</el-table-column>
<fu-table-operations
width="200px"
:buttons="buttons"
:ellipsis="10"
:label="$t('commons.table.operate')"
fix
/>
</ComplexTable>
</template>
</LayoutContent>
</div>
<div v-else>
<LayoutContent :title="$t('firewall.firewall')" :divider="true">
<template #main>
<div class="app-warn">
<div>
<span>{{ $t('firewall.notSupport') }}</span>
<el-link
style="font-size: 12px; margin-left: 5px"
@click="toDoc"
icon="Position"
type="primary"
>
{{ $t('firewall.quickJump') }}
</el-link>
</el-col>
<el-col :span="8">
<TableSetting @search="search()" />
<div class="search-button">
<el-input
v-model="searchName"
clearable
@clear="search()"
suffix-icon="Search"
@keyup.enter="search()"
@change="search()"
:placeholder="$t('commons.button.search')"
></el-input>
</div>
</el-col>
</el-row>
</template>
<template #main>
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
@search="search"
:data="data"
>
<el-table-column type="selection" fix />
<el-table-column :min-width="80" :label="$t('firewall.address')" prop="address">
<template #default="{ row }">
<span v-if="row.address && row.address !== 'Anywhere'">{{ row.address }}</span>
<span v-else>{{ $t('firewall.allIP') }}</span>
</template>
</el-table-column>
<el-table-column :min-width="80" :label="$t('firewall.strategy')" prop="strategy">
<template #default="{ row }">
<el-button
v-if="row.strategy === 'accept'"
@click="onChangeStatus(row, 'drop')"
link
type="success"
>
{{ $t('firewall.allow') }}
</el-button>
<el-button v-else link type="danger" @click="onChangeStatus(row, 'accept')">
{{ $t('firewall.deny') }}
</el-button>
</template>
</el-table-column>
<fu-table-operations
width="200px"
:buttons="buttons"
:ellipsis="10"
:label="$t('commons.table.operate')"
fix
/>
</ComplexTable>
</template>
</LayoutContent>
</div>
<div v-else>
<LayoutContent :title="$t('firewall.firewall')" :divider="true">
<template #main>
<div class="app-warn">
<div>
<img src="@/assets/images/no_app.svg" />
<span>{{ $t('firewall.notSupport') }}</span>
<el-link
style="font-size: 12px; margin-left: 5px"
@click="toDoc"
icon="Position"
type="primary"
>
{{ $t('firewall.quickJump') }}
</el-link>
<div>
<img src="@/assets/images/no_app.svg" />
</div>
</div>
</div>
</div>
</template>
</LayoutContent>
</template>
</LayoutContent>
</div>
</div>
<OperatrDialog @search="search" ref="dialogRef" />
</div>
</template>

View file

@ -1,141 +1,143 @@
<template>
<div v-loading="loading" style="position: relative">
<div>
<FireRouter />
<FireStatus
v-show="fireName !== '-'"
ref="fireStatuRef"
@search="search"
v-model:loading="loading"
v-model:mask-show="maskShow"
v-model:status="fireStatus"
v-model:name="fireName"
/>
<div v-if="fireName !== '-'">
<el-card v-if="fireStatus != 'running' && maskShow" class="mask-prompt">
<span>{{ $t('firewall.firewallNotStart') }}</span>
</el-card>
<div v-loading="loading">
<FireStatus
v-show="fireName !== '-'"
ref="fireStatuRef"
@search="search"
v-model:loading="loading"
v-model:mask-show="maskShow"
v-model:status="fireStatus"
v-model:name="fireName"
/>
<div v-if="fireName !== '-'">
<el-card v-if="fireStatus != 'running' && maskShow" class="mask-prompt">
<span>{{ $t('firewall.firewallNotStart') }}</span>
</el-card>
<LayoutContent :title="$t('firewall.portRule')" :class="{ mask: fireStatus != 'running' }">
<template #prompt>
<el-alert type="info" :closable="false">
<template #default>
<span>
<span>{{ $t('firewall.dockerHelper', [fireName]) }}</span>
<LayoutContent :title="$t('firewall.portRule')" :class="{ mask: fireStatus != 'running' }">
<template #prompt>
<el-alert type="info" :closable="false">
<template #default>
<span>
<span>{{ $t('firewall.dockerHelper', [fireName]) }}</span>
<el-link
style="font-size: 12px; margin-left: 5px"
icon="Position"
@click="quickJump()"
type="primary"
>
{{ $t('firewall.quickJump') }}
</el-link>
</span>
</template>
</el-alert>
</template>
<template #toolbar>
<el-row>
<el-col :span="16">
<el-button type="primary" @click="onOpenDialog('create')">
{{ $t('commons.button.create') }}{{ $t('firewall.portRule') }}
</el-button>
<el-button @click="onDelete(null)" plain :disabled="selects.length === 0">
{{ $t('commons.button.delete') }}
</el-button>
</el-col>
<el-col :span="8">
<TableSetting @search="search()" />
<div class="search-button">
<el-input
v-model="searchName"
clearable
@clear="search()"
suffix-icon="Search"
@keyup.enter="search()"
@change="search()"
:placeholder="$t('commons.button.search')"
></el-input>
</div>
</el-col>
</el-row>
</template>
<template #main>
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
@search="search"
:data="data"
>
<el-table-column type="selection" :selectable="selectable" fix />
<el-table-column :label="$t('commons.table.protocol')" :min-width="90" prop="protocol" />
<el-table-column :label="$t('commons.table.port')" :min-width="120" prop="port" />
<el-table-column :label="$t('commons.table.status')" :min-width="120">
<template #default="{ row }">
<el-tag type="info" v-if="row.isUsed">
{{
row.appName
? $t('firewall.used') + ' ( ' + row.appName + ' )'
: $t('firewall.used')
}}
</el-tag>
<el-tag type="success" v-else>{{ $t('firewall.unUsed') }}</el-tag>
</template>
</el-table-column>
<el-table-column :min-width="80" :label="$t('firewall.strategy')" prop="strategy">
<template #default="{ row }">
<el-button
v-if="row.strategy === 'accept'"
:disabled="row.appName === '1panel'"
@click="onChangeStatus(row, 'drop')"
link
type="success"
>
{{ $t('firewall.accept') }}
</el-button>
<el-button v-else link type="danger" @click="onChangeStatus(row, 'accept')">
{{ $t('firewall.drop') }}
</el-button>
</template>
</el-table-column>
<el-table-column :min-width="80" :label="$t('firewall.address')" prop="address">
<template #default="{ row }">
<span v-if="row.address && row.address !== 'Anywhere'">{{ row.address }}</span>
<span v-else>{{ $t('firewall.allIP') }}</span>
</template>
</el-table-column>
<fu-table-operations
width="200px"
:buttons="buttons"
:ellipsis="10"
:label="$t('commons.table.operate')"
fix
/>
</ComplexTable>
</template>
</LayoutContent>
</div>
<div v-else>
<LayoutContent :title="$t('firewall.firewall')" :divider="true">
<template #main>
<div class="app-warn">
<div>
<span>{{ $t('firewall.notSupport') }}</span>
<el-link
style="font-size: 12px; margin-left: 5px"
@click="toDoc"
icon="Position"
@click="quickJump()"
type="primary"
>
{{ $t('firewall.quickJump') }}
</el-link>
</span>
</template>
</el-alert>
</template>
<template #toolbar>
<el-row>
<el-col :span="16">
<el-button type="primary" @click="onOpenDialog('create')">
{{ $t('commons.button.create') }}{{ $t('firewall.portRule') }}
</el-button>
<el-button @click="onDelete(null)" plain :disabled="selects.length === 0">
{{ $t('commons.button.delete') }}
</el-button>
</el-col>
<el-col :span="8">
<TableSetting @search="search()" />
<div class="search-button">
<el-input
v-model="searchName"
clearable
@clear="search()"
suffix-icon="Search"
@keyup.enter="search()"
@change="search()"
:placeholder="$t('commons.button.search')"
></el-input>
</div>
</el-col>
</el-row>
</template>
<template #main>
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
@search="search"
:data="data"
>
<el-table-column type="selection" :selectable="selectable" fix />
<el-table-column :label="$t('commons.table.protocol')" :min-width="90" prop="protocol" />
<el-table-column :label="$t('commons.table.port')" :min-width="120" prop="port" />
<el-table-column :label="$t('commons.table.status')" :min-width="120">
<template #default="{ row }">
<el-tag type="info" v-if="row.isUsed">
{{
row.appName
? $t('firewall.used') + ' ( ' + row.appName + ' )'
: $t('firewall.used')
}}
</el-tag>
<el-tag type="success" v-else>{{ $t('firewall.unUsed') }}</el-tag>
</template>
</el-table-column>
<el-table-column :min-width="80" :label="$t('firewall.strategy')" prop="strategy">
<template #default="{ row }">
<el-button
v-if="row.strategy === 'accept'"
:disabled="row.appName === '1panel'"
@click="onChangeStatus(row, 'drop')"
link
type="success"
>
{{ $t('firewall.accept') }}
</el-button>
<el-button v-else link type="danger" @click="onChangeStatus(row, 'accept')">
{{ $t('firewall.drop') }}
</el-button>
</template>
</el-table-column>
<el-table-column :min-width="80" :label="$t('firewall.address')" prop="address">
<template #default="{ row }">
<span v-if="row.address && row.address !== 'Anywhere'">{{ row.address }}</span>
<span v-else>{{ $t('firewall.allIP') }}</span>
</template>
</el-table-column>
<fu-table-operations
width="200px"
:buttons="buttons"
:ellipsis="10"
:label="$t('commons.table.operate')"
fix
/>
</ComplexTable>
</template>
</LayoutContent>
</div>
<div v-else>
<LayoutContent :title="$t('firewall.firewall')" :divider="true">
<template #main>
<div class="app-warn">
<div>
<span>{{ $t('firewall.notSupport') }}</span>
<el-link
style="font-size: 12px; margin-left: 5px"
@click="toDoc"
icon="Position"
type="primary"
>
{{ $t('firewall.quickJump') }}
</el-link>
<div>
<img src="@/assets/images/no_app.svg" />
<div>
<img src="@/assets/images/no_app.svg" />
</div>
</div>
</div>
</div>
</template>
</LayoutContent>
</template>
</LayoutContent>
</div>
</div>
<OperatrDialog @search="search" ref="dialogRef" />

View file

@ -131,7 +131,9 @@ const getStatus = async () => {
loading.value = true;
em('update:loading', true);
const res = await GetSupervisorStatus();
data.value = res.data.config as HostTool.Supersivor;
if (res.data.config) {
data.value = res.data.config as HostTool.Supersivor;
}
const status = {
isExist: data.value.isExist && data.value.ctlExist,