mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-12 15:52:57 +00:00
refactor: update widget types
This commit is contained in:
Fine
parent
569c4f6301
commit
e63ceb0891
@ -188,87 +188,104 @@ export const SortOrder = [
|
|||||||
{ label: "DES", value: "DES" },
|
{ label: "DES", value: "DES" },
|
||||||
{ label: "ASC", value: "ASC" },
|
{ label: "ASC", value: "ASC" },
|
||||||
];
|
];
|
||||||
|
export enum WidgetType {
|
||||||
|
Widget = "Widget",
|
||||||
|
Topology = "Topology",
|
||||||
|
Tab = "Tab",
|
||||||
|
Text = "Text",
|
||||||
|
TimeRange = "TimeRange",
|
||||||
|
Trace = "Trace",
|
||||||
|
Log = "Log",
|
||||||
|
Profile = "Profile",
|
||||||
|
Ebpf = "Ebpf",
|
||||||
|
DemandLog = "DemandLog",
|
||||||
|
Event = "Event",
|
||||||
|
NetworkProfiling = "NetworkProfiling",
|
||||||
|
ContinuousProfiling = "ContinuousProfiling",
|
||||||
|
ThirdPartyApp = "ThirdPartyApp",
|
||||||
|
TaskTimeline = "TaskTimeline",
|
||||||
|
}
|
||||||
export const AllTools = [
|
export const AllTools = [
|
||||||
{ name: "playlist_add", content: "Add Widget", id: "addWidget" },
|
{ name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
|
||||||
{ name: "all_inbox", content: "Add Tabs", id: "addTab" },
|
{ name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
|
||||||
{ name: "library_books", content: "Add Text", id: "addText" },
|
{ name: "library_books", content: "Add Text", id: WidgetType.Text },
|
||||||
{ name: "device_hub", content: "Add Topology", id: "addTopology" },
|
{ name: "device_hub", content: "Add Topology", id: WidgetType.Topology },
|
||||||
{ name: "merge", content: "Add Trace", id: "addTrace" },
|
{ name: "merge", content: "Add Trace", id: WidgetType.Trace },
|
||||||
{ name: "assignment", content: "Add Log", id: "addLog" },
|
{ name: "assignment", content: "Add Log", id: WidgetType.Log },
|
||||||
{ name: "add_iframe", content: "Add Iframe", id: "addIframe" },
|
{ name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
|
||||||
];
|
];
|
||||||
export const ServiceTools = [
|
export const ServiceTools = [
|
||||||
{ name: "playlist_add", content: "Add Widget", id: "addWidget" },
|
{ name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
|
||||||
{ name: "all_inbox", content: "Add Tabs", id: "addTab" },
|
{ name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
|
||||||
{ name: "library_books", content: "Add Text", id: "addText" },
|
{ name: "library_books", content: "Add Text", id: WidgetType.Text },
|
||||||
{ name: "device_hub", content: "Add Topology", id: "addTopology" },
|
{ name: "device_hub", content: "Add Topology", id: WidgetType.Topology },
|
||||||
{ name: "merge", content: "Add Trace", id: "addTrace" },
|
{ name: "merge", content: "Add Trace", id: WidgetType.Trace },
|
||||||
{ name: "timeline", content: "Add Trace Profiling", id: "addProfile" },
|
{ name: "timeline", content: "Add Trace Profiling", id: WidgetType.Profile },
|
||||||
{ name: "insert_chart", content: "Add eBPF Profiling", id: "addEbpf" },
|
{ name: "insert_chart", content: "Add eBPF Profiling", id: WidgetType.Ebpf },
|
||||||
{ name: "continuous_profiling", content: "Add Continuous Profiling", id: "addContinuousProfiling" },
|
{ name: "continuous_profiling", content: "Add Continuous Profiling", id: WidgetType.ContinuousProfiling },
|
||||||
{ name: "assignment", content: "Add Log", id: "addLog" },
|
{ name: "assignment", content: "Add Log", id: WidgetType.Log },
|
||||||
{ name: "demand", content: "Add On Demand Log", id: "addDemandLog" },
|
{ name: "demand", content: "Add On Demand Log", id: WidgetType.DemandLog },
|
||||||
{ name: "event", content: "Add Event", id: "addEvent" },
|
{ name: "event", content: "Add Event", id: WidgetType.Event },
|
||||||
{ name: "add_iframe", content: "Add Iframe", id: "addIframe" },
|
{ name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
|
||||||
];
|
];
|
||||||
export const InstanceTools = [
|
export const InstanceTools = [
|
||||||
{ name: "playlist_add", content: "Add Widget", id: "addWidget" },
|
{ name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
|
||||||
{ name: "all_inbox", content: "Add Tabs", id: "addTab" },
|
{ name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
|
||||||
{ name: "library_books", content: "Add Text", id: "addText" },
|
{ name: "library_books", content: "Add Text", id: WidgetType.Text },
|
||||||
{ name: "merge", content: "Add Trace", id: "addTrace" },
|
{ name: "merge", content: "Add Trace", id: WidgetType.Trace },
|
||||||
{ name: "assignment", content: "Add Log", id: "addLog" },
|
{ name: "assignment", content: "Add Log", id: WidgetType.Log },
|
||||||
{ name: "demand", content: "Add On Demand Log", id: "addDemandLog" },
|
{ name: "demand", content: "Add On Demand Log", id: WidgetType.DemandLog },
|
||||||
{ name: "event", content: "Add Event", id: "addEvent" },
|
{ name: "event", content: "Add Event", id: WidgetType.Event },
|
||||||
{ name: "add_iframe", content: "Add Iframe", id: "addIframe" },
|
{ name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
|
||||||
{
|
{
|
||||||
name: "timeline",
|
name: "timeline",
|
||||||
content: "Add Network Profiling",
|
content: "Add Network Profiling",
|
||||||
id: "addNetworkProfiling",
|
id: WidgetType.NetworkProfiling,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
export const EndpointTools = [
|
export const EndpointTools = [
|
||||||
{ name: "playlist_add", content: "Add Widget", id: "addWidget" },
|
{ name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
|
||||||
{ name: "all_inbox", content: "Add Tabs", id: "addTab" },
|
{ name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
|
||||||
{ name: "library_books", content: "Add Text", id: "addText" },
|
{ name: "library_books", content: "Add Text", id: WidgetType.Text },
|
||||||
{ name: "device_hub", content: "Add Topology", id: "addTopology" },
|
{ name: "device_hub", content: "Add Topology", id: WidgetType.Topology },
|
||||||
{ name: "merge", content: "Add Trace", id: "addTrace" },
|
{ name: "merge", content: "Add Trace", id: WidgetType.Trace },
|
||||||
{ name: "assignment", content: "Add Log", id: "addLog" },
|
{ name: "assignment", content: "Add Log", id: WidgetType.Log },
|
||||||
{ name: "event", content: "Add Event", id: "c" },
|
{ name: "event", content: "Add Event", id: WidgetType.Event },
|
||||||
{ name: "add_iframe", content: "Add Iframe", id: "addIframe" },
|
{ name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
|
||||||
];
|
];
|
||||||
export const ProcessTools = [
|
export const ProcessTools = [
|
||||||
{ name: "playlist_add", content: "Add Widget", id: "addWidget" },
|
{ name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
|
||||||
{ name: "all_inbox", content: "Add Tabs", id: "addTab" },
|
{ name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
|
||||||
{ name: "task_timeline", content: "Add Task Timeline", id: "addTaskTimeline" },
|
{ name: "task_timeline", content: "Add Task Timeline", id: WidgetType.TaskTimeline },
|
||||||
{ name: "library_books", content: "Add Text", id: "addText" },
|
{ name: "library_books", content: "Add Text", id: WidgetType.Text },
|
||||||
{ name: "add_iframe", content: "Add Iframe", id: "addIframe" },
|
{ name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
|
||||||
];
|
];
|
||||||
export const ProcessRelationTools = [
|
export const ProcessRelationTools = [
|
||||||
{ name: "playlist_add", content: "Add Widget", id: "addWidget" },
|
{ name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
|
||||||
{ name: "all_inbox", content: "Add Tabs", id: "addTab" },
|
{ name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
|
||||||
{ name: "library_books", content: "Add Text", id: "addText" },
|
{ name: "library_books", content: "Add Text", id: WidgetType.Text },
|
||||||
{ name: "add_iframe", content: "Add Iframe", id: "addIframe" },
|
{ name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
|
||||||
];
|
];
|
||||||
export const ServiceRelationTools = [
|
export const ServiceRelationTools = [
|
||||||
{ name: "playlist_add", content: "Add Widget", id: "addWidget" },
|
{ name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
|
||||||
{ name: "all_inbox", content: "Add Tabs", id: "addTab" },
|
{ name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
|
||||||
{ name: "library_books", content: "Add Text", id: "addText" },
|
{ name: "library_books", content: "Add Text", id: WidgetType.Text },
|
||||||
{ name: "device_hub", content: "Add Topology", id: "addTopology" },
|
{ name: "device_hub", content: "Add Topology", id: WidgetType.Topology },
|
||||||
{ name: "add_iframe", content: "Add Iframe", id: "addIframe" },
|
{ name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
|
||||||
];
|
];
|
||||||
|
|
||||||
export const EndpointRelationTools = [
|
export const EndpointRelationTools = [
|
||||||
{ name: "playlist_add", content: "Add Widget", id: "addWidget" },
|
{ name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
|
||||||
{ name: "all_inbox", content: "Add Tabs", id: "addTab" },
|
{ name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
|
||||||
{ name: "library_books", content: "Add Text", id: "addText" },
|
{ name: "library_books", content: "Add Text", id: WidgetType.Text },
|
||||||
{ name: "add_iframe", content: "Add Iframe", id: "addIframe" },
|
{ name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
|
||||||
];
|
];
|
||||||
export const InstanceRelationTools = [
|
export const InstanceRelationTools = [
|
||||||
{ name: "playlist_add", content: "Add Widget", id: "addWidget" },
|
{ name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
|
||||||
{ name: "all_inbox", content: "Add Tabs", id: "addTab" },
|
{ name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
|
||||||
{ name: "library_books", content: "Add Text", id: "addText" },
|
{ name: "library_books", content: "Add Text", id: WidgetType.Text },
|
||||||
{ name: "device_hub", content: "Add Topology", id: "addTopology" },
|
{ name: "device_hub", content: "Add Topology", id: WidgetType.Topology },
|
||||||
{ name: "add_iframe", content: "Add Iframe", id: "addIframe" },
|
{ name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
|
||||||
];
|
];
|
||||||
|
|
||||||
export const ScopeType = [
|
export const ScopeType = [
|
||||||
@ -349,21 +366,3 @@ export enum CallTypes {
|
|||||||
Server = "SERVER",
|
Server = "SERVER",
|
||||||
Client = "CLIENT",
|
Client = "CLIENT",
|
||||||
}
|
}
|
||||||
|
|
||||||
export enum WidgetType {
|
|
||||||
Widget = "Widget",
|
|
||||||
Topology = "Topology",
|
|
||||||
Tab = "Tab",
|
|
||||||
Text = "Text",
|
|
||||||
TimeRange = "TimeRange",
|
|
||||||
Trace = "Trace",
|
|
||||||
Log = "Log",
|
|
||||||
Profile = "Profile",
|
|
||||||
Ebpf = "Ebpf",
|
|
||||||
DemandLog = "DemandLog",
|
|
||||||
Event = "Event",
|
|
||||||
NetworkProfiling = "NetworkProfiling",
|
|
||||||
ContinuousProfiling = "ContinuousProfiling",
|
|
||||||
ThirdPartyApp = "ThirdPartyApp",
|
|
||||||
TaskTimeline = "TaskTimeline",
|
|
||||||
}
|
|
||||||
|
|||||||
@ -155,7 +155,7 @@ limitations under the License. -->
|
|||||||
const selectorStore = useSelectorStore();
|
const selectorStore = useSelectorStore();
|
||||||
const appStore = useAppStoreWithOut();
|
const appStore = useAppStoreWithOut();
|
||||||
const params = useRoute().params;
|
const params = useRoute().params;
|
||||||
const toolIcons = ref<{ name: string; content: string; id: string }[]>(AllTools);
|
const toolIcons = ref<{ name: string; content: string; id: WidgetType }[]>(AllTools);
|
||||||
const loading = ref<boolean>(false);
|
const loading = ref<boolean>(false);
|
||||||
const states = reactive<{
|
const states = reactive<{
|
||||||
destService: string;
|
destService: string;
|
||||||
@ -398,7 +398,7 @@ limitations under the License. -->
|
|||||||
loading.value = false;
|
loading.value = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function clickIcons(t: { id: string; content: string; name: string }) {
|
async function clickIcons(t: { id: WidgetType; content: string; name: string }) {
|
||||||
if (dashboardStore.selectedGrid && dashboardStore.selectedGrid.type === "Tab") {
|
if (dashboardStore.selectedGrid && dashboardStore.selectedGrid.type === "Tab") {
|
||||||
setTabControls(t.id);
|
setTabControls(t.id);
|
||||||
return;
|
return;
|
||||||
@ -410,106 +410,20 @@ limitations under the License. -->
|
|||||||
setControls(t.id);
|
setControls(t.id);
|
||||||
}
|
}
|
||||||
|
|
||||||
function setTabControls(id: string) {
|
function setTabControls(id: WidgetType) {
|
||||||
switch (id) {
|
if (!WidgetType[id]) {
|
||||||
case "addWidget":
|
ElMessage.info("Don't support this control");
|
||||||
dashboardStore.addTabControls(WidgetType.Widget);
|
return;
|
||||||
break;
|
|
||||||
case "addTrace":
|
|
||||||
dashboardStore.addTabControls(WidgetType.Trace);
|
|
||||||
break;
|
|
||||||
case "addLog":
|
|
||||||
dashboardStore.addTabControls(WidgetType.Log);
|
|
||||||
break;
|
|
||||||
case "addProfile":
|
|
||||||
dashboardStore.addTabControls(WidgetType.Profile);
|
|
||||||
break;
|
|
||||||
case "addEbpf":
|
|
||||||
dashboardStore.addTabControls(WidgetType.Ebpf);
|
|
||||||
break;
|
|
||||||
case "addTopology":
|
|
||||||
dashboardStore.addTabControls(WidgetType.Topology);
|
|
||||||
break;
|
|
||||||
case "addText":
|
|
||||||
dashboardStore.addTabControls(WidgetType.Text);
|
|
||||||
break;
|
|
||||||
case "addDemandLog":
|
|
||||||
dashboardStore.addTabControls(WidgetType.DemandLog);
|
|
||||||
break;
|
|
||||||
case "addEvent":
|
|
||||||
dashboardStore.addTabControls(WidgetType.Event);
|
|
||||||
break;
|
|
||||||
case "addNetworkProfiling":
|
|
||||||
dashboardStore.addTabControls(WidgetType.NetworkProfiling);
|
|
||||||
break;
|
|
||||||
case "addContinuousProfiling":
|
|
||||||
dashboardStore.addTabControls(WidgetType.ContinuousProfiling);
|
|
||||||
break;
|
|
||||||
case "addTimeRange":
|
|
||||||
dashboardStore.addTabControls(WidgetType.TimeRange);
|
|
||||||
break;
|
|
||||||
case "addIframe":
|
|
||||||
dashboardStore.addTabControls(WidgetType.ThirdPartyApp);
|
|
||||||
break;
|
|
||||||
case "addTaskTimeline":
|
|
||||||
dashboardStore.addTabControls(WidgetType.TaskTimeline);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
ElMessage.info("Don't support this control");
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
|
dashboardStore.addTabControls(id);
|
||||||
}
|
}
|
||||||
|
|
||||||
function setControls(id: string) {
|
function setControls(id: WidgetType) {
|
||||||
switch (id) {
|
if (!WidgetType[id]) {
|
||||||
case "addWidget":
|
ElMessage.info("Don't support this control");
|
||||||
dashboardStore.addControl(WidgetType.Widget);
|
return;
|
||||||
break;
|
|
||||||
case "addTab":
|
|
||||||
dashboardStore.addControl(WidgetType.Tab);
|
|
||||||
break;
|
|
||||||
case "addTrace":
|
|
||||||
dashboardStore.addControl(WidgetType.Trace);
|
|
||||||
break;
|
|
||||||
case "addProfile":
|
|
||||||
dashboardStore.addControl(WidgetType.Profile);
|
|
||||||
break;
|
|
||||||
case "addEbpf":
|
|
||||||
dashboardStore.addControl(WidgetType.Ebpf);
|
|
||||||
break;
|
|
||||||
case "addLog":
|
|
||||||
dashboardStore.addControl(WidgetType.Log);
|
|
||||||
break;
|
|
||||||
case "addTopology":
|
|
||||||
dashboardStore.addControl(WidgetType.Topology);
|
|
||||||
break;
|
|
||||||
case "addText":
|
|
||||||
dashboardStore.addControl(WidgetType.Text);
|
|
||||||
break;
|
|
||||||
case "addDemandLog":
|
|
||||||
dashboardStore.addControl(WidgetType.DemandLog);
|
|
||||||
break;
|
|
||||||
case "addEvent":
|
|
||||||
dashboardStore.addControl(WidgetType.Event);
|
|
||||||
break;
|
|
||||||
case "addNetworkProfiling":
|
|
||||||
dashboardStore.addControl(WidgetType.NetworkProfiling);
|
|
||||||
break;
|
|
||||||
case "addContinuousProfiling":
|
|
||||||
dashboardStore.addControl(WidgetType.ContinuousProfiling);
|
|
||||||
break;
|
|
||||||
case "addTimeRange":
|
|
||||||
dashboardStore.addControl(WidgetType.TimeRange);
|
|
||||||
break;
|
|
||||||
case "addIframe":
|
|
||||||
dashboardStore.addControl(WidgetType.ThirdPartyApp);
|
|
||||||
break;
|
|
||||||
case "addTaskTimeline":
|
|
||||||
dashboardStore.addControl(WidgetType.TaskTimeline);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
dashboardStore.addControl(WidgetType.Widget);
|
|
||||||
}
|
}
|
||||||
|
dashboardStore.addControl(id);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function fetchPods(type: string, serviceId: string, setPod: boolean, param?: { keyword?: string }) {
|
async function fetchPods(type: string, serviceId: string, setPod: boolean, param?: { keyword?: string }) {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user