zabbix-deploy/web-modules/WecomCenter/views/topology.view.php

<?php declare(strict_types = 0);
/*
** L2 Topology page — display-only map (all settings live in the config center).
** @var CView $this
** @var array  $data
*/
use Modules\WecomCenter\Lib\I18n;

$this->addCssFile('modules/WecomCenter/assets/l2topology/style.css');
$base = '/modules/WecomCenter/assets/l2topology/';

$snapJson = (string) ($data['snap_json'] ?? 'null');
$cfgJson  = (string) ($data['cfg_json'] ?? '{}');
$snapSafe = str_replace('</', '<\/', $snapJson);
$cfgSafe  = str_replace('</', '<\/', $cfgJson);

$i18nKeys = [
	'l2.title','l2.search_ph','l2.show_term','l2.only_off','l2.auto_refresh','l2.min',
	'l2.refresh_now','l2.fit','l2.alarms','l2.offline','l2.time_live','l2.time_btn',
	'l2.time_label','l2.dark','l2.no_data','l2.offline_empty','l2.alarm_empty','l2.updated',
	'l2.pause','l2.resume','l2.legend_speed','l2.legend_tier','l2.legend_lat','l2.core','l2.dist','l2.access',
	'l2.lat_norm','l2.term_on','l2.term_off','l2.zoom_in','l2.zoom_out','l2.snapshot','l2.showing','l2.live_tag',
	'l2.back_overview','l2.unit_sw','l2.tile_hint','l2.not_in_topo','l2.click_hint',
	'l2.net_surve','l2.net_office','l2.net_other'
];
$i18n = [];
foreach ($i18nKeys as $k) { $i18n[$k] = I18n::t($k); }
$i18nJson = str_replace('</', '<\/', json_encode($i18n, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES));

$hist = $data['history'] ?? [];
$isLive = !empty($data['is_live']);
$usedTs = (int) ($data['used_ts'] ?? 0);
$tsOpts = '<option value=""'.($isLive ? ' selected' : '').'>'.htmlspecialchars(I18n::t('l2.time_live')).'</option>';
foreach ($hist as $h) {
	$sel = (!$isLive && $usedTs === (int) $h['ts']) ? ' selected' : '';
	$tsOpts .= '<option value="'.(int) $h['ts'].'"'.$sel.'>'.date('Y-m-d H:i:s', (int) $h['ts']).'</option>';
}
$refreshSec = (int) ($data['cfg_refresh'] ?? 300);

if (!function_exists('l2e')) { function l2e($v) { return htmlspecialchars((string) $v, ENT_QUOTES, 'UTF-8'); } }
?>
<div class="l2-wrap<?php echo !empty($data['cfg_dark']) ? ' l2-dark' : ''; ?>" id="l2-wrap">
  <div class="l2-toolbar">
    <span class="tb-title"><?php echo l2e(I18n::t('l2.title')); ?></span>
    <button class="l2-btn" id="l2-back" style="display:none"><?php echo l2e(I18n::t('l2.back_overview')); ?></button>

    <div class="l2-search-wrap">
      <input id="l2-search" type="text" placeholder="<?php echo l2e(I18n::t('l2.search_ph')); ?>" autocomplete="off"/>
      <div id="l2-sug"></div>
    </div>

    <label class="l2-chk"><input type="checkbox" id="l2-showterm"/> <?php echo l2e(I18n::t('l2.show_term')); ?></label>
    <label class="l2-chk"><input type="checkbox" id="l2-onlyoff"/> <?php echo l2e(I18n::t('l2.only_off')); ?></label>
    <label class="l2-chk"><input type="checkbox" id="l2-dark"/> <?php echo l2e(I18n::t('l2.dark')); ?></label>

    <label class="l2-ts-label"><?php echo l2e(I18n::t('l2.time_label')); ?>
      <select id="l2-ts" class="l2-btn"><?php echo $tsOpts; ?></select>
    </label>

    <span class="l2-spacer"></span>
    <span id="l2-countdown" class="l2-muted"></span>
    <button class="l2-btn" id="l2-pause" title="pause">❚❚</button>
    <button class="l2-btn primary" id="l2-refresh-btn"><?php echo l2e(I18n::t('l2.refresh_now')); ?></button>
    <button class="l2-btn" id="l2-zin">＋</button>
    <button class="l2-btn" id="l2-zout">－</button>
    <button class="l2-btn" id="l2-fit"><?php echo l2e(I18n::t('l2.fit')); ?></button>
  </div>

  <div class="l2-main">
    <div class="l2-canvas">
      <div id="l2-cy"></div>
      <div class="l2-stats" id="l2-stats"></div>
      <div class="l2-net-tabs" id="l2-net-tabs" style="display:none"></div>
      <div class="l2-legend" id="l2-legend"></div>
    </div>

    <div class="l2-side">
      <div class="side-tabs">
        <div class="side-tab active" data-sec="alarms"><?php echo l2e(I18n::t('l2.alarms')); ?> <span class="badge" id="l2-alarm-count">0</span></div>
        <div class="side-tab" data-sec="offline"><?php echo l2e(I18n::t('l2.offline')); ?> <span class="badge" id="l2-offline-count" style="background:#78909c">0</span></div>
      </div>
      <div class="side-body">
        <div class="panel-sec active" id="sec-alarms"><div id="l2-alarm-list"></div></div>
        <div class="panel-sec" id="sec-offline"><div id="l2-offline-list"></div></div>
      </div>
    </div>
  </div>
</div>

<div class="l2-tip" id="l2-tip"></div>

<script>
window.L2SNAP = <?php echo $snapSafe; ?>;
window.L2_CFG  = <?php echo $cfgSafe; ?>;
window.L2_I18N = <?php echo $i18nJson; ?>;
window.L2_META = {
  base: '<?php echo $base; ?>',
  snapshotUrl: '<?php echo $base; ?>snapshot.json',
  isLive: <?php echo $isLive ? 'true' : 'false'; ?>,
  usedTs: <?php echo $usedTs; ?>,
  refreshSeconds: <?php echo $refreshSec; ?>,
  zabbixHostUrl: '/zabbix.php?action=problem.view&hostids%5B%5D=__HOSTID__'
};
</script>
<script src="<?php echo $base; ?>cytoscape.min.js"></script>
<script src="<?php echo $base; ?>app.js"></script>
<script>
(function(){
  var tabs = document.querySelectorAll('.side-tab');
  tabs.forEach(function(t){
    t.addEventListener('click', function(){
      tabs.forEach(function(x){x.classList.remove('active');});
      t.classList.add('active');
      document.querySelectorAll('.panel-sec').forEach(function(s){s.classList.remove('active');});
      var sec = document.getElementById('sec-' + t.getAttribute('data-sec'));
      if (sec) sec.classList.add('active');
    });
  });
})();
</script>