feat(monitor): add extended monitor statuses, check configuration, status overrides/paused indicators, and incident update templates
This commit is contained in:
@@ -11,7 +11,7 @@ import {
|
||||
state,
|
||||
} from '@design.estate/dees-element';
|
||||
import * as sharedStyles from '../../styles/shared.styles.js';
|
||||
import type { IMonitorFormData, IServiceStatus } from '../../interfaces/index.js';
|
||||
import type { IMonitorFormData, IServiceStatus, ICheckConfig, TStatusType, TCheckType, TStatusMode } from '../../interfaces/index.js';
|
||||
import { demoFunc } from './upladmin-monitor-form.demo.js';
|
||||
|
||||
declare global {
|
||||
@@ -20,8 +20,6 @@ declare global {
|
||||
}
|
||||
}
|
||||
|
||||
type TStatusType = 'operational' | 'degraded' | 'partial_outage' | 'major_outage' | 'maintenance';
|
||||
|
||||
@customElement('upladmin-monitor-form')
|
||||
export class UpladminMonitorForm extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
@@ -45,80 +43,82 @@ export class UpladminMonitorForm extends DeesElement {
|
||||
description: '',
|
||||
category: '',
|
||||
dependencies: [],
|
||||
currentStatus: 'operational',
|
||||
statusMode: 'auto',
|
||||
paused: false,
|
||||
checkType: 'assumption',
|
||||
checkConfig: { domain: '' },
|
||||
intervalMs: 300000,
|
||||
};
|
||||
|
||||
@state()
|
||||
accessor errors: Record<string, string> = {};
|
||||
|
||||
private statusIcons: Record<TStatusType, string> = {
|
||||
operational: 'lucide:CheckCircle',
|
||||
degraded: 'lucide:AlertTriangle',
|
||||
partial_outage: 'lucide:AlertOctagon',
|
||||
major_outage: 'lucide:XCircle',
|
||||
maintenance: 'lucide:Wrench',
|
||||
private checkTypeLabels: Record<TCheckType, string> = {
|
||||
assumption: 'Assumption',
|
||||
function: 'Function',
|
||||
pwa: 'PWA',
|
||||
pagerank: 'PageRank',
|
||||
};
|
||||
|
||||
private intervalOptions = [
|
||||
{ value: 60000, label: '1 min' },
|
||||
{ value: 300000, label: '5 min' },
|
||||
{ value: 900000, label: '15 min' },
|
||||
{ value: 1800000, label: '30 min' },
|
||||
{ value: 3600000, label: '1 hour' },
|
||||
];
|
||||
|
||||
public static styles = [
|
||||
plugins.domtools.elementBasic.staticStyles,
|
||||
sharedStyles.commonStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
|
||||
}
|
||||
|
||||
.form-container {
|
||||
background: ${sharedStyles.colors.background.secondary};
|
||||
border: 1px solid ${sharedStyles.colors.border.default};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.lg)};
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
border-bottom: 1px solid ${sharedStyles.colors.border.default};
|
||||
background: ${sharedStyles.colors.background.muted};
|
||||
gap: 12px;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
}
|
||||
|
||||
.form-header dees-icon {
|
||||
--icon-color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
|
||||
}
|
||||
|
||||
.form-title-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.form-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.form-subtitle {
|
||||
font-size: 13px;
|
||||
color: ${sharedStyles.colors.text.muted};
|
||||
margin-top: 4px;
|
||||
font-size: 14px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
margin: 4px 0 0 0;
|
||||
}
|
||||
|
||||
.form-body {
|
||||
display: grid;
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
}
|
||||
|
||||
dees-form {
|
||||
display: contents;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
@@ -127,85 +127,58 @@ export class UpladminMonitorForm extends DeesElement {
|
||||
}
|
||||
}
|
||||
|
||||
.form-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.config-box {
|
||||
background: ${cssManager.bdTheme('#fafafa', '#18181b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.editor-container dees-editor {
|
||||
height: 180px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.editor-hint {
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
border-top: 1px solid ${sharedStyles.colors.border.default};
|
||||
background: ${sharedStyles.colors.background.muted};
|
||||
gap: 8px;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
background: ${cssManager.bdTheme('#fafafa', '#18181b')};
|
||||
}
|
||||
|
||||
.status-section {
|
||||
margin-top: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
}
|
||||
|
||||
.status-options {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
}
|
||||
|
||||
.status-option {
|
||||
.search-engines {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
background: ${sharedStyles.colors.background.primary};
|
||||
border: 2px solid ${sharedStyles.colors.border.default};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
|
||||
cursor: pointer;
|
||||
transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
|
||||
}
|
||||
|
||||
.status-option:hover {
|
||||
border-color: ${sharedStyles.colors.border.strong};
|
||||
background: ${sharedStyles.colors.background.muted};
|
||||
}
|
||||
|
||||
.status-option.selected {
|
||||
border-color: ${sharedStyles.colors.accent.primary};
|
||||
background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.05)', 'rgba(96, 165, 250, 0.1)')};
|
||||
}
|
||||
|
||||
.status-option input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.status-option dees-icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-option.operational dees-icon { --icon-color: ${sharedStyles.colors.status.operational}; }
|
||||
.status-option.degraded dees-icon { --icon-color: ${sharedStyles.colors.status.degraded}; }
|
||||
.status-option.partial_outage dees-icon { --icon-color: ${sharedStyles.colors.status.partialOutage}; }
|
||||
.status-option.major_outage dees-icon { --icon-color: ${sharedStyles.colors.status.majorOutage}; }
|
||||
.status-option.maintenance dees-icon { --icon-color: ${sharedStyles.colors.status.maintenance}; }
|
||||
|
||||
.status-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
}
|
||||
|
||||
.field-label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
margin-bottom: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
}
|
||||
|
||||
.field-label.required::after {
|
||||
content: ' *';
|
||||
color: ${sharedStyles.colors.accent.danger};
|
||||
}
|
||||
|
||||
/* Style dees-input components */
|
||||
dees-input-text,
|
||||
dees-input-dropdown {
|
||||
--dees-input-background: ${sharedStyles.colors.background.primary};
|
||||
--dees-input-border-color: ${sharedStyles.colors.border.default};
|
||||
gap: 16px;
|
||||
}
|
||||
`
|
||||
];
|
||||
@@ -225,113 +198,140 @@ export class UpladminMonitorForm extends DeesElement {
|
||||
|
||||
public render(): TemplateResult {
|
||||
const isEdit = !!this.monitor?.id;
|
||||
const statusOptions: Array<{ value: TStatusType; label: string }> = [
|
||||
{ value: 'operational', label: 'Operational' },
|
||||
{ value: 'degraded', label: 'Degraded' },
|
||||
{ value: 'partial_outage', label: 'Partial Outage' },
|
||||
{ value: 'major_outage', label: 'Major Outage' },
|
||||
{ value: 'maintenance', label: 'Maintenance' },
|
||||
];
|
||||
|
||||
const categoryOptions = this.categories.map(cat => ({ key: cat, option: cat, payload: null }));
|
||||
const dependencyOptions = this.availableMonitors
|
||||
.filter(m => m.id !== this.monitor?.id)
|
||||
.map(m => ({ key: m.id, option: m.displayName || m.name, payload: null }));
|
||||
const intervalOptions = this.intervalOptions.map(opt => ({ key: String(opt.value), option: opt.label, payload: null }));
|
||||
|
||||
return html`
|
||||
<div class="form-container">
|
||||
<div class="form-header">
|
||||
<dees-icon .icon=${isEdit ? 'lucide:Pencil' : 'lucide:Plus'} .iconSize=${24}></dees-icon>
|
||||
<div class="form-title-wrapper">
|
||||
<div>
|
||||
<h2 class="form-title">${isEdit ? 'Edit Monitor' : 'Create Monitor'}</h2>
|
||||
<p class="form-subtitle">
|
||||
${isEdit ? 'Update the monitor configuration' : 'Add a new service to monitor'}
|
||||
</p>
|
||||
<p class="form-subtitle">${isEdit ? 'Update monitor configuration' : 'Add a new service to monitor'}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-body">
|
||||
<dees-form>
|
||||
<!-- Basic Info -->
|
||||
<div class="form-row">
|
||||
<dees-input-text
|
||||
key="name"
|
||||
label="Internal Name"
|
||||
.value="${this.formData.name}"
|
||||
placeholder="api-server"
|
||||
required
|
||||
description="Lowercase, no spaces. Used as identifier."
|
||||
@changeSubject="${this.handleNameChange}"
|
||||
.label=${'Internal Name'}
|
||||
.value=${this.formData.name}
|
||||
.placeholder=${'api-server'}
|
||||
.required=${true}
|
||||
.description=${'Lowercase, no spaces'}
|
||||
@changeSubject=${(e: CustomEvent) => this.updateField('name', e.detail.value)}
|
||||
></dees-input-text>
|
||||
|
||||
<dees-input-text
|
||||
key="displayName"
|
||||
label="Display Name"
|
||||
.value="${this.formData.displayName}"
|
||||
placeholder="API Server"
|
||||
required
|
||||
description="Human-readable name shown to users."
|
||||
@changeSubject="${this.handleDisplayNameChange}"
|
||||
.label=${'Display Name'}
|
||||
.value=${this.formData.displayName}
|
||||
.placeholder=${'API Server'}
|
||||
.required=${true}
|
||||
.description=${'Human-readable name'}
|
||||
@changeSubject=${(e: CustomEvent) => this.updateField('displayName', e.detail.value)}
|
||||
></dees-input-text>
|
||||
</div>
|
||||
|
||||
<dees-input-text
|
||||
key="description"
|
||||
label="Description"
|
||||
inputType="textarea"
|
||||
.value="${this.formData.description || ''}"
|
||||
placeholder="Brief description of what this service does..."
|
||||
@changeSubject="${this.handleDescriptionChange}"
|
||||
.label=${'Description'}
|
||||
.inputType=${'textarea'}
|
||||
.value=${this.formData.description || ''}
|
||||
.placeholder=${'Brief description of this service...'}
|
||||
@changeSubject=${(e: CustomEvent) => this.updateField('description', e.detail.value)}
|
||||
></dees-input-text>
|
||||
|
||||
<div class="form-row">
|
||||
<dees-input-dropdown
|
||||
key="category"
|
||||
label="Category"
|
||||
.options="${categoryOptions}"
|
||||
.selectedOption="${this.formData.category || ''}"
|
||||
placeholder="Select category..."
|
||||
@selectedOption="${this.handleCategoryChange}"
|
||||
.label=${'Category'}
|
||||
.options=${categoryOptions}
|
||||
.selectedOption=${this.formData.category || ''}
|
||||
@selectedOption=${(e: CustomEvent) => this.updateField('category', e.detail)}
|
||||
></dees-input-dropdown>
|
||||
|
||||
<dees-input-dropdown
|
||||
key="dependencies"
|
||||
label="Dependencies"
|
||||
.options="${dependencyOptions}"
|
||||
.selectedOptions="${this.formData.dependencies || []}"
|
||||
multiple
|
||||
description="Services this monitor depends on."
|
||||
@selectedOption="${this.handleDependenciesChange}"
|
||||
.label=${'Dependencies'}
|
||||
.options=${dependencyOptions}
|
||||
.selectedOptions=${this.formData.dependencies || []}
|
||||
.multiple=${true}
|
||||
@selectedOption=${(e: CustomEvent) => this.updateField('dependencies', Array.isArray(e.detail) ? e.detail : [e.detail])}
|
||||
></dees-input-dropdown>
|
||||
</div>
|
||||
|
||||
<div class="status-section">
|
||||
<label class="field-label required">Current Status</label>
|
||||
<div class="status-options">
|
||||
${statusOptions.map(opt => html`
|
||||
<label
|
||||
class="status-option ${opt.value} ${this.formData.currentStatus === opt.value ? 'selected' : ''}"
|
||||
@click="${() => this.handleStatusChange(opt.value)}"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="currentStatus"
|
||||
value="${opt.value}"
|
||||
?checked="${this.formData.currentStatus === opt.value}"
|
||||
/>
|
||||
<dees-icon .icon=${this.statusIcons[opt.value]} .iconSize=${20}></dees-icon>
|
||||
<span class="status-label">${opt.label}</span>
|
||||
</label>
|
||||
`)}
|
||||
<!-- Check Type -->
|
||||
<div class="form-section">
|
||||
<dees-input-multitoggle
|
||||
.label=${'Check Type'}
|
||||
.options=${Object.values(this.checkTypeLabels)}
|
||||
.selectedOption=${this.checkTypeLabels[this.formData.checkType]}
|
||||
@changeSubject=${(e: CustomEvent) => this.handleCheckTypeChange(e.detail.selectedOption)}
|
||||
></dees-input-multitoggle>
|
||||
</div>
|
||||
|
||||
<!-- Check Configuration -->
|
||||
<div class="form-section">
|
||||
<div class="config-box">
|
||||
${this.renderCheckConfigFields()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interval -->
|
||||
<dees-input-dropdown
|
||||
.label=${'Check Interval'}
|
||||
.options=${intervalOptions}
|
||||
.selectedOption=${String(this.formData.intervalMs)}
|
||||
@selectedOption=${(e: CustomEvent) => this.updateField('intervalMs', parseInt(e.detail))}
|
||||
></dees-input-dropdown>
|
||||
|
||||
<!-- Pause Toggle -->
|
||||
<dees-input-checkbox
|
||||
.label=${'Pause Monitor'}
|
||||
.description=${'When paused, status will show as "paused" and checks won\'t run'}
|
||||
.value=${this.formData.paused}
|
||||
@changeSubject=${(e: CustomEvent) => this.updateField('paused', e.detail.value)}
|
||||
></dees-input-checkbox>
|
||||
|
||||
<!-- Status Override (Edit mode only) -->
|
||||
${isEdit ? html`
|
||||
<div class="form-section">
|
||||
<dees-input-multitoggle
|
||||
.label=${'Status Mode'}
|
||||
.description=${'Auto uses check results, Manual lets you override'}
|
||||
.options=${['Auto', 'Manual']}
|
||||
.selectedOption=${this.formData.statusMode === 'auto' ? 'Auto' : 'Manual'}
|
||||
@changeSubject=${(e: CustomEvent) => this.handleStatusModeChange(e.detail.selectedOption)}
|
||||
></dees-input-multitoggle>
|
||||
|
||||
${this.formData.statusMode === 'manual' ? html`
|
||||
<dees-input-radiogroup
|
||||
.label=${'Manual Status'}
|
||||
.options=${[
|
||||
{ key: 'operational', option: 'Operational' },
|
||||
{ key: 'degraded', option: 'Degraded' },
|
||||
{ key: 'partial_outage', option: 'Partial Outage' },
|
||||
{ key: 'major_outage', option: 'Major Outage' },
|
||||
{ key: 'maintenance', option: 'Maintenance' },
|
||||
]}
|
||||
.selectedOption=${this.formData.manualStatus || 'operational'}
|
||||
.direction=${'horizontal'}
|
||||
@changeSubject=${(e: CustomEvent) => this.updateField('manualStatus', e.detail.selectedOption)}
|
||||
></dees-input-radiogroup>
|
||||
` : ''}
|
||||
</div>
|
||||
` : ''}
|
||||
</dees-form>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<dees-button type="discreet" @click="${this.handleCancel}" ?disabled="${this.loading}">
|
||||
<dees-button .type=${'discreet'} @click=${this.handleCancel} ?disabled=${this.loading}>
|
||||
Cancel
|
||||
</dees-button>
|
||||
<dees-button type="highlighted" @click="${this.handleSave}" ?disabled="${this.loading}">
|
||||
<dees-button .type=${'highlighted'} @click=${this.handleSave} ?disabled=${this.loading}>
|
||||
${this.loading ? html`<dees-spinner .size=${16}></dees-spinner>` : ''}
|
||||
${isEdit ? 'Update Monitor' : 'Create Monitor'}
|
||||
</dees-button>
|
||||
@@ -340,40 +340,168 @@ export class UpladminMonitorForm extends DeesElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private handleNameChange(e: CustomEvent) {
|
||||
this.formData = { ...this.formData, name: e.detail };
|
||||
if (this.errors.name) {
|
||||
this.errors = { ...this.errors, name: '' };
|
||||
private renderCheckConfigFields(): TemplateResult {
|
||||
const config = this.formData.checkConfig;
|
||||
|
||||
switch (this.formData.checkType) {
|
||||
case 'assumption':
|
||||
return html`
|
||||
<dees-input-text
|
||||
.label=${'Domain'}
|
||||
.value=${config.domain || ''}
|
||||
.placeholder=${'api.example.com'}
|
||||
.required=${true}
|
||||
@changeSubject=${(e: CustomEvent) => this.updateCheckConfig('domain', e.detail.value)}
|
||||
></dees-input-text>
|
||||
<div class="form-row">
|
||||
<dees-input-text
|
||||
.label=${'Expected Status Code'}
|
||||
.value=${config.expectedStatusCode || ''}
|
||||
.placeholder=${'200'}
|
||||
@changeSubject=${(e: CustomEvent) => this.updateCheckConfig('expectedStatusCode', e.detail.value)}
|
||||
></dees-input-text>
|
||||
<dees-input-text
|
||||
.label=${'Expected Title'}
|
||||
.value=${config.expectedTitle || ''}
|
||||
.placeholder=${'Page Title'}
|
||||
@changeSubject=${(e: CustomEvent) => this.updateCheckConfig('expectedTitle', e.detail.value)}
|
||||
></dees-input-text>
|
||||
</div>
|
||||
`;
|
||||
|
||||
case 'function':
|
||||
return html`
|
||||
<dees-input-text
|
||||
.label=${'Domain'}
|
||||
.value=${config.domain || ''}
|
||||
.placeholder=${'api.example.com'}
|
||||
.required=${true}
|
||||
@changeSubject=${(e: CustomEvent) => this.updateCheckConfig('domain', e.detail.value)}
|
||||
></dees-input-text>
|
||||
<div>
|
||||
<p class="section-label">Function Definition</p>
|
||||
<div class="editor-container">
|
||||
<dees-editor
|
||||
.value=${config.functionDef || `async (context: { domain: string }) => {
|
||||
const response = await fetch(\`https://\${context.domain}\`);
|
||||
return response.status === 200;
|
||||
}`}
|
||||
.language=${'typescript'}
|
||||
.options=${{
|
||||
lineNumbers: 'on',
|
||||
minimap: { enabled: false },
|
||||
scrollBeyondLastLine: false,
|
||||
fontSize: 13,
|
||||
tabSize: 2,
|
||||
}}
|
||||
@change=${(e: CustomEvent) => this.updateCheckConfig('functionDef', e.detail)}
|
||||
></dees-editor>
|
||||
</div>
|
||||
<p class="editor-hint">Return true for success, false for failure</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
case 'pwa':
|
||||
return html`
|
||||
<dees-input-text
|
||||
.label=${'Domain'}
|
||||
.value=${config.domain || ''}
|
||||
.placeholder=${'example.com'}
|
||||
.required=${true}
|
||||
.description=${'Domain to run Lighthouse PWA analysis on'}
|
||||
@changeSubject=${(e: CustomEvent) => this.updateCheckConfig('domain', e.detail.value)}
|
||||
></dees-input-text>
|
||||
`;
|
||||
|
||||
case 'pagerank':
|
||||
return html`
|
||||
<div class="form-row">
|
||||
<dees-input-text
|
||||
.label=${'Domain'}
|
||||
.value=${config.domain || ''}
|
||||
.placeholder=${'example.com'}
|
||||
.required=${true}
|
||||
@changeSubject=${(e: CustomEvent) => this.updateCheckConfig('domain', e.detail.value)}
|
||||
></dees-input-text>
|
||||
<dees-input-text
|
||||
.label=${'Search Term'}
|
||||
.value=${config.searchTerm || ''}
|
||||
.placeholder=${'your brand name'}
|
||||
.required=${true}
|
||||
@changeSubject=${(e: CustomEvent) => this.updateCheckConfig('searchTerm', e.detail.value)}
|
||||
></dees-input-text>
|
||||
</div>
|
||||
<div class="search-engines">
|
||||
<dees-input-checkbox
|
||||
.label=${'Google'}
|
||||
.value=${config.checkGoogle !== false}
|
||||
@changeSubject=${(e: CustomEvent) => this.updateCheckConfig('checkGoogle', e.detail.value)}
|
||||
></dees-input-checkbox>
|
||||
<dees-input-checkbox
|
||||
.label=${'Bing'}
|
||||
.value=${config.checkBing === true}
|
||||
@changeSubject=${(e: CustomEvent) => this.updateCheckConfig('checkBing', e.detail.value)}
|
||||
></dees-input-checkbox>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
${config.checkGoogle !== false ? html`
|
||||
<dees-input-text
|
||||
.label=${'Google Min Rank'}
|
||||
.value=${config.googleMinRank?.toString() || ''}
|
||||
.placeholder=${'10'}
|
||||
.description=${'Alert if rank drops below this'}
|
||||
@changeSubject=${(e: CustomEvent) => this.updateCheckConfig('googleMinRank', parseInt(e.detail.value) || undefined)}
|
||||
></dees-input-text>
|
||||
` : ''}
|
||||
${config.checkBing ? html`
|
||||
<dees-input-text
|
||||
.label=${'Bing Min Rank'}
|
||||
.value=${config.bingMinRank?.toString() || ''}
|
||||
.placeholder=${'10'}
|
||||
.description=${'Alert if rank drops below this'}
|
||||
@changeSubject=${(e: CustomEvent) => this.updateCheckConfig('bingMinRank', parseInt(e.detail.value) || undefined)}
|
||||
></dees-input-text>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
|
||||
default:
|
||||
return html``;
|
||||
}
|
||||
}
|
||||
|
||||
private handleDisplayNameChange(e: CustomEvent) {
|
||||
this.formData = { ...this.formData, displayName: e.detail };
|
||||
if (this.errors.displayName) {
|
||||
this.errors = { ...this.errors, displayName: '' };
|
||||
private updateField(field: keyof IMonitorFormData, value: any) {
|
||||
this.formData = { ...this.formData, [field]: value };
|
||||
if (this.errors[field]) {
|
||||
this.errors = { ...this.errors, [field]: '' };
|
||||
}
|
||||
}
|
||||
|
||||
private handleDescriptionChange(e: CustomEvent) {
|
||||
this.formData = { ...this.formData, description: e.detail };
|
||||
private updateCheckConfig(field: keyof ICheckConfig, value: any) {
|
||||
this.formData = {
|
||||
...this.formData,
|
||||
checkConfig: { ...this.formData.checkConfig, [field]: value },
|
||||
};
|
||||
}
|
||||
|
||||
private handleCategoryChange(e: CustomEvent) {
|
||||
this.formData = { ...this.formData, category: e.detail };
|
||||
private handleCheckTypeChange(label: string) {
|
||||
const checkType = (Object.keys(this.checkTypeLabels) as TCheckType[])
|
||||
.find(key => this.checkTypeLabels[key] === label) || 'assumption';
|
||||
const domain = this.formData.checkConfig?.domain || '';
|
||||
this.formData = {
|
||||
...this.formData,
|
||||
checkType,
|
||||
checkConfig: { domain },
|
||||
};
|
||||
}
|
||||
|
||||
private handleDependenciesChange(e: CustomEvent) {
|
||||
const selected = e.detail;
|
||||
if (Array.isArray(selected)) {
|
||||
this.formData = { ...this.formData, dependencies: selected };
|
||||
} else if (selected) {
|
||||
// Single selection mode, convert to array
|
||||
this.formData = { ...this.formData, dependencies: [selected] };
|
||||
}
|
||||
}
|
||||
|
||||
private handleStatusChange(status: TStatusType) {
|
||||
this.formData = { ...this.formData, currentStatus: status };
|
||||
private handleStatusModeChange(label: string) {
|
||||
const mode: TStatusMode = label === 'Auto' ? 'auto' : 'manual';
|
||||
this.formData = {
|
||||
...this.formData,
|
||||
statusMode: mode,
|
||||
manualStatus: mode === 'manual' && !this.formData.manualStatus ? 'operational' : this.formData.manualStatus,
|
||||
};
|
||||
}
|
||||
|
||||
private validate(): boolean {
|
||||
@@ -389,6 +517,14 @@ export class UpladminMonitorForm extends DeesElement {
|
||||
errors.displayName = 'Display name is required';
|
||||
}
|
||||
|
||||
if (!this.formData.checkConfig?.domain?.trim()) {
|
||||
errors.domain = 'Domain is required';
|
||||
}
|
||||
|
||||
if (this.formData.checkType === 'pagerank' && !this.formData.checkConfig?.searchTerm?.trim()) {
|
||||
errors.searchTerm = 'Search term is required for PageRank checks';
|
||||
}
|
||||
|
||||
this.errors = errors;
|
||||
return Object.keys(errors).length === 0;
|
||||
}
|
||||
@@ -419,7 +555,11 @@ export class UpladminMonitorForm extends DeesElement {
|
||||
description: '',
|
||||
category: '',
|
||||
dependencies: [],
|
||||
currentStatus: 'operational',
|
||||
statusMode: 'auto',
|
||||
paused: false,
|
||||
checkType: 'assumption',
|
||||
checkConfig: { domain: '' },
|
||||
intervalMs: 300000,
|
||||
};
|
||||
this.errors = {};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user