<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/FiniqAppMasterPage.Master" CodeBehind="MDI.aspx.vb" Inherits="FinIQWebApp.MDI" %>

<%@ Register Src="~/FinIQ_User_Controls/DateControl.ascx" TagName="DateControl" TagPrefix="uc1" %>

<%@ Register Src="~/FinIQ_User_Controls/DateTime_picker/UC_DateTime.ascx" TagPrefix="uc1" TagName="UC_DateTime" %>


<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js" type="text/javascript"></script>
    <%--<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@latest/dist/chartjs-plugin-streaming.min.js"
        type="text/javascript"></script>--%>
    <%--<script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.5.0/chartjs-plugin-streaming.min.js"></script>--%>
    <script src="js/chartjs-plugin-streaming.min.js"></script>
    <%--<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>--%>
    <script src="../FinIQJS/conformationBox.js"></script>
    <%--<script src="js/SortTable.js"></script>--%>
   <%-- <script src="js/sort-table.js"></script>--%>
    <link rel="stylesheet" href="css/pagination.css" />
    <link rel="stylesheet" href="css/jquery.datetimepicker.css" />
    <script src="js/pagination.js"></script>
    <%--    <script src="js/pagination.min.js"></script>--%>
    <script src="js/jquery.datetimepicker.full.js"></script>
    <script src="js/jquery.datetimepicker.full.min.js"></script>
    <script src="js/jquery.datetimepicker.js"></script>
    <script src="../FinIQJS/SortFilter_Grid.js"></script>
    <%--<script src="js/table-sort.js"></script>--%>
    <style type="text/css">
        html, body {
            background-color: #f5f5f5;
            /*overflow-y:hidden;*/
        }

        h1,
        h2,
        h3 {
            color: #212529;
            font-size: 18px;/*change font size from 14px*/
            padding: 10px;
            margin-top: 0px;
            background-color: rgba(0, 0, 0, .075);
            margin-bottom: 0px;
        }

        .imgRefresh {
            background-image: url(../App_Resources/refresh_v2.png);
            width: 28px;
            height: 28px;
            background-color: transparent;
            border: none;
            cursor: pointer;
            margin-block: -6px;
        }

        .brdr {
            border-bottom: 1px solid lightgrey;
            height: 40px;
        }

        .main-container {
            /*padding: 20px;*/
            margin-top: 38px !important;
            display: grid;
            box-sizing: border-box;
            /*background: #F5F5F5;*/
            font-size: 12px;
            font-family: Verdana, Helvetica, sans-serif, Montserrat !important;
            font-weight: normal;
            letter-spacing: normal;
            text-transform: none;
            word-spacing: normal;
            margin: 0px auto;
            button-width: 99%;
            float: left;
            padding-bottom: 20px !important;
            /*overflow-y:hidden;*/
        }

        .container1 {
            display: grid;
            grid-template-columns: 12fr 18fr 10fr;
            /*grid-template-rows: 1fr 1fr;*/
            grid-template-areas: " div1 div2 div3 "" div1 div2 div4 ";
            width: 100%;
            grid-column-gap: 20px;
            grid-row-gap: 20px;
            margin-bottom: 20px;
        }

        .container {
            /*display: flex;*/
            display: grid;
            grid-template-columns: 85% 15%;
            grid-template-areas: " divReport divMI ";
            width: 100%;
            grid-column-gap: 20px;
        }

        .container2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-areas: " WaitStatisticsTable SQTable ";
            width: 100%;
            grid-column-gap: 20px;
            margin-bottom: 20px;
        }

        .container3 {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-areas: " DeadlockTable ";
            width: 100%;
            margin-bottom: 20px;
        }

        .container4 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-areas: " RFQTrend FragmentationTable  ";
            width: 100%;
            grid-column-gap: 20px;
            margin-bottom: 20px;
        }

        .container5 {
            display: grid;
            /*grid-template-columns: 1fr 2fr 1fr;*/
            grid-template-columns: 0.6fr 2fr 1.2fr;
            grid-template-areas: " OrphanTable DatabaseDetails_Table ActiveSessionsTable ";
            width: 100%;
            grid-column-gap: 20px;
            margin-bottom: 20px;
        }


        .RFQTrend {
            grid-area: RFQTrend;
            padding: 10px;
            background-color: #f5f5f5;
            box-shadow: 7px 7px 10px #e6e6e6, -5px -5px 20px #ffffff;
            border-radius: 1.5rem;
        }

        /*Empty {
                    position: relative;
                    grid-area: Empty;
                    padding: 10px;
                    background-color: #f5f5f5;
                    box-shadow: 7px 7px 10px #e6e6e6, -5px -5px 20px #ffffff;
                    border-radius: 1.5rem;
        }*/


        .Granularity_Table {
            grid-area: Granularity_Table;
            padding: 10px;
            background-color: #f5f5f5;
            box-shadow: 7px 7px 10px #e6e6e6, -5px -5px 20px #ffffff;
            border-radius: 1.5rem;
            position: relative;
        }
        /***************/
        .DatabaseDetails_Table {
            grid-area: DatabaseDetails_Table;
            padding: 10px;
            background-color: #f5f5f5;
            box-shadow: 7px 7px 10px #e6e6e6, -5px -5px 20px #ffffff;
            border-radius: 1.5rem;
            position: relative;
        }


        /****************/
        .OrphanTable {
            grid-area: OrphanTable;
            padding: 10px;
            background-color: #f5f5f5;
            box-shadow: 7px 7px 10px #e6e6e6, -5px -5px 20px #ffffff;
            border-radius: 1.5rem;
            position: relative;
        }

        .DeadlockTable {
            grid-area: DeadlockTable;
            padding: 10px;
            background-color: #f5f5f5;
            box-shadow: 7px 7px 10px #e6e6e6, -5px -5px 20px #ffffff;
            border-radius: 1.5rem;
            position: relative;
        }

        .WaitStatisticsTable {
            position: relative;
            grid-area: WaitStatisticsTable;
            padding: 10px;
            background-color: #f5f5f5;
            box-shadow: 7px 7px 10px #e6e6e6, -5px -5px 20px #ffffff;
            border-radius: 1.5rem;
			/* DBA-302 Added by Vrushali G, Dimpal on 24-08-2021 */
            /*max-width: 47vw;*/
        }

        .SQTable {
            position: relative;
            grid-area: SQTable;
            padding: 10px;
            background-color: #f5f5f5;
            box-shadow: 7px 7px 10px #e6e6e6, -5px -5px 20px #ffffff;
            border-radius: 1.5rem;
        }

        .FragmentationTable {
            position: relative;
            grid-area: FragmentationTable;
            padding: 10px;
            background-color: #f5f5f5;
            box-shadow: 7px 7px 10px #e6e6e6, -5px -5px 20px #ffffff;
            border-radius: 1.5rem;
        }

        .ActiveSessionsTable {
            grid-area: ActiveSessionsTable;
            padding: 10px;
            background-color: #f5f5f5;
            box-shadow: 7px 7px 10px #e6e6e6, -5px -5px 20px #ffffff;
            border-radius: 1.5rem;
            position: relative;
        }

        .div1 {
            grid-area: div1;
            background-color: #f5f5f5;
            box-shadow: 7px 7px 10px #e6e6e6, -5px -5px 20px #ffffff;
            border-radius: 1.5rem;
            padding: 10px;
        }

        .div2 {
            grid-area: div2;
            background-color: #f5f5f5;
            box-shadow: 7px 7px 10px #e6e6e6, -5px -5px 20px #ffffff;
            border-radius: 1.5rem;
            padding: 10px;
        }

        .div3 {
            grid-area: div3;
            background-color: #f5f5f5;
            box-shadow: 7px 7px 10px #e6e6e6, -5px -5px 20px #ffffff;
            border-radius: 1.5rem;
            padding: 10px;
        }

        .div4 {
            /*grid-area: div4;
                    background-color: #f5f5f5;
                    box-shadow: 7px 7px 10px #e6e6e6, -5px -5px 20px #ffffff;
                    border-radius: 1.5rem;
                    padding: 10px;*/
            grid-area: div4;
            grid-template-areas: " div41 div42 ";
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }


        .div41 {
            grid-area: div41;
            background-color: #f5f5f5;
            box-shadow: 7px 7px 10px #e6e6e6, -5px -5px 20px #ffffff;
            border-radius: 1.5rem;
            padding: 10px;
        }

        .div42 {
            grid-area: div42;
            background-color: #f5f5f5;
            box-shadow: 7px 7px 10px #e6e6e6, -5px -5px 20px #ffffff;
            border-radius: 1.5rem;
            padding: 10px;
        }


        .div21 {
            display: grid;
            background-color: #f5f5f5;
            border: none;
        }

        .divReport {
            grid-area: divReport;
            background-color: #f5f5f5;
            box-shadow: 7px 7px 10px #e6e6e6, -5px -5px 20px #ffffff;
            border-radius: 1.5rem;
            padding: 6px;
            border: 1px grey;
        }

        .divMI {
            grid-area: divMI;
            background-color: #f5f5f5;
            box-shadow: 7px 7px 10px #e6e6e6, -5px -5px 20px #ffffff;
            border-radius: 1.5rem;
            padding: 8px;
        }


        .filepathtextbox {
            padding-bottom: 10px;
        }

        #OrphanTable {
            border-collapse: collapse;
            width: 100%;
            /*height: 40%;*/
            text-align: center;
            padding: 10px;
            color: #4D4c4b;
            margin-bottom: 0;
        }
        
        /*****************/
        #DeadlockTable, #waitStatistics, #SQTable, #FragmentationTable, #OrphanTable, #Granularity_Table, #ActiveSessionsTable, #DatabaseDetails_Table{
            border-collapse: collapse;
            width: 100% !important;
            /*height: 40%;*/
            text-align: center;
            padding: 10px;
            color: #4D4c4b !important;
            margin-bottom: 0;
            display: block;
            overflow-x: auto !important;
            white-space: nowrap;

            /*width: fit-content;*/
            /*height: 100%;*/
        }

        #lblError {
            color: #2e8db3;
            font-size: 12px;
        }

        .instr {
            color: #757371;
            font-size: 12px;
            margin-bottom: 0px;
        }

        #table {
            display: block;
        }

        #SQTable td,
        #SQTable th {
            vertical-align: middle;
            padding: 0.5rem;
            border-top: 1px solid #dee2e6;
            text-align: left;
            width: 12%;
        }

        #SQTable th {
            font-weight: 700;
            font-size: 14px;
            color: #212529;
            text-align: center !important;
        }

        #SQTable thead th {
            vertical-align: middle;
            border-bottom: 1px solid rgba(255, 255, 255, .2)
        }

        #SQTable tfoot th {
            border-top-color: rgba(255, 255, 255, .2)
        }

        #SQTable {
            width: 100%;
            margin-bottom: 1rem;
            color: #212529;
        }

        #OrphanTable td,
        #OrphanTable th {
            vertical-align: middle;
            padding: 0.5rem;
            border-top: 1px solid #dee2e6;
            text-align: left;
        }

        #OrphanTable th {
            font-weight: 700;
            font-size: 14px;
            color: #212529;
            text-align: center !important;
        }

        #OrphanTable thead th {
            vertical-align: middle;
            border-bottom: 1px solid rgba(255, 255, 255, .2)
        }

        #OrphanTable tfoot th {
            border-top-color: rgba(255, 255, 255, .2)
        }

        #OrphanTable {
            width: 100%;
            margin-bottom: 1rem;
            color: #212529;
        }

        #DeadlockTable td,
        #DeadlockTable th {
            vertical-align: middle;
            padding: 0.5rem;
            border-top: 1px solid #dee2e6;
            text-align: left;
            width: 12%;
        }

        #DeadlockTable th {
            font-weight: 700;
            font-size: 14px;
            color: #212529;
            text-align: center !important;
        }

        #DeadlockTable thead th {
            vertical-align: middle;
            border-bottom: 1px solid rgba(255, 255, 255, .2)
        }

        #DeadlockTable tfoot th {
            border-top-color: rgba(255, 255, 255, .2)
        }

        #DeadlockTable {
            width: 100%;
            margin-bottom: 1rem;
            color: #212529;
        }



        #waitStatistics td,
        #waitStatistics th {
            vertical-align: middle;
            padding: 0.5rem;
            border-top: 1px solid #dee2e6;
            text-align: left;
            width: 15%;
        }

        #waitStatistics th {
            font-weight: 700;
            font-size: 14px;
            color: #212529;
            text-align: center !important;
        }

        #waitStatistics thead th {
            vertical-align: middle;
            border-bottom: 1px solid rgba(255, 255, 255, .2)
        }

        #waitStatistics tfoot th {
            border-top-color: rgba(255, 255, 255, .2)
        }

        #waitStatistics {
            width: 100%;
            margin-bottom: 1rem;
            color: #212529;
        }


        #FragmentationTable td,
        #FragmentationTable th {
            vertical-align: middle;
            padding: 0.5rem;
            border-top: 1px solid #dee2e6;
            text-align: left;
            width: 25%;
        }

        #FragmentationTable th {
            font-weight: 700;
            font-size: 14px;
            color: #212529;
            text-align: center !important;
        }

        #FragmentationTable thead th {
            vertical-align: middle;
            border-bottom: 1px solid rgba(255, 255, 255, .2)
        }

        #FragmentationTable tfoot th {
            border-top-color: rgba(255, 255, 255, .2)
        }

        #FragmentationTable {
            width: 100%;
            margin-bottom: 1rem;
            color: #212529;
        }


        #Granularity_Table td,
        #Granularity_Table th {
            vertical-align: middle;
            padding: 0.5rem;
            border-top: 1px solid #dee2e6;
            text-align: left;
            width: 25%;
        }

        #Granularity_Table th {
            font-weight: 700;
            font-size: 14px;
            color: #212529;
            text-align: center !important;
        }

        #Granularity_Table thead th {
            vertical-align: middle;
            border-bottom: 1px solid rgba(255, 255, 255, .2)
        }

        #Granularity_Table tfoot th {
            border-top-color: rgba(255, 255, 255, .2)
        }

        #Granularity_Table {
            width: 100%;
            margin-bottom: 1rem;
            color: #212529;
        }
        /****************/
        #DatabaseDetails_Table td,
        #DatabaseDetails_Table th {
            vertical-align: middle;
            padding: 0.5rem;
            border-top: 1px solid #dee2e6;
            text-align: left;
            width: 25%;
        }

        #DatabaseDetails_Table th {
            font-weight: 700;
            font-size: 14px;
            color: #212529;
            text-align: center !important;
        }

        #DatabaseDetails_Table thead th {
            vertical-align: middle;
            border-bottom: 1px solid rgba(255, 255, 255, .2)
        }

        #DatabaseDetails_Table tfoot th {
            border-top-color: rgba(255, 255, 255, .2)
        }

        #DatabaseDetails_Table {
            width: 100%;
            margin-bottom: 1rem;
            color: #212529;
        }




        /**********************/
        #ActiveSessionsTable td,
        #ActiveSessionsTable th {
            vertical-align: middle;
            padding: 0.5rem;
            border-top: 1px solid #dee2e6;
            text-align: left;
        }

        #ActiveSessionsTable th {
            font-weight: 700;
            font-size: 14px;
            color: #212529;
            text-align: center !important;
        }

        #ActiveSessionsTable thead th {
            vertical-align: middle;
            border-bottom: 1px solid rgba(255, 255, 255, .2)
        }

        #ActiveSessionsTable tfoot th {
            border-top-color: rgba(255, 255, 255, .2)
        }

        #ActiveSessionsTable {
            width: 100%;
            margin-bottom: 1rem;
            color: #212529;
        }

        .copyimg {
            width: 15px;
            height: 15px;
        }


        canvas#FragmentationChart {
            width: 100%;
            height: 63% !important;
            margin: auto;
            margin-top: 50px;
            margin-bottom: 20px;
        }

        .activeSessions {
            font-size: 70px;
            padding-top: 15px;
            margin: 0;
        }

        #deadlockMsg,
        #orphanMsg {
            font-size: 14px;
            text-align: center;
            padding-top: 20px;
            /*padding-left:60px;*/
        }

        .tooltip {
            position: relative;
            display: inline-block;
        }

            .tooltip .tooltiptext {
                visibility: hidden;
                width: 190px;
                background-color: rgba(0, 0, 0, 0.9);
                color: #fff;
                text-align: center;
                border-radius: 6px;
                padding: 5px 5px;
                /* Position the tooltip */
                position: absolute;
                z-index: 1;
                top: 100%;
                left: 50%;
                margin-left: -60px;
            }

            .tooltip:hover .tooltiptext {
                visibility: visible;
            }

        .tooltiptext tr th:nth-child(1) {
            width: 140px;
        }

        .tooltiptext tr th:nth-child(2) {
            width: 50px;
        }

        #snackbar, #snackbarBlank, #snackbarLogoutMail, #snackbarLogoutUsers, #snackbarLAU_no{
            visibility: hidden;
            min-width: 250px;
            margin-left: -125px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 2px;
            padding: 16px;
            position: fixed;
            z-index: 1;
            left: 50%;
            bottom: 30px;
            font-size: 17px;
        }
        /*****************/

        #snackBarFadedbg{
            visibility: hidden;
            position: fixed;
            top: 0;
            bottom : 0;
            left: 0;
            right : 0;
            background-color: #0000004f;
            z-index : 2;
        }
       
        #snackbarDisplayDetails{
            visibility: hidden;
            width: 600px;
            
            /*margin-left: -125px;
            margin-right: 125px;*/
            background-color: #d1d1d1;
            color: #fff;
            text-align: center;
            border-radius: 2px;
            padding: 20px;
            padding-bottom: 30px;
            position: fixed;
            z-index: 3;
            left: 35%;
            top: 30%;
            height: 375px;
            font-size: 17px;
            align-self:center;
           

        }
        



        #error, #snackbarReport, #snackbarMail{
            visibility: hidden;
            min-width: 250px;
            margin-left: -125px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 2px;
            padding: 16px;
            position: fixed;
            z-index: 1;
            left: 88%;
            bottom: 80%;
            font-size: 17px;
        }

            #snackbar.show, #snackbarBlank.show, #snackbarReport.show, #error.show, #snackbarMail.show, #snackbarLogoutMail.show, #snackbarLogoutUsers.show, #snackbarLAU_no.show{
                visibility: visible;
                -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
                animation: fadein 0.5s, fadeout 0.5s 2.5s;
            }

            /**************/
            #snackbarDisplayDetails.show{
                visibility: visible;
               
            }

             #snackBarFadedbg.show{
                 visibility: visible;
             }

            #snackbarDisplayDetails.hide, #snackBarFadedbg.hide{
                visibility: hidden;
               
            }
            #blurr.dimm{
                /*filter: blur(5px);
                -webkit-filter: blur(5px);
                -moz-filter: blur(5px);
                -o-filter: blur(5px);
                -ms-filter: blur(5px);*/
                opacity: 0.9 !important;
               /* background-color: gray;
                backdrop-filter: grayscale(0.5) opacity(0.8)*/
            }


        #fragInstr,
        #loginInstr,
        #dbavailInstr {
            display: none;
        }

        .dbAvailClass {
            height: 88px;
            width: 88px;
            margin-top: 15px;
        }

            .dbAvailClass:hover {
                box-shadow: 0px 0px 5px #ccc;
                border-radius: 100px;
            }

        .button {
            background-color: #4CAF50;
            /* Green */
            border: none;
            color: white;
            padding: 6px 13px;
            text-align: center;
            text-decoration: none !important;
            display: inline-block;
            font-size: 12px;
            margin: 4px 2px;
            cursor: pointer;
        }

        .durationText {
            background-color: white;
            color: black;
            border: 2px solid #B8B8B8;
            border-radius: .5rem;
            width: max-content;
            font-size: 12px;
            width: 70px !important;
            text-align: right;
        }

        #type, #scale-type {
            background-color: white;
            color: black;
            padding: 6px 13px;
            text-align: center;
            text-decoration: none !important;
            display: inline-block;
            font-size: 12px;
            margin: 4px 2px;
            border: 2px solid #B8B8B8;
            border-radius: .5rem;
            width: max-content;
        }

        .button1 {
            background-color: white;
            color: black;
            border: 2px solid #B8B8B8;
            border-radius: .5rem;
            width: max-content;
            /*888888
            background-color:#f6f6f6;*/
        }

            .button1 a {
                color: black;
            }

            .button1:hover {
                /*border: 2px solid #888888;*/
                /***************/
                   
                    color: #904c13b8 !important;
                    /* background-color: #f6f6f6 !important; */
                    background-color: #e7900b6b !important;
                   cursor: pointer !important;
                   /* box-shadow: 0px 0px 5px 2px #bc762699;*/
            }

        #SQdemoStart,
        #SQdemoStop,
        #RFQDate,
        #DLdemoStart,
        #DLdemoStop,
        #WSDemoStart,
        #WSDemoStop,
        #ReportStart,
        #Reportstop,
        #Recepients,
        #txtLogout,
        #FilterTableName,
        #Fragfilterpercent/*added filter in fragmentation*/
        {
            border: 2px solid #B8B8B8 !important;
            border-radius: .5rem;
            padding: 6px 12px !important;
            font-size: 12px;
            margin: 4px 2px;
        }

        #list1, #list2, #list3, #list5, #list, #list6,#list7 {
            position: absolute;
            bottom: 0px;
        }

        table {
            word-wrap: break-word;
            /*table-layout: fixed;*/
        }

        #DeadlockTable tr th:nth-child(1) {
            min-width: 120px !important;
        }

        #DeadlockTable tr th:nth-child(2) {
            /*white-space: pre-wrap;*/
            /* width: 240px; */
            min-width: 280px !important;
        }

        #DeadlockTable tr th:nth-child(3) {
            /*white-space: pre-wrap;*/
            /* width: 55px; */
            min-width: 100px !important;
        }

        #DeadlockTable tr th:nth-child(4) {
            /* width: 55px; */
            min-width: 55px !important;
        }

        #DeadlockTable tr th:nth-child(5) {
            /* width: 170px; */
            min-width: 120px !important;
        }

        #DeadlockTable tr th:nth-child(6) {
            /* width: 150px; */
            min-width: 120px !important;
        }

        #DeadlockTable tr th:nth-child(7) {
            /*white-space: pre-wrap;*/
            /* width: 150px; */
            min-width: 70px !important;
        }

        #DeadlockTable tr th:nth-child(8) {
            /* width: 180px; */
            min-width: 70px !important;
        }

        #DeadlockTable tr th:nth-child(9) {
            /* width: 180px; */
            min-width: 270px !important;
        }

        #DeadlockTable tr th:nth-child(10) {
            /* width: 300px; */
            min-width: 410px !important;
        }

        #DeadlockTable tr th:nth-child(11) {
            /* width: 140px; */
            min-width: 130px !important;
        }

        #DeadlockTable tr th:nth-child(12) {
            /*white-space: pre-wrap;*/
            /* width: 140px; */
            min-width: 120px !important;
        }

        #DeadlockTable tr th:nth-child(13) {
            /*white-space: pre-wrap;*/
            /* width: 140px; */
            min-width: 100px !important;
        }

        #DeadlockTable tr th:nth-child(14) {
            /*white-space: pre-wrap;*/
            /* width: 140px; */
            min-width: 100px !important;
        }

        #DeadlockTable tr th:nth-child(15) {
            width: 140px;
        }



        #waitStatistics tr th:nth-child(1) {
            /*white-space: pre-wrap;*/
            /* width: 190px; */
            min-width: 125px !important;
        }

        #waitStatistics tr th:nth-child(2) {
            /* width: 100px; */
            min-width: 160px !important;
        }

        #waitStatistics tr th:nth-child(3) {
            /*white-space: pre-wrap;*/
            /* width: 100px; */
            min-width: 55px !important;
        }

        #waitStatistics tr th:nth-child(4) {
            /*white-space: pre-wrap;*/
            /* width: 80px; */
            min-width: 55px !important;
        }

        #waitStatistics tr th:nth-child(5) {
            white-space: pre-wrap;
            /* width: 160px; */
            min-width: 130px !important;
        }

        #waitStatistics tr th:nth-child(6) {
            /* width: 100px; */
            min-width: 90px !important;
        }

        #waitStatistics tr th:nth-child(7) {
            /* width: 290px; */
            min-width: 320px !important;
        }




        #SQTable tr th:nth-child(1) {
            /* width: 150px; */
            min-width: 130px !important;
        }

        #SQTable tr th:nth-child(2) {
            /*white-space: pre-wrap;*/
            /* width: 80px; */
            min-width: 50px !important;
        }

        #SQTable tr th:nth-child(3) {
            /*white-space: pre-wrap;*/
            /* width: 80px; */
            min-width: 60px !important;
        }

        #SQTable tr th:nth-child(4) {
            /*white-space: pre-wrap;*/
            /* width: 120px; */
            min-width: 70px !important;
        }

        #SQTable tr th:nth-child(5) {
            /*white-space: pre-wrap;*/
            /* width: 120px; */
            min-width: 70px !important;
        }

        #SQTable tr th:nth-child(6) {
            /* width: 250px; */
            min-width: 190px !important;
        }

        #SQTable tr th:nth-child(7) {
            /*white-space: pre-wrap;*/
            /* width: 200px; */
            min-width: 70px !important;
        }


        #SQTable tr th:nth-child(8) {
            /* width: 400px; */
            min-width: 310px !important;
        }

        #SQTable tr th:nth-child(9) {
            width: 25px;
        }


        #Granularity_Table tr th:nth-child(1) {
            /*white-space: pre-wrap;*/
            width: 20px;
        }

        #Granularity_Table tr th:nth-child(2) {
            width: 60px;
        }

        #Granularity_Table tr th:nth-child(3) {
            /*width: 130px;*/
             width: 100%;
        }


        /**********/
        #DatabaseDetails_Table tr th:nth-child(1) {
            /*white-space: pre-wrap;*/
            width: 54px;
        }

        #DatabaseDetails_Table tr th:nth-child(2) {
            width: 20px;
        }

        #DatabaseDetails_Table tr th:nth-child(3) {
            /*width: 130px;
             width: 100%;*/
            width: 25%;
        }
        /*added 15/2/22*/
        #DatabaseDetails_Table tr th:nth-child(4) {
            /*width: 130px;*/
             width: 600px;
        }


        /*******8**/


        #OrphanTable tr th:nth-child(1) {
            /*white-space: pre-wrap;*/
            width: 30px;
        }

        #OrphanTable tr th:nth-child(2) {
            /*width: 30px;*/
            width: 100%;
        }

        #OrphanTable tr th:nth-child(3) {
            width: 30px;
        }

        #FragmentationTable tr th:nth-child(1) {
            /*white-space: pre-wrap;*/
            /* width: 160px; */
            min-width: 200px !important;
        }

        #FragmentationTable tr th:nth-child(2) {
            /*white-space: pre-wrap;*/
            /* width: 200px; */
            min-width: 210px !important;
        }

        #FragmentationTable tr th:nth-child(3) {
            /*white-space: pre-wrap;*/
            /* width: 290px; */
            min-width: 210px !important;
        }

        #FragmentationTable tr th:nth-child(4) {
            /*white-space: pre-wrap;*/
            /* width: 290px; */
            min-width: 120px !important;
        }

        #FragmentationTable tr th:nth-child(5) {
            /*white-space: pre-wrap;*/
            /*width: 170px;*/
            /* width: 0%; */
            min-width: 170px !important;
        }


        #ActiveSessionsTable tr th:nth-child(1) {
            /*width: 120px;*/
             width: 1%;
            /*white-space: pre-wrap;*/
        }

        #ActiveSessionsTable tr th:nth-child(2) {
            /*width: 120px;*/
            width: 60%;
            /*white-space: pre-wrap;*/
        }

        #ActiveSessionsTable tr th:nth-child(3) {
            width: 200px;
            /*white-space: pre-wrap;*/
        }


        .tooltip1 {
            display: none;
            position: absolute;
            outline: none;
            /*z-index: 100;*/
            border: 1px;
            background-color: white;
            border: 0.5px solid grey;
            padding: 3px;
            color: black;
            /*top: 20px;*/
            /*left: 20px;*/
            width: 300px;
            text-align: center;
            white-space: normal;
            z-index: 1;
            bottom: 100%;
            left: 25%;
            margin-left: -60px;
        }

        .parentCell:hover span.tooltip1 {
            display: block;
        }

        .parentCell {
            position: relative;
        }

        #H1Report, #H1MI {
            margin-top: 0px;
            margin-left: 5px;
        }
        /*#ctl00_MainContent_UpdatePanelMain{
            max-width:2200px;
        }*/
        #WaitStatisticsChart {
            height: 400px !important;
            width: -webkit-fill-available !important;
        }

        #DBWiseCPUChart {
            width: -webkit-fill-available !important;
            max-height: 200px;
        }

         #RFQTrend, #ActiveSessionsTable, #Granularity_Table #DatabaseDetails_Table {
            width: -webkit-fill-available !important;
           

        }

         /* Sortable tables */
        table.sortable thead {
            background-color:#eee;
            color:#666666;
            font-weight: bold;
            cursor: default;
        }



        /****************************/
  
        
  .tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
        .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 10px 8px;
            transition: 0.3s;
        }

