lfmunoz/loggers.html

## loggers.html
<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">

    <title>Logging Configuration</title>
    <meta name="description" content="">
    <style type="text/css">
        /** GLOBAL **/

        :root {
            --nav-bg: #11232f;
            --nav-fg: #78797f;

            --main-bg: #e4e5e6;
            --app-bg: #fff;

            --primary: #3e8acc;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
        }

        body {
            background-color: var(--main-bg);
        }

        #app {
            font-family: "Avenir", Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-align: center;
            color: var(--main-color);
            background-color: var(--main-bg);
        }

    </style>
</head>

<body>
<!-- START OF APP -->
<div id="app">

    <div class="table-responsive">
        <h2 id="logs-page-heading">Logs</h2>
        <div v-if="loggers">
            <p>There are {{ loggers.length }} loggers.</p>
            <span>Filter</span> <input type="text" v-model="filtered" class="form-control">

            <table class="table table-sm table-striped table-bordered">
                <thead>
                <tr title="click to order">
                    <th v-on:click="changeOrder('name')"><span>Name</span></th>
                    <th v-on:click="changeOrder('level')"><span>Level</span></th>
                </tr>
                </thead>

                <tr v-for="logger in orderBy(filterBy(loggers, filtered), orderProp, reverse === true ? 1 : -1)" :key="logger.name">
                    <td><small>{{logger.name}}</small></td>
                    <td>
                        <button v-on:click="updateLevel(logger.name, 'TRACE')" :class="(logger.level==='TRACE') ? 'btn-primary' : 'btn-light'" class="btn btn-sm">TRACE</button>
                        <button v-on:click="updateLevel(logger.name, 'DEBUG')" :class="(logger.level==='DEBUG') ? 'btn-success' : 'btn-light'" class="btn btn-sm">DEBUG</button>
                        <button v-on:click="updateLevel(logger.name, 'INFO')" :class="(logger.level==='INFO') ? 'btn-info' : 'btn-light'" class="btn btn-sm">INFO</button>
                        <button v-on:click="updateLevel(logger.name, 'WARN')" :class="(logger.level==='WARN') ? 'btn-warning' : 'btn-light'" class="btn btn-sm">WARN</button>
                        <button v-on:click="updateLevel(logger.name, 'ERROR')" :class="(logger.level==='ERROR') ? 'btn-danger' : 'btn-light'" class="btn btn-sm">ERROR</button>
                        <button v-on:click="updateLevel(logger.name, 'OFF')" :class="(logger.level==='OFF') ? 'btn-secondary' : 'btn-light'" class="btn btn-sm">OFF</button>
                    </td>
                </tr>
            </table>
        </div>

    </div>


<!-- END OF APP -->
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js" integrity="sha256-T/f7Sju1ZfNNfBh7skWn0idlCBcI3RwdLSS4/I7NQKQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/vue2-filters/dist/vue2-filters.min.js"></script>


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.14.0/bootstrap-vue.min.js" integrity="sha256-5htjRAi8a4C4wUalX1rQ59+RIZgrq0UImHrtVgD6XgQ=" crossorigin="anonymous"></script>-->

<script>
    //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // Configuration and Constants
    //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    //const API_URL = 'http://localhost:8085/api';
    const API_URL = 'api';

    function changeLevel(name, configuredLevel) {
        return axios.post('actuator/loggers/' + name, { configuredLevel });
    }

    function findAll() {
        return axios.get('actuator/loggers');
    }

    //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // Vuejs Main
    //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Vue.config.productionTip = false
    new Vue({
        el: '#app',
        mixins: [Vue2Filters.mixin],
        //-----------------------------------------------------------------------------------
        // Data
        //-----------------------------------------------------------------------------------
        data: {
                        loggers: [],
                filtered: '',
                orderProp: 'name',
                reverse: false,
        },
        //-----------------------------------------------------------------------------------
        // Methods
        //-----------------------------------------------------------------------------------
        methods: {

           init() {
                findAll()
                .then(response => {
                  this.extractLoggers(response);
                });
            },

            updateLevel(name, level) {
                changeLevel(name, level)
                .then(() => {
                  this.init();
                });
            },

            changeOrder(orderProp) {
              this.orderProp = orderProp
              this.reverse = !this.reverse
            },

            extractLoggers(response) {
              this.loggers = [];
              if (response.data) {
                for (const key of Object.keys(response.data.loggers)) {
                  const logger = response.data.loggers[key];
                  this.loggers.push({ name: key, level: logger.effectiveLevel });
                }
              }
            }

         },
        //-----------------------------------------------------------------------------------
        // COMPUTED
        //-----------------------------------------------------------------------------------
        computed: { },
        //-----------------------------------------------------------------------------------
        // MOUNTED
        //-----------------------------------------------------------------------------------
        mounted() {
            this.init()
        }
    });

</script>

</body>

</html>
	<!doctype html>

	<html lang="en">
	<head>
	<meta charset="utf-8">

	<title>Logging Configuration</title>
	<meta name="description" content="">
	<style type="text/css">
	/ GLOBAL /

	:root {
	--nav-bg: #11232f;
	--nav-fg: #78797f;

	--main-bg: #e4e5e6;
	--app-bg: #fff;

	--primary: #3e8acc;
	--success: #28a745;
	--info: #17a2b8;
	--warning: #ffc107;
	--danger: #dc3545;
	}

	body {
	background-color: var(--main-bg);
	}

	#app {
	font-family: "Avenir", Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: var(--main-color);
	background-color: var(--main-bg);
	}

	</style>
	</head>

	<body>
	<!-- START OF APP -->
	<div id="app">

	<div class="table-responsive">
	<h2 id="logs-page-heading">Logs</h2>
	<div v-if="loggers">
	<p>There are {{ loggers.length }} loggers.</p>
	<span>Filter</span> <input type="text" v-model="filtered" class="form-control">

	<table class="table table-sm table-striped table-bordered">
	<thead>
	<tr title="click to order">
	<th v-on:click="changeOrder('name')"><span>Name</span></th>
	<th v-on:click="changeOrder('level')"><span>Level</span></th>
	</tr>
	</thead>

	<tr v-for="logger in orderBy(filterBy(loggers, filtered), orderProp, reverse === true ? 1 : -1)" :key="logger.name">
	<td><small>{{logger.name}}</small></td>
	<td>
	<button v-on:click="updateLevel(logger.name, 'TRACE')" :class="(logger.level==='TRACE') ? 'btn-primary' : 'btn-light'" class="btn btn-sm">TRACE</button>
	<button v-on:click="updateLevel(logger.name, 'DEBUG')" :class="(logger.level==='DEBUG') ? 'btn-success' : 'btn-light'" class="btn btn-sm">DEBUG</button>
	<button v-on:click="updateLevel(logger.name, 'INFO')" :class="(logger.level==='INFO') ? 'btn-info' : 'btn-light'" class="btn btn-sm">INFO</button>
	<button v-on:click="updateLevel(logger.name, 'WARN')" :class="(logger.level==='WARN') ? 'btn-warning' : 'btn-light'" class="btn btn-sm">WARN</button>
	<button v-on:click="updateLevel(logger.name, 'ERROR')" :class="(logger.level==='ERROR') ? 'btn-danger' : 'btn-light'" class="btn btn-sm">ERROR</button>
	<button v-on:click="updateLevel(logger.name, 'OFF')" :class="(logger.level==='OFF') ? 'btn-secondary' : 'btn-light'" class="btn btn-sm">OFF</button>
	</td>
	</tr>
	</table>
	</div>

	</div>


	<!-- END OF APP -->
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ=" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js" integrity="sha256-T/f7Sju1ZfNNfBh7skWn0idlCBcI3RwdLSS4/I7NQKQ=" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js" type="text/javascript"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue2-filters/dist/vue2-filters.min.js"></script>


	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
	<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.14.0/bootstrap-vue.min.js" integrity="sha256-5htjRAi8a4C4wUalX1rQ59+RIZgrq0UImHrtVgD6XgQ=" crossorigin="anonymous"></script>-->

	<script>
	//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	// Configuration and Constants
	//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

	//const API_URL = 'http://localhost:8085/api';
	const API_URL = 'api';

	function changeLevel(name, configuredLevel) {
	return axios.post('actuator/loggers/' + name, { configuredLevel });
	}

	function findAll() {
	return axios.get('actuator/loggers');
	}

	//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	// Vuejs Main
	//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Vue.config.productionTip = false
	new Vue({
	el: '#app',
	mixins: [Vue2Filters.mixin],
	//-----------------------------------------------------------------------------------
	// Data
	//-----------------------------------------------------------------------------------
	data: {
	loggers: [],
	filtered: '',
	orderProp: 'name',
	reverse: false,
	},
	//-----------------------------------------------------------------------------------
	// Methods
	//-----------------------------------------------------------------------------------
	methods: {

	init() {
	findAll()
	.then(response => {
	this.extractLoggers(response);
	});
	},

	updateLevel(name, level) {
	changeLevel(name, level)
	.then(() => {
	this.init();
	});
	},

	changeOrder(orderProp) {
	this.orderProp = orderProp
	this.reverse = !this.reverse
	},

	extractLoggers(response) {
	this.loggers = [];
	if (response.data) {
	for (const key of Object.keys(response.data.loggers)) {
	const logger = response.data.loggers[key];
	this.loggers.push({ name: key, level: logger.effectiveLevel });
	}
	}
	}

	},
	//-----------------------------------------------------------------------------------
	// COMPUTED
	//-----------------------------------------------------------------------------------
	computed: { },
	//-----------------------------------------------------------------------------------
	// MOUNTED
	//-----------------------------------------------------------------------------------
	mounted() {
	this.init()
	}
	});

	</script>

	</body>

	</html>