import codes

src/views/Infrastructure.vue

@@ -0,0 +1,29 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="Infrastructure">
+    <InfrastructureMap />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import InfrastructureMap from "./infrastructure/InfrastructureMap.vue";
+</script>
+<style scoped>
+.Infrastructure {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/Log.vue

@@ -0,0 +1,23 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="about">{{ props.msg }}</div>
+</template>
+<script lang="ts" setup>
+import { defineProps } from "vue";
+const props = defineProps({
+  msg: String,
+});
+</script>

src/views/Service.vue

@@ -0,0 +1,131 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="service-table">
+    <el-table :data="tableData" :span-method="objectSpanMethod" border>
+      <el-table-column
+        v-for="(h, index) in tableHeader"
+        :label="t(h)"
+        :key="h + index"
+      >
+        <template #default="scope">
+          <router-link
+            :to="`${state.path}/${scope.row.serviceName}/metrics`"
+            v-if="h === tableHeader[1] && index !== 0"
+          >
+            <span class="service-name cp">{{ scope.row[h] }}</span>
+          </router-link>
+          <span v-else>{{ scope.row[h] }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
+import { ElTable, ElTableColumn } from "element-plus";
+
+const route = useRoute();
+const { t } = useI18n();
+const tableHeader = [
+  "groupName",
+  "serviceName",
+  "types",
+  "technologies",
+  "endpoints",
+  "health",
+];
+const tableData = [
+  {
+    endpoints: 2,
+    groupName: "group 1",
+    serviceName: "discount",
+    types: "HTTP",
+    health: true,
+    technologies: "Spring Boot",
+  },
+  {
+    endpoints: 3,
+    groupName: "group 1",
+    serviceName: "frontend",
+    types: "HTTP",
+    health: true,
+    technologies: "Node.js",
+  },
+  {
+    endpoints: 3,
+    groupName: "group 2",
+    serviceName: "web",
+    types: "",
+    health: true,
+    technologies: "Nginx",
+  },
+  {
+    endpoints: 3,
+    groupName: "group 2",
+    serviceName: "shipping",
+    types: "HTTP",
+    health: true,
+    technologies: "JVM",
+  },
+  {
+    endpoints: 3,
+    groupName: "group 3",
+    serviceName: "payment",
+    types: "HTTP MESSAGING",
+    health: true,
+    technologies: "RabbitMQ Python",
+  },
+];
+const state = reactive({
+  path: route.meta.headPath,
+});
+const objectSpanMethod = (item: { columnIndex: number; rowIndex: number }) => {
+  if (item.columnIndex === 0) {
+    if (item.rowIndex % 2 === 0) {
+      return {
+        rowspan: 2,
+        colspan: 1,
+      };
+    } else {
+      return {
+        rowspan: 0,
+        colspan: 0,
+      };
+    }
+  }
+};
+watch(
+  () => route.meta.headPath,
+  (path: unknown) => {
+    if (!path) {
+      return;
+    }
+    state.path = path;
+  }
+);
+</script>
+<style lang="scss" scoped>
+.service-name {
+  color: #448edf;
+  cursor: pointer;
+}
+.service-table {
+  padding: 15px;
+}
+</style>

src/views/Settings.vue

@@ -0,0 +1,201 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="settings">
+    <!-- <div class="flex-h item">
+      <span class="label">{{ t("version") }}</span>
+      <span>{{ rocketbotGlobal.version }}</span>
+    </div> -->
+    <div class="flex-h item">
+      <span class="label">{{ t("language") }}</span>
+      <el-switch
+        v-model="lang"
+        :change="setLang"
+        active-text="En"
+        inactive-text="Zh"
+        style="height: 25px"
+      />
+    </div>
+    <div class="flex-h item">
+      <span class="label">{{ t("serverZone") }}</span>
+      <div>
+        <span>UTC</span>
+        <span class="ml-5 mr-5">{{ utcHour >= 0 ? "+" : "" }}</span>
+        <input
+          type="number"
+          v-model="utcHour"
+          min="-12"
+          max="14"
+          class="utc-input"
+          @change="setUTCHour"
+        />
+        <span class="ml-5 mr-5">:</span>
+        <span class="utc-min">{{ utcMin > 9 || utcMin === 0 ? null : 0 }}</span>
+        <input
+          type="number"
+          v-model="utcMin"
+          min="0"
+          max="59"
+          class="utc-input"
+          @change="setUTCMin"
+        />
+      </div>
+    </div>
+    <div class="flex-h item">
+      <span class="label">{{ t("auto") }}</span>
+      <el-switch :change="handleAuto" style="height: 25px" />
+      <div class="auto-time ml-5">
+        <span class="auto-select">
+          <input
+            type="number"
+            v-model="autoTime"
+            @change="changeAutoTime"
+            min="1"
+          />
+        </span>
+        {{ t("second") }}
+        <i class="ml-10">{{ t("timeReload") }}</i>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+import { useI18n } from "vue-i18n";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import timeFormat from "@/utils/timeFormat";
+import { ElSwitch } from "element-plus";
+
+const { t, locale } = useI18n();
+const state = reactive<{ timer: any }>({
+  timer: null,
+});
+const lang = ref<boolean>(locale.value === "zh" ? false : true);
+const autoTime = ref<number>(6);
+const auto = ref<boolean>(false);
+const appStore = useAppStoreWithOut();
+const utcArr = appStore.utc.split(":");
+const utcHour = ref<number>(isNaN(Number(utcArr[0])) ? 0 : Number(utcArr[0]));
+const utcMin = ref<number>(isNaN(Number(utcArr[1])) ? 0 : Number(utcArr[1]));
+
+const handleReload = () => {
+  const gap =
+    appStore.duration.end.getTime() - appStore.duration.start.getTime();
+  const time: Date[] = [new Date(new Date().getTime() - gap), new Date()];
+  appStore.setDuration(timeFormat(time));
+};
+const handleAuto = (status: boolean) => {
+  if (autoTime.value < 1) {
+    return;
+  }
+  auto.value = status;
+  if (auto.value) {
+    handleReload();
+    state.timer = setInterval(handleReload, autoTime.value * 1000);
+  } else {
+    clearInterval(state.timer);
+  }
+};
+const changeAutoTime = () => {
+  if (autoTime.value < 1) {
+    return;
+  }
+  clearInterval(state.timer);
+  if (auto.value) {
+    handleReload();
+    state.timer = setInterval(handleReload, autoTime.value * 1000);
+  }
+};
+const setLang = (): void => {
+  if (lang.value) {
+    locale.value = "en";
+    window.localStorage.setItem("lang", "en");
+  } else {
+    locale.value = "zh";
+    window.localStorage.setItem("lang", "zh");
+  }
+};
+const setUTCHour = () => {
+  if (utcHour.value < -12) {
+    utcHour.value = -12;
+  }
+  if (utcHour.value > 14) {
+    utcHour.value = 14;
+  }
+  if (isNaN(utcHour.value)) {
+    utcHour.value = 0;
+  }
+  appStore.setUTC(utcHour.value, utcMin.value);
+};
+const setUTCMin = () => {
+  if (utcMin.value < 0) {
+    utcMin.value = 0;
+  }
+  if (utcMin.value > 59) {
+    utcMin.value = 59;
+  }
+  if (isNaN(utcMin.value)) {
+    utcMin.value = 0;
+  }
+  appStore.setUTC(utcHour.value, utcMin.value);
+};
+</script>
+<style lang="scss" scoped>
+.utc-input {
+  color: inherit;
+  background: 0;
+  border: 0;
+  outline: none;
+  padding-bottom: 0;
+}
+.utc-min {
+  display: inline-block;
+  padding-top: 2px;
+}
+.auto-select {
+  border-radius: 3px;
+  background-color: #fff;
+  padding: 1px;
+  border-radius: 3px;
+
+  input {
+    width: 38px;
+    border-style: unset;
+    outline: 0;
+  }
+}
+.settings {
+  color: #222;
+  font-family: inherit;
+  font-size: 14px;
+  padding: 20px;
+  .item {
+    margin-top: 10px;
+  }
+  input {
+    outline: 0;
+    width: 50px;
+    border-radius: 3px;
+    border: 1px solid #ccc;
+    text-align: center;
+    height: 25px;
+  }
+  .label {
+    width: 100px;
+    display: inline-block;
+    font-weight: 500;
+  }
+}
+</style>

src/views/infrastructure/InfrastructureMap.vue

@@ -0,0 +1,339 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="infrastructure-box">
+    <div ref="mapRef" class="map"></div>
+    <div class="info-box" v-show="showInfo">
+      {{ nodeTypes[type] }} Information
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from "vue";
+import * as THREE from "three";
+import fac from "three-orbit-controls";
+import { Line2 } from "three/examples/jsm/lines/Line2";
+import { LineGeometry } from "three/examples/jsm/lines/LineGeometry";
+import { LineMaterial } from "three/examples/jsm/lines/LineMaterial";
+import { HexagonCreateParams } from "@/types/infrastructure";
+import HexagonPillar from "./geometry/hexagon-pillar";
+import { Layout } from "./geometry/hexagon-layout";
+import { NodeTypes } from "./data";
+
+const animateCallbacks: Array<() => void> = [];
+const showInfo = ref<boolean>(false);
+const objSelected = ref<any>(null);
+const meshColors = ref([0xa1cffb, 0x333333, 0x333840, 0x999999]); //[0xa489b2, 0xf2bfd0, 0xf0eaea, 0xef6775, 0xfbc580];
+const nodeTypes = ref(NodeTypes);
+const type = ref<number>(0);
+const width = ref<number>(1920);
+const height = ref<number>(900);
+const mapRef = ref<HTMLDivElement | null>(null);
+let lineObj: any;
+let scene: any;
+let camera: any;
+let raycaster: any;
+let pointer: any;
+
+onMounted(() => {
+  if (mapRef.value) {
+    init(mapRef.value);
+  }
+  window.addEventListener("click", onMouseClick, false);
+  animate();
+});
+
+function init(dom: HTMLDivElement): void {
+  width.value = dom.offsetWidth;
+  height.value = dom.offsetHeight + 74;
+  camera = new THREE.PerspectiveCamera(
+    45,
+    width.value / height.value,
+    1,
+    10000
+  );
+  camera.position.set(0, 30, 140);
+  scene = new THREE.Scene();
+  let light = new THREE.DirectionalLight(0xffffff, 0.8);
+  light.position.set(4, 10, 4);
+
+  scene.add(light);
+  scene.add(new THREE.AmbientLight(0x404040));
+  scene.background = new THREE.Color(0x333840);
+  const renderer = new THREE.WebGLRenderer({
+    antialias: true,
+    alpha: true,
+  });
+  renderer.setSize(width.value, height.value);
+  dom.appendChild(renderer.domElement);
+
+  const window = Window as any;
+  const OrbitControls = fac(THREE);
+  window.controls = new OrbitControls(camera, renderer.domElement);
+  window.controls.enableZoom = true;
+  window.controls.enablePan = true;
+
+  const helper = new THREE.GridHelper(10000, 40, 0x04002c, 0x04002c);
+  helper.position.y = -1000;
+  // this.scene.add(helper);
+  const axis = new THREE.AxesHelper(15000);
+  // this.scene.add(axis);
+  // add mesh
+  createInfrastructure();
+
+  raycaster = new THREE.Raycaster();
+  pointer = new THREE.Vector2();
+  animateCallbacks.push(() => {
+    renderer.render(scene, camera);
+  });
+}
+
+function createInfrastructure() {
+  //layer mesh
+  const l = {
+    hexagonParam: [27, 0.04, 5, 0.04, 0],
+    count: 1,
+    radius: 28, // layout hexagons radius
+  };
+  const [originVectors] = createHexagonLine(l, [0, 0, 0], 0);
+  // group mesh
+  const g: HexagonCreateParams = {
+    hexagonParam: [8, 0.04, 5, 0.04, 0.01],
+    count: 1,
+    radius: 8.5,
+  };
+  const [gVecs] = createPillarMesh(g, originVectors, 1);
+  // service mesh
+  const s: HexagonCreateParams = {
+    hexagonParam: [2, 0.04, 5, 0.04, 0.2],
+    count: 1,
+    radius: 2.2,
+  };
+  const [sVecs] = createPillarMesh(s, gVecs, 2);
+
+  // instance mesh
+  const i: HexagonCreateParams = {
+    hexagonParam: [0.2, 0.04, 5, 0.04, 0.3],
+    count: 2,
+    radius: 0.3,
+  };
+  createPillarMesh(i, sVecs, 3);
+}
+
+function createHexagonLine(
+  p: HexagonCreateParams,
+  originVectors: number[],
+  type: number
+) {
+  lineObj = new THREE.Object3D();
+  const centers: number[] = [];
+  const geo = HexagonPillar.getVertices(false, ...p.hexagonParam);
+
+  for (let i = 0; i < originVectors.length / 3; i++) {
+    const c = [originVectors[3 * i], originVectors[3 * i + 2]];
+    const [origins] = hexGrid(p.count, p.radius, c);
+    centers.push(...origins);
+  }
+  for (let c = 0; c < centers.length / 3; c++) {
+    const vertices = [];
+    for (let v = 0; v < geo.vertices.length; v++) {
+      vertices.push(
+        centers[3 * c] + geo.vertices[v].x,
+        centers[3 * c + 1] + geo.vertices[v].y,
+        centers[3 * c + 2] + geo.vertices[v].z
+      );
+    }
+    const geometry = new LineGeometry().setPositions(vertices);
+    geometry.setAttribute(
+      "id",
+      new THREE.BufferAttribute(new Int8Array([type]), 1)
+    );
+    const material = new LineMaterial({
+      color: meshColors.value[type],
+      linewidth: 4,
+      // opacity: 0.2,
+      dashed: false,
+    });
+    material.resolution.set(width.value, height.value);
+    const line = new Line2(geometry, material);
+    line.computeLineDistances();
+    lineObj.add(line);
+  }
+  scene.add(lineObj);
+  return [centers];
+}
+
+function createPillarMesh(
+  p: HexagonCreateParams,
+  originVectors: number[],
+  type: number
+) {
+  const centers: number[] = [];
+  const geo = HexagonPillar.get(false, ...p.hexagonParam);
+
+  for (let i = 0; i < originVectors.length / 3; i++) {
+    const c = [originVectors[3 * i], originVectors[3 * i + 2]];
+    const [origins] = hexGrid(p.count, p.radius, c);
+    centers.push(...origins);
+  }
+  const hMat = new THREE.MeshStandardMaterial({
+    side: THREE.DoubleSide,
+    transparent: true,
+  });
+  const geometry = new THREE.BufferGeometry();
+  geometry.setIndex(geo.indices);
+  geometry.setAttribute(
+    "position",
+    new THREE.BufferAttribute(new Float32Array(geo.vertices), 3)
+  );
+  geometry.setAttribute(
+    "normal",
+    new THREE.BufferAttribute(new Float32Array(geo.normals), 3)
+  );
+  geometry.setAttribute(
+    "type",
+    new THREE.BufferAttribute(new Int8Array([type]), 1)
+  );
+  const mesh = new THREE.InstancedMesh(geometry, hMat, centers.length / 3);
+  for (let c = 0; c < centers.length / 3; c++) {
+    const matrix = new THREE.Matrix4();
+    const color = new THREE.Color();
+    color.setHex(meshColors.value[type]);
+    for (let j = 0; j < geo.vertices.length / 3; j++) {
+      matrix.setPosition(
+        geo.vertices[3 * j] + centers[3 * c],
+        geo.vertices[3 * j + 1] + centers[3 * c + 1],
+        geo.vertices[3 * j + 2] + centers[3 * c + 2]
+      );
+    }
+    mesh.setMatrixAt(c, matrix);
+    mesh.setColorAt(c, color);
+  }
+  mesh.instanceMatrix.needsUpdate = true;
+  scene.add(mesh);
+
+  return [centers];
+}
+
+function hexGrid(n = 1, radius = 1, origin = [0, 0]) {
+  let x, y, yn, p;
+  const gLayout = new Layout(radius, origin);
+  // const coord = [];
+  const pos = [];
+  // x = -1; n = 1.5
+  for (x = -n; x <= n; x++) {
+    y = Math.max(-n, -x - n); // 0
+    yn = Math.min(n, -x + n); // 1
+    // y = 0 yn = 1
+    for (y; y <= yn; y++) {
+      p = gLayout.axialToPixel(x, y);
+      pos.push(p[0], 0, p[1]);
+      // coord.push(x, y);
+    }
+  }
+  return [pos];
+}
+
+function onMouseClick(event: MouseEvent) {
+  pointer.x = ((event.clientX - 210) / width.value) * 2 - 1;
+  pointer.y = -((event.clientY - 0) / height.value) * 2 + 1;
+  raycaster.setFromCamera(pointer, camera);
+  let meshes = scene.children.filter((d: any) => d instanceof THREE.Mesh);
+  meshes = [...meshes, ...lineObj.children];
+  const intersects = raycaster.intersectObjects(meshes, true);
+  const intersect = intersects[0];
+
+  if (objSelected.value) {
+    for (const m of meshes) {
+      if (m instanceof Line2) {
+        m.material.color.setHex(meshColors.value[0]);
+        m.material.needsUpdate = true;
+      } else {
+        const mType = m.geometry.getAttribute("type").array[0];
+        m.setColorAt(
+          objSelected.value.instanceId,
+          new THREE.Color(meshColors.value[mType])
+        );
+        m.instanceColor.needsUpdate = true;
+      }
+    }
+  }
+  if (intersect) {
+    showInfo.value = true;
+    if (intersect.object instanceof Line2) {
+      intersect.object.material.color.setHex(0x73b3b9);
+      objSelected.value = intersect;
+      type.value = 0;
+      intersect.object.material.needsUpdate = true;
+    } else {
+      intersect.object.setColorAt(
+        intersect.instanceId,
+        new THREE.Color(0x73b3b9)
+      );
+      intersect.object.instanceColor.needsUpdate = true;
+      objSelected.value = intersect;
+      type.value =
+        objSelected.value.object.geometry.getAttribute("type").array[0];
+    }
+  } else {
+    if (objSelected.value) {
+      for (const m of meshes) {
+        if (m instanceof Line2) {
+          m.material.color.setHex(meshColors.value[0]);
+          m.material.needsUpdate = true;
+        } else {
+          const mType = m.geometry.getAttribute("type").array[0];
+          m.setColorAt(
+            objSelected.value.instanceId,
+            new THREE.Color(meshColors.value[mType])
+          );
+          m.instanceColor.needsUpdate = true;
+        }
+      }
+    }
+    objSelected.value = null;
+    type.value = NaN;
+    showInfo.value = false;
+  }
+}
+
+function animate(): void {
+  animateCallbacks.forEach((fn) => fn());
+  requestAnimationFrame(animate);
+}
+</script>
+<style scoped>
+.info-box {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  background: #fff;
+  color: #000;
+  height: 700px;
+  width: 300px;
+  border-radius: 3px;
+  padding: 10px;
+}
+.infrastructure-box {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.map {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/infrastructure/data.ts

@@ -0,0 +1,23 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const NodeTypes = [
+  "Layer",
+  "Group",
+  "Service",
+  "Service Instance",
+  "endpoint",
+];

src/views/infrastructure/geometry/hexagon-layout.ts

@@ -0,0 +1,144 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class Orientation {
+  public f0 = 0;
+  public f1 = 0;
+  public f2 = 0;
+  public f3 = 0;
+  public b0? = 0;
+  public b1? = 0;
+  public b2? = 0;
+  public b3? = 0;
+  public start_angle? = 0;
+  constructor(
+    f0: number,
+    f1: number,
+    f2: number,
+    f3: number,
+    b0: number,
+    b1: number,
+    b2: number,
+    b3: number,
+    start_angle: number
+  ) {
+    this.f0 = f0;
+    this.f1 = f1;
+    this.f2 = f2;
+    this.f3 = f3;
+    this.b0 = b0;
+    this.b1 = b1;
+    this.b2 = b2;
+    this.b3 = b3;
+    this.start_angle = start_angle;
+  }
+}
+
+const SQRT3 = Math.sqrt(3.0);
+class Layout {
+  static Pointy = new Orientation(
+    SQRT3,
+    SQRT3 / 2.0,
+    0.0,
+    3.0 / 2.0,
+    SQRT3 / 3.0,
+    -1.0 / 3.0,
+    0.0,
+    2.0 / 3.0,
+    0.5
+  );
+  static Flat = new Orientation(
+    3.0 / 2.0,
+    0.0,
+    SQRT3 / 2.0,
+    SQRT3,
+    2.0 / 3.0,
+    0.0,
+    -1.0 / 3.0,
+    SQRT3 / 3.0,
+    0.0
+  );
+
+  static spacing(radius: number, isPointy = false): number[] {
+    return isPointy
+      ? [SQRT3 * radius, 2 * radius * (3 / 4)]
+      : [2 * radius * (3 / 4), SQRT3 * radius];
+  }
+
+  private radius = 1;
+  private orientation: Orientation = { f0: 0, f1: 0, f2: 0, f3: 0 };
+  private origin = [0, 0];
+
+  constructor(radius: number, origin = [0, 0], orientation?: Orientation) {
+    this.radius = radius; //Layout.spacing( radius, ( orientation === Layout.Pointy ) );
+    this.orientation = orientation || Layout.Flat;
+    this.origin = origin;
+  }
+
+  // Same as HexToPixel, Except it takes raw coords instead of hex object.
+  axialToPixel(ax: number, ay: number): number[] {
+    const M = this.orientation;
+    const x = (M.f0 * ax + M.f1 * ay) * this.radius;
+    const y = (M.f2 * ax + M.f3 * ay) * this.radius;
+
+    return [x + this.origin[0], y + this.origin[1]];
+  }
+
+  hexToPixel(h: { x: number; y: number }): number[] {
+    const M = this.orientation;
+    const x = (M.f0 * h.x + M.f1 * h.y) * this.radius;
+    const y = (M.f2 * h.x + M.f3 * h.y) * this.radius;
+
+    return [x + this.origin[0], y + this.origin[1]];
+  }
+}
+
+class Hex extends Int16Array {
+  constructor(x: number, y: number, z = null) {
+    super(3);
+    this.xyz(x, y, z);
+  }
+
+  xyz(x: number, y: number, z: number | null = null): Hex {
+    if (z == null) z = -x - y;
+    if (x + y + z != 0) {
+      console.log("Bad Axial Coordinate : : q %d r %d s %d", x, y, z);
+    }
+
+    this[0] = x;
+    this[1] = y;
+    this[2] = z;
+    return this;
+  }
+
+  get x(): number {
+    return this[0];
+  }
+  get y(): number {
+    return this[1];
+  }
+  get z(): number {
+    return this[2];
+  }
+
+  get len(): number {
+    return Math.floor(
+      (Math.abs(this[0]) + Math.abs(this[1]) + Math.abs(this[2])) / 2
+    );
+  }
+}
+
+export { Hex, Orientation, Layout };

src/views/infrastructure/geometry/hexagon-pillar.ts

@@ -0,0 +1,281 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import Vec3 from "@/utils/vec3";
+import Vec2 from "@/utils/vec2";
+
+class HexagonPillar {
+  static get(
+    pointyUp = true,
+    radius = 0.5,
+    cornerScale = 0.2,
+    cornerDiv = 3,
+    capSize = 0.2,
+    offsetHeight = 0.5
+  ): {
+    vertices: number[];
+    indices: number[];
+    texcoord: number[];
+    normals: number[];
+  } {
+    const rtn: {
+      vertices: number[];
+      indices: number[];
+      texcoord: number[];
+      normals: number[];
+    } = {
+      vertices: [],
+      indices: [],
+      texcoord: [],
+      normals: [],
+    };
+
+    let poly = createPolygon(radius, 6, pointyUp ? (30 * Math.PI) / 180 : 0); // Create Base Shape
+    poly = polyBevel(poly, cornerScale, cornerDiv); // Round the Shape Corners
+    // Base Layer
+    toVec3(rtn, poly);
+    const vertCnt = rtn.vertices.length / 3;
+    // Starting layer for Cap.
+    toVec3(rtn, poly, [0, offsetHeight, 0]);
+
+    // Extra Layers for Bevel
+    polyCapBevel(rtn, poly, cornerDiv, capSize, [0, offsetHeight, 0]);
+    const idxTip = rtn.vertices.length;
+
+    // Cap Center Point
+    rtn.vertices.push(0, capSize + offsetHeight, 0);
+    rtn.normals.push(0, 1, 0);
+
+    // Indices
+    const idx = idxTip / 3;
+    gridIndicesCol(rtn.indices, vertCnt, 2 + cornerDiv, 0, true, true);
+    fanIndices(rtn.indices, idx, idx - vertCnt, idx - 1, true);
+    //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+    return rtn;
+  }
+  static getVertices(pointyUp = true, radius = 0.5): { vertices: Vec3[] } {
+    const rtn = {
+      vertices: [],
+      normals: [],
+    };
+
+    const poly = createPolygon(radius, 6, pointyUp ? (30 * Math.PI) / 180 : 0); // Create Base Shape
+    toVec3(rtn, poly);
+    const vertices = [];
+    for (let i = 0; i < rtn.vertices.length / 3; i++) {
+      vertices.push(
+        new Vec3(
+          rtn.vertices[i * 3],
+          rtn.vertices[i * 3 + 1],
+          rtn.vertices[i * 3 + 2]
+        )
+      );
+    }
+    vertices.push(new Vec3(rtn.vertices[0], rtn.vertices[1], rtn.vertices[2]));
+    return { vertices };
+  }
+}
+// Create the basic 2d polygon shape
+function createPolygon(radius: number, sides = 6, offset = 0) {
+  const poly = [];
+  let i, rad;
+  for (i = 0; i < sides; i++) {
+    rad = Math.PI * 2 * (i / sides);
+    poly.push(Math.cos(rad + offset) * radius, Math.sin(rad + offset) * radius);
+  }
+  return poly;
+}
+// Bevel the corners of polygon
+function polyBevel(poly: number[], cornerScale = 0.2, cornerDiv = 3) {
+  const polyOut: number[] = [];
+  const len = poly.length / 2;
+  const a = new Vec2(); // 3 Points that forms a Polygon Corner
+  const b = new Vec2();
+  const c = new Vec2();
+
+  const va = new Vec2(); // Min/Max Points of the corner to bevel
+  const vb = new Vec2();
+
+  const norma = new Vec2(); // Inward Normals of the Corner Edges
+  const normb = new Vec2();
+  const pivot = new Vec2(); // Pivot point to create curved points
+  // eslint-disable-next-line
+  const v = new Vec2() as any;
+  let ii, i, j, k, radius;
+  for (j = 0; j < len; j++) {
+    i = mod(j - 1, len); // Previous Point
+    k = mod(j + 1, len); // Next Point
+
+    a.fromBuf(poly, i * 2); // Get the Point Positions out of flat buffer
+    b.fromBuf(poly, j * 2);
+    c.fromBuf(poly, k * 2);
+
+    va.fromLerp(a, b, 1.0 - cornerScale); // Get the two points to start and end curved corner
+    vb.fromLerp(b, c, cornerScale);
+    norma.fromSub(b, a).perpCCW().norm(); // Compute Inward normal of the two edges
+    normb.fromSub(c, b).perpCCW().norm();
+
+    raysIntersection(va, norma, vb, normb, pivot); // Point where the 2 normals converge.
+
+    radius = Vec2.len(va, pivot); // Get the Radius for the curved corner
+    va.pushTo(polyOut);
+
+    for (ii = 1; ii < cornerDiv; ii++) {
+      // Fill in the remaining points
+      v.fromLerp(va, vb, ii / cornerDiv) // Lerp between Start + end Points
+        .sub(pivot) // Localize it
+        .norm() // Normalize it
+        .scale(radius) // Scale it to the radius
+        .add(pivot) // Move it back to world space
+        .pushTo(polyOut);
+    }
+    vb.pushTo(polyOut);
+  }
+  return polyOut;
+}
+
+function mod(a: number, b: number): number {
+  const v = a % b;
+  return v < 0 ? b + v : v;
+}
+// Turn 2D Polygon Points into 3D Vertices
+function toVec3(
+  geo: { normals: number[]; vertices: number[] },
+  poly: number[],
+  offset?: Vec3 | number[]
+) {
+  const v = new Vec3();
+  // eslint-disable-next-line
+  let i: any;
+  offset = offset || [0, 0, 0];
+  for (i of Vec2.bufIter(poly)) {
+    v.fromVec2(i, true)
+      .add(offset)
+      .pushTo(geo.vertices)
+      .sub(offset)
+      .norm()
+      .pushTo(geo.normals);
+  }
+}
+// Create a Beveled cap for the extruded walls
+function polyCapBevel(
+  geo: { normals: number[]; vertices: number[] },
+  poly: number[],
+  cornerDiv: number,
+  capSize: number,
+  offset?: Vec3 | number[]
+) {
+  // eslint-disable-next-line
+  const v: any = new Vec2();
+  const lerp = [];
+  let pivot, top, pnt, i, vlen, tlen;
+
+  offset = offset || [0, 0, 0];
+  for (i = 0; i < poly.length; i += 2) {
+    v.fromBuf(poly, i);
+
+    vlen = v.len();
+    tlen = vlen - capSize;
+    pnt = new Vec3().fromVec2(v, true);
+    pivot = Vec3.scale(pnt, tlen / vlen);
+    top = Vec3.add(pivot, [0, capSize, 0]);
+
+    lerp.push({ pivot, top, pnt });
+  }
+  let t, itm;
+  pnt = new Vec3();
+  for (i = 1; i <= cornerDiv; i++) {
+    t = i / cornerDiv;
+    for (itm of lerp) {
+      pnt
+        .fromLerp(itm.pnt, itm.top, t)
+        .sub(itm.pivot)
+        .norm()
+        .pushTo(geo.normals)
+        .scale(capSize)
+        .add(itm.pivot)
+        .add(offset)
+        .pushTo(geo.vertices);
+    }
+  }
+}
+
+//https://stackoverflow.com/questions/2931573/determining-if-two-rays-intersect
+function raysIntersection(as: Vec2, ad: Vec2, bs: Vec2, bd: Vec2, out: Vec2) {
+  const dx = bs[0] - as[0];
+  const dy = bs[1] - as[1];
+  const det = bd[0] * ad[1] - bd[1] * ad[0];
+
+  if (det != 0) {
+    // near parallel line will yield noisy results
+    const u = (dy * bd[0] - dx * bd[1]) / det;
+    const v = (dy * ad[0] - dx * ad[1]) / det;
+
+    if (u >= 0 && v >= 0) {
+      out[0] = as[0] + ad[0] * u;
+      out[1] = as[1] + ad[1] * u;
+      return true;
+    }
+  }
+  return false;
+}
+/** Generate Indices of both a Looped or Unlooped Grid, Backslash Pattern, Loops on Columns */
+function gridIndicesCol(
+  out: number[],
+  row_size: number,
+  row_cnt: number,
+  start_idx = 0,
+  do_loop = false,
+  rev_quad = false
+) {
+  const row_stop = row_cnt - 1,
+    col_stop = do_loop ? row_size : row_size - 1;
+  let row_a, row_b, r, rr, rrr, a, b, c, d;
+  for (r = 0; r < row_stop; r++) {
+    // Figure out the starting Index for the Two Rows
+    // 2nd row might loop back to starting row when Looping.
+    row_a = start_idx + row_size * r;
+    row_b = start_idx + row_size * (r + 1);
+    for (rr = 0; rr < col_stop; rr++) {
+      // Defined the Vertex Index of a Quad
+      rrr = (rr + 1) % row_size;
+      a = row_a + rr;
+      b = row_a + rrr;
+      d = row_b + rr;
+      c = row_b + rrr;
+      if (!rev_quad) out.push(a, b, c, c, d, a);
+      // Counter ClockWise
+      else out.push(a, d, c, c, b, a);
+    }
+  }
+}
+function fanIndices(
+  out: number[],
+  midIdx: number,
+  edgeStart: number,
+  edgeEnd: number,
+  rev_quad = false
+) {
+  const len = edgeEnd - edgeStart + 1;
+  let i, ii;
+  for (i = 0; i < len; i++) {
+    ii = (i + 1) % len; // Next Point on the edge
+    if (!rev_quad) out.push(midIdx, edgeStart + i, edgeStart + ii);
+    // Counter ClockWise
+    else out.push(midIdx, edgeStart + ii, edgeStart + i);
+  }
+}
+export default HexagonPillar;

src/views/service/Endpoints.vue

@@ -0,0 +1,23 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="enpoints">This is a enpoint page</div>
+</template>
+<script lang="ts" setup></script>
+<style lang="scss" scoped>
+div {
+  padding: 15px;
+}
+</style>

src/views/service/Metrics.vue

@@ -0,0 +1,24 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div>This is the Metrics page</div>
+</template>
+<script lang="ts" setup></script>
+<style lang="scss" scoped>
+div {
+  padding: 15px;
+  text-align: center;
+}
+</style>

src/views/service/Panel.vue

@@ -0,0 +1,101 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="service-detail">
+    <div class="title">
+      <span>{{ state.serviceID }}</span>
+      <span>Types</span>
+      <span>Technologies</span>
+    </div>
+    <div class="tabs">
+      <router-link
+        class="tab cp"
+        v-for="tab in tabs"
+        :key="tab"
+        @click="handleClick(tab)"
+        :class="{ active: tab === activeName }"
+        :to="`${state.path}/${state.serviceID}/${tab}`"
+      >
+        {{ t(tab) }}
+      </router-link>
+    </div>
+    <Endpoints v-if="state.type === tabs[2]" />
+    <Metrics v-else-if="state.type === tabs[0]" />
+    <Topology
+      v-else-if="state.type === tabs[1]"
+      msg="This is the Topology page"
+    />
+    <Traces v-else-if="state.type === tabs[3]" msg="This is the Trace page" />
+    <Profiles v-else msg="This is the Profiles page" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
+import Metrics from "./Metrics.vue";
+import Endpoints from "./Endpoints.vue";
+import Topology from "./Topology.vue";
+import Traces from "./Traces.vue";
+import Profiles from "./Profiles.vue";
+
+const route = useRoute();
+const { t } = useI18n();
+const tabs = ["metrics", "topologies", "endpoints", "traces", "profiles"];
+const activeName = ref<string>(tabs[0]);
+const state = reactive({
+  serviceID: route.params.id,
+  type: route.params.type,
+  path: route.meta.headPath,
+});
+function handleClick(tab: string) {
+  activeName.value = tab;
+  state.type = tab;
+}
+</script>
+<style lang="scss" scoped>
+.service-detail {
+  text-align: left;
+}
+.tabs {
+  padding: 15px 15px 0 15px;
+  border-bottom: 1px solid var(--el-border-color-light);
+}
+.tab {
+  display: inline-block;
+  margin-right: 30px;
+  font-size: 13px;
+  font-weight: 400;
+  height: 30px;
+  &:hover {
+    color: var(--el-color-primary);
+  }
+  &.active {
+    color: var(--el-color-primary);
+    border-bottom: 1px solid var(--el-color-primary);
+  }
+}
+.title {
+  padding: 5px 0 5px 15px;
+  font-size: 14px;
+  font-weight: 400;
+  border-bottom: 1px solid #dfe4e8;
+  background-color: #c4c8e133;
+  span {
+    display: inline-block;
+    margin-right: 10px;
+  }
+}
+</style>

src/views/service/Profiles.vue

@@ -0,0 +1,31 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div>{{ msg }}</div>
+</template>
+
+<script lang="ts" setup>
+import { defineProps } from "vue";
+defineProps({
+  msg: { type: String },
+});
+// props.msg
+</script>
+
+<style scoped>
+div {
+  padding: 15px;
+}
+</style>

src/views/service/Topology.vue

@@ -0,0 +1,30 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div>Topology</div>
+</template>
+
+<script lang="ts" setup>
+import { defineProps } from "vue";
+defineProps({
+  msg: { type: String },
+});
+// props.msg
+</script>
+<style scoped>
+div {
+  padding: 15px;
+}
+</style>

src/views/service/Traces.vue

@@ -0,0 +1,31 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div>Traces</div>
+</template>
+
+<script lang="ts" setup>
+import { defineProps } from "vue";
+defineProps({
+  msg: { type: String },
+});
+// props.msg
+</script>
+
+<style scoped>
+div {
+  padding: 15px;
+}
+</style>

src/views/service/data.ts

@@ -0,0 +1,41 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const TabsConfig: { [key: string]: any } = {
+  GeneralService: [
+    { name: "metrics", path: "/generalService/metrics" },
+    { name: "traces", path: "/generalService/traces" },
+    { name: "profiles", path: "/generalService/profiles" },
+    { name: "services", path: "/generalService" },
+  ],
+  ServiceMesh: [
+    { name: "services", path: "/serviceMesh" },
+    { name: "metrics", path: "/serviceMesh/metrics" },
+    { name: "traces", path: "/serviceMesh/traces" },
+    { name: "profiles", path: "/serviceMesh/profiles" },
+  ],
+};
+export const PagesConfig = [
+  { label: "generalService", name: "GeneralService" },
+  { label: "serviceMesh", name: "ServiceMesh" },
+  { label: "virtualMachine", name: "VirtualMachine" },
+  { label: "dashboardHome", name: "DashboardHome" },
+  { label: "dashboardList", name: "DashboardList" },
+  { label: "logs", name: "Logs" },
+  { label: "settings", name: "Settings" },
+  { label: "events", name: "Events" },
+  { label: "alerts", name: "Alerts" },
+];