<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-good-table@2.19.3/dist/vue-good-table.min.css"
        integrity="sha256-xltCgYXRolPa/qWvt82I4qxUBcQ96d1boWhO6C6KChg=" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css"
        integrity="sha256-CAI/7ThhltsmP2L2zKBYa7FknB3ZwFbD0nqL8FCdxdc=" crossorigin="anonymous" />
    <link rel="icon" href="asset/naas_fav" />
    <title>Naas | Automation Manager</title>
    <style>
        #cs_loader_wrap {
            display: flex;
            justify-content: center;
            flex-direction: column;
            height: 100vh;
            width: 100vw;
            position: absolute;
            background-color: white;
            z-index: 4210;
        }

        #cs_logo_wrap {
            display: flex;
            width: 20vw;
            border-radius: 50%;
            margin: 0 auto;
        }

        #cs_logo_loading {
            display: flex;
            margin: auto;
            opacity: 1;
        }

        #cs_spinner_loading {
            width: 20vw;
            height: 20vw;
            position: absolute;
            border-top: 5px solid #3edb7c;
            border-right: 1px solid rgba(0, 0, 0, 0);
            border-left: 1px solid rgba(0, 0, 0, 0);
            border-radius: 50%;
            animation: spin-bot 1s ease-in-out infinite;
            z-index: 4213;
        }

        @keyframes spin-bot {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
    <script type="module">
        import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js';
        import VueGoodTablePlugin from 'https://cdn.jsdelivr.net/npm/vue-good-table@2.19.3/dist/vue-good-table.esm.js';

        Vue.use(VueGoodTablePlugin);
        const load = (path) => {
            return new Promise((resolve, reject) => {
                const xobj = new XMLHttpRequest();
                xobj.overrideMimeType("application/json");
                xobj.open('GET', path, true);
                xobj.onreadystatechange = function () {
                    if (xobj.readyState == 4 && xobj.status == "200") {
                        resolve(JSON.parse(xobj.responseText));
                    }
                };
                xobj.send(null);
            });
        };
        const app = new Vue({
            el: '#app',
            data: {
                filter: '',
                loading: true,
                columns_logs: [
                    {
                        label: 'Date',
                        field: 'asctime',
                    },
                    {
                        label: 'Uuid',
                        field: 'id',
                    },
                    {
                        label: 'Type',
                        field: 'type',
                    },
                    {
                        label: 'Status',
                        field: 'status',
                    },
                    {
                        label: 'File',
                        field: 'filepath',
                    },
                    {
                        label: 'Error',
                        field: 'error',
                    },
                ],
                columns_tasks: [
                    {
                        label: 'Date',
                        field: 'lastUpdate',
                    },
                    {
                        label: 'Last uuid',
                        field: 'id',
                    },
                    {
                        label: 'Job',
                        field: 'path',
                    },
                    {
                        label: 'Type',
                        field: 'type',
                    },
                    {
                        label: 'Status',
                        field: 'status',
                    },
                    {
                        label: 'Last duration',
                        field: 'lastRun',
                    },
                    {
                        label: 'Total duration',
                        field: 'totalRun',
                    },
                    {
                        label: 'Value',
                        field: 'value',
                    },

                ],
                env: {},
                logs: [],
                totalRecords: 0,
                tasks: []
            },
            methods: {
                getUrl: function (value, type) {
                    let urlList = window.location.href.split('/');
                    urlList.pop()
                    let newUrl = `${urlList.join('/')}`
                    if (type === 'notebook') {
                        newUrl = `${newUrl}/notebook/${value}`
                    } else {
                        newUrl = `${newUrl}/asset/${value}`
                    }
                    return newUrl
                },
                load_data: function () {
                    const all_loads = [];

                    all_loads.push(load('env').then((response) => {
                        if (response && !response.error) {
                            try {
                                this.env = response;
                            } catch (err) {
                                console.error(err);
                            }
                        }
                    }));
                    all_loads.push(load('job').then((response) => {
                        if (response && !response.error) {
                            try {
                                this.tasks = response;
                            } catch (err) {
                                console.error(err);
                            }
                        }
                    }));
                    all_loads.push(load('log').then((response) => {
                        if (response && !response.error) {
                            try {
                                console.log('response', response);
                                this.logs = response.data;
                                // this.totalRecords = res.totalRecords;
                            } catch (err) {
                                console.error(err);
                            }
                        }
                    }));
                    return Promise.all(all_loads);
                },
                setFilter: function (filter) {
                    this.filter = filter;
                },
                reload_data: function () {
                    this.loading = true;
                    this.load_data().then(() => {
                        this.loading = false;
                    });
                },
                linkTojup: function (link) {
                    const partial = link.replace('/home/brain', 'ftp');
                    return `${this.env.JUPYTERHUB_URL}/user/${this.env.JUPYTERHUB_USER}/lab/workspaces/auto-C/tree/${partial}`;
                },
                go_bob: function () {
                    window.open(this.env.PUBLIC_BOB, '_blank');
                },
                go_jup: function () {
                    window.open(this.env.JUPYTERHUB_URL, '_blank');
                }
            },
            created: function () {
                const uri = window.location.href.split('?');
                if (uri.length == 2) {
                    const vars = uri[1].split('&');
                    const getVars = {};
                    let tmp = '';
                    vars.forEach(function (v) {
                        tmp = v.split('=');
                        if (tmp.length == 2){
                            getVars[tmp[0]] = decodeURIComponent(tmp[1]);
                        }
                    });
                    // console.log('getVars', getVars);
                    if (getVars["filter"]) {
                        this.filter = getVars["filter"]
                    }
                }
                this.load_data().then(() => {
                    this.loading = false;
                });
            }
        });
    </script>
</head>

<body>
    <div id="app" class="w-full">
        <div id="cs_loader_wrap" v-if="loading">
            <div id="cs_logo_wrap">
                <img id="cs_logo_loading" src="asset/naas_logo"/>
                <div id="cs_spinner_loading"></div>
            </div>
        </div>
        <nav class="bg-white shadow-lg">
            <div class="md:flex items-center justify-between py-2 px-8 md:px-12">
                <div class="flex justify-between items-center">
                    <div class="mb-2 sm:mb-0 flex flex-row
                    ">
                        <div class="h-50 w-50 self-center mr-2">
                            <img  src="asset/naas_logo" width="50" height="50"/>
                        </div>
                        <div>
                            <a href="/home"
                                class="text-2xl no-underline text-grey-darkest hover:text-blue-dark font-sans font-bold">Naas</a><br>
                            <span class="text-xs text-grey-dark">Automation manager</span>
                        </div>
                    </div>
                    <div class="md:hidden">
                        <button type="button"
                            class="block text-gray-800 hover:text-gray-700 focus:text-gray-700 focus:outline-none">
                            <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
                                <path class="hidden"
                                    d="M16.24 14.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 0 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12l2.83 2.83z" />
                                <path
                                    d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z" />
                            </svg>
                        </button>
                    </div>
                </div>
                <div class="flex flex-col md:flex-row hidden md:block -mx-2">
                    <a href="#" v-on:click="reload_data()"
                        class="text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium py-2 px-2 md:mx-2">Reload</a>
                </div>
            </div>
        </nav>
        <div class="md:px-32 py-8 w-full">
            <div class="flex items-center justify-center w-100">
                <div class="relative text-gray-600 w-1/4">
                    <input type="text" name="search" v-model="filter" placeholder="Search"
                        class="bg-gray-700 w-full text-white h-10 px-5 pr-10 rounded-full text-sm focus:outline-none">
                    <button type="submit" class="absolute right-0 top-0 mt-3 mr-4">
                        <svg v-if="filter == ''" class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px"
                            viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;"
                            xml:space="preserve" width="512px" height="512px">
                            <path
                                d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z" />
                        </svg>
                        <svg v-if="filter != ''" @click="filter= ''" class="h-4 w-4 fill-current" viewBox="0 0 20 20">
                            <path
                                d="M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z">
                            </path>
                        </svg>
                    </button>
                </div>
            </div>
            <h2 class="text-3xl font-semibold text-gray-800 md:text-4xl">Your current <span
                    class="text-indigo-600">Jobs</span></h2>
            <vue-good-table :columns="columns_tasks" :rows="tasks" theme="black-rhino" :search-options="{
                    enabled: true,
                    externalQuery: filter
                }" :pagination-options="{
                    enabled: filter === '',
                    mode: 'records',
                    perPage: 10,
                    position: 'top',
                    perPageDropdown: [5, 15, 20],
                    dropdownAllowAll: true,
                    nextLabel: 'next',
                    prevLabel: 'prev',
                    rowsPerPageLabel: 'Rows per page',
                    ofLabel: 'of',
                    pageLabel: 'page', // for 'pages' mode
                    allLabel: 'All',
                }">
                <template slot="table-row" slot-scope="props">
                    <span v-if="props.column.field == 'status'">
                        <span v-if="props.row.status === 'healthy'"
                            style="font-weight: bold; color: green;">{{props.row.status}}</span>
                        <span
                            v-else-if="props.row.status === 'error' || props.row.status === 'exception' || props.row.status === 'not_found'"
                            style="font-weight: bold; color: red;">{{props.row.status}}</span>
                        <span v-else style="font-weight: bold; color: orange;">{{props.row.status}}</span>
                    </span>
                    <span v-else-if="props.column.field == 'value'">
                        <a style="font-weight: bold; color: blue;"
                            v-if="props.row.type == 'asset' || props.row.type == 'notebook'"
                            :href="getUrl(props.row.value,props.row.type)">{{props.formattedRow[props.column.field]}}</a>
                        <span v-else>{{props.formattedRow[props.column.field]}}</span>
                    </span>
                    <span v-else-if="props.column.field == 'id'">
                        <a href="#" style="font-weight: bold; color: blue;"
                            v-on:click="setFilter(props.formattedRow[props.column.field])">{{props.formattedRow[props.column.field]}}</a>
                    </span>
                    <span v-else>
                        {{props.formattedRow[props.column.field]}}
                    </span>
                </template>
            </vue-good-table>
            <h2 class="text-3xl pt-4 font-semibold text-gray-800 md:text-4xl">Discover what <span
                    class="text-indigo-600">happened</span></h2>
            <vue-good-table :columns="columns_logs" :rows="logs" theme="black-rhino" :search-options="{
                enabled: true,
                externalQuery: filter
            }" :sort-options="{
                enabled: true,
                initialSortBy: {field: 'asctime', type: 'desc'}
            }" :pagination-options="{
                enabled: true,
                mode: 'records',
                perPage: 15,
                position: 'top',
                perPageDropdown: [5, 10, 20],
                dropdownAllowAll: true,
                nextLabel: 'next',
                prevLabel: 'prev',
                rowsPerPageLabel: 'Rows per page',
                ofLabel: 'of',
                pageLabel: 'page', // for 'pages' mode
                allLabel: 'All',
            }">
                <template slot="table-row" slot-scope="props">
                    <span v-if="props.column.field == 'id'">
                        <a href="#" style="font-weight: bold; color: blue;"
                            v-on:click="setFilter(props.formattedRow[props.column.field])">{{props.formattedRow[props.column.field]}}</a>
                    </span>
                    <span v-else>
                        {{props.formattedRow[props.column.field]}}
                    </span>
                </template>
            </vue-good-table>
        </div>
        <div class="grid grid-cols-4 gap-4">
            <div class="col-start-2 px-6 py-4" v-if="env && env.version">
                <h4 class="text-3xl font-semibold text-gray-800 md:text-4xl">Bob current <span
                        class="text-indigo-600">Version</span></h4>
                <span
                    class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{{env.version.version}}</span>
                <span
                    class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{{env.version.versionName}}</span>
            </div>
        </div>
    </div>
    </div>
</body>

</html>