You've already forked AstralRinth
feat: server management in app (#5628)
* start new server settings tabs * update properties tab to match design * better stying in general tab * feat: add suffix input for hostname field * implement tables for allocations and DNS records * add tags for dns record type * small gap adjustment * polish advanced page * adjust properties page hierarchy * fix searching properties, empty state and projection radius appearing * pnpm prepr * update copy to match designs * fix suffix input component * style fixes and match heading size * small fix * fix search allocations placeholder * adjust table styles * move all installation settings helper text to below input * update icon to use overflow menu buttons * fix modal to be consistent * open advanced properties when search * remove other and custom properties, and update styles * remove hide/show all java versions * handle mc 26 * refactor: move server settings pages into /ui and add app ServerSettingsModal * hook up server pages for app * add server page header to app * hook up server settings modal * use large size * fix card box shadow style * fix hostname input for app * fix app/website card containers * implement external tabs for billing and admin billing * fix save banner fixed to parent instead of page body * remove unused prop to FriendsList causing warning in app * fix client-only not available for app * fix bottom cut off * wire node auth * implement full copy buttons * dedup copy button tailwind styles * fix hover class not working in @apply * fix spacing * fix error validation styles * apply consistent styles and spacing * feat: update hosting server card (#5609) * fix type errors * fix some stylesheets not imported for storybook * add server listing stories * add fix for frontend stylesheet imports * remove props. * convert copy code to use tailwind * update server listing component styles * update server info label styles * start status/player count info label, more style updates and fixes * add new server card buttons * hook up server cards and implement updated styles * hook up on download button * fix tauri throwing error when api returns 204 No Content * hook up purchase server modal in app * fix upgrading state loading icon * pnpm prepr * filter out servers past 30 days after cancellation * do not apply opacity on lock or spiner icons * fix disabled server icon background * update pending change stage * handle known suspension states * refactor: reduce code duplication for server listing * update disabled state text color * fix loading icon color * clean up copy * fix disabled opacity for server card * update server listing files kept to be countdown * implement resubscribe modal * implement proper provisioning state for resubscribe * fix duplicate attribute and pnpm prepr * feat: add shared UI package auth DI * feat: update purchase server flow (#5714) * implement server list empty state component * fix stories and adjust spacing * implement select plan design refresh * implement auth for empty server list * use refs instead of reactive * pnpm prepr * fix auth usage for empty servers list * move app auth provider setup to src/providers/setup * pnpm prepr * fix max height * style fix * fix getCreds no auth is blocking api client * implement servers guest plan modal and signin which redirects back to modal's next step * refactor guest plan select logic into provider * implement sign in or create account popup * remove force empty serverList * add download button for suspended mod and generic * add handling for when user logs out * QA pass style fixes * more consistent page styles * fix duplicate export * refactor: remove all fallback stuff from resubscribe modal * implement shared download latest backup util * i18n pass * pnpm prepr * fix region being selected if ping failed * pnpm prepr * feat: servers in app finalization (#5744) * feat: start on shared console implementation into logs and overview pages * fix: terminal gap issues * feat: swap word wrap for full screen * fix: stats cards alignment * fix: stats * feat: fix console clear + remove copy * fix: lint * fix: use reset not clear * feat: shared server header & overview page for app and website (#5736) * feat: implement shared server header for app and website * feat: implement wrapped overview page with shared composable and hook it up * pnpm prepr * fix: bugs * qa: cleanup * feat: root.vue shared layout * feat: delete old options pages + fix discovery frontend * fix: discovery * fix: misc style/layout issues * fix page padding * fix: modal height jankiness * feat: implement server install content in app and server setup modal with DI * fix: spacing * remove servers in app feature flag * Revert "remove servers in app feature flag" This reverts commit 86e284c4bdd6fa42c3c8fbaf1efbec41f4d1c6d2. * fix: qa * feat: remove legacy components from apps/frontend/src/components/ui/servers --------- Co-authored-by: Calum H. (IMB11) <contact@cal.engineer> * qa pass (#5738) * fix: qa * feat: qa * fix: server icon fetch fails due to global node auth race condition overriding each other * fix: lint * fix: server icon upload/sync and centralize logic * fix: server settings modal not closing for server reset * fix: better server sorting * feat: copy address in server listing card * fix: notification panel in modal and when overlapping with action bar * fix: empty server list empty state flashing when refresh, fixed by adding isReady auth flag * feat: use floating action bar for save banner * fix: saving state in save bar * fix: edit server icon styling * fix: confirm modal to have consistent buttons * feat: loading animation for server panel + caching improvements for app * pnpm prepr * feat: search page deduplication (#5754) * fix: action bar behind modal * fix: remove warning modal for stopping * fix: server cards states * we hate webkit we hate webkit * fix: update allocation creation to not use modal * fix: properties tab spacing and styles * feat: add files tab copy * fix: advanced properties icon * fix: remove back to all servers link * feat: add files tab link in copy * fix: server header styles to be consistent with instance * fix: add header icons back * feat: update instance settings icon to be consistent * fix: icon container * feat: upload state persistence across tabs * fix: server labels text wrapping * fix: use surface-5 border * fix: loading spinner showing with onboarding below * feat: new server button shows purchase modal in website * fix: billing page not showing quarterly interval * fix: server downgrade not showing updated subscription notification * fix: server settings invalidate saved state and remove server context provider since its already provided in the page * pnpm prepr * add stripe publishable key to app build * feat: console highlighting * fix: rename servers title to modrinth hosting * feat: search fix * fix: qa/styles * fix: ip click active and remove power dont ask again * fix: qa * feat: highlighting fix console * fix: disable conflicts action * fix: error dismiss bug * feat: modal clarification * fix: files perms issue * fix: lint * feat: modal fix * enable show uptime * fix: add loading state to edit server icon * fix: notification panel take in has sidebar from settings * fix: consistency pass on app settings * fix: consistency pass on instance settings * pnpm prepr * fix: nagivate to billing button in app to go to website * fix: stripe return url in app causing app to open modrinth.com in tauri * refactor: better show polling UI code * fix: new server polling comparison to use server ids instead of length * fix: buttonstyled story * fix: button styling * fix: content.vue regression * feat: project url redirects * fix: breadcrumbs * fix: purchase with newly added card * fix: console ordering problems * fix: app-frontend missing env config and staging environment * fix: log syncing for instances and server panel accidentally * fix: QA issues * fix: server page loading state * fix: stats card logic * fix: lint * fix: qa * fix: console height padding * fix: terminal padding + loading indicator * feat: update medal server listing styling * fix: no upgrade button for medal server listing in app * fix: go to overview instead of content tab after onboarding * fix: qa * fix: teleport modals to body * fix: logs tab + qa * fix: local storage for user preferences * fix: qa loading indic * feat: considitonal debug and trace * fix: jump to top on install bug * feat: swap out server hard drive icon to server stack icon * feat: servers in app feature flag default true * fix: highlight row ufll * fix: webkit thing onto a tag * fix: input field * fix: clear fix * fix: lint * fix: fmt * feat: improve share modal and bring it back for sharing log * pnpm prepr * fix: menu overflowing * feat: remove servers in app feature flag * fix: server stat charts no longer showing color * fix: library nav no primary state * fix: better modal height and width * fix: highlighting bugs * fix: empty states * fix: delay import to fix overview page slow load on MacOS * fix: medal server listing too bright on light mode * fix: admon analysis + fix logs * fix: bug * fix: clear purchase intent from sign-in after closing modal * performance: improve server manage stats loading by splitting reactivity * fix: deploy + admon + disable highlighting * fix: clippy --------- Co-authored-by: tdgao <mr.trumgao@gmail.com> Co-authored-by: Truman Gao <106889354+tdgao@users.noreply.github.com> * feat: temp wrangler * fix: lint * fix: logs upload * fix: console empty state and admon regressions * fix: fields * feat: log deleting + prefetch for Logs.vue * feat: move delete before share * feat: clear endpoint * feat: we ball! --------- Co-authored-by: Calum H. <calum@modrinth.com> Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>
This commit is contained in:
Truman Gao
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="flex items-center gap-1">
|
||||
<ButtonStyled v-if="showClear && hasLogs" type="transparent">
|
||||
<button @click="emit('clear')">
|
||||
<XIcon />
|
||||
Clear
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled v-if="showDelete" type="transparent" hover-color-fill="background" color="red">
|
||||
<button
|
||||
v-tooltip="deleteDisabled ? deleteDisabledTooltip : undefined"
|
||||
:disabled="deleteDisabled"
|
||||
@click="emit('delete')"
|
||||
>
|
||||
<TrashIcon />
|
||||
Delete
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled v-if="hasLogs" type="transparent">
|
||||
<button
|
||||
v-tooltip="shareDisabled ? shareDisabledTooltip : undefined"
|
||||
:disabled="shareDisabled || sharing"
|
||||
@click="emit('share')"
|
||||
>
|
||||
<SpinnerIcon v-if="sharing" class="animate-spin" />
|
||||
<ShareIcon v-else />
|
||||
Share
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled type="transparent">
|
||||
<button @click="emit('toggle-fullscreen')">
|
||||
<ContractIcon v-if="fullscreen" />
|
||||
<ExpandIcon v-else />
|
||||
{{ fullscreen ? 'Collapse' : 'Expand' }}
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ContractIcon,
|
||||
ExpandIcon,
|
||||
ShareIcon,
|
||||
SpinnerIcon,
|
||||
TrashIcon,
|
||||
XIcon,
|
||||
} from '@modrinth/assets'
|
||||
|
||||
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
|
||||
|
||||
defineProps<{
|
||||
showClear?: boolean
|
||||
hasLogs?: boolean
|
||||
shareDisabled?: boolean
|
||||
shareDisabledTooltip?: string
|
||||
sharing?: boolean
|
||||
fullscreen?: boolean
|
||||
showDelete?: boolean
|
||||
deleteDisabled?: boolean
|
||||
deleteDisabledTooltip?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
clear: []
|
||||
share: []
|
||||
'toggle-fullscreen': []
|
||||
delete: []
|
||||
}>()
|
||||
</script>
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<FilterPills v-model="selectedFilters" :options="visibleOptions">
|
||||
<template #all> All </template>
|
||||
</FilterPills>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
import FilterPills from '#ui/components/base/FilterPills.vue'
|
||||
|
||||
import type { ConditionalLevel } from '../composables/console-filtering'
|
||||
import type { LogLevel } from '../types'
|
||||
|
||||
type FilterValue = LogLevel | 'all'
|
||||
|
||||
const ALWAYS_VISIBLE: Array<{ id: LogLevel; label: string }> = [
|
||||
{ id: 'error', label: 'Error' },
|
||||
{ id: 'warn', label: 'Warn' },
|
||||
{ id: 'info', label: 'Info' },
|
||||
]
|
||||
|
||||
const CONDITIONAL_OPTIONS: Array<{ id: ConditionalLevel; label: string }> = [
|
||||
{ id: 'debug', label: 'Debug' },
|
||||
{ id: 'trace', label: 'Trace' },
|
||||
]
|
||||
|
||||
const props = defineProps<{
|
||||
presentLevels: Set<ConditionalLevel>
|
||||
}>()
|
||||
|
||||
const modelValue = defineModel<Set<FilterValue>>({ required: true })
|
||||
|
||||
const emit = defineEmits<{
|
||||
toggle: [value: FilterValue]
|
||||
}>()
|
||||
|
||||
const visibleOptions = computed(() => [
|
||||
...ALWAYS_VISIBLE,
|
||||
...CONDITIONAL_OPTIONS.filter((opt) => props.presentLevels.has(opt.id)),
|
||||
])
|
||||
|
||||
const selectedFilters = computed({
|
||||
get() {
|
||||
if (modelValue.value.has('all')) return []
|
||||
return [...modelValue.value] as string[]
|
||||
},
|
||||
set(ids: string[]) {
|
||||
if (ids.length === 0) {
|
||||
emit('toggle', 'all')
|
||||
} else {
|
||||
const current = selectedFilters.value
|
||||
const added = ids.find((id) => !current.includes(id))
|
||||
const removed = current.find((id) => !ids.includes(id))
|
||||
if (added) emit('toggle', added as FilterValue)
|
||||
if (removed) emit('toggle', removed as FilterValue)
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,97 @@
|
||||
import type { Terminal } from '@xterm/xterm'
|
||||
import { ref } from 'vue'
|
||||
|
||||
import type { LogLevel, LogLine } from '../types'
|
||||
|
||||
export type FilterPredicate = (line: LogLine) => boolean
|
||||
|
||||
function highlightMatches(text: string, query: string): string {
|
||||
if (!query) return text
|
||||
const lower = text.toLowerCase()
|
||||
let result = ''
|
||||
let pos = 0
|
||||
while (pos < text.length) {
|
||||
const idx = lower.indexOf(query, pos)
|
||||
if (idx === -1) {
|
||||
result += text.slice(pos)
|
||||
break
|
||||
}
|
||||
result += text.slice(pos, idx)
|
||||
result += `\x1b[1;7m${text.slice(idx, idx + query.length)}\x1b[27;22m`
|
||||
pos = idx + query.length
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
export function colorize(line: LogLine, searchQuery?: string): string {
|
||||
const text = searchQuery ? highlightMatches(line.text, searchQuery) : line.text
|
||||
switch (line.level) {
|
||||
case 'error':
|
||||
return `\x1b[31;40m${text}\x1b[K\x1b[0m`
|
||||
case 'warn':
|
||||
return `\x1b[33;40m${text}\x1b[K\x1b[0m`
|
||||
case 'debug':
|
||||
case 'trace':
|
||||
return `\x1b[90m${text}\x1b[0m`
|
||||
default:
|
||||
return text
|
||||
}
|
||||
}
|
||||
|
||||
export type ConditionalLevel = 'debug' | 'trace'
|
||||
|
||||
export function useConsoleFilters() {
|
||||
const activeFilters = ref<Set<LogLevel | 'all'>>(new Set(['all']))
|
||||
|
||||
function toggleFilter(level: LogLevel | 'all') {
|
||||
const next = new Set(activeFilters.value)
|
||||
if (level === 'all') {
|
||||
next.clear()
|
||||
next.add('all')
|
||||
} else {
|
||||
next.delete('all')
|
||||
if (next.has(level)) {
|
||||
next.delete(level)
|
||||
} else {
|
||||
next.add(level)
|
||||
}
|
||||
if (next.size === 0) {
|
||||
next.add('all')
|
||||
}
|
||||
}
|
||||
activeFilters.value = next
|
||||
}
|
||||
|
||||
function buildFilterPredicate(): FilterPredicate | null {
|
||||
if (activeFilters.value.has('all')) return null
|
||||
const allowed = activeFilters.value
|
||||
return (line: LogLine) => {
|
||||
return allowed.has(line.level ?? 'info')
|
||||
}
|
||||
}
|
||||
|
||||
return { activeFilters, toggleFilter, buildFilterPredicate }
|
||||
}
|
||||
|
||||
export function rewriteTerminal(
|
||||
terminal: Terminal,
|
||||
allLines: LogLine[],
|
||||
predicate: FilterPredicate | null,
|
||||
searchQuery?: string,
|
||||
callback?: () => void,
|
||||
) {
|
||||
terminal.reset()
|
||||
terminal.write('\x1b[?25l')
|
||||
|
||||
const filtered = predicate ? allLines.filter(predicate) : allLines
|
||||
if (filtered.length === 0) {
|
||||
callback?.()
|
||||
return
|
||||
}
|
||||
|
||||
terminal.write('\x1b[?2026h')
|
||||
terminal.write(filtered.map((line) => colorize(line, searchQuery)).join('\r\n'), () => {
|
||||
terminal.write('\x1b[?2026l')
|
||||
callback?.()
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
export {
|
||||
colorize,
|
||||
type ConditionalLevel,
|
||||
type FilterPredicate,
|
||||
rewriteTerminal,
|
||||
useConsoleFilters,
|
||||
} from './console-filtering'
|
||||
export { computeHighlightColors, LogHighlightAddon } from './log-highlight-addon'
|
||||
export { detectLogLevel } from './log-level'
|
||||
@@ -0,0 +1,242 @@
|
||||
import type { IDecoration, IDisposable, IMarker, ITerminalAddon, Terminal } from '@xterm/xterm'
|
||||
|
||||
import { getCssVar } from '#ui/composables/terminal'
|
||||
|
||||
import type { LogLevel } from '../types'
|
||||
|
||||
export interface HighlightColors {
|
||||
errorPrimary: string
|
||||
errorWrap: string
|
||||
warnPrimary: string
|
||||
warnWrap: string
|
||||
}
|
||||
|
||||
interface TrackedLine {
|
||||
marker: IMarker
|
||||
level: 'error' | 'warn'
|
||||
isEntryStart: boolean
|
||||
primary: IDecoration | undefined
|
||||
wraps: IDecoration[]
|
||||
}
|
||||
|
||||
type HighlightClass = 'hl-error-primary' | 'hl-error-wrap' | 'hl-warn-primary' | 'hl-warn-wrap'
|
||||
|
||||
const LOG_ENTRY_START = /^\[\d{2}:\d{2}:\d{2}\]/
|
||||
|
||||
function parseHex(hex: string): [number, number, number] {
|
||||
const h = hex.startsWith('#') ? hex.slice(1) : hex
|
||||
return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)]
|
||||
}
|
||||
|
||||
function blendHex(base: string, overlay: string, alpha: number): string {
|
||||
const [br, bg, bb] = parseHex(base)
|
||||
const [or, og, ob] = parseHex(overlay)
|
||||
const r = Math.round(br + (or - br) * alpha)
|
||||
const g = Math.round(bg + (og - bg) * alpha)
|
||||
const b = Math.round(bb + (ob - bb) * alpha)
|
||||
return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
export function computeHighlightColors(): HighlightColors {
|
||||
const bg = getCssVar('--surface-2', '#1d1f23')
|
||||
const red = getCssVar('--color-red', '#ff496e')
|
||||
const orange = getCssVar('--color-orange', '#ffa347')
|
||||
return {
|
||||
errorPrimary: blendHex(bg, red, 0.15),
|
||||
errorWrap: blendHex(bg, red, 0.04),
|
||||
warnPrimary: blendHex(bg, orange, 0.15),
|
||||
warnWrap: blendHex(bg, orange, 0.04),
|
||||
}
|
||||
}
|
||||
|
||||
export class LogHighlightAddon implements ITerminalAddon {
|
||||
private terminal: Terminal | null = null
|
||||
private tracked: TrackedLine[] = []
|
||||
private colors: HighlightColors
|
||||
private disposables: IDisposable[] = []
|
||||
private styleElement: HTMLStyleElement | null = null
|
||||
|
||||
constructor(colors: HighlightColors) {
|
||||
this.colors = colors
|
||||
}
|
||||
|
||||
activate(terminal: Terminal): void {
|
||||
this.terminal = terminal
|
||||
this.injectStylesheet()
|
||||
this.disposables.push(terminal.onResize(() => this.rebuildAllDecorations()))
|
||||
}
|
||||
|
||||
dispose(): void {
|
||||
for (const d of this.disposables) d.dispose()
|
||||
this.disposables = []
|
||||
this.clearAll()
|
||||
this.styleElement?.remove()
|
||||
this.styleElement = null
|
||||
this.terminal = null
|
||||
}
|
||||
|
||||
applyFromLine(startLine: number, levels: Array<LogLevel | null>): void {
|
||||
const term = this.terminal
|
||||
if (!term) return
|
||||
|
||||
const buffer = term.buffer.active
|
||||
let levelIdx = 0
|
||||
|
||||
for (let line = startLine; line < buffer.length && levelIdx < levels.length; line++) {
|
||||
const bufLine = buffer.getLine(line)
|
||||
if (!bufLine || bufLine.isWrapped) continue
|
||||
|
||||
const level = levels[levelIdx++]
|
||||
if (level === 'error' || level === 'warn') {
|
||||
this.decorateLogicalLine(line, level)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
clearAll(): void {
|
||||
for (const tl of this.tracked) {
|
||||
tl.primary?.dispose()
|
||||
for (const w of tl.wraps) w.dispose()
|
||||
tl.marker.dispose()
|
||||
}
|
||||
this.tracked = []
|
||||
}
|
||||
|
||||
updateColors(colors: HighlightColors): void {
|
||||
this.colors = colors
|
||||
this.updateStylesheet()
|
||||
this.rebuildAllDecorations()
|
||||
}
|
||||
|
||||
private injectStylesheet(): void {
|
||||
const el = this.terminal?.element
|
||||
if (!el) return
|
||||
this.styleElement = document.createElement('style')
|
||||
this.updateStylesheet()
|
||||
el.appendChild(this.styleElement)
|
||||
}
|
||||
|
||||
private updateStylesheet(): void {
|
||||
if (!this.styleElement) return
|
||||
this.styleElement.textContent = [
|
||||
`.hl-error-primary { background-color: ${this.colors.errorPrimary} !important; }`,
|
||||
`.hl-error-wrap { background-color: ${this.colors.errorWrap} !important; }`,
|
||||
`.hl-warn-primary { background-color: ${this.colors.warnPrimary} !important; }`,
|
||||
`.hl-warn-wrap { background-color: ${this.colors.warnWrap} !important; }`,
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
private classForDecoration(level: 'error' | 'warn', isEntryStart: boolean): HighlightClass {
|
||||
if (level === 'error') return isEntryStart ? 'hl-error-primary' : 'hl-error-wrap'
|
||||
return isEntryStart ? 'hl-warn-primary' : 'hl-warn-wrap'
|
||||
}
|
||||
|
||||
private tagElement(dec: IDecoration | undefined, cls: HighlightClass): void {
|
||||
if (!dec) return
|
||||
const disposable = dec.onRender((el) => {
|
||||
el.classList.add(cls)
|
||||
disposable.dispose()
|
||||
})
|
||||
}
|
||||
|
||||
private decorateLogicalLine(bufferLine: number, level: 'error' | 'warn'): void {
|
||||
const term = this.terminal
|
||||
if (!term) return
|
||||
|
||||
const buffer = term.buffer.active
|
||||
const cursorAbsolute = buffer.baseY + buffer.cursorY
|
||||
const offset = bufferLine - cursorAbsolute
|
||||
const marker = term.registerMarker(offset)
|
||||
if (!marker) return
|
||||
|
||||
const lineText = buffer.getLine(bufferLine)?.translateToString(true) ?? ''
|
||||
const isEntryStart = LOG_ENTRY_START.test(lineText)
|
||||
|
||||
const bgColor = isEntryStart
|
||||
? level === 'error'
|
||||
? this.colors.errorPrimary
|
||||
: this.colors.warnPrimary
|
||||
: level === 'error'
|
||||
? this.colors.errorWrap
|
||||
: this.colors.warnWrap
|
||||
|
||||
const primary = term.registerDecoration({
|
||||
marker,
|
||||
backgroundColor: bgColor,
|
||||
width: term.cols,
|
||||
layer: 'bottom',
|
||||
})
|
||||
this.tagElement(primary, this.classForDecoration(level, isEntryStart))
|
||||
const wraps = this.createWrapDecorations(bufferLine, level)
|
||||
|
||||
this.tracked.push({ marker, level, isEntryStart, primary, wraps })
|
||||
}
|
||||
|
||||
private createWrapDecorations(primaryLine: number, level: 'error' | 'warn'): IDecoration[] {
|
||||
const term = this.terminal
|
||||
if (!term) return []
|
||||
|
||||
const buffer = term.buffer.active
|
||||
const decorations: IDecoration[] = []
|
||||
const cursorAbsolute = buffer.baseY + buffer.cursorY
|
||||
const cls = this.classForDecoration(level, false)
|
||||
const color = level === 'error' ? this.colors.errorWrap : this.colors.warnWrap
|
||||
|
||||
for (let line = primaryLine + 1; line < buffer.length; line++) {
|
||||
const bufLine = buffer.getLine(line)
|
||||
if (!bufLine || !bufLine.isWrapped) break
|
||||
|
||||
const offset = line - cursorAbsolute
|
||||
const wrapMarker = term.registerMarker(offset)
|
||||
if (!wrapMarker) continue
|
||||
|
||||
const dec = term.registerDecoration({
|
||||
marker: wrapMarker,
|
||||
backgroundColor: color,
|
||||
width: term.cols,
|
||||
layer: 'bottom',
|
||||
})
|
||||
if (dec) {
|
||||
this.tagElement(dec, cls)
|
||||
decorations.push(dec)
|
||||
}
|
||||
}
|
||||
|
||||
return decorations
|
||||
}
|
||||
|
||||
private rebuildAllDecorations(): void {
|
||||
const term = this.terminal
|
||||
if (!term) return
|
||||
|
||||
for (const tl of this.tracked) {
|
||||
tl.primary?.dispose()
|
||||
for (const w of tl.wraps) w.dispose()
|
||||
|
||||
if (tl.marker.line === -1) {
|
||||
tl.primary = undefined
|
||||
tl.wraps = []
|
||||
continue
|
||||
}
|
||||
|
||||
const cls = this.classForDecoration(tl.level, tl.isEntryStart)
|
||||
const bgColor = tl.isEntryStart
|
||||
? tl.level === 'error'
|
||||
? this.colors.errorPrimary
|
||||
: this.colors.warnPrimary
|
||||
: tl.level === 'error'
|
||||
? this.colors.errorWrap
|
||||
: this.colors.warnWrap
|
||||
tl.primary = term.registerDecoration({
|
||||
marker: tl.marker,
|
||||
backgroundColor: bgColor,
|
||||
width: term.cols,
|
||||
layer: 'bottom',
|
||||
})
|
||||
this.tagElement(tl.primary, cls)
|
||||
tl.wraps = this.createWrapDecorations(tl.marker.line, tl.level)
|
||||
}
|
||||
|
||||
this.tracked = this.tracked.filter((tl) => tl.marker.line !== -1)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import type { LogLevel } from '../types'
|
||||
|
||||
const ERROR_TRIGGERS = ['/ERROR', 'Exception:', ':?]', 'Error', '[thread', '\tat']
|
||||
|
||||
export function detectLogLevel(lineText: string): LogLevel | null {
|
||||
if (lineText.includes('/INFO') || lineText.includes('[System] [CHAT]')) return 'info'
|
||||
if (lineText.includes('/WARN')) return 'warn'
|
||||
if (lineText.includes('/DEBUG')) return 'debug'
|
||||
if (lineText.includes('/TRACE')) return 'trace'
|
||||
for (const trigger of ERROR_TRIGGERS) {
|
||||
if (lineText.includes(trigger)) return 'error'
|
||||
}
|
||||
return null
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export { default as ConsolePageLayout } from './layout.vue'
|
||||
export * from './providers'
|
||||
export * from './types'
|
||||
@@ -0,0 +1,357 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex min-h-0 flex-1 flex-col gap-4"
|
||||
:class="isFullscreen ? `fixed inset-0 z-50 bg-surface-1 p-6 py-8 ${isApp ? 'pt-12' : ''}` : ''"
|
||||
>
|
||||
<CollapsibleAdmonition
|
||||
v-if="ctx.crashAnalysis?.value"
|
||||
type="critical"
|
||||
:header="crashHeader"
|
||||
:items="crashItems"
|
||||
dismissible
|
||||
@dismiss="ctx.onDismissCrash?.()"
|
||||
/>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<StyledInput
|
||||
v-model="searchQuery"
|
||||
:icon="SearchIcon"
|
||||
placeholder="Search logs"
|
||||
wrapper-class="flex-1"
|
||||
input-class="!h-10"
|
||||
clearable
|
||||
/>
|
||||
<div v-if="ctx.logSources?.value && ctx.activeLogSourceIndex" class="w-[220px]">
|
||||
<Combobox
|
||||
:model-value="ctx.activeLogSourceIndex.value"
|
||||
:options="logSourceOptions"
|
||||
@update:model-value="(v) => (ctx.activeLogSourceIndex!.value = v)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<ConsoleFilterPills
|
||||
v-model="activeFilters"
|
||||
:present-levels="presentLevels"
|
||||
@toggle="handleFilterToggle"
|
||||
/>
|
||||
<ConsoleActionButtons
|
||||
:show-clear="isLiveSource"
|
||||
:has-logs="hasLogs"
|
||||
:share-disabled="resolvedShareDisabled"
|
||||
:sharing="isSharing"
|
||||
:fullscreen="isFullscreen"
|
||||
:show-delete="showDelete"
|
||||
:delete-disabled="resolvedDeleteDisabled"
|
||||
:delete-disabled-tooltip="ctx.deleteDisabledTooltip"
|
||||
@clear="handleClear"
|
||||
@share="handleShare"
|
||||
@toggle-fullscreen="toggleFullscreen"
|
||||
@delete="handleDelete"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<BaseTerminal
|
||||
ref="terminalRef"
|
||||
class="min-h-0 flex-1"
|
||||
:show-input="resolvedShowInput"
|
||||
:disable-input="resolvedDisableInput"
|
||||
:fullscreen="isFullscreen"
|
||||
:empty-state-type="ctx.emptyStateType"
|
||||
@command="handleCommand"
|
||||
@ready="handleTerminalReady"
|
||||
/>
|
||||
</div>
|
||||
<ShareModal ref="shareModal" header="Share Logs" link :social-buttons="false" />
|
||||
<NewModal ref="deleteModal" header="Delete log file" :fade="'danger'" max-width="500px">
|
||||
<div class="flex flex-col gap-6">
|
||||
<Admonition type="critical" header="This is irreversible">
|
||||
Deleting this log file cannot be undone. Are you sure you want to continue?
|
||||
</Admonition>
|
||||
</div>
|
||||
<template #actions>
|
||||
<div class="flex justify-end gap-2">
|
||||
<ButtonStyled type="outlined">
|
||||
<button class="!border !border-surface-4" @click="deleteModal?.hide()">
|
||||
<XIcon />
|
||||
Cancel
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled color="red">
|
||||
<button :disabled="isDeleting" @click="confirmDelete">
|
||||
<TrashIcon />
|
||||
Delete
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</template>
|
||||
</NewModal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { SearchIcon, TrashIcon, XIcon } from '@modrinth/assets'
|
||||
import type { Terminal } from '@xterm/xterm'
|
||||
import { computed, isRef, nextTick, onBeforeUnmount, ref, watch } from 'vue'
|
||||
|
||||
import Admonition from '#ui/components/base/Admonition.vue'
|
||||
import BaseTerminal from '#ui/components/base/BaseTerminal.vue'
|
||||
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
|
||||
import type { CollapsibleAdmonitionItem } from '#ui/components/base/CollapsibleAdmonition.vue'
|
||||
import CollapsibleAdmonition from '#ui/components/base/CollapsibleAdmonition.vue'
|
||||
import Combobox from '#ui/components/base/Combobox.vue'
|
||||
import StyledInput from '#ui/components/base/StyledInput.vue'
|
||||
import NewModal from '#ui/components/modal/NewModal.vue'
|
||||
import ShareModal from '#ui/components/modal/ShareModal.vue'
|
||||
import { injectModrinthClient } from '#ui/providers'
|
||||
import { injectModalBehavior } from '#ui/providers/modal-behavior'
|
||||
import { injectNotificationManager } from '#ui/providers/web-notifications.ts'
|
||||
|
||||
import ConsoleActionButtons from './components/ConsoleActionButtons.vue'
|
||||
import ConsoleFilterPills from './components/ConsoleFilterPills.vue'
|
||||
import { colorize, rewriteTerminal, useConsoleFilters } from './composables'
|
||||
import type { ConditionalLevel } from './composables/console-filtering'
|
||||
import { injectConsoleManager } from './providers'
|
||||
import type { LogLevel, LogLine } from './types'
|
||||
|
||||
const ctx = injectConsoleManager()
|
||||
const client = injectModrinthClient()
|
||||
const modalBehavior = injectModalBehavior()
|
||||
const { addNotification } = injectNotificationManager()
|
||||
|
||||
const crashHeader = computed(() => {
|
||||
const problems = ctx.crashAnalysis?.value?.analysis.problems ?? []
|
||||
const count = problems.length
|
||||
return `${count} problem${count !== 1 ? 's' : ''} detected`
|
||||
})
|
||||
|
||||
const crashItems = computed<CollapsibleAdmonitionItem[]>(() => {
|
||||
const problems = ctx.crashAnalysis?.value?.analysis.problems ?? []
|
||||
return problems.map((p) => ({
|
||||
title: p.message,
|
||||
descriptions: p.solutions.map((s) => s.message),
|
||||
}))
|
||||
})
|
||||
|
||||
const terminalRef = ref<InstanceType<typeof BaseTerminal> | null>(null)
|
||||
const shareModal = ref<InstanceType<typeof ShareModal> | null>(null)
|
||||
const deleteModal = ref<InstanceType<typeof NewModal> | null>(null)
|
||||
const isDeleting = ref(false)
|
||||
const searchQuery = ref('')
|
||||
const isFullscreen = ref(false)
|
||||
const isApp =
|
||||
typeof window !== 'undefined' && !!(window as Record<string, unknown>).__TAURI_INTERNALS__
|
||||
const isSharing = ref(false)
|
||||
const { activeFilters, toggleFilter, buildFilterPredicate } = useConsoleFilters()
|
||||
const hasLogs = computed(() => ctx.logLines.value.length > 0)
|
||||
const presentLevels = computed(() => {
|
||||
const levels = new Set<ConditionalLevel>()
|
||||
for (const line of ctx.logLines.value) {
|
||||
if (line.level === 'debug') levels.add('debug')
|
||||
if (line.level === 'trace') levels.add('trace')
|
||||
if (levels.size === 2) break
|
||||
}
|
||||
return levels
|
||||
})
|
||||
const isLiveSource = computed(() => {
|
||||
const sources = ctx.logSources?.value
|
||||
const index = ctx.activeLogSourceIndex?.value
|
||||
if (!sources || index === undefined) return true
|
||||
return sources[index]?.live ?? true
|
||||
})
|
||||
const logSourceOptions = computed(() =>
|
||||
(ctx.logSources?.value ?? []).map((s, i) => ({ value: i, label: s.name })),
|
||||
)
|
||||
|
||||
function buildCombinedPredicate(): ((line: LogLine) => boolean) | null {
|
||||
const levelPred = buildFilterPredicate()
|
||||
const query = searchQuery.value.trim().toLowerCase()
|
||||
if (!levelPred && !query) return null
|
||||
return (line: LogLine) => {
|
||||
if (levelPred && !levelPred(line)) return false
|
||||
if (query && !line.text.toLowerCase().includes(query)) return false
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (isFullscreen.value) {
|
||||
document.body.style.overflow = ''
|
||||
modalBehavior?.onHide?.()
|
||||
}
|
||||
})
|
||||
|
||||
let lastWrittenIndex = 0
|
||||
let searchDebounce: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
const resolvedShowInput = computed(() => {
|
||||
const v = ctx.showCommandInput
|
||||
if (v === undefined) return false
|
||||
if (typeof v === 'boolean') return v
|
||||
return isRef(v) ? v.value : v
|
||||
})
|
||||
|
||||
const resolvedDisableInput = computed(() => {
|
||||
const v = ctx.disableCommandInput
|
||||
if (!v) return false
|
||||
return isRef(v) ? v.value : v
|
||||
})
|
||||
|
||||
const resolvedShareDisabled = computed(() => {
|
||||
const v = ctx.shareDisabled
|
||||
if (!v) return false
|
||||
return isRef(v) ? v.value : v
|
||||
})
|
||||
|
||||
const showDelete = computed(() => !isLiveSource.value && ctx.onDelete != null)
|
||||
|
||||
const resolvedDeleteDisabled = computed(() => {
|
||||
const v = ctx.deleteDisabled
|
||||
if (!v) return false
|
||||
return isRef(v) ? v.value : v
|
||||
})
|
||||
|
||||
function handleTerminalReady(_terminal: Terminal) {
|
||||
rewriteFiltered()
|
||||
}
|
||||
|
||||
function handleFilterToggle(value: LogLevel | 'all') {
|
||||
toggleFilter(value)
|
||||
rewriteFiltered()
|
||||
}
|
||||
|
||||
function activeSearchQuery(): string {
|
||||
return searchQuery.value.trim().toLowerCase()
|
||||
}
|
||||
|
||||
function rewriteFiltered() {
|
||||
const term = terminalRef.value?.terminal
|
||||
if (!term) return
|
||||
const lines = ctx.logLines.value
|
||||
if (lines.length === 0 && isLiveSource.value) {
|
||||
writeEmptyState()
|
||||
return
|
||||
}
|
||||
terminalRef.value?.clearEmptyState()
|
||||
const predicate = buildCombinedPredicate()
|
||||
rewriteTerminal(term, lines, predicate, activeSearchQuery())
|
||||
lastWrittenIndex = lines.length
|
||||
}
|
||||
|
||||
function toggleFullscreen() {
|
||||
isFullscreen.value = !isFullscreen.value
|
||||
if (isFullscreen.value) {
|
||||
document.body.style.overflow = 'hidden'
|
||||
modalBehavior?.onShow?.()
|
||||
} else {
|
||||
document.body.style.overflow = ''
|
||||
modalBehavior?.onHide?.()
|
||||
}
|
||||
nextTick(() => {
|
||||
terminalRef.value?.fit()
|
||||
})
|
||||
}
|
||||
|
||||
function writeEmptyState() {
|
||||
terminalRef.value?.writeEmptyState()
|
||||
lastWrittenIndex = 0
|
||||
}
|
||||
|
||||
watch(ctx.logLines, (lines, oldLines) => {
|
||||
const term = terminalRef.value?.terminal
|
||||
if (!term) return
|
||||
|
||||
if (lines.length === 0 && isLiveSource.value) {
|
||||
writeEmptyState()
|
||||
return
|
||||
}
|
||||
|
||||
if (
|
||||
terminalRef.value?.showingEmptyState ||
|
||||
lines !== oldLines ||
|
||||
lines.length < lastWrittenIndex
|
||||
) {
|
||||
terminalRef.value?.clearEmptyState()
|
||||
rewriteFiltered()
|
||||
return
|
||||
}
|
||||
|
||||
const predicate = buildCombinedPredicate()
|
||||
const query = activeSearchQuery()
|
||||
const newLines: string[] = []
|
||||
for (let i = lastWrittenIndex; i < lines.length; i++) {
|
||||
if (!predicate || predicate(lines[i])) {
|
||||
newLines.push(colorize(lines[i], query))
|
||||
}
|
||||
}
|
||||
if (newLines.length > 0) {
|
||||
const buffer = term.buffer.active
|
||||
const onFreshLine = buffer.cursorX === 0
|
||||
const data = onFreshLine ? newLines.join('\r\n') : '\r\n' + newLines.join('\r\n')
|
||||
term.write(data)
|
||||
}
|
||||
lastWrittenIndex = lines.length
|
||||
})
|
||||
|
||||
watch(searchQuery, () => {
|
||||
if (searchDebounce) clearTimeout(searchDebounce)
|
||||
searchDebounce = setTimeout(() => {
|
||||
rewriteFiltered()
|
||||
}, 200)
|
||||
})
|
||||
|
||||
function handleCommand(cmd: string) {
|
||||
ctx.sendCommand?.(cmd)
|
||||
}
|
||||
|
||||
function handleClear() {
|
||||
terminalRef.value?.reset()
|
||||
lastWrittenIndex = 0
|
||||
ctx.onClear?.()
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
deleteModal.value?.show()
|
||||
}
|
||||
|
||||
async function confirmDelete() {
|
||||
if (!ctx.onDelete) return
|
||||
isDeleting.value = true
|
||||
try {
|
||||
await ctx.onDelete()
|
||||
deleteModal.value?.hide()
|
||||
} catch (err) {
|
||||
console.error('Failed to delete log file:', err)
|
||||
addNotification({
|
||||
type: 'error',
|
||||
title: 'Failed to delete log file',
|
||||
text: typeof err === 'string' ? err : 'Unknown error.',
|
||||
})
|
||||
} finally {
|
||||
isDeleting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleShare() {
|
||||
const predicate = buildCombinedPredicate()
|
||||
const lines = predicate ? ctx.logLines.value.filter(predicate) : ctx.logLines.value
|
||||
const content = lines.map((l) => l.text).join('\n')
|
||||
|
||||
isSharing.value = true
|
||||
try {
|
||||
const data = await client.mclogs.logs_v1.create(content)
|
||||
if (data.url) {
|
||||
shareModal.value?.show(data.url)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to share logs:', err)
|
||||
addNotification({
|
||||
type: 'error',
|
||||
title: 'Failed to share logs',
|
||||
text: typeof err === 'string' ? err : 'Unknown error.',
|
||||
})
|
||||
} finally {
|
||||
isSharing.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,36 @@
|
||||
import type { Mclogs } from '@modrinth/api-client'
|
||||
import type { ComputedRef, Ref } from 'vue'
|
||||
|
||||
import { createContext } from '#ui/providers/create-context'
|
||||
|
||||
import type { LogLine, LogSource } from '../types'
|
||||
|
||||
export interface ConsoleManagerContext {
|
||||
logLines: Ref<LogLine[]>
|
||||
|
||||
logSources?: ComputedRef<LogSource[]>
|
||||
activeLogSourceIndex?: Ref<number>
|
||||
|
||||
sendCommand?: (cmd: string) => void
|
||||
showCommandInput?: boolean | Ref<boolean> | ComputedRef<boolean>
|
||||
disableCommandInput?: boolean | Ref<boolean> | ComputedRef<boolean>
|
||||
|
||||
loading?: Ref<boolean> | ComputedRef<boolean>
|
||||
|
||||
onClear?: () => void
|
||||
onDelete?: () => Promise<void>
|
||||
deleteDisabled?: Ref<boolean> | ComputedRef<boolean>
|
||||
deleteDisabledTooltip?: string
|
||||
|
||||
shareDisabled?: Ref<boolean> | ComputedRef<boolean>
|
||||
|
||||
emptyStateType?: 'server' | 'instance'
|
||||
|
||||
crashAnalysis?: Ref<Mclogs.Insights.v1.InsightsResponse | null>
|
||||
onDismissCrash?: () => void
|
||||
}
|
||||
|
||||
export const [injectConsoleManager, provideConsoleManager] = createContext<ConsoleManagerContext>(
|
||||
'ConsolePageLayout',
|
||||
'consoleManagerContext',
|
||||
)
|
||||
@@ -0,0 +1 @@
|
||||
export * from './console-manager'
|
||||
@@ -0,0 +1,21 @@
|
||||
export type LogLevel = 'error' | 'warn' | 'info' | 'debug' | 'trace'
|
||||
|
||||
export interface LogLine {
|
||||
text: string
|
||||
level: LogLevel | null
|
||||
}
|
||||
|
||||
export interface Log4jEvent {
|
||||
logger_name?: string
|
||||
level?: string
|
||||
thread_name?: string
|
||||
timestamp_millis?: number
|
||||
message?: string
|
||||
throwable?: string
|
||||
}
|
||||
|
||||
export interface LogSource {
|
||||
id: string
|
||||
name: string
|
||||
live: boolean
|
||||
}
|
||||
Reference in New Issue
Block a user