Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit671f858

Browse files
committed
fix: visualize and metric page for html, markdiwb, custom
1 parent7011f57 commit671f858

File tree

2 files changed

+131
-144
lines changed

2 files changed

+131
-144
lines changed

‎web/src/plugins/logs/VisualizeLogsQuery.vue‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -279,27 +279,29 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
279279
</div>
280280
<div
281281
v-if="dashboardPanelData.data.type == 'html'"
282-
class="col column"
283-
style="width:100%;height:100%;flex:1"
282+
class="col column tw-mr-[0.625rem]"
283+
style="height:100%;flex:1"
284284
>
285-
<CustomHTMLEditor
286-
v-model="dashboardPanelData.data.htmlContent"
287-
style="width:100%;height:100%"
288-
class="col"
289-
/>
290-
<DashboardErrorsComponent:errors="errorData"class="col-auto" />
285+
<divclass="card-container tw-h-full tw-flex tw-flex-col">
286+
<CustomHTMLEditor
287+
v-model="dashboardPanelData.data.htmlContent"
288+
style="flex:1;min-height:0"
289+
/>
290+
<DashboardErrorsComponent:errors="errorData"class="tw-flex-shrink-0" />
291+
</div>
291292
</div>
292293
<div
293294
v-if="dashboardPanelData.data.type == 'markdown'"
294-
class="col column"
295-
style="width:100%;height:100%;flex:1"
295+
class="col column tw-mr-[0.625rem]"
296+
style="height:100%;flex:1"
296297
>
297-
<CustomMarkdownEditor
298-
v-model="dashboardPanelData.data.markdownContent"
299-
style="width:100%;height:100%"
300-
class="col"
301-
/>
302-
<DashboardErrorsComponent:errors="errorData"class="col-auto" />
298+
<divclass="card-container tw-h-full tw-flex tw-flex-col">
299+
<CustomMarkdownEditor
300+
v-model="dashboardPanelData.data.markdownContent"
301+
style="flex:1;min-height:0"
302+
/>
303+
<DashboardErrorsComponent:errors="errorData"class="tw-flex-shrink-0" />
304+
</div>
303305
</div>
304306

305307
<div

‎web/src/plugins/metrics/Index.vue‎

