<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>M/Monit Admin | Roles</title>
    <meta name="theme-color" content="#3D3E40">
    <meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-title" content="M/Monit" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <link rel="apple-touch-icon" href="../../img/apple-touch-icon.png"/>
    <link rel="manifest" href="../../img/manifest.webmanifest">
    <script src="../../lib/js/appearance.js"></script>
    <link rel="stylesheet" href="../../lib/css/styles.css?version=400">
    <link rel="stylesheet" href="../../assets/admin/admin_roles.css?version=400">
</head>
<body>
    <?cs include:"img/icons.svg" ?>
    <div id="wrap">
        <div id="fixed-header">
            <div id="fake-status-bar"></div>
            <div id="header">
                <div id="nav">
                    <a id="logo" target="webapp" href="../../"></a>
                    <a id="logout" title="Logout" target="webapp" href="../../login/logout.csp"></a>
                    <ul id="menu">
                        <li>
                            <a target="webapp" href="../../index.csp"><span>Dashboard</span></a>
                        </li>
                        <li>
                            <a target="webapp" href="../../status/hosts/"><span>Status</span></a>
                        </li>
                        <li>
                            <a target="webapp" href="../../reports/analytics/"><span>Reports</span></a>
                            <ul>
                                <li><a target="webapp" href="../../reports/analytics/">Analytics</a></li>
                                <li><a target="webapp" href="../../reports/uptime/">Uptime</a></li>
                                <li><a target="webapp" href="../../reports/events/">Events</a></li>
                            </ul>
                        </li>
                        <li class="active">
                            <?cs if:#Request.Param.IsAdmin ?>
                            <a target="webapp" href="../../admin/general/"><span>Admin</span></a>
                            <ul>
                                <li><a target="webapp" href="../../admin/general/">General</a></li>
                                <li><a target="webapp" href="../../admin/hosts/">Hosts</a></li>
                                <li><a target="webapp" href="../../admin/groups/">Groups</a></li>
                                <li><a target="webapp" href="../../admin/users/">Users</a></li>
                                <li><a target="webapp" href="../../admin/roles/">Roles</a></li>
                                <li><a target="webapp" href="../../admin/alerts/">Alerts</a></li>
                                <li><a target="webapp" href="../../admin/settings/">Settings</a></li>
                            </ul>
                            <?cs else ?>
                            <a target="webapp" href="../../admin/users/edit?id=<?cs var:Request.Param.RemoteUserId ?>"><span>Profile</span></a>
                            <?cs /if ?>
                        </li>
                        <li id="logout-phone"><a target="webapp" href="../../login/logout.csp">Logout</a></li>
                    </ul>
                </div> <!-- nav -->
            </div><!-- header -->
        </div><!-- fixed-header -->
        <div id="main">
