Skip to content

Commit

Permalink
rework the conciliation page
Browse files Browse the repository at this point in the history
  • Loading branch information
@julien6387
julien6387 committed May 21, 2024
1 parent faf70d4 commit 313296a
Show file tree
Hide file tree
Showing 7 changed files with 340 additions and 283 deletions.
4 changes: 2 additions & 2 deletions docs/dashboard.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,7 @@ The header of the Conciliation Page has exactly the same contents as the header
Conciliation Page Contents
~~~~~~~~~~~~~~~~~~~~~~~~~~

On the right side of the page, the list of process conflicts is displayed into a table.
On the left side of the page, the list of process conflicts is displayed into a table.
A process conflict is raised when the same program is running in multiple |Supvisors| instances.

So the table lists, for each conflict:
Expand All @@ -289,7 +289,7 @@ So the table lists, for each conflict:
* for each process, a list of automatic strategies (refer to :ref:`conciliation`) helping to the solving
of this conflict.

The left side of the page contains a simple box that enables the user to perform a global conciliation on all conflicts,
The right side of the page contains a simple box that enables the user to perform a global conciliation on all conflicts,
using one of the automatic strategies proposed by |Supvisors|.


Expand Down
338 changes: 177 additions & 161 deletions supvisors/tests/test_viewconciliation.py
View file

Large diffs are not rendered by default.

56 changes: 28 additions & 28 deletions supvisors/ui/application.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ <h2 meld:id="instance_h_mid">Supervisors</h2>
<div>
<ul>
<li meld:id="instance_li_mid">
<a href="#" meld:id="instance_a_mid">
<a meld:id="instance_a_mid">
<span class="master" meld:id="master_sp_mid"> </span>
<span meld:id="instance_sp_mid">Supervisor</span>
</a>
Expand All @@ -49,7 +49,7 @@ <h2 meld:id="instance_h_mid">Supervisors</h2>
<h2 meld:id="appli_h_mid">Applications</h2>
<div>
<ul>
<li meld:id="appli_li_mid"><a href="#" meld:id="appli_a_mid">Application</a></li>
<li meld:id="appli_li_mid"><a meld:id="appli_a_mid">Application</a></li>
</ul>
</div>
</nav>
Expand Down Expand Up @@ -99,14 +99,14 @@ <h2 meld:id="software_name_mid" id="software_title"></h2>
<div class="option_title">Starting strategies</div>
<div id="strategies">
<div class="button_group">
<div class="button" meld:id="config_div_mid"><a href="#" meld:id="config_a_mid">CONFIG</a></div>
<div class="button" meld:id="most_loaded_div_mid"><a href="#" meld:id="most_loaded_a_mid">MOST LOADED</a></div>
<div class="button" meld:id="less_loaded_div_mid"><a href="#" meld:id="less_loaded_a_mid">LESS LOADED</a></div>
<div class="button" meld:id="local_div_mid"><a href="#" meld:id="local_a_mid">LOCAL</a></div>
<div class="button" meld:id="config_div_mid"><a meld:id="config_a_mid">CONFIG</a></div>
<div class="button" meld:id="most_loaded_div_mid"><a meld:id="most_loaded_a_mid">MOST LOADED</a></div>
<div class="button" meld:id="less_loaded_div_mid"><a meld:id="less_loaded_a_mid">LESS LOADED</a></div>
<div class="button" meld:id="local_div_mid"><a meld:id="local_a_mid">LOCAL</a></div>
</div>
<div class="button_group">
<div class="button" meld:id="most_loaded_node_div_mid"><a href="#" meld:id="most_loaded_node_a_mid">MOST LOADED NODE</a></div>
<div class="button" meld:id="less_loaded_node_div_mid"><a href="#" meld:id="less_loaded_node_a_mid">LESS LOADED NODE</a></div>
<div class="button" meld:id="most_loaded_node_div_mid"><a meld:id="most_loaded_node_a_mid">MOST LOADED NODE</a></div>
<div class="button" meld:id="less_loaded_node_div_mid"><a meld:id="less_loaded_node_a_mid">LESS LOADED NODE</a></div>
</div>
</div>
</div>
Expand All @@ -116,7 +116,7 @@ <h2 meld:id="software_name_mid" id="software_title"></h2>
<div class="option_box">
<div class="option_title">Statistics Periods</div>
<div class="button_group">
<div class="button" meld:id="period_li_mid"><a href="#" meld:id="period_a_mid">--</a></div>
<div class="button" meld:id="period_li_mid"><a meld:id="period_a_mid">--</a></div>
</div>
</div>
</div>
Expand All @@ -128,14 +128,14 @@ <h2 meld:id="software_name_mid" id="software_title"></h2>
<table class="buttons">
<tbody>
<tr class="action">
<td><a href="#" meld:id="startapp_a_mid"><img src="img/start_40.png" alt="Start" title="Start the application"/></a></td>
<td><a href="#" meld:id="stopapp_a_mid"><img src="img/stop_40.png" alt="Stop" title="Stop the application"/></a></td>
<td><a href="#" meld:id="restartapp_a_mid"><img src="img/restart_40.png" alt="Restart" title="Restart the application"/></a></td>
<td><a meld:id="startapp_a_mid"><img src="img/start_40.png" alt="Start" title="Start the application"/></a></td>
<td><a meld:id="stopapp_a_mid"><img src="img/stop_40.png" alt="Stop" title="Stop the application"/></a></td>
<td><a meld:id="restartapp_a_mid"><img src="img/restart_40.png" alt="Restart" title="Restart the application"/></a></td>
</tr>
<tr>
<td></td>
<td><a href="#" meld:id="refresh_a_mid" class="button on"><img src="img/reload_30.png" alt="Refresh" title="Refresh page"/></a></td>
<td><a href="#" meld:id="autorefresh_a_mid" class="button on"><img src="img/auto_reload_30.png" alt="Auto-refresh" title="Auto-refresh page"/></a></td>
<td><a meld:id="refresh_a_mid" class="button on"><img src="img/reload_30.png" alt="Refresh" title="Refresh page"/></a></td>
<td><a meld:id="autorefresh_a_mid" class="button on"><img src="img/auto_reload_30.png" alt="Auto-refresh" title="Auto-refresh page"/></a></td>
</tr>
</tbody>
</table>
Expand All @@ -144,12 +144,12 @@ <h2 meld:id="software_name_mid" id="software_title"></h2>

