diff --git a/src/components/DateCalendar.vue b/src/components/DateCalendar.vue index 0ea3e13b..293e80a3 100755 --- a/src/components/DateCalendar.vue +++ b/src/components/DateCalendar.vue @@ -169,12 +169,13 @@ limitations under the License. --> value: { type: Date }, left: { type: Boolean, default: false }, right: { type: Boolean, default: false }, - dates: { type: Array as PropType, default: () => [] }, + dates: { type: Array as PropType, default: () => [] }, disabledDate: { type: Function, default: () => false }, format: { type: String, default: "YYYY-MM-DD", }, + maxRange: { type: Array as PropType, default: () => [] }, }); const state = reactive({ pre: "", @@ -241,6 +242,12 @@ limitations under the License. --> const end = computed(() => { return parse(Number(props.dates[1])); }); + const minStart = computed(() => { + return parse(Number(props.maxRange[0])); + }); + const maxEnd = computed(() => { + return parse(Number(props.maxRange[1])); + }); const ys = computed(() => { return Math.floor(state.year / 10) * 10; }); @@ -369,7 +376,10 @@ limitations under the License. --> flag = tf(props.value, format) === tf(time, format); } classObj[`${state.pre}-date`] = true; - classObj[`${state.pre}-date-disabled`] = (props.right && t < start.value) || props.disabledDate(time, format); + const rightDisabled = props.right && (t < start.value || t > maxEnd.value || !props.maxRange?.length); + const leftDisabled = + props.left && (t < minStart.value || t > end.value || !props.maxRange?.length || t > maxEnd.value); + classObj[`${state.pre}-date-disabled`] = rightDisabled || leftDisabled || props.disabledDate(time, format); classObj[`${state.pre}-date-on`] = (props.left && t > start.value) || (props.right && t < end.value); classObj[`${state.pre}-date-selected`] = flag; return classObj; diff --git a/src/components/TimePicker.vue b/src/components/TimePicker.vue index f3ff4bc4..75559d26 100755 --- a/src/components/TimePicker.vue +++ b/src/components/TimePicker.vue @@ -68,6 +68,7 @@ limitations under the License. --> :left="true" :disabledDate="disabledDate" :format="format" + :maxRange="maxRange" @ok="ok" @setDates="setDates" /> @@ -78,6 +79,7 @@ limitations under the License. --> :right="true" :disabledDate="disabledDate" :format="format" + :maxRange="maxRange" @ok="ok" @setDates="setDates" /> @@ -112,11 +114,11 @@ limitations under the License. --> import { useI18n } from "vue-i18n"; import DateCalendar from "./DateCalendar.vue"; import { useTimeoutFn } from "@/hooks/useTimeout"; - /*global defineProps, defineEmits*/ + /*global PropType, defineProps, defineEmits*/ const datepicker = ref(null); const { t } = useI18n(); const show = ref(false); - const dates = ref([]); + const dates = ref([]); const props = defineProps({ position: { type: String, default: "bottom" }, name: [String], @@ -149,7 +151,7 @@ limitations under the License. --> type: Boolean, default: false, }, - dateRangeSelect: [Function], + maxRange: { type: Array as PropType, default: () => [] }, }); const emit = defineEmits(["clear", "input", "confirm", "cancel"]); const local = computed(() => { diff --git a/src/graphql/fragments/app.ts b/src/graphql/fragments/app.ts index 77812a61..a91f07e6 100644 --- a/src/graphql/fragments/app.ts +++ b/src/graphql/fragments/app.ts @@ -49,3 +49,22 @@ export const MenuItems = { } `, }; + +export const RecordsTTL = { + query: `getRecordsTTL { + value + superDataset + coldValue + coldSuperDataset + }`, +}; +export const MetricsTTL = { + query: `getMetricsTTL { + minute + hour + day + coldMinute + coldHour + coldDay + }`, +}; diff --git a/src/graphql/fragments/trace.ts b/src/graphql/fragments/trace.ts index d645042c..58c28f30 100644 --- a/src/graphql/fragments/trace.ts +++ b/src/graphql/fragments/trace.ts @@ -103,3 +103,63 @@ export const TraceTagValues = { query: ` tagValues: queryTraceTagAutocompleteValues(tagKey: $tagKey, duration: $duration)`, }; + +export const TraceSpansFromColdStage = { + variable: "$traceId: ID!, $duration: Duration!, $debug: Boolean", + query: ` + trace: queryTrace(traceId: $traceId, duration: $duration, debug: $debug) { + spans { + traceId + segmentId + spanId + parentSpanId + refs { + traceId + parentSegmentId + parentSpanId + type + } + serviceCode + serviceInstanceName + startTime + endTime + endpointName + type + peer + component + isError + layer + tags { + key + value + } + logs { + time + data { + key + value + } + } + attachedEvents { + startTime { + seconds + nanos + } + event + endTime { + seconds + nanos + } + tags { + key + value + } + summary { + key + value + } + } + } + } + `, +}; diff --git a/src/graphql/query/app.ts b/src/graphql/query/app.ts index d74aeac4..f52771b5 100644 --- a/src/graphql/query/app.ts +++ b/src/graphql/query/app.ts @@ -14,10 +14,14 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { OAPTimeInfo, OAPVersion, MenuItems } from "../fragments/app"; +import { OAPTimeInfo, OAPVersion, MenuItems, MetricsTTL, RecordsTTL } from "../fragments/app"; export const queryOAPTimeInfo = `query queryOAPTimeInfo {${OAPTimeInfo.query}}`; export const queryOAPVersion = `query ${OAPVersion.query}`; export const queryMenuItems = `query menuItems {${MenuItems.query}}`; + +export const queryMetricsTTL = `query MetricsTTL {${MetricsTTL.query}}`; + +export const queryRecordsTTL = `query RecordsTTL {${RecordsTTL.query}}`; diff --git a/src/graphql/query/trace.ts b/src/graphql/query/trace.ts index 08d4fd82..77b1dfe3 100644 --- a/src/graphql/query/trace.ts +++ b/src/graphql/query/trace.ts @@ -15,12 +15,14 @@ * limitations under the License. */ -import { Traces, TraceSpans, TraceTagKeys, TraceTagValues } from "../fragments/trace"; +import { Traces, TraceSpans, TraceTagKeys, TraceTagValues, TraceSpansFromColdStage } from "../fragments/trace"; export const queryTraces = `query queryTraces(${Traces.variable}) {${Traces.query}}`; -export const queryTrace = `query queryTrace(${TraceSpans.variable}) {${TraceSpans.query}}`; +export const querySpans = `query querySpans(${TraceSpans.variable}) {${TraceSpans.query}}`; export const queryTraceTagKeys = `query queryTraceTagKeys(${TraceTagKeys.variable}) {${TraceTagKeys.query}}`; export const queryTraceTagValues = `query queryTraceTagValues(${TraceTagValues.variable}) {${TraceTagValues.query}}`; + +export const queryTraceSpansFromColdStage = `query queryTraceSpansFromColdStage(${TraceSpansFromColdStage.variable}) {${TraceSpansFromColdStage.query}}`; diff --git a/src/hooks/useDuration.ts b/src/hooks/useDuration.ts new file mode 100644 index 00000000..f9057b9e --- /dev/null +++ b/src/hooks/useDuration.ts @@ -0,0 +1,55 @@ +/** + * 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 { useAppStoreWithOut, InitializationDurationRow } from "@/store/modules/app"; +import type { Duration, DurationTime } from "@/types/app"; +import getLocalTime from "@/utils/localtime"; +import dateFormatStep from "@/utils/dateFormat"; + +export function useDuration() { + let durationRow: Duration = InitializationDurationRow; + + function getDuration() { + const appStore = useAppStoreWithOut(); + return { + start: getLocalTime(appStore.utc, durationRow.start), + end: getLocalTime(appStore.utc, durationRow.end), + step: durationRow.step, + }; + } + function getDurationTime(): DurationTime { + const { start, step, end } = getDuration(); + return { + start: dateFormatStep(start, step, true), + end: dateFormatStep(end, step, true), + step: step, + }; + } + function setDurationRow(data: Duration) { + durationRow = data; + } + function getMaxRange(day: number) { + if (day === -1) { + return []; + } + const gap = (day + 1) * 24 * 60 * 60 * 1000; + const dates: Date[] = [new Date(new Date().getTime() - gap), new Date()]; + + return dates; + } + + return { setDurationRow, getDurationTime, getMaxRange }; +} diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue index 322abcba..ba7626da 100644 --- a/src/layout/components/NavBar.vue +++ b/src/layout/components/NavBar.vue @@ -40,14 +40,25 @@ limitations under the License. -->
{{ pageTitle }}
- {{ t("timeTips") }} + {{ t("timeTips") }} UTC{{ appStore.utcHour >= 0 ? "+" : "" }}{{ `${appStore.utcHour}:${appStore.utcMin}` }} + + +