<?cs if:#Request.Param.IsAdmin ?>
            <div id="title">
                <a href="#" id="help" class="help-button" title="Help" data-help="#helpbox"></a>
                <h1>
                    <span>Access Roles</span>
                </h1>
            </div>
            <div class="row-fluid">
                <div class="span12">
                    <div class="titlerow">
                        <button class="add-button" title="Add new role" data-bind="event: {vclick: roles.add}, css: {disabled: $root.roles.createInProgress() }"></button>
                        <span class="hidden-phone crud add-hint toright"></span>
                        <span>Set up access roles. Only built-in and active roles will be evaluated</span>
                    </div>
                    <div class="spinner tocenter localpushdown"></div>
                </div> <!-- span12 -->
            </div> <!-- row-fluid -->
            <div class="row-fluid">
                <h3>Built-in roles (protected)</h3>
                <div id="builtinrolesTab">
                    <!-- ko if: builtinroles.list().length > 0 -->
                        <ul class="tableView accordion" data-bind="foreach: builtinroles.list">
                            <li class="list" data-bind="attr: { 'id': 'role' + roleid() }">
                                <div class="accordionRow" data-bind="event: { vclick: $root.roles.toggleExpand, mouseover: $root.roles.enableMouseover, mouseout: $root.roles.disableMouseover}, validationElement: name">
                                    <span data-bind="text: name" class="editable-text"></span>
                                    <span class="accessory" data-bind="css: {expanded: $root.roles.isExpanded($data)}"></span>
                                </div>
                                <div class="accordionPanel roles-controller" data-bind="slideVisible: $root.roles.isExpanded($data), slideDuration:300">
                                    <div class="row-fluid margin-top-1">
                                        <span class="description">
                                            <span data-bind="text:description" name="description" autocomplete="off" />
                                        </span>
                                    </div>
                                    <div class="row-fluid padding-bottom-1">
                                        <div class="row-fluid padding-bottom-0">
                                            <div class="span5 toleft">
                                                <p class="smaller-font">Role Members:</p>
                                                <select size="10" multiple data-bind="options: usersInRole, selectedOptions:usersInRoleSelected, optionsText:'name'"></select>
                                            </div>
                                            <div id="arrows" class="span2" data-bind="css: {localpushdown : $root.shouldPushDown()}">
                                                <span title="Add Users to Role" class="left-arrow-button">
                                                    <svg data-bind="click:addUsersToRole" class="arrow-button margin-right-1">
                                                        <use href="#circle-icon" class="circle"></use>
                                                        <use href="#left-arrow-icon" class="arrow"></use>
                                                    </svg>
                                                </span>
                                                <span title="Remove Users from Role">
                                                    <svg data-bind="click:removeUsersFromRole" class="arrow-button">
                                                        <use href="#circle-icon" class="circle"></use>
                                                        <use href="#right-arrow-icon" class="arrow"></use>
                                                    </svg>
                                                </span>
                                            </div>
                                            <div class="span5 toright">
                                                <p class="smaller-font">Available Users:</p>
                                                <select size="10" multiple data-bind="options: availableUsers, selectedOptions:availableUsersSelected, optionsText:'name'"></select>
                                            </div>
                                        </div> <!-- row-fluid -->
                                    </div>
                                </div>
                            </li>
                        </ul>
                    <!-- /ko -->
                    <div id="confirmRoleDelete" class="modal hide" data-bind="with: roles.role">
                        <div class="modal-body">
                            <h2>Delete <span class="text-error" data-bind='text: name'></span>?</h2>
                            <p>Are you sure you want to delete this role? There is no undo.</p>
                        </div>
                        <div class="modal-footer">
                            <button class="btn" data-dismiss="modal" data-bind="event: {vclick: cancelRole}">Cancel</button>
                            <button class="btn btn-danger" data-dismiss="modal" data-bind="event: {vclick: deleteRole}">Delete</button>
                        </div>
                    </div>
                </div> <!-- span12 -->
            </div> <!-- row-fluid -->
            <div class="row-fluid yui-skin-sam">
                <h3 class="">Custom roles</h3>
                <div id="rolesTab">
                    <!-- ko if: roles.list().length > 0 -->
                        <ul class="tableView accordion" data-bind="foreach: roles.list">
                            <li class="list" data-bind="attr: { 'id': 'role' + roleid() }">
                                <div class="accordionRow" data-bind="event: { vclick: $root.roles.toggleExpand, mouseover: $root.roles.enableMouseover, mouseout: $root.roles.disableMouseover}, validationElement: name">
                                    <span data-bind="visible: ! editing(), text: name, event: {vclick: edit}" class="editable-text"></span>
                                    <input data-bind="visible: editing(), value: name, valueUpdate: 'afterkeydown', hasFocus: editing(), event: { blur: update }, onEnter: stopEdit, click: edit, clickBubble: false" placeholder="Role name" type="text" maxlength="255" />
                                    <div class="group">
                                        <button class="btn btn-mini btn-warning btn-save" data-bind="visible: ! roleid(), event: {vclick: saveRole}">Save</button>
                                        <button class="btn btn-mini btn-warning btn-update" data-bind="visible: (roleid() && modified()), event: {vclick: updateRole}">Update</button>
                                        <span class="ajaxProgress hidden-phone" data-bind="visible: ajaxInProgress()"><img src='../../img/spinner.gif' alt="spinner" height='12' width='12' /></span>
                                        <div class="switch-button">
                                            <input name="active" type="checkbox" data-bind="checked: active" />
                                            <label data-bind="event: {vclick: toggleActive}" for="active"></label>
                                        </div>
                                        <span class="accessory" data-bind="css: {expanded: $root.roles.isExpanded($data)}"></span>
                                    </div> <!-- group -->
                                </div>
                                <div class="accordionPanel roles-controller" data-bind="slideVisible: $root.roles.isExpanded($data), slideDuration:300">
                                    <span class="operator toright" title="Delete Role">
                                        <svg class="delete-button" style="height:18px; width:18px;" data-target="#confirmRoleDelete" data-toggle="modal" data-bind="event: {vclick: $root.roles.confirmDelete}">
                                            <use href="#circle-fill-icon" class="circle-fill"></use>
                                            <use href="#x-icon" class="x-mark"></use>
                                        </svg>
                                    </span>
                                    <div class="row-fluid">
                                        <span class="description">
                                            <input placeholder="Optional role description..." data-bind="value:description, valueUpdate: 'afterkeydown', event: { blur: update }" name="description" autocomplete="off" />
                                        </span>
                                    </div>

                                    <div class="row-fluid" data-bind="visible: ! admin()">
                                        <span>Host Permissions</span>
                                        <!-- ko foreach: {data: rolerows, afterRender: $root.handleRoleRowAfterRender} -->
                                        <div class="span12 rolerow" data-bind="event: { mouseover: enableControlbox, mouseout: disableControlbox}">
                                            <div class="controlbox" data-bind="style: { visibility: controlboxEnabled() ? 'visible' : 'hidden'}">
                                                <span class="controller delete" data-bind="event: {vclick:$parent.deleteRoleRow}" title="Delete permission"></span>
                                                <span class="controller add" data-bind="event: {vclick:$parent.addRoleRow.bind($data, $index() + 1)}" title="Add permission"></span>
                                            </div>

                                            <div class="inputbox">
                                                <!-- host/hostgroup menu -->
                                                <div class="host tableViewMenu" data-bind="style: {width: $root.buttonWidth()}">
                                                    <div class="btn" data-bind="event: {vclick: toggleHostsMenu}, style: {width: $root.buttonWidth()}">
                                                        <span class="caret"></span>
                                                        <span data-bind="text: hosts2label"></span>
                                                    </div>
                                                    <div class="callout popup">
                                                        <div class="tableViewScroller">
                                                            <div class="tableViewTop current">
                                                                <ul class="tableView">
                                                                    <li class="list" data-bind="event: {vclick: hostViewController.push}, css:{disabled:hosts().length == 0}">
                                                                        <span>Hosts</span>
                                                                        <span class="accessory"></span>
                                                                        <div class="tableViewSubView">
                                                                            <div class="tableViewBar">
                                                                                <div>
                                                                                    <div class="title">Hosts</div>
                                                                                    <span class="backButton" data-bind="event: {vclick: hostViewController.pop}"></span>
                                                                                    <span class="searchButton" data-bind="visible:hosts().length > 10, event: {vclick:toggleShowHostSearch}, css:{active:shouldShowHostSearch}"></span>
                                                                                </div>
                                                                                <div data-bind="slideVisible:shouldShowHostSearch, focuson:'.searchfield'">
                                                                                    <input class="searchfield" placeholder="search hosts ..." type="search" data-bind="value: hostQuery, valueUpdate: ['keyup','search'], blurOnEnter: true" autocomplete="off" />
                                                                                </div>
                                                                            </div>
                                                                            <ul class="tableView" data-bind="foreach: hosts">
                                                                                <!-- ko if: active() -->
                                                                                    <li class="select" data-bind="event: {vclick:$parent.selectHost}, css:{checked:selected}">
                                                                                        <span data-bind="text: name"></span>
                                                                                        <span class="accessory"></span>
                                                                                    </li>
                                                                                <!-- /ko -->
                                                                            </ul>
                                                                        </div>
                                                                    </li>
                                                                    <li class="list" data-bind="event: {vclick: hostViewController.push}, css:{disabled:hostgroups().length == 0}">
                                                                        <span>Host groups</span>
                                                                        <span class="accessory"></span>
                                                                        <div class="tableViewSubView">
                                                                            <div class="tableViewBar">
                                                                                <div class="title">Host groups</div>
                                                                                <span class="backButton" data-bind="event: {vclick:hostViewController.pop}"></span>
                                                                            </div>
                                                                            <ul class="tableView" data-bind="foreach: hostgroups">
                                                                                <li class="select" data-bind="event: {vclick:$parent.selectHostGroup}, css:{checked:selected}">
                                                                                    <span data-bind="text: name"></span>
                                                                                    <span class="accessory"></span>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- permission menu -->
                                                <div class="permission tableViewMenu" data-bind="style: {width: $root.buttonWidth()}">
                                                    <div class="btn" data-bind="event: {vclick: togglePermissionMenu}, style: {width: $root.buttonWidth()}">
                                                        <span class="caret"></span>
                                                        <span data-bind="text: permission2label"></span>
                                                    </div>
                                                    <div class="callout popup">
                                                        <div class="tableViewScroller">
                                                            <div class="tableViewTop current">
                                                                <div class="tableViewBar">
                                                                    <div class="title">Permissions</div>
                                                                    <span class="selectAllButton" data-bind="css:{unSelectAllButton:Menu.countSelected(permission()) == permission().length}, event: {vclick: $data.toggleSelection.bind($data, permission, permissionSelected)}"></span>
                                                                </div>
                                                                <ul class="tableView multi" data-bind="foreach: permission">
                                                                    <li class="select" data-bind="event: {vclick:$parent.selectPermission}, css:{checked:selected}">
                                                                        <span data-bind="text: name"></span>
                                                                        <span class="accessory"></span>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>  <!-- div inputbox -->

                                        </div> <!-- div span12 rolerow -->
                                        <!-- /ko -->
                                    </div>
                                    <div class="row-fluid padding-bottom-1">
                                        <div class="row-fluid padding-bottom-0">
                                            <div class="span5 toleft">
                                                <p class="smaller-font">Role Members:</p>
                                                <select size="10" multiple data-bind="options: usersInRole, selectedOptions:usersInRoleSelected, optionsText:'name'"></select>
                                            </div>
                                            <div id="arrows" class="span2" data-bind="css: {localpushdown : $root.shouldPushDown()}">
                                                <span title="Add Users to Role" class="left-arrow-button">
                                                    <svg data-bind="click:addUsersToRole" class="arrow-button margin-right-1">
                                                        <use href="#circle-icon" class="circle"></use>
                                                        <use href="#left-arrow-icon" class="arrow"></use>
                                                    </svg>
                                                </span>
                                                <span title="Remove Users from Role">
                                                    <svg data-bind="click:removeUsersFromRole" class="arrow-button">
                                                        <use href="#circle-icon" class="circle"></use>
                                                        <use href="#right-arrow-icon" class="arrow"></use>
                                                    </svg>
                                                </span>
                                            </div>
                                            <div class="span5 toright">
                                                <p class="smaller-font">Available Users:</p>
                                                <select size="10" multiple data-bind="options: availableUsers, selectedOptions:availableUsersSelected, optionsText:'name'"></select>
                                            </div>
                                        </div> <!-- row-fluid -->
                                    </div>
                                </div>
                            </li>
                        </ul>
                    <!-- /ko -->
                    <div id="confirmRoleDelete" class="modal hide" data-bind="with: roles.role">
                        <div class="modal-body">
                            <h2>Delete <span class="text-error" data-bind='text: name'></span>?</h2>
                            <p>Are you sure you want to delete this role? There is no undo.</p>
                        </div>
                        <div class="modal-footer">
                            <button class="btn" data-dismiss="modal" data-bind="event: {vclick: cancelRole}">Cancel</button>
                            <button class="btn btn-danger" data-dismiss="modal" data-bind="event: {vclick: deleteRole}">Delete</button>
                        </div>
                    </div>
                </div> <!-- span12 -->
            </div> <!-- row-fluid -->
