mirror of
https://github.com/amir20/dozzle.git
synced 2025-12-24 06:28:42 +01:00
Reformats code
This commit is contained in:
@@ -58,18 +58,18 @@ export default {
|
||||
Splitpanes,
|
||||
Pane,
|
||||
Search,
|
||||
ContainerTitle
|
||||
ContainerTitle,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "",
|
||||
collapseNav: false
|
||||
collapseNav: false,
|
||||
};
|
||||
},
|
||||
metaInfo() {
|
||||
return {
|
||||
title: this.title,
|
||||
titleTemplate: "%s - Dozzle"
|
||||
titleTemplate: "%s - Dozzle",
|
||||
};
|
||||
},
|
||||
async created() {
|
||||
@@ -89,27 +89,27 @@ export default {
|
||||
} else {
|
||||
document.documentElement.classList.remove("has-custom-scrollbars");
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState(["containers", "activeContainers", "isMobile", "settings"]),
|
||||
hasSmallerScrollbars() {
|
||||
return this.settings.smallerScrollbars;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
fetchContainerList: "FETCH_CONTAINERS",
|
||||
removeActiveContainer: "REMOVE_ACTIVE_CONTAINER",
|
||||
updateSetting: "UPDATE_SETTING"
|
||||
updateSetting: "UPDATE_SETTING",
|
||||
}),
|
||||
onResized(e) {
|
||||
if (e.length == 2) {
|
||||
const menuWidth = e[0].size;
|
||||
this.updateSetting({ menuWidth });
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -13,10 +13,10 @@ export default {
|
||||
value: String,
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
name: "ContainerTitle"
|
||||
name: "ContainerTitle",
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -7,16 +7,16 @@ export default {
|
||||
name: "InfiniteLoader",
|
||||
data() {
|
||||
return {
|
||||
isLoading: false
|
||||
isLoading: false,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
onLoadMore: Function,
|
||||
enabled: Boolean
|
||||
enabled: Boolean,
|
||||
},
|
||||
mounted() {
|
||||
const intersectionObserver = new IntersectionObserver(
|
||||
async entries => {
|
||||
async (entries) => {
|
||||
if (entries[0].intersectionRatio <= 0) return;
|
||||
if (this.onLoadMore && this.enabled) {
|
||||
const scrollingParent = this.$el.closest("[data-scrolling]") || document.documentElement;
|
||||
@@ -31,7 +31,7 @@ export default {
|
||||
);
|
||||
|
||||
intersectionObserver.observe(this.$refs.observer);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@@ -16,7 +16,7 @@ function parseMessage(data) {
|
||||
return {
|
||||
key,
|
||||
date,
|
||||
message
|
||||
message,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -24,12 +24,12 @@ export default {
|
||||
props: ["id"],
|
||||
name: "LogEventSource",
|
||||
components: {
|
||||
InfiniteLoader
|
||||
InfiniteLoader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
messages: [],
|
||||
buffer: []
|
||||
buffer: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@@ -52,11 +52,11 @@ export default {
|
||||
250,
|
||||
{ maxWait: 1000 }
|
||||
);
|
||||
this.es.onmessage = e => {
|
||||
this.es.onmessage = (e) => {
|
||||
this.buffer.push(parseMessage(e.data));
|
||||
flushBuffer();
|
||||
};
|
||||
this.es.onerror = e => console.log("EventSource failed." + e);
|
||||
this.es.onerror = (e) => console.log("EventSource failed." + e);
|
||||
this.$once("hook:beforeDestroy", () => this.es.close());
|
||||
},
|
||||
async loadOlderLogs() {
|
||||
@@ -73,17 +73,17 @@ export default {
|
||||
const newMessages = logs
|
||||
.trim()
|
||||
.split("\n")
|
||||
.map(line => parseMessage(line));
|
||||
.map((line) => parseMessage(line));
|
||||
this.messages.unshift(...newMessages);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
id(newValue, oldValue) {
|
||||
if (oldValue !== newValue) {
|
||||
this.loadLogs(newValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -20,16 +20,13 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
showSearch: false
|
||||
showSearch: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
colorize: function(value) {
|
||||
return ansiConvertor
|
||||
.toHtml(value)
|
||||
.replace("<mark>", "<mark>")
|
||||
.replace("</mark>", "</mark>");
|
||||
}
|
||||
colorize: function (value) {
|
||||
return ansiConvertor.toHtml(value).replace("<mark>", "<mark>").replace("</mark>", "</mark>");
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState(["searchFilter", "settings"]),
|
||||
@@ -40,10 +37,10 @@ export default {
|
||||
try {
|
||||
const regex = isSmartCase ? new RegExp(searchFilter, "i") : new RegExp(searchFilter);
|
||||
return messages
|
||||
.filter(d => d.message.match(regex))
|
||||
.map(d => ({
|
||||
.filter((d) => d.message.match(regex))
|
||||
.map((d) => ({
|
||||
...d,
|
||||
message: d.message.replace(regex, "<mark>$&</mark>")
|
||||
message: d.message.replace(regex, "<mark>$&</mark>"),
|
||||
}));
|
||||
} catch (e) {
|
||||
if (e instanceof SyntaxError) {
|
||||
@@ -54,13 +51,13 @@ export default {
|
||||
}
|
||||
}
|
||||
return messages;
|
||||
}
|
||||
},
|
||||
},
|
||||
filters: {
|
||||
relativeTime(date) {
|
||||
return formatRelative(date, new Date());
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -13,7 +13,7 @@ export default {
|
||||
name: "LogViewerWithSource",
|
||||
components: {
|
||||
LogEventSource,
|
||||
LogViewer
|
||||
}
|
||||
LogViewer,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -34,22 +34,22 @@ export default {
|
||||
name: "MobileMenu",
|
||||
data() {
|
||||
return {
|
||||
showNav: false
|
||||
showNav: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(["containers"]),
|
||||
...mapGetters(["activeContainersById"])
|
||||
...mapGetters(["activeContainersById"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions({})
|
||||
...mapActions({}),
|
||||
},
|
||||
watch: {
|
||||
$route(to, from) {
|
||||
this.showNav = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -27,19 +27,19 @@ export default {
|
||||
props: {
|
||||
scrollable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
name: "ScrollableView",
|
||||
data() {
|
||||
return {
|
||||
paused: false,
|
||||
hasMore: false
|
||||
hasMore: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const { content } = this.$refs;
|
||||
new MutationObserver(e => {
|
||||
new MutationObserver((e) => {
|
||||
if (!this.paused) {
|
||||
this.scrollToBottom("instant");
|
||||
} else {
|
||||
@@ -48,7 +48,7 @@ export default {
|
||||
}).observe(content, { childList: true, subtree: true });
|
||||
|
||||
const intersectionObserver = new IntersectionObserver(
|
||||
entries => (this.paused = entries[0].intersectionRatio == 0),
|
||||
(entries) => (this.paused = entries[0].intersectionRatio == 0),
|
||||
{ threshholds: [0, 1], rootMargin: "80px 0px" }
|
||||
);
|
||||
|
||||
@@ -59,8 +59,8 @@ export default {
|
||||
scrollToBottom(behavior = "instant") {
|
||||
this.$refs.scrollObserver.scrollIntoView({ behavior });
|
||||
this.hasMore = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -30,7 +30,7 @@ export default {
|
||||
name: "Search",
|
||||
data() {
|
||||
return {
|
||||
showSearch: false
|
||||
showSearch: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@@ -45,12 +45,12 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
updateSearchFilter: "SET_SEARCH"
|
||||
updateSearchFilter: "SET_SEARCH",
|
||||
}),
|
||||
resetSearch() {
|
||||
this.showSearch = false;
|
||||
this.filter = "";
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState(["searchFilter", "settings"]),
|
||||
@@ -60,9 +60,9 @@ export default {
|
||||
},
|
||||
set(value) {
|
||||
this.updateSearchFilter(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -49,13 +49,13 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
...mapState(["containers", "activeContainers"]),
|
||||
...mapGetters(["activeContainersById"])
|
||||
...mapGetters(["activeContainersById"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
appendActiveContainer: "APPEND_ACTIVE_CONTAINER"
|
||||
})
|
||||
}
|
||||
appendActiveContainer: "APPEND_ACTIVE_CONTAINER",
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -20,16 +20,16 @@ export default {
|
||||
components: {
|
||||
LogViewerWithSource,
|
||||
ScrollableView,
|
||||
ContainerTitle
|
||||
ContainerTitle,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "loading"
|
||||
title: "loading",
|
||||
};
|
||||
},
|
||||
metaInfo() {
|
||||
return {
|
||||
title: this.title
|
||||
title: this.title,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@@ -39,7 +39,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
...mapState(["activeContainers"]),
|
||||
...mapGetters(["allContainersById"])
|
||||
...mapGetters(["allContainersById"]),
|
||||
},
|
||||
watch: {
|
||||
id() {
|
||||
@@ -47,7 +47,7 @@ export default {
|
||||
},
|
||||
allContainersById() {
|
||||
this.title = this.allContainersById[this.id].name;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<script>
|
||||
export default {
|
||||
props: [],
|
||||
name: "Default"
|
||||
name: "Default",
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
<h2 class="title is-6 is-marginless">Font size</h2>
|
||||
Modify the font size when viewing logs.
|
||||
|
||||
<b-dropdown v-model="size" aria-role="list" style="margin:-8px 10px 0">
|
||||
<b-dropdown v-model="size" aria-role="list" style="margin: -8px 10px 0;">
|
||||
<button class="button is-primary" type="button" slot="trigger">
|
||||
<span class="is-capitalized">{{ size }}</span>
|
||||
<span class="icon"><ion-icon name="ios-arrow-down"></ion-icon></span>
|
||||
@@ -69,7 +69,7 @@ export default {
|
||||
return {
|
||||
currentVersion: VERSION,
|
||||
nextRelease: null,
|
||||
hasUpdate: false
|
||||
hasUpdate: false,
|
||||
};
|
||||
},
|
||||
async created() {
|
||||
@@ -79,13 +79,13 @@ export default {
|
||||
},
|
||||
metaInfo() {
|
||||
return {
|
||||
title: "Settings"
|
||||
title: "Settings",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
updateSetting: "UPDATE_SETTING"
|
||||
})
|
||||
updateSetting: "UPDATE_SETTING",
|
||||
}),
|
||||
},
|
||||
computed: {
|
||||
...mapState(["settings"]),
|
||||
@@ -96,11 +96,11 @@ export default {
|
||||
},
|
||||
set(value) {
|
||||
this.updateSetting({ [name]: value });
|
||||
}
|
||||
},
|
||||
};
|
||||
return map;
|
||||
}, {})
|
||||
}
|
||||
}, {}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
|
||||
@@ -14,7 +14,7 @@ const state = {
|
||||
activeContainers: [],
|
||||
searchFilter: null,
|
||||
isMobile: mql.matches,
|
||||
settings: storage.get(DOZZLE_SETTINGS_KEY)
|
||||
settings: storage.get(DOZZLE_SETTINGS_KEY),
|
||||
};
|
||||
|
||||
const mutations = {
|
||||
@@ -36,7 +36,7 @@ const mutations = {
|
||||
UPDATE_SETTINGS(state, newValues) {
|
||||
state.settings = { ...state.settings, ...newValues };
|
||||
storage.set(DOZZLE_SETTINGS_KEY, state.settings);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const actions = {
|
||||
@@ -55,7 +55,7 @@ const actions = {
|
||||
},
|
||||
UPDATE_SETTING({ commit }, setting) {
|
||||
commit("UPDATE_SETTINGS", setting);
|
||||
}
|
||||
},
|
||||
};
|
||||
const getters = {
|
||||
activeContainersById(state) {
|
||||
@@ -69,18 +69,18 @@ const getters = {
|
||||
map[obj.id] = obj;
|
||||
return map;
|
||||
}, {});
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const es = new EventSource(`${BASE_PATH}/api/events/stream`);
|
||||
es.addEventListener("containers-changed", e => setTimeout(() => store.dispatch("FETCH_CONTAINERS"), 1000), false);
|
||||
mql.addListener(e => store.commit("SET_MOBILE_WIDTH", e.matches));
|
||||
es.addEventListener("containers-changed", (e) => setTimeout(() => store.dispatch("FETCH_CONTAINERS"), 1000), false);
|
||||
mql.addListener((e) => store.commit("SET_MOBILE_WIDTH", e.matches));
|
||||
|
||||
const store = new Vuex.Store({
|
||||
state,
|
||||
getters,
|
||||
actions,
|
||||
mutations
|
||||
mutations,
|
||||
});
|
||||
|
||||
export default store;
|
||||
|
||||
@@ -3,5 +3,5 @@ export const DEFAULT_SETTINGS = {
|
||||
search: true,
|
||||
size: "medium",
|
||||
menuWidth: 15,
|
||||
smallerScrollbars: false
|
||||
smallerScrollbars: false,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user