TICKscript Editor

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### Features
 1. [#1885](https://github.com/influxdata/chronograf/pull/1885): Add `fill` options to data explorer and dashboard queries
 1. [#1978](https://github.com/influxdata/chronograf/pull/1978): Support editing kapacitor TICKScript
+1. [#1721](https://github.com/influxdata/chronograf/pull/1721): Introduce the TICKscript editor UI
 1. [#1992](https://github.com/influxdata/chronograf/pull/1992): Add .csv download button to data explorer
 
 ### UI Improvements
@@ -146,6 +147,8 @@
 1. [#1738](https://github.com/influxdata/chronograf/pull/1738): Add shared secret JWT authorization to InfluxDB
 1. [#1724](https://github.com/influxdata/chronograf/pull/1724): Add Pushover alert support
 1. [#1762](https://github.com/influxdata/chronograf/pull/1762): Restore all supported Kapacitor services when creating rules, and add most optional message parameters
+1. [#1681](https://github.com/influxdata/chronograf/pull/1681): Add the ability to select Custom Time Ranges in the Hostpages, Data Explorer, and Dashboards.
+1. [#1717](https://github.com/influxdata/chronograf/pull/1717): View server generated TICKscripts
 
 ### UI Improvements
 1. [#1707](https://github.com/influxdata/chronograf/pull/1707): Polish alerts table in status page to wrap text less

server/kapacitors.go

@@ -39,6 +39,8 @@ type kapaLinks struct {
 	Proxy string `json:"proxy"` // URL location of proxy endpoint for this source
 	Self  string `json:"self"`  // Self link mapping to this resource
 	Rules string `json:"rules"` // Rules link for defining roles alerts for kapacitor
+	Tasks string `json:"tasks"` // Tasks link to define a task against the proxy
+	Ping  string `json:"ping"`  // Ping path to kapacitor
 }
 
 type kapacitor struct {
@@ -108,6 +110,8 @@ func newKapacitor(srv chronograf.Server) kapacitor {
 			Self:  fmt.Sprintf("%s/%d/kapacitors/%d", httpAPISrcs, srv.SrcID, srv.ID),
 			Proxy: fmt.Sprintf("%s/%d/kapacitors/%d/proxy", httpAPISrcs, srv.SrcID, srv.ID),
 			Rules: fmt.Sprintf("%s/%d/kapacitors/%d/rules", httpAPISrcs, srv.SrcID, srv.ID),
+			Tasks: fmt.Sprintf("%s/%d/kapacitors/%d/proxy?path=/kapacitor/v1/tasks", httpAPISrcs, srv.SrcID, srv.ID),
+			Ping:  fmt.Sprintf("%s/%d/kapacitors/%d/proxy?path=/kapacitor/v1/ping", httpAPISrcs, srv.SrcID, srv.ID),
 		},
 	}
 }

ui/package.json

@@ -95,6 +95,7 @@
     "webpack-dev-server": "^1.14.1"
   },
   "dependencies": {
+    "@skidding/react-codemirror": "^1.0.1",
     "axios": "^0.13.1",
     "bignumber.js": "^4.0.2",
     "bootstrap": "^3.3.7",
@@ -112,6 +113,7 @@
     "query-string": "^5.0.0",
     "react": "^15.0.2",
     "react-addons-shallow-compare": "^15.0.2",
+    "react-codemirror": "^1.0.0",
     "react-custom-scrollbars": "^4.1.1",
     "react-dimensions": "^1.2.0",
     "react-dom": "^15.0.2",

ui/src/admin/components/RoleRow.js

@@ -10,7 +10,7 @@ import DeleteConfirmTableCell from 'shared/components/DeleteConfirmTableCell'
 import {ROLES_TABLE} from 'src/admin/constants/tableSizing'
 
 const RoleRow = ({
-  role: {name, permissions, users},
+  role: {name: roleName, permissions, users = []},
   role,
   allUsers,
   allPermissions,
@@ -23,12 +23,14 @@ const RoleRow = ({
   onUpdateRoleUsers,
   onUpdateRolePermissions,
 }) => {
-  const handleUpdateUsers = u => {
-    onUpdateRoleUsers(role, u.map(n => ({name: n})))
+  const handleUpdateUsers = usrs => {
+    onUpdateRoleUsers(role, usrs)
   }
 
   const handleUpdatePermissions = allowed => {
-    onUpdateRolePermissions(role, [{scope: 'all', allowed}])
+    onUpdateRolePermissions(role, [
+      {scope: 'all', allowed: allowed.map(({name}) => name)},
+    ])
   }
 
   const perms = _.get(permissions, ['0', 'allowed'], [])
@@ -62,13 +64,13 @@ const RoleRow = ({
   return (
     <tr>
       <td style={{width: `${ROLES_TABLE.colName}px`}}>
-        {name}
+        {roleName}
       </td>
       <td>
         {allPermissions && allPermissions.length
           ? <MultiSelectDropdown
-              items={allPermissions}
-              selectedItems={perms}
+              items={allPermissions.map(name => ({name}))}
+              selectedItems={perms.map(name => ({name}))}
               label={perms.length ? '' : 'Select Permissions'}
               onApply={handleUpdatePermissions}
               buttonSize="btn-xs"
@@ -85,9 +87,9 @@ const RoleRow = ({
       <td>
         {allUsers && allUsers.length
           ? <MultiSelectDropdown
-              items={allUsers.map(u => u.name)}
-              selectedItems={users === undefined ? [] : users.map(u => u.name)}
-              label={users && users.length ? '' : 'Select Users'}
+              items={allUsers}
+              selectedItems={users}
+              label={users.length ? '' : 'Select Users'}
               onApply={handleUpdateUsers}
               buttonSize="btn-xs"
               buttonColor="btn-primary"

ui/src/admin/components/UserRow.js

@@ -12,7 +12,7 @@ import ChangePassRow from 'src/admin/components/ChangePassRow'
 import {USERS_TABLE} from 'src/admin/constants/tableSizing'
 
 const UserRow = ({
-  user: {name, roles, permissions, password},
+  user: {name, roles = [], permissions, password},
   user,
   allRoles,
   allPermissions,
@@ -27,21 +27,24 @@ const UserRow = ({
   onUpdateRoles,
   onUpdatePassword,
 }) => {
-  const handleUpdatePermissions = allowed => {
+  const handleUpdatePermissions = perms => {
+    const allowed = perms.map(p => p.name)
     onUpdatePermissions(user, [{scope: 'all', allowed}])
   }
 
   const handleUpdateRoles = roleNames => {
     onUpdateRoles(
       user,
-      allRoles.filter(r => roleNames.find(rn => rn === r.name))
+      allRoles.filter(r => roleNames.find(rn => rn.name === r.name))
     )
   }
 
   const handleUpdatePassword = () => {
     onUpdatePassword(user, password)
   }
 
+  const perms = _.get(permissions, ['0', 'allowed'], [])
+
   if (isEditing) {
     return (
       <tr className="admin-table--edit-row">
@@ -85,13 +88,9 @@ const UserRow = ({
       {hasRoles
         ? <td>
             <MultiSelectDropdown
-              items={allRoles.map(r => r.name)}
-              selectedItems={
-                roles
-                  ? roles.map(r => r.name)
-                  : [] /* TODO remove check when server returns empty list */
-              }
-              label={roles && roles.length ? '' : 'Select Roles'}
+              items={allRoles}
+              selectedItems={roles.map(r => ({name: r.name}))}
+              label={roles.length ? '' : 'Select Roles'}
               onApply={handleUpdateRoles}
               buttonSize="btn-xs"
               buttonColor="btn-primary"
@@ -104,8 +103,8 @@ const UserRow = ({
       <td>
         {allPermissions && allPermissions.length
           ? <MultiSelectDropdown
-              items={allPermissions}
-              selectedItems={_.get(permissions, ['0', 'allowed'], [])}
+              items={allPermissions.map(p => ({name: p}))}
+              selectedItems={perms.map(p => ({name: p}))}
               label={
                 permissions && permissions.length ? '' : 'Select Permissions'
               }