Files
shopdb-flask/plugins/applications/frontend/views/ApplicationForm.vue
cproudlock 534f179ee6 Make main the lean product a site receives
main was 16 days and 259 commits behind the line the product is actually built
on, at contract 0.30.0 against 0.35.0, with no per-PC credential code at all. It
was neither current nor curated - just stale. This brings it forward and, at the
same time, makes it mean something: main is what a receiving site installs, and
nothing else.

WHAT IT CARRIES. Twelve plugins - backups, computers, endpoints, guides,
knowledgebase, machines, network, notifications, printers, slides, tools,
warranty - plus applications, which is manifest-less core and always ships. The
only manifest dependency inside that set is endpoints on computers, and both are
in it, so the closure is self-contained.

WHAT IT DOES NOT. employees, geenforce, measuringtools, printedparts and usb
stay on the site line. So do the Windows installer tree, the VM rehearsal
helpers, the agent tooling config, one site's data loader, the internal audit
and findings records, and the planner spreadsheet. 1,135 tracked files against
1,438.

A REMOVAL THAT BREAKS THE APP IS NOT A REMOVAL, and two nearly shipped:

deploy/site-profile-universal.json still named all seventeen plugins. It is the
file docs/DEPLOY.md tells a site to provision from, so a fresh install would
have failed at `flask plugin apply-profile` with PluginError - the first thing a
receiving site does, broken by the branch meant to serve them. It now names the
twelve that exist, and its comment says the two must agree.

agent/ was never refreshed. Whoever populated this branch copied shopdb/,
plugins/, frontend/ and tests/ from the site line and left the agent tree at its
September state: 22 C# and PowerShell sources missing, including AgentCredentials,
EnrollmentService, AgentHttpFactory and the fleet-alert client, plus one file the
site line had deleted still present. The old tree is internally consistent, so it
compiles, and nothing in CI builds it - every gate was green over a server that
speaks enrollment and per-PC credentials to a bundled agent source that cannot.
Resynced whole.

DECISIONS THIS ENCODES, rather than defers:

- The plugin-authoring lab builds printedparts, whose manifest depends on
  employees, so it could not stay. The lab remains on the site line and main
  ships no build-along tutorial. That is a real loss for an adopting developer
  and is recorded here rather than discovered later.
- Recognition, Training and Recertification notifications are no longer seeded.
  Each splits one notification into a card per employee and renders a photo,
  which needs a plugin this branch does not bundle. Seeding them would offer an
  author a type that cannot resolve anybody. A site that installs employees gets
  them from that plugin's own seed.
- Windows/IIS is documented as the legacy path throughout, and the README leads
  with Docker, because that is what a receiving site gets.

The API description is regenerated for THIS branch - 347 paths and 483
operations, down from 415 and 573 - so the published contract describes what is
here rather than what the site line serves. docs/CONFIG.md lost the two
measuring-tool label keys the code no longer declares, which two lanes had
decided opposite ways.

Suite: 3124 passed, 6 skipped. Naming and style gates pass. The docs gates run
rather than skip, and every index line count is derived from the file it names.
2026-09-19 11:24:40 -04:00

722 lines
24 KiB
Vue