Lines changed: 113 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -328,54 +328,72 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
328328
</div>
329329
<div
330330
v-if="dashboardPanelData.data.type == 'html'"
331-
class="col column"
332-
style="width:100%;height:100%;flex:1"
331+
class="col column tw-mr-[0.625rem]"
332+
style="height:calc(100vh-106px);flex:1"
333333
>
334-
<CustomHTMLEditor
335-
v-model="dashboardPanelData.data.htmlContent"
336-
style="width:100%;height:100%"
337-
class="col"
338-
/>
339-
<DashboardErrorsComponent:errors="errorData"class="col-auto" />
334+
<divclass="card-container tw-h-full tw-flex tw-flex-col">
335+
<CustomHTMLEditor
336+
v-model="dashboardPanelData.data.htmlContent"
337+
style="flex:1;min-height:0"
338+
/>
339+
<DashboardErrorsComponent:errors="errorData"class="tw-flex-shrink-0" />
340+
</div>
340341
</div>
341342
<div
342343
v-if="dashboardPanelData.data.type == 'markdown'"
343-
class="col column"
344-
style="width:100%;height:100%;flex:1"
344+
class="col column tw-mr-[0.625rem]"
345+
style="height:calc(100vh-106px);flex:1"
345346
>
346-
<CustomMarkdownEditor
347-
v-model="dashboardPanelData.data.markdownContent"
348-
style="width:100%;height:100%"
349-
class="col"
350-
/>
351-
<DashboardErrorsComponent:errors="errorData"class="col-auto" />
347+
<divclass="card-container tw-h-full tw-flex tw-flex-col">
348+
<CustomMarkdownEditor
349+
v-model="dashboardPanelData.data.markdownContent"
350+
style="flex:1;min-height:0"
351+
/>
352+
<DashboardErrorsComponent:errors="errorData"class="tw-flex-shrink-0" />
353+
</div>
352354
</div>
353355
<div
354356
v-if="dashboardPanelData.data.type == 'custom_chart'"
355-
class="col column"
356-
style="height:calc(100%);overflow-y:auto"
357+
class="col tw-mr-[0.625rem]"
358+
style="
359+
height:calc(100vh-106px);
360+
overflow-y:auto;
361+
display:flex;
362+
flex-direction:row;
363+
overflow-x:hidden;
364+
"
357365
>
358366
<q-splitter
359367
v-model="dashboardPanelData.layout.splitter"
360-
@update:model-value="layoutSplitterUpdated"
361-
style="width:100%;height:100%"
368+
:limits="[0, 20]"
369+
:style="{
370+
width: dashboardPanelData.layout.showFieldList
371+
? '100%'
372+
: 'calc(100% - 50px)',
373+
height: '100%',
374+
}"
362375
>
363376
<template #before>
364377
<div
365-
class="col scroll"
366-
style="height:calc(100%);overflow-y:auto"
378+
class="tw-w-full tw-h-full tw-pr-[0.625rem] tw-pb-[0.625rem]"
367379
>
368380
<div
369-
v-if="dashboardPanelData.layout.showFieldList"
370-
class="column"
371-
style="height:100%"
381+
class="col scroll card-container"
382+
style="height:calc(100vh-106px);overflow-y:auto"
372383
>
373-
<divclass="col-auto q-pa-sm">
374-
<spanclass="text-weight-bold">{{ t("panel.fields") }}</span>
375-
</div>
376-
<divclass="col"style="width:100%">
377-
<!-- <GetFields :editMode="editMode" />-->
378-
<FieldList:editMode="editMode" />
384+
<div
385+
v-if="dashboardPanelData.layout.showFieldList"
386+
class="column"
387+
style="height:100%"
388+
>
389+
<divclass="col-auto q-pa-sm">
390+
<spanclass="text-weight-bold">{{
391+
t("panel.fields")
392+
}}</span>
393+
</div>
394+
<divclass="col"style="width:100%">
395+
<FieldList:editMode="editMode" />
396+
</div>
379397
</div>
380398
</div>
381399
</div>
@@ -384,7 +402,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
384402
<divclass="splitter-vertical splitter-enabled"></div>
385403
<q-btn
386404
color="primary"
387-
size="12px"
405+
size="sm"
388406
:icon="
389407
dashboardPanelData.layout.showFieldList
390408
? 'chevron_left'
@@ -393,108 +411,75 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
393411
dense
394412
round
395413
style="top:14px;z-index:100"
396-
:style="{
397-
right: dashboardPanelData.layout.showFieldList
398-
? '-20px'
399-
: '-0px',
400-
left: dashboardPanelData.layout.showFieldList ? '5px' : '12px',
401-
}"
402414
@click="collapseFieldList"
403415
/>
404416
</template>
405417
<template #after>
406-
<divclass="row"style="height:calc(100%);overflow-y:auto">
407-
<divclass="col"style="height:100%">
408-
<q-splitter
409-
class="query-editor-splitter"
410-
v-model="dashboardPanelData.layout.querySplitter"
411-
horizontal
412-
@update:model-value="querySplitterUpdated"
413-
reverse
414-
unit="px"
415-
:limits="
416-
!dashboardPanelData.layout.showQueryBar
417-
? [43, 400]
418-
: [140, 400]
419-
"
420-
:disable="!dashboardPanelData.layout.showQueryBar"
421-
style="height:100%"
418+
<div
419+
class="row card-container"
420+
style="height:calc(100vh-106px);overflow-y:auto"
421+
>
422+
<divclass="col scroll"style="height:100%">
423+
<div
424+
class="layout-panel-container tw-h-[calc(100vh-200px)] col"
422425
>
423-
<template #before>
424-
<div
425-
class="layout-panel-container col"
426-
style="height:100%"
427-
>
428-
<q-splitter
429-
class="query-editor-splitter"
430-
v-model="splitterModel"
431-
style="height:100%"
432-
@update:model-value="layoutSplitterUpdated"
433-
>
434-
<template #before>
435-
<CustomChartEditor
436-
v-model="dashboardPanelData.data.customChartContent"
437-
style="width:100%;height:100%"
438-
/>
439-
</template>
440-
<template #separator>
441-
<divclass="splitter-vertical splitter-enabled"></div>
442-
<q-avatar
443-
color="primary"
444-
text-color="white"
445-
size="20px"
446-
icon="drag_indicator"
447-
style="top:10px;left:3.5px"
448-
data-test="dashboard-markdown-editor-drag-indicator"
449-
/>
450-
</template>
451-
<template #after>
452-
<PanelSchemaRenderer
453-
v-if="chartData"
454-
@metadata-update="metaDataValue"
455-
:key="dashboardPanelData.data.type"
456-
:panelSchema="chartData"
457-
:selectedTimeObj="dashboardPanelData.meta.dateTime"
458-
:variablesData="{}"
459-
:width="6"
460-
@error="handleChartApiError"
461-
@updated:data-zoom="onDataZoom"
462-
:allowAlertCreation="true"
463-
@updated:vrl-function-field-list="
464-
updateVrlFunctionFieldList
465-
"
466-
@last-triggered-at-update="
467-
handleLastTriggeredAtUpdate
468-
"
469-
@series-data-update="seriesDataUpdate"
470-
searchType="ui"
471-
/>
472-
</template>
473-
</q-splitter>
474-
475-
<DashboardErrorsComponent
476-
:errors="errorData"
477-
class="col-auto"
478-
style="flex-shrink:0"
426+
<q-splitter
427+
class="query-editor-splitter"
428+
v-model="splitterModel"
429+
style="height:100%"
430+
@update:model-value="layoutSplitterUpdated"
431+
>
432+
<template #before>
433+
<CustomChartEditor
434+
v-model="dashboardPanelData.data.customChartContent"
435+
style="width:100%;height:100%"
436+
/>
437+
</template>
438+
<template #separator>
439+
<divclass="splitter-vertical splitter-enabled"></div>
440+
<q-avatar
441+
color="primary"
442+
text-color="white"
443+
size="20px"
444+
icon="drag_indicator"
445+
style="top:10px;left:3.5px"
446+
data-test="dashboard-markdown-editor-drag-indicator"
447+
/>
448+
</template>
449+
<template #after>
450+
<PanelSchemaRenderer
451+
v-if="chartData"
452+
@metadata-update="metaDataValue"
453+
:key="dashboardPanelData.data.type"
454+
:panelSchema="chartData"
455+
:selectedTimeObj="dashboardPanelData.meta.dateTime"
456+
:variablesData="{}"
457+
:width="6"
458+
@error="handleChartApiError"
459+
@updated:data-zoom="onDataZoom"
460+
:allowAlertCreation="true"
461+
@updated:vrl-function-field-list="
462+
updateVrlFunctionFieldList
463+
"
464+
@last-triggered-at-update="
465+
handleLastTriggeredAtUpdate
466+
"
467+
@series-data-update="seriesDataUpdate"
468+
searchType="ui"
479469
/>
480-
</div>
481-
</template>
482-
<template #separator>
483-
<div
484-
class="splitter"
485-
:class="
486-
dashboardPanelData.layout.showQueryBar
487-
? 'splitter-enabled'
488-
: ''
489-
"
490-
></div>
491-
</template>
492-
<template #after>
493-
<divstyle="height:100%;width:100%"class="row column">
494-
<DashboardQueryEditor />
495-
</div>
496-
</template>
497-
</q-splitter>
470+
</template>
471+
</q-splitter>
472+
</div>
473+
<divclass="col-auto"style="flex-shrink:0">
474+
<DashboardErrorsComponent
475+
:errors="errorData"
476+
class="col-auto"
477+
style="flex-shrink:0"
478+
/>
479+
</div>
480+
<divclass="row column tw-h-[calc(100vh-200px)]">
481+
<DashboardQueryEditor />
482+
</div>
498483
</div>
499484
<q-separatorvertical />
500485
<divclass="col-auto">

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp