Skip to content

Commit 5426787

Browse files
sunchanglongsunchanglong
authored
refactor: log view and trace view (#540)
* refactor: sqlbuilder to components dir * refactor: sql builder * refactor: time range select * fix: query from default db * fix: log filter * fix: default condition * refactor: table data, use props * refactor: remove rows columns from store * refactor: single schema * refactor: remove editing state * fix: tscolumn inputtablename * refactor: single sql build * refactor: timeRangeValues & unixTimeRange * refactor: remove tableIndex * refactor: remove getschema * refactor: clean store * fix: lint * chore: remove unnecessary function * chore: remove show tables * refactor: export button * fix: export sql * fix: export sql * refactor: url sync hook * refactor: countchart * refactor: table * refactor: table data * refactor: data table more straightforward slots * fix: data table width height * fix: filter emit * refactor: query layout * refactor: unify computed table name * refactor: use base store * fix: schema in chart * refactor: fix range sync, ts column * refactor: pagination * refactor: unify var name * refactor: storage table name * fix: data table width * fix: text query * chore: remove unused * style: inline builder form * style: fine layout * feat: quick filter * refactor: unify run * fix: zoom * refactor: chart query trigger * fix: init query * refactor: queryState, texteditor * fix: log detail * fix: filter empty * fix: trace active state * fix: quickfilter * feat: merge column filter empty * fix: database change * chore: restore code * refactor: log export * refactor: rename finalquery to executableSql * refactor: remove store, use hooks * refactor: use reactive form * refactor: chart props * refactor: trace * fix: unify column type * feat: quick filter global * refactor: schema * fix: warnings * fix: refresh * refactor: remove store * fix: warnings * chore: auto import * fix: ts column type * fix: datetime * style: quick filter * fix: count query * refactor: quick filter * refactor: replaceTimePlaceholders * fix: copilot review * refactor: rename file to kebab-case * refactor: useTextEditorState * fix: remove unused * fix: filename * fix: optional prop * fix: single formbulderstate * fix: table change * refactor: sql bulder, use emit * refactor: use single form object * fix: empty displayed columns * refactor: use shallow ref * fix: reset form state * chore: no need * refactor: generate sql bool, number type * fix: form state deep clone * feat: sync sql when switch to text * fix: update query params when success * refactor: remove dup time convert * fix: time query * fix: in query * refactor: quick filter ts * feat: in placeholder * feat: auto query if has last query * feat: timestart val * feat: add field type * feat: chart query * feat: rename to code
1 parent a31d80d commit 5426787

45 files changed

Lines changed: 3178 additions & 2919 deletions

Some content is hidden

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

‎.eslintrc-auto-import.json‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"ComponentPublicInstance": true,
55
"ComputedRef": true,
66
"EffectScope": true,
7+
"IngestConfig": true,
78
"InjectionKey": true,
89
"PropType": true,
910
"Ref": true,
@@ -25,6 +26,7 @@
2526
"getCurrentScope": true,
2627
"gist": true,
2728
"h": true,
29+
"ingest": true,
2830
"inject": true,
2931
"isProxy": true,
3032
"isReactive": true,
@@ -88,27 +90,41 @@
8890
"useCssModule": true,
8991
"useCssVars": true,
9092
"useDataBaseStore": true,
93+
"useDataChart": true,
9194
"useGist": true,
95+
"useIngest": true,
9296
"useIngestStore": true,
9397
"useLink": true,
98+
"useLoading": true,
99+
"useLocale": true,
94100
"useLog": true,
95101
"useLogStore": true,
102+
"usePermission": true,
103+
"usePythonCode": true,
96104
"useQueryCode": true,
105+
"useQueryUrlSync": true,
106+
"useRequestInterceptor": true,
107+
"useResponsive": true,
97108
"useRoute": true,
98109
"useRouter": true,
110+
"useSiderTabs": true,
99111
"useSlots": true,
100112
"useStatusBarStore": true,
101113
"useTabBarStore": true,
114+
"useThemes": true,
102115
"useUserStore": true,
116+
"useVisible": true,
103117
"visible": true,
104118
"watch": true,
105119
"watchEffect": true,
106120
"watchPostEffect": true,
107121
"watchSyncEffect": true,
108-
"IngestConfig": true,
109-
"useIngest": true,
110-
"ingest": true,
111122
"initializeNews": true,
112-
"useNews": true
123+
"useNews": true,
124+
"SqlBuilderHookOptions": true,
125+
"useQueryExecution": true,
126+
"useSqlBuilderHook": true,
127+
"useTextEditorState": true,
128+
"useTimeRange": true
113129
}
114130
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
]
3333
},
3434
"dependencies": {
35-
"@arco-design/web-vue": "^2.56.2",
35+
"@arco-design/web-vue": "^2.57.0",
3636
"@babel/core": "^7.20.5",
3737
"@codemirror/autocomplete": "6.9.0",
3838
"@codemirror/lang-java": "6.0.1",

‎pnpm-lock.yaml‎

Lines changed: 11 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/api/editor.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,32 @@ const runSQLWithCSV = (code: string, format?: string): Promise<HttpResponse> =>
141141
return axios.post(sqlUrl, makeSqlData(code), params)
142142
}
143143

