scripts/apps/monitoring/views/monitoring-view.html
<div class="monitoring" ng-controller="AggregateCtrl as aggregate">
<section class="main-section" ng-class="monitoring.state" aria-labelledby="monitoring-heading">
<h2 id="monitoring-heading" class="a11y-only" ng-if="type === 'monitoring'" translate>Monitoring</h2>
<h2 id="monitoring-heading" class="a11y-only" ng-if="type === 'spike'" translate>Spiked items</h2>
<div class="preview-layout monitoring-preview-layout" sd-media-query min-width="700" element-class="narrowList" data-test-id="monitoring-view">
<div class="content-list monitoring__content" ng-class="{'sd-loader': aggregate.loading}">
<div class="monitoring__toolbar-container" ng-if="hideMonitoringToolbar1 !== true || hideMonitoringToolbar2 !== true">
<div class="subnav" ng-if="hideMonitoringToolbar1 !== true">
<div class="monitoring-backlink" ng-if="monitoring.singleGroup">
<button sd-tooltip="{{ 'Back to original view' | translate }}" flow="right" class="navbtn navbtn--left" ng-click="monitoring.viewMonitoringHome()">
<i class="icon-arrow-left"></i>
</button>
</div>
<!-- Filter content using content profile -->
<div data-test-id="content-profile-dropdown" class="dropdown sd-flex-no-shrink" dropdown >
<button class="filter-trigger dropdown__toggle navbtn navbtn--left" dropdown-toggle title="{{ 'Apply Filters' | translate }}" aria-label="{{ 'Apply Filters' | translate }}">
<i class="icon-filter-large"></i>
</button>
<ul class="dropdown__menu dropdown__menu--scrollable">
<li>
<div class="dropdown__menu-label" translate>Content Profiles</div>
</li>
<li data-test-id="content-profiles" ng-repeat="profile in aggregate.activeProfiles | orderBy:'label'">
<button class="label-group"
ng-click="aggregate.setFilterType('contentProfile', profile, $event)"
ng-disabled="aggregate.activeFilters.contentProfile.includes(profile._id)"
>
<span translate>{{ profile.label }}</span>
<i ng-show="aggregate.activeFilters.contentProfile.includes(profile._id)" class="icon-ok"></i>
</button>
</li>
</ul>
</div>
<div class="dropdown sd-flex-no-shrink" dropdown ng-if="!monitoring.singleGroup && type === 'monitoring'">
<button class="dropdown__toggle navbtn navbtn--text-only" dropdown-toggle>{{ 'Monitoring' | translate }} {{workspace.name}} <span class="dropdown__caret"></span></button>
<ul class="dropdown__menu scrollable">
<li><div class="dropdown__menu-label" translate>Stages</div></li>
<li ng-repeat="card in aggregate.cards">
<button class="label-group"
ng-click="monitoring.viewSingleGroup(card, card.type === 'stage' ? card.type : 'single-stage')"
translate>{{:: monitoring.getGroupLabel(card, aggregate.settings.type)}}</button>
</li>
</ul>
</div>
<h2 class="subnav__page-title sd-flex-no-grow sd-empty" ng-hide="monitoring.singleGroup.singleViewType !== 'desk' && type === 'monitoring'">
<div class="sd-padding-x--2 sd-check-button__group sd-flex--nowrap sd-flex--grow-0">
<sd-check
ng-repeat="(id, group) in aggregate.personalGroups"
type="radio"
label-position="inside"
ng-model="aggregate.defaultPersonalGroup.type"
ng-click="aggregate.togglePersonalGroup(id, group)"
ng-value="{{id}}"
>
{{group.header}}
</sd-check>
</div>
<span ng-if="monitoring.singleGroup.subheader && monitoring.singleGroup.singleViewType == null">
{{ monitoring.singleGroup.header}} / {{ monitoring.singleGroup.subheader}} {{ monitoring.singleGroup.type}}
<span class="label-total">{{ monitoring.totalItems}}</span>
</span>
<span ng-if="monitoring.singleGroup.singleViewType === 'desk'">
{{ monitoring.singleGroup.header }} {{ monitoring.singleGroup.singleViewType}}
<span class="label-total">{{ monitoring.totalItems}}</span>
</span>
</h2>
<div class="subnav__stage-group" ng-if="monitoring.singleGroup.singleViewType === 'stage' || monitoring.singleGroup && !monitoring.singleGroup.subheader" ng-class="{'subnav__stage-group--ui-responsive': aggregate.monitoringSearch}">
<!-- There was label duplication in the case when you select a stage so I removed the elements responsible for showing the label of the desk
only in the case when you select a stage, because I'm not sure if there's other cases where we need this information to be shown.
-->
<span ng-if="monitoring.singleGroup.type == null" class="stage-group__desk">{{ monitoring.singleGroup.header }}</span>
<span ng-if="monitoring.singleGroup.type == null" class="stage-group__split">/</span>
<div class="dropdown" dropdown>
<button style="white-space: nowrap;" class="dropdown__toggle navbtn navbtn--text-only navbtn--padding-s" dropdown-toggle>{{monitoring.getGroupLabel(monitoring.singleGroup, monitoring.singleGroup.type)}}<span class="dropdown__caret"></span></button>
<ul class="dropdown__menu scrollable">
<li><div class="dropdown__menu-label" translate>Stages</div></li>
<li ng-repeat="card in aggregate.cards" ng-class="{active: monitoring.singleGroup}">
<button class="label-group"
ng-click="monitoring.viewSingleGroup(card, card.type === 'stage' ? card.type : 'single-stage')"
ng-disabled="monitoring.singleGroup._id === card._id"
>
{{:: monitoring.getGroupLabel(card, aggregate.settings.type)}}
</button>
</li>
</ul>
</div>
<span class="stage-group__badge label label--large">{{ monitoring.totalItems}}</span>
</div>
<!-- search not implemented for usage with custom data source -->
<div ng-if="customDataSource == null" class="flat-searchbar extended monitoring-flat-searchbar">
<div class="search-handler" ng-class="{'search-handler--left-border': !monitoring.singleGroup}">
<label for="search-input" class="trigger-icon"><i class="icon-search"></i></label>
<input id="search-input" type="text" placeholder="{{ 'Search' | translate }}" ng-model="query"
ng-keyup="aggregate.searchOnEnter($event, query)">
<button class="search-close" ng-click="aggregate.search(query = null)" ng-class="{visible: query}" aria-label="{{ 'Clear search' | translate }}"><i class="icon-remove-sign"></i></button>
<button class="search-start" ng-click="aggregate.search(query);" ng-class="{visible: query}" aria-label="{{ 'Start search' | translate }}">
<i class="icon-chevron-right-thin"></i>
</button>
</div>
</div>
<div sd-multi-action-bar></div>
<div class="subnav__button-stack--square-buttons sd-margin-start--auto">
<div class="refresh-box">
<button ng-if="monitoring.showRefresh && (monitoring.singleGroup || monitoring.viewColumn)"
ng-click="refreshGroup(monitoring.singleGroup)"
class="btn btn--primary btn--icon-only-circle btn--small"
sd-tooltip="{{ 'Refresh' | translate }}" flow="left" class="navbtn" aria-label="{{ 'Refresh content' | translate }}">
<i class="icon-repeat"></i>
</button>
</div>
<button
class="navbtn strict"
ng-if="type === 'monitoring' && aggregate.settings.type === 'workspace'"
ng-click="aggregate.edit()"
aria-label="{{ 'Monitoring settings' | translate }}"
data-test-id="monitoring-settings-button"
>
<i class="icon-settings"></i>
</button>
<sd-monitoring-filtering-buttons
ng-if="type === 'monitoring' && activeDeskId != null"
desk-id="activeDeskId"
toggle-filter="aggregate.toggleCustomFilter"
set-filter="aggregate.setCustomFilter"
is-filter-active="aggregate.isCustomFilterActive"
active-filters="aggregate.activeFilters.customFilters"
add-resource-updated-event-listener="addResourceUpdatedEventListener"
></sd-monitoring-filtering-buttons>
<div
ng-if="disableMonitoringCreateItem == null"
class="navbtn navbtn--white"
sd-tooltip="{{ 'Create new item' | translate }}"
flow="left"
>
<sd-content-create></sd-content-create>
</div>
</div>
</div>
<div ng-hide="hideMonitoringToolbar2 === true" sd-media-query min-width="700" class="subnav">
<!-- filtering by file type not implemented for usage with custom data source -->
<div ng-if="(!elementState || elementState === 'comfort') && customDataSource == null" class="button-list button-list--padded">
<a href="" ng-repeat="fileType in aggregate.fileTypes" ng-click="aggregate.setFilterType('file', fileType.type)" class="toggle-button" ng-class="{'toggle-button--active': aggregate.hasFileType(fileType.type)}" title="{{ fileType.label }}" aria-label="{{ fileType.label }}">
<span ng-if="fileType.type === 'all'" class="toggle-button__text toggle-button__text--all">{{ fileType.label }}</span>
<i ng-if="fileType.type !== 'all'" class="toggle-button__icon filetype-icon-{{fileType.type}}" title="{{ fileType.label }}"></i>
</a>
</div>
<div class="dropdown dropdown--align-left dropdown--compact-state" dropdown ng-if="elementState === 'compact'" sd-tooltip="{{ 'Filter file types' | translate }}" flow="right">
<button class="navbtn dropdown__toggle" dropdown__toggle aria-label="{{ 'More actions' | translate }}"><i class="icon-dots"></i></button>
<ul class="dropdown__menu">
<li><span class="dropdown__menu-label" translate>File types</span></li>
<li ng-repeat="fileType in aggregate.fileTypes"
ng-click="aggregate.setFilterType('file', fileType.type)"
ng-class="{'dropdown__menu-item--active': aggregate.hasFileType(fileType.type)}"
title="{{ fileType.label }}">
<button>
<span ng-if="fileType.type === 'all'" class="toggle-button__text--all" translate>all</span>
<span ng-if="fileType.type !== 'all'"><i class="filetype-icon-{{fileType.type}}"></i> {{fileType.label}}</span>
</button>
</li>
</ul>
</div>
<div class="subnav__stretch-bar"></div>
<!-- sorting not implemented for usage with custom data source -->
<div sd-item-sortbar class="sortbar-container"></div>
<div class="dropdown dropdown--align-right" dropdown ng-if="type === 'monitoring'">
<button
aria-label="{{!monitoring.viewColumn && (!view || view === 'compact') ? ('List View' | translate) : view === 'photogrid' ? ('Photo Grid View' | translate) : monitoring.viewColumn ? ('Swimlane View' | translate) : ''}}"
dropdown__toggle
class="navbtn dropdown__toggle"
>
<i ng-class="{'icon-list-view': !monitoring.viewColumn && (!view || view === 'compact'), 'icon-grid-view': view === 'photogrid', 'icon-kanban-view': monitoring.viewColumn}"></i>
</button>
<ul class="dropdown__menu">
<li>
<button ng-click="switchView('compact')">
<i class="icon-list-view"></i>{{ 'List View' | translate }}
</button>
</li>
<li ng-if="!monitoring.singleGroup && type === 'monitoring' && monitoring.hasSwimlaneView">
<button ng-click="switchView('swimlane2', true)">
<i class="icon-kanban-view"></i>{{ 'Swimlane View' | translate }}
</button>
</li>
<li>
<button ng-click="switchView('photogrid')">
<i class="icon-grid-view"></i>{{ 'Photo Grid View' | translate }}
</button>
</li>
</ul>
</div>
<div ng-if="type === 'monitoring' && monitoring.viewColumn === true" class="subnav__button-stack subnav__button-stack--padded">
<span class="sd-overflow-ellipsis" translate>Columns:</span>
<input class="line-input line-input--inline-mini sd-margin-start--1" type="number" min="2" max="{{aggregate.groups.length}}" ng-model="monitoring.columnsLimit">
</div>
<div class="dropdown dropdown--align-right dropdown--compact-state" dropdown ng-if="type === 'monitoring'">
<button class="navbtn dropdown__toggle" aria-label="{{ 'More actions' | translate }}" dropdown__toggle><i class="icon-dots-vertical"></i></button>
<ul class="dropdown__menu">
<li ng-if="type === 'monitoring'">
<button ng-click="aggregate.edit('reorder', true)">
<i class="icon-switches"></i>
<span translate>Rearrange Groups</span>
</button>
</li>
<li ng-if="type === 'monitoring' && aggregate.settings.type === 'workspace'">
<button ng-click="initWorkspaceRename(workspace)">
<i class="icon-pencil"></i>
<span translate>Rename workspace</span>
</button>
</li>
<li ng-if="type === 'monitoring' && aggregate.settings.type === 'workspace'">
<button ng-click="workspaces.confirmAndDelete(workspace)">
<i class="icon-trash"></i>
<span translate>Delete workspace</span>
</button>
</li>
</ul>
</div>
</div>
<!-- Active filter tags -->
<div class="search-tags" ng-if="aggregate.activeFilters.contentProfile.length > 0">
<ul class="search-tags__list">
<li ng-repeat="(type, keys) in aggregate.activeFilterTags">
<span>{{ type }}:</span>
<div ng-repeat="key in keys" class="tag-label tag-label--highlight2">
<span>{{ key.label }}</span>
<button data-test-id='remove-filter' class="tag-label__remove" ng-click="aggregate.removeFilter(key.key, type)">
<i class="icon-close-small"></i>
</button>
</div>
</li>
<li>
<button data-test-id='clear-filters' class="label--active" ng-click="aggregate.removeFilter(null)" translate>Clear filters</button>
</li>
</ul>
</div>
</div>
<div class="monitoring__main-content" ng-if="!aggregate.loading">
<div class="sd-column-box--3">
<div ng-style="{{contentStyle}}" class="sd-column-box__main-column">
<!-- list view -->
<div ng-if="!monitoring.viewColumn && type === 'monitoring'" class="list">
<div ng-if="(!monitoring.singleGroup || monitoring.isDeskChanged()) && type === 'monitoring'">
<div ng-repeat="group in aggregate.groups track by group._id"
sd-monitoring-group data-group="group" data-num-items="group.max_items" data-view="view"
data-view-type="aggregate.isOutputType(group.type) ? group.type: 'monitoring'"></div>
</div>
</div>
<!-- swimlane view -->
<div ng-if="monitoring.viewColumn && type === 'monitoring' && !monitoring.singleGroup" class="sd-kanban-list-container">
<div class="sd-kanban-list" ng-if="(!monitoring.singleGroup || monitoring.isDeskChanged()) && type === 'monitoring'">
<div ng-class="{active: isActiveGroup(group), inactive: !isActiveGroup(group)}"
ng-repeat="group in aggregate.groups| limitTo:monitoring.columnsLimit track by group._id"
sd-monitoring-group data-group="group" data-num-items="group.max_items" data-view="view"
data-view-type="aggregate.isOutputType(group.type) ? group.type: 'monitoring'"
class="fix-stage"
>
</div>
</div>
</div>
<div ng-if="type === 'spike' && spikedItemsQuery != null" style="height: 100%">
<sd-articles-list-react
heading="'Spiked Items' | translate"
query="spikedItemsQuery"
monitoring-controller="monitoring"
style="height: 100%"
></sd-articles-list-react>
</div>
<div ng-if="monitoring.singleGroup && !monitoring.isDeskChanged()" class="list">
<div sd-monitoring-group class="single-group" data-group="monitoring.singleGroup" data-view="view" data-view-type="'single_monitoring'">
</div>
</div>
<div ng-if="type === 'personal'" class="list">
<div
sd-monitoring-group
data-view="view"
data-group="aggregate.defaultPersonalGroup"
view-type="'personal'"
></div>
</div>
<div ng-if="type === 'custom-monitoring-view'" class="list">
<div sd-monitoring-group
class="single-group"
custom-data-source="customDataSource"
data-hide-actions-for-monitoring-items="hideActionsForMonitoringItems"
data-disable-monitoring-multi-select="disableMonitoringMultiSelect"
on-monitoring-item-select="onMonitoringItemSelect"
on-monitoring-item-double-click="onMonitoringItemDoubleClick"></div>
</div>
<div ng-if="type === 'highlights' && selectedHighlightName != null && !monitoring.highlightsDeskChanged()" style="height: 100%">
<sd-articles-list-react
heading="selectedHighlightName"
query="highlightedItemsQuery"
monitoring-controller="monitoring"
get-extra-buttons="getExtraButtonsForHighlightsView"
style="height: 100%"
></sd-articles-list-react>
</div>
</div>
<div class="sd-preview-panel" style="position: relative;" ng-if="!narrowList">
<div sd-item-preview style="position: relative;"
data-item="monitoring.previewItem"
data-close="monitoring.closePreview()"
data-show-history-tab="monitoring.showHistoryTab"></div>
</div>
</div>
</div>
<!-- Overlay Preview Pane -->
<div sd-item-preview class="sd-preview--overlay" ng-if="narrowList"
data-item="monitoring.previewItem"
data-close="monitoring.closePreview()"
data-show-history-tab="monitoring.showHistoryTab"></div>
</div>
<sd-interactive-article-actions-panel-combined location="'list-view'"></sd-interactive-article-actions-panel-combined>
</div>
<div sd-aggregate-settings
data-modal-active="aggregate.modalActive"
data-desks="aggregate.desks"
data-desk-stages="aggregate.deskStages"
data-searches="aggregate.searches"
data-desk-lookup="aggregate.deskLookup"
data-stage-lookup="aggregate.stageLookup"
data-search-lookup="aggregate.searchLookup"
data-groups="aggregate.groups"
data-edit-groups="aggregate.editGroups"
data-settings="aggregate.settings"
data-onclose="aggregate.refreshGroups()"
data-current-step="aggregate.currentStep"
data-display-only-current-step="aggregate.displayOnlyCurrentStep"
data-columns-limit="monitoring.columnsLimit">
</div>
</section>
<div sd-archived-item-kill
ng-if="archived_kill"
data-item="archived_kill"
data-action="archived_kill_action"></div>
<div sd-resend-item data-item="resend"></div>
<div ng-if="type === 'monitoring' && aggregate.settings.type === 'workspace' && workspaceToRename != null">
<div sd-edit-workspace data-workspace="workspaceToRename" data-done="afterWorkspaceRename"></div>
</div>
</div>