FE_CPONE/test/vuex/one-ui-replication-status/components/oneReplicationStatus.vue

<template>
    <v-layout>

        <v-flex xs12>
            <v-card>

                <!-- Toolbar -->
                <v-toolbar color="blue darken-1" dark scroll-off-screen scroll-target="#scrolling-techniques">

                    <v-toolbar-title class="headline font-weight-bold">Replication Status</v-toolbar-title>
                    <v-spacer></v-spacer>
                    <v-chip v-if="is_error" label color="error" dark>ERROR</v-chip>
                    <v-btn color="success" small @click="startSlave()" dark>
                        Start Slave
                    </v-btn>
                </v-toolbar>
                <!-- End Toolbar -->

                <div id="scrolling-techniques" class="scroll-y" :style="{ 'height': windowHeight }">

                    <!-- data tabel -->
                    <v-data-table :items="vreplication" :loading="isLoading" hide-actions>
                        <v-progress-linear v-slot:progress color="blue" indeterminate></v-progress-linear>
                        <template v-slot:no-data>
                            <v-alert :value="true" color="error" icon="warning">
                            Belum ditemukan data
                            </v-alert>
                        </template>
                        <template v-slot:items="props">
                            <tr>
                                <td>Master Host</td>
                                <td>:&nbsp;</td>
                                <td class="text-xs-left pa-2" @click="selectMe(props.item)">{{ props.item.Master_Host}}</td>
                            </tr>
                            <tr>
                                <td>Master Log File</td>
                                <td>:&nbsp;</td>
                                <td class="text-xs-left pa-2" @click="selectMe(props.item)">{{ props.item.Master_Log_File }}</td>
                            </tr>
                            <tr>
                                <td>Relay Log File</td>
                                <td>:&nbsp;</td>
                                <td class="text-xs-left pa-2" @click="selectMe(props.item)">{{ props.item.Relay_Log_File }}</td>
                            </tr>
                            <tr>
                                <td>Slave IO Running</td>
                                <td>:&nbsp;</td>
                                <td class="text-xs-left pa-2" @click="selectMe(props.item)">{{ props.item.Slave_IO_Running }}</td>
                            </tr>
                            <tr>
                                <td>Slave SQL Running</td>
                                <td>:&nbsp;</td>
                                <td class="text-xs-left pa-2" @click="selectMe(props.item)">{{ props.item.Slave_SQL_Running }}</td>
                            </tr>
                            <tr>
                                <td>Exec Master Log Pos</td>
                                <td>:&nbsp;</td>
                                <td class="text-xs-left pa-2" @click="selectMe(props.item)">{{ props.item.Exec_Master_Log_Pos }}</td>
                            </tr>
                            <tr>
                                <td>Seconds Behind Master</td>
                                <td>:&nbsp;</td>
                                <td class="text-xs-left pa-2" @click="selectMe(props.item)">{{ props.item.Seconds_Behind_Master }}</td>
                            </tr>
                            <tr>
                                <td>Last IO Errno</td>
                                <td>:&nbsp;</td>
                                <td class="text-xs-left pa-2" @click="selectMe(props.item)">{{ props.item.Last_IO_Errno }}</td>
                            </tr>
                            <tr>
                                <td>Last IO Error</td>
                                <td>:&nbsp;</td>
                                <td class="text-xs-left pa-2" @click="selectMe(props.item)">{{ props.item.Last_IO_Error }}</td>
                            </tr>
                            <tr>
                                <td>Last SQL Errno</td>
                                <td>:&nbsp;</td>
                                <td class="text-xs-left pa-2" @click="selectMe(props.item)">{{ props.item.Last_SQL_Errno }}</td>
                            </tr>
                            <tr>
                                <td>Last SQL Error</td>
                                <td>:&nbsp;</td>
                                <td class="text-xs-left pa-2" @click="selectMe(props.item)">{{ props.item.Last_SQL_Error }}</td>
                            </tr>
                        </template>
                    </v-data-table>
                    <!-- end data tabel -->

                </div>
                <v-divider></v-divider>
                <!-- pagination -->
                <v-flex xs12 class="text-xs-left pt-3 pb-5">

                </v-flex>
                <!-- end pagination -->
            </v-card>
        </v-flex>
    </v-layout>
</template>

<style scoped>
.searchbox .v-input.v-text-field .v-input__slot {
    min-height: 60px;
}

.searchbox .v-btn {
    min-height: 60px;
}

table.v-table tbody td,
table.v-table tbody th {
    height: 40px;
}

table.v-table thead tr {
    height: 40px;
}

.textinput {
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    background-color: white;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding-left: 40px;
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 5px;
    box-sizing: border-box;
    border: 1px solid #607d8b;

}

.textinput:focus {
    width: 100%;
}

.textinput:focus::-webkit-input-placeholder {
    color: transparent;
}

.textinput:focus::-moz-placeholder {
    color: transparent;
}

.textinput:-moz-placeholder {
    color: transparent;
}

.boxoutline {
    color: red;
    border: 1px solid red;
    justify-content: center;
    height: 45px;
    line-height: 45px;
    padding-left: 10px;
    background: #ffffff;
    font-size: 14px;
    font-weight: 500;
    border-radius: 1px
}

.boxoutline:hover {
    background: rgba(0, 0, 0, 0.07) !important;
    font-size: 15px;
    font-weight: 700;
}

.boxsolid {
    color: #ffffff;
    border: 1px solid #ffffff;
    justify-content: center;
    height: 45px;
    line-height: 45px;
    padding-left: 10px;
    background: #f44336;
    font-size: 14px;
    font-weight: 500;
    border-radius: 1px
}

.boxsolid:hover {
    background: #f44336de;
    font-size: 15px;
    font-weight: 700;
}

.scroll-container {
    scroll-padding: 50px 0 0 50px;
}

::-webkit-scrollbar {
    width: 7px;
}

/* this targets the default scrollbar (compulsory) */

::-webkit-scrollbar-track {
    background-color: #73baf3;
}

/* the new scrollbar will have a flat appearance with the set background color */

::-webkit-scrollbar-thumb {
    background-color: #2196f3;
}

/* this will style the thumb, ignoring the track */

::-webkit-scrollbar-button {
    background-color: #0079da;
}

/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

::-webkit-scrollbar-corner {
    background-color: black;
}

/* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
</style>

<script>
module.exports = {
    data() {
        return {
            windowHeight: window.innerHeight - ((38/100)*window.outerHeight) + 'px'
        };
    },
    mounted() {
        this.$store.dispatch("replication/status")
    },
    computed: {
        vreplication() {
            return this.$store.state.replication.replication
        },
        isLoading() {
            return this.$store.state.replication.search_status
        },
        is_error: {
            get() {
                select = this.$store.state.replication.selected_replication
                if (select.Slave_IO_Running === "No") {
                    return true
                }
                if (select.Slave_SQL_Running === "No") {
                    return true
                }
                if (select.Last_IO_Errno != "0") {
                    return true
                }
                if (select.Last_SQL_Errno != "0") {
                    return true
                }
            }
        }
    },
    methods: {
        // isSelected(p) {
        //     return p.Slave_IO_State == this.$store.state.replication.selected_replication.Slave_IO_State
        // },
        selectMe(selected) {
            this.$store.commit("replication/update_selected_replication", selected)
        },
        startSlave() {
            this.$store.dispatch("replication/start_slave")
            this.$store.dispatch("replication/status")
        }
    },
    watch: {

    }
}
</script>