{{ t("edit") }}
@@ -99,6 +99,7 @@ export default defineComponent({
async function queryMetrics() {
const params = await useQueryProcessor(props.data);
+
if (!params) {
state.source = {};
return;
@@ -137,15 +138,18 @@ export default defineComponent({
}
);
watch(
- () => selectorStore.currentService,
+ () => [selectorStore.currentService, selectorStore.currentDestService],
() => {
- if (dashboardStore.entity === EntityType[0].value) {
+ if (
+ dashboardStore.entity === EntityType[0].value ||
+ dashboardStore.entity === EntityType[4].value
+ ) {
queryMetrics();
}
}
);
watch(
- () => selectorStore.currentPod,
+ () => [selectorStore.currentPod, selectorStore.currentDestPod],
() => {
if (dashboardStore.entity === EntityType[0].value) {
return;
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index 50d0e3e7..cb1f51af 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -142,7 +142,7 @@ export enum MetricCatalog {
export const EntityType = [
{ value: "Service", label: "Service", key: 1 },
{ value: "All", label: "All", key: 10 },
- { value: "Endpoint", label: "Service Endpoint", key: 3 },
+ { value: "Endpoint", label: "Endpoint", key: 3 },
{ value: "ServiceInstance", label: "Service Instance", key: 3 },
{ value: "ServiceRelation", label: "Service Relation", key: 2 },
{
@@ -152,6 +152,7 @@ export const EntityType = [
},
{ value: "EndpointRelation", label: "Endpoint Relation", key: 4 },
];
+export const hasTopology = ["All", "Service", "ServiceRelation", "Endpoint"];
export const TableEntity: any = {
InstanceList: EntityType[3].value,
EndpointList: EntityType[2].value,
@@ -165,8 +166,40 @@ export const ToolIcons = [
{ name: "playlist_add", content: "Add Widget", id: "addWidget" },
{ name: "all_inbox", content: "Add Tab", id: "addTab" },
// { name: "insert_image", content: "Add Image", id: "addImage" },
- { name: "save_alt", content: "Export", id: "export" },
- { name: "folder_open", content: "Import", id: "import" },
- { name: "settings", content: "Settings", id: "settings" },
- { name: "save", content: "Apply", id: "applay" },
+ // { name: "save_alt", content: "Export", id: "export" },
+ // { name: "folder_open", content: "Import", id: "import" },
+ // { name: "settings", content: "Settings", id: "settings" },
+ { name: "device_hub", content: "Add Topology", id: "topology" },
+ // { name: "save", content: "Apply", id: "apply" },
];
+export const ScopeType = [
+ { value: "Service", label: "Service", key: 1 },
+ { value: "Endpoint", label: "Endpoint", key: 3 },
+ { value: "ServiceInstance", label: "Service Instance", key: 3 },
+];
+export const LegendConditions = [
+ { label: "&&", value: "and" },
+ { label: "||", value: "or" },
+];
+export const MetricConditions = [
+ { label: ">", value: ">" },
+ { label: "<", value: "<" },
+];
+export enum LegendOpt {
+ NAME = "name",
+ VALUE = "value",
+ CONDITION = "condition",
+}
+export const DepthList = ["1", "2", "3", "4", "5"].map((item: string) => ({
+ value: item,
+ label: item,
+}));
+export const Colors: any = {
+ green: "#67C23A",
+ blue: "#409EFF",
+ red: "#F56C6C",
+ grey: "#909399",
+ white: "#fff",
+ black: "#000",
+ orange: "#E6A23C",
+};
diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue
index 0f1577f3..9c3b6e78 100644
--- a/src/views/dashboard/panel/Layout.vue
+++ b/src/views/dashboard/panel/Layout.vue
@@ -42,10 +42,11 @@ import { useDashboardStore } from "@/store/modules/dashboard";
import { LayoutConfig } from "@/types/dashboard";
import Widget from "../controls/Widget.vue";
import Tab from "../controls/Tab.vue";
+import Topology from "../controls/Topology.vue";
export default defineComponent({
name: "Layout",
- components: { Widget, Tab },
+ components: { Widget, Tab, Topology },
setup() {
const dashboardStore = useDashboardStore();
function layoutUpdatedEvent(newLayout: LayoutConfig[]) {
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 1f8584e8..eb5827ac 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -20,7 +20,7 @@ limitations under the License. -->
{{
- dashboardStore.entity === "Endpoint"
+ ["EndpointRelation", "Endpoint"].includes(dashboardStore.entity)
? "$Endpoint"
: "$ServiceInstance"
}}
@@ -37,48 +37,58 @@ limitations under the License. -->
-
+
$DestinationService
- $DestinationServiceInstance
+
+ {{
+ dashboardStore.entity === "EndpointRelation"
+ ? "$DestinationEndpoint"
+ : "$DestinationServiceInstance"
+ }}
-
-
-
-
-
+
+
@@ -88,7 +98,7 @@ import { reactive, watch } from "vue";
import { useRoute } from "vue-router";
import { useDashboardStore } from "@/store/modules/dashboard";
import { useAppStoreWithOut } from "@/store/modules/app";
-import { EntityType, ToolIcons } from "../data";
+import { EntityType, ToolIcons, hasTopology } from "../data";
import { useSelectorStore } from "@/store/modules/selectors";
import { ElMessage } from "element-plus";
import { Option } from "@/types/app";
@@ -105,12 +115,16 @@ const states = reactive<{
key: number;
currentService: string;
currentPod: string;
+ currentDestService: string;
+ currentDestPod: string;
}>({
destService: "",
destPod: "",
key: (type && type.key) || 0,
currentService: "",
currentPod: "",
+ currentDestService: "",
+ currentDestPod: "",
});
dashboardStore.setLayer(String(params.layerId));
@@ -127,56 +141,136 @@ function initSelector() {
}
async function setSelector() {
- if (params.podId) {
- await selectorStore.getService(String(params.serviceId));
- states.currentService = selectorStore.currentService.value;
- await fetchPods(String(params.entity), false);
- const currentPod = selectorStore.pods.filter(
- (d: { id: string }) => d.id === String(params.podId)
- )[0];
- selectorStore.setCurrentPod(currentPod);
- states.currentPod = currentPod.label;
+ if (
+ [
+ EntityType[2].value,
+ EntityType[3].value,
+ EntityType[5].value,
+ EntityType[6].value,
+ ].includes(String(params.entity))
+ ) {
+ setSourceSelector();
+ if (
+ [EntityType[2].value, EntityType[3].value].includes(String(params.entity))
+ ) {
+ return;
+ }
+ setDestSelector();
return;
}
- // entity=Service with serviceId
+ // entity=Service/ServiceRelation
const json = await selectorStore.fetchServices(dashboardStore.layerId);
if (json.errors) {
ElMessage.error(json.errors);
return;
}
- const currentService = selectorStore.services.filter(
- (d: { id: string }) => d.id === String(params.serviceId)
- )[0];
+ let currentService, currentDestService;
+ for (const d of selectorStore.services) {
+ if (d.id === String(params.serviceId)) {
+ currentService = d;
+ }
+ if (d.id === String(params.destServiceId)) {
+ currentDestService = d;
+ }
+ }
selectorStore.setCurrentService(currentService);
+ selectorStore.setCurrentDestService(currentDestService);
states.currentService = selectorStore.currentService.value;
+ states.currentDestService = selectorStore.currentDestService.value;
+}
+
+async function setSourceSelector() {
+ await selectorStore.getService(String(params.serviceId));
+ states.currentService = selectorStore.currentService.value;
+ const e = String(params.entity).split("Relation")[0];
+ await fetchPods(e, selectorStore.currentService.id, false);
+ if (!(selectorStore.pods.length && selectorStore.pods[0])) {
+ selectorStore.setCurrentPod(null);
+ states.currentPod = "";
+ return;
+ }
+ const pod = params.podId || selectorStore.pods[0].id;
+ const currentPod = selectorStore.pods.filter(
+ (d: { id: string }) => d.id === pod
+ )[0];
+ if (currentPod) {
+ selectorStore.setCurrentPod(currentPod);
+ states.currentPod = currentPod.label;
+ }
+}
+
+async function setDestSelector() {
+ await selectorStore.getService(String(params.destServiceId), true);
+ states.currentDestService = selectorStore.currentDestService.value;
+ await fetchPods(
+ String(params.entity),
+ selectorStore.currentDestService.id,
+ false
+ );
+ if (!(selectorStore.destPods.length && selectorStore.destPods[0])) {
+ selectorStore.setCurrentDestPod(null);
+ states.currentDestPod = "";
+ return;
+ }
+ const destPod = params.destPodId || selectorStore.destPods[0].id;
+ const currentDestPod = selectorStore.destPods.filter(
+ (d: { id: string }) => d.id === destPod
+ )[0];
+ if (currentDestPod) {
+ selectorStore.setCurrentDestPod(currentDestPod);
+ states.currentDestPod = currentDestPod.label;
+ }
}
async function getServices() {
if (!dashboardStore.layerId) {
return;
}
- if (dashboardStore.entity === EntityType[1].value) {
- return;
- }
const json = await selectorStore.fetchServices(dashboardStore.layerId);
if (json.errors) {
ElMessage.error(json.errors);
return;
}
+ if (dashboardStore.entity === EntityType[1].value) {
+ return;
+ }
selectorStore.setCurrentService(
selectorStore.services.length ? selectorStore.services[0] : null
);
+ selectorStore.setCurrentDestService(
+ selectorStore.services.length ? selectorStore.services[1] : null
+ );
states.currentService = selectorStore.currentService.value;
- fetchPods(dashboardStore.entity, true);
+ states.currentDestService = selectorStore.currentDestService.value;
+ const e = dashboardStore.entity.split("Relation")[0];
+ if (
+ [EntityType[2].value, EntityType[3].value].includes(dashboardStore.entity)
+ ) {
+ fetchPods(e, selectorStore.currentService.id, true);
+ }
+ if (
+ [EntityType[5].value, EntityType[6].value].includes(dashboardStore.entity)
+ ) {
+ fetchPods(dashboardStore.entity, selectorStore.currentDestService.id, true);
+ }
}
async function changeService(service: Service[]) {
if (service[0]) {
states.currentService = service[0].value;
selectorStore.setCurrentService(service[0]);
- fetchPods(dashboardStore.entity, true);
+ fetchPods(dashboardStore.entity, selectorStore.currentService.id, true);
} else {
- selectorStore.setCurrentService("");
+ selectorStore.setCurrentService(null);
+ }
+}
+
+function changeDestService(service: Service[]) {
+ if (service[0]) {
+ states.currentDestService = service[0].value;
+ selectorStore.setCurrentDestService(service[0]);
+ } else {
+ selectorStore.setCurrentDestService(null);
}
}
@@ -199,6 +293,9 @@ function clickIcons(t: { id: string; content: string; name: string }) {
case "addImage":
dashboardStore.addControl("Image");
break;
+ case "topology":
+ dashboardStore.addControl("Topology");
+ break;
case "settings":
dashboardStore.setConfigPanel(true);
break;
@@ -207,11 +304,11 @@ function clickIcons(t: { id: string; content: string; name: string }) {
}
}
-async function fetchPods(type: string, setPod: boolean) {
+async function fetchPods(type: string, serviceId: string, setPod: boolean) {
let resp;
switch (type) {
- case "Endpoint":
- resp = await selectorStore.getEndpoints();
+ case EntityType[2].value:
+ resp = await selectorStore.getEndpoints({ serviceId });
if (setPod) {
selectorStore.setCurrentPod(
selectorStore.pods.length ? selectorStore.pods[0] : null
@@ -219,8 +316,8 @@ async function fetchPods(type: string, setPod: boolean) {
states.currentPod = selectorStore.currentPod.label;
}
break;
- case "ServiceInstance":
- resp = await selectorStore.getServiceInstances();
+ case EntityType[3].value:
+ resp = await selectorStore.getServiceInstances({ serviceId });
if (setPod) {
selectorStore.setCurrentPod(
selectorStore.pods.length ? selectorStore.pods[0] : null
@@ -228,6 +325,27 @@ async function fetchPods(type: string, setPod: boolean) {
states.currentPod = selectorStore.currentPod.label;
}
break;
+ case EntityType[6].value:
+ resp = await selectorStore.getEndpoints({ serviceId, isRelation: true });
+ if (setPod) {
+ selectorStore.setCurrentDestPod(
+ selectorStore.destPods.length ? selectorStore.destPods[0] : null
+ );
+ states.currentDestPod = selectorStore.currentDestPod.label;
+ }
+ break;
+ case EntityType[5].value:
+ resp = await selectorStore.getServiceInstances({
+ serviceId,
+ isRelation: true,
+ });
+ if (setPod) {
+ selectorStore.setCurrentDestPod(
+ selectorStore.destPods.length ? selectorStore.destPods[0] : null
+ );
+ states.currentDestPod = selectorStore.currentDestPod.label;
+ }
+ break;
default:
resp = {};
}
@@ -258,9 +376,13 @@ watch(
padding: 4px 2px;
}
+.tool-icons {
+ margin-top: 2px;
+}
+
.icon-btn {
display: inline-block;
- padding: 0 5px;
+ padding: 3px;
text-align: center;
border: 1px solid #ccc;
border-radius: 3px;
@@ -268,9 +390,6 @@ watch(
cursor: pointer;
background-color: #eee;
color: #666;
-}
-
-.item {
font-size: 12px;
}
diff --git a/src/views/dashboard/related/topology/Index.vue b/src/views/dashboard/related/topology/Index.vue
new file mode 100644
index 00000000..83ef1905
--- /dev/null
+++ b/src/views/dashboard/related/topology/Index.vue
@@ -0,0 +1,30 @@
+
+