886 lines
38 KiB
Vue
886 lines
38 KiB
Vue
<script>
|
|
/** 云实例标签页编排层：detail 提供统一详情与能力，tab 双向绑定当前面板，子面板按需加载。 */
|
|
import "~/assets/styles/InstanceTraffic.CyyEAXl3.css";
|
|
import "~/assets/styles/RingProgress.CVwR7il5.css";
|
|
import "~/assets/styles/OsIcon.CAi4Iz2S.css";
|
|
import "~/assets/styles/InstanceOverview.C9ExpxMB.css";
|
|
import "~/assets/styles/InstanceMonitorSkeleton.C0FT51jJ.css";
|
|
import "~/assets/styles/InstanceLoadingShell.CwfiUwdU.css";
|
|
import "~/assets/styles/FlowPacketPanel.-RJSx13z.css";
|
|
import "~/assets/styles/InstanceServiceInfo.BftSVIeW.css";
|
|
import "~/assets/styles/InstanceManage.apzbBV1c.css";
|
|
import { toDisplayString } from "vue";
|
|
import { renderList } from "vue";
|
|
import { mergeModels } from "vue";
|
|
import { useModel } from "vue";
|
|
import { watch } from "vue";
|
|
import { Suspense } from "vue";
|
|
import { defineAsyncComponent } from "vue";
|
|
import { createBlock } from "vue";
|
|
import { ref } from "vue";
|
|
import { withCtx } from "vue";
|
|
import { createCommentVNode } from "vue";
|
|
import { computed } from "vue";
|
|
import { createElementBlock } from "vue";
|
|
import { Fragment } from "vue";
|
|
import { createElementVNode } from "vue";
|
|
import { createTextVNode } from "vue";
|
|
import { unref } from "vue";
|
|
import { defineComponent } from "vue";
|
|
import { createVNode } from "vue";
|
|
import { openBlock } from "vue";
|
|
import { loadModule } from "~/utils/load-module.js";
|
|
import button from "primevue/button";
|
|
import { t as _plugin_vue_export_helper_t } from "~/lib/_plugin-vue_export-helper.js";
|
|
import message from "primevue/message";
|
|
import InstanceServiceInfo from "~/components/instance/InstanceServiceInfo.vue";
|
|
import InstanceLoadingShell from "~/components/instance/InstanceLoadingShell.vue";
|
|
import InstanceMonitorSkeleton from "~/components/instance/InstanceMonitorSkeleton.vue";
|
|
import tabs from "primevue/tabs";
|
|
import tabpanels from "primevue/tabpanels";
|
|
import tabpanel from "primevue/tabpanel";
|
|
import tablist from "primevue/tablist";
|
|
import tab from "primevue/tab";
|
|
import InstanceOverview from "~/components/instance/InstanceOverview.vue";
|
|
var oe = defineAsyncComponent(() =>
|
|
loadModule(
|
|
() =>
|
|
import("~/components/instance/InstanceMonitor.vue").then(
|
|
(e) => e.default || e,
|
|
),
|
|
[],
|
|
import.meta.url,
|
|
),
|
|
),
|
|
D = defineAsyncComponent(() =>
|
|
loadModule(
|
|
() =>
|
|
import("~/components/instance/InstanceAccess.vue").then(
|
|
(e) => e.default || e,
|
|
),
|
|
[],
|
|
import.meta.url,
|
|
),
|
|
),
|
|
O = defineAsyncComponent(() =>
|
|
loadModule(
|
|
() =>
|
|
import("~/components/instance/InstanceDisks.vue").then(
|
|
(e) => e.default || e,
|
|
),
|
|
[],
|
|
import.meta.url,
|
|
),
|
|
),
|
|
k = defineAsyncComponent(() =>
|
|
loadModule(
|
|
() =>
|
|
import("~/components/instance/InstanceNetwork.vue").then(
|
|
(e) => e.default || e,
|
|
),
|
|
[],
|
|
import.meta.url,
|
|
),
|
|
),
|
|
A = defineAsyncComponent(() =>
|
|
loadModule(
|
|
() =>
|
|
import("~/components/MfCloudBackupPanel.vue").then(
|
|
(e) => e.default || e,
|
|
),
|
|
[],
|
|
import.meta.url,
|
|
),
|
|
),
|
|
j = defineAsyncComponent(() =>
|
|
loadModule(
|
|
() =>
|
|
import("~/components/instance/InstanceBilling.vue").then(
|
|
(e) => e.default || e,
|
|
),
|
|
[],
|
|
import.meta.url,
|
|
),
|
|
),
|
|
M = defineAsyncComponent(() =>
|
|
loadModule(
|
|
() =>
|
|
import("~/components/mfcloud/MfCloudLogs.vue").then(
|
|
(e) => e.default || e,
|
|
),
|
|
[],
|
|
import.meta.url,
|
|
),
|
|
),
|
|
N = {
|
|
class: `instance-manage`,
|
|
},
|
|
P = {
|
|
key: 1,
|
|
class: `bs-wrap`,
|
|
},
|
|
F = {
|
|
class: `bs-block`,
|
|
},
|
|
I = {
|
|
class: `bs-block`,
|
|
},
|
|
L = Object.assign(
|
|
_plugin_vue_export_helper_t(
|
|
defineComponent({
|
|
__name: `InstanceManage`,
|
|
props: mergeModels(
|
|
{
|
|
hostId: {},
|
|
productId: {},
|
|
productState: {},
|
|
host: {},
|
|
module: {},
|
|
detail: {},
|
|
},
|
|
{
|
|
tab: {
|
|
default: `overview`,
|
|
},
|
|
tabModifiers: {},
|
|
},
|
|
),
|
|
emits: mergeModels([`refresh`, `pay`], [`update:tab`]),
|
|
setup(n, { emit: o }) {
|
|
let _ = n,
|
|
b = o,
|
|
S = ref(null),
|
|
L = 0,
|
|
{
|
|
info: R,
|
|
powerDesc: z,
|
|
loading: B,
|
|
error: V,
|
|
caps: H,
|
|
disksLoading: U,
|
|
disksError: W,
|
|
disksLoaded: G,
|
|
refreshDisks: K,
|
|
} = _.detail,
|
|
q = computed(() => _.host.status === `Active`),
|
|
J = useModel(n, `tab`),
|
|
Y = computed(() => [
|
|
{
|
|
value: `overview`,
|
|
label: `概要`,
|
|
},
|
|
{
|
|
value: `monitor`,
|
|
label: `监控`,
|
|
},
|
|
{
|
|
value: `access`,
|
|
label: `访问控制`,
|
|
},
|
|
...(H.value.disk === !1
|
|
? []
|
|
: [
|
|
{
|
|
value: `disk`,
|
|
label: `硬盘`,
|
|
},
|
|
]),
|
|
{
|
|
value: `network`,
|
|
label: `网络与安全`,
|
|
},
|
|
...(H.value.snapshot
|
|
? [
|
|
{
|
|
value: `backup`,
|
|
label: `备份与快照`,
|
|
},
|
|
]
|
|
: []),
|
|
{
|
|
value: `billing`,
|
|
label: `计费`,
|
|
},
|
|
...(H.value.log
|
|
? [
|
|
{
|
|
value: `log`,
|
|
label: `日志`,
|
|
},
|
|
]
|
|
: []),
|
|
]);
|
|
function se(e) {
|
|
J.value = Y.value.some((t) => t.value === e) ? e : `overview`;
|
|
}
|
|
function ce(e) {
|
|
// 顶部重装/救援入口先确认实例状态与能力，再用唯一动作号交给访问面板消费。
|
|
q.value &&
|
|
(e !== `rescue` || H.value.rescue) &&
|
|
(e !== `reinstall` || H.value.reinstall) &&
|
|
((J.value = `access`),
|
|
(S.value = {
|
|
kind: e,
|
|
id: ++L,
|
|
}));
|
|
}
|
|
function le() {
|
|
S.value = null;
|
|
}
|
|
watch(
|
|
[Y, J],
|
|
// 模块能力变化可能移除当前标签；始终回到有效概要页而不是停留在不存在的面板。
|
|
([e, t]) => {
|
|
e.some((e) => e.value === t) || (J.value = `overview`);
|
|
},
|
|
{
|
|
immediate: !0,
|
|
},
|
|
);
|
|
let X = (e) => `实例尚未开通，${e}`;
|
|
return (r, i) => {
|
|
let o = button,
|
|
c = message,
|
|
d = InstanceServiceInfo,
|
|
_ = InstanceLoadingShell,
|
|
L = tab,
|
|
ue = tablist,
|
|
de = InstanceOverview,
|
|
Z = tabpanel,
|
|
fe = oe,
|
|
pe = InstanceMonitorSkeleton,
|
|
me = D,
|
|
he = O,
|
|
ge = k,
|
|
Q = A,
|
|
$ = j,
|
|
_e = M,
|
|
ve = tabpanels,
|
|
ye = tabs;
|
|
return (
|
|
openBlock(),
|
|
createElementBlock(`div`, N, [
|
|
unref(V) && unref(R)
|
|
? (openBlock(),
|
|
createBlock(
|
|
c,
|
|
{
|
|
key: 0,
|
|
severity: `error`,
|
|
closable: !1,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(V)), 1),
|
|
createVNode(
|
|
o,
|
|
{
|
|
label: `重试`,
|
|
text: ``,
|
|
size: `small`,
|
|
loading: unref(B),
|
|
onClick: (i[0] ||= (e) => n.detail.load()),
|
|
},
|
|
null,
|
|
8,
|
|
[`loading`],
|
|
),
|
|
]),
|
|
_: 1,
|
|
},
|
|
))
|
|
: createCommentVNode(``, !0),
|
|
!unref(q) || (!unref(R) && unref(V))
|
|
? (openBlock(),
|
|
createBlock(
|
|
d,
|
|
{
|
|
key: 1,
|
|
host: n.host,
|
|
module: n.module,
|
|
info: unref(R),
|
|
onPay: (i[1] ||= (e) => b(`pay`, e)),
|
|
},
|
|
null,
|
|
8,
|
|
[`host`, `module`, `info`],
|
|
))
|
|
: !unref(R) && !unref(V)
|
|
? (openBlock(),
|
|
createBlock(_, {
|
|
key: 2,
|
|
}))
|
|
: createCommentVNode(``, !0),
|
|
unref(V) && !unref(R) && unref(q)
|
|
? (openBlock(),
|
|
createBlock(
|
|
c,
|
|
{
|
|
key: 3,
|
|
severity: `warn`,
|
|
closable: !1,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(V)), 1),
|
|
createVNode(o, {
|
|
label: `重试`,
|
|
text: ``,
|
|
onClick: (i[2] ||= (e) => n.detail.load()),
|
|
}),
|
|
]),
|
|
_: 1,
|
|
},
|
|
))
|
|
: createCommentVNode(``, !0),
|
|
unref(q) && unref(R)
|
|
? (openBlock(),
|
|
createBlock(
|
|
ye,
|
|
{
|
|
key: 4,
|
|
value: J.value,
|
|
"onUpdate:value": (i[11] ||= (e) => (J.value = e)),
|
|
lazy: ``,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
createVNode(ue, null, {
|
|
default: withCtx(() => [
|
|
(openBlock(!0),
|
|
createElementBlock(
|
|
Fragment,
|
|
null,
|
|
renderList(
|
|
unref(Y),
|
|
(t) => (
|
|
openBlock(),
|
|
createBlock(
|
|
L,
|
|
{
|
|
key: t.value,
|
|
value: t.value,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
createTextVNode(
|
|
toDisplayString(t.label),
|
|
1,
|
|
),
|
|
]),
|
|
_: 2,
|
|
},
|
|
1032,
|
|
[`value`],
|
|
)
|
|
),
|
|
),
|
|
128,
|
|
)),
|
|
]),
|
|
_: 1,
|
|
}),
|
|
createVNode(ve, null, {
|
|
default: withCtx(() => [
|
|
createVNode(
|
|
Z,
|
|
{
|
|
value: `overview`,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
unref(q)
|
|
? (openBlock(),
|
|
createBlock(
|
|
de,
|
|
{
|
|
key: 1,
|
|
"product-state": n.productState,
|
|
info: unref(R),
|
|
host: n.host,
|
|
"host-id": n.hostId,
|
|
module: n.module,
|
|
caps: unref(H),
|
|
"power-desc": unref(z),
|
|
"disks-loading": unref(U),
|
|
"disks-error": unref(W),
|
|
"disks-loaded": unref(G),
|
|
onPay: (i[3] ||= (e) =>
|
|
b(`pay`, e)),
|
|
onGoTab: se,
|
|
onAccessAction: ce,
|
|
onRefreshDisks: unref(K),
|
|
},
|
|
null,
|
|
8,
|
|
[
|
|
`product-state`,
|
|
`info`,
|
|
`host`,
|
|
`host-id`,
|
|
`module`,
|
|
`caps`,
|
|
`power-desc`,
|
|
`disks-loading`,
|
|
`disks-error`,
|
|
`disks-loaded`,
|
|
`onRefreshDisks`,
|
|
],
|
|
))
|
|
: (openBlock(),
|
|
createBlock(
|
|
c,
|
|
{
|
|
key: 0,
|
|
severity: `info`,
|
|
closable: !1,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
createTextVNode(
|
|
toDisplayString(
|
|
X(`以下数据将在开通后可用。`),
|
|
),
|
|
1,
|
|
),
|
|
]),
|
|
_: 1,
|
|
},
|
|
)),
|
|
]),
|
|
_: 1,
|
|
},
|
|
),
|
|
createVNode(
|
|
Z,
|
|
{
|
|
value: `monitor`,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
unref(q)
|
|
? (openBlock(),
|
|
createBlock(
|
|
Suspense,
|
|
{
|
|
key: 1,
|
|
},
|
|
{
|
|
fallback: withCtx(() => [
|
|
createVNode(pe),
|
|
]),
|
|
default: withCtx(() => [
|
|
createVNode(
|
|
fe,
|
|
{
|
|
"host-id": n.hostId,
|
|
module: n.module,
|
|
},
|
|
null,
|
|
8,
|
|
[`host-id`, `module`],
|
|
),
|
|
]),
|
|
_: 1,
|
|
},
|
|
))
|
|
: (openBlock(),
|
|
createBlock(
|
|
c,
|
|
{
|
|
key: 0,
|
|
severity: `info`,
|
|
closable: !1,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
createTextVNode(
|
|
toDisplayString(
|
|
X(`暂无监控数据。`),
|
|
),
|
|
1,
|
|
),
|
|
]),
|
|
_: 1,
|
|
},
|
|
)),
|
|
]),
|
|
_: 1,
|
|
},
|
|
),
|
|
createVNode(
|
|
Z,
|
|
{
|
|
value: `access`,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
unref(q)
|
|
? (openBlock(),
|
|
createBlock(
|
|
me,
|
|
{
|
|
key: 1,
|
|
info: unref(R),
|
|
"host-id": n.hostId,
|
|
"product-id": n.productId,
|
|
module: n.module,
|
|
caps: unref(H),
|
|
detail: n.detail,
|
|
"pending-action": unref(S),
|
|
onRefresh: (i[4] ||= (e) =>
|
|
b(`refresh`)),
|
|
onActionConsumed: le,
|
|
},
|
|
null,
|
|
8,
|
|
[
|
|
`info`,
|
|
`host-id`,
|
|
`product-id`,
|
|
`module`,
|
|
`caps`,
|
|
`detail`,
|
|
`pending-action`,
|
|
],
|
|
))
|
|
: (openBlock(),
|
|
createBlock(
|
|
c,
|
|
{
|
|
key: 0,
|
|
severity: `info`,
|
|
closable: !1,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
createTextVNode(
|
|
toDisplayString(
|
|
X(`暂不能进行访问相关操作。`),
|
|
),
|
|
1,
|
|
),
|
|
]),
|
|
_: 1,
|
|
},
|
|
)),
|
|
]),
|
|
_: 1,
|
|
},
|
|
),
|
|
unref(H).disk === !1
|
|
? createCommentVNode(``, !0)
|
|
: (openBlock(),
|
|
createBlock(
|
|
Z,
|
|
{
|
|
key: 0,
|
|
value: `disk`,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
unref(q)
|
|
? (openBlock(),
|
|
createBlock(
|
|
he,
|
|
{
|
|
key: 1,
|
|
disks: unref(R).disks,
|
|
"host-id": n.hostId,
|
|
"product-id": n.productId,
|
|
module: n.module,
|
|
"upgrade-allowed":
|
|
unref(H).upgrade,
|
|
loading: unref(U),
|
|
error: unref(W),
|
|
loaded: unref(G),
|
|
onPay: (i[5] ||= (e) =>
|
|
b(`pay`, e)),
|
|
onRefresh: unref(K),
|
|
},
|
|
null,
|
|
8,
|
|
[
|
|
`disks`,
|
|
`host-id`,
|
|
`product-id`,
|
|
`module`,
|
|
`upgrade-allowed`,
|
|
`loading`,
|
|
`error`,
|
|
`loaded`,
|
|
`onRefresh`,
|
|
],
|
|
))
|
|
: (openBlock(),
|
|
createBlock(
|
|
c,
|
|
{
|
|
key: 0,
|
|
severity: `info`,
|
|
closable: !1,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
createTextVNode(
|
|
toDisplayString(
|
|
X(`暂不能管理硬盘。`),
|
|
),
|
|
1,
|
|
),
|
|
]),
|
|
_: 1,
|
|
},
|
|
)),
|
|
]),
|
|
_: 1,
|
|
},
|
|
)),
|
|
createVNode(
|
|
Z,
|
|
{
|
|
value: `network`,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
unref(q)
|
|
? (openBlock(),
|
|
createBlock(
|
|
ge,
|
|
{
|
|
key: 1,
|
|
info: unref(R),
|
|
"host-id": n.hostId,
|
|
"product-id": n.productId,
|
|
module: n.module,
|
|
caps: unref(H),
|
|
onPay: (i[6] ||= (e) =>
|
|
b(`pay`, e)),
|
|
onRefresh: (i[7] ||= (e) =>
|
|
b(`refresh`)),
|
|
},
|
|
null,
|
|
8,
|
|
[
|
|
`info`,
|
|
`host-id`,
|
|
`product-id`,
|
|
`module`,
|
|
`caps`,
|
|
],
|
|
))
|
|
: (openBlock(),
|
|
createBlock(
|
|
c,
|
|
{
|
|
key: 0,
|
|
severity: `info`,
|
|
closable: !1,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
createTextVNode(
|
|
toDisplayString(
|
|
X(`暂无网络信息。`),
|
|
),
|
|
1,
|
|
),
|
|
]),
|
|
_: 1,
|
|
},
|
|
)),
|
|
]),
|
|
_: 1,
|
|
},
|
|
),
|
|
unref(H).snapshot
|
|
? (openBlock(),
|
|
createBlock(
|
|
Z,
|
|
{
|
|
key: 1,
|
|
value: `backup`,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
unref(q)
|
|
? (openBlock(),
|
|
createElementBlock(`div`, P, [
|
|
createElementVNode(`section`, F, [
|
|
createVNode(
|
|
Q,
|
|
{
|
|
"product-id": n.productId,
|
|
"upgrade-allowed":
|
|
unref(H).upgrade,
|
|
module: n.module,
|
|
"host-id": n.hostId,
|
|
kind: `snapshot`,
|
|
limit: Number(
|
|
unref(R).raw.snap_num ??
|
|
0,
|
|
),
|
|
onPay: (i[8] ||= (e) =>
|
|
b(`pay`, e)),
|
|
},
|
|
null,
|
|
8,
|
|
[
|
|
`product-id`,
|
|
`upgrade-allowed`,
|
|
`module`,
|
|
`host-id`,
|
|
`limit`,
|
|
],
|
|
),
|
|
]),
|
|
createElementVNode(`section`, I, [
|
|
createVNode(
|
|
Q,
|
|
{
|
|
"product-id": n.productId,
|
|
"upgrade-allowed":
|
|
unref(H).upgrade,
|
|
module: n.module,
|
|
"host-id": n.hostId,
|
|
kind: `backup`,
|
|
limit: Number(
|
|
unref(R).raw.backup_num ??
|
|
0,
|
|
),
|
|
"backup-mode": String(
|
|
unref(R).raw
|
|
.backup_mode ?? ``,
|
|
),
|
|
onPay: (i[9] ||= (e) =>
|
|
b(`pay`, e)),
|
|
},
|
|
null,
|
|
8,
|
|
[
|
|
`product-id`,
|
|
`upgrade-allowed`,
|
|
`module`,
|
|
`host-id`,
|
|
`limit`,
|
|
`backup-mode`,
|
|
],
|
|
),
|
|
]),
|
|
]))
|
|
: (openBlock(),
|
|
createBlock(
|
|
c,
|
|
{
|
|
key: 0,
|
|
severity: `info`,
|
|
closable: !1,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
...(i[12] ||= [
|
|
createTextVNode(
|
|
`实例尚未开通，暂不能管理备份与快照。`,
|
|
-1,
|
|
),
|
|
]),
|
|
]),
|
|
_: 1,
|
|
},
|
|
)),
|
|
]),
|
|
_: 1,
|
|
},
|
|
))
|
|
: createCommentVNode(``, !0),
|
|
createVNode(
|
|
Z,
|
|
{
|
|
value: `billing`,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
createVNode(
|
|
$,
|
|
{
|
|
"product-state": n.productState,
|
|
"upgrade-allowed": unref(H).upgrade,
|
|
host: n.host,
|
|
info: unref(R),
|
|
"host-id": n.hostId,
|
|
module: n.module,
|
|
disks: unref(R).disks,
|
|
provisioned: unref(q),
|
|
onPay: (i[10] ||= (e) => b(`pay`, e)),
|
|
},
|
|
null,
|
|
8,
|
|
[
|
|
`product-state`,
|
|
`upgrade-allowed`,
|
|
`host`,
|
|
`info`,
|
|
`host-id`,
|
|
`module`,
|
|
`disks`,
|
|
`provisioned`,
|
|
],
|
|
),
|
|
]),
|
|
_: 1,
|
|
},
|
|
),
|
|
unref(H).log
|
|
? (openBlock(),
|
|
createBlock(
|
|
Z,
|
|
{
|
|
key: 2,
|
|
value: `log`,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
J.value === `log`
|
|
? (openBlock(),
|
|
createBlock(
|
|
_e,
|
|
{
|
|
key: 0,
|
|
"host-id": n.hostId,
|
|
module: n.module,
|
|
},
|
|
null,
|
|
8,
|
|
[`host-id`, `module`],
|
|
))
|
|
: createCommentVNode(``, !0),
|
|
]),
|
|
_: 1,
|
|
},
|
|
))
|
|
: createCommentVNode(``, !0),
|
|
]),
|
|
_: 1,
|
|
}),
|
|
]),
|
|
_: 1,
|
|
},
|
|
8,
|
|
[`value`],
|
|
))
|
|
: createCommentVNode(``, !0),
|
|
])
|
|
);
|
|
};
|
|
},
|
|
}),
|
|
[[`__scopeId`, `data-v-627058ac`]],
|
|
),
|
|
{
|
|
__name: `InstanceManage`,
|
|
},
|
|
);
|
|
export {};
|
|
export default L;
|
|
</script>
|