<dashboard version="1.1" theme="dark" stylesheet="manage_frameid_mapping_v2.css" script="manage_frameid_mapping_v2.js" hideEdit="true">
    <label>frameID mapping management interface</label>
    <row>
        <panel>
            <html>
                <style>
                    .parent-top-single {
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        grid-template-rows: 1fr;
                        grid-column-gap: 0px;
                        grid-row-gap: 0px;
                    }
                </style>

                <!-- modal windows -->

                <!-- Help Modal -->
                <div class="modal custom-modal-60 fade" id="modal_help" tabindex="-1" role="dialog">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">

                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true"></span>
                                </button>

                                <div style="text-align: left;">
                                    <h4 class="modal-title">Integrated Navigation:</h4>
                                </div>
                            </div>

                            <div class="modal-body">

                                <div style="text-align: center;">
                                    <h1>FRAMEID MAPPING MANAGEMENT</h1>
                                </div>

                                <div>

                                    <h3>The frameID mapping management interface allows to configure frameID mapping on a per server basis:</h3>
                                    <lu>
                                        <li>logically link a server with a frame identifier</li>
                                        <li>to be used as a search filters to filter out groups of server depending in your needs</li>
                                        <li>to be used for analytic purposes to perform advanced calculations and aggregations</li>
                                    </lu>
                                    <br />

                                    <br />
                                    <div style="text-align: center;">
                                        <img src="../../static/app/metricator-for-nmon/diagrams/frameID_mapping.png" alt="frameID_mapping.png"></img>
                                    </div>
                                    <br />
                                </div>

                                <div style="text-align:left;">
                                    <h1>Related links:</h1>
                                </div>

                                <div style="text-align: center;">
                                    <a target="_blank" href="search?q=%7C%20inputlookup%20nmon_frameID_mapping%0A%7C%20fields%20frameID%2Cserialnum%2Chost%2C*" style="margin: 10px;" class="btn btn-outline-secondary">nmon_frameID_mapping collection »
                                    </a>
                                    <a target="_blank" href="Manage_alerting_threshold" style="margin: 10px;" class="btn btn-outline-secondary">per server alerting threshold »
                                    </a>
                                    <a target="_blank" href="Manage_alerting_threshold_filesystem" style="margin: 10px;" class="btn btn-outline-secondary">per server file-systems alerting threshold »
                                    </a>
                                    <a target="_blank" href="Manage_file_systems_global_exclusion" style="margin: 10px;" class="btn btn-outline-secondary">global file-system alerting exclusion »
                                    </a>
                                    <a target="_blank" href="Manage_file_systems_exclusion" style="margin: 10px;" class="btn btn-outline-secondary">per server file-system alerting exclusion »
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>

                <!-- Error or failure during the operation -->
                <div class="modal fade" id="modal_generic_error" role="dialog">
                    <div class="modal-dialog">

                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header modal-header-danger">
                                <button type="button" class="close" data-dismiss="modal"></button>
                                <h1 style="color: indianred;">
                                    <span class="glyphicon glyphicon-lock"></span>Oops!</h1>
                            </div>
                            <div class="modal-body">
                                <h1>Sorry but it looks like an error occurred while attempting to perform this operation.</h1>
                                <h2>You might not have the permission to do so, or an unexpected failure was encountered.</h2>
                                <b>The server returned the following error message:</b>
                                <div class="modal-error-message">
                                    <p>error return message</p>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="submit" class="btn btn-default pull-right" data-dismiss="modal">
                                <span class="glyphicon glyphicon-remove"></span> Close</button>
                        </div>
                    </div>
                </div>

                <!-- successful operation -->
                <div class="modal fade" id="modal_generic_success" role="dialog">
                    <div class="modal-dialog">

                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header modal-header-danger">
                                <button type="button" class="close" data-dismiss="modal"></button>
                                <h1 style="color: #77dd77;">
                                    <span class="glyphicon glyphicon-lock"></span>Success</h1>
                            </div>
                            <div class="modal-body">
                                <div class="modal-success-message">
                                    <h2>The operation was achieved successfully.</h2>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary pull-right" data-dismiss="modal">
                                    <span class="glyphicon glyphicon-remove"></span> Ok</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- add entity -->
                <div class="modal custom-modal-80 fade" id="modal_add_entity" role="dialog">
                    <div class="modal-dialog">

                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header modal-header-danger">
                                <button type="button" class="close" data-dismiss="modal"></button>
                                <h1 style="color: dodgerblue;">
                                    <span class="glyphicon glyphicon-lock"></span>Add entity:</h1>
                            </div>
                            <div class="modal-body">

                                <div>

                                    <h2>
                                        You can manually add a new entity to the frameID mapping collection, fill the required information and click on submit to add this new entity:
                                    </h2>

                                    <div class="fieldset">
                                        <div class="input input-text" id="input_add_frameid">
                                            <label>set frameID:</label>
                                        </div>
                                        <div class="input input-text" id="input_add_serialnum">
                                            <label>set serialnum:</label>
                                        </div>
                                        <div class="input input-text" id="input_add_host">
                                            <label>set host:</label>
                                        </div>
                                        <div class="input input-text" id="input_add_host_description">
                                            <label>set host desc:</label>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="modal-footer">
                                <button id="btn_submit_new_entity" style="margin-right: 10px;" class="btn btn-primary pull-right" data-dismiss="modal">
                                    <span class="glyphicon glyphicon-remove"></span> Submit</button>
                                <button id="btn_cancel_new_entity" style="margin-right: 10px;" class="btn btn-secondary pull-right" data-dismiss="modal">
                                    <span class="glyphicon glyphicon-remove"></span> Cancel</button>
                            </div>

                        </div>
                    </div>
                </div>

                <!-- update entity -->
                <div class="modal custom-modal-80 fade" id="modal_update_entity" role="dialog">
                    <div class="modal-dialog">

                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header modal-header-danger">
                                <button type="button" class="close" data-dismiss="modal"></button>
                                <h1 style="color: dodgerblue;">
                                    <span class="glyphicon glyphicon-lock"></span>Update or delete entity:</h1>
                            </div>
                            <div class="modal-body">

                                <div>

                                    <h2>
                                        Update the entity information in the following inputs and click on the update button. If you wish to delete this entity from the collection, click on delete.
                                    </h2>

                                    <div class="fieldset">
                                        <div class="input input-text" id="input_modify_frameid">
                                            <label>set frameID:</label>
                                        </div>
                                        <div class="input input-text" id="input_modify_serialnum">
                                            <label>set serialnum:</label>
                                        </div>
                                        <div class="input input-text" id="input_modify_host">
                                            <label>set host:</label>
                                        </div>
                                        <div class="input input-text" id="input_modify_host_description">
                                            <label>set host desc:</label>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="modal-footer">
                                <button id="btn_submit_delete_entity" style="margin-right: 10px;" class="btn btn-danger pull-right" data-dismiss="modal">
                                    <span class="glyphicon glyphicon-remove"></span> Delete this entity</button>
                                <button id="btn_submit_update_entity" style="margin-right: 10px;" class="btn btn-primary pull-right" data-dismiss="modal">
                                    <span class="glyphicon glyphicon-remove"></span> Update this entity</button>
                                <button id="btn_cancel_update_entity" style="margin-right: 10px;" class="btn btn-secondary pull-right" data-dismiss="modal">
                                    <span class="glyphicon glyphicon-remove"></span> Cancel</button>
                            </div>

                        </div>
                    </div>
                </div>

                <!-- end modals -->

                <div class="parent-top-single">
                    <div id="element_unset_frameID">
                    </div>
                    <div id="element_delta_frameID">
                    </div>
                    <div id="element_duplicated_hosts">
                    </div>
                </div>
            </html>
        </panel>
    </row>
    <row>
        <panel>
            <html>
                <div>
                    <button id="btn_help" style="margin-left: 20px; margin-right: 10px;" class="btn btn-primary pull-left" data-dismiss="modal">
                        <span class="glyphicon glyphicon-remove"></span> Help &amp; information</button>
                    <button id="btn_add_new_mapping" style="margin-left: 10px; margin-right: 10px;" class="btn btn-primary pull-left" data-dismiss="modal">
                        <span class="glyphicon glyphicon-remove"></span> Add new entry</button>
                </div>
            </html>
        </panel>
    </row>

    <row>
        <panel>
            <html>
                <div>
                    <div style="margin-left: 20px;">
                        <div class="input input-linklist" id="inputLink">
                            <label></label>
                        </div>
                    </div>

                    <div id="tableParent1" style="display: none;">

                        <h2>frameID KVstore collection current content:
                        </h2>
                        <h3>
                        The table shows frameID mapping entries currently configured. To search for an entry, fill the filters and press enter. To modify or delete an entity, click on the corresponding row in the table:
                        </h3>
                        <div>
                            <div class="fieldset">
                                <div class="input input-text" id="input_search_keyid">
                                    <label>search key:</label>
                                </div>
                                <div class="input input-text" id="input_search_frameid">
                                    <label>search frameID:</label>
                                </div>
                                <div class="input input-text" id="input_search_serialnum">
                                    <label>search serialnum:</label>
                                </div>
                                <div class="input input-text" id="input_search_host">
                                    <label>search host:</label>
                                </div>
                                <div class="input input-text" id="input_search_host_description">
                                    <label>search host desc:</label>
                                </div>
                            </div>
                        </div>
                        <div id="element_table_show_lookup_content">
                        </div>
                    </div>

                    <div id="tableParent2" style="display: none;">

                        <h2>frameID missing hosts:
                        </h2>
                        <h3>
                        Missing frameIDs - The following host(s) have missing entries in the collection, please run the report "Generate NMON frameID mapping lookup table" or manually add the relevant entry (click on the row to pre-fill fields for addition and open the addition screen automatically)
                        </h3>
                        <div id="element_table_missing_content">
                        </div>
                    </div>

                </div>
            </html>
        </panel>
    </row>
</dashboard>