energylink/public/app/features/alerting/partials/notification_edit.html

<navbar icon="icon-gf icon-gf-alert" title="Alerting" title-url="alerting">
	<a href="alerting/notifications" class="navbar-page-btn">
		<i class="fa fa-fw fa-envelope-o"></i>
		Notifications
	</a>
</navbar>

<div class="page-container" >
	<div class="page-header">
		<h1>Alert notification</h1>
  </div>

	<div class="gf-form-group">
		<div class="gf-form">
			<span class="gf-form-label width-12">Name</span>
			<input type="text" class="gf-form-input max-width-15" ng-model="ctrl.model.name" required></input>
		</div>
		<div class="gf-form">
			<span class="gf-form-label width-12">Type</span>
			<div class="gf-form-select-wrapper width-15">
				<select class="gf-form-input"
					ng-model="ctrl.model.type"
					ng-options="t for t in ['webhook', 'email', 'slack']"
					ng-change="ctrl.typeChanged(notification, $index)">
				</select>
			</div>
		</div>
		<div class="gf-form">
			<span class="gf-form-label width-12">Severity filter</span>
			<div class="gf-form-select-wrapper width-15">
				<select class="gf-form-input"
					ng-model="ctrl.model.settings.severityFilter"
					ng-options="t for t in ['none', 'critical', 'warning']">
				</select>
			</div>
		</div>
		<div class="gf-form">
			<gf-form-switch
				class="gf-form"
				label="Send on all alerts"
				label-class="width-12"
				checked="ctrl.model.isDefault"
				tooltip="Use this notification for all alerts">
			</gf-form-switch>
		</div>
	</div>

	<div class="gf-form-group" ng-show="ctrl.model.type === 'webhook'">
    <h3 class="page-heading">Webhook settings</h3>
		<div class="gf-form">
			<span class="gf-form-label width-6">Url</span>
			<input type="text" class="gf-form-input max-width-26" ng-model="ctrl.model.settings.url"></input>
		</div>
		<div class="gf-form-inline">
			<div class="gf-form">
				<span class="gf-form-label width-6">Username</span>
				<input type="text" class="gf-form-input max-width-10" ng-model="ctrl.model.settings.username"></input>
			</div>
			<div class="gf-form">
				<span class="gf-form-label width-6">Password</span>
				<input type="text" class="gf-form-input max-width-10" ng-model="ctrl.model.settings.password"></input>
			</div>
		</div>
	</div>

  <div class="gf-form-group" ng-show="ctrl.model.type === 'slack'">
    <h3 class="page-heading">Slack settings</h3>
		<div class="gf-form">
			<span class="gf-form-label width-6">Url</span>
			<input type="text" class="gf-form-input max-width-30" ng-model="ctrl.model.settings.url" placeholder="Slack incoming webhook url"></input>
		</div>
	</div>

	<div class="gf-form-group section" ng-show="ctrl.model.type === 'email'">
    <h3 class="page-heading">Email addresses</h3>
		<div class="gf-form">
      <textarea rows="7" class="gf-form-input width-25" ng-model="ctrl.model.settings.addresses"></textarea>
		</div>
	</div>

  <div class="gf-form-group">
		<div class="gf-form-inline">
			<div class="gf-form width-6">
				<button ng-click="ctrl.save()" class="btn btn-success">Save</button>
			</div>
			<div class="gf-form width-8">
				<button ng-click="ctrl.toggleTest()" class="btn btn-secondary">Test</button>
			</div>

			<div class="gf-form width-20" ng-show="ctrl.showTest">
			  <span class="gf-form-label width-13">Severity for test notification</span>
				<div class="gf-form-select-wrapper width-7">
					<select class="gf-form-input"
						ng-model="ctrl.testSeverity"
						ng-options="t for t in ['critical', 'warning', 'ok']">
					</select>
				</div>
			</div>
			<div class="gf-form" ng-show="ctrl.showTest">
				<button ng-click="ctrl.testNotification()" class="btn btn-secondary">Send</button>
			</div>
		</div>
	</div>
</div>