Skip to content

Commit

Permalink
add redhat tabs and redhat accordion
Browse files Browse the repository at this point in the history
  • Loading branch information
@aabughosh
aabughosh committed Nov 29, 2023
1 parent 8bbf523 commit fdc6ef7
Show file tree
Hide file tree
Showing 2 changed files with 245 additions and 115 deletions.
192 changes: 142 additions & 50 deletions cnf-certification-test/webserver/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,14 @@
opacity: var(--main-opacity, 1);
transition: opacity 200ms ease;
}
h4 input[type="checkbox"] {
display: inline-block;
}

h4 label {
display: inline-block;
margin-left: 8px; /* Adjust margin as needed */
}
</style>

<script type="module">
Expand All @@ -158,6 +166,8 @@
import '@rhds/elements/rh-table/rh-table.js';
import '@rhds/elements/rh-blockquote/rh-blockquote.js';
import '@rhds/elements/rh-accordion/rh-accordion.js';
import '@rhds/elements/rh-tabs/rh-tabs.js';

// set up interactive elements
// use dynamic import to improve page load times
document.getElementById('logs').addEventListener('open', () => import('./logs.js'));
Expand Down Expand Up @@ -278,7 +288,16 @@ <h1>CNF Certification Test</h1>
<fieldset>
<legend>Select a Test</legend>

<legend id="selectComboBox"> Selcet a Test Tag <select name="class" id="selectScenarioComboBox" onchange="selectScenario()">
<legend id="selectComboBox"> Selcet a Test Tag <select name="class" id="selectScenarioComboBox" onchange="
selectScenario('lifecycle')
selectScenario('manageability')
selectScenario('affiliated-certification')
selectScenario('operator')
selectScenario('access-control')
selectScenario('platform-alteration')
selectScenario('networking')
selectScenario('performance')
selectScenario('observability')">

<option value="all"> All</option>
<option value="faredge"> Far-Edge</option>
Expand All @@ -287,60 +306,133 @@ <h1>CNF Certification Test</h1>
<option value="extended"> Extended</option>

</select>
<select name="class" id="selectOpt" onchange="selectScenario()" hidden>
<select name="class" id="selectOpt" onchange="
selectScenario('lifecycle')
selectScenario('manageability')
selectScenario('affiliated-certification')
selectScenario('operator')
selectScenario('access-control')
selectScenario('platform-alteration')
selectScenario('networking')
selectScenario('performance')
selectScenario('observability')" hidden>
<option value="Mandatory"> Mandatory</option>
<option value="Optional"> Optional</option>

</select>

</legend>
<label id="selectedsuites" hidden>
<h4>Filter a Suite Test</h4>
<div id="checkboxContainer">
<input type="checkbox"
value="lifecycle"
name="selectedOptionstest" id ="lifecycle" checked
onclick="performToggle('lifecycle')"> <label for="lifecycle">Lifecycle</label>
<input type="checkbox"
value="manageability"
name="selectedOptionstest" checked id ="manageability"
onclick="performToggle('manageability')"><label for="manageability">Manageability</label>
<input type="checkbox"
value="affiliated-certification"
name="selectedOptionstest" checked id ="affiliated-certification"
onclick="performToggle('affiliated-certification')"><label for="affiliated-certification">Certification</label>
<input type="checkbox"
value="operator"
name="selectedOptionstest" checked id ="operator"
onclick="performToggle('operator')"><label for="operator">Operator</label>
<input type="checkbox"
value="access-control"
name="selectedOptionstest" checked id ="access-control"
onclick="performToggle('access-control')"><label for="access-control">Access Control</label>
<input type="checkbox"
value="platform-alteration"
name="selectedOptionstest" checked id ="platform-alteration"
onclick="performToggle('platform-alteration')"><label for="platform-alteration">Platform Alteration</label>
<input type="checkbox"
value="networking"
name="selectedOptionstest" checked id ="networking"
onclick="performToggle('networking')" > <label for="networking">Networking</label>
<input type="checkbox"
value="performance"
name="selectedOptionstest" checked id ="performance"
onclick="performToggle('performance')"> <label for="performance">performance</label>
<input type="checkbox"
value="observability"
name="selectedOptionstest" checked id ="observability"
onclick="performToggle('observability')"><label for="observability">Observability</label>
</div>
</label><br>
<rh-table>
<table class="table" id="testTable" >
</table>
</rh-table>
</fieldset>

