app.right-menu.component.html 3.36 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85
<div class="layout-right-panel" [ngClass]="{'layout-right-panel-active': app.rightPanelMenuActive}" (click)="app.rightMenuClick = true">
    <p-tabView>
        <p-tabPanel header="Status">
            <div class="status-title">
                <span>Datacenter Status</span>
                <i class="pi pi-download"></i>
            </div>
            <div>
                <p-progressBar [value]="88" [showValue]="false"></p-progressBar>
            </div>
            <div class="status-content">
                <span class="percentage-1">65</span><span class="percentage-2">/88</span> Servers Online
            </div>

            <div class="status-title">
                <span>Performance Status</span>
                <i class="pi pi-clock"></i>
            </div>
            <div>
                <p-progressBar [value]="65" [showValue]="false"></p-progressBar>
            </div>
            <div class="status-content">
                <span class="percentage-1">4</span>
                <span class="percentage-2">/5</span> 
                Active Pipeline
            </div>

            <div class="status-title">
                <span>Drivers on Way</span>
                <i class="pi pi-cloud"></i>
            </div>
            <div>
                <p-progressBar [value]="35" [showValue]="false"></p-progressBar>
            </div>
            <div class="status-content">
                <span class="percentage-1">12</span>
                <span class="percentage-2">/40</span> 
                Drivers
            </div>

            <div class="status-title">
                <span>Datacenter Status</span>
                <i class="pi pi-map-marker"></i>
            </div>
            <div>
                <p-progressBar [value]="85" [showValue]="false"></p-progressBar>
            </div>
            <div class="status-content">
                <span class="percentage-1">65</span><span class="percentage-2">/88</span> 
                Servers Online
            </div>
        </p-tabPanel>
        <p-tabPanel header="Messages">
            <div class="messages-title">
                <span>November 13, 2018</span>
            </div>
            <div class="messages-content p-grid">
                <div class="time p-col-4">00:00 GMT+03:00</div>
                <div class="message-1 p-col-8">All systems reporting at 100%</div>
            </div>

            <div class="messages-title">
                <span>November 12, 2018</span>
            </div>
            <div class="messages-content p-grid">
                <span class="time p-col-4">00:00 GMT+03:00</span>
                <span class="message-1 p-col-8">All systems reporting at 100%</span>
            </div>

            <div class="messages-title">
                <span>November 7, 2018</span>
            </div>
            <div class="messages-content p-grid">
                <span class="time p-col-4">09:23 GMT+03:00</span>
                <span class="message-1 p-col-8">Everything operating normally.</span>

                <span class="time p-col-4">08:58 GMT+03:00</span>
                <span class="message-2 p-col-8">We're investigating delays inupdates to PrimeFaces.org.</span>

                <span class="time p-col-4">08:50 GMT+03:00</span>
                <span class="message-2 p-col-8">We are investigating reports of elevated error rates.</span>
            </div>
        </p-tabPanel>
    </p-tabView>
</div>