Elektra Web 1.5

doc/api_blueprints/elektrad.apib

@@ -80,11 +80,26 @@ delete a key (and all its subkeys) - works like `kdb rm -r`
         + path: `user/hello` (string) - path to the elektra config
 
 + Response 200
-   
+
 + Response 400 (application/json; charset=utf-8)
     + Attributes (Error)
 
 
+## find keys [GET /kdbFind/{+query}]
+
++ Request (application/json)
+    + Parameters
+        + query: `hello` (string) - search query
+
++ Response 200 (application/json; charset=utf-8)
+    + Body
+
+            [
+                "user/hello",
+                "user/helloWorld"
+            ]
+
+
 ## metakeys [/kdbMeta/{+path}]
 
 ### create metakey [POST]
@@ -114,7 +129,7 @@ delete a key (and all its subkeys) - works like `kdb rm -r`
     + Attributes (Error)
 
 
-## Move operation [POST /kdbMv/{+from}]
+## move operation [POST /kdbMv/{+from}]
 
 move a key (and all its subkeys) to a new path - works like `kdb mv -r`
 
@@ -132,7 +147,7 @@ move a key (and all its subkeys) to a new path - works like `kdb mv -r`
     + Attributes (Error)
 
 
-## Copy operation [POST /kdbCp/{+from}]
+## copy operation [POST /kdbCp/{+from}]
 
 copy a key (and all its subkeys) to a new path - works like `kdb cp -r`
 

doc/api_blueprints/webd.apib

@@ -173,6 +173,22 @@ delete the key (and all its subkeys) on the specified `path` from the elektra ke
 + Response 404
 
 
+## find keys [GET /api/instances/{instance_id}/kdbFind/{+query}]
+
++ Request (application/json)
+    + Parameters
+        + instance_id: `46a288ae-7475-4cdd-a04c-3826c9a4b5f5` (string) - id of an instance
+        + query: `hello` (string) - search query
+
++ Response 200 (application/json; charset=utf-8)
+    + Body
+
+            [
+                "user/hello",
+                "user/helloWorld"
+            ]
+
+
 ## metakeys [/api/instances/{instance_id}/kdbMeta/{+path}]
 
 ### create metakey [POST]
@@ -204,7 +220,7 @@ delete the key (and all its subkeys) on the specified `path` from the elektra ke
     + Attributes (Error)
 
 
-## Move operation [POST /api/instances/{instance_id}/kdbMv/{+from}]
+## move operation [POST /api/instances/{instance_id}/kdbMv/{+from}]
 
 move a key (and all its subkeys) to a new path - works like `kdb mv -r`
 
@@ -223,7 +239,7 @@ move a key (and all its subkeys) to a new path - works like `kdb mv -r`
     + Attributes (Error)
 
 
-## Copy operation [POST /api/instances/{instance_id}/kdbCp/{+from}]
+## copy operation [POST /api/instances/{instance_id}/kdbCp/{+from}]
 
 copy a key (and all its subkeys) to a new path - works like `kdb cp -r`
 

doc/news/_preparation_next_release.md

