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?v=202611060205');
$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.time_pick','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.main','l2.dist','l2.access',
	'l2.lat_norm','l2.term_on','l2.term_off','l2.term_title','l2.term_mac','l2.term_rate','l2.term_switch','l2.term_port','l2.term_ip','l2.zoom_in','l2.zoom_out','l2.snapshot','l2.showing','l2.live_tag',
	'l2.unit_sw','l2.tile_hint','l2.not_in_topo','l2.click_hint','l2.floor_na',
	'l2.net_surve','l2.net_office','l2.net_other',
	'l2.terminals','l2.offline_short','l2.last_online','l2.history','l2.history_live',
	'l2.history_live_hint','l2.history_empty','l2.time_date','l2.time_time',
	'l2.time_date_title','l2.time_time_title','l2.time_pick_title','l2.time_choose',
	'l2.time_live_full','l2.time_live_hint','l2.firewall','l2.behavior','l2.total_core','l2.upstream'
];
$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);
$pickerLabel = I18n::t('l2.time_live_full');
if (!$isLive && $usedTs) {
	foreach ($hist as $h) {
		if ((int) $h['ts'] === $usedTs) {
			$pickerLabel = date('Y-m-d H:i:s', (int) $h['ts']);
			break;
		}
	}
}
$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" id="l2-wrap">
  <div class="l2-toolbar">
    <span class="tb-title"><?php echo l2e(I18n::t('l2.title')); ?></span>

    <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>

    <div class="l2-ts-label"><?php echo l2e(I18n::t('l2.time_pick_title')); ?>
      <span class="l2-ts-picker" id="l2-ts-picker">
        <button type="button" class="l2-ts-trigger" id="l2-ts-trigger" aria-haspopup="dialog" aria-expanded="false" title="<?php echo l2e(I18n::t('l2.time_pick_title')); ?>">
          <span class="l2-ts-clock" aria-hidden="true">&#9719;</span>
          <span class="l2-ts-current" id="l2-ts-current"><?php echo l2e($pickerLabel); ?></span>
          <span class="l2-ts-caret" aria-hidden="true">&#9662;</span>
        </button>
        <div class="l2-ts-pop" id="l2-ts-pop" role="dialog" aria-label="<?php echo l2e(I18n::t('l2.time_pick_title')); ?>">
          <div class="l2-ts-days" id="l2-ts-days"></div>
          <div class="l2-ts-times-wrap">
            <div class="l2-ts-times-title" id="l2-ts-times-title"></div>
            <div class="l2-ts-times" id="l2-ts-times"></div>
          </div>
        </div>
      </span>
    </div>

    <span class="l2-spacer"></span>
    <span id="l2-countdown" class="l2-muted"></span>
    <button class="l2-btn" id="l2-pause" title="pause">&#10074;&#10074;</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">&#43;</button>
    <button class="l2-btn" id="l2-zout">&#8722;</button>
    <button class="l2-btn" id="l2-fit"><?php echo l2e(I18n::t('l2.fit')); ?></button>
    <button class="l2-btn" id="l2-export"><?php echo l2e(I18n::t('l2.export_img')); ?></button>
  </div>

  <div class="l2-main">
    <div class="l2-canvas">
      <div id="l2-cy"></div>
      <div class="l2-stats" id="l2-stats"></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 class="side-tab" data-sec="terms"><?php echo l2e(I18n::t('l2.show_term')); ?> <span class="badge" id="l2-term-count" style="background:#2E75B6">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 class="panel-sec" id="sec-terms"><div id="l2-term-list"></div></div>
      </div>
      <div class="l2-legend" id="l2-legend"></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_HISTORY = <?php echo str_replace('</', '<\/', json_encode($hist, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES)); ?>;
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?v=202611060205"></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');
      if (t.getAttribute('data-sec') === 'terms') {
        var cb = document.getElementById('l2-showterm');
        if (cb && !cb.checked) { cb.checked = true; cb.dispatchEvent(new Event('change')); }
      }
    });
  });
})();
</script>