<template>
<div>
<div class="page-header">
<h2>{{ isEdit ? 'Edit Application' : 'New Application' }}</h2>
</div>
<div class="card">
<div v-if="loading" class="loading">Loading...</div>
<form v-else @submit.prevent="saveApplication">
<div class="form-row">
<div class="form-group">
<label for="appname">Application Name *</label>
<input
id="appname"
v-model="form.appname"
type="text"
class="form-control"
required
/>
</div>
<div class="form-group">
<label for="supportteamid">Support Team</label>
<select
id="supportteamid"
v-model="form.supportteamid"
class="form-control"
>
<option value="">Select team...</option>
<option
v-for="team in supportTeams"
:key="team.supportteamid"
:value="team.supportteamid"
>
{{ team.teamname }}
</option>
</select>
</div>
</div>
<div class="form-group">
<label for="appdescription">Description</label>
<textarea
id="appdescription"
v-model="form.appdescription"
class="form-control"
rows="2"
></textarea>
</div>
<h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Application Flags</h4>
<div class="form-row">
<div class="form-group checkbox-group">
<label>
<input type="checkbox" v-model="form.isinstallable" />
Installable
</label>
<label>
<input type="checkbox" v-model="form.islicenced" />
Licensed
</label>
<label>
<input type="checkbox" v-model="form.isprinter" />
Printer App
</label>
<label>
<input type="checkbox" v-model="form.isrequired" />
Required on all PCs
</label>
<label>
<input type="checkbox" v-model="form.ismonitorable" />
Monitorable
</label>
<label>
<input type="checkbox" v-model="form.ishidden" />
Hidden
</label>
</div>
<!-- The server rejects a monitorable app missing either field, so the
two inputs appear with the box rather than being hidden away in
another section where the rejection would read as a bug. -->
<div v-if="form.ismonitorable" class="monitor-fields">
<div class="form-group">
<label for="monitorprocessname">Process Name</label>
<input
id="monitorprocessname"
v-model="form.monitorprocessname"
type="text"
class="form-control"
placeholder="e.g. notepad.exe"
/>
<small class="form-hint">
The image name as it appears in Task Manager. This is what the
agent watches for.
</small>
</div>
<div class="form-group">
<label for="monitorlaunchpath">Launch Path</label>
<input
id="monitorlaunchpath"
v-model="form.monitorlaunchpath"
type="text"
class="form-control"
placeholder="e.g. C:\Program Files\Vendor\app.exe"
/>
<small class="form-hint">
Run on the endpoint when the process is found missing. A local
path on the PC, not a share.
</small>
</div>
</div>
<!-- Only shown when the user is newly ticking the box. An app that
was already required has an existing policy, so re-saving it is
not a new deployment and does not need re-acknowledging. -->
<div v-if="showsPolicyWarning" class="policy-warning">
<strong>This creates a software install policy.</strong>
<p>
Marking <em>{{ form.appname || 'this application' }}</em> as required
on all PCs creates a configuration policy that installs it on every
non-server endpoint it applies to. The policy is not added to a
business policy automatically: it installs nothing until an admin
adds it to an active business policy. From then on, installation
happens without further prompting on each machine as it checks in.
</p>
<label>
<input type="checkbox" v-model="acknowledgePolicy" />
I understand this creates a policy that will install the application
on all matched PCs once it is added to a business policy.
</label>
</div>
</div>
<h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Links & Paths</h4>
<div class="form-row">
<div class="form-group">
<label for="applicationlink">Application Link</label>
<input
id="applicationlink"
v-model="form.applicationlink"
type="text"
class="form-control"
placeholder="https://..."
/>
</div>
<div class="form-group">
<label for="documentationpath">Documentation Path</label>
<input
id="documentationpath"
v-model="form.documentationpath"
type="text"
class="form-control"
placeholder="URL or file path"
/>
</div>
</div>
<div class="form-group">
<label for="installpath">Installer path</label>
<input
id="installpath"
v-model="form.installpath"
type="text"
class="form-control"
placeholder="Network path or URL to install files"
/>
<small class="form-hint">
A share path or URL, or upload the installer below and this fills
itself in.
</small>
</div>
<div class="form-group">
<label for="packagefile">Installer</label>
<div v-if="uploadedPackage" class="upload-current">
<span class="upload-name">{{ uploadedPackage }}</span>
<button type="button" class="btn btn-sm btn-secondary" @click="removePackage"
:disabled="busyPackage">Remove installer</button>
</div>
<input id="packagefile" type="file" class="form-control"
:accept="PACKAGE_ACCEPT" @change="onPackagePicked" />
<div v-if="packageProgress !== null" class="upload-progress">
<div class="upload-bar"><span :style="{ width: packageProgress + '%' }"></span></div>
<span>{{ packageProgress }}%</span>
</div>
<small class="form-hint">
Up to 500MB. Anything larger belongs on the share - put its path in
Installer path instead. Downloads require a login.
</small>
</div>
<div class="form-group">
<label for="version">Version</label>
<input
id="version"
v-model="form.version"
type="text"
class="form-control"
placeholder="e.g. 2.4.1.0"
/>
<small class="form-hint">
<span v-if="detectedVersion">
Read from the installer. Change it if the vendor numbers releases
differently.
</span>
<span v-else>
Read from the installer where one is present. MSI and archive
files do not carry a version, so type it in to keep a later
re-import from looking like new software.
</span>
</small>
</div>
<div class="form-group">
<label for="imagefile">Image</label>
<div v-if="imagePreview" class="upload-current">
<img :src="imagePreview" alt="" class="upload-thumb" />
<button type="button" class="btn btn-sm btn-secondary" @click="removeImage"
:disabled="busyImage">Remove image</button>
</div>
<input id="imagefile" type="file" class="form-control"
accept="image/*" @change="onImagePicked" />
<small class="form-hint">
PNG, JPG, GIF, WEBP, SVG or ICO. Replaces whatever is there now.
</small>
</div>
<div class="form-group">
<label for="image">Image path</label>
<input
id="image"
v-model="form.image"
type="text"
class="form-control"
placeholder="filled in by the upload above"
/>
<small class="form-hint">
Set by the upload. Older entries hold a bare filename served from
/images/applications/, and those still work - leave them alone
unless you are replacing the image.
</small>
</div>
<h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Notes</h4>
<div class="form-group">
<label for="applicationnotes">Application Notes (HTML supported)</label>
<textarea
id="applicationnotes"
v-model="form.applicationnotes"
class="form-control"
rows="6"
placeholder="Enter notes... HTML tags like <BR>, <a>, <strong> are supported"
></textarea>
</div>
<div v-if="error" class="error-message">{{ error }}</div>
<div v-if="versionWarning" class="policy-warning">{{ versionWarning }}</div>
<div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
<button type="submit" class="btn btn-primary" :disabled="saving">
{{ saving ? 'Saving...' : 'Save Application' }}
</button>
<router-link to="/applications" class="btn btn-secondary">Cancel</router-link>
<!-- Edit only: there is nothing to strip from an application that has
not been created yet. Pushed to the right and styled as a danger
action so it is not mistaken for Cancel. -->
<button
v-if="isEdit"
type="button"
class="btn btn-danger"
style="margin-left: auto;"
:disabled="busyRevert"
@click="revertToRecord"
>
{{ busyRevert ? 'Reverting...' : 'Revert to Record' }}
</button>
</div>
</form>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { applicationsApi, supportteamsApi } from '@/api'
import { apiError } from '@/utils/apiError'
const route = useRoute()
const router = useRouter()
const isEdit = computed(() => !!route.params.id)
const loading = ref(true)
const saving = ref(false)
const error = ref('')
const form = ref({
appname: '',
appdescription: '',
supportteamid: '',
isinstallable: false,
islicenced: false,
isprinter: false,
isrequired: false,
ismonitorable: false,
monitorlaunchpath: '',
monitorprocessname: '',
ishidden: false,
applicationlink: '',
documentationpath: '',
installpath: '',
image: '',
applicationnotes: '',
// Not a column on applications - it creates/updates an AppVersion row on
// save. Held here so the field can sit next to the installer that produced
// it, which is where the operator is looking when it matters.
version: ''
})
const supportTeams = ref([])
// The value as saved, so we can tell a NEW deployment from a re-save of an
// application that was already required. Only the former warrants a warning.
const wasRequired = ref(false)
const acknowledgePolicy = ref(false)
const showsPolicyWarning = computed(
() => form.value.isrequired && !wasRequired.value
)
// Files are chosen before the application exists, so they are held here and
// uploaded once there is an id to attach them to (see saveApplication).
const pendingImage = ref(null)
const pendingPackage = ref(null)
const imagePreview = ref('')
const uploadedPackage = ref('')
const packageProgress = ref(null)
const busyImage = ref(false)
const busyPackage = ref(false)
const busyRevert = ref(false)
const detectedVersion = ref('')
const versionWarning = ref('')
// Versions already on the record, so saving an unchanged form does not try to
// re-create one and trip the duplicate check.
const existingVersions = ref([])
const PACKAGE_ACCEPT = '.exe,.msi,.msp,.zip,.7z,.cab,.iso,.appx,.msix,.ps1,.bat,.txt,.pdf'
const MAX_PACKAGE_BYTES = 500 * 1024 * 1024
function onImagePicked(event) {
const file = event.target.files?.[0]
if (!file) return
pendingImage.value = file
// Show the chosen file immediately rather than after a round trip.
imagePreview.value = URL.createObjectURL(file)
}
function onPackagePicked(event) {
const file = event.target.files?.[0]
if (!file) return
if (file.size > MAX_PACKAGE_BYTES) {
error.value = `${file.name} is ${(file.size / 1048576).toFixed(0)}MB; the limit is 500MB. `
+ 'Put it on the share and use Install Path instead.'
event.target.value = ''
return
}
error.value = ''
pendingPackage.value = file
uploadedPackage.value = file.name
}
async function removeImage() {
pendingImage.value = null
imagePreview.value = ''
form.value.image = ''
if (isEdit.value) {
busyImage.value = true
try { await applicationsApi.removeImage(route.params.id) }
catch (err) { error.value = apiError(err, 'Failed to remove the image') }
finally { busyImage.value = false }
}
}
async function removePackage() {
pendingPackage.value = null
uploadedPackage.value = ''
if (isEdit.value) {
busyPackage.value = true
try {
const response = await applicationsApi.removePackage(route.params.id)
form.value.installpath = response.data.data.installpath || ''
} catch (err) {
error.value = apiError(err, 'Failed to remove the installer')
} finally { busyPackage.value = false }
}
}
// Strips the application back to a bare catalogue record. Distinct from Delete
// on the list: the row, name and knowledgebase links survive, so this is the
// action for "stop deploying this" rather than "this never existed". Still
// irreversible, so it uses the same typed-OK gate the backend enforces.
async function revertToRecord() {
const answer = prompt(
'Remove all policy associations and uploaded executables? This action '
+ 'cannot be reversed. Type OK to proceed')
if ((answer || '').trim().toUpperCase() !== 'OK') return
busyRevert.value = true
error.value = ''
try {
const response = await applicationsApi.revertToRecord(
route.params.id, (answer || '').trim())
const app = response.data.data
// Re-seed from the server rather than guessing which fields it cleared.
// The image is deliberately untouched: revert removes executables and
// policy associations, not the record's icon.
form.value.installpath = app.installpath || ''
form.value.isrequired = app.isrequired
// Revert drops every AppVersion row, so the field must not keep showing a
// version that no longer exists.
form.value.version = ''
uploadedPackage.value = ''
pendingPackage.value = null
detectedVersion.value = ''
versionWarning.value = ''
} catch (err) {
error.value = apiError(err, 'Failed to revert the application')
} finally {
busyRevert.value = false
}
}
// Records the typed version against the application, if it is new. Creating a
// version that already exists is not an error worth failing the save over -
// re-saving a form without touching the field is the normal case, and the
// backend answers 409, which would otherwise surface as "failed to save" on a
// save that in fact succeeded.
async function saveVersion(appid) {
const version = (form.value.version || '').trim()
if (!version) return
if (existingVersions.value.some(v => v.version === version)) return
try {
await applicationsApi.createVersion(appid, { version })
existingVersions.value = [{ version }, ...existingVersions.value]
} catch (err) {
if (err.response?.status === 409) return
throw err
}
}
// The image field holds either a served URL (new) or a bare filename from the
// classic site, which is still rendered out of /images/applications/.
function imageSrcFor(value) {
if (!value) return ''
return value.startsWith('/api/') || value.startsWith('http')
? value
: `/images/applications/${value}`
}
onMounted(async () => {
try {
// Load support teams
const teamsRes = await supportteamsApi.list()
supportTeams.value = teamsRes.data.data || []
// Load application if editing
if (isEdit.value) {
const response = await applicationsApi.get(route.params.id)
const app = response.data.data
form.value = {
appname: app.appname || '',
appdescription: app.appdescription || '',
supportteamid: app.supportteamid || '',
isinstallable: app.isinstallable || false,
islicenced: app.islicenced || false,
isprinter: app.isprinter || false,
isrequired: app.isrequired || false,
ismonitorable: app.ismonitorable || false,
monitorlaunchpath: app.monitorlaunchpath || '',
monitorprocessname: app.monitorprocessname || '',
ishidden: app.ishidden || false,
applicationlink: app.applicationlink || '',
documentationpath: app.documentationpath || '',
installpath: app.installpath || '',
image: app.image || '',
applicationnotes: app.applicationnotes || '',
// The detail payload already carries versions newest-first, so the
// current one comes free rather than costing another request.
version: (app.versions && app.versions.length)
? (app.versions[0].version || '')
: ''
}
existingVersions.value = app.versions || []
imagePreview.value = imageSrcFor(app.image)
wasRequired.value = app.isrequired || false
if ((app.installpath || '').startsWith('/api/applications/package/')) {
uploadedPackage.value = app.installpath.split('/').pop()
}
}
} catch (err) {
console.error('Error loading data:', err)
error.value = 'Failed to load data'
} finally {
loading.value = false
}
})
async function saveApplication() {
error.value = ''
if (showsPolicyWarning.value && !acknowledgePolicy.value) {
error.value = 'Please acknowledge that this will install the application '
+ 'on all matched PCs before saving.'
return
}
// Mirrors _validate_monitorable on the server. Checked here too so the
// operator is told which field is missing while they are still looking at it,
// rather than after a round trip.
if (form.value.ismonitorable) {
if (!(form.value.monitorprocessname || '').trim()) {
error.value = 'A monitorable application needs a process name.'
return
}
if (!(form.value.monitorlaunchpath || '').trim()) {
error.value = 'A monitorable application needs a launch path.'
return
}
}
saving.value = true
try {
const appData = {
appname: form.value.appname,
appdescription: form.value.appdescription || null,
supportteamid: form.value.supportteamid || null,
isinstallable: form.value.isinstallable,
islicenced: form.value.islicenced,
isprinter: form.value.isprinter,
isrequired: form.value.isrequired,
ismonitorable: form.value.ismonitorable,
// Cleared when the box is unticked so a later re-tick cannot silently
// revive a stale process name the operator can no longer see.
monitorlaunchpath: form.value.ismonitorable
? (form.value.monitorlaunchpath || null)
: null,
monitorprocessname: form.value.ismonitorable
? (form.value.monitorprocessname || null)
: null,
ishidden: form.value.ishidden,
applicationlink: form.value.applicationlink || null,
documentationpath: form.value.documentationpath || null,
installpath: form.value.installpath || null,
image: form.value.image || null,
applicationnotes: form.value.applicationnotes || null,
acknowledgepolicy: showsPolicyWarning.value
}
let appid = route.params.id
if (isEdit.value) {
await applicationsApi.update(appid, appData)
} else {
const created = await applicationsApi.create(appData)
appid = created.data.data.appid
}
// Uploads come after the save: a new application has no id until it exists,
// and both endpoints key on it. A failed upload must not lose the record
// that saved fine, so it reports and stays on the form.
if (pendingImage.value) {
await applicationsApi.uploadImage(appid, pendingImage.value)
pendingImage.value = null
}
if (pendingPackage.value) {
packageProgress.value = 0
const uploaded = await applicationsApi.uploadPackage(
appid, pendingPackage.value,
percent => { packageProgress.value = percent })
pendingPackage.value = null
packageProgress.value = null
// An installer with no readable version resource is how duplicate
// version rows got created: the operator saved, saw no version, and
// imported the same file again. MSIs and archives are not PE files and
// never carry one, so ask rather than guess.
detectedVersion.value = uploaded.data.data.detectedversion || ''
if (detectedVersion.value && !form.value.version.trim()) {
form.value.version = detectedVersion.value
}
if (!form.value.version.trim()) {
versionWarning.value =
`No version could be read from ${uploaded.data.data.uploadedfilename}. `
+ 'Enter one in the Version field above so a later import is not '
+ 'mistaken for new software.'
// The application and installer are already saved; only the version is
// outstanding, so stay on the form rather than losing that work.
return
}
}
await saveVersion(appid)
router.push('/applications')
} catch (err) {
console.error('Error saving application:', err)
error.value = apiError(err, 'Failed to save application')
packageProgress.value = null
} finally {
saving.value = false
}
}
</script>
<style scoped>
.upload-current {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.upload-thumb {
width: 3rem;
height: 3rem;
object-fit: contain;
border: 1px solid var(--border);
border-radius: 0.25rem;
background: var(--bg);
}
.upload-name {
font-family: ui-monospace, monospace;
font-size: 0.85rem;
word-break: break-all;
}
.upload-progress {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.5rem;
font-size: 0.85rem;
}
.upload-bar {
flex: 1;
height: 0.5rem;
background: var(--border);
border-radius: 999px;
overflow: hidden;
}
.upload-bar span {
display: block;
height: 100%;
background: var(--primary);
transition: width 0.2s ease;
}
.checkbox-group {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.checkbox-group label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
.form-hint {
display: block;
margin-top: 0.25rem;
font-size: 0.8rem;
color: var(--text-light, #666);
}
.policy-warning {
margin-top: 1rem;
padding: 0.75rem 1rem;
border: 1px solid var(--warning);
border-left-width: 4px;
border-radius: 4px;
/* Derived from the real token rather than a fixed tint: a hardcoded light
value here survives the theme switch and renders light-on-light in dark
mode. --warning-bg does not exist in style.css. */
background: color-mix(in srgb, var(--warning) 12%, var(--bg-card-solid));
color: var(--text);
}
.policy-warning p {
margin: 0.5rem 0 0.75rem;
font-size: 0.9rem;
}
.policy-warning label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-weight: 600;
}
.monitor-fields {
margin-top: 1rem;
padding: 0.75rem 1rem;
border: 1px solid var(--border);
border-left: 4px solid var(--warning);
border-radius: 4px;
background: color-mix(in srgb, var(--warning) 6%, var(--bg-card-solid));
}
</style>