<template>
    <section id="connections" class="plugin">
        <table class="table table-sm table-borderless margin-bottom">
            <thead>
                <tr>
                    <th scope="col">TCP CONNECTIONS</th>
                    <th scope="col" class="text-end"></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td scope="row">Listen</td>
                    <td class="text-end">{{ listen }}</td>
                </tr>
                <tr>
                    <td scope="row">Initiated</td>
                    <td class="text-end">{{ initiated }}</td>
                </tr>
                <tr>
                    <td scope="row">Established</td>
                    <td class="text-end">{{ established }}</td>
                </tr>
                <tr>
                    <td scope="row">Terminated</td>
                    <td class="text-end">{{ terminated }}</td>
                </tr>
                <tr>
                    <td scope="row">Tracked</td>
                    <td class="text-end" :class="getDecoration('nf_conntrack_percent')">
                        {{ tracked.count }}/{{ tracked.max }}
                    </td>
                </tr>
            </tbody>
        </table>
    </section>
</template>

<script>
export default {
	props: {
		data: {
			type: Object,
		},
	},
	computed: {
		stats() {
			return this.data.stats["connections"];
		},
		view() {
			return this.data.views["connections"];
		},
		listen() {
			return this.stats["LISTEN"];
		},
		initiated() {
			return this.stats["initiated"];
		},
		established() {
			return this.stats["ESTABLISHED"];
		},
		terminated() {
			return this.stats["terminated"];
		},
		tracked() {
			return {
				count: this.stats["nf_conntrack_count"],
				max: this.stats["nf_conntrack_max"],
			};
		},
	},
	methods: {
		getDecoration(value) {
			if (this.view[value] === undefined) {
				return;
			}
			return this.view[value].decoration.toLowerCase();
		},
	},
};
</script>