Skip to content

Commit b576ca9

Browse files
aliliZonaHexsunng87apdong2022
authored
feat(playground): add new router view (#195)
* feat: add promQL editor PromQL edit and execute #103 * feat: add promql api for test * refactor: add query to promql params * feat(promql): add start/end/step input for api params * refactor: edit function name * feat(promql): add time-range select * build: update pnpm lockfile * refactor: route-name and code-type * fix: change codeType after select queryType * fix: routeName with correct useRoute * feat(playground): add view * feat(playground): auto import files * feat(playground): refactor log * feat(playground): refactor log * refactor(scripts): add playground api * feat(playground): add loading to run button * fix(playground): show playground's log in query * fix(query): show results * fix(playground): add text * fix(playground): ts bug * fix(playground): fix dependencies * fix(playground): remove roles dev from playground * fix(build): add env * docs(playground): remove demo docs * fix(ts): i18n bug * fix(playground): add i18n * fix: typo * fix(log): css style * fix: typo * style: fix logs style * style: logs divider space be smaller * fix: change query code * build: update pnpm lockfile * style: edit log style for playground * style: table style for playground * fix(script): run script * fix(script): multi popup * fix(data-view): close tab * fix(query-code): change vars * fix(script): show logs * fix(script): save notification * fix(data-view): clear results * Apply suggestions from code review * chore: update some wording in getting-started docs * fix(py-editor): hide loading * fix(data-view): active new tab * fix(script): save bug * fix(playground): typo * fix(playground): ts * fix(playground): remove table style * feat(playground): add modal when token lose efficacy * fix(playground): replace url * docs: update doc * Apply suggestions from code review Co-authored-by: greenapril <[email protected]> * fix(playground): add autocomplete * fix: vue warning * refactor(list-tabs): move to components * fix(log): remove useRoute * refactor: remove recaptcha js file from html * fix: font * Update src/views/dashboard/playground/docs/getting-started.md Co-authored-by: greenapril <[email protected]> * Update src/views/dashboard/playground/docs/getting-started.md Co-authored-by: greenapril <[email protected]> * Update src/views/dashboard/playground/docs/getting-started.md Co-authored-by: greenapril <[email protected]> * Update src/views/dashboard/playground/docs/getting-started.md Co-authored-by: greenapril <[email protected]> * Update src/views/dashboard/playground/docs/getting-started.md Co-authored-by: greenapril <[email protected]> * Update src/views/dashboard/playground/docs/getting-started.md Co-authored-by: greenapril <[email protected]> * Update src/views/dashboard/playground/docs/getting-started.md Co-authored-by: greenapril <[email protected]> * Update src/views/dashboard/playground/docs/getting-started.md Co-authored-by: greenapril <[email protected]> * Update src/views/dashboard/playground/docs/getting-started.md Co-authored-by: greenapril <[email protected]> * Update src/views/dashboard/playground/docs/getting-started.md Co-authored-by: greenapril <[email protected]> * Update src/views/dashboard/playground/docs/getting-started.md Co-authored-by: greenapril <[email protected]> * Update src/views/dashboard/playground/docs/getting-started.md Co-authored-by: greenapril <[email protected]> * Update src/views/dashboard/playground/docs/getting-started.md Co-authored-by: greenapril <[email protected]> * Update src/views/dashboard/playground/docs/getting-started.md Co-authored-by: greenapril <[email protected]> * fix: ts * fix(playground): add container style * feat: add lifetime in app config * docs: getting-started.md --------- Co-authored-by: ZonaHe <[email protected]> Co-authored-by: ZonaHex <[email protected]> Co-authored-by: alili <[email protected]> Co-authored-by: Ning Sun <[email protected]> Co-authored-by: greenapril <[email protected]>
1 parent fa8def3 commit b576ca9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+2243
-388
lines changed

‎.env.cloud

+3-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
VITE_CLOUD_URL='https://dev.greptime-cloud-frontend.pages.dev'
1+
VITE_CLOUD_URL='https://dev.greptime-cloud-frontend.pages.dev'
2+
VITE_API_BASE_URL='https://api-preview.greptime.cloud'
3+
VITE_RECAPTCHA_SITE_KEY='6LcsBPgkAAAAAKiPrwh3pFCKpv9hc62eRhL5bj5A'

‎.env.development

+3-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
VITE_CLOUD_URL='https://dev.greptime-cloud-frontend.pages.dev'
1+
VITE_CLOUD_URL='https://dev.greptime-cloud-frontend.pages.dev'
2+
VITE_API_BASE_URL='https://api-preview.greptime.cloud'
3+
VITE_RECAPTCHA_SITE_KEY='6LcsBPgkAAAAAKiPrwh3pFCKpv9hc62eRhL5bj5A'

‎.env.production

+3-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
VITE_CLOUD_URL='https://dev.greptime-cloud-frontend.pages.dev'
1+
VITE_CLOUD_URL='https://dev.greptime-cloud-frontend.pages.dev'
2+
VITE_API_BASE_URL='https://api.greptime.cloud'
3+
VITE_RECAPTCHA_SITE_KEY='6LcsBPgkAAAAAKiPrwh3pFCKpv9hc62eRhL5bj5A'

‎.env.staging

+2-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
VITE_CLOUD_URL='https://console.greptime.cloud'
1+
VITE_CLOUD_URL='https://console.greptime.cloud'
2+
VITE_API_BASE_URL='https://api.greptime.cloud'

‎.eslintrc-auto-import.json

+2
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"isRef": true,
2323
"loading": true,
2424
"locale": true,
25+
"log": true,
2526
"mapActions": true,
2627
"mapGetters": true,
2728
"mapState": true,
@@ -77,6 +78,7 @@
7778
"useCssVars": true,
7879
"useDataBaseStore": true,
7980
"useLink": true,
81+
"useLog": true,
8082
"useLogStore": true,
8183
"useQueryCode": true,
8284
"useRoute": true,

‎AWSCLIV2.pkg

35 MB
Binary file not shown.

‎config/utils/containers.ts

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import type MarkdownIt from 'markdown-it'
2+
import type { RenderRule } from 'markdown-it/lib/renderer'
3+
import type Token from 'markdown-it/lib/token'
4+
import container from 'markdown-it-container'
5+
import { nanoid } from 'nanoid'
6+
import { extractTitle } from './preWrapper'
7+
8+
export default function containerPlugin(md: MarkdownIt) {
9+
md.use(...createContainer('tip', 'TIP', md))
10+
.use(...createContainer('info', 'INFO', md))
11+
.use(...createContainer('warning', 'WARNING', md))
12+
.use(...createContainer('danger', 'DANGER', md))
13+
.use(...createContainer('details', 'Details', md))
14+
// explicitly escape Vue syntax
15+
.use(container, 'v-pre', {
16+
render: (tokens: Token[], idx: number) => (tokens[idx].nesting === 1 ? `<div v-pre>\n` : `</div>\n`),
17+
})
18+
.use(container, 'raw', {
19+
render: (tokens: Token[], idx: number) => (tokens[idx].nesting === 1 ? `<div class="vp-raw">\n` : `</div>\n`),
20+
})
21+
.use(...createCodeGroup())
22+
}
23+
24+
type ContainerArgs = [typeof container, string, { render: RenderRule }]
25+
26+
function createContainer(klass: string, defaultTitle: string, md: MarkdownIt): ContainerArgs {
27+
return [
28+
container,
29+
klass,
30+
{
31+
render(tokens, idx) {
32+
const token = tokens[idx]
33+
const info = token.info.trim().slice(klass.length).trim()
34+
if (token.nesting === 1) {
35+
const title = md.renderInline(info || defaultTitle)
36+
if (klass === 'details') {
37+
return `<details class="${klass} custom-block"><summary>${title}</summary>\n`
38+
}
39+
return `<div class="${klass} custom-block"><p class="custom-block-title">${title}</p>\n`
40+
} else {
41+
return klass === 'details' ? `</details>\n` : `</div>\n`
42+
}
43+
},
44+
},
45+
]
46+
}
47+
48+
function createCodeGroup(): ContainerArgs {
49+
return [
50+
container,
51+
'code-group',
52+
{
53+
render(tokens, idx) {
54+
if (tokens[idx].nesting === 1) {
55+
const name = nanoid(5)
56+
let tabs = ''
57+
let checked = 'checked="checked"'
58+
59+
for (let i = idx + 1; !(tokens[i].nesting === -1 && tokens[i].type === 'container_code-group_close'); ++i) {
60+
if (tokens[i].type === 'fence' && tokens[i].tag === 'code') {
61+
const title = extractTitle(tokens[i].info)
62+
const id = nanoid(7)
63+
tabs += `<input type="radio" name="group-${name}" id="tab-${id}" ${checked}><label for="tab-${id}">${title}</label>`
64+
65+
if (checked) {
66+
tokens[i].info += ' active'
67+
checked = ''
68+
}
69+
}
70+
}
71+
72+
return `<div class="vp-code-group"><div class="tabs">${tabs}</div><div class="blocks">\n`
73+
}
74+
return `</div></div>\n`
75+
},
76+
},
77+
]
78+
}

‎config/utils/markdown-it-custom-code.ts

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import type MarkdownIt from 'markdown-it'
2+
3+
export default function customCode(md: MarkdownIt) {
4+
const fence = md.renderer.rules.fence!
5+
md.renderer.rules.fence = (...args) => {
6+
const rawCode = fence(...args)
7+
8+
const res = rawCode.replace(
9+
/<pre><code class="language-(\w*?)">([\s\S]*)<\/code><\/pre>/,
10+
function ($1: string, $2: string) {
11+
if ($2.toLowerCase() === 'sql') {
12+
return `<code-editor lang="${$2}">${$1}</code-editor>`
13+
} else {
14+
return `<code-editor lang="${$2}" disabled>${$1}</code-editor>`
15+
}
16+
}
17+
)
18+
return `${res}`
19+
}
20+
}

‎config/utils/preWrapper.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import type MarkdownIt from 'markdown-it'
2+
3+
const extractLang = (info: string) => {
4+
return info
5+
.trim()
6+
.replace(/:(no-)?line-numbers$/, '')
7+
.replace(/(-vue|{| ).*$/, '')
8+
.replace(/^vue-html$/, 'template')
9+
}
10+
11+
export function preWrapperPlugin(md: MarkdownIt) {
12+
const fence = md.renderer.rules.fence!
13+
md.renderer.rules.fence = (...args) => {
14+
const { info } = args[0][args[1]]
15+
const lang = extractLang(info)
16+
const rawCode = fence(...args)
17+
return `<div class="language-${lang}${
18+
/ active( |$)/.test(info) ? ' active' : ''
19+
}"><button title="Copy Code" class="copy"></button><span class="lang">${lang}</span>${rawCode}</div>`
20+
}
21+
}
22+
23+
export function extractTitle(info: string) {
24+
return info.match(/\[(.*)\]/)?.[1] || extractLang(info) || 'txt'
25+
}

‎config/vite.config.base.ts

+14
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
55
import svgLoader from 'vite-svg-loader'
66
import Components from 'unplugin-vue-components/vite'
77
import AutoImport from 'unplugin-auto-import/vite'
8+
import MarkdownIt from 'markdown-it'
9+
import mdPlugin, { Mode } from 'vite-plugin-markdown'
10+
import customCode from './utils/markdown-it-custom-code'
11+
import containerPlugin from './utils/containers'
812

913
const useDevMode = true
1014
export default defineConfig({
@@ -48,6 +52,16 @@ export default defineConfig({
4852
dirs: ['src/components', 'src/views'],
4953
extensions: ['vue', 'arco-design'],
5054
}),
55+
mdPlugin({
56+
mode: [Mode.VUE],
57+
markdownIt: new MarkdownIt({
58+
html: true,
59+
xhtmlOut: true,
60+
linkify: false,
61+
})
62+
.use(customCode)
63+
.use(containerPlugin),
64+
}),
5165
],
5266
resolve: {
5367
alias: [

‎index.html

+16-12
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<link href="/src/assets/favicon.ico" rel="shortcut icon" type="image/x-icon" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title> Dashboard | Greptime </title>
8-
</head>
9-
<body>
10-
<script src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_19361_60.7b8f7cd5c39c1d499f64df959bd5c3d4.js"></script>
11-
<div id="app"></div>
12-
<script type="module" src="/src/main.ts"></script>
13-
</body>
14-
</html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<link href="/src/assets/favicon.ico" rel="shortcut icon" type="image/x-icon" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title> Dashboard | Greptime </title>
9+
</head>
10+
11+
<body>
12+
<script
13+
src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_19361_60.b1ec6256c780983d77e3d84fe5691872.js"></script>
14+
<div id="app"></div>
15+
<script type="module" src="/src/main.ts"></script>
16+
</body>
17+
18+
</html>

‎package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"license": "Apache-2.0",
88
"scripts": {
99
"dev": "vite --config ./config/vite.config.dev.ts",
10-
"dev:cloud": "vite --mode cloud --config ./config/vite.config.dev.ts ",
10+
"dev:cloud": "vite --mode cloud --base /dashboard/ --config ./config/vite.config.dev.ts ",
1111
"build": "vite build --config ./config/vite.config.prod.ts && vue-tsc --noEmit",
1212
"build:docker": "vite build --config ./config/vite.config.prod.ts --base /dashboard/ && vue-tsc --noEmit",
1313
"build:cloud": "vite build --config ./config/vite.config.prod.ts --mode cloud --base /dashboard/ && vue-tsc --noEmit",
@@ -56,6 +56,7 @@
5656
"dayjs": "^1.11.7",
5757
"echarts": "^5.4.1",
5858
"lodash": "^4.17.21",
59+
"markdown-it-container": "^3.0.0",
5960
"mitt": "^3.0.0",
6061
"nprogress": "^0.2.0",
6162
"pinia": "^2.0.29",
@@ -75,6 +76,7 @@
7576
"vue-router": "^4.0.14"
7677
},
7778
"devDependencies": {
79+
"@babel/types": "^7.21.4",
7880
"@commitlint/cli": "^17.4.2",
7981
"@commitlint/config-conventional": "^17.3.0",
8082
"@prettier/plugin-pug": "^2.4.1",
@@ -102,6 +104,7 @@
102104
"husky": "^8.0.3",
103105
"less": "^4.1.3",
104106
"lint-staged": "^13.2.0",
107+
"markdown-it": "^13.0.1",
105108
"mockjs": "^1.1.0",
106109
"prettier": "^2.7.1",
107110
"pug": "^3.0.2",
@@ -118,6 +121,7 @@
118121
"vite": "^3.1.7",
119122
"vite-plugin-compression": "^0.5.1",
120123
"vite-plugin-eslint": "^1.8.1",
124+
"vite-plugin-markdown": "2.2.0-2",
121125
"vite-plugin-style-import": "2.0.0",
122126
"vite-svg-loader": "^4.0.0",
123127
"vue-tsc": "^1.0.19"

0 commit comments

Comments
 (0)