<div id="process_contents" meld:id="contents_mid">
<div id="process_left_side">
<table id="process_table" meld:id="table_mid">
<table class="process_table" meld:id="table_mid">
<thead>
<tr>
<th class="shex">
<a href="#" meld:id="expand_a_mid"></a>
<a href="#" meld:id="shrink_a_mid"></a>
<a meld:id="expand_a_mid"></a>
<a meld:id="shrink_a_mid"></a>
</th>
<th class="name">Name</th>
<th class="state">State</th>
Expand Down Expand Up @@ -177,22 +177,22 @@ <h2 meld:id="software_name_mid" id="software_title"></h2>
</tfoot>
<tbody class="hoverable">
<tr meld:id="tr_mid">
<td meld:id="shex_td_mid" class="shex centered"><a href="#" meld:id="shex_a_mid"></a></td>
<td meld:id="name_td_mid"><a href="#" meld:id="name_a_mid">--</a></td>
<td meld:id="shex_td_mid" class="shex centered"><a meld:id="shex_a_mid"></a></td>
<td meld:id="name_td_mid"><a meld:id="name_a_mid">--</a></td>
<td meld:id="state_td_mid" class="state_cell centered"><span meld:id="state_span_mid">--</span></td>
<td meld:id="running_td_mid"><a href="#" meld:id="running_a_mid" class="button on">
<td meld:id="running_td_mid"><a meld:id="running_a_mid" class="button on">
<span meld:id="running_span_mid">--</span>
</a></td>
<td meld:id="desc_td_mid">--</td>
<td meld:id="load_td_mid" class="centered expected">--</td>
<td class="centered" meld:id="pcpu_td_mid"><a href="#" meld:id="pcpu_a_mid">--</a></td>
<td class="centered" meld:id="pmem_td_mid"><a href="#" meld:id="pmem_a_mid">--</a></td>
<td class="action" meld:id="start_td_mid"><a href="#" meld:id="start_a_mid">Start</a></td>
<td class="action" meld:id="stop_td_mid"><a href="#" meld:id="stop_a_mid">Stop</a></td>
<td class="action" meld:id="restart_td_mid"><a href="#" meld:id="restart_a_mid">Restart</a></td>
<td meld:id="clear_td_mid"><a href="#" meld:id="clear_a_mid">Clear</a></td>
<td meld:id="tailout_td_mid"><a href="#" meld:id="tailout_a_mid" target="_blank">Stdout</a></td>
<td meld:id="tailerr_td_mid"><a href="#" meld:id="tailerr_a_mid" target="_blank">Stderr</a></td>
<td class="centered" meld:id="pcpu_td_mid"><a meld:id="pcpu_a_mid">--</a></td>
<td class="centered" meld:id="pmem_td_mid"><a meld:id="pmem_a_mid">--</a></td>
<td class="action" meld:id="start_td_mid"><a meld:id="start_a_mid">Start</a></td>
<td class="action" meld:id="stop_td_mid"><a meld:id="stop_a_mid">Stop</a></td>
<td class="action" meld:id="restart_td_mid"><a meld:id="restart_a_mid">Restart</a></td>
<td meld:id="clear_td_mid"><a meld:id="clear_a_mid">Clear</a></td>
<td meld:id="tailout_td_mid"><a meld:id="tailout_a_mid" target="_blank">Stdout</a></td>
<td meld:id="tailerr_td_mid"><a meld:id="tailerr_a_mid" target="_blank">Stderr</a></td>
</tr>
</tbody>
</table>
Expand Down
81 changes: 51 additions & 30 deletions supvisors/ui/conciliation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
<link rel="stylesheet" href="css/card.css" />
<link rel="stylesheet" href="css/header.css" />
<link rel="stylesheet" href="css/message.css" />
<link rel="stylesheet" href="css/process_table.css" />
<link rel="stylesheet" href="css/conciliation.css" />
<style meld:id="style_mid"> </style>
</head>
Expand All @@ -35,7 +36,7 @@ <h2 meld:id="instance_h_mid">Supervisors</h2>
<div>
<ul>
<li meld:id="instance_li_mid">
<a href="#" meld:id="instance_a_mid">
<a meld:id="instance_a_mid">
<span class="master" meld:id="master_sp_mid"> </span>
<span meld:id="instance_sp_mid">Supervisor</span>
</a>
Expand All @@ -49,7 +50,7 @@ <h2 meld:id="appli_h_mid">Applications</h2>
<div>
<ul>
<li meld:id="appli_li_mid">
<a href="#" meld:id="appli_a_mid">Application</a>
<a meld:id="appli_a_mid">Application</a>
</li>
</ul>
</div>
Expand Down Expand Up @@ -105,24 +106,24 @@ <h2 meld:id="software_name_mid" id="software_title"></h2>
<tbody>
<tr class="action">
<td>
<a href="#" meld:id="restart_a_mid" class="on">
<a meld:id="restart_a_mid" class="on">
<img src="img/restart_40.png" alt="Restart" title="Restart Supvisors"/>
</a>
</td>
<td>
<a href="#" meld:id="shutdown_a_mid" class="on">
<a meld:id="shutdown_a_mid" class="on">
<img src="img/shutdown_40.png" alt="Shutdown" title="Shutdown Supvisors"/>
</a>
</td>
</tr>
<tr>
<td>
<a href="#" meld:id="refresh_a_mid" class="button on">
<a meld:id="refresh_a_mid" class="button on">
<img src="img/reload_30.png" alt="Refresh" title="Refresh page"/>
</a>
</td>
<td>
<a href="#" meld:id="autorefresh_a_mid" class="button on">
<a meld:id="autorefresh_a_mid" class="button on">
<img src="img/auto_reload_30.png" alt="Auto-refresh" title="Auto-refresh page"/>
</a>
</td>
Expand All @@ -133,21 +134,11 @@ <h2 meld:id="software_name_mid" id="software_title"></h2>
</header>

