Skip to content

Commit 99dd412

Browse files
GaneshSPatilGaneshSPatil
committed
Change the onclick tab functionality to use ng-click using li element instead of input
1 parent 14c2072 commit 99dd412

File tree

1 file changed

+30
-139
lines changed

1 file changed

+30
-139
lines changed

‎src/main/resources/agent-status-report.template.ftlh

Lines changed: 30 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
<style>
22
[data-plugin-style-id="kubernetes-plugin"] .kubernetes-elastic-agent {
3-
padding: 50px 20px 0 20px;
3+
padding: 60px 20px 0 20px;
4+
}
5+
6+
[data-plugin-style-id="kubernetes-plugin"] .header {
7+
padding-left: 25px;
48
}
59

610
[data-plugin-style-id="kubernetes-plugin"] .tabs {
@@ -13,14 +17,6 @@
1317
}
1418

1519
[data-plugin-style-id="kubernetes-plugin"] .tabs .tab .content {
16-
position: absolute;
17-
display: none;
18-
left: 0px;
19-
width: 100%;
20-
height: calc(100vh - 225px);
21-
border: 1px #000 solid;
22-
border-radius: 5px;
23-
overflow-x: hidden;
2420
}
2521

2622
[data-plugin-style-id="kubernetes-plugin"] .checkboxtab {
@@ -52,7 +48,7 @@
5248
padding: 10px;
5349
}
5450

