Gitiles
Code Review Sign In
gerrit.openbmc.org / openbmc / phosphor-webui / 0f03ad1314ca2e5afad65709413c0adb7e3e06fb / . / src / power-operations.html
blob: 9ddbc701d03ca18e4c3c01b899b080d57ae5e5d7 [file] [log] [blame]
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>openBMC</title>
6 <link rel="icon" href="favicon.ico?v=2"/>
7 <link rel="stylesheet" href="css/main.css">
8 <script src="js/vendor/vendor.min.js"></script>
9</head>
10<body>
11
12<!-- Header & Navigation includes -->
13<div id="header__wrapper"></div>
14<div id="navigation"></div>
15
16<!-- Power Operations Content -->
17<main id="power-operations" class="content__container" role="main">
18 <div class="row column">
19 <h1>Server power operation</h1>
20 </div>
21
22 <!-- Current status and bar display the state of the server. Class 'power__state-off' is applied to bar and 'power__state' text switches to say "off"-->
23 <div class="row column">
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame^]24 <div class="power__current-status ">
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]25 <p class="inline h4">Current status</p>
26 <span class="power__status-log inline float-right">Server last reset at 01:41:24 on 02/17/17</span>
27 </div>
28 </div>
29 <div class="row column">
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame^]30 <div id="power-indicator-bar" class="power__indicator-bar power__state-on">
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]31 <p class="inline">Server BLZ_109284.209.01</p>
32 <p class="power__state inline float-right h3"><span>On</span></p>
33 </div>
34 </div>
35 <div class="row column">
36 <div class="row column">
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame^]37 <h3 class="h4">Select a power operation</h3>
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]38 </div>
39
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame^]40 <!-- Power on displays only when server is shutdown -->
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]41 <div class="row column power-option">
42 <button id="power__power-on" class="btn-secondary">Power On</button>
43 <p>Attempts to power on the server</p>
44 </div>
45
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame^]46 <!-- Power reboot/shutdown options : when server is off all of these are hidden. When one option is selected, the others are disabled. -->
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]47 <div class="row column power-option">
48 <button id="power__warm-boot" class="btn-secondary">Warm reboot</button>
49 <p>Attempts to perform an orderly shutdown before restarting the server</p>
50 </div>
51 <div class="row column power-option">
52 <button id="power__cold-boot" class="btn-secondary">Cold reboot</button>
53 <p>Shuts down the server immediately, then restarts it</p>
54 </div>
55 <div class="row column power-option">
56 <button id="power__soft-shutdown" class="btn-secondary">Orderly shutdown</button>
57 <p>Attempts to stop all software on the server before removing power</p>
58 </div>
59 <div class="row column power-option">
60 <button id="power__hard-shutdown" class="btn-secondary">Immediate shutdown</button>
61 <p>Removes power from the server without waiting for software to stop</p>
62
63 <!-- Confirmation message - to accommodate the message for smaller screens we need to grab the height of the message and apply that height to "power-option" row
64
65 var msgheight = $(this).parent().find('.power__confirm').height();
66 $(this).parent().addClass('transitionAll').css("minHeight", msgheight).removeClass('disabled');
67 -->
68
69 <div class="power__confirm">
70 <div class="power__confirm-message">
71 <p class="h3"><i></i>Are you sure you want to <strong>warm reboot?</strong></p>
72 <p>Removes power from the server without waiting for software to stop</p>
73 </div>
74 <div class="power__confirm-buttons">
75 <button class="btn-primary">Yes</button>
76 <button class="btn-primary">No</button>
77 </div>
78 </div>
79 </div>
80 </div>
81</main>
82
83</body>
84<script src="js/app.min.js"></script>
85
86<!-- FOR DEMO ONLY __ DO NOT COPY BELOW -->
87<script>
88 $('#power__hard-shutdown').on('click', function () {
89 var msgheight = $(this).parent().find('.power__confirm').height();
90
91 $(this).parents('#power-operations').find('.power__confirm').addClass('active');
92 $(this).parents('#power-operations').find('.power-option').addClass('disabled');
93 $(this).parent().addClass('transitionAll').css("minHeight", msgheight).removeClass('disabled');
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame^]94 $(this).parents('#power-operations').find('.power-option.disabled button').attr("disabled", true).addClass('disabled');
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]95 });
96
97 $('.btn-primary').on('click', function(){
98 $(this).parents('#power-operations').find('.power__indicator-bar').toggleClass('power__state-off');
99 $(this).parents('#power-operations').find('.power__confirm').removeClass('active');
100 $(this).parent().addClass('disabled');
101 $(this).parents('.power-option').addClass('disabled');
102 $(this).parents('#power-operations').find('.power__state span').html('Off');
103 });
104</script>
105</html>