<div id="index_contents" meld:id="contents_mid" class="horizontal_contents">
<div>
<div class="option_box">
<!-- A REVOIR -->
<div class="option_title">Conciliation Strategies</div>
<div class="button_group">
<div class="button on" meld:id="global_strategy_li_mid"><a href="#" meld:id="global_strategy_a_mid">--</a></div>
</div>
</div>
</div>

<div meld:id="conflicts_div_mid">
<table>
<table id="process_table">
<thead>
<tr>
<th class="name">Name</th>
<th class="name" colspan="2">Name</th>
<th class="instance">Supervisor</th>
<th class="date">Uptime</th>
<th colspan="2">Actions</th>
Expand All @@ -156,29 +147,59 @@ <h2 meld:id="software_name_mid" id="software_title"></h2>
</thead>
<tfoot>
<tr>
<th class="name">Name</th>
<th class="name" colspan="2">Name</th>
<th class="instance">Supervisor</th>
<th class="date">Uptime</th>
<th colspan="2">Actions</th>
<th>Strategy</th>
</tr>
</tfoot>
<tbody>
<tbody class="hoverable">
<tr meld:id="conflict_tr_mid">
<td meld:id="name_td_mid">--</td>
<td><a href="#" meld:id="conflict_instance_a_mid" class="button on"></a></td>
<td meld:id="uptime_td_mid">--</td>
<td><a href="#" meld:id="pstop_a_mid" class="button on">Stop</a></td>
<td><a href="#" meld:id="pkeep_a_mid" class="button on">Keep</a></td>
<td meld:id="strategy_td_mid"><ul class="vertical">
<li meld:id="local_strategy_li_mid">
<a href="#" meld:id="local_strategy_a_mid" class="button on">--</a>
</li>
</ul></td>
<td meld:id="section_td_mid"></td>
<td meld:id="process_td_mid"></td>
<td meld:id="conflict_instance_td_mid"><a meld:id="conflict_instance_a_mid" class="button on"></a></td>
<td meld:id="uptime_td_mid"></td>
<td meld:id="pstop_td_mid"><a meld:id="pstop_a_mid" class="button on">Stop</a></td>
<td meld:id="pkeep_td_mid"><a meld:id="pkeep_a_mid" class="button on">Keep</a></td>
<td meld:id="strategy_td_mid" class="local_strategies_td">
<div class="local_strategies">
<div class="button_group">
<div class="button on"><a meld:id="infanticide_local_strategy_a_mid">Infanticide</a></div>
<div class="button on"><a meld:id="senicide_local_strategy_a_mid">Senicide</a></div>
</div>
<div class="button_group">
<div class="button on"><a meld:id="stop_local_strategy_a_mid">Stop</a></div>
<div class="button on"><a meld:id="restart_local_strategy_a_mid">Restart</a></div>
</div>
<div class="button_group">
<div class="button on"><a meld:id="running_failure_local_strategy_a_mid">Running Failure</a></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>