55-
[data-plugin-style-id="kubernetes-plugin"] .pod-logs {
51+
[data-plugin-style-id="kubernetes-plugin"] .tab-content.pod-logs {
5652
background-color: #383838;
5753
font-size: 13px;
5854
font-family: monaco;
@@ -74,12 +70,20 @@
7470
color: #484848;
7571
}
7672

73+
[data-plugin-style-id="kubernetes-plugin"] .tab-content {
74+
background: #fff;
75+
margin-top: 0;
76+
margin: 20px;
77+
height: calc(100vh - 280px);
78+
overflow-x: hidden;
79+
}
80+
7781
</style>
7882

7983
<div data-plugin-style-id="kubernetes-plugin">
8084
<div class="row">
8185
<div class="header-panel">
82-
<header class="page-header">
86+
<header class="page-header header">
8387
<f.row>
8488
<f.column size={6}>
8589
<h1>${ elasticAgentId! }</h1>
@@ -88,139 +92,26 @@
8892
</header>
8993
</div>
9094
</div>
91-
<div class="kubernetes-elastic-agent row">
92-
<div class="tabs">
93-
<div class="tab">
94-
<input name="agent-information" type="radio" id="pod-details" class="checkboxtab pod-details">
95-
<label for="pod-details">Pod Details</label>
96-
<dl class="content">
97-
<dt>Pod Name:</dt>
98-
<dd>${ podDetails.name !}</dd>
99-
<dt>Cluster Name:</dt>
100-
<dd>${ podDetails.clusterName !}</dd>
101-
<dt>Node Name:</dt>
102-
<dd>${ podDetails.nodeName !}</dd>
103-
<dt>Namespace:</dt>
104-
<dd>${ podDetails.namespace !}</dd>
105-
106-
<dt>Creation Timestamp:</dt>
107-
<dd>${ podDetails.createdAt !}</dd>
108-
<dt>Start Timestamp:</dt>
109-
<dd>${ podDetails.startedAt !}</dd>
110-
111-
<dt>Status:</dt>
112-
<dd>${ podDetails.phase !}</dd>
113-
114-
<dt>Pod IP:</dt>
115-
<dd>${ podDetails.podIP !}</dd>
116-
<dt>Host IP:</dt>
117-
<dd>${ podDetails.hostIP !}</dd>
118-
119-
<dt>Conditions:</dt>
120-
<dd>
121-
<table>
122-
<thead>
123-
<tr>
124-
<th>Last Transition Time</th>
125-
<th>Last Probe Time</th>
126-
<th>Type</th>
127-
<th>Status</th>
128-
</thead>
129-
</tr>
130-
<tbody>
131-
<#list podDetails.conditions as condition>
132-
<tr>
133-
<td>${condition.lastTransitionTime!}</td>
134-
<td>${condition.lastProbeTime!}</td>
135-
<td>${condition.type!}</td>
136-
<td>${condition.status!}</td>
137-
</tr>
138-
</#list>
139-
</tbody>
140-
</table>
141-
</dd>
142-
</dl>
143-
</div>
144-
145-
<div class="tab">
146-
<input name="agent-information" type="radio" id="agent-details" class="checkboxtab agent-details">
147-
<label for="agent-details">GoCD Agent Details</label>
148-
<dl class="content">
149-
<dt>Name:</dt>
150-
<dd>${ agentDetails.name !}</dd>
151-
<dt>Image:</dt>
152-
<dd>${ agentDetails.image !}</dd>
153-
<dt>ImagePullPolicy:</dt>
154-
<dd>${ agentDetails.imagePullPolicy !}</dd>
155-
156-
<dt>Ready:</dt>
157-
<dd>${ agentDetails.ready !}</dd>
15895

159-
<dt>Restart Count:</dt>
160-
<dd>${ agentDetails.restartCount !}</dd>
161-
162-
<dt>Command:</dt>
163-
<dd>${ agentDetails.command?html?replace("\n", "<br>") !}</dd>
164-
165-
<dt>Environment Variables:</dt>
166-
<dd>${ agentDetails.env?html?replace("\n", "<br>") !}</dd>
167-
168-
</dl>
169-
</div>
170-
171-
<div class="tab">
172-
<input name="agent-information" type="radio" id="pod-events" class="checkboxtab pod-events">
173-
<label for="pod-events">Events</label>
174-
<dl class="content">
175-
<#if events?size != 0>
176-
<table>
177-
<thead>
178-
<tr>
179-
<th>First Seen</th>
180-
<th>Last Seen</th>
181-
<th>Count</th>
182-
<th>Path</th>
183-
<th>Type</th>
184-
<th>Reason</th>
185-
<th>Message</th>
186-
</thead>
187-
</tr>
188-
<tbody>
189-
<#list events as event>
190-
<tr>
191-
<td>${event.firstTimestamp!}</td>
192-
<td>${event.lastTimestamp!}</td>
193-
<td>${event.count!}</td>
194-
<td>${event.fieldPath!}</td>
195-
<td>${event.type!}</td>
196-
<td>${event.reason!}</td>
197-
<td>${event.message!}</td>
198-
</tr>
199-
</#list>
200-
201-
</tbody>
202-
</table>
203-
<#else>
204-
<tr>
205-
<td colspan="5" class="message">No events available for the current pod.</td>
206-
</tr>
207-
</#if>
208-
</dl>
96+
<div class="content_wrapper_inner kubernetes-elastic-agent">
97+
<div class="row">
98+
<div class="sub_tabs_container">
99+
<ul class="tabs" ng-init="currenttab=currentab || 'pod-details'">
100+
<li ng-class="{'current_tab' : currenttab == 'pod-details' }" ng-click="currenttab='pod-details'">
101+
<a href="#">Details</a>
102+
</li>
103+
<li ng-class="{'current_tab' : currenttab == 'pod-logs' }" ng-click="currenttab='pod-logs'">
104+
<a href="#">Logs</a>
105+
</li>
106+
</ul>
209107
</div>
210108

211-
<div class="tab">
212-
<input name="agent-information" type="radio" id="pod-logs" class="checkboxtab" checked>
213-
<label for="pod-logs">Logs</label>
214-
<dl class="content pod-logs"> ${ logs?html?replace("\n", "<br>") !} </dl>
215-
</div>
216-
217-
<div class="tab">
218-
<input name="agent-information" type="radio" id="pod-configuration" class="checkboxtab">
219-
<label for="pod-configuration">Configuration</label>
220-
<dl class="content pod-configuration"> ${ configuration?html?replace("\n", "<br>") !} </dl>
221-
</div>
109+
<div class="tab-content" ng-show="currenttab == 'pod-details'"></div>
110+
<div class="tab-content pod-logs"
111+
ng-show="currenttab == 'pod-logs'">${ logs?html?replace("\n", "<br>") !} </div>
222112
</div>
223113
</div>
114+
224115
</div>
225116

226117

0 commit comments

Comments
 (0)