|
1 | 1 | <script setup lang="ts">
|
2 | 2 | import { computed, onMounted, ref } from "vue";
|
3 | 3 | import Breadcrumbs from "@dv-admin/components/ui/breadcrumbs/Breadcrumbs.vue";
|
4 |
| - import { UiInput, UiSelect, UiSkeleton, UiTabs, UiTabsItem } from "@dv.net/ui-kit"; |
| 4 | + import { UiCopyText, UiInput, UiSelect, UiSkeleton, UiTabs, UiTabsItem } from "@dv.net/ui-kit"; |
5 | 5 | import { getApiLogsLast, getApiLogsLastProcessing } from "@dv-admin/services/api/monitors.ts";
|
6 | 6 | import type { ILogsResponse } from "@dv-admin/utils/types/api/apiGo.ts";
|
7 | 7 | import ShowStatus from "@dv-admin/components/ui/showStatus/ShowStatus.vue";
|
|
109 | 109 | </div>
|
110 | 110 | <block-section mode="grey-border" padding="lg">
|
111 | 111 | <div class="header">
|
112 |
| - <span class="header__item">{{ $t('Date') }}</span> |
113 |
| - <span class="header__item">{{ $t('Message') }}</span> |
114 | 112 | <span class="header__item">{{ $t('Level') }}</span>
|
| 113 | + <span class="header__item">{{ $t('Message') }}</span> |
| 114 | + <span class="header__item">{{ $t('Date') }}</span> |
115 | 115 | </div>
|
116 | 116 | <div v-if="isLoading" class="logs">
|
117 | 117 | <ui-skeleton
|
|
124 | 124 | <div v-else>
|
125 | 125 | <div v-if="filteredLogs.length" class="logs">
|
126 | 126 | <div class="logs__row" v-for="(item, index) in filteredLogs" :key="index">
|
127 |
| - <div class="logs__time">{{ formatDate(item.time) }}</div> |
128 |
| - <div class="logs__message">{{ item.message }}</div> |
129 | 127 | <show-status
|
130 | 128 | :mode="item.level in LEVEL_LOGS ? LEVEL_LOGS[item.level] : 'neutral'"
|
131 | 129 | :text="item.level"
|
132 | 130 | w-full
|
133 | 131 | />
|
| 132 | + <div class="logs__message"> |
| 133 | + <p class="logs__message-text">{{ item.message }}</p> |
| 134 | + <ui-copy-text :copied-text="item.message" color-icon="#6b6d80" size-icon="sm" /> |
| 135 | + </div> |
| 136 | + <div class="logs__time">{{ formatDate(item.time) }}</div> |
134 | 137 | </div>
|
135 | 138 | </div>
|
136 | 139 | <not-found-message v-else />
|
|
184 | 187 | display: grid;
|
185 | 188 | gap: 20px;
|
186 | 189 | padding: 0 16px 12px;
|
187 |
| - grid-template-columns: 140px 1fr 100px; |
| 190 | + grid-template-columns: 100px 1fr 140px; |
188 | 191 | &__item {
|
189 | 192 | color: $secondary;
|
190 | 193 | font-size: 14px;
|
|
211 | 214 | }
|
212 | 215 | &__row {
|
213 | 216 | display: grid;
|
214 |
| - grid-template-columns: 140px 1fr 100px; |
| 217 | + grid-template-columns: 100px 1fr 140px; |
215 | 218 | align-items: center;
|
216 | 219 | gap: 20px;
|
217 | 220 | padding: 12px 16px;
|
|
226 | 229 | font-weight: 300;
|
227 | 230 | }
|
228 | 231 | &__message {
|
229 |
| - max-height: 128px; |
230 |
| - font-weight: 400; |
231 |
| - overflow-y: auto; |
232 |
| - font-size: 14px; |
233 |
| - word-break: break-word; |
| 232 | + display: flex; |
| 233 | + align-items: center; |
| 234 | + gap: 8px; |
| 235 | + &-text { |
| 236 | + max-height: 128px; |
| 237 | + font-weight: 400; |
| 238 | + overflow-y: auto; |
| 239 | + font-size: 14px; |
| 240 | + word-break: break-word; |
| 241 | + } |
234 | 242 | }
|
235 | 243 | }
|
236 | 244 | }
|
|
0 commit comments