|
110 | 110 | </div> |
111 | 111 | </div> |
112 | 112 |
|
| 113 | + <div class="mb-4"> |
| 114 | + <h5 class="mb-3">Default Container Environment Variables</h5> |
| 115 | + <p class="text-muted mb-3" id="default_env_vars_help"> |
| 116 | + These variables are automatically injected into every new container at creation time. |
| 117 | + Use them for shared configuration such as agent connection details. |
| 118 | + Per-container values always take precedence over these defaults. |
| 119 | + </p> |
| 120 | + <div class="d-flex justify-content-end mb-2"> |
| 121 | + <button type="button" id="addDefaultEnvVarBtn" class="btn btn-sm btn-primary" aria-label="Add default environment variable"> |
| 122 | + Add Variable |
| 123 | + </button> |
| 124 | + </div> |
| 125 | + <table class="table table-sm table-bordered mb-0" aria-describedby="default_env_vars_help"> |
| 126 | + <thead> |
| 127 | + <tr> |
| 128 | + <th style="width: 22%;">Name</th> |
| 129 | + <th style="width: 22%;">Value</th> |
| 130 | + <th>Description</th> |
| 131 | + <th style="width: 80px;" class="text-center">Action</th> |
| 132 | + </tr> |
| 133 | + </thead> |
| 134 | + <tbody id="defaultEnvVarsTableBody"></tbody> |
| 135 | + </table> |
| 136 | + </div> |
| 137 | + |
113 | 138 | <div class="d-flex gap-2"> |
114 | 139 | <button type="submit" class="btn btn-primary" aria-label="Save settings"> |
115 | 140 | Save Settings |
|
123 | 148 | </div> |
124 | 149 |
|
125 | 150 | <%- include('../layouts/footer') %> |
| 151 | + |
| 152 | +<script> |
| 153 | + let envVarCounter = 0; |
| 154 | +
|
| 155 | + function addDefaultEnvVarRow(key = '', value = '', description = '') { |
| 156 | + const row = document.createElement('tr'); |
| 157 | + row.id = `default-env-row-${envVarCounter}`; |
| 158 | +
|
| 159 | + const keyCell = document.createElement('td'); |
| 160 | + keyCell.style.cssText = 'border: 1px solid #ddd; padding: 8px;'; |
| 161 | + const keyInput = document.createElement('input'); |
| 162 | + keyInput.type = 'text'; |
| 163 | + keyInput.className = 'form-control form-control-sm font-monospace'; |
| 164 | + keyInput.name = `defaultEnvVars[${envVarCounter}][key]`; |
| 165 | + keyInput.value = key; |
| 166 | + keyInput.placeholder = 'VARIABLE_NAME'; |
| 167 | + keyInput.pattern = '[A-Za-z_][A-Za-z0-9_]*'; |
| 168 | + keyInput.setAttribute('aria-label', 'Environment variable name'); |
| 169 | + keyCell.appendChild(keyInput); |
| 170 | +
|
| 171 | + const valueCell = document.createElement('td'); |
| 172 | + valueCell.style.cssText = 'border: 1px solid #ddd; padding: 8px;'; |
| 173 | + const valueInput = document.createElement('input'); |
| 174 | + valueInput.type = 'text'; |
| 175 | + valueInput.className = 'form-control form-control-sm font-monospace'; |
| 176 | + valueInput.name = `defaultEnvVars[${envVarCounter}][value]`; |
| 177 | + valueInput.value = value; |
| 178 | + valueInput.placeholder = 'value'; |
| 179 | + valueInput.setAttribute('aria-label', 'Environment variable value'); |
| 180 | + valueCell.appendChild(valueInput); |
| 181 | +
|
| 182 | + const descCell = document.createElement('td'); |
| 183 | + descCell.style.cssText = 'border: 1px solid #ddd; padding: 8px;'; |
| 184 | + const descInput = document.createElement('input'); |
| 185 | + descInput.type = 'text'; |
| 186 | + descInput.className = 'form-control form-control-sm text-muted'; |
| 187 | + descInput.name = `defaultEnvVars[${envVarCounter}][description]`; |
| 188 | + descInput.value = description; |
| 189 | + descInput.placeholder = 'optional description (not sent to containers)'; |
| 190 | + descInput.setAttribute('aria-label', 'Environment variable description'); |
| 191 | + descCell.appendChild(descInput); |
| 192 | +
|
| 193 | + const actionCell = document.createElement('td'); |
| 194 | + actionCell.style.cssText = 'border: 1px solid #ddd; padding: 8px; text-align: center;'; |
| 195 | + const removeBtn = document.createElement('button'); |
| 196 | + removeBtn.type = 'button'; |
| 197 | + removeBtn.className = 'btn btn-sm btn-danger'; |
| 198 | + removeBtn.textContent = 'Delete'; |
| 199 | + removeBtn.setAttribute('aria-label', 'Remove environment variable'); |
| 200 | + const idx = envVarCounter; |
| 201 | + removeBtn.onclick = () => document.getElementById(`default-env-row-${idx}`).remove(); |
| 202 | + actionCell.appendChild(removeBtn); |
| 203 | +
|
| 204 | + row.appendChild(keyCell); |
| 205 | + row.appendChild(valueCell); |
| 206 | + row.appendChild(descCell); |
| 207 | + row.appendChild(actionCell); |
| 208 | + document.getElementById('defaultEnvVarsTableBody').appendChild(row); |
| 209 | + envVarCounter++; |
| 210 | + } |
| 211 | +
|
| 212 | + document.getElementById('addDefaultEnvVarBtn').addEventListener('click', () => addDefaultEnvVarRow()); |
| 213 | +
|
| 214 | + // Pre-populate saved values (array of {key, value, description} objects) |
| 215 | + const savedEnvVars = <%- JSON.stringify(defaultContainerEnvVars) %>; |
| 216 | + for (const entry of savedEnvVars) { |
| 217 | + addDefaultEnvVarRow(entry.key, entry.value, entry.description || ''); |
| 218 | + } |
| 219 | +</script> |
0 commit comments