/* Change background color of buttons on hover */
 .tab button:hover {
  background-color: #ddd;
}

.tab  button:focus{background-color:#B8B8B8;}
/* Create an active/current tablink class */
.tab  button:active {
 
  
}
.tab  button:target{background-color:red;}



/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

#close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  width:20px;
  height:20px;
  border: none;
}

#close:hover,
#close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
#TableDetails_Table{
    border-collapse: collapse;
    width: 100% !important;
    /*height: 40%;*/
    text-align: center;
    padding: 10px;
    color: #4D4c4b !important;
    margin-bottom: 0;
    display: block;
    overflow-x: auto !important;
    white-space: nowrap;
    /*width: fit-content;*/
    /*height: 100%;*/
}
#TableDetails_Table td,
#TableDetails_Table th {
    vertical-align: middle;
    padding: 0.5rem;
    border-top: 1px solid #dee2e6;
    text-align: left;
    width: 12%;
}

#TableDetails_Table th {
    font-weight: 700;
    font-size: 14px;
    color: #212529;
    text-align: center ;
}




#TableDetails_Table thead th {
    vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, .2)
}

#TableDetails_Table tfoot th {
    border-top-color: rgba(255, 255, 255, .2)
}

#TableDetails_Table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
}

.show {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 20px 0 rgba(0, 0, 0, 0.19);
}
/*.active, .btn:hover {
  background-color: #666;
  color: white;
}*/
#TableDetails_Table th{
    min-width:200px;
}
#TableDetails_Table td{
    min-width:200px;
}
/*To highlight*/
.highlightws
{
    position: relative;
    grid-area: WaitStatisticsTable;
    padding: 10px;
    background-color: #f7f7f7;
    box-shadow: 7px 7px 10px #7c7c79, -5px -5px 20px #96978e; /*#e6e6e6*/
    border-radius: 1.5rem;
}
.highlightFrag
{
    position: relative;
    grid-area: FragmentationTable;
    padding: 10px;
    background-color: #f7f7f7;
    box-shadow: 7px 7px 10px #7c7c79, -5px -5px 20px #96978e;
    border-radius: 1.5rem;
}
.highlightAS 
{
    grid-area: ActiveSessionsTable;
    padding: 10px;
    background-color: #f5f5f5;
    background-color: #f7f7f7;
    box-shadow: 7px 7px 10px #7c7c79, -5px -5px 20px #96978e;
    border-radius: 1.5rem;
 }