144+
/**
145+
* Fetches the schema (column_name, data_type, semantic_type) for a given table.
146+
*/
147+
const getTableSchema = (tableName: string, database?: string) => {
148+
const appStore = useAppStore()
149+
return axios
150+
.post(
151+
sqlUrl,
152+
makeSqlData(
153+
`SELECT column_name, data_type, semantic_type FROM information_schema.columns WHERE table_name = '${tableName}' AND table_schema = '${
154+
database || appStore.database
155+
}' ORDER BY column_name`
156+
),
157+
addDatabaseParams(database)
158+
)
159+
.then((res) => {
160+
return res.output[0].records.rows.map((row: string[]) => {
161+
return {
162+
name: row[0],
163+
data_type: row[1],
164+
semantic_type: row[2],
165+
}
166+
})
167+
})
168+
}
169+
144170
export default {
145171
getTables,
146172
getTableByName,
@@ -154,4 +180,5 @@ export default {
154180
checkScriptsTable,
155181
fetchTablesCount,
156182
runSQLWithCSV,
183+
getTableSchema,
157184
}

‎src/assets/style/query-layout.less‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
// Shared styles for query layout pages (logs query, traces, etc.)
2+
.query-layout {
3+
display: flex;
4+
flex-direction: column;
5+
height: 100%;
6+
// Main container layout
7+
.query-container {
8+
height: calc(100vh - 30px);
9+
display: flex;
10+
flex-direction: column;
11+
overflow: hidden;
12+
}
13+
.arco-table-container {
14+
}
15+
// Content wrapper with padding and gap
16+
.content-wrapper {
17+
flex: 1;
18+
padding: 0 8px 0 8px;
19+
display: flex;
20+
flex-direction: column;
21+
gap: 8px;
22+
overflow: hidden;
23+
min-height: 0; // Important for flexbox
24+
}
25+
26+
// Toolbar styling (shared between logs and traces)
27+
.toolbar {
28+
flex-shrink: 0;
29+
padding: 8px;
30+
border-bottom: 1px solid var(--color-border);
31+
display: flex;
32+
justify-content: space-between;
33+
align-items: center;
34+
height: 50px;
35+
}
36+
37+
// SQL editor/builder container
38+
.sql-container {
39+
flex-shrink: 0;
40+
padding: 24px 16px 20px;
41+
display: flex;
42+
flex-direction: column;
43+
gap: 16px;
44+
}
45+
46+
// Chart header layout
47+
.chart-header {
48+
display: flex;
49+
align-items: center;
50+
justify-content: space-between;
51+
width: 100%;
52+
font-weight: normal;
53+
}
54+
55+
// Page header styling
56+
.page-header {
57+
padding: 8px 12px;
58+
margin-bottom: 0;
59+
font-size: 15px;
60+
font-weight: 800;
61+
color: var(--main-font-color);
62+
font-family: 'Gilroy', sans-serif;
63+
line-height: 1.2;
64+
min-height: 48px;
65+
display: flex;
66+
align-items: center;
67+
}
68+
69+
// Shared arco-card styling
70+
.query-layout-cards {
71+
.arco-card {
72+
border-radius: 0;
73+
border-bottom: none;
74+
75+
.arco-card-header {
76+
height: auto;
77+
padding: 9px 10px;
78+
}
79+
80+
// Make the last card (results) expandable
81+
&:last-child {
82+
flex: 1;
83+
display: flex;
84+
flex-direction: column;
85+
min-height: 0;
86+
87+
.arco-card-body {
88+
flex: 1;
89+
display: flex;
90+
flex-direction: column;
91+
min-height: 0;
92+
padding: 0;
93+
}
94+
}
95+
}
96+
97+
.arco-radio-button.arco-radio-checked {
98+
color: var(--color-primary);
99+
}
100+
101+
.arco-input-group > * {
102+
border-radius: 0;
103+
}
104+
}
105+
106+
.arco-card .arco-card-header-title {
107+
font-weight: normal;
108+
}
109+
110+
// Active state styling
111+
.active {
112+
color: var(--color-primary);
113+
}
114+
}

0 commit comments

Comments
 (0)