Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve layout of host panel in env deploy progress page #1625

Merged
merged 8 commits into from
May 23, 2024
Merged

Improve layout of host panel in env deploy progress page #1625

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
58753d1
Refactor `agent_simulator.py`
gzpcho May 23, 2024
bb1a578
Use .html extension for `deploy_progress.tmpl`
gzpcho May 23, 2024
0aee49c
Reorganize components in host panel
gzpcho May 23, 2024
f47c33a
Add `deploy_stage_summary.html`
gzpcho May 23, 2024
d5d5635
Use more collapsibles in host panel
gzpcho May 23, 2024
a5eb124
Remove extraneuous elements
gzpcho May 23, 2024
7f0af6b
Move host buttons to host panel heading
gzpcho May 23, 2024
f119da5
Fix provisioning hosts collapsible not working on click
gzpcho May 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
217 changes: 217 additions & 0 deletions deploy-board/deploy_board/templates/deploys/deploy_progress.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,217 @@
{% load utils %}
{% load static %}
{% with deploy=report.currentDeployStat.deploy build=report.currentDeployStat.build tag=report.currentDeployStat.buildTag %}
{% include "deploys/deploy_progress_summary.tmpl" %}
{% if report.showMode != "simple" %}
<div class="panel panel-default">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left">Hosts</h4>
<div class="pull-right">
<a type="button"
class="deployToolTip btn btn-xs"
data-toggle="tooltip"
href="/env/{{ report.envName }}/{{ report.stageName }}/hosts/failed/"
title="Click to see the details of all failed hosts">
<strong>Failed Hosts</strong>
</a>
<a type="button"
class="deployToolTip btn btn-xs"
data-toggle="tooltip"
href="/env/{{ report.envName }}/{{ report.stageName }}/hosts/"
title="Click to see the details of all the hosts">
<strong>All Details</strong>
</a>
<a type="button"
class="deployToolTip btn btn-xs"
data-toggle="tooltip"
href="/env/{{ report.envName }}/{{ report.stageName }}/hosts/sub_account/"
title="Click to see the details of all sub account hosts">
<strong>Sub Account Hosts</strong>
</a>
</div>
</div>
<div class="panel-body">
{% include "deploys/deploy_stage_summary.html" with report=report build=report.currentDeployStat.build show_stopping_hosts=show_stopping_hosts %}
{% if report.firstTimeAgentStats %}
<div class="panel panel-default">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left">
<small>
<a data-toggle="collapse"
href="#collapseNewHosts"
class="deployToolTip"
title="New hosts being installed for the first time">
<i class="fa fa-chevron-right" id="chevron-icon"></i>
New Hosts
</a>
</small>
</h4>
<span class="pull-right">
<small>
<a href="hosts/show?stage=TODO"
class="deployToolTip"
data-toggle="tooltip"
title="Click to see more details">{{ report.firstTimeAgentStats|length }}</a>
</small>
</span>
</div>
<div id="collapseNewHosts" class="collapse">
<div class="row">
{% for agentStat in report.firstTimeAgentStats %}
<a href="/env/{{ env.envName }}/{{ env.stageName }}/host/{{ agentStat.agent.hostName }}"
type="button"
class="deployToolTip btn btn-xs {{ agentStat | agentButton }} host-btn"
title="{{ agentStat | agentTip }}">
{% if report.showMode == "complete" %}<small>{{ agentStat.agent.hostName }}</small>{% endif %}
<i class="fa fa-fw {{ agentStat | agentIcon }}"></i>
{% if report.showMode == "containerStatus" %}
{% include "deploys/_container_status.html" with healthStatus=agentStat.agent.containerHealthStatus %}
{% endif %}
</a>
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% if report.provisioningHosts %}
<div class="panel panel-default">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left">
<small>
<a data-toggle="collapse"
href="#collapseProvisioningHosts"
class="deployToolTip"
title="Host is new to this env.">
<i class="fa fa-chevron-right" id="chevron-icon"></i>
Provisioning Hosts
</a>
</small>
</h4>
<span class="pull-right">
<small>
<a href="/env/{{ report.envName }}/{{ report.stageName }}/hosts/provision/"
class="deployToolTip"
data-toggle="tooltip"
title="Click to see more details">{{ report.provisioningHosts | length }}</a>
</small>
</span>
</div>
<div id="collapseUnknownHosts" class="collapse">
<div class="row">
{% for host in report.provisioningHosts %}
<a href="/env/{{ env.envName }}/{{ env.stageName }}/host/{{ host.hostName }}"
type="button"
class="deployToolTip btn btn-xs {{ host | hostButton }} host-btn"
title="{{ host | hostTip }}">
<small>{{ host.hostName }}</small>
<i class="fa fa-fw {{ host | hostIcon }}"></i>
</a>
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% if report.missingHosts %}
<div class="panel panel-default">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left">
<small>
<a data-toggle="collapse"
href="#collapseUnknownHosts"
class="deployToolTip"
title="Host status is unknown to this env. If the host is terminated, remove it from this env manually.">
<i class="fa fa-chevron-right" id="chevron-icon"></i>
Unknown Hosts
</a>
</small>
</h4>
<span class="pull-right">
<small>
<a href="hosts/show?stage=TODO"
class="deployToolTip"
data-toggle="tooltip"
title="Click to see more details">{{ report.missingHosts|length }}</a>
</small>
</span>
</div>
<div id="collapseProvisioningHosts" class="collapse">
<div class="row">
{% for host in report.missingHosts %}
<a href="/env/{{ env.envName }}/{{ env.stageName }}/host/{{ host }}"
type="button"
class="btn btn-xs btn-warning">
<small>{{ host }}</small>
</a>
{% endfor %}
</div>
{% endif %}
<div class="row">
{% for agentStat in report.agentStats %}
{% if report.account == primaryAccount %}
{% if not agentStat.agent.accountId or agentStat.agent.accountId == primaryAccount or agentStat.agent.accountId == "null" %}
<a href="/env/{{ env.envName }}/{{ env.stageName }}/host/{{ agentStat.agent.hostName }}"
type="button"
class="deployToolTip btn btn-xs {{ agentStat | agentButton }} host-btn"
title="{{ agentStat | agentTip }}">
{% if report.showMode != "compact" %}<small>{{ agentStat.agent.hostName }}</small>{% endif %}
{% if report.showMode == "containerStatus" %}
{% include "deploys/_container_status.html" with healthStatus=agentStat.agent.containerHealthStatus %}
{% else %}
<i class="fa fa-fw {{ agentStat | agentIcon }}"></i>
{% endif %}
{% endif %}
</a>
{% elif report.account == subAccount %}
{% if agentStat.agent.accountId and agentStat.agent.accountId == subAccount %}
<a href="/env/{{ env.envName }}/{{ env.stageName }}/host/{{ agentStat.agent.hostName }}"
type="button"
class="deployToolTip btn btn-xs {{ agentStat | agentButton }} host-btn"
title="{{ agentStat | agentTip }}">
{% if report.showMode != "compact" %}<small>{{ agentStat.agent.hostName }}</small>{% endif %}
{% if report.showMode == "containerStatus" %}
{% include "deploys/_container_status.html" with healthStatus=agentStat.agent.containerHealthStatus %}
{% else %}
<i class="fa fa-fw {{ agentStat | agentIcon }}"></i>
{% endif %}
{% endif %}
</a>
{% elif report.account == "others" %}
{% if agentStat.agent.accountId and agentStat.agent.accountId != subAccount and agentStat.agent.accountId != primaryAccount and agentStat.agent.accountId != "null" %}
<a href="/env/{{ env.envName }}/{{ env.stageName }}/host/{{ agentStat.agent.hostName }}"
type="button"
class="deployToolTip btn btn-xs {{ agentStat | agentButton }} host-btn"
title="{{ agentStat | agentTip }}">
{% if report.showMode != "compact" %}<small>{{ agentStat.agent.hostName }}</small>{% endif %}
{% if report.showMode == "containerStatus" %}
{% include "deploys/_container_status.html" with healthStatus=agentStat.agent.containerHealthStatus %}
{% else %}
<i class="fa fa-fw {{ agentStat | agentIcon }}"></i>
{% endif %}
{% endif %}
</a>
{% elif report.account == "all" %}
<a href="/env/{{ env.envName }}/{{ env.stageName }}/host/{{ agentStat.agent.hostName }}"
type="button"
class="deployToolTip btn btn-xs {{ agentStat | agentButton }} host-btn"
title="{{ agentStat | agentTip }}">
{% if report.showMode != "compact" %}<small>{{ agentStat.agent.hostName }}</small>{% endif %}
{% if report.showMode == "containerStatus" %}
{% include "deploys/_container_status.html" with healthStatus=agentStat.agent.containerHealthStatus %}
{% else %}
<i class="fa fa-fw {{ agentStat | agentIcon }}"></i>
{% endif %}
</a>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endwith %}
<script>
$(document).ready(function(){
$('.deployToolTip').tooltip({container: "#toolTipContent", delay: { show: 400, hide: 10 }});
});
</script>
Loading
Loading