github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-13 16:27:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Fine 2022-11-28 10:51:26 +08:00
parent 9ba96c6a81
commit 6106436086
6 changed files with 77 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Radio.vue
View File

@ -24,8 +24,8 @@ import { ref } from "vue";
import type { PropType } from "vue";
interface Option {
label: string;
value: string;
label: string | number;
value: string | number;
}
/*global defineProps, defineEmits */

2
src/components/Selector.vue
View File

@ -42,7 +42,7 @@ import type { PropType } from "vue";
interface Option {
label: string | number;
value: string | number | boolean;
value: string | number;
}
/*global defineProps, defineEmits*/

26
src/store/modules/network-profiling.ts
View File

@ -110,13 +110,29 @@ export const networkProfilingStore = defineStore({
this.calls = calls;
this.nodes = data.nodes;
},
async createNetworkTask(param: {
serviceId: string;
serviceInstanceId: string;
}) {
async createNetworkTask(
instanceId: string,
params: {
uriRegex: string;
when4xx: string;
when5xx: string;
minDuration: number;
}
) {
const res: AxiosResponse = await graphql
.query("newNetworkProfiling")
.params({ request: { instanceId: param.serviceInstanceId } });
.params({
request: {
instanceId,
samplings: {
...params,
settings: {
requireCompleteRequest: true,
requireCompleteResponse: true,
},
},
},
});
if (res.data.errors) {
return res.data;

60
src/views/dashboard/related/network-profiling/components/NewTask.vue
View File

@ -20,34 +20,31 @@ limitations under the License. -->
<el-input size="small" class="profile-input" v-model="states.uriRegex" />
</div>
<div>
<div class="label">{{ t("minThreshold") }} (ms)</div>
<el-input-number
<div class="label">{{ t("minDuration") }} (ms)</div>
<el-input
size="small"
class="profile-input"
:min="0"
v-model="states.minDuration"
type="number"
/>
</div>
<div>
<div class="label">{{ t("monitorTime") }}</div>
<div>
<Selector
size="small"
<div class="label">{{ t("when4xx") }}</div>
<Radio
class="mb-5"
:value="states.when4xx"
:options="InitTaskField.When4xx"
placeholder="Select a data"
@change="changeConfig({ when4xx: states.when4xx })"
class="profile-input"
:options="InitTaskField.Whenxx"
@change="changeConfig({ when4xx: $event })"
/>
</div>
</div>
<div>
<div class="label">{{ t("minThreshold") }} (ms)</div>
<el-input-number
size="small"
class="profile-input"
:min="0"
v-model="states.minDuration"
<div class="label">{{ t("when5xx") }}</div>
<Radio
class="mb-5"
:value="states.when5xx"
:options="InitTaskField.Whenxx"
@change="changeConfig({ when5xx: $event })"
/>
</div>
<div>
@ -62,21 +59,36 @@ import { reactive } from "vue";
import { useI18n } from "vue-i18n";
import { InitTaskField } from "./data";
/* global defineEmits */
const emits = defineEmits(["close"]);
const emits = defineEmits(["create"]);
const { t } = useI18n();
const states = reactive<any>({
const states = reactive<{
uriRegex: string;
when4xx: string;
when5xx: string;
minDuration: number;
}>({
uriRegex: "",
when4xx: true,
when4xx: InitTaskField.Whenxx[0].value,
when5xx: InitTaskField.Whenxx[1].value,
minDuration: NaN,
});
function changeConfig(params: { [key: string]: unknown }) {
const key = Object.keys(params)[0];
states[key] = params[key];
function changeConfig(params: { [key: string]: number | string }) {
const key: string = Object.keys(params)[0];
(states as any)[key] = params[key];
}
async function createTask() {
emits("close");
const when4xx =
states.when4xx === InitTaskField.Whenxx[0].value ? true : false;
const when5xx =
states.when5xx === InitTaskField.Whenxx[0].value ? true : false;
emits("create", {
uriRegex: states.uriRegex || undefined,
when4xx,
when5xx,
minDuration: isNaN(states.minDuration) ? undefined : states.minDuration,
});
}
</script>
<style lang="scss" scoped>

26
src/views/dashboard/related/network-profiling/components/Tasks.vue
View File

@ -82,7 +82,7 @@ limitations under the License. -->
fullscreen
@closed="newTask = false"
>
<NewTask />
<NewTask @create="saveNewTask" />
</el-dialog>
</template>
<script lang="ts" setup>
@ -168,21 +168,19 @@ function createTask() {
}
newTask.value = true;
}
async function saveNewTask() {
const serviceId =
(selectorStore.currentService && selectorStore.currentService.id) || "";
const serviceInstanceId =
async function saveNewTask(params: {
uriRegex: string;
when4xx: string;
when5xx: string;
minDuration: number;
}) {
newTask.value = false;
const instanceId =
(selectorStore.currentPod && selectorStore.currentPod.id) || "";
if (!serviceId) {
return;
if (!instanceId) {
return ElMessage.error("No Instance ID");
}
if (!serviceInstanceId) {
return;
}
const res = await networkProfilingStore.createNetworkTask({
serviceId,
serviceInstanceId,
});
const res = await networkProfilingStore.createNetworkTask(instanceId, params);
if (res.errors) {
ElMessage.error(res.errors);
return;

37
src/views/dashboard/related/network-profiling/components/data.ts
View File

@ -29,39 +29,8 @@ export const NewTaskField = {
};
export const InitTaskField = {
serviceSource: [{ key: "", label: "None" }],
When4xx: [
{ value: true, label: "true" },
{ value: false, label: "false" },
],
When5xx: [
{ value: true, label: "true" },
{ value: false, label: "false" },
],
monitorTimeCn: [
{ value: "0", label: "此刻" },
{ value: "1", label: "设置时间" },
],
monitorDuration: [
{ value: "5", label: "5 min" },
{ value: "10", label: "10 min" },
{ value: "15", label: "15 min" },
],
dumpPeriod: [
{ value: "10", label: "10 ms" },
{ value: "20", label: "20 ms" },
{ value: "50", label: "50 ms" },
{ value: "100", label: "100 ms" },
],
maxSamplingCount: [
{ value: "1", label: "1" },
{ value: "2", label: "2" },
{ value: "3", label: "3" },
{ value: "4", label: "4" },
{ value: "5", label: "5" },
{ value: "6", label: "6" },
{ value: "7", label: "7" },
{ value: "8", label: "8" },
{ value: "9", label: "9" },
Whenxx: [
{ value: "1", label: "True" },
{ value: "0", label: "False" },
],
};