-
Notifications
You must be signed in to change notification settings - Fork 488
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add basic datav-observability datasource #290
- Loading branch information
Showing
25 changed files
with
524 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| // Copyright 2023 Datav.io Team | ||
| // Licensed 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 isPluginDisabled = (p) => { | ||
| if (p && p.settings?.disabled) { | ||
| return p.settings.disabled() | ||
| } | ||
| } |
28 changes: 28 additions & 0 deletions
28
ui/src/views/dashboard/plugins/built-in/datasource/observability/DatasourceEditor.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| // Copyright 2023 Datav.io Team | ||
| // Licensed 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 { Datasource } from "types/datasource" | ||
| import React from "react"; | ||
| interface Props { | ||
| datasource: Datasource | ||
| onChange: any | ||
| } | ||
|
|
||
| const HttpDatasourceEditor = ({datasource, onChange}: Props) => { | ||
| return (<></>) | ||
| } | ||
|
|
||
| export default HttpDatasourceEditor | ||
|
|
||
| export const isHttpDatasourceValid = (ds: Datasource) => { | ||
|
|
||
| } |
54 changes: 54 additions & 0 deletions
54
ui/src/views/dashboard/plugins/built-in/datasource/observability/QueryEditor.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| // Copyright 2023 Datav.io Team | ||
| // Licensed 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 { HStack, Input, Text, useMediaQuery, VStack } from "@chakra-ui/react" | ||
| import { Form } from "src/components/form/Form" | ||
| import FormItem from "src/components/form/Item" | ||
| import { cloneDeep } from "lodash" | ||
| import { useEffect, useState } from "react" | ||
| import { PanelQuery } from "types/dashboard" | ||
| import { DatasourceEditorProps } from "types/datasource" | ||
| import React from "react"; | ||
| import { useStore } from "@nanostores/react" | ||
| import { PanelTypeAlert } from "../../panel/alert/types" | ||
| import { locale } from "src/i18n/i18n" | ||
| import InputSelect from "components/select/InputSelect" | ||
| import { MobileVerticalBreakpoint } from "src/data/constants" | ||
|
|
||
| const HttpQueryEditor = ({ panel, datasource, query, onChange }: DatasourceEditorProps) => { | ||
| const code = useStore(locale) | ||
| const [tempQuery, setTempQuery] = useState<PanelQuery>(cloneDeep(query)) | ||
| const apiDesc = apiList.find(api => api.name == tempQuery.metrics)?.desc | ||
| const [isMobileScreen] = useMediaQuery(MobileVerticalBreakpoint) | ||
| return (<> | ||
| <Form spacing={1}> | ||
| <FormItem title="API" labelWidth="100px" size="sm" alignItems={isMobileScreen ? "start" : "center"} flexDirection={isMobileScreen ? "column" : "row"}> | ||
| <InputSelect value={tempQuery.metrics} options={apiList.map(api => ({ label: api.name, value: api.name, annotation: api.desc }))} annotationDir="vertical" onChange={v => { | ||
| const q = { ...tempQuery, metrics: v } | ||
| setTempQuery(q) | ||
| onChange(q) | ||
| }} /> | ||
| {!isMobileScreen && apiDesc && <Text textStyle="annotation">{apiDesc}</Text>} | ||
| </FormItem> | ||
| </Form> | ||
| </>) | ||
| } | ||
|
|
||
| export default HttpQueryEditor | ||
|
|
||
|
|
||
|
|
||
| const apiList = [{ | ||
| name: "getServiceInfoList", | ||
| desc: "get service infos, such as p99 latency, errors, qps, render as a table", | ||
| } | ||
| ] |
104 changes: 104 additions & 0 deletions
104
ui/src/views/dashboard/plugins/built-in/datasource/observability/VariableEditor.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| // Copyright 2023 Datav.io Team | ||
| // Licensed 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 { CodeEditorModal } from "src/components/CodeEditor/CodeEditorModal" | ||
| import Label from "src/components/form/Item" | ||
| import { isEmpty } from "lodash" | ||
| import { DatasourceVariableEditorProps } from "types/datasource" | ||
| import { isJSON } from "utils/is" | ||
| import { useEffect } from "react" | ||
| import { queryHttpVariableValues } from "./query_runner" | ||
| import FormItem from "src/components/form/Item" | ||
| import { EditorInputItem } from "src/components/editor/EditorItem" | ||
| import React from "react"; | ||
| import { useStore } from "@nanostores/react" | ||
| import { httpDsMsg } from "src/i18n/locales/en" | ||
|
|
||
| const HttpVariableEditor = ({ variable, onChange, onQueryResult }: DatasourceVariableEditorProps) => { | ||
| const t1 = useStore(httpDsMsg) | ||
| const data = isJSON(variable.value) ? JSON.parse(variable.value) : {} | ||
|
|
||
| let update; | ||
| if (isEmpty(data.transformResult)) { | ||
| data.transformResult = initTransformResult | ||
| update = true | ||
| } | ||
| if (isEmpty(data.transformRequest)) { | ||
| data.transformRequest = initTransformRequest | ||
| update = true | ||
| } | ||
| if (update) onChange(variable => { | ||
| variable.value = JSON.stringify(data) | ||
| }) | ||
|
|
||
| useEffect(() => { | ||
| loadVariables(variable) | ||
| }, [variable]) | ||
|
|
||
| const loadVariables = async (v) => { | ||
| const result = await queryHttpVariableValues(variable) | ||
| onQueryResult(result) | ||
| } | ||
|
|
||
| return (<> | ||
| <FormItem title="URL"> | ||
| <EditorInputItem | ||
| value={data.url} | ||
| onChange={(v) => { | ||
| data.url = v | ||
| onChange(variable => { | ||
| variable.value = JSON.stringify(data) | ||
| }) | ||
| }} | ||
| placeholder="support variable" | ||
| /> | ||
| </FormItem> | ||
| <FormItem title={t1.reqTransform}> | ||
| {/* <Label width="200px" desc="If you want insert some imformation before request is sent to remote, e.g current time, just edit this function">Request transform</Label> */} | ||
| <CodeEditorModal value={data.transformRequest} onChange={v => { | ||
| data.transformRequest = v | ||
| onChange(variable => { | ||
| variable.value = JSON.stringify(data) | ||
| }) | ||
| }} /> | ||
| </FormItem> | ||
|
|
||
|
|
||
| <FormItem title={t1.respTransform}> | ||
| {/* <Label width="200px" desc="The http request result is probably not compatible with your visualization panels, here you can define a function to transform the result">Result transform</Label> */} | ||
| <CodeEditorModal value={data.transformResult} onChange={v => { | ||
| data.transformResult = v | ||
| onChange(variable => { | ||
| variable.value = JSON.stringify(data) | ||
| }) | ||
| }} /> | ||
| </FormItem> | ||
| </>) | ||
| } | ||
|
|
||
| export default HttpVariableEditor | ||
|
|
||
|
|
||
|
|
||
| const initTransformRequest = | ||
| ` | ||
| // support variables | ||
| function transformRequest(url,headers,startTime, endTime, variables) { | ||
| let newUrl = url + \`?&start=$\{startTime}&end=$\{endTime}\` | ||
| return newUrl | ||
| }` | ||
|
|
||
| const initTransformResult = | ||
| `function transformResult(httpResult) { | ||
| console.log("here333 transformResult:", httpResult) | ||
| return httpResult | ||
| }` |
Oops, something went wrong.