@@ -39,7 +39,7 @@ You can also read the news [on our website](https://www.libelektra.org/news/0.8.
 
 - Type system preview
 - Chef Cookbook
-- <<HIGHLIGHT3>>
+- Elektra Web 1.5
 
 
 ### Type system preview
@@ -96,10 +96,28 @@ end
 
 Thanks to Michael Zronek and Vanessa Kos.
 
-### <<HIGHLIGHT2>>
 
+### Elektra Web 1.5
+
+The new release of Elektra Web features many UX improvements from the usability test!
+
+[![Elektra Web 1.5 video](https://img.youtube.com/vi/lLg9sk6Hx-E/0.jpg)](https://www.youtube.com/watch?v=lLg9sk6Hx-E)
+
+Try it out now on: http://webui.libelektra.org:33334/
+
+- search completely reworked - it does not act as a filter on already opened keys anymore, and instead searches the whole key database - feedback from the search was also greatly improved (pulsating while searching, glowing blue when done)
+- added "abort" buttons to dialogs to revert actions
+- added "create array" button to easily create arrays
+- removed confirmation dialog before deletion (undo can be used instead)
+- created a docker image: `elektra/web`
+- small fixes:
+  - updated visibility levels
+  - removed "done" button in main view
+  - fixed issues with the opener click area
+  - remove metakeys when they are set to the default value or empty/0
+  - improved keyboard support
+  - fixed many small issues (#2037)
 
-### <<HIGHLIGHT2>>
 
 
 ## Plugins

src/tools/web/README.md

@@ -32,6 +32,12 @@ To build Elektra with the elektra-web tool:
  * You can now access the client on: [http://localhost:33334](http://localhost:33334)
 
 
+## Getting started (docker)
+
+ * Create and run a new docker container: `docker run -d -it -p 33333:33333 -p 33334:33334 elektra/web`
+ * You can now access the client on: [http://localhost:33334](http://localhost:33334)
+
+
 ## Running from source
 
  * Install dependencies (see above)
@@ -153,3 +159,79 @@ authenticate users, e.g. by [username/password auth](https://www.digitalocean.co
   - `src/containers/` - contains components that are connected to Redux
   - `src/css/` - contains CSS styles
   - `src/reducers/` - contains Redux reducers (used to process actions)
+
+
+## Development Guides
+
+### Updating dependencies
+
+Lockfiles (`package-lock.json`) can be updated by simply deleting the current
+lock file and running `npm install`, which creates a new lock file.
+
+Check for outdated dependencies via `npm outdated`. Dependencies can then be
+updated by running `npm update`.
+
+### Building docker image
+
+Run the following command in the `scripts/docker/web/` directory, replacing `1.5.0` with the latest version:
+
+```
+docker build -t elektra/web:1.5.0 -t elektra/web:latest .
+```
+
+Test the image:
+
+```
+docker run -d -it -p 33333:33333 -p 33334:33334 elektra/web:1.5.0
+```
+
+Publish it to the docker registry:
+
+```
+docker push elektra/web:1.5.0
+```
+
+### Adding support for new metadata
+
+- Create a new sub dialog by, for example, copying the `NumberSubDialog.jsx`
+  file (or similar) to a new file in the
+  `client/src/components/TreeItem/dialogs` folder.
+
+- Include the sub dialog by adding it to the `SettingsDialog.jsx` file in the
+  same folder. For example, it could be added before the
+  AdditionalMetakeysSubDialog at the end of the file:
+
+```diff
++     <NewSubDialog
++       onChange={this.handleEdit('check/something')}
++       value={this.getMeta('check/something', '')}
++       saved={this.getSaved('check/something')}
++     />
+      <AdditionalMetakeysSubDialog
+        handleEdit={this.handleEdit.bind(this)}
+        getMeta={this.getMeta.bind(this)}
+        getSaved={this.getSaved.bind(this)}
+        meta={this.props.meta}
+        deleteMeta={this.props.deleteMeta}
+      />
+    </FocusTrapDialog>
+```
+
+- Mark the meta keys as handled by adding them to the `HANDLED_METADATA` array
+  in `client/src/components/TreeItem/dialogs/utils.js`:
+
+```diff
+export const HANDLED_METADATA = [
+  ...,
+  'visibility',
+  'binary',
++ 'check/something',
+]
+```
+
+- Validation can then be added by handling metadata in the
+  `client/src/components/TreeItem/fields/validateType.js` file to the
+  `validateType` function.
+
+- Rendering fields in a special way when certain metakeys are present can be
+  done by adjusting the `renderSpecialValue` function in the `client/src/components/TreeItem/index.js` file.

src/tools/web/client/package.json

@@ -23,7 +23,6 @@
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.0.17",
-    "react-tap-event-plugin": "^3.0.2",
     "redux": "^3.7.2",
     "redux-logger": "^3.0.6",
     "redux-promises": "^1.0.0",

src/tools/web/client/src/actions/index.js

@@ -10,3 +10,9 @@ export * from './instances'
 export * from './container'
 export * from './kdb'
 export * from './notification'
+
+export const RESET_BATCH_UNDO = 'RESET_BATCH_UNDO'
+
+export const resetBatchUndo = () => {
+  return { type: RESET_BATCH_UNDO }
+}

src/tools/web/client/src/actions/kdb.js

@@ -112,6 +112,34 @@ export const deleteKey = (id, path) => thunkCreator({
 
 // ~~~
 
+export const FIND_KEY_REQUEST = 'FIND_KEY_REQUEST'
+export const FIND_KEY_SUCCESS = 'FIND_KEY_SUCCESS'
+export const FIND_KEY_FAILURE = 'FIND_KEY_FAILURE'
+
+export const findKey = (id, query) => thunkCreator({
+  id, query,
+  request: { id, query },
+  types: [FIND_KEY_REQUEST, FIND_KEY_SUCCESS, FIND_KEY_FAILURE],
+  promise: fetch(
+    `/api/instances/${id}/kdbFind/${encodeURIComponent(query)}`,
+    { credentials: 'same-origin' }
+  )
+    .then(parseJSONResponse)
+    .then(result => {
+      return { result, id, query }
+    }),
+})
+
+export const CLEAR_SEARCH = 'CLEAR_SEARCH'
+export const CLEAR_SEARCH_FINAL = 'CLEAR_SEARCH_FINAL'
+
+export const clearSearch = () => dispatch => {
+  dispatch({ type: CLEAR_SEARCH })
+  setTimeout(() => dispatch({ type: CLEAR_SEARCH_FINAL }), 200)
+}
+
+// ~~~
+
 export const MOVE_KEY_REQUEST = 'MOVE_KEY_REQUEST'
 export const MOVE_KEY_SUCCESS = 'MOVE_KEY_SUCCESS'
 export const MOVE_KEY_FAILURE = 'MOVE_KEY_FAILURE'

src/tools/web/client/src/components/CreateInstanceCard.jsx

@@ -120,7 +120,7 @@ export default class CreateInstanceCard extends React.Component {
                     </div>
                     <div style={{ flex: 1 }}>
                         <i>If elektrad is running on the same machine, host is: </i>
-                        <code>http://127.0.0.1:33333</code>
+                        <code>http://localhost:33333</code>
                     </div>
                 </div>
                 <div style={{ display: 'flex', marginTop: 16 }}>
@@ -155,13 +155,13 @@ export default class CreateInstanceCard extends React.Component {
                   <FlatButton
                     label="add"
                     primary={true}
-                    onTouchTap={this.handleCreate}
+                    onClick={this.handleCreate}
                     disabled={nameEmpty || hostEmpty || hostError}
                   />
                   {!noInstancesYet &&
                     <FlatButton
                       label="cancel"
-                      onTouchTap={() => {
+                      onClick={() => {
                         unaddInstance()
                         this.resetValues()
                       }}

src/tools/web/client/src/components/ErrorSnackbar.jsx

@@ -51,10 +51,14 @@ export default class ErrorSnackbar extends React.Component {
     }
 
     const actions = [
+      <FlatButton
+        label="report issue"
+        onClick={() => window.open('http://issues.libelektra.org/new', '_blank')}
+      />,
       <FlatButton
         label="dismiss"
         primary={true}
-        onTouchTap={this.handleClose}
+        onClick={this.handleClose}
       />,
     ]
 
@@ -65,6 +69,7 @@ export default class ErrorSnackbar extends React.Component {
         onRequestClose={() => {/* do nothing */}}
         action={action}
         onActionClick={onClick}
+        className="errorSnackbar"
       />,
       <Dialog
         actions={actions}

src/tools/web/client/src/components/InstanceCard.jsx

@@ -143,7 +143,7 @@ export default class InstanceCard extends React.Component {
                     </div>
                     <div style={{ flex: 1 }}>
                         <i>If elektrad is running on the same machine, host is: </i>
-                        <code>http://127.0.0.1:33333</code>
+                        <code>http://localhost:33333</code>
                     </div>
                 </div>
                 <div style={{ display: 'flex', marginTop: 16 }}>
@@ -181,7 +181,7 @@ export default class InstanceCard extends React.Component {
                   <FlatButton
                     label="save"
                     primary={true}
-                    onTouchTap={this.handleCreate}
+                    onClick={this.handleCreate}
                     disabled={!!(id === 'my' || nameEmpty || hostEmpty || hostError)}
                   />
                   <Link tabIndex="-1" to={'/instances/' + id}>
@@ -190,7 +190,7 @@ export default class InstanceCard extends React.Component {
                   <FlatButton
                     label="delete"
                     secondary={true}
-                    onTouchTap={this.handleDelete}
+                    onClick={this.handleDelete}
                     disabled={id === 'my'}
                   />
                 </div>