<?cs /if ?>
        </div> <!-- main -->
    </div> <!-- wrap -->
    <div id="footer">
        <div class="toleft hidden-phone">Logged in as <?cs var:Request.RemoteUser ?></div>
        <div class="toright hidden-phone">
            <ul class="piped">
                <li>Copyright &copy; 2023 <a href="https://tildeslash.com/">Tildeslash</a>. All Rights Reserved.</li>
                <li><a href="https://mmonit.com/">M/Monit</a></li>
                <li><a href="https://mmonit.com/monit/">Monit</a></li>
                <li><a href="https://mmonit.com/wiki/">Wiki</a></li>
            </ul>
        </div>
        <div id="copy" class="visible-phone">Copyright &copy; 2023 <a href="https://tildeslash.com/">Tildeslash</a>. All Rights Reserved.</div>
    </div> <!-- footer -->
    <!-- Help -->
    <div id="helpbox">
        <div class="title">
            <h2>Access Roles Help</h2>
        </div>
        <div class="content paragraphify">
            <p>
                Use this page to create or edit Access Roles. An Access Role is used to limit access and visibility to hosts and host groups to
                a select set of users.
            </p>
            <p>
                There are two types of roles:
            </p>
            <ol class="numbered-list">
                <li>Built-in:
                    There are two built-in roles, an <em>admin</em> role for M/Monit administration and a <em>collector</em> role for posting
                    status updates and events to M/Monit. You can assign members to the role, but you cannot delete these roles.
                </li>
                <li>Custom:
                    Fully managed by (you) the M/Monit administrator, you can create, modify or delete these roles as you see fit.
                </li>
            </ol>
            <p>
                A Custom Access Role is setup by choosing a set of hosts or host groups and a set of users who should be members of the
                role and have access to the hosts. To get started, we have created a custom <strong>GUI role</strong> with one member,
                the monit user. Feel free to remove or modify this role as you see fit. Just note that if you remove the monit user from
                this role, the monit user, upon login will not see any data. Because the monit user is also a member of the collector
                role, it will continue to be able to handle data posted to M/Monit. Once you have created your own users, we recommend
                removing the monit user from any custom roles so it is just a pure collector user with no GUI access.
            </p>
            <p>
                <b>Host Permissions</b>: Specifies the hosts and hostgroups that members in the role can see and set access permissions:
                <ul>
                    <li class="margin-bottom-1">
                        <em>Collector access</em>: Members can update hosts status and post events via M/Monit's collector. To be able to
                        create new hosts, the role also need the "Any Host" permission. The "Any Host" permission is automatically set if you
                        do not select any hosts.
                    </li>
                    <li class="margin-bottom-1">
                        <em>View</em>: allow members to view role hosts in M/Monit. If this permission is <em>not</em> set,
                        members can still login to M/Monit, but they will not see any hosts nor any data. They can access
                        their own Profile page and change information there, but without Hosts and View permissions that's
                        basically it.
                    </li>
                    <li>
                        <em>Service Actions</em>: allow members to perform actions on hosts in the role, such as start, stop or restart a service,
                        in the M/Monit host status details page
                    </li>
                </ul>
            </p>
            <p>
                <b>Role Members</b>: Select users who should be members of the role.
            </p>
            <p>
                You can activate and deactivate the role using the switch next to the role name. This allows you to quickly revoke permissions with
                one click, without losing the role settings completely.
            </p>
        </div>
    </div>
    <script src="../../lib/f/yui/2/utilities/utilities.js?version=400"></script>
    <script src="../../lib/f/jquery/jquery.js?version=400"></script>
    <script src="../../lib/f/jquery/jquery.mobile.vmouse.js?version=400"></script>
    <script src="../../lib/js/webapp.js?version=400"></script>
    <script src="../../lib/f/jquery/jquery.getUrlParam.js?version=400"></script>
    <script src="../../lib/f/twbootstrap/js/bootstrap.js?version=400"></script>
    <script src="../../lib/f/knockout/knockout.js?version=400"></script>
    <script src="../../lib/f/knockout/knockout.validation.js?version=400"></script>
    <script src="../../lib/js/error.js?version=400"></script>
    <script src="../../lib/js/math.js?version=400"></script>
    <script src="../../lib/js/ui.js?version=400"></script>
    <script src="../../lib/js/menu.js?version=400"></script>
    <script src="../../lib/js/tableview.js?version=400"></script>
    <script src="../../lib/js/help.js?version=400"></script>
    <script src="../../lib/js/csrf.js?version=400"></script>
    <script src="../../assets/admin/admin_roles.js?version=400"></script>
</body>
</html>