<div>
<div class="option_box">
<div class="option_title">Global Conciliation Strategies</div>
<div class="strategies">
<div class="button_group">
<div class="button on"><a meld:id="infanticide_strategy_a_mid">Infanticide</a></div>
<div class="button on"><a meld:id="senicide_strategy_a_mid">Senicide</a></div>
</div>
<div class="button_group">
<div class="button on"><a meld:id="stop_strategy_a_mid">Stop</a></div>
<div class="button on"><a meld:id="restart_strategy_a_mid">Restart</a></div>
</div>
<div class="button_group">
<div class="button on"><a meld:id="running_failure_strategy_a_mid">Running Failure</a></div>
</div>
</div>
</div>
</div>
</div>

<div id="statusBox" meld:id="footer_mid">
Expand Down
18 changes: 18 additions & 0 deletions supvisors/ui/css/conciliation.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,21 @@
overflow: auto;
padding: 10px;
}

/* update the background of the global strategies box */
div.strategies {
background-image: linear-gradient(180deg, var(--light2-color), var(--light1-color));
}

div.strategies div.button_group {
background-image: none;
}

div.strategies div.button_group:not(:first-child) {
padding-top: 0;
}

/* update the area of the local strategies box */
div.local_strategies div {
padding: 1px 3px;
}
Loading

0 comments on commit 313296a

Please sign in to comment.