<br>
<rh-tabs>
<rh-tab slot="tab" onclick="show('lifecycle')"> Lifecycle</rh-tab>
<rh-tab-panel >
<input type="checkbox"
value="lifecycle"
name="selectedOptionstest" id ="lifecycle" checked
onclick="performToggle('lifecycle')"><label for="lifecycle">Select/UnSelect All Lifecycle</label>
<rh-table>

<table class="table" id="lifecycle-table" >

</table>
</rh-table>
</rh-tab-panel>

<rh-tab slot="tab" onclick="show('manageability')">Manageability</rh-tab>
<rh-tab-panel >
<input type="checkbox"
value="manageability"
name="selectedOptionstest" id ="manageability" checked
onclick="performToggle('manageability')"> <label for="manageability">Select/UnSelect All Manageability</label>
<rh-table>
<table class="table" id="manageability-table" hidden >
</table>
</rh-table>
</rh-tab-panel>

<rh-tab slot="tab" onclick="show('affiliated-certification')">Certification</rh-tab>
<rh-tab-panel >
<input type="checkbox"
value="affiliated-certification"
name="selectedOptionstest" id ="affiliated-certification" checked
onclick="performToggle('affiliated-certification')"> <label for="affiliated-certification">Select/UnSelect All Certification</label>
<rh-table>
<table class="table" id="affiliated-certification-table" hidden>
</table>
</rh-table>
</rh-tab-panel>

<rh-tab slot="tab" onclick="show('operator')">Operator</rh-tab>
<rh-tab-panel >
<input type="checkbox"
value="operator"
name="selectedOptionstest" id ="operator" checked
onclick="performToggle('operator')"> <label for="operator">Select/UnSelect All Operator</label>
<rh-table>
<table class="table" id="operator-table" hidden>
</table>
</rh-table>
</rh-tab-panel>


<rh-tab slot="tab" onclick="show('access-control')">Access Control </rh-tab>
<rh-tab-panel >
<input type="checkbox"
value="access-control"
name="selectedOptionstest" id ="access-control" checked
onclick="performToggle('access-control')"> <label for="operator">Select/UnSelect All Access Control</label>
<rh-table>
<table class="table" id="access-control-table" hidden >
</table>
</rh-table>
</rh-tab-panel>

<rh-tab slot="tab" onclick="show('platform-alteration')">Platform Alteration</rh-tab>
<rh-tab-panel >
<input type="checkbox"
value="platform-alteration"
name="selectedOptionstest" id ="platform-alteration" checked
onclick="performToggle('platform-alteration')"> <label for="platform-alteration">Select/UnSelect All Platform Alteration</label>
<rh-table>
<table class="table" id="platform-alteration-table" hidden>
</table>
</rh-table>
</rh-tab-panel>
<rh-tab slot="tab" onclick="show('networking')">Networking</rh-tab>
<rh-tab-panel >
<input type="checkbox"
value="networking"
name="selectedOptionstest" id ="networking" checked
onclick="performToggle('networking')"> <label for="networking">Select/UnSelect All Networking</label>
<rh-table>
<table class="table" id="networking-table" hidden>
</table>
</rh-table>
</rh-tab-panel>
<rh-tab slot="tab" onclick="show('performance')">Performance</rh-tab>
<rh-tab-panel >
<input type="checkbox"
value="performance"
name="selectedOptionstest" id ="performance" checked
onclick="performToggle('performance')"> <label for="performance">Select/UnSelect All Performance</label>
<rh-table>
<table class="table" id="performance-table" hidden>
</table>
</rh-table>
</rh-tab-panel>
<rh-tab slot="tab" onclick="show('observability')">Observability</rh-tab>
<rh-tab-panel >
<input type="checkbox"
value="observability"
name="selectedOptionstest" id ="observability" checked
onclick="performToggle('observability')"> <label for="observability">Select/UnSelect All Observability</label>
<rh-table>
<table class="table" id="observability-table" hidden>
</table>
</rh-table>
</rh-tab-panel>
</rh-tabs>

</fieldset>
<rh-button type="submit" name="submit">Run Certification Test</rh-button>
</form>
<rh-button id="show-logs" type="button" variant="secondary">Show Log</rh-button>
Expand Down
Loading

0 comments on commit fdc6ef7

Please sign in to comment.