/*<DBA-332 ||Changed by Priyanka D|| 10/3/2022>*/
.Export2Excel
{
       /*border-style: groove;*/
       height: 32px;
       float: none;
       margin-bottom: -11px;
       border-radius: 0.5rem;
       padding-left: 1PX;

}





 




        /********************************/
    </style>

    <%--<asp:Label ID="lblError" runat="server" CssClass="lblerror" ForeColor="Red"></asp:Label>
     <asp:Label ID="lblInfo" runat="server" CssClass="lblinfo"></asp:Label>--%>

    <asp:UpdatePanel ID="UpdatePanelCP" UpdateMode="Conditional" runat="server">

        <ContentTemplate>

            <div class="main-container">
                <p id="lblError"></p>


                <div id="snackbar">Text Copied To Clipboard!</div>
                <div id="snackbarBlank">Text field is blank!</div>
                <div id="snackbarReport">Report has been mailed successfully!</div>
                <div id="error">Please enter valid Date Time!</div>
                <div id="snackbarMail">Please enter valid Email address!</div>
                <div id="snackbarLogoutMail">Mail has been sent successfully!</div>
                <div id="snackbarLogoutUsers">Users will be logged out on next refresh!</div>
                <div id="snackbarLAU_no">All users can access 1FinIQ now!</div>

                <div id="snackBarFadedbg">   
                        <div id="snackbarDisplayDetails" class="modal ">
                <!-- Modal content -->
                    
                    <button id="close">
                        
                        <div> 

                            <div style="font-weight: bold"> X  </div>
                           

                        </div>
            

                    </button>
                    
                    <table class="table-sort table-arrows" id="TableDetails_Table" style="border-collapse: collapse; ">

                        <thead id="TableDetailsHeaders" >
                            <th style="font-weight:bold; background-color:#e0e0e0 !important;">Table Name</th><th style="font-weight:bold; text-align:left;  background-color:#e0e0e0 !important;">Column Name</th>
                         </thead>
                        <tbody></tbody>
                    </table>
                    <div id="list7" style="padding-top: 10px; padding : 10px">
                         <div class="wrapper"></div>
                    </div>
                 </div>
                </div>
                

                
              
                <div class="container">

                    <div class="divreport">
                        <h4 id="H1Report">Summary Report</h4>
                        From
                        <input type="text" id="ReportStart"   onkeypress="javascript:text_changed();">
                        To
                        <input type="text" id="ReportStop"   />
                        Recipients:
                        <input type="text" id="Recepients" />
                        <input type="button" id="ReportbtnId" value="Send Mail" class="button button1" />
                    </div>

                    <div class="divMI">
                        <h4 id="H1MI">Features</h4>
                        <asp:LinkButton ID="lnkexportMissingIndexes" CssClass="button button1" runat="server" Visible="true">
                        Missing Indexes
                        </asp:LinkButton>
                        <%--  <input type="button" id="LogoutMail" value="Send Logout Mail" class="button button1">

            
                        <asp:Label runat="server">Demo Users: </asp:Label>
  
                        <input type="text" id="txtLogout"/>
                        <input type="button" id="btnLogout" value="Logout Other users" class="button button1">
                        <input type="button" id="LAU_no" value="Demo Over" class="button button1">--%>
                    </div>

                    <div class="divEmpty"></div>

                </div>
  
        </ContentTemplate>

        <Triggers>
            <asp:PostBackTrigger ControlID="lnkexportMissingIndexes" />
            <%--  <asp:PostBackTrigger ControlID="LogoutMail" />--%>
            <%--<asp:PostBackTrigger ControlID="btnLogout" />--%>
            <%--  <asp:PostBackTrigger ControlID="LAU_no" />--%>
        </Triggers>

    </asp:UpdatePanel>

    <asp:UpdatePanel ID="UpdatePanelMain" runat="server" style="margin-top: -76px;">

        <ContentTemplate>
              
            <div class="container1">

                <div class="div1" style="text-align: center; max-height: 550px;">
                    <h1 style="text-align: center; margin-bottom: 15px;">DB Fragmentation</h1>
                    <div class="loading-image1" style="text-align: left;">
                        <img alt="Loading" src="../App_Resources/ajax-loader5.gif" /><span>Loading...</span>
                    </div>
                    <div style="max-height: 460px; max-width: 100%"> <!- 30vw-->
                        <canvas id="FragmentationChart"></canvas>
                    </div>
                    <button class="button button1" id="fragmentationButton">
                        View Details
                    </button>
                </div>

                <div class="div2" style="float: right; max-height: 550px;">
                    <div class="div21">
                        <h1 style="text-align: center; margin-bottom: 20px;">Wait Statistics</h1>
                        <div class="loading-image2" style="text-align: left;">
                            <img alt="Loading" src="../App_Resources/ajax-loader5.gif" /><span>Loading...</span>
                        </div>

                        <div style="width: auto; max-height: 460px; max-width: 45vw">
                            <canvas id="WaitStatisticsChart" style="margin: 5px;"></canvas>
                        </div>
                        <button class="button button1" id="WSButton" style="justify-self: center; margin-top: 2.1%;">
                            View Details
                        </button>
                    </div>
                </div>



                <div class="div3" style="float: right;">
                    <h1 style="text-align: center; margin-bottom: 20px;">DB Wise CPU Utilization</h1>
                    <div class="loading-image2" style="text-align: left;">
                        <img alt="Loading" src="../App_Resources/ajax-loader5.gif" /><span>Loading...</span>
                    </div>
                    <div style="margin: 0px 10px; max-height: 200px; max-width: 20vw">
                        <canvas id="DBWiseCPUChart"></canvas>
                    </div>
                    <!-- <button class="button button1" id="GranularityButton" style="justify-self: center; margin-left: 35%;">
                            View Details
                        </button>-->
                </div>

                <div class="div4" style="max-height: 270px;">
                    <div class="div41" style="text-align: center;">
                        <h1 style="text-align: center">Active WebApp Logins</h1>
                        <div class="loading-image3" style="text-align: left;">
                            <img alt="Loading" src="../App_Resources/ajax-loader5.gif" /><span>Loading...</span>
                        </div>
                        <p class="activeSessions"></p>
                        <%--<p class="instr" id="loginInstr"><a href="#ActiveSessionsTable">View Details</a></p>--%>
                        <button class="button button1" id="activeSessionsButton">
                            View Details
                            <%--<a href="#ActiveSessionsTable" style="text-decoration: none !important;">View
                                Details</a>--%>
                        </button>
                    </div>

                    <div class="div42" style="text-align: center;">
                        <h1 style="text-align: center">DB Availability</h1>
                        <div class="loading-image4" style="text-align: left;">
                            <img alt="Loading" src="../App_Resources/ajax-loader5.gif" /><span>Loading...</span>
                        </div>
                        <div class="tooltip">
                            <img src="img/database-avail.png" class="dbAvailClass" id="DBAvailability_img" />
                            <table class="tooltiptext">
                            </table>
                        </div>
                        <p id="OnlineDB"></p>
                    </div>
                </div>

            </div>
            <input type="text" id="copy" hidden>


            <div class="container2">

                <div class="WaitStatisticsTable" id="WaitStatisticsTableid">
                    <h1 style="text-align: center">Wait Statistics</h1>
                    </br>
                             From
                            <input type="text" id="WSdemoStart" />
                    To
                            <input type="text" id="WSdemoStop" />
                    Duration
                        <input type="text" id="WSduration" class="durationText" style="border: 2px solid #B8B8B8 !important;" placeholder="Seconds" />

                    <input type="button" id="WSbtnId" value="Apply" class="button button1" />

                    <asp:LinkButton ID="lnkExportWS" CssClass="Export2Excel" runat="server" Visible="true">
                                
                    </asp:LinkButton>

                    <%--                     <input type="button" id="WSRefreshId" value="Refresh" class="button button1" />--%>
                    <input type="button" id="WSRefreshId" class="imgRefresh" />

                    <img alt="Loading" src="../App_Resources/ajax-loader5.gif" class="loading-imageWait" style="margin-block: -9px;"/>

                    </br>
                             <div class="loading-imageWait1" style="text-align: left;">
                                 <img alt="Loading" src="../App_Resources/ajax-loader5.gif" /><span>Loading...</span>
                             </div>
                    <table class="table-sort table-arrows" id="waitStatistics">
                        <thead id="WSHeaders"><th>Time</th><th>Wait Type</th><th>Duration</th><th>Signal Duration</th><th>Wait resource</th><th>Session ID</th><th>Query</th><th></th>
                        </thead>
                    </table>
                    <div id="list5" style="padding-top: 10px;">
                        <div class="wrapper"></div>
                    </div>
                </div>

                <div class="SQTable">

                    <h1 style="text-align: center">Slow Queries</h1>
                    </br>
                            From
                            <input type="text" id="SQdemoStart"   />
                    To
                            <input type="text" id="SQdemoStop"   />
                    Duration
                        <input type="text" id="SQduration" class="durationText" style="border: 2px solid #B8B8B8 !important;" placeholder="Seconds" />
                    <input type="button" id="SQbtnId" value="Apply" class="button button1" />

                    <asp:LinkButton ID="lnkexportSlowQueries" CssClass="Export2Excel" runat="server" Visible="true">
                                
                    </asp:LinkButton>
                    <%--                     <input type="submit" id="SQRefreshId" class="imgRefresh" />--%>
                    <%--                     <button class="imgRefresh" id="SQRefreshId"></button>--%>
                    <input type="button" id="SQRefreshId" class="imgRefresh" />

                    <img alt="Loading" src="../App_Resources/ajax-loader5.gif" class="loading-image_u07" style="margin-block: -9px;"/>

                    </br>
                            <div class="loading-image5" style="text-align: left;">
                                <img alt="Loading" src="../App_Resources/ajax-loader5.gif" /><span>Loading...</span>
                            </div>
                    <div style="display: grid;">
                        <table class="table-sort table-arrows" id="SQTable">
                            <thead id="SQHeaders"><th>Time</th><th>Duration</th><th>CPU Time</th><th>Physical Reads</th><th>Logical Reads</th><th>Username</th><th>Database Name</th><th>SQL Statement</th><th></th></thead>
                        </table>
                        <div id="list" style="padding-top: 10px;">
                            <div class="wrapper"></div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="container3">

               
                <div class="DeadlockTable" style="max-width: 97vw">
                    <h1 style="text-align: center">Deadlock(s)</h1>
                    <br />
                    <div class="loading-image7" style="text-align: left;">
                        <img alt="Loading" src="../App_Resources/ajax-loader5.gif" /><span>Loading...</span>
                    </div>
                    From
                        <input type="text" id="DLdemoStart"   />
                    To
                        <input type="text" id="DLdemoStop"   />
                    <input type="button" id="DLbtnId" value="Apply" class="button button1" />
                    <asp:LinkButton ID="lnkExportDeadlock" CssClass="Export2Excel" runat="server" Visible="true">
                        
                    </asp:LinkButton>
                    <input type="button" id="DLRefreshId" class="imgRefresh" />
					  
                    <img alt="Loading" src="../App_Resources/ajax-loader5.gif" class="loading-image_u007" style="margin-block: -9px;"/>
                    </br>
                        <p id="deadlockMsg" style="display: none;"></p>
                    <table class="table-sort table-arrows" id="DeadlockTable" style="table-layout: fixed;">
                        <thead><tr id="DLHeaders"><th>Time</th><th>Object Name</th><th>Database Name</th><th>SP ID</th><th>Process ID</th><th>Victim</th><th>Host Name</th><th>Status</th><th>Input Buffer</th><th>SP Name</th><th>Owner ID</th><th>Waiter ID</th><th>Owner Lockmode</th><th>Waiter Lockmode</th><th>Query</th><th></th></tr></thead>
                    </table>
                    <div id="list1" style="padding-top: 10px;">
                        <div class="wrapper"></div>
                    </div>
                </div>
            </div>

           

            <div class ="Container5">

                 <div class="OrphanTable" style="max-width: 22vw">
                    <h1 style="text-align: center">DB Orphan Users</h1>
                    <div class="loading-image6" style="text-align: left;">
                        <img alt="Loading" src="../App_Resources/ajax-loader5.gif" /><span>Loading...</span>
                    </div>

                    <p id="orphanMsg" style="display: none;"></p>
                    <table class="table-sort table-arrows" id="Orphantable">
                        <thead><tr><th>Database Name</th><th>Type</th><th>Username</th></tr></thead>
                    </table>
                    <div id="list4" style="padding-top: 10px;">
                        <div class="wrapper"></div>
                    </div>
                </div>

                <div class="ActiveSessionsTable" id="ActiveSessionsTableid">
                    <h1 style="text-align: center">Active WebApp Logins</h1>
                    <div class="loading-image3" style="text-align: left;">
                        <img alt="Loading" src="../App_Resources/ajax-loader5.gif" /><span>Loading...</span>
                    </div>
                    <input type="button" id="ActiveSessionsRefreshId" class="imgRefresh" />
                    <table class="table-sort table-arrows" id="ActiveSessionsTable" style="border-collapse: collapse; table-layout: fixed;">
                        <thead><tr id="ASHeaders">
                        <th >Login ID </th><th>User Group </th><th>Login Time </th></tr>
                        </thead>
                            </table>
                    <div id="list3" style="padding-top: 10px;">
                        <div class="wrapper"></div>
                    </div>
                </div>



                 <div class="DatabaseDetails_Table" >
                     <%--style="max-width: 48vw">--%>
                    <h1 style="text-align: center">Database Object Details</h1>
                        <div class="loading-imageGranularity1" style="text-align: left;">
                        <img alt="Loading" src="../App_Resources/ajax-loader5.gif" /><span>Loading...</span>
                    </div>
                   
                    
                    
                       <p id="GranularityMsg" style="display: none;"></p>
                     <div class="tab">
                         <div id="DBHeaders" ></div>                        
                     </div> 
                      <!--Table Name
                        <input type="text" id="FilterTableName"   />
                     <input type="button" id="tblnamesearchbtnId" value="Search" class="button button1" />
                     <input type="button" id="tblnameRefreshId" class="imgRefresh" />-->
                      <div class="loading-image7" style="text-align: left;">
                        <img alt="Loading" src="../App_Resources/ajax-loader5.gif" /><span>Loading...</span>
                    </div>
                     
                     
                    <table class="table-sort table-arrows" id="DatabaseDetails_Table" style="border-collapse: collapse; ">
                        <thead id="DBDetailsHeaders">
                            <th>Table Name</th><th>Column Count</th><th>Row Count</th><th></th>
                         </thead>
                        <tbody></tbody>
                    </table>
                    <div id="list6" style="padding-top: 10px;">
                         <div class="wrapper"></div>
                    </div>
                
                </div>


            </div>

             <div class="container4">
               <div class="RFQTrend">

                    <h1 style="text-align: center;">RFQ Statistics</h1>
                   <br />
                    <div class="loading-imageRFQ" style="text-align: left;">
                        <img alt="Loading" src="../App_Resources/ajax-loader6.gif" /><span></span>
                    </div>
                    <div>
                                 Product:
                            <select id="type">
                                <option value="EQD" selected>EQD</option>
                                <option value="FXD">FXD</option>
                                <option value="FXC">FXC</option>
                            </select>
                        Scale Type:
                            <select id="scale-type">
                                <option value="PerDay" selected>Per Day</option>
                                <option value="PerHour">Per Hour</option>
                                <option value="PerMinute">Per Minute</option>
                            </select>

                        <input type="button" id="RFQbtnId" value="Update" class="button button1" />
                        <input type="text" id="RFQDate"   style="display: none"; />
                    </div>
               
                                        
                   <img alt="Loading" src="../App_Resources/ajax-loader5.gif" class="loading-imageRFQ1" style="margin-block:-9px;"/>                                
                    <div id="RFQCanvas" style="width: 48vw; height:350px; ">
                        <canvas id="RFQTrend" style="margin: 5px;"></canvas>
                    </div>


                </div>


                <div class="FragmentationTable" id="FragmentationTableid" style="max-width: 100%"> <!-*47vw-->
                    <h1 style="text-align: center">DB Fragmentation: Rebulid/Reorganize Indexes</h1>
                    <br />
                    <!--DBA-329 ||7/3/2022-->
                    Fragmentation % Threshold:
                    <input type="number" title="minimum Fragmentation %" id="Fragfilterpercent" />
                    <input type="button" id="FragbtnId" value="Apply" class="button button1" />
                    <input type="hidden" name="CustomerJSON"/>
                    <asp:LinkButton ID="lnkExportFragmentation" CssClass="Export2Excel" runat="server" Visible="true" >
                            
                    </asp:LinkButton>                 
                    <input type="button" id="FragmentationRefreshId" class="imgRefresh" />
                    <table class="table-sort table-arrows" id="FragmentationTable" style="border-collapse: collapse; table-layout: fixed;">
                        <thead id="FrHeaders"><th>Database Name</th><th>Avg Fragmentation(%)</th><th>Table Name</th><th>Index Name</th><th>Index Type</th></thead>
                    </table>
                    <div id="list2" style="padding-top: 10px;">
                        <div class="wrapper"></div>
                    </div>
                    </br>
                </div>


            </div>

           

        </ContentTemplate>

        <Triggers>
            <asp:PostBackTrigger ControlID="lnkexportSlowQueries" />
            <asp:PostBackTrigger ControlID="lnkExportDeadlock" />
            <asp:PostBackTrigger ControlID="lnkExportFragmentation" />
            <asp:PostBackTrigger ControlID="lnkExportWS" />
            
        </Triggers>


    </asp:UpdatePanel>

    <script>
//import { type } from "jquery";

         //***********//
        var fetch_for_first_time;
        var current_Table;
        var flag = 0;
        var flagTabSwitch = 0;
        var ListDD_cc 
        var ListDD
        var ListTablesDetails
        var isbtnload = 0;
        //**********//
        var DB = [];
        var DBName = [];
        var Time = [];
        var lt10 = [];
        var bt1030 = [];
        var gt30 = [];
        var f1 = 0;
        var f2 = 0;
        var f3 = 0;
        var FragArray = [];
        var FragTableData = [];
        var ListFrag = [];
        var DBOffline = 0;
        var ListFrag;
        var ListOrphan;
        var ListDeadlock;
        var ListSQ;
        var ListDeadlock_cc;
        var ListSQ_cc;
        var ListRFQ;
        var ListActiveSessions;
        var ActiveSessionDropdownList = [];
        var RFQCount = [];
        var RFQLabel = [];
        var RFQCountRev = [];
        var RFQLabelRev = [];
        var duration = [];
        var path_Name = window.location.pathname;
        var myPageName = path_Name.substring(path_Name.lastIndexOf('/') + 1);
        var statement;
        var statement1;
        var Wait = [];
        var LockWait;
        var AsyncIOWait;
        var OtherWait;
        var CPW;
        var WriteLogWait;
        var isFiltered;
        var fragDBName = "";
        var boolFlag = false;
        var otherWaitType = '';
        var lckWaitType = 'Lock';
        var cxpacketWaitType = 'CXPacket';
        var asyncWaitType = 'Async_IO_Completion';
        var writeLogWaitType = 'WriteLog';
        var headerListFrag = ['DatabaseName', 'Avg_Fragmentation_in_Percentage', 'TableName', 'Name','Index_Type_Desc' ];
        var headerListWaitStat = ['Time','WaitType','Duration','SignalDuration','WaitResource','SessionID','Query'];
        var headerListSlowQueries = ['Time','Duration','CPU_Time','Physical_Reads','Logical_Reads','USERNAME','DatabaseName','SQL_Statement'];
        var headerListDeadlock = ['Time','ObjectName','DatabaseName','SP ID','ProcessID','Victim','HostName','Status','InputBuffer','SPName','OwnerID','WaiterID','OwnerLockMode','WaiterLockMode','Query'];
        var headerListOrphan = ['DatabaseName','TypeDesc','UserName'];
        var headerListGranularity = ['CPU_Utilisation_Per', 'Time','SQL_Statement'];
        var headerListActiveLogin = ['Login_Name', 'Login_ID', 'Login_Time'];

        //changed
        var headerListDatabaseDetails = ['TableName', 'ColumnCnt', 'RowCnt'];
        var headerListDatabaseTablesDetails = ['TableName', 'ColumnName'];

        var ctxFragmentation = document.getElementById("FragmentationChart").getContext("2d");
        var ctx = document.getElementById('WaitStatisticsChart').getContext("2d");
        var ctxCPU = document.getElementById("DBWiseCPUChart").getContext("2d");

        var RFQproductType = '';
        var RFQscaleType = '';
        var dataWaitStatistics;
        RFQproductType = document.getElementById('type').value;
        RFQscaleType = document.getElementById('scale-type').value;

        var RFQDate = 'null';

        var FilterFragmentationTable;


        function getMonthFromString(mon) {
            return new Date(Date.parse(mon + " 1, 2012")).getMonth() + 1
        }




        $("#scale-type").click(function () {
            RFQscaleType = document.getElementById('scale-type').value;
            if (RFQscaleType !== 'PerDay') {
                document.getElementById("RFQDate").style.display = "inline-block";
            }
            else {
                document.getElementById("RFQDate").style.display = "none";
            }
        });


        // $('.loading-image07').hide();
        $('.loading-image_u07').hide();
        $('.loading-image_u007').hide();
        //changed
        $('.loading-image_u008').hide();
        $('.loading-image32').hide();
        $('.loading-imageGranularity').hide();
        $('.loading-imageGranularity1').hide();
        $('.loading-imageWait').hide();
        $('.loading-imageWait1').hide();
        $('.loading-imageRFQ').hide();
        $('.loading-imageRFQ1').hide();


        var chartColors = {
            red: "#48A684",
            orange: 'rgb(255, 159, 64)',
            yellow: '#B6D4AE',
            green: "#616A91",
            blue: "#3E5F69",
            purple: '#43B3D8',
            grey: 'rgb(201, 203, 207)'
        };

        $('#activeSessionsButton').click(function (event) {
            //window.location = '#ActiveSessionsTable';
            window.scrollBy(0, 1350);//1820
            event.preventDefault();
            //||DBA-330||07/03/2022 
            var ActiveSessionglow = document.getElementById("ActiveSessionsTableid");
            ActiveSessionglow.className = "highlightAS";
            setTimeout(function () { ActiveSessionglow.className = ActiveSessionglow.className.replace("highlightAS", "ActiveSessionsTable"); }, 5000);
        });

        $('#fragmentationButton').click(function (event) {
            window.location = '#FragmentationTable';
            event.preventDefault();
            //||DBA-330||07/03/2022
            var fragglow = document.getElementById("FragmentationTableid");
            fragglow.className = "highlightFrag";
            setTimeout(function () { fragglow.className = fragglow.className.replace("highlightFrag", "FragmentationTable"); }, 5000);
        });

        $('#WSButton').click(function (event) {
            //window.location = '#waitStatistics';
            window.scrollBy(0, 650);
            event.preventDefault();
            //||DBA-330||07/03/2022
            var wsglow = document.getElementById("WaitStatisticsTableid");
            wsglow.className = "highlightws";
            setTimeout(function () { wsglow.className = wsglow.className.replace("highlightws", "WaitStatisticsTable"); }, 5000);

        });

        $('#GranularityButton').click(function (event) {
            //window.location = '#Granularity_Table';
            window.scrollBy(0, 1820);
            event.preventDefault();
        });

        $(function () {
            
            fetchFragmentation()
            fetchActiveSessions()
            fetchDBAvailability()
            fetchDBWiseCPUActivity()
            fetchRFQTrendGraph()
            fetchWaitStatistics()
            fetchWaitStatisticsGraph()
            setInterval(function () {
                fetchActiveSessions()
                fetchDBAvailability()
                fetchDBWiseCPUActivity()
            }, 60000);
            setInterval(function () {
                fetchWaitStatisticsGraph()
            }, 10000)
            fetchDeadlock()
            
            //fetchCPUUtilisationGranularity()
            fetchSlowQueries()
            fetchOrphanUsers()
           
            function checkIfFinished(){
                return (DBName.length > 0);
            }
            var timeout = setInterval(function () {
                if (checkIfFinished()) {
                    clearInterval(timeout);
                    fetchDatabaseDetails();
                }
            }, 100);

           
        });

        //$("#FragmentationChart").click(function () {
        //    $('html,body').animate({
        //        scrollTop: $("#FragmentationTable").offset().top
        //    }, 'fast');
        //});

        $('#FragmentationChart').css({ 'cursor': 'pointer' });

        $(".activeSessions").click(function () {
            $('html,body').animate({
                scrollTop: $("#ActiveSessionsTable").offset().top
            }, 'fast');
        });

        $('.activeSessions').css({ 'cursor': 'pointer' });

        function OnError(xhr, errorType, exception, errorMsg) {
            var responseText;
            var x = document.getElementById("lblError");
            x.innerHTML = "Error occurred while processing!";
            console.log("Error ID: " + xhr.responseText);
            console.log("Error Message: " + errorMsg);

        }

        function fetchDBAvailability() {
            $.ajax({
                type: "POST",
                url: "" + myPageName + "/DatabaseAvailability",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccessDBAvailability,
                error: OnError,
                complete: function () {
                    $('.loading-image4').hide();
                }

            });
        }

        function OnSuccessDBAvailability(response) {

            var myJSON = JSON.stringify(response.d);
            var DBAvailability = JSON.parse(myJSON);
            var txt = "";
            DBOffline = 0;
            $(".tooltiptext").empty();
            txt += '<tr><th>DatabaseName</th><th>Status</th></tr>'
            $(".tooltiptext").append(txt);
            txt = "";
            for (var i in DBAvailability) {
                txt += '<tr><td style="text-align:left;">' + DBAvailability[i].name + "</td>";
                txt += '<td style="text-align:left;">' + DBAvailability[i].state_desc + "</td></tr>";
                $(".tooltiptext").append(txt);
                txt = "";
            }
            $("#dbavailInstr").css("display", "block");
            for (var k in DBAvailability) {

                if (DBAvailability[k].state_desc.localeCompare("OFFLINE") == 0)
                    DBOffline = DBOffline + 1;

            }
            if (DBOffline != 0) {
                document.getElementById("DBAvailability_img").src = "img/database-avail-red.png"
                document.getElementById("OnlineDB").innerHTML = DBOffline + " Database(s) Offline!"
            }
            else {
                document.getElementById("DBAvailability_img").src = "img/database-avail.png"
                document.getElementById("OnlineDB").innerHTML = "All Databases are online!"
            }
        }


        function fetchDBWiseCPUActivity() {
            $.ajax({
                type: "POST",
                url: "" + myPageName + "/DBWiseCPU_Activity",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccessDBWiseCPUActivity,
                error: OnError,
                complete: function () {
                    $('.loading-image2').hide();
                }
            });
        }

        function OnSuccessDBWiseCPUActivity(response) {
            var myJSON = JSON.stringify(response.d);
            const obj = JSON.parse(myJSON);
            DB = [];
            Time = [];
            for (var k in obj) {
                DB.push(obj[k].Database);
                Time.push(obj[k].CPU_Time_In_Percentage);
            }

            var cpuChart = new Chart(ctxCPU, {
                type: 'horizontalBar',
                data: {
                    labels: DB,
                    datasets: [{
                        label: "DB Wise CPU% Utilization",
                        backgroundColor: "#BCE4B1",
                        borderColor: "#abd1a1",
                        data: Time
                    }]
                },
                options: {
                    legend: {
                        display: false
                    },
                    scales: {
                        xAxes: [{
                            barPercentage: 0.5,
                            gridLines: {
                                display: false
                            },
                            ticks: {
                                min: 0
                            },
                            scaleLabel: {
                                display: true,
                                labelString: "CPU Utilization (%)"
                            }
                        }],
                        yAxes: [{
                            gridLines: {
                                display: false
                            },
                            ticks: {
                                display: false
                            },
                            scaleLabel: {
                                display: true,
                                labelString: "Databases"
                            }
                        }]
                    }
                }
            });

        }


        function fetchRFQTrendGraph() {
            //$('.loading-imageRFQ').show();
            $.ajax({
                type: "POST",
                url: "" + myPageName + "/GetRFQTrend",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data:
                    JSON.stringify({ 'ProductType': RFQproductType, 'TimeInterval': RFQscaleType, 'RFQDate': RFQDate }),
                success: OnSuccessfetchRFQTrendGraph,
                error: OnError,
                complete: function () {
                    $('.loading-imageRFQ').hide();
                    $('.loading-imageRFQ1').hide();
                }

            });
        }

        const wrap = (str, limit) => {
            const words = str.split(" ");
            let aux = []
            let concat = []

            for (let i = 0; i < words.length; i++) {
                concat.push(words[i]);
                //if (words[i].includes('/')) {
                //    console.log("yes");
                //    console.log(words[i].substring(0, 5))
                //    concat.push(words[i].substring(0, 5));
                //}
                //else {
                //    concat.push(words[i]);
                //}
                let join = concat.join(' ')
                if (join.length > limit) {
                    aux.push(join)
                    concat = []
                }
            }

            if (concat.length) {
                aux.push(concat.join(' ').trim())
            }

            return aux
        }


        function OnSuccessfetchRFQTrendGraph(response) {
            var myJSON = JSON.stringify(response.d);
            const obj = JSON.parse(myJSON);
            ListRFQ = JSON.parse(myJSON);

            RFQCount = [];
            RFQLabel = [];


            for (var i = 0; i < ListRFQ.length; i++) {
                RFQCount[i] = ListRFQ[i].RFQ_Count;
                RFQLabel[i] = wrap(ListRFQ[i].Date_Time, 2);
            }

            RFQCountRev = RFQCount.reverse();
            RFQLabelRev = RFQLabel.reverse();


            $('#RFQTrend').remove();
            $('#RFQCanvas').append('<canvas id="RFQTrend" style="margin: 5px;"></canvas>');
            var ctxRFQ = document.getElementById('RFQTrend').getContext("2d");

            var RFQChart = new Chart(ctxRFQ, {
                type: 'line',
                data: {
                    labels: RFQLabelRev,
                    datasets: [{
                        label: RFQproductType + ' RFQ Count ' + RFQscaleType,
                        data: RFQCountRev,
                        fill: false,
                        backgroundColor: '#003071',
                        borderColor: '#003071',
                        pointRadius: 1,
                        borderWidth: 0.5

                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,

                    elements: {
                        line: {
                            tension: 0,
                        }
                    },
                    scales: {
                        xAxes: [{
                            ticks: {
                                autoSkip: true,
                                maxRotation: 0,
                                minRotation: 0,
                                maxTicksLimit: 20,
                                autoSkipPadding: 15
                            }
                        }]
                    }
                }
            });

        }




        $("#RFQbtnId").click(function () {
            RFQproductType = document.getElementById('type').value;
            RFQscaleType = document.getElementById('scale-type').value;

            $('.loading-imageRFQ1').show();
            if ($("#RFQDate").val() == '') {
                var today = new Date();
                var dd = String(today.getDate()).padStart(2, '0');
                var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
                var yyyy = today.getFullYear();
                //var hr = today.getHours();
                //var min = today.getMinutes();

                today = yyyy + '/' + mm + '/' + dd + ' ' + '00' + ':' + '00';
                // document.write(today);
                RFQDate = today;
            }
            else {
                RFQDate = $("#RFQDate").val();
            }
          //  $('.loading-image3').show();
            fetchRFQTrendGraph();

        });

      //  $("#RFQDate").click(function () {
            $('#RFQDate').datetimepicker({
                ownerDocument: document,
                step: 60,
                defaultTime: '00:00',
                contentWindow: window,
                closeOnTimeSelect: true,
                closeOnWithoutClick: true,
                closeOnInputClick: true,
                maxDate: new Date()
            });
      //  });

        function fetchWaitStatistics() {
            isFiltered = 0;
            $.ajax({
                type: "POST",
                url: "" + myPageName + "/getWaitStatistics",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccessWaitStatistics,
                error: OnError,
                complete: function () {
                    $('.loading-imageWait').hide();
                    $('.loading-imageWait1').hide();
                    $('#WSRefreshId').show();

                }
            });
        }
        function makeWaitStatisticsTable(dataWaitStatistics) {
            $("#waitStatistics").append('<tbody>');
            $('#list5').pagination({ // you call the plugin
                dataSource: dataWaitStatistics, // pass all the data
                pageSize: 10, // put how many items per page you want
                callback: function (data, pagination) {
                    var txt = "";
                    var statement3 = "";
                    var query = "";
                    $('#waitStatistics tbody').empty();
                    var wrapper = $('#list5 .wrapper').empty();
                    //txt += '<tbody>';
                    $.each(data, function (i, f) {
                        statement3 = "";
                        if (f.Query.length > 0) {
                            statement3 = f.Query.substring(0, 50) + '...';
                            query = '<td class="parentCell">' + statement3 + '<span class="tooltip1">' + f.Query + "</span> </td>";
                        }
                        else {
                            statement3 = "-";
                            query = '<td class="parentCell">' + statement3 + "</td>";
                        }
                        var stat = f.Query;
                        /*DATE format change*/
                    /*txt += '<tr class="GridItem"><td>' + f.Time + "</td>";*/
                        //console.log("f.Time", f.Time);
                        //console.log("f.Time type", typeof(f.Time));
                        const varTime = new Date(f.Time);
                        console.log("varDate", varTime);
                        txt += '<tr class="GridItem"><td>' +f.Time  + '</td>';

                        
                        //console.log('DATE format change');
                        //DBA-332 changed by Priyanka D|| 10/3/2022
                        txt += "<td>" + f.WaitType + "</td>";
                        txt += '<td style="text-align:right;">' + f.Duration + "</td>";
                        txt += '<td style="text-align:right;">' + f.SignalDuration + "</td>";
                        txt += "<td>" + f.WaitResource + "</td>";
                        txt += '<td style="text-align:right;">' + f.SessionID + "</td>";
                        txt += query;
                        txt += '<td style="cursor:pointer;"><img src="img/copy_to_clip.png" class="copyimg" onclick="copyToClipboardWaitStatistics(' + i + ')"></td ></tr>';
                        $("#waitStatistics").append(txt);
                        txt = "";

                    });
                    txt += '</tbody>';
                    $("#waitStatistics").append(txt);
                }
            });

        }
        function OnSuccessWaitStatistics(response) {
            var myJSON = JSON.stringify(response.d);
            const obj = JSON.parse(myJSON);

            ListWait = JSON.parse(myJSON);
            ListWS_cc = ListWait;
            if (isFiltered == 0) {
                dataWaitStatistics = ListWait;
            }
            else {
                dataWaitStatistics = ListWait;
            }
            makeWaitStatisticsTable(dataWaitStatistics);
            var tableID = "waitStatistics"
            TableSort(tableID, dataWaitStatistics,makeWaitStatisticsTable,headerListWaitStat)
        }
        


        function fetchCPUUtilisationGranularity() {
            isFiltered = 0;
            $.ajax({
                type: "POST",
                url: "" + myPageName + "/DBWiseCPUUtilisation_Granularity",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccessfetchCPUUtilisationGranularity,
                error: OnError,
                complete: function () {
                    $('.loading-imageGranularity1').hide();
                }
            });
        }

        function OnSuccessfetchCPUUtilisationGranularity(response) {
            var myJSON = JSON.stringify(response.d);
            ListGranularity = JSON.parse(myJSON);
            ListListGranularity_cc = ListGranularity;
            makeTableGranularity(ListGranularity);
            var tableID = "Granularity_Table";
            TableSort(tableID, ListGranularity, makeTableGranularity, headerListGranularity);
        }
        function makeTableGranularity(ListGranularity) {
            $("#Granularity_Table").append("<tbody>");
            $('#listGranularity').pagination({ // you call the plugin
                dataSource: ListGranularity, // pass all the data
                pageSize: 10, // put how many items per page you want
                callback: function (data, pagination) {
                    var txt = "";
                    var temp = "";
                    var statement3 = "";
                    var query = "";

                    $('#Granularity_Table tbody').empty();
                    var wrapper = $('#listGranularity.wrapper').empty();


                    //txt += '<tbody>'
                    $.each(data, function (i, f) {
                        statement3 = "";
                        if (f.SQL_Statement.length > 0) {
                            statement3 = f.SQL_Statement.substring(0, 60) + '...';
                            query = '<td class="parentCell">' + statement3 + '<span class="tooltip1">' + f.SQL_Statement + "</span> </td>";
                        }
                        else {
                            statement3 = "-";
                            query = '<td class="parentCell">' + statement3 + "</td>";
                        }
                        if (f.CPU_Utilisation_Per == 0) {
                            temp = f.CPU_Utilisation_Per;
                        }
                        else {
                            temp = f.CPU_Utilisation_Per.toFixed(2);
                        }
                        txt += '<tr class="GridItem"><td>' + temp + "</td>";
                        /*Date Format change*/
                        txt += "<td>" + f.Time + "</td>";
                        txt += query;
                        txt += '<td style="cursor:pointer;"><img src="img/copy_to_clip.png" class="copyimg" onclick="copyToClipboardGranularity(' + i + ')"></td ></tr>';
                        $("#Granularity_Table").append(txt);
                        txt = "";

                    });
                    $("#Granularity_Table").append("</tbody>");
                }

            });


        }



        function onRefresh(chart) {

            chart.data.datasets[0].data.push({
                x: Date.now(),
                y: LockWait
            })

            chart.data.datasets[1].data.push({
                x: Date.now(),
                y: AsyncIOWait
            })
            chart.data.datasets[2].data.push({
                x: Date.now(),
                y: CPW
            })
            chart.data.datasets[3].data.push({
                x: Date.now(),
                y: WriteLogWait
            })
            chart.data.datasets[4].data.push({
                x: Date.now(),
                y: OtherWait
            })

        }

        function fetchWaitStatisticsGraph() {
            $.ajax({
                type: "POST",
                url: "" + myPageName + "/LiveWaits",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccessWaitStatisticsGraph,
                error: OnError,
                complete: function () {
                    $('.loading-image6').hide();
                }
            });
        }

        function OnSuccessWaitStatisticsGraph(response) {
            var myJSON = JSON.stringify(response.d);
            const obj = JSON.parse(myJSON);
            otherWaitType = ''
            ListWait = JSON.parse(myJSON);
          
            AsyncIOWait = 0;
            CPW = 0;
            WriteLogWait = 0;
            LockWait = 0;
            OtherWait = 0;
            for (var i = 0; i < ListWait.length; i++) {
                if (ListWait[i].Wait_Type.toUpperCase() == "ASYNC_IO_COMPLETION") {
                    AsyncIOWait = ListWait[i].Duration;
                    asyncWaitType = ListWait[i].Wait_Type;
                }
                else if (ListWait[i].Wait_Type.toUpperCase() == "CXPACKET") {
                    CPW = ListWait[i].Duration;
                    cxpacketWaitType = ListWait[i].Wait_Type;
                }
                else if (ListWait[i].Wait_Type.toUpperCase() == "WRITELOG") {
                    WriteLogWait = ListWait[i].Duration;
                    writeLogWaitType = ListWait[i].Wait_Type;
                }
                else if (ListWait[i].Wait_Type.substring(0, 4).toUpperCase() == "LCK_") {
                    LockWait = ListWait[i].Duration;
                    lckWaitType = ListWait[i].Wait_Type;
                }

                else {
                    OtherWait = ListWait[i].Duration;
                    otherWaitType = ListWait[i].Wait_Type;
         
                }
            }
        }




        var color = Chart.helpers.color;
        var WaitStatisticsChart = new Chart(ctx, {
            responsive: true,
            maintainAspectRatio: false,
            type: 'line',
            data: {
                datasets: [{
                    label: 'Lock',
                    backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
                    borderColor: chartColors.red,
                    fill: false,
                    cubicInterpolationMode: 'monotone',
                    data: []
                }, {
                    label: 'Async_IO_Completion',
                    backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
                    borderColor: chartColors.blue,
                    fill: false,
                    cubicInterpolationMode: 'monotone',
                    data: []
                }, {
                    label: 'CXPacket',
                    backgroundColor: color(chartColors.yellow).alpha(0.5).rgbString(),
                    borderColor: chartColors.yellow,
                    fill: false,
                    cubicInterpolationMode: 'monotone',
                    data: []
                },
                {
                    label: 'WriteLog',
                    backgroundColor: color(chartColors.purple).alpha(0.5).rgbString(),
                    borderColor: chartColors.purple,
                    fill: false,
                    cubicInterpolationMode: 'monotone',
                    data: []
                },
                {
                    label: 'Other',
                    backgroundColor: color(chartColors.green).alpha(0.5).rgbString(),
                    borderColor: chartColors.green,
                    fill: false,
                    cubicInterpolationMode: 'monotone',
                    data: []
                }]
            },
            options: {
                scales: {
                    xAxes: [{
                        type: 'realtime'
                    }],
                    yAxes: [{
                        display: true,
                        ticks: {
                            min: 0
                        }
                    }]
                },
                tooltips: {
                    mode: 'nearest',
                    intersect: false,
                    callbacks: {
                        label: function (context) {
                            //console.log(context.datasetIndex);

                            var label;
                            if (context.datasetIndex == 0) {
                                label = lckWaitType;
                            }
                            else if (context.datasetIndex == 1) {
                                label = asyncWaitType;
                            }
                            else if (context.datasetIndex == 2) {
                                label = cxpacketWaitType;
                            }
                            else if (context.datasetIndex == 3) {
                                label = writeLogWaitType;
                            }
                            else {
                                label = otherWaitType;
                            }
                            return label;

                        }
                    }
                },
                hover: {
                    mode: 'nearest',
                    intersect: false
                },
                plugins: {
                    streaming: {
                        duration: 20000,
                        refresh: 1000,
                        delay: 2000,
                        onRefresh: onRefresh
                    }
                }
            }
        });


        function fetchOrphanUsers() {
            $.ajax({
                type: "POST",
                url: "" + myPageName + "/OrphanUsers",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccessOrphanUsers,
                error: OnError,
                complete: function () {
                    $('.loading-image6').hide();
                }
            });
        }
        function makeOrphanTable(ListOrphan) {
            if (ListOrphan.length >= 1) {
                //console.log("make table");
                //console.log(ListOrphan);
                $("#Orphantable").append("<tbody>");
                $('#list4').pagination({ // you call the plugin
                    dataSource: ListOrphan, // pass all the data
                    
                    pageSize: 10, // put how many items per page you want
                    callback: function (data, pagination) {
                        var txt = "";
                        $('#Orphantable tbody').empty();
                        var wrapper = $('#list4 .wrapper').empty();
                        //txt += '<tbody>'

                        $.each(data, function (i, f) {
                           
                            txt += '<tr><td>' + f.DatabaseName + "</td>";
                            txt += "<td>" + f.TypeDesc + "</td>";
                            txt += "<td>" + f.UserName + "</td></tr>";
                            $("#Orphantable").append(txt);
                            //console.log(txt);
                            txt = "";

                        });
                        txt += '</tbody>'
                        
                        $("#Orphantable").append(txt);
                        //console.log(document.getElementById('Orphantable'));
                        //document.getElementById('Orphantable').className = 'table-sort';
                        //testSort(ListOrphan);
                    }
                });
            }
            else {
                $("#orphanMsg").show();
                $("#orphanMsg").text("No Orphan User(s) Found");
            }
            var tableID = "Orphantable";
            

        }
        //$("#Orphantable thead").on("click", function (event) {
        //    var tableID = "Orphantable";
        //    orphanTableSort(tableID, ListOrphan);
        //});

        function OnSuccessOrphanUsers(response) {
            var myJSON = JSON.stringify(response.d);
            var myData = [];
            const obj = JSON.parse(myJSON);
            ListOrphan = JSON.parse(myJSON);
            var txt = "";
            //txt += '<thead><tr><th>Database Name</th><th>Type</th><th>Username</th></tr></thead><tbody>'
            makeOrphanTable(ListOrphan);
            var tableID = "Orphantable";
            TableSort(tableID, ListOrphan, makeOrphanTable, headerListOrphan);

        }
        function TableSort(tableID, tableData, makeTable, HeaderList) {
            const getTagTable = document.getElementById(tableID);
            //console.log(getTagTable);
            const tableHead = getTagTable.querySelector("thead");
            const tableBody = getTagTable.querySelector("tbody");
            const tableHeadHeaders = tableHead.querySelectorAll("th");
            //console.log(tableHeadHeaders);
            tableHead.style.cursor = "pointer";
            let timesClickedColumn = 0;
            //console.log(HeaderList);
            //console.log("i am outside");
            for (let [columnIndex, th] of tableHeadHeaders.entries()) {
                
                //console.log("lets see how i itearte here");
                //console.log(columnIndex);
                //console.log(th);
                th.addEventListener("click", function () {
                    //console.log(columnIndex);
                    //var tempColumnName = Object.keys(tableData[1])[columnIndex + 2]
                    var tempColumnName = HeaderList[columnIndex];
                    //console.log(tempColumnName);
                    //console.log("remember sorting", columnIndex);
                    timesClickedColumn += 1;
                    getTable();
                    makeTable(tableData);
                    function getTable() {
                        //console.log(timesClickedColumn, "times clicked");
                        function clearArrows(arrowUp = " ▲", arrowDown = " ▼") {
                            //console.log("in clear arrow function");
                            tempVal = th.innerText;
                            tempVal = tempVal.replace(/[\u25BC]/g, "");
                            tempVal = tempVal.replace(/[\u25B2]/g, "")
                            $(th).html(tempVal);
                        }
                        let desc = th.classList.contains("order-by-desc");
                        let tableArrows = getTagTable.classList.contains("table-arrows");
                        let arrowUp = " &#9650";
                        let arrowDown = " &#9660";
                        if ((timesClickedColumn%2) === 1) {
                            if (desc) {
                                if (tableArrows) {
                                    clearArrows(arrowUp, arrowDown);
                                    var text = $(th).html();
                                    text = text + arrowDown;
                                    $(th).html(text);
                                }
                                sort_by_key_desc(tableData, tempColumnName);
                                //console.log(tableData);
                            }
                            else {
                                if (tableArrows) {
                                    clearArrows(arrowUp, arrowDown);
                                    var text = $(th).html();
                                    text = text + arrowUp;
                                    $(th).html(text);
                                }
                                sort_by_key_asc(tableData, tempColumnName);
                                //console.log(tableData);
                            }

                        }
                        if ((timesClickedColumn%2) === 0) {
                            if (desc) {
                                if (tableArrows) {
                                    clearArrows(arrowUp, arrowDown);
                                    var text = $(th).html();
                                    text = text + arrowUp;
                                    $(th).html(text);
                                }
                                sort_by_key_asc(tableData, tempColumnName);
                                //console.log(tableData);
                            }
                            else {
                                if (tableArrows) {
                                    clearArrows(arrowUp, arrowDown);
                                    var text = $(th).html();
                                    text = text + arrowDown;
                                    $(th).html(text);
                                }
                                sort_by_key_desc(tableData, tempColumnName);
                                //console.log(tableData);
                            }
                        }
                    }        
                });
            
            }
        }

        
      
        function fetchDeadlock() {
            $.ajax({
                type: "POST",
                url: "" + myPageName + "/getDeadlock",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccessDeadlock,
                error: OnError,
                complete: function () {
                    $('.loading-image7').hide();

                    $('.loading-image_u007').hide();
                    $('#DLRefreshId').show();

                }
            });
        }

        function OnSuccessDeadlock(response) {
            var myJSON = JSON.stringify(response.d);
            const obj = JSON.parse(myJSON);
            ListDeadlock = JSON.parse(myJSON);
            ListDeadlock_cc = ListDeadlock;
            //DisplayDeadlock('#DeadlockTable')
            $("#deadlockMsg").hide();

            $('#DeadlockTable tbody').empty();
            $(".paginationjs").hide();
            makeTableDeadlock(ListDeadlock);
            var tableID = "DeadlockTable";
            TableSort(tableID, ListDeadlock, makeTableDeadlock, headerListDeadlock);

        }
        function makeTableDeadlock(ListDeadlock) {
            $("#DeadlockTable").append('<tbody>');
            if (ListDeadlock.length > 1) {
                $('#list1').pagination({ // you call the plugin
                    dataSource: ListDeadlock, // pass all the data
                    pageSize: 14, // put how many items per page you want
                    callback: function (data, pagination) {
                        // data will be chunk of your data (json.Product) per page
                        // that you need to display
                        var txt = "";
                        statement1 = "";
                        query = "";
                        statementInputBuff = "";
                        $('#DeadlockTable tbody').empty();
                        var wrapper = $('#list1 .wrapper').empty();
                        //txt += '<tbody>'
                        $.each(data, function (i, f) {
                            statement1 = ""
                            if (f.Query.length > 0) {
                                statement1 = f.Query.substring(0, 30) + '...';
                                query = '<td class="parentCell">' + statement1 + '<span class="tooltip1">' + f.Query + "</span></td>";
                            }
                            else {
                                statement1 = '-';
                                query = '<td class="parentCell">' + statement1 + "</td>";
                            }
                            statementInputBuff = "";
                            statementInputBuff = f.InputBuffer.substring(0, 46) + '...';
                            var stat = f.Query;
                        /*DAte format change*/
                            /*||DBA- || Datetime format changed ||07/03/2022*/
                            txt += '<tr class="GridItem"><td style="text-align:center;">' + f.Time + "</td>";
                            txt += "<td>" + f.ObjectName + "</td>";
                            txt += "<td>" + f.DatabaseName + "</td>";
                            txt += '<td style="text-align:right;">' + f.SP_ID + "</td>";
                            txt += "<td>" + f.ProcessID + "</td>";
                            txt += "<td>" + f.Victim + "</td>";
                            txt += "<td>" + f.HostName + "</td>";
                            txt += "<td>" + f.Status + "</td>";
                            txt += '<td class="parentCell">' + statementInputBuff + '<span class="tooltip1">' + f.InputBuffer + "</span></td>";
                            txt += "<td>" + f.SPName + "</td>";
                            txt += "<td>" + f.OwnerID + "</td>";
                            txt += "<td>" + f.WaiterID + "</td>";
                            txt += "<td>" + f.OwnerLockMode + "</td>";
                            txt += "<td>" + f.WaiterLockMode + "</td>";
                            txt += query;
                            txt += '<td style="cursor:pointer;"><img src="img/copy_to_clip.png" class="copyimg" onclick="copyToClipboardDeadlock(' + i + ')"></td ></tr>';
                            $("#DeadlockTable").append(txt);
                            txt = "";

                        });
                    }
                });
            }
            else {
                $('#DeadlockTable tbody').empty();
                $("#deadlockMsg").show();
                $("#deadlockMsg").text("No Deadlock(s) since last 5 days or given period"); //||DBA-318||Changed By: Gazala K||Updated Time interval as asked by Dimpal K
            }
            
            $("#DeadlockTable").append('</tbody>');
        }

        function fetchSlowQueries() {
            $.ajax({
                type: "POST",
                url: "" + myPageName + "/getDataSlowQueries",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccessSlowQueries,
                error: OnError,
                complete: function () {
                    $('.loading-image5').hide();

                    $('.loading-image_u07').hide();
                    $('#SQRefreshId').show();

                }
            });
        }

        function OnSuccessSlowQueries(response) {
            var myJSON = JSON.stringify(response.d);
            const obj = JSON.parse(myJSON);
            ListSQ = JSON.parse(myJSON);
            ListSQ_cc = ListSQ;
            makeTableSlowQueries(ListSQ);
            var tableID = "SQTable";
            TableSort(tableID, ListSQ, makeTableSlowQueries, headerListSlowQueries);
            //DisplaySlowQueries('#SQTable')

        }
        function makeTableSlowQueries(ListSQ) {
            $("#SQTable").append('<tbody>');
            $('#list').pagination({ // you call the plugin
                dataSource: ListSQ, // pass all the data
                pageSize: 10, // put how many items per page you want
                callback: function (data, pagination) {
                    var txt = "";
                    var statement = "";
                    var query = "";
                    $('#SQTable tbody').empty();
                    var wrapper = $('#list .wrapper').empty();
                    
                    //txt += '<tbody>'
                    $.each(data, function (i, f) {

                        statement = ""
                        if (f.SQL_Statement.length > 0) {
                            statement = f.SQL_Statement.substring(0, 50) + '...';
                            query = '<td class="parentCell">' + statement + '<span class="tooltip1">' + f.SQL_Statement + "</span></td>";
                        }
                        else {
                            statement = '-';
                            query = '<td class="parentCell">' + statement + "</td>";
                        }

                        var stat = f.SQL_Statement;
                        /*Date format change*/
                        txt += '<tr class="GridItem"><td>' + f.Time + "</td>";
                        txt += '<td style="text-align:right;">' + f.Duration.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",") + "</td>";
                        txt += '<td style="text-align:right;">' + f.CPU_Time.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",") + "</td>";
                        txt += '<td style="text-align:right;">' + f.Physical_Reads.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",") + "</td>";
                        txt += '<td style="text-align:right;">' + f.Logical_Reads.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",") + "</td>";
                        txt += "<td>" + f.USERNAME + "</td>";
                        txt += "<td>" + f.DatabaseName + "</td>";
                        txt += query;
                        txt += '<td style="cursor:pointer;"><img src="img/copy_to_clip.png" class = "copyimg" onclick= "copyToClipboard(' + i + ')"></td ></tr>';
                        $("#SQTable").append(txt);
                        txt = "";



                    });
                }
            });
            $("#SQTable").append("</tbody>");
        }

        function fetchFragmentation() {
            start = Date.now();
            $('.loading-image').show();
            $.ajax({
                type: "POST",
                url: "" + myPageName + "/Fragmentation",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccessFragmentation,
                error: OnError,
                complete: function () {
                    $('.loading-image1').hide();
                }
            });
            
        }

        function OnSuccessFragmentation(response) {

            //document.getElementById("UpdateProgress2").style.display = "None";
            var myJSON = JSON.stringify(response.d);

            const obj = JSON.parse(myJSON);
            //console.log(obj);


            for (var i = 0; i < obj.oDBWiseFragmentation.length; i++) {

                for (var k in obj.oFragmentation) {

                    if (obj.oFragmentation[k].DatabaseName.toUpperCase() == obj.oDBWiseFragmentation[i].DatabaseName.toUpperCase()) {

                        if (obj.oFragmentation[k].Avg_Fragmentation_in_Percentage <= 10)
                            f1 = f1 + 1;
                        else if (obj.oFragmentation[k].Avg_Fragmentation_in_Percentage > 10 && obj.oFragmentation[k].Avg_Fragmentation_in_Percentage < 30) {
                            f2 = f2 + 1;
                            ListFrag.push(obj.oFragmentation[k]);
                        }
                        else {
                            f3 = f3 + 1;
                            ListFrag.push(obj.oFragmentation[k]);
                        }
                    }
                }

                FragArray.push(f1);
                FragArray.push(f2);
                FragArray.push(f3);

                f1 = 0;
                f2 = 0;
                f3 = 0;
            }


            dbArray = [];
            var temp = 0;

            for (var i = 0; i < FragArray.length; i++) {
                if (i != 0 && i % 3 == 0) {
                    temp = FragArray[i - 3] + FragArray[i - 2] + FragArray[i - 1];
                    dbArray.push(temp);
                }
                temp = 0;
            }
            temp = FragArray[FragArray.length - 3] + FragArray[FragArray.length - 2] + FragArray[FragArray.length - 1];
            dbArray.push(temp);

            innerDonutColor = [];
            //console.log("In the Database Details")
            for (var i in obj.oDBWiseFragmentation) {
                DBName.push(obj.oDBWiseFragmentation[i].DatabaseName)
            }


            //console.log(DBName)
            //console.log(fetch_for_first_time)
           
            for (var i = 0; i < dbArray.length; i++) {
                //innerDonutColor.push("#BCE4B1");  // <10%
                //innerDonutColor.push("#FBE19F");  // 10%-30%
                //innerDonutColor.push("#F29E9D");

                innerDonutColor.push("#B6D4AE");
                innerDonutColor.push("#81b69d");
                innerDonutColor.push("#48A684");
            }

            //red: "#FBE19F",
            //    orange: 'rgb(255, 159, 64)',
            //        yellow: 'rgb(255, 205, 86)',
            //            green: "#BCE4B1",
            //                blue: "#9AD3F0",
            //                    purple: 'rgb(206, 145, 237)',
            //                        grey: 'rgb(201, 203, 207)'

            var chart1 = new Chart(ctxFragmentation, {
                type: "doughnut",
                data: {
                    labels: ["<10%", "10%-30%", ">30%"],
                    
                    datasets: [
                        {
                            data: dbArray,
                            backgroundColor: [

                                "#3E5F69",
                                "#0D538A",
                                "#43B3D8",
                                "#A7DAE9",
                                "#98BDC2",
                                "#616A91",
                                "#213557",
                                "#233173"


                            ],
                            label: 'DatabaseName',
                        },
                        {
                            data: FragArray,

                            backgroundColor: innerDonutColor
                            // label: 'Fragmentation Percentage',
                            //borderColor: [
                            //    "#8DD17A",
                            //    "#64BCE8",
                            //    "#FF9999",
                            //]
                            //borderWidth: [0, 0, 0]
                        }

                    ]
                },

                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    legend: {
                        display: true,
                        position: "bottom",
                        align: "end",
                        labels: {
                            //fontColor: "#333",
                            //fontSize: 14,
                            //boxWidth: 16

                            generateLabels: function (chart) {
                                var data = chart.data;
                                return data.labels.map(function (label, i) {
                                    var meta = chart.getDatasetMeta(1);
                                    var ds = data.datasets[1];
                                    var arc = meta.data[i];
                                    var custom = arc && arc.custom || {};
                                    var getValueAtIndexOrDefault = Chart.helpers.getValueAtIndexOrDefault;
                                    var arcOpts = chart.options.elements.arc;
                                    var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
                                    customLabels = ["<10%", "10%-30%", ">30%"];
                                    var label1 = customLabels[arc._index];
                                    return {
                                        text: label1,
                                        fillStyle: fill,

                                    };
                                });
                            },

                        }
                        


                    },

                    tooltips: {

                        callbacks: {
                            label: function (item, data) {

                                if (data.datasets[item.datasetIndex].label == "DatabaseName") {

                                    return data.datasets[item.datasetIndex].label + ": " + obj.oDBWiseFragmentation[item.index].DatabaseName + ": " + data.datasets[item.datasetIndex].data[item.index];
                                }
                                else {
                                    // return "FragPercentage"
                                    if (item.index == 0 || item.index % 3 == 0) {
                                        if (boolFlag == true) {
                                            var label = [fragDBName];
                                            label.push("<10%: No Defragmentation Required" + ": " + data.datasets[item.datasetIndex].data[item.index]);
                                            return label;
                                        }
                                        else {
                                            var label = ["<10%: No Defragmentation Required" + ": " + data.datasets[item.datasetIndex].data[item.index]];
                                            return label;
                                        }
                                    }
                                    else if (item.index % 3 == 2) {
                                        if (boolFlag == true) {
                                            var label = [fragDBName];
                                            label.push("10%-30%: Suggested To Perform Index Reorganization" + ": " + data.datasets[item.datasetIndex].data[item.index]);
                                            return label;
                                        }
                                        else {
                                            var label = ["10%-30%: Suggested To Perform Index Reorganization" + ": " + data.datasets[item.datasetIndex].data[item.index]];
                                            return label;
                                        }
                                    }
                                    else {
                                        if (boolFlag == true) {
                                            var label = [fragDBName];
                                            label.push("30%<: Highly Suggested To Perform Index Rebuild" + ": " + data.datasets[item.datasetIndex].data[item.index]);
                                            return label;
                                        }
                                        else {
                                            var label = ["30%<: Highly Suggested To Perform Index Rebuild" + ": " + data.datasets[item.datasetIndex].data[item.index]];
                                            return label;
                                        }
                                    }
                                }
                                console.log(dbArray)
                               

                                // return data.datasets[item.datasetIndex].label+ ": "+ data.labels[item.index]+ ": "+ data.datasets[item.datasetIndex].data[item.index];
                            }

                        }
                    },

                    onClick: (evt, item) => {
                        chart1.update();
                        if (item[0]._datasetIndex == 0) {
                            updateFragmentationChart(chart1, item, obj);
                        }

                    }
                }
            });
            //console.log("Fragmentation data");
            //console.log(ListFrag);
            FragTableData = ListFrag;
            makeTableFragmentation(FragTableData);
            var tableID = "FragmentationTable";
            TableSort(tableID, ListFrag, makeTableFragmentation, headerListFrag);
            //fetchDatabaseDetails();
            end = Date.now();
            
        }
        function makeTableFragmentation(ListFrag) {
            $("#FragmentationTable").append('<tbody>');
            $('#list2').pagination({ // you call the plugin
                dataSource: ListFrag, // pass all the data
                pageSize: 10, // put how many items per page you want
                callback: function (data, pagination) {
                    // data will be chunk of your data (json.Product) per page
                    // that you need to display
                    var txt = "";
                    statement1 = "";
                    $('#FragmentationTable tbody').empty();
                    var wrapper = $('#list2 .wrapper').empty();
                    //txt += '<tbody>'
                    $.each(data, function (i, f) {

                        txt += '<tr class="GridItem"><td>' + f.DatabaseName + "</td>";
                        txt += '<td style="text-align:right;">' + f.Avg_Fragmentation_in_Percentage + "</td>";
                        txt += "<td>" + f.TableName + "</td>";
                        txt += "<td>" + f.IndexName + "</td>";
                        txt += "<td>" + f.Index_Type_Desc + "</td></tr>";

                        $("#FragmentationTable").append(txt);
                        txt = "";
                    });
                }
            });
            $("#FragmentationTable").append("</tbody>");
            $("#fragInstr").css("display", "block");

        }


        function updateFragmentationChart(chart, item, obj) {
            var fragUpdated = [];
            var index = item[0]._index * 3;
            boolFlag = true;

            fragUpdated[0] = FragArray[index]
            fragUpdated[1] = FragArray[index + 1]
            fragUpdated[2] = FragArray[index + 2]

            fragDBName = obj.oDBWiseFragmentation[item[0]._index].DatabaseName + ": ";

            chart.data.datasets[1].data = fragUpdated;
            chart.update();
        }
        //------------------------------------------

        function fetchDatabaseDetails() {
            //console.log("-------------***************-----------")         
            if (flagTabSwitch == 0) {
                fetch_for_first_time = DBName[0]
            }
            //console.log("start fetchDatabaseDetails:" + fetch_for_first_time);
            
            

            $.ajax({
               
                type: "POST",
                url: "" + myPageName + "/Get_DatabaseDetails",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data:
                    JSON.stringify({ 'Action': 'Tab_Switch', 'Object_Type': fetch_for_first_time , 'Table_Name': 'NULL' }),
                success: OnSuccessDatabaseDetails,
                error: OnError11,
                complete: function () {
                    $('.loading-image7').hide();
                    $('.loading-image_u008').hide();
                    $('#tblnameRefreshId').show();
                }
            });
            //console.log("End fetchDatabaseDetails:" + fetch_for_first_time);
            
        }
        function OnError11() {
            console.log("error while fetching database details");
        }
        

        function OnSuccessDatabaseDetails(response) {
            //console.log("start OnSuccessDatabaseDetails ", fetch_for_first_time)
        
            //console.log(flag)
            var myJSON = JSON.stringify(response.d);
            const obj = JSON.parse(myJSON);
            ListDD = JSON.parse(myJSON);
            ListDD_cc = ListDD;
            ListTable = []
            for (var k in obj) {
                ListTable.push(obj[k]);
            }
           
            if (flag == 0) {
                DBNameHeader()
                
                var z =document.getElementById(fetch_for_first_time);
                z.setAttribute("style", "background-color:#B8B8B8;");

            }
            
            //console.log("end OnSuccessDatabaseDetails ", fetch_for_first_time)
            makeTableDBDetails(ListTable);

            
        }

        function DBNameHeader() {
            //console.log("start DBNameHeader ");
            var iterator = 0;
            var myDiv = document.getElementById("DBHeaders");
           
           
            DBName.forEach(dbnm => {
                
                var x = document.createElement("BUTTON");
                x.setAttribute("class", "tablinks");
                //x.setAttribute("id", "btn_" + iterator);
                x.setAttribute("id", dbnm);
                //x.setAttribute("onclick", 'tab(" ' + iterator+' ")');
                x.onclick = (function (para) {
                   
                    return function () {
                        TabSwitch(para); 
                    
                    };
                })(dbnm);      
                x.innerHTML = dbnm;
                myDiv.appendChild(x);
                
            
                iterator++;
              
            })
           // var y = document.getElementById("btn_0");
           // y.style.backgroundColor = #B8B8B8;
            flag = 1;
            //console.log("end DBNameHeader " );
         
        }
        

        function TabSwitch(i) {
            event.preventDefault(); 
            $('.loading-image_u008').show();
            //console.log("start tabswitch", i);
            var header = document.getElementById(i);

            var btns = document.getElementsByClassName("tablinks");
           // console.log(btns);
            for (var t = 0; t < btns.length; t++) {
                btns[t].setAttribute("style", "background-color:#f1f1f1;");
               // console.log("in for loop", btns[t]);
            }

            header.setAttribute("style", "background-color:#B8B8B8;");
            //console.log("start tabswitch btn id is", i);
           
            isbtnload = 1;
            flagTabSwitch = 1;
            fetch_for_first_time = i;
          
            fetchDatabaseDetails();
            //console.log("end tabswitch",i);

            
        }
       
       
        function makeTableDBDetails(ListTable) {
            var txt = ""
            //console.log("*****start table******");
           
            $('#DatabaseDetails_Table tbody').empty();
           
            $('#list6').pagination({ // you call the plugin
                dataSource: ListTable, // pass all the data
                pageSize: 10, // put how many items per page you want
                callback: function (data, pagination) {
                    // data will be chunk of your data (json.Product) per page
                    // that you need to display
                    var txt = "";
                    
                    $('#DatabaseDetails_Table tbody').empty();
                    var wrapper = $('#list6 .wrapper').empty();
                    //txt += '<tbody>'
                    
                    $.each(data, function (i, f) {
                        
                        txt += '<tr class="GridItem"><td>' + f.TableName + "</td>";
                        txt += '<td style="text-align:right;">' + f.ColumnCnt + "</td>";
                        txt += '<td style="text-align:right;">' + f.RowCnt + "</td>";
                        txt += '<td style="text-align:right;">' + "<button class='popup' title='Display All Column Names' onclick='copyToClipboardDatabaseDetails(" + i + ")' id='popupbutton'> + </button></td></tr>";
                       

                        $("#DatabaseDetails_Table").append(txt);
                        txt = "";
                        //console.log(f.TableName);
                    });
                }
            });
            //$("#DatabaseDetails_Table").append("</tbody>");
           // console.log("********************");
            
           // console.log(" table created ")
            $('.loading-image_u008').hide(); 
        }
        function copyToClipboardDatabaseDetails(i) {
            event.preventDefault();
            
            var rownum = $('#list6').pagination('getSelectedPageNum');
            var text = ListDD_cc[((rownum - 1) * 10) + i]['TableName'];
            
            //console.log("In popup", text);
            current_Table = text;
            
            fetchTablesDetails(text)
            var x = document.getElementById("snackbarDisplayDetails");
            x.className = "show";
            
            var y = document.getElementById("close");
            var w = document.getElementById("snackBarFadedbg");
            w.className = "show";
            //console.log(y);
            y.onclick = function () {
                //x.className.style.display = "none";
                event.preventDefault();
                x.className = x.className.replace("show", "hide");
                w.className = x.className.replace("show", "hide");
                
            }
            document.addEventListener('keydown', function (event) {
                const key = event.key; // const {key} = event; in ES6+
                if (key === "Escape") {
                    //window.close();
                    event.preventDefault();
                    x.className = x.className.replace("show", "hide");
                    w.className = x.className.replace("show", "hide");
                }
            });

            
          
            
        }
        function fetchTablesDetails(text) {
            //console.log("-------------****table****-----------")
            $.ajax({

                type: "POST",
                url: "" + myPageName + "/Get_DatabaseDetails",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data:
                    JSON.stringify({ 'Action': 'Toggle_Switch', 'Object_Type': fetch_for_first_time, 'Table_Name': text }),
                success: OnSuccessTablesDetails,
                error: OnError22,
                complete: function () {
                    $('.loading-image2').hide();
                }
            });
           // console.log("End fetchTableDetails:" + fetch_for_first_time);

        }
        function OnError22() {
            console.log("error while fetching tables details");
        }
        function OnSuccessTablesDetails(response) {
            //console.log("start OnSuccessTablesDetails ", fetch_for_first_time)
           
           
            var myJSON = JSON.stringify(response.d);
            const obj = JSON.parse(myJSON);
            ListTablesDetails = []
            for (var k in obj) {
                ListTablesDetails.push(obj[k]);
            }
            //console.log(ListTablesDetails);
           // console.log("end OnSuccessTablesDetails ",ListTablesDetails)
            makeTableTBLDetails(ListTablesDetails);


        }

        function makeTableTBLDetails(ListTablesDetails) {
            var txt = ""
            //console.log("*****start table2******");
            $('#TableDetails_Table tbody').empty();
            $('#list7').pagination({ // you call the plugin
                dataSource: ListTablesDetails, // pass all the data
                pageSize: 10, // put how many items per page you want
                callback: function (data, pagination) {
                    // data will be chunk of your data (json.Product) per page
                    // that you need to display
                    var txt = "";

                    $('#TableDetails_Table tbody').empty();
                    var wrapper = $('#list7 .wrapper').empty();
                    //txt += '<tbody>'

                    $.each(data, function (i, f) {

                        txt += '<tr class="GridItem" ><td style="text-align:center;">' + current_Table + "</td>";
                        txt += '<td style="text-align:left;">' + f.ColumnName + "</td></tr>";
                        $("#TableDetails_Table").append(txt);
                        txt = "";
                        //console.log(f.ColumnName);
                    });
                }
            });
            //$("#DatabaseDetails_Table").append("</tbody>");
            //console.log("********************");
            //console.log(document.getElementsByClassName("DatabaseDetails_Table")[0].innerHTML);
            //console.log(" table2 created ")

        }






//------------------------------------------

        function fetchActiveSessions() {
            $.ajax({
                type: "POST",
                url: "" + myPageName + "/getActiveSessions",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccessActiveSessions,
                error: OnError,
                complete: function () {
                    $('.loading-image3').hide();
                }
            });
        }

        function OnSuccessActiveSessions(response) {
            var myJSON = JSON.stringify(response.d);
            //const obj = JSON.parse(myJSON);
            ListActiveSessions = JSON.parse(myJSON);
            //DisplayDeadlock('#DeadlockTable')
            makeTableActiveSessions(ListActiveSessions);
            var tableID = "ActiveSessionsTable";
            TableSort(tableID, ListActiveSessions, makeTableActiveSessions, headerListActiveLogin);
        }
        function makeTableActiveSessions(ListActiveSessions) {
            $("#ActiveSessionsTable").append("<tbody>");
            $('.activeSessions').text(ListActiveSessions.length);
            $('#list3').pagination({ // you call the plugin
                dataSource: ListActiveSessions, // pass all the data
                pageSize: 11, // put how many items per page you want
                callback: function (data, pagination) {
                    // data will be chunk of your data (json.Product) per page
                    // that you need to display
                    var txt = "";

                    $('#ActiveSessionsTable tbody').empty();
                    var wrapper = $('#list3 .wrapper').empty();
                    //txt += '<tbody>'
                    $.each(data, function (i, f) {
                        txt += '<tr class="GridItem"><td>' + f.Login_Id + "</td>";
                        txt += "<td>" + f.User_Name + "</td>";
                        txt += '<td style="text-align:center;">' + f.Login_Time + "</td></tr>";

                        $("#ActiveSessionsTable").append(txt);
                        txt = "";

                    });
                    txt += '</tbody>'
                    $("#ActiveSessionsTable").append(txt);
                }
            });

            $("#loginInstr").css("display", "block");
        }

        function getActiveSessionsDropdownList() {
        
            $("table#ActiveSessionsTable tr th").each(function () {

                var text = $(this).html()
                text = text.substring(0, text.length - 2)
                ActiveSessionDropdownList.push("<option>" + text + "</option>")
            })

            document.getElementById("ActiveSessionsSearchOn").innerHTML = ActiveSessionDropdownList.join("");
            //console.log("list ", ActiveSessionDropdownList)
        }

        var ASSearchOnColumn;
        function getActiveSessionDropdownListSelectedItem(){
            ASSearchOnColumn = document.getElementById("ActiveSessionsSearchOn").value;
            switch (ASSearchOnColumn) {
                case 'Login ID':
                    ASSearchOnColumn = 'Login_Id';
                    break;
                
                case 'User Group':
                    ASSearchOnColumn = 'User_Name';
                    break;

                case 'Login Time':
                    ASSearchOnColumn = 'Login_Time';
                    break;
            }
            //console.log("value", ASSearchOnColumn)
        }

        $("table#ActiveSessionsTable tr th").on('click', function(){
            var col =$(this).data('column')
            var order = $(this).data('order')
            var text =$(this).html()
            text = text.substring(0, text.length - 1)

            if (order == 'desc') {
                $(this).data('order', "asc")
                ListActiveSessions = ListActiveSessions.sort((a, b) => a[col] > b[col] ? 1 : -1)
                text += '&#9660'
            } else {
                $(this).data('order', "desc")
                ListActiveSessions = ListActiveSessions.sort((a, b) => a[col] < b[col] ? 1 : -1)
                text += '&#9650'
            }
            $(this).html(text)

            OnSuccessActiveSessions(ListActiveSessions)
    
        })

         //searching functionality
         $('#ActiveSessionsSearchText').on('keyup', function () {
            var value = $(this).val()
            //console.log("value", value)
            var data = searchData(value, ListActiveSessions)
            OnSuccessActiveSessions(data)
        })

        function searchData(value, data) {
            var filteredData = []

            for (var i = 0; i < data.length; i++) {
                value = value.toLowerCase();
                var name = data[i][ASSearchOnColumn].toLowerCase()
                
                // var name = data[i].name.toLowerCase()+data[i].age.toLowerCase()+data[i].marks.toLowerCase()

                if (name.includes(value)) {
                    filteredData.push(data[i])
                }
            }
            
            return filteredData
        }





        function copyToClipboard(i) {
            event.preventDefault();
            var rownum = $('#list').pagination('getSelectedPageNum');
            var text = ListSQ_cc[((rownum - 1) * 10) + i]['SQL_Statement'];
            if (text == '') {
                var x = document.getElementById("snackbarBlank");
                x.className = "show";
                setTimeout(function () { x.className = x.className.replace("show", ""); }, 5000);
            }
            else {               
                var dummy = document.getElementById("copy");
                dummy.value = text;
                dummy.style.display = "block";
                dummy.select();
                document.execCommand("copy");
                dummy.style.display = "none";
                var x = document.getElementById("snackbar");
                x.className = "show";
                setTimeout(function () { x.className = x.className.replace("show", ""); }, 5000);
            }
        }

        function copyToClipboardDeadlock(i) {

            event.preventDefault();
            var rownum = $('#list1').pagination('getSelectedPageNum');
            var text = ListDeadlock_cc[((rownum - 1) * 10) + i]['Query'];
            if (text == '') {
                var x = document.getElementById("snackbarBlank");
                x.className = "show";
                setTimeout(function () { x.className = x.className.replace("show", ""); }, 5000);
            }
            else {
                var dummy = document.getElementById("copy");
                dummy.value = text;
                dummy.style.display = "block";
                dummy.select();
                document.execCommand("copy");
                dummy.style.display = "none";
                var x = document.getElementById("snackbar");
                x.className = "show";
                setTimeout(function () { x.className = x.className.replace("show", ""); }, 5000);
            }
        }

        function copyToClipboardGranularity(i) {

            event.preventDefault();
            var rownum = $('#listGranularity').pagination('getSelectedPageNum');
            var text = ListGranularity_cc[((rownum - 1) * 10) + i]['SQL_Statement'];
            if (text == '') {
                var x = document.getElementById("snackbarBlank");
                x.className = "show";
                setTimeout(function () { x.className = x.className.replace("show", ""); }, 5000);
            }
            else {
                var dummy = document.getElementById("copy");
                dummy.value = text;
                dummy.style.display = "block";
                dummy.select();
                document.execCommand("copy");
                dummy.style.display = "none";
                var x = document.getElementById("snackbar");
                x.className = "show";
                setTimeout(function () { x.className = x.className.replace("show", ""); }, 5000);
            }
        }

        function copyToClipboardWaitStatistics(i) {

            event.preventDefault();
            var rownum = $('#list5').pagination('getSelectedPageNum');
            var text = ListWS_cc[((rownum - 1) * 10) + i]['Query'];
            if (text == '') {
                var x = document.getElementById("snackbarBlank");
                x.className = "show";
                setTimeout(function () { x.className = x.className.replace("show", ""); }, 5000);
            }
            else {
                var dummy = document.getElementById("copy");
                dummy.value = text;
                dummy.style.display = "block";
                dummy.select();
                document.execCommand("copy");
                dummy.style.display = "none";
                var x = document.getElementById("snackbar");
                x.className = "show";
                setTimeout(function () { x.className = x.className.replace("show", ""); }, 5000);
            }
        }


        /* Date-Time filter for Slow Queries Table */

        var SQstartTime = new Date;
        var SQstopTime = new Date;
        // var SQstartTimeval = new Date;
        //var stopTimeval = new Date;
        //$(document).ready(function(){
     //   $("#SQdemoStart").click(function () {
            $('#SQdemoStart').datetimepicker({
                ownerDocument: document,
                step: 10,
                contentWindow: window,
                closeOnTimeSelect: true,
                closeOnWithoutClick: true,
                closeOnInputClick: true,
                maxDate: new Date()
            });
      //  });
      //  $("#SQdemoStop").click(function () {
            $('#SQdemoStop').datetimepicker({
                ownerDocument: document,
                step: 10,
                contentWindow: window,
                closeOnTimeSelect: true,
                closeOnWithoutClick: true,
                closeOnInputClick: true,
                maxDate: new Date()
            });
       // });

        $("#SQduration").keypress(function (event) {

            var keyCodeEntered = (event.which) ? event.which : (window.event.keyCode) ? window.event.keyCode : -1;
            if (((keyCodeEntered >= 48) && (keyCodeEntered <= 57)) || keyCodeEntered == 46 || keyCodeEntered == 8) {
                return true;
            }
            else {
                return false;
            }
        });

        $("#WSduration").keypress(function (event) {

            var keyCodeEntered = (event.which) ? event.which : (window.event.keyCode) ? window.event.keyCode : -1;
            if (((keyCodeEntered >= 48) && (keyCodeEntered <= 57)) || keyCodeEntered == 46 || keyCodeEntered == 8) {
                return true;
            }
            else {
                return false;
            }
        });

        $("#SQbtnId").click(function () {
            var x = document.getElementById("lblError");
            x.innerHTML = "";

          
            SQstartTime = moment($("#SQdemoStart").val(), 'DD-MMM-YYYY HH:mm:ss A ').format('YYYY/MM/DD HH:mm:ss');
            SQstopTime = moment($("#SQdemoStop").val(), 'DD-MMM-YYYY HH:mm:ss A ').format('YYYY/MM/DD HH:mm:ss');
            SQduration = $("#SQduration").val();




            $('.loading-image_u07').show();


            if (SQduration == '') {
                SQduration = '5'
            }
            if ($("#SQdemoStart").val() == '') {
                SQstartTime = '1970/01/01 00:00:00'
            }
            if ($("#SQdemoStop").val() == '') {
                var today = new Date();
                var dd = String(today.getDate()).padStart(2, '0');
                var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
                var yyyy = today.getFullYear();
                var hr = today.getHours();
                var min = today.getMinutes();

                today = yyyy + '/' + mm + '/' + dd + ' ' + hr + ':' + min + ':00';
                // document.write(today);
                SQstopTime = today;
            }
            if (new Date(SQstopTime) < new Date(SQstartTime)) {
                //var x = document.getElementById("lblError");
                //x.innerHTML = "Please enter valid Date Time!";
                $('.loading-image_u07').hide();
                var x = document.getElementById("error");
                x.className = "show";
                setTimeout(function () { x.className = x.className.replace("show", ""); }, 5000);
            }
            else {
                $.ajax({
                    type: "POST",
                    url: "" + myPageName + "/GetFilteredData_SlowQueries",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data:
                        JSON.stringify({ 'ToTime': SQstartTime, 'FromTime': SQstopTime, 'Duration': $("#SQduration").val() }),
                    success: OnSuccessSlowQueries,
                    error: OnError,
                    complete: function () {
                        $('.loading-image5').hide();

                        $('.loading-image_u07').hide();

                    }
                });
            }

        })


     
        /* Date-Time filter for Summary Report */

        var ReportstartTime = new Date;
        var ReportstopTime = new Date;
        //$("#ReportStart").click(function () {
            $('#ReportStart').datetimepicker({
                ownerDocument: document,
                step: 10,
                contentWindow: window,
                closeOnTimeSelect: true,
                closeOnWithoutClick: true,
                closeOnInputClick: true,
                maxDate: new Date()
            });
        //});
        //$("#ReportStop").click(function () {
            $('#ReportStop').datetimepicker({
                ownerDocument: document,
                step: 10,
                contentWindow: window,
                closeOnTimeSelect: true,
                closeOnWithoutClick: true,
                closeOnInputClick: true,
                maxDate: new Date()
            });
        //});

        $("#ReportbtnId").click(function () {
            var x = document.getElementById("lblError");
            x.innerHTML = "";
            ReportstartTime = $("#ReportStart").val();
            ReportstopTime = $("#ReportStop").val();
            Recepients = $("#Recepients").val();
            if (ReportstartTime == '') {
                ReportstartTime = '1970/01/01 00:00:00'
            }
            if (ReportstopTime == '') {
                var today = new Date();
                var dd = String(today.getDate()).padStart(2, '0');
                var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
                var yyyy = today.getFullYear();
                var hr = today.getHours();
                var min = today.getMinutes();

                today = yyyy + '/' + mm + '/' + dd + ' ' + hr + ':' + min + ':00';
                // document.write(today);
                ReportstopTime = today;
            }
            if ((new Date(ReportstopTime) < new Date(ReportstartTime))) {
                //var x = document.getElementById("lblError");
                //x.innerHTML = "Please enter valid Date Time!";
                var x = document.getElementById("error");
                x.className = "show";
                setTimeout(function () { x.className = x.className.replace("show", ""); }, 5000);
            }


            else {

                var bool = 0;
                if (Recepients.indexOf(";") !== -1 || Recepients.indexOf(",") !== -1) {
                    if (Recepients.indexOf(",") !== -1) {
                        Recepients.replace(",", ";");
                    }
                    if (Recepients.indexOf(";") !== -1) {
                        var del = ";";
                    }
                    var res = Recepients.split(del);
                    for (var i = 0; i < res.length; i++) {
                        if (res[i].substring(res[i].length - 10, res[i].length) !== "@finiq.com") {

                            bool = 2;
                        }
                        else {
                            bool = 1;
                        }
                    }
                }
                else {

                    if (Recepients.substring(Recepients.length - 10, Recepients.length) !== "@finiq.com") {
                        bool = 2;
                    }
                    else {
                        bool = 1;
                    }
                }

                if (bool == 1) {
                    $.ajax({
                        type: "POST",
                        url: "" + myPageName + "/Generate_Summaryreport",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        data:
                            JSON.stringify({ 'ReportStart': ReportstartTime, 'ReportStop': ReportstopTime, 'Recepients': $("#Recepients").val() }),
                        success: OnSuccessSummaryReport,
                        error: OnError,
                        complete: function () {
                            $('.loading-image2').hide();
                        }

                    });
                    //var x = document.getElementById("lblError");
                    //x.innerHTML = "Report has been mailed successfully !";
                    var x = document.getElementById("snackbarReport");
                    x.className = "show";
                    setTimeout(function () { x.className = x.className.replace("show", ""); }, 5000);    

                }
                if (bool == 2) {
                    //var x = document.getElementById("lblError");
                    //x.innerHTML = "Please enter valid Email Id !";
                    var x = document.getElementById("snackbarMail");
                    x.className = "show";
                    setTimeout(function () { x.className = x.className.replace("show", ""); }, 5000);
                }

            }
        });


        function OnSuccessSummaryReport(response) {
            var myJSON = JSON.stringify(response.d);

        }




        /* Date-Time filter for Wait Statistics Table */

        var WSstartTime = new Date;
        var WSstopTime = new Date;
      //  $("#WSdemoStart").click(function () {
            $('#WSdemoStart').datetimepicker({
                ownerDocument: document,
                step: 10,
                contentWindow: window,
                closeOnTimeSelect: true,
                closeOnWithoutClick: true,
                closeOnInputClick: true,
                maxDate: new Date()
            });
      //  });
      //  $("#WSdemoStop").click(function () {
            $('#WSdemoStop').datetimepicker({
                ownerDocument: document,
                step: 10,
                contentWindow: window,
                closeOnTimeSelect: true,
                closeOnWithoutClick: true,
                closeOnInputClick: true,
                maxDate: new Date()
            });
       // });

        $("#WSbtnId").click(function () {
            var x = document.getElementById("lblError");
            x.innerHTML = "";
            WSstartTime = moment($("#WSdemoStart").val(), 'DD-MMM-YYYY HH:mm:ss A ').format('YYYY/MM/DD HH:mm:ss');
            WSstopTime = moment($("#WSdemoStop").val(), 'DD-MMM-YYYY HH:mm:ss A ').format('YYYY/MM/DD HH:mm:ss');
            WSduration = $("#WSduration").val();

            // $('.loading-imageWait1').show();
            $('.loading-imageWait').show();

            if ($("#WSduration").val() == '') {
                WSduration = '0'
            }

            if ($("#WSdemoStart").val() == '') {
                WSstartTime = '1970/01/01 00:00:00'
            }
            if ($("#WSdemoStop").val() == '') {
                var today = new Date();
                var dd = String(today.getDate()).padStart(2, '0');
                var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
                var yyyy = today.getFullYear();
                var hr = today.getHours();
                var min = today.getMinutes();

                today = yyyy + '/' + mm + '/' + dd + ' ' + hr + ':' + min + ':00';
                // document.write(today);
                WSstopTime = today;
            }

            if (new Date(WSstopTime) < new Date(WSstartTime)) {
                //var x = document.getElementById("lblError");
                //x.innerHTML = "Please enter valid Date Time!";
                $('.loading-imageWait1').hide();
                var x = document.getElementById("error");
                x.className = "show";
                setTimeout(function () { x.className = x.className.replace("show", ""); }, 5000);
            }
            else {
                isFiltered = 1;
                $.ajax({
                    type: "POST",
                    url: "" + myPageName + "/GetFilteredData_WaitStatistics",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data:
                        JSON.stringify({ 'ToTime': WSstartTime, 'FromTime': WSstopTime, 'Duration': $("#WSduration").val() }),
                    success: OnSuccessWaitStatistics,
                    error: OnError,
                    complete: function () {
                        $('.loading-imageWait').hide();

                        $('.loading-imageWait1').hide();

                    }
                });
            }


           
        })

        $("#WSRefreshId").click(function () {
            //added by Uddesh on Aug. 10, 2021
            var newHeader;
            $('#WSHeaders').empty();
            newHeader = "<th>Time</th><th>Wait Type</th><th>Duration</th><th>Signal Duration</th><th>Wait resource</th><th>Session ID</th><th>Query</th><th></th>"
            $('#WSHeaders').append(newHeader);
            //changes made by Uddesh done
            fetchWaitStatistics();

            $('#WSRefreshId').hide();
            $('.loading-imageWait').show();

            document.getElementById("WSdemoStart").value = '';
            //document.getElementById("WSdemoStart").placeholder = 'dd- HH:mm';
            document.getElementById("WSdemoStop").value = '';
            //document.getElementById("WSdemoStop").placeholder = 'yyyy/MM/dd HH:mm';
        })
        $("#SQRefreshId").click(function () {
            //added by Uddesh
            var newHeader;
            $('#SQHeaders').empty();
            newHeader = "<th>Time</th><th>Duration</th><th>CPU Time</th><th>Physical Reads</th><th>Logical Reads</th><th>Username</th><th>Database Name</th><th>SQL Statement</th><th></th>"
            $('#SQHeaders').append(newHeader);
            //changes made by Uddesh done
            fetchSlowQueries();

            $('#SQRefreshId').hide();
            $('.loading-image_u07').show();

            document.getElementById("SQdemoStart").value = '';
            //document.getElementById("SQdemoStart").placeholder = 'yyyy/MM/dd HH:mm';
            document.getElementById("SQdemoStop").value = '';
            //document.getElementById("SQdemoStop").placeholder = 'yyyy/MM/dd HH:mm';
        })
        $("#DLRefreshId").click(function () {
            //added by Uddesh
            var newHeader;
            $('#DLHeaders').empty();
            newHeader = "<th>Time</th><th>Object Name</th><th>Database Name</th><th>SP ID</th><th>Process ID</th><th>Victim</th><th>Host Name</th><th>Status</th><th>Input Buffer</th><th>SP Name</th><th>Owner ID</th><th>Waiter ID</th><th>Owner Lockmode</th><th>Waiter Lockmode</th><th>Query</th><th></th>"
            $('#DLHeaders').append(newHeader);
            //changes made by Uddesh done

            fetchDeadlock();

            $('#DLRefreshId').hide();
            $('.loading-image_u007').show();

            document.getElementById("DLdemoStart").value = '';
            // document.getElementById("DLdemoStart").placeholder = 'yyyy/MM/dd HH:mm';
            document.getElementById("DLdemoStop").value = '';
            //document.getElementById("DLdemoStop").placeholder = 'yyyy/MM/dd HH:mm';
        })
        $("#GranularityRefreshId").click(function () {
            //added by Uddesh
            var newHeader;
            $('#GrHeaders').empty();
            newHeader = "<th>CPU Utilisation(%)</th><th>Time</th><th>SQL Statement</th><th></th>"
            $('#GrHeaders').append(newHeader);
            //changes made by Uddesh done
            fetchCPUUtilisationGranularity();
            //document.getElementById("WSdemoStart").value = '';
            //document.getElementById("WSdemoStart").placeholder = 'yyyy/MM/dd HH:mm';
            //document.getElementById("WSdemoStop").value = '';
            //document.getElementById("WSdemoStop").placeholder = 'yyyy/MM/dd HH:mm';
        })
        //DB details refresh id
        $("#tblnameRefreshId").click(function () {

           //changes made by 
            document.getElementById("FilterTableName").value = '';
            fetchDatabaseDetails();

        })


        //Refresh button Added by Uddesh
        $("#FragmentationRefreshId").click(function () {
            var newHeader;
            $('#FrHeaders').empty();
            newHeader = '<th>Database Name</th><th>Average<wbr> Fragmentation(%)</th><th>Table Name</th><th>Index Name</th><th>Index Type</th>'
            $('#FrHeaders').append(newHeader);
            FragTableData = ListFrag;
            makeTableFragmentation(FragTableData);  //DBA-303, to update table data only and not chart
            var tableID = "FragmentationTable";
            TableSort(tableID, ListFrag, makeTableFragmentation, headerListFrag);
        })

        $('#ActiveSessionsRefreshId').click(function () {
            var newHeader;
            $('#ASHeaders').empty();
            newHeader = "<th >Login ID </th><th>User Group </th><th>Login Time </th></tr>"
            $('#ASHeaders').append(newHeader);
            fetchActiveSessions();
        })
        /* Date-Time filter for Granularity Table */

        var GranularitystartTime = new Date;
        var GranularitystopTime = new Date;

        $('#GranularityFrom').datetimepicker({
            ownerDocument: document,
            step: 10,
            contentWindow: window,
            closeOnTimeSelect: true,
            closeOnWithoutClick: true,
            closeOnInputClick: true,
            maxDate: new Date()
        });

        $('#GranularityTo').datetimepicker({
            ownerDocument: document,
            step: 10,
            contentWindow: window,
            closeOnTimeSelect: true,
            closeOnWithoutClick: true,
            closeOnInputClick: true,
            maxDate: new Date()
        });

        $("#GranularitybtnId").click(function () {
            var x = document.getElementById("lblError");
            x.innerHTML = "";
            GranularitystartTime = moment($("#GranularityFrom").val(), 'DD-MMM-YYYY HH:mm:ss A ').format('YYYY/MM/DD HH:mm:ss');
            GranularitystopTime = moment($("#GranularityTo").val(), 'DD-MMM-YYYY HH:mm:ss A ').format('YYYY/MM/DD HH:mm:ss');
            $('.loading-imageGranularity').show();


            //$('#GranularityFrom').empty();


            if ($("#GranularityFrom").val() == '') {
                GranularitystartTime = '1970/01/01 00:00:00'
            }
            if ($("#GranularityTo").val() == '') {
                var today = new Date();
                var dd = String(today.getDate()).padStart(2, '0');
                var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
                var yyyy = today.getFullYear();
                var hr = today.getHours();
                var min = today.getMinutes();

                today = yyyy + '/' + mm + '/' + dd + ' ' + hr + ':' + min + ':00';
                // document.write(today);
                GranularitystopTime = today;
            }
            if (new Date(GranularitystopTime) < new Date(GranularitystartTime)) {
                //var x = document.getElementById("lblError");
                //x.innerHTML = "Please enter valid Date Time!";
                $('.loading-imageGranularity').hide();
                var x = document.getElementById("error");
                x.className = "show";
                setTimeout(function () { x.className = x.className.replace("show", ""); }, 5000);
            }

            else {
                $.ajax({
                    type: "POST",
                    url: "" + myPageName + "/GetFilteredData_Granularity",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data:
                        JSON.stringify({ 'ToTime': GranularitystartTime, 'FromTime': GranularitystopTime }),
                    success: OnSuccessfetchCPUUtilisationGranularity,
                    error: OnError,
                    complete: function () {
                        $('.loading-imageGranularity1').hide();
                        $('.loading-imageGranularity').hide();
                    }
                });
            }

        })



        /* Date-Time filter for Deadlock Table */

        var DLstartTime = new Date;
        var DLstopTime = new Date;
        // var SQstartTimeval = new Date;
        //var stopTimeval = new Date;
        //$(document).ready(function(){
       // $("#DLdemoStart").click(function () {
            $('#DLdemoStart').datetimepicker({
                ownerDocument: document,
                step: 10,
                contentWindow: window,
                closeOnTimeSelect: true,
                closeOnWithoutClick: true,
                closeOnInputClick: true,
                maxDate: new Date()
            });
       // });
      //  $("#DLdemoStop").click(function () {
            $('#DLdemoStop').datetimepicker({
                ownerDocument: document,
                step: 10,
                contentWindow: window,
                closeOnTimeSelect: true,
                closeOnWithoutClick: true,
                closeOnInputClick: true,
                maxDate: new Date()
            });

      //  });

        $("#DLbtnId").click(function () {
            var x = document.getElementById("lblError");
            x.innerHTML = "";
            DLstartTime = moment($("#DLdemoStart").val(), 'DD-MMM-YYYY HH:mm:ss A ').format('YYYY/MM/DD HH:mm:ss');
            DLstopTime = moment($("#DLdemoStop").val(), 'DD-MMM-YYYY HH:mm:ss A ').format('YYYY/MM/DD HH:mm:ss');
            $('.loading-image_u007').show();


            $('#DLdemoStart').empty();


            if ($("#DLdemoStart").val() == '') {
                DLstartTime = '1970/01/01 00:00:00'
            }
            if ($("#DLdemoStop").val() == '') {
                var today = new Date();
                var dd = String(today.getDate()).padStart(2, '0');
                var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
                var yyyy = today.getFullYear();
                var hr = today.getHours();
                var min = today.getMinutes();

                today = yyyy + '/' + mm + '/' + dd + ' ' + hr + ':' + min + ':00';
                // document.write(today);
                DLstopTime = today;
            }
            if (new Date(DLstopTime) < new Date(DLstartTime)) {
                //var x = document.getElementById("lblError");
                //x.innerHTML = "Please enter valid Date Time!";
                $('.loading-image_u007').hide();
                var x = document.getElementById("error");
                x.className = "show";
                setTimeout(function () { x.className = x.className.replace("show", ""); }, 5000);
            }

            else {
                $.ajax({
                    type: "POST",
                    url: "" + myPageName + "/GetFilteredData_Deadlock",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data:
                        JSON.stringify({ 'ToTime': DLstartTime, 'FromTime': DLstopTime }),
                    success: OnSuccessDeadlock,
                    error: OnError,
                    complete: function () {
                        $('.loading-image7').hide();
                        $('.loading-image_u007').hide();
                    }
                });
            }

            //var filteredData = ListDeadlock.filter((d) => {
            //    return new Date(d.Time).getTime() >= new Date(DLstartTime).getTime() && new Date(d.Time).getTime() < new Date(DLstopTime).getTime();

            //});
            //ListDeadlock_cc = filteredData;

            //$('#list1').pagination({ // you call the plugin
            //    dataSource: filteredData, // pass all the data
            //    pageSize: 10, // put how many items per page you want
            //    callback: function (data, pagination) {
            //        // data will be chunk of your data (json.Product) per page
            //        // that you need to display
            //        var txt = "";
            //        var statement1 = "";
            //        $('#DeadlockTable').empty();
            //        var wrapper = $('#list1 .wrapper').empty();
            //        txt += '<tr class= "GridHeader"><th>Time</th><th>Object Name</th><th>DB_ID</th><th>SP_ID</th><th>Process ID</th><th>Victim</th><th>Host Name</th><th>Status</th><th>Input Buffer</th><th>SP Name</th><th>Owner ID</th><th>Waiter ID</th><th>Owner Lockmode</th><th>Waiter Lockmode</th><th>Query</th><th></th></tr>'
            //        $.each(data, function (i, f) {

            //            statement1 = ""
            //            statement1 = f.Query.substring(0, 30) + '...';
            //            var stat = f.Query;

            //            txt += '<tr class="GridItem"><td style="text-align:center;width:120px;">' + f.Time + "</td>";
            //            txt += '<td width:170px;">' + f.ObjectName + "</td>";
            //            txt += '<td style="text-align:right;">' + f.DatabaseID + "</td>";
            //            txt += '<td style="text-align:right;">' + f.SP_ID + "</td>";
            //            txt += "<td>" + f.ProcessID + "</td>";
            //            txt += "<td>" + f.Victim + "</td>";
            //            txt += "<td>" + f.HostName + "</td>";
            //            txt += "<td>" + f.Status + "</td>";
            //            txt += "<td>" + f.InputBuffer + "</td>";
            //            txt += "<td>" + f.SPName + "</td>";
            //            txt += "<td>" + f.OwnerID + "</td>";
            //            txt += "<td>" + f.WaiterID + "</td>";
            //            txt += "<td>" + f.OwnerLockMode + "</td>";
            //            txt += "<td>" + f.WaiterLockMode + "</td>";
            //            txt += "<td>" + statement1 + "</td>";
            //            txt += '<td style="cursor:pointer;"><img src="img/copy_to_clip.png" class="copyimg" onclick="copyToClipboardDeadlock(' + i + ')"></td ></tr>';
            //            $("#DeadlockTable").append(txt);
            //            txt = "";

            //        });
            //    }
            //});
        })



        function confirmation(obj, title) {
            var dialogText = "This will logout all users except demo users you enterd. \n Do you want to continue?"

            confirmationDialog(obj, title, dialogText)
        }

       //--------Serch Filter----------------

        //$('#searchFilter').keyup(function () {
        //    var $rows = $('#DeadlockTable tr');
        //    console.log($rows.value);
        //    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
        //    console.log("**************************************************")
        //    $rows.hide();
        //    console.log("-----------------------")
        //    $rows.show().filter(function () {
        //        console.log("++++++++++++++++++++++++++++++++++++++++++++++")
        //        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        //        return !~text.indexOf(val);
        //    }).hide();
        //});

        

        function sort_by_key_asc(array, key) {
            if (key === 'Time') {
                return array.sort(function (a, b) {
                    var x = new Date;
                    var y = new Date;
                    x = moment(a[key], 'DD-MM-YYYY HH:mm:ss A');
                    
                    y = moment(b[key], 'DD-MM-YYYY HH:mm:ss A'); 
                    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
                });
            }
            else {
                return array.sort(function (a, b) {
                    var x = a[key]; var y = b[key];
                    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
                });
            }
           
        }

        function sort_by_key_desc(array, key) {
            if (key === 'Time') {
                return array.sort(function (a, b) {
                    var x = new Date;
                    var y = new Date;
                    x = moment(b[key], 'DD-MM-YYYY HH:mm:ss A');
                    y = moment(a[key], 'DD-MM-YYYY HH:mm:ss A');
                    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
                });
            }
            else {
                return array.sort(function (a, b) {
                    var x = b[key]; var y = a[key];
                    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
                });
            }
        }
        /*invoking filter function for fragmentation*/
       
        $("#Fragfilterpercent").keyup(function (e) {
            if (e.which == 13) {
                //console.log('You pressed enter!');
                $("#FragbtnId").click();
            }
        });
        /*changed 8/3/22*/
        $("#FilterTableName").keyup(function (e) {
            if (e.which == 13) {
                //console.log('You pressed enter!');
                $("#tblnamesearchbtnId").click();
            }
        });


        $("#FragbtnId").click(function () {
            var input = document.getElementById("Fragfilterpercent");
            //var filter = input.value.toUpperCase()
            var FilterFragmentationThreshhold = input.value;
            //console.log(FilterFragmentationThreshhold);
            $.ajax({
                type: "POST",
                url: "" + myPageName + "/GetFilteredData_Fragmentation",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data:
                    JSON.stringify({ 'FilterFragmentationThreshhold': FilterFragmentationThreshhold }),
                success: OnSuccessFilterFragmentation,
                error: OnError,
                complete: function () {
                    $('.loading-image7').hide();
                    $('.loading-image_u007').hide();
                }
            });
            
        })

        function OnSuccessFilterFragmentation(response)
        {

            //document.getElementById("UpdateProgress2").style.display = "None";
            var myJSON = JSON.stringify(response.d);

            const ListFrag = JSON.parse(myJSON);
            //console.log(ListFrag);
            FragTableData = ListFrag;
            makeTableFragmentation(FragTableData);
            var tableID = "FragmentationTable";
            TableSort(tableID, ListFrag, makeTableFragmentation, headerListFrag);

        }




        /*$("#fragtblnamesearchbtnId").click(function () {
            FilterFragmentationTable = filterByProperty(FragTableData, "Avg_Fragmentation_in_Percentage", "Fragfilterpercent");
            makeTableFragmentation(FilterFragmentationTable);
        })*/

        $("#tblnamesearchbtnId").click(function () {

            //console.log("after search button click");
            makeTableDBDetails(filterByProperty(ListDD, "TableName", "FilterTableName"));

        })

        /*filter function <added by Priyanka D*/
        function filterByProperty(array, prop, inputboxId)
        {
            var filtered = [];
            var input = document.getElementById(inputboxId);
            //var filter = input.value.toUpperCase()
            var filter = input.value;
            //console.log("filter", filter);
           // console.log("prop", prop);
            //console.log("typeof_filter", typeof (filter));
            
           
            for (var i = 0; i < array.length; i++)
            {

                var obj = array[i];
                var txtValue = obj[prop]
                //console.log("obj", obj);
                //console.log("txtValue", txtValue);
                //console.log("check", txtValue.toUpperCase());
                filter = filter.toUpperCase();
                /*if (txtValue>filter) {
                    
                        filtered.push(array[i]);
                    
                }*/
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                     
                     filtered.push(array[i]);
                    
                }



            }
            //console.log("filtered data", filtered);
            return filtered;

        }
    
       


    </script>
    
</asp:Content>
