Catalyst / admin/Synapse-Cortex 14.8 GB / 57.8 GB 40.0 GB free
Help Sign in

admin / Synapse-Cortex

public

Self Hosted ITSM Tool with RBAC/Tenanting and MFA

Code Issues Pull requests Pipelines Packages Security Insights Wiki Settings
Synapse-Cortex / synapse-cortex / app / templates / asset_detail.html 10516 B · main 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
{% extends "base.html" %}
{% block title %}{{ asset.asset_id }} // Synapse-Cortex{% endblock %}
{% block header %}
<a href="/assets" class="text-cortex-muted hover:text-accent-blue">&larr; Assets</a> // {{ asset.asset_id }}
{% endblock %}
{% block content %}
<div id="save-banner" class="hidden mb-4 text-xs border border-accent-green/40 bg-accent-green/10 text-accent-green px-3 py-2 rounded">Saved.</div>
<div id="error-banner" class="hidden mb-4 text-xs border border-accent-red/40 bg-accent-red/10 text-accent-red px-3 py-2 rounded"></div>

<div class="flex items-center gap-2 mb-4">
  <span class="text-[10px] px-2 py-0.5 rounded uppercase border {% if asset.source.value == 'netscanxi' %}bg-accent-blue/15 text-accent-blue border-accent-blue/30{% else %}bg-cortex-panel2 text-cortex-muted border-cortex-border{% endif %}">
    {% if asset.source.value == 'netscanxi' %}Imported from NetscanXi{% else %}Manually created{% endif %}
  </span>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
  <!-- Core Info -->
  <div class="border border-cortex-border bg-cortex-panel rounded-md p-5">
    <div class="text-[10px] text-cortex-muted uppercase tracking-wider font-display mb-3">Core Info</div>
    <div class="space-y-3 text-sm">
      <div>
        <label class="block text-[10px] text-cortex-muted mb-1 uppercase tracking-wider">Name</label>
        <input id="core-name" type="text" value="{{ asset.name }}" class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 focus:outline-none focus:border-accent-blue" />
      </div>
      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-[10px] text-cortex-muted mb-1 uppercase tracking-wider">Type</label>
          <select id="core-type" class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2">
            {% for t in asset_types %}
            <option value="{{ t.id }}" {% if asset.asset_type_id|string == t.id|string %}selected{% endif %}>{{ t.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label class="block text-[10px] text-cortex-muted mb-1 uppercase tracking-wider">Status</label>
          <select id="core-status" class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2">
            {% for s in ['in_stock', 'in_service', 'in_repair', 'retired'] %}
            <option value="{{ s }}" {% if asset.status.value == s %}selected{% endif %}>{{ s.replace('_',' ')|title }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div>
        <label class="block text-[10px] text-cortex-muted mb-1 uppercase tracking-wider">Location</label>
        <input id="core-location" type="text" value="{{ asset.location or '' }}" class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 focus:outline-none focus:border-accent-blue" />
      </div>
      <div>
        <label class="block text-[10px] text-cortex-muted mb-1 uppercase tracking-wider">Assigned To</label>
        <select id="core-assigned" class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2">
          <option value="">&mdash; unassigned &mdash;</option>
          {% for a in agents %}
          <option value="{{ a.id }}" {% if asset.assigned_to_id and asset.assigned_to_id|string == a.id|string %}selected{% endif %}>{{ a.full_name }}</option>
          {% endfor %}
        </select>
      </div>
      <button onclick="saveSection('core')" class="bg-accent-blue text-cortex-bg font-display font-bold uppercase tracking-wider text-xs px-4 py-2 rounded hover:bg-accent-blue-bright transition">
        Save Core Info
      </button>
    </div>
  </div>

  <!-- Network -->
  <div class="border border-cortex-border bg-cortex-panel rounded-md p-5">
    <div class="text-[10px] text-cortex-muted uppercase tracking-wider font-display mb-3">Network</div>
    <div class="space-y-3 text-sm">
      <div>
        <label class="block text-[10px] text-cortex-muted mb-1 uppercase tracking-wider">MAC Address</label>
        <input id="net-mac" type="text" value="{{ asset.mac_address or '' }}" placeholder="00:1A:2B:3C:4D:5E"
               class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 font-mono focus:outline-none focus:border-accent-blue" />
      </div>
      <div>
        <label class="block text-[10px] text-cortex-muted mb-1 uppercase tracking-wider">IP Address</label>
        <input id="net-ip" type="text" value="{{ asset.ip_address or '' }}" placeholder="10.0.0.1"
               class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 font-mono focus:outline-none focus:border-accent-blue" />
      </div>
      <div class="text-[10px] text-cortex-muted">Cortex Asset ID: <span class="text-chrome font-mono">{{ asset.asset_id }}</span></div>
      <button onclick="saveSection('net')" class="bg-accent-blue text-cortex-bg font-display font-bold uppercase tracking-wider text-xs px-4 py-2 rounded hover:bg-accent-blue-bright transition">
        Save Network
      </button>
    </div>
  </div>

  <!-- Discovered OS & Software -->
  <div class="border border-cortex-border bg-cortex-panel rounded-md p-5 lg:col-span-2">
    <div class="text-[10px] text-cortex-muted uppercase tracking-wider font-display mb-3">Discovered OS &amp; Software</div>
    <div class="space-y-3 text-sm">
      {% if asset.netscanxi_device_type %}
      <div class="text-[10px] text-cortex-muted">As reported by NetscanXi: <span class="text-chrome-dim">{{ asset.netscanxi_device_type }}</span></div>
      {% endif %}
      <div>
        <label class="block text-[10px] text-cortex-muted mb-1 uppercase tracking-wider">Operating System</label>
        <input id="os-field" type="text" value="{{ asset.os or '' }}" placeholder="e.g. Ubuntu 22.04 LTS"
               class="w-full max-w-md bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 focus:outline-none focus:border-accent-blue" />
      </div>
      <div>
        <label class="block text-[10px] text-cortex-muted mb-1 uppercase tracking-wider">Software</label>
        <div id="software-rows" class="space-y-2 max-w-lg">
          {% for sw in (asset.software or []) %}
          <div class="software-row flex gap-2">
            <input type="text" value="{{ sw.name }}" placeholder="Name" class="sw-name flex-1 bg-cortex-panel2 border border-cortex-border rounded px-2 py-1.5 text-xs" />
            <input type="text" value="{{ sw.version or '' }}" placeholder="Version" class="sw-version w-28 bg-cortex-panel2 border border-cortex-border rounded px-2 py-1.5 text-xs" />
            <button type="button" onclick="this.closest('.software-row').remove()" class="text-accent-red text-xs px-2">&times;</button>
          </div>
          {% endfor %}
        </div>
        <button type="button" onclick="addSoftwareRow()" class="mt-2 text-[10px] uppercase text-accent-blue hover:underline">+ Add software entry</button>
      </div>
      <button onclick="saveSection('discovered')" class="bg-accent-blue text-cortex-bg font-display font-bold uppercase tracking-wider text-xs px-4 py-2 rounded hover:bg-accent-blue-bright transition">
        Save Discovered Info
      </button>
    </div>
  </div>
</div>

{% if tickets %}
<div class="mt-4 border border-cortex-border bg-cortex-panel rounded-md">
  <div class="px-4 py-3 border-b border-cortex-border text-[10px] text-cortex-muted uppercase tracking-wider">Linked Tickets</div>
  <table class="w-full text-sm">
    <tbody>
      {% for t in tickets %}
      <tr class="border-b border-cortex-border/60 hover:bg-cortex-panel2">
        <td class="px-4 py-2"><a href="/tickets/{{ t.id }}" class="text-accent-blue hover:underline">{{ t.ticket_number }}</a></td>
        <td class="px-4 py-2">{{ t.title }}</td>
        <td class="px-4 py-2 text-xs uppercase text-chrome-dim">{{ t.status.value.replace('_',' ') }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}

<script>
  const ASSET_ID = "{{ asset.id }}";

  function addSoftwareRow() {
    const div = document.createElement('div');
    div.className = 'software-row flex gap-2';
    div.innerHTML = `
      <input type="text" placeholder="Name" class="sw-name flex-1 bg-cortex-panel2 border border-cortex-border rounded px-2 py-1.5 text-xs" />
      <input type="text" placeholder="Version" class="sw-version w-28 bg-cortex-panel2 border border-cortex-border rounded px-2 py-1.5 text-xs" />
      <button type="button" onclick="this.closest('.software-row').remove()" class="text-accent-red text-xs px-2">&times;</button>`;
    document.getElementById('software-rows').appendChild(div);
  }

  async function saveSection(section) {
    const saveBanner = document.getElementById('save-banner');
    const errorBanner = document.getElementById('error-banner');
    saveBanner.classList.add('hidden');
    errorBanner.classList.add('hidden');

    let payload = {};
    if (section === 'core') {
      const assignedVal = document.getElementById('core-assigned').value;
      payload = {
        name: document.getElementById('core-name').value,
        asset_type_id: document.getElementById('core-type').value,
        status: document.getElementById('core-status').value,
        location: document.getElementById('core-location').value,
      };
      if (assignedVal) payload.assigned_to_id = assignedVal;
    } else if (section === 'net') {
      payload = {
        mac_address: document.getElementById('net-mac').value || null,
        ip_address: document.getElementById('net-ip').value || null,
      };
    } else if (section === 'discovered') {
      const software = Array.from(document.querySelectorAll('.software-row')).map(row => ({
        name: row.querySelector('.sw-name').value,
        version: row.querySelector('.sw-version').value || null,
      })).filter(sw => sw.name);
      payload = {
        os: document.getElementById('os-field').value || null,
        software: software,
      };
    }

    const res = await fetch('/api/v1/assets/' + ASSET_ID, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    });

    if (res.ok) {
      saveBanner.classList.remove('hidden');
    } else {
      const err = await res.json().catch(() => ({}));
      errorBanner.textContent = err.detail ? JSON.stringify(err.detail) : 'Failed to save changes.';
      errorBanner.classList.remove('hidden');
    }
  }
</script>
{% endblock %}