Repository: cpsubrian/redis-explorer
Branch: master
Commit: fc8e9d10848e
Files: 66
Total size: 138.7 KB
Directory structure:
gitextract_o7xj8uxf/
├── .gitignore
├── Gruntfile.js
├── LICENSE
├── Makefile
├── README.md
├── fonts/
│ ├── .gitkeep
│ ├── MaterialIcons/
│ │ └── MaterialIcons.css
│ └── Roboto/
│ ├── LICENSE.txt
│ └── Roboto.css
├── images/
│ └── .gitkeep
├── index.html
├── package.json
├── resources/
│ ├── .gitkeep
│ ├── redisexplorer.icns
│ └── redisexplorer.psd
├── src/
│ ├── actions/
│ │ ├── browseActions.js
│ │ └── hostsActions.js
│ ├── alt.js
│ ├── app.js
│ ├── browser.js
│ ├── components/
│ │ ├── Header.js
│ │ ├── Highlight.js
│ │ ├── HostInfo.js
│ │ ├── HostsNav.js
│ │ ├── Icon.js
│ │ ├── KeyDetails.js
│ │ ├── LoadingRow.js
│ │ ├── ScrollList.js
│ │ ├── SidePanel.js
│ │ ├── TypeIcon.js
│ │ ├── ValuesRow.js
│ │ ├── ValuesTable.js
│ │ ├── details/
│ │ │ ├── Details.js
│ │ │ ├── HashDetails.js
│ │ │ ├── ListDetails.js
│ │ │ ├── SetDetails.js
│ │ │ ├── SortedSetDetails.js
│ │ │ └── StringDetails.js
│ │ └── handlers/
│ │ ├── BrowseHandler.js
│ │ ├── InfoHandler.js
│ │ ├── MainHandler.js
│ │ └── NotFoundHandler.js
│ ├── conf.js
│ ├── main.js
│ ├── router.js
│ ├── stores/
│ │ ├── browseStore.js
│ │ └── hostsStore.js
│ └── utils/
│ ├── db.js
│ ├── keys.js
│ ├── perf.js
│ ├── regex.js
│ ├── settings.js
│ ├── spawn.js
│ └── throttle.js
└── styles/
├── .gitkeep
├── components/
│ ├── header.less
│ ├── key-details.less
│ └── values-table.less
├── handlers/
│ ├── browse.less
│ ├── info.less
│ └── main.less
├── index.less
└── utils/
├── highlight.less
├── material-colors.less
├── mixins.less
└── variables.less
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
.DS_Store
.swp
build
dist
installer
node_modules
coverage
npm-debug.log
================================================
FILE: Gruntfile.js
================================================
var electron = require('electron-prebuilt')
var packagejson = require('./package.json')
var conf = require('./src/conf.js')
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt)
var BASENAME = conf['BASENAME']
var APPNAME = BASENAME
var DEVELPER_ID = conf['DEVELPER_ID']
var COMPANY = conf['COMPANY']
var ICON = conf['ICON']
var ICON_URL = conf['ICON_URL']
var BUNDLE_ID = conf['BUNDLE_ID']
var OSX_OUT = conf['OSX_OUT']
var OSX_FILENAME = conf['OSX_FILENAME']
var ELECTRON_VERSION = require('./node_modules/electron-prebuilt/package.json').version
var target = grunt.option('target') || 'development'
var env = process.env
var certificateFile = grunt.option('certificateFile')
var certificatePassword = grunt.option('certificatePassword')
env.NODE_PATH = '..:' + env.NODE_PATH
env.NODE_ENV = target
grunt.initConfig({
IDENTITY: 'Developer ID Application: ' + DEVELPER_ID,
APPNAME: APPNAME,
OSX_OUT: OSX_OUT,
OSX_FILENAME: OSX_FILENAME,
OSX_FILENAME_ESCAPED: OSX_FILENAME.replace(' ', '\\ ').replace('(', '\\(').replace(')', '\\)'),
// Electron
electron: {
windows: {
options: {
name: BASENAME,
dir: 'build',
out: 'dist',
version: ELECTRON_VERSION,
platform: 'win32',
arch: 'x64',
asar: true,
icon: ICON + '.ico'
}
},
osx: {
options: {
name: APPNAME,
dir: 'build',
out: 'dist',
version: ELECTRON_VERSION,
platform: 'darwin',
arch: 'x64',
asar: true,
'app-bundle-id': BUNDLE_ID
}
}
},
// Edits .exe files.
rcedit: {
exes: {
files: [{
expand: true,
cwd: 'dist/' + BASENAME + '-win32',
src: [BASENAME + '.exe']
}],
options: {
icon: ICON + '.ico',
'file-version': packagejson.version,
'product-version': packagejson.version,
'version-string': {
'CompanyName': COMPANY,
'ProductVersion': packagejson.version,
'ProductName': APPNAME,
'FileDescription': APPNAME,
'InternalName': BASENAME + '.exe',
'OriginalFilename': BASENAME + '.exe',
'LegalCopyright': 'Copyright 2015 ' + COMPANY + ' All rights reserved.'
}
}
}
},
// Windows installer options.
'create-windows-installer': {
appDirectory: 'dist/' + BASENAME + '-win32/',
authors: COMPANY,
// loadingGif: 'resources/loading.gif',
// setupIcon: 'resources/setup.ico',
iconUrl: ICON_URL,
description: APPNAME,
title: APPNAME,
exe: BASENAME + '.exe',
version: packagejson.version,
signWithParams: '/f ' + certificateFile + ' /p ' + certificatePassword + ' /tr http://timestamp.comodoca.com/rfc3161'
},
// Copy files.
copy: {
dev: {
files: [{
expand: true,
cwd: '.',
src: ['package.json', 'conf.json', 'index.html'],
dest: 'build/'
}, {
expand: true,
cwd: 'images/',
src: ['**/*'],
dest: 'build/images/'
}, {
expand: true,
cwd: 'fonts/',
src: ['**/*'],
dest: 'build/fonts/'
}, {
expand: true,
cwd: 'node_modules/material-design-icons/iconfont/',
src: ['MaterialIcons-Regular.woff2'],
dest: 'build/fonts/MaterialIcons/'
}, {
expand: true,
cwd: 'node_modules/',
src: Object.keys(packagejson.dependencies).map(function (dep) { return dep + '/**/*' }),
dest: 'build/node_modules/'
}, {
src: ICON + '.png',
dest: 'build/images/logo.png'
}]
},
windows: {
files: [{
expand: true,
cwd: 'resources',
src: [],
dest: 'dist/' + BASENAME + '-win32/resources/resources/'
}],
options: {
mode: true
}
},
osx: {
files: [{
expand: true,
cwd: 'resources',
src: [],
dest: '<%= OSX_FILENAME %>/Contents/Resources/resources/'
}, {
src: ICON + '.icns',
dest: '<%= OSX_FILENAME %>/Contents/Resources/atom.icns'
}],
options: {
mode: true
}
}
},
// Javascript (Babel)
babel: {
options: {
stage: 0,
sourceMap: 'inline',
blacklist: 'regenerator'
},
dist: {
files: [{
expand: true,
cwd: 'src/',
src: ['**/*.js'],
dest: 'build/'
}]
}
},
// Styles (LESS)
less: {
options: {
sourceMapFileInline: true
},
dist: {
files: {
'build/main.css': 'styles/index.less'
}
}
},
// Rename files.
rename: {
installer: {
src: 'installer/Setup.exe',
dest: 'installer/' + BASENAME + 'Setup-' + packagejson.version + '.exe'
}
},
// Shell options.
shell: {
electron: {
command: electron + ' build',
options: {
async: true,
execOptions: {
env: env
}
}
},
sign: {
options: {
failOnError: false
},
command: [
'codesign --deep -v -f -s "<%= IDENTITY %>" <%= OSX_FILENAME_ESCAPED %>/Contents/Frameworks/*',
'codesign -v -f -s "<%= IDENTITY %>" <%= OSX_FILENAME_ESCAPED %>',
'codesign -vvv --display <%= OSX_FILENAME_ESCAPED %>',
'codesign -v --verify <%= OSX_FILENAME_ESCAPED %>'
].join(' && ')
},
zip: {
command: 'ditto -c -k --sequesterRsrc --keepParent <%= OSX_FILENAME_ESCAPED %> <%= OSX_OUT %>/' + BASENAME + '-' + packagejson.version + '.zip'
}
},
// Clean options
clean: {
release: ['build/', 'dist/', 'installer/']
},
// Live Reload
watchChokidar: {
options: {
spawn: true
},
livereload: {
options: {livereload: true},
files: ['build/**/*']
},
js: {
files: ['src/**/*.js'],
tasks: ['newer:babel']
},
less: {
files: ['styles/**/*.less'],
tasks: ['less']
},
copy: {
files: ['images/*', 'index.html', 'fonts/*'],
tasks: ['newer:copy:dev']
}
}
})
// Define default (development) task.
grunt.registerTask('default', ['newer:babel', 'less', 'newer:copy:dev', 'shell:electron', 'watchChokidar'])
// Define platform-specific release task.
if (process.platform === 'win32') {
grunt.registerTask('release', ['clean:release', 'babel', 'less', 'copy:dev', 'electron:windows', 'copy:windows', 'rcedit:exes', 'create-windows-installer', 'rename:installer'])
} else {
grunt.registerTask('release', ['clean:release', 'babel', 'less', 'copy:dev', 'electron:osx', 'copy:osx', 'shell:sign', 'shell:zip'])
}
// Bail-out on electron command if this dies.
process.on('SIGINT', function () {
grunt.task.run(['shell:electron:kill'])
process.exit(1)
})
}
================================================
FILE: LICENSE
================================================
Copyright 2015 Terra Eclipse, Inc.
http://www.terraeclipse.com/
Copyright 2015 Brian Link
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-------------------------------------------------------------------------
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
================================================
FILE: Makefile
================================================
all: install dev
install:
@echo ""
@test -d ./node_modules || npm install
dev:
@echo ""
@./node_modules/.bin/standard ./src/**/*.js
@./node_modules/.bin/grunt
release: install
@echo ""
@./node_modules/.bin/grunt release --target="production"
run:
@echo ""
@open ./dist/RedisExplorer-darwin-x64/RedisExplorer.app
copy:
@echo ""
@rm -Rf /Applications/RedisExplorer.app
@cp -R ./dist/RedisExplorer-darwin-x64/RedisExplorer.app /Applications/
.PHONY: install
.PHONY: dev
.PHONY: release
.PHONY: run
.PHONY: copy
================================================
FILE: README.md
================================================
RedisExplorer
==============
An [electron](http://electron.atom.io/)-powered GUI for [redis](http://redis.io/).
Installation
------------
Currently, I'm only building for Mac OSX, but that may change as the feature-set
becomes more stable.
You'll find all the latest releases [here](https://github.com/cpsubrian/redis-explorer/releases).
Connecting to Remote Hosts
--------------------------
The app currently **only** supports connecting to remote hosts via an ssh tunnel
via your local `ssh-agent` and **no password**. Right now only redis servers
running on the default port can be connected to, but many more configuration
options are on the roadmap.
Available hosts will be parsed from your `~/.ssh/config`, which should contain
entries like:
```
Host myhost
Hostname [ip address]
User [username]
Host anotherhost
Hostname [ip address]
Port [port]
User [username]
```
Development
-----------
I would love to add **your** name as a collaborator here :) Please discuss bugs
or new features here on the issues queue before spending time on them, because
I'm working through an internal list of TODOs at the moment and want to avoid
stepping on toes. Once I get the main feature list implemented, I'll maintain
a roadmap and wishlist here in the README so others can contribute more easily.
Roadmap
-------
- Read All Key Types
- [x] String
- [x] List
- [ ] Change from `LRANGE -inf +inf` to an iterator, to handle really
large lists better.
- [x] Set
- [ ] Change from `SMEMBERS` to `SSCAN`, to handle large sets better.
- [x] Sorted Set
- [ ] Change from `ZRANGEBYSCORE` to `ZSCAN` or and interator-style range, to handle large sets better.
- [ ] Hash
- Keyspace 'overview'
- [ ] Implement a collapsable tree-structure for browsing the keyspace
- Configurable delimeter per hosts
- Manage Remote Hosts
- [ ] CRUD Hosts
- [ ] Import from ~/.ssh/config ?
- [ ] Support other auth schemes
- [x] ssh-agent tunnel
- others?
- Console/REPL
- [ ] Add a 'console' tab that replecates the functionality of the redis-client REPL
- Delete Data
- [ ] Delete keys
- [ ] Delete from lists
- [ ] Delete form sets/sorted-sets
- [ ] Delete hash keys
- [ ] Bulk Delete all of the above
- Edit Data
- [ ] Edit string keys
- [ ] Edit lists, Add items
- [ ] Edit sets, Add items
- [ ] Edit hashes
### How to Build
For development, you'll just need to clone this repo and run `make`.
If you want to build a release, you'll probably need to go edit the config
and include your Apple developer ID, which will need to have been set up
via XCode. How to do that is beyond the scope of this project.
- - -
#### Developed by [TerraEclipse](https://github.com/TerraEclipse)
Terra Eclipse, Inc. is a nationally recognized political technology and
strategy firm located in Santa Cruz, CA and Washington, D.C.
================================================
FILE: fonts/.gitkeep
================================================
================================================
FILE: fonts/MaterialIcons/MaterialIcons.css
================================================
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(MaterialIcons-Regular.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
================================================
FILE: fonts/Roboto/LICENSE.txt
================================================
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
================================================
FILE: fonts/Roboto/Roboto.css
================================================
@font-face {
font-family: 'Roboto';
src: url('Roboto-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-Thin.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-ThinItalic.ttf') format('truetype');
font-weight: 200;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-Light.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-LightItalic.ttf') format('truetype');
font-weight: 100;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-Medium.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-MediumItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
================================================
FILE: images/.gitkeep
================================================
================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html>
<head>
<title>RedisExplorer</title>
<link rel="stylesheet" href="main.css"/>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
================================================
FILE: package.json
================================================
{
"name": "redis-explorer",
"version": "0.0.6",
"description": "A GUI for Redis",
"main": "browser.js",
"repository": {
"type": "git",
"url": "git://github.com/cpsubrian/redis-explorer.git"
},
"homepage": "https://github.com/cpsubrian/redis-explorer",
"keywords": [
"redis"
],
"author": "Brian Link <cpsubrian@gmail.com>",
"licenses": [
{
"type": "Apache-2.0",
"url": "http://www.apache.org/licenses/LICENSE-2.0.html"
}
],
"bugs": {
"url": "https://github.com/cpsubrian/redis-explorer/issues"
},
"scripts": {
"test": "echo 'No Tests'"
},
"standard": {
"parser": "babel-eslint"
},
"dependencies": {
"alt": "^0.17.1",
"autobind-decorator": "^1.2.0",
"babel": "^5.6.7",
"highlight.js": "^8.6.0",
"immutable": "^3.7.4",
"material-ui": "^0.9.1",
"mkdirp": "^0.5.1",
"pure-render-decorator": "^0.1.0",
"react": "^0.13.3",
"react-hotkeys": "^0.3.3",
"react-immutable-proptypes": "^1.0.0",
"react-router": "^0.13.3",
"react-tap-event-plugin": "^0.1.7",
"redis": "^0.12.1",
"redis-info": "^3.0.6",
"ssh-config": "^0.1.0",
"tunnel-ssh": "^1.0.2",
"underscore": "^1.8.3"
},
"devDependencies": {
"babel": "^5.5.8",
"babel-eslint": "^3.1.19",
"electron-prebuilt": "^0.29.2",
"grunt": "^0.4.5",
"grunt-babel": "^5.0.1",
"grunt-chmod": "^1.0.3",
"grunt-cli": "^0.1.13",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-copy": "^0.8.0",
"grunt-contrib-less": "^1.0.1",
"grunt-contrib-watch-chokidar": "^1.0.0",
"grunt-download-electron": "^2.1.1",
"grunt-electron": "^2.0.0",
"grunt-electron-installer": "^0.33.0",
"grunt-if-missing": "^1.0.0",
"grunt-newer": "^1.1.1",
"grunt-rcedit": "^0.3.1",
"grunt-rename": "^0.1.4",
"grunt-shell-spawn": "^0.3.8",
"load-grunt-tasks": "^3.2.0",
"material-design-icons": "^2.0.0",
"shell-escape": "^0.2.0",
"source-map-support": "^0.3.1",
"standard": "^4.3.3"
}
}
================================================
FILE: resources/.gitkeep
================================================
================================================
FILE: src/actions/browseActions.js
================================================
import alt from '../alt'
import db from '../utils/db'
// 'Global' scan object.
let _scan
// Browse Actions.
class BrowseActions {
/* General
****************************************************************************/
resetKeys () {
this.dispatch()
}
setOffset (offset) {
this.dispatch(offset)
}
setMatch (match) {
this.dispatch(match)
}
toggleSelectedKey (key) {
this.dispatch(key)
}
toggleSelectedIndex (index) {
this.dispatch(index)
}
// `item` should be {key, index}
toggleSelected (item) {
this.dispatch(item)
}
/* Fetch Keys Lifecycle
****************************************************************************/
fetchKeys (options = {}) {
this.dispatch()
// Stop an active scan.
if (_scan) _scan.stop()
// Create the scan.
options.match = options.match ? options.match + '*' : null
options.loadTypes = true
_scan = db.scan(options)
// Start the scan.
this.actions.fetchKeysNext()
}
fetchKeysNext () {
this.dispatch()
_scan.next((err, keys) => {
if (err) {
this.actions.fetchKeysFailed(err)
} else if (keys) {
this.actions.fetchKeysAdd(keys)
} else {
this.actions.fetchKeysFinished()
}
})
}
fetchKeysAdd (keys) {
this.dispatch(keys)
this.actions.fetchValues(keys)
}
fetchKeysFailed (err) {
this.dispatch(err)
}
fetchKeysFinished () {
this.dispatch()
}
/* Fetch Values Lifecycle
****************************************************************************/
fetchValues (keys) {
this.dispatch(keys)
// Start loading the values.
db.fetchValues(keys, (err, values) => {
if (err) {
this.actions.fetchValuesFailed(err)
} else {
this.actions.fetchValuesAdd(values)
}
})
}
fetchValuesAdd (values) {
this.dispatch(values)
}
fetchValuesFailed (err) {
this.dispatch(err)
}
}
export default alt.createActions(BrowseActions)
================================================
FILE: src/actions/hostsActions.js
================================================
import alt from '../alt'
import db from '../utils/db'
class HostsActions {
/* Connection Lifecycle
****************************************************************************/
connectToHost (host) {
this.dispatch(host)
db.connect(host.toJS(), (err) => {
if (err) {
this.actions.connectToHostFailed(err)
} else {
this.actions.connectedToHost()
}
})
}
connectToHostFailed (err) {
this.dispatch(err)
}
connectedToHost () {
this.dispatch()
}
/* Fetch Info Lifecycle
****************************************************************************/
fetchHostInfo (isRefresh) {
this.dispatch(isRefresh)
db.fetchInfo((err, info) => {
if (err) {
this.actions.fetchHostInfoFailed(err)
} else {
this.actions.fetchHostInfoFinished(info)
}
})
}
fetchHostInfoFinished (info) {
this.dispatch(info)
}
fetchHostInfoFailed (err) {
this.dispatch(err)
}
}
export default alt.createActions(HostsActions)
================================================
FILE: src/alt.js
================================================
import Alt from 'alt'
// Create alt instance.
const alt = new Alt()
// Debug dispatcher.
if (process.env.NODE_ENV === 'development') {
alt.dispatcher.register((dispatch) => {
console.log(dispatch.action, dispatch.data)
})
}
export default alt
================================================
FILE: src/app.js
================================================
import remote from 'remote'
import React from 'react'
import router from './router'
import injectTapEventPlugin from 'react-tap-event-plugin'
// Constants
const app = remote.require('app')
const Menu = remote.require('menu')
const shell = remote.require('shell')
const BrowserWindow = remote.require('browser-window')
const CMDORCTRL = (process.platform === 'win32') ? 'Ctrl' : 'Command'
// Needed for onTouchTap
// Can go away when react 1.0 release
// Check this repo:
// https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin()
// Run the router.
router.run((Handler) => {
React.render(<Handler/>, document.body)
})
// Application Menu
Menu.setApplicationMenu(Menu.buildFromTemplate([
{
label: 'RedisExplorer',
submenu: [
{
label: 'About RedisExplorer',
selector: 'orderFrontStandardAboutPanel:'
},
{
type: 'separator'
}, {
label: 'Hide RedisExplorer',
accelerator: CMDORCTRL + '+H',
selector: 'hide:'
},
{
label: 'Hide Others',
accelerator: CMDORCTRL + '+Shift+H',
selector: 'hideOtherApplications:'
},
{
label: 'Show All',
selector: 'unhideAllApplications:'
},
{
type: 'separator'
},
{
label: 'Quit',
accelerator: CMDORCTRL + '+Q',
click: () => app.quit()
}
]
},
{
label: 'Edit',
submenu: [
{
label: 'Undo',
accelerator: CMDORCTRL + '+Z',
selector: 'undo:'
},
{
label: 'Redo',
accelerator: 'Shift+' + CMDORCTRL + '+Z',
selector: 'redo:'
},
{
type: 'separator'
},
{
label: 'Cut',
accelerator: CMDORCTRL + '+X',
selector: 'cut:'
},
{
label: 'Copy',
accelerator: CMDORCTRL + '+C',
selector: 'copy:'
},
{
label: 'Paste',
accelerator: CMDORCTRL + '+V',
selector: 'paste:'
},
{
label: 'Select All',
accelerator: CMDORCTRL + '+A',
selector: 'selectAll:'
}
]
},
{
label: 'View',
submenu: [
{
label: 'Reload',
accelerator: CMDORCTRL + '+R',
click: () => {
var focusedWindow = BrowserWindow.getFocusedWindow()
if (focusedWindow) {
focusedWindow.reload()
}
}
},
{
label: 'Toggle Full Screen',
accelerator: 'Ctrl+Command+F',
click: () => {
var focusedWindow = BrowserWindow.getFocusedWindow()
if (focusedWindow) {
focusedWindow.setFullScreen(!focusedWindow.isFullScreen())
}
}
},
{
label: 'Toggle DevTools',
accelerator: 'Alt+' + CMDORCTRL + '+I',
click: () => remote.getCurrentWindow().toggleDevTools()
}
]
},
{
label: 'Window',
submenu: [
{
label: 'Minimize',
accelerator: CMDORCTRL + '+M',
selector: 'performMiniaturize:'
},
{
label: 'Close',
accelerator: CMDORCTRL + '+W',
click: () => remote.getCurrentWindow().hide()
},
{
type: 'separator'
},
{
label: 'Bring All to Front',
selector: 'arrangeInFront:'
}
]
},
{
label: 'Help',
submenu: [
{
label: 'Report Issue or Suggest Feedback',
click: () => shell.openExternal('https://github.com/cpsubrian/redis-explorer/issues/new')
}
]
}
]))
================================================
FILE: src/browser.js
================================================
import app from 'app'
import conf from './conf'
import settings from './utils/settings'
import BrowserWindow from 'browser-window'
// Report crashes to our server.
// require('crash-reporter').start()
// Keep a reference of the window object, if you don't, the window will
// be closed automatically when the javascript object is GCed.
let mainWindow = null
// Quit when all windows are closed.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
// Get save bounds or use fallback defaults.
let bounds = settings.get('bounds', {
x: 50,
y: 50,
width: 1100,
height: 800
})
// This method will be called when Electron has done everything
// initialization and ready for creating browser windows.
app.on('ready', () => {
// Create the browser window.
mainWindow = new BrowserWindow({
'x': bounds.x,
'y': bounds.y,
'width': bounds.width,
'height': bounds.height,
'min-width': 400,
'min-height': 260,
'standard-window': false,
'resizable': true,
'show': false
})
// Open dev tools. Probably should remove this when this is more production ready.
if (process.env.NODE_ENV === 'development') {
mainWindow.openDevTools()
}
// Load the index.html of the app.
mainWindow.loadUrl('file://' + __dirname + '/index.html')
// Show window after the url is loaded.
mainWindow.webContents.on('did-finish-load', () => {
mainWindow.setTitle(conf['BASENAME'])
mainWindow.show()
mainWindow.focus()
})
// Don't allow navigation to weird endpoints.
mainWindow.webContents.on('will-navigate', (e, url) => {
if (url.indexOf('build/index.html#') < 0) {
e.preventDefault()
}
})
// Save size and position of window.
mainWindow.on('resize', () => {
settings.set('bounds', mainWindow.getBounds())
})
mainWindow.on('move', () => {
settings.set('bounds', mainWindow.getBounds())
})
// Handle window close depending on platform.
app.on('window-all-closed', () => {
app.quit()
})
})
================================================
FILE: src/components/Header.js
================================================
import React from 'react'
import ImmutablePropTypes from 'react-immutable-proptypes'
import autobind from 'autobind-decorator'
import {Link} from 'react-router'
import Icon from '../components/Icon'
import {Toolbar, ToolbarGroup} from 'material-ui'
import HostsNav from '../components/HostsNav'
// @todo add pureRender after I figure out how to account for Router state
// for <Link> changes.
@autobind
class Header extends React.Component {
static propTypes = {
hosts: ImmutablePropTypes.list,
activeHost: ImmutablePropTypes.map,
connecting: React.PropTypes.bool,
connected: React.PropTypes.bool
}
onClickHostButton (e) {
e.preventDefault()
this.refs.hostsNav.toggle()
}
getHostButtonClass () {
if (this.props.connecting) {
return 'connecting'
} else if (this.props.connected) {
return 'connected'
} else {
return 'disconnected'
}
}
render () {
return (
<div className='header'>
<Toolbar className='toolbar'>
<ToolbarGroup key={0} float='left'>
<Link to='/' className='button'>
<Icon type='search'/> Browse
</Link>
<Link to='/info' className='button'>
<Icon type='info'/> Info
</Link>
</ToolbarGroup>
<ToolbarGroup key={1} float='right' className='no-drag'>
{this.props.activeHost ?
<Link to='/hosts' className={'button host-button ' + this.getHostButtonClass()} onClick={this.onClickHostButton}>
{this.props.activeHost.get('Host')} <Icon type='public'/>
</Link>
:/*else*/
<span>Not Connected</span>
}
<HostsNav ref='hostsNav' {...this.props}/>
</ToolbarGroup>
</Toolbar>
</div>
)
}
}
export default Header
================================================
FILE: src/components/Highlight.js
================================================
import React from 'react'
import autobind from 'autobind-decorator'
import hljs from 'highlight.js'
@autobind
class Highlight extends React.Component {
static propTypes = {
className: React.PropTypes.string,
innerHTML: React.PropTypes.bool,
children: React.PropTypes.node
}
static defaultProps = {
innerHTML: false,
className: ''
}
componentDidMount () {
this.highlightCode()
}
componentDidUpdate () {
this.highlightCode()
}
highlightCode () {
let nodes = React.findDOMNode(this).querySelectorAll('pre code')
if (nodes.length > 0) {
for (let i = 0; i < nodes.length; i = i + 1) {
hljs.highlightBlock(nodes[i])
}
}
}
render () {
if (this.props.innerHTML) {
return <div dangerouslySetInnerHTML={{__html: this.props.children}} className={this.props.className || null}></div>
} else {
return <pre><code className={this.props.className}>{this.props.children}</code></pre>
}
}
}
export default Highlight
================================================
FILE: src/components/HostInfo.js
================================================
import React from 'react'
import pureRender from 'pure-render-decorator'
import ImmutablePropTypes from 'react-immutable-proptypes'
import {Paper} from 'material-ui'
@pureRender
class HostInfo extends React.Component {
static propTypes = {
hostInfo: ImmutablePropTypes.map
}
static infoGroups = [
{
title: 'Server',
props: [
'redis_version',
'redis_git_sha1',
'redis_git_dirty',
'redis_build_id',
'redis_mode',
'os',
'arch_bits',
'multiplexing_api',
'gcc_version',
'process_id',
// 'run_id',
'tcp_port',
'uptime_in_seconds',
'uptime_in_days',
'hz',
'lru_clock',
'config_file'
]
}, {
title: 'Clients',
props: [
'connected_clients',
'client_longest_output_list',
'client_biggest_input_buf',
'blocked_clients'
]
}, {
title: 'Memory',
props: [
'used_memory',
'used_memory_human',
'used_memory_rss',
'used_memory_peak',
'used_memory_peak_human',
'used_memory_lua',
'mem_fragmentation_ratio',
'mem_allocator'
]
}, {
title: 'Persistence',
props: [
'loading',
'rdb_changes_since_last_save',
'rdb_bgsave_in_progress',
'rdb_last_save_time',
'rdb_last_bgsave_status',
'rdb_last_bgsave_time_sec',
'rdb_current_bgsave_time_sec',
'aof_enabled',
'aof_rewrite_in_progress',
'aof_rewrite_scheduled',
'aof_last_rewrite_time_sec',
'aof_current_rewrite_time_sec',
'aof_last_bgrewrite_status',
'aof_last_write_status'
]
}, {
title: 'Stats',
props: [
'total_connections_received',
'total_commands_processed',
'instantaneous_ops_per_sec',
'total_net_input_bytes',
'total_net_output_bytes',
'instantaneous_input_kbps',
'instantaneous_output_kbps',
'rejected_connections',
'sync_full',
'sync_partial_ok',
'sync_partial_err',
'expired_keys',
'evicted_keys',
'keyspace_hits',
'keyspace_misses',
'pubsub_channels',
'pubsub_patterns',
'latest_fork_usec'
]
}, {
title: 'Replication',
props: [
'role',
'connected_slaves',
'master_repl_offset',
'repl_backlog_active',
'repl_backlog_size',
'repl_backlog_first_byte_offset',
'repl_backlog_histlen:0'
]
}, {
title: 'CPU',
props: [
'used_cpu_sys',
'used_cpu_user',
'used_cpu_sys_children',
'used_cpu_user_children'
]
}, {
title: 'Keyspace',
getInfo () {
let databases = this.props.hostInfo.get('databases')
if (databases) {
let dbs = []
let rows = []
for (let i = 0; i <= 16; i++) {
if (databases[i]) {
databases[i].num = i
dbs.push(databases[i])
}
}
dbs.forEach((db) => {
rows.push(
<tr key={'db-' + db.num + '-label'}>
<td className='prop' colSpan='2'>
<strong>db{db.num}</strong>
</td>
</tr>
)
rows.push(
<tr key={'db-' + db.num + '-keys'}>
<td className='prop'>keys</td>
<td className='value'>{db.keys}</td>
</tr>
)
rows.push(
<tr key={'db-' + db.num + '-expires'}>
<td className='prop'>expires</td>
<td className='value'>{db.expires}</td>
</tr>
)
})
return (
<table>
{rows}
</table>
)
} else {
return null
}
}
}
]
renderGroup (group) {
return (
<Paper key={'group-' + group.title} className='host-info-group'>
<h3>{group.title}</h3>
{group.getInfo ?
group.getInfo.call(this)
:/*else*/
<table>
{group.props.map((prop) => {
return (
<tr key={'prop-' + prop}>
<td className='prop'>{prop}</td>
<td className='value'>{this.props.hostInfo.get(prop)}</td>
</tr>
)
})}
</table>
}
</Paper>
)
}
render () {
return (
<div className='host-info'>
{HostInfo.infoGroups.map((group) => {
return this.renderGroup(group)
})}
</div>
)
}
}
export default HostInfo
================================================
FILE: src/components/HostsNav.js
================================================
import React from 'react'
import autobind from 'autobind-decorator'
import ImmutablePropTypes from 'react-immutable-proptypes'
import hostsActions from '../actions/hostsActions'
import browseActions from '../actions/browseActions'
import Icon from '../components/Icon'
import {LeftNav, MenuItem} from 'material-ui'
@autobind
class HostsNav extends React.Component {
static propTypes = {
hosts: ImmutablePropTypes.list,
activeHost: ImmutablePropTypes.map
}
shouldComponentUpdate (nextProps, nextState) {
return !(
nextProps.hosts === this.props.hosts &&
nextProps.activeHost.get('Host') === this.props.activeHost.get('Host')
)
}
toggle () {
this.refs.nav.toggle()
}
onChangeHost (e, i, menuItem) {
if (menuItem.host.get('Host') !== this.props.activeHost.get('Host')) {
browseActions.resetKeys()
hostsActions.connectToHost(menuItem.host)
}
}
render () {
let selectedIndex
let menuItems
menuItems = this.props.hosts.map((host, i) => {
if (this.props.activeHost === host) {
selectedIndex = i
}
return {
host: host,
text: <span className='host-option'><Icon type='public'/> {host.get('Host')}</span>
}
}).toArray()
// Splice in subheaders.
menuItems.splice(0, 0, {type: MenuItem.Types.SUBHEADER, text: 'Local' })
menuItems.splice(2, 0, {type: MenuItem.Types.SUBHEADER, text: 'Remote' })
// Adjust selected index.
if (selectedIndex === 0) {
selectedIndex = 1
} else {
selectedIndex += 2
}
return (
<LeftNav ref='nav'
docked={false}
openRight={true}
onChange={this.onChangeHost}
selectedIndex={selectedIndex}
menuItems={menuItems} />
)
}
}
export default HostsNav
================================================
FILE: src/components/Icon.js
================================================
import React from 'react'
class Icon extends React.Component {
static propTypes = {
type: React.PropTypes.string.isRequired,
style: React.PropTypes.object,
title: React.PropTypes.string,
className: React.PropTypes.string
}
static defaultProps = {
style: {}
}
render () {
return (
<i className={'icon material-icons ' + (this.props.className || '')}
style={this.props.style}
title={this.props.title}
>{this.props.type}</i>
)
}
}
export default Icon
================================================
FILE: src/components/KeyDetails.js
================================================
import React from 'react'
import pureRender from 'pure-render-decorator'
import ImmutablePropTypes from 'react-immutable-proptypes'
import HashDetails from '../components/details/HashDetails'
import ListDetails from '../components/details/ListDetails'
import SetDetails from '../components/details/SetDetails'
import SortedSetDetails from '../components/details/SortedSetDetails'
import StringDetails from '../components/details/StringDetails'
@pureRender
class KeyDetails extends React.Component {
static propTypes = {
item: ImmutablePropTypes.map
}
render () {
switch (this.props.item.get('type')) {
case 'string':
return <StringDetails {...this.props}/>
case 'list':
return <ListDetails {...this.props}/>
case 'set':
return <SetDetails {...this.props}/>
case 'zset':
return <SortedSetDetails {...this.props}/>
case 'hash':
return <HashDetails {...this.props}/>
}
}
}
export default KeyDetails
================================================
FILE: src/components/LoadingRow.js
================================================
import React from 'react'
class LoadingRow extends React.Component {
static propTypes = {
cols: React.PropTypes.number
}
static defaultProps = {
cols: 1
}
render () {
return (
<tr className='loading-row'>
<td colSpan={this.props.cols}>
Loading…
</td>
</tr>
)
}
}
export default LoadingRow
================================================
FILE: src/components/ScrollList.js
================================================
import React from 'react'
import pureRender from 'pure-render-decorator'
import autobind from 'autobind-decorator'
import ImmutablePropTypes from 'react-immutable-proptypes'
@pureRender
@autobind
class ScrollList extends React.Component {
static propTypes = {
items: ImmutablePropTypes.iterable,
itemHeight: React.PropTypes.number.isRequired,
renderRoot: React.PropTypes.func,
renderItem: React.PropTypes.func,
renderPlaceholder: React.PropTypes.func,
offset: React.PropTypes.number
}
static defaultProps = {
offset: 0,
limit: 60,
renderRoot: (props, children) => {
return (
<ul {...props}>
{children}
</ul>
)
},
renderItem: (props, item) => {
return (
<li {...props}>
{item}
</li>
)
},
renderPlaceholder: (props) => {
return <li {...props}></li>
}
}
state = {
offset: this.props.offset
}
componentDidMount () {
React.findDOMNode(this).scrollTop = this.state.offset * this.props.itemHeight
}
onScroll (e) {
let top = e.currentTarget.scrollTop
let count = Math.floor(top / this.props.itemHeight)
let newOffset
if (count !== this.state.offset) {
newOffset = count
this.setState({offset: newOffset})
}
if (this.props.scrollHandler) {
this.props.scrollHandler(e, newOffset)
}
}
getDisplayOffset () {
let offset = this.state.offset - Math.floor(this.props.limit / 3)
return (offset >= 0) ? offset : 0
}
ensureVisible (index) {
let container = React.findDOMNode(this)
let itemTop = index * this.props.itemHeight
let top = container.scrollTop
let height = container.offsetHeight
let count = Math.floor(height / this.props.itemHeight)
if (itemTop < top) {
container.scrollTop = (index - count + 2) * this.props.itemHeight
}
if ((itemTop + this.props.itemHeight) > (top + height - this.props.itemHeight)) {
container.scrollTop = index * this.props.itemHeight
}
}
renderItems () {
let offset = this.getDisplayOffset()
let slice = this.props.items.slice(offset, offset + this.props.limit)
let results = []
let baseStyles = {
visibility: 'hidden !important',
lineHeight: '0 !important',
padding: '0 !important',
margin: '0 !important',
border: 'none !important',
fontSize: '0 !important'
}
// Add top placeholder.
results.push(this.props.renderPlaceholder({
key: 'scroll-list-placeholder-top',
style: Object.assign({
height: (offset * this.props.itemHeight) + 'px'
}, baseStyles)
}))
// Add currently visible items.
let index = offset
slice.forEach((item, key) => {
results.push(this.props.renderItem({key}, item, index++))
})
// Add bottom placeholder.
results.push(this.props.renderPlaceholder({
key: 'scroll-list-placeholder-bottom',
style: Object.assign({
height: ((this.props.items.size - offset - slice.size) * this.props.itemHeight) + 'px'
}, baseStyles)
}))
return results
}
render () {
return this.props.renderRoot({
style: {
overflow: 'auto'
},
onScroll: this.onScroll
}, this.renderItems())
}
}
export default ScrollList
================================================
FILE: src/components/SidePanel.js
================================================
import React from'react'
import KeyCode from'material-ui/lib/utils/key-code'
import StylePropable from'material-ui/lib/mixins/style-propable'
import AutoPrefix from'material-ui/lib/styles/auto-prefix'
import Transitions from'material-ui/lib/styles/transitions'
import WindowListenable from'material-ui/lib/mixins/window-listenable'
import Overlay from'material-ui/lib/overlay'
import Paper from'material-ui/lib/paper'
/**
* Based on material-ui LeftNav component.
*/
const SidePanel = React.createClass({
mixins: [StylePropable, WindowListenable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
className: React.PropTypes.string,
docked: React.PropTypes.bool,
onOpen: React.PropTypes.func,
onClose: React.PropTypes.func,
openRight: React.PropTypes.bool,
width: React.PropTypes.number,
style: React.PropTypes.object,
children: React.PropTypes.node
},
windowListeners: {
'keyup': '_onWindowKeyUp'
},
getDefaultProps () {
return {
docked: true
}
},
getInitialState () {
return {
open: this.props.docked,
maybeSwiping: false,
swiping: false
}
},
componentDidMount () {
this._enableSwipeHandling()
},
componentDidUpdate (prevProps, prevState) {
this._enableSwipeHandling()
},
componentWillUnmount () {
this._disableSwipeHandling()
},
toggle () {
this.setState({ open: !this.state.open })
return this
},
close () {
this.setState({ open: false })
if (this.props.onClose) this.props.onClose()
return this
},
open () {
this.setState({ open: true })
if (this.props.onOpen) this.props.onOpen()
return this
},
getThemePalette () {
return this.context.muiTheme.palette
},
getTheme () {
return this.context.muiTheme.component.leftNav
},
getWidth () {
return this.props.width || this.getTheme().width
},
getStyles () {
var x = this._getTranslateMultiplier() * (this.state.open ? 0 : this._getMaxTranslateX()) + 'px'
var styles = {
root: {
height: '100%',
width: this.getWidth(),
position: 'fixed',
zIndex: 10,
left: 0,
top: 0,
transform: 'translate3d(' + x + ', 0, 0)',
transition: !this.state.swiping && Transitions.easeOut(),
backgroundColor: this.getTheme().color,
overflow: 'hidden'
},
rootWhenOpenRight: {
left: 'auto',
right: '0'
}
}
return styles
},
render () {
var overlay
var styles = this.getStyles()
if (!this.props.docked) {
overlay = (
<Overlay
ref='overlay'
show={this.state.open}
transitionEnabled={!this.state.swiping}
onTouchTap={this._onOverlayTouchTap}/>
)
}
return (
<div className={this.props.className}>
{overlay}
<Paper
ref='clickAwayableElement'
className='side-panel'
zDepth={2}
rounded={false}
transitionEnabled={!this.state.swiping}
style={this.mergeAndPrefix(
styles.root,
this.props.openRight && styles.rootWhenOpenRight,
this.props.style)}>
{this.props.children}
</Paper>
</div>
)
},
_onOverlayTouchTap () {
this.close()
},
_onWindowKeyUp (e) {
if (e.keyCode === KeyCode.ESC &&
!this.props.docked &&
this.state.open) {
this.close()
}
},
_getMaxTranslateX () {
return this.getWidth() + 10
},
_getTranslateMultiplier () {
return this.props.openRight ? 1 : -1
},
_enableSwipeHandling () {
if (this.state.open && !this.props.docked) {
document.body.addEventListener('touchstart', this._onBodyTouchStart)
} else {
this._disableSwipeHandling()
}
},
_disableSwipeHandling () {
document.body.removeEventListener('touchstart', this._onBodyTouchStart)
},
_onBodyTouchStart (e) {
var touchStartX = e.touches[0].pageX
var touchStartY = e.touches[0].pageY
this.setState({
maybeSwiping: true,
touchStartX: touchStartX,
touchStartY: touchStartY
})
document.body.addEventListener('touchmove', this._onBodyTouchMove)
document.body.addEventListener('touchend', this._onBodyTouchEnd)
document.body.addEventListener('touchcancel', this._onBodyTouchEnd)
},
_onBodyTouchMove (e) {
var currentX = e.touches[0].pageX
var currentY = e.touches[0].pageY
if (this.state.swiping) {
e.preventDefault()
var translateX = Math.min(
Math.max(
this._getTranslateMultiplier() * (currentX - this.state.swipeStartX),
0
),
this._getMaxTranslateX()
)
var leftNav = React.findDOMNode(this.refs.clickAwayableElement)
leftNav.style[AutoPrefix.single('transform')] =
'translate3d(' + (this._getTranslateMultiplier() * translateX) + 'px, 0, 0)'
this.refs.overlay.setOpacity(1 - translateX / this._getMaxTranslateX())
} else if (this.state.maybeSwiping) {
var dXAbs = Math.abs(currentX - this.state.touchStartX)
var dYAbs = Math.abs(currentY - this.state.touchStartY)
// If the user has moved his thumb ten pixels in either direction,
// we can safely make an assumption about whether he was intending
// to swipe or scroll.
var threshold = 10
if (dXAbs > threshold && dYAbs <= threshold) {
this.setState({
swiping: true,
swipeStartX: currentX
})
} else if (dXAbs <= threshold && dYAbs > threshold) {
this._onBodyTouchEnd()
}
}
},
_onBodyTouchEnd () {
var shouldClose = false
if (this.state.swiping) shouldClose = true
this.setState({
maybeSwiping: false,
swiping: false
})
// We have to call close() after setting swiping to false,
// because only then CSS transition is enabled.
if (shouldClose) this.close()
document.body.removeEventListener('touchmove', this._onBodyTouchMove)
document.body.removeEventListener('touchend', this._onBodyTouchEnd)
document.body.removeEventListener('touchcancel', this._onBodyTouchEnd)
}
})
export default SidePanel
================================================
FILE: src/components/TypeIcon.js
================================================
import React from 'react'
import Icon from '../components/Icon'
import keys from '../utils/keys'
class TypeIcon extends React.Component {
static propTypes = {
title: React.PropTypes.string,
type: React.PropTypes.string
}
render () {
let props = {
title: keys.getTypeName(this.props.type)
}
if (this.props.type === 'string') {
props.type = 'vpn_key'
}
if (this.props.type === 'list') {
props.type = 'format_list_numbered'
}
if (this.props.type === 'set') {
props.type = 'reorder'
}
if (this.props.type === 'zset') {
props.type = 'format_line_spacing'
}
if (this.props.type === 'hash') {
props.type = 'code'
}
return <Icon className='type-icon' {...props}/>
}
}
export default TypeIcon
================================================
FILE: src/components/ValuesRow.js
================================================
import React from 'react'
import pureRender from 'pure-render-decorator'
import autobind from 'autobind-decorator'
import ImmutablePropTypes from 'react-immutable-proptypes'
import browseActions from '../actions/browseActions'
import TypeIcon from '../components/TypeIcon'
@pureRender
@autobind
class ValuesRow extends React.Component {
static propTypes = {
index: React.PropTypes.number,
style: React.PropTypes.object,
matchRegExp: React.PropTypes.object,
item: ImmutablePropTypes.map // @todo Enforce more specific shape here and elsewhere
}
onClick (e) {
browseActions.toggleSelected({
key: this.props.item.get('key'),
index: this.props.index
})
}
renderKey () {
let key = this.props.item.get('key')
// Highlight search pattern matches.
if (this.props.matchRegExp) {
return key
.split(this.props.matchRegExp)
.map((part, i) => {
if (i > 0 && i % 2) {
return <strong key={i}>{part}</strong>
} else {
return part
}
})
// Else, just spit out the key.
} else {
return key
}
}
renderValue () {
let type = this.props.item.get('type')
let value = this.props.item.get('value')
if (value) {
let teaser
let parts = []
let length = 0
switch (type) {
case 'list':
case 'set':
for (let i = 0; (length <= 400 && i < value.length); i++) {
parts.push(value[i])
length += value[i].length
}
teaser = parts.join(', ')
break
case 'zset':
for (let i = 0; (length <= 400 && i < value.length); i++) {
parts.push(value[i].value)
length += value[i].value.length
}
teaser = parts.join(', ')
break
default:
teaser = value
break
}
return teaser ? teaser.substr(0, 400) : null
} else {
return null
}
}
render () {
let {selected, type} = this.props.item.toJS()
let classes = 'values-row' + (selected ? ' selected' : '')
return (
<tr className={classes} style={this.props.style} onClick={this.onClick}>
<td className='key'>{this.renderKey()}</td>
<td className='value'>{this.renderValue()}</td>
<td className='type'><TypeIcon type={type}/></td>
</tr>
)
}
}
export default ValuesRow
================================================
FILE: src/components/ValuesTable.js
================================================
import React from 'react'
import ImmutablePropTypes from 'react-immutable-proptypes'
import pureRender from 'pure-render-decorator'
import autobind from 'autobind-decorator'
import shell from 'shell'
import browseActions from '../actions/browseActions'
import {TextField} from 'material-ui'
import {HotKeys} from 'react-hotkeys'
import ScrollList from '../components/ScrollList'
import LoadingRow from '../components/LoadingRow'
import ValuesRow from '../components/ValuesRow'
@pureRender
@autobind
class ValuesTable extends React.Component {
static propTypes = {
keys: ImmutablePropTypes.orderedMap.isRequired,
loading: React.PropTypes.bool,
finished: React.PropTypes.bool,
offset: React.PropTypes.number,
itemHeight: React.PropTypes.number,
match: React.PropTypes.string,
matchRegExp: React.PropTypes.object,
selectedIndex: React.PropTypes.number
}
static defaultProps = {
loading: false,
offset: 0,
itemHeight: 30
}
componentDidUpdate (prevProps) {
if (this.refs.scrollList &&
(this.props.selectedIndex !== null) &&
(prevProps.selectedIndex !== this.props.selectedIndex)) {
this.refs.scrollList.ensureVisible(this.props.selectedIndex)
}
}
getHotKeys () {
return {
down: (event) => {
if ((this.props.selectedIndex !== null) && this.props.selectedIndex < (this.props.keys.size - 1)) {
browseActions.toggleSelectedIndex(this.props.selectedIndex + 1)
} else {
shell.beep()
}
},
up: (event) => {
if ((this.props.selectedIndex !== null) && this.props.selectedIndex > 0) {
browseActions.toggleSelectedIndex(this.props.selectedIndex - 1)
} else {
shell.beep()
}
},
esc: (event) => {
if (this.props.selectedIndex !== null) {
browseActions.toggleSelected()
} else {
shell.beep()
}
}
}
}
onSearchChange (e) {
browseActions.setMatch(e.currentTarget.value)
}
onScroll (e, newOffset) {
if (newOffset) {
browseActions.setOffset(newOffset)
if (!this.props.finished) {
let top = e.currentTarget.scrollTop
let sh = e.currentTarget.scrollHeight
let h = e.currentTarget.offsetHeight
// If we're nearing the bottom, load more keys.
if ((sh - top - h) <= (h * 2)) {
browseActions.fetchKeysNext()
}
}
}
}
renderRoot (props, children) {
return <tbody {...props}>{children}</tbody>
}
renderItem (props, item, index) {
return <ValuesRow matchRegExp={this.props.matchRegExp} item={item} index={index} {...props}/>
}
renderPlaceholder (props) {
return <tr key={props.key}><td colSpan='2' {...props}></td></tr>
}
render () {
return (
<HotKeys handlers={this.getHotKeys()}>
<div className='values-table'>
<table>
<thead>
<tr>
<th className='key' colSpan='3'>
<TextField
className='search'
hintText='key:*:pattern'
floatingLabelText='Search'
value={this.props.match}
onChange={this.onSearchChange}
fullWidth />
</th>
</tr>
</thead>
{this.props.loading ?
<tbody>
<LoadingRow/>
</tbody>
:/*else*/
<ScrollList
ref='scrollList'
renderRoot={this.renderRoot}
renderItem={this.renderItem}
renderPlaceholder={this.renderPlaceholder}
items={this.props.keys}
itemHeight={this.props.itemHeight}
offset={this.props.offset}
scrollHandler={this.onScroll} />
}
</table>
</div>
</HotKeys>
)
}
}
export default ValuesTable
================================================
FILE: src/components/details/Details.js
================================================
import React from 'react'
import keys from '../../utils/keys'
import TypeIcon from '../../components/TypeIcon'
class Details extends React.Component {
static propTypes = {
_key: React.PropTypes.string.isRequired,
type: React.PropTypes.string.isRequired,
value: React.PropTypes.node.isRequired,
buttons: React.PropTypes.node
}
render () {
return (
<div className='key-details'>
<div className='key'>
{this.props._key}
</div>
<div className='type'>
<TypeIcon type={this.props.type}/>
<span className='type-name'>{keys.getTypeName(this.props.type)}</span>
{this.props.buttons ?
<div className='buttons'>
{this.props.buttons}
</div>
: null}
</div>
<div className='value'>
{this.props.value}
</div>
</div>
)
}
}
export default Details
================================================
FILE: src/components/details/HashDetails.js
================================================
import React from 'react'
import pureRender from 'pure-render-decorator'
import ImmutablePropTypes from 'react-immutable-proptypes'
import Details from '../../components/details/Details'
@pureRender
class HashDetails extends React.Component {
static propTypes = {
item: ImmutablePropTypes.map
}
render () {
return (
<Details {...this.props.item.toJS()}/>
)
}
}
export default HashDetails
================================================
FILE: src/components/details/ListDetails.js
================================================
import React from 'react'
import pureRender from 'pure-render-decorator'
import ImmutablePropTypes from 'react-immutable-proptypes'
import clipboard from 'clipboard'
import Details from '../../components/details/Details'
import Highlight from '../../components/Highlight'
import Icon from '../../components/Icon'
@pureRender
class ListDetails extends React.Component {
static propTypes = {
item: ImmutablePropTypes.map
}
state = {
types: ['JSON', 'Raw'],
show: 'JSON',
hasJSON: false
}
renderValue () {
let values = this.props.item.get('value')
return values.map((value, i) => {
let result
try {
if (this.state.show === 'Raw') {
result = <pre><code>{value}</code></pre>
} else {
result = (
<Highlight className='json'>
{JSON.stringify(JSON.parse(value), null, 2)}
</Highlight>
)
}
this.state.hasJSON = true
} catch (e) {
result = <pre><code>{value}</code></pre>
}
return (
<div key={i} className='value-item'>
{result}
<div className='actions'>
<span className='index'>{i}</span>
<a href='#' onClick={(e) => clipboard.writeText(value)}>
<Icon type='content_paste'/>
</a>
</div>
</div>
)
})
}
renderButtons () {
let buttons = {}
// Create types buttons.
if (this.state.hasJSON) {
buttons.show = (
<div className='pill'>
{this.state.types.map((type) => {
return (
<a
key={type}
href='#'
className={(this.state.show === type) ? 'active' : null}
onClick={(e) => {
e.preventDefault()
this.setState({show: type})
}}
>
{type}
</a>
)
})}
</div>
)
}
return React.addons.createFragment(buttons)
}
render () {
let {_key, type} = this.props.item.toJS()
return (
<Details _key={_key} type={type} value={this.renderValue()} buttons={this.renderButtons()}/>
)
}
}
export default ListDetails
================================================
FILE: src/components/details/SetDetails.js
================================================
import React from 'react'
import pureRender from 'pure-render-decorator'
import ImmutablePropTypes from 'react-immutable-proptypes'
import clipboard from 'clipboard'
import Details from '../../components/details/Details'
import Highlight from '../../components/Highlight'
import Icon from '../../components/Icon'
@pureRender
class SetDetails extends React.Component {
static propTypes = {
item: ImmutablePropTypes.map
}
state = {
types: ['JSON', 'Raw'],
show: 'JSON',
hasJSON: false
}
renderValue () {
let values = this.props.item.get('value')
return values.map((value, i) => {
let result
try {
if (this.state.show === 'Raw') {
result = <pre><code>{value}</code></pre>
} else {
result = (
<Highlight className='json'>
{JSON.stringify(JSON.parse(value), null, 2)}
</Highlight>
)
}
this.state.hasJSON = true
} catch (e) {
result = <pre><code>{value}</code></pre>
}
return (
<div key={i} className='value-item'>
{result}
<div className='actions'>
<a href='#' onClick={(e) => clipboard.writeText(value)}>
<Icon type='content_paste'/>
</a>
</div>
</div>
)
})
}
renderButtons () {
let buttons = {}
// Create types buttons.
if (this.state.hasJSON) {
buttons.show = (
<div className='pill'>
{this.state.types.map((type) => {
return (
<a
key={type}
href='#'
className={(this.state.show === type) ? 'active' : null}
onClick={(e) => {
e.preventDefault()
this.setState({show: type})
}}
>
{type}
</a>
)
})}
</div>
)
}
return React.addons.createFragment(buttons)
}
render () {
let {_key, type} = this.props.item.toJS()
return (
<Details _key={_key} type={type} value={this.renderValue()} buttons={this.renderButtons()}/>
)
}
}
export default SetDetails
================================================
FILE: src/components/details/SortedSetDetails.js
================================================
import React from 'react'
import pureRender from 'pure-render-decorator'
import ImmutablePropTypes from 'react-immutable-proptypes'
import clipboard from 'clipboard'
import Details from '../../components/details/Details'
import Highlight from '../../components/Highlight'
import Icon from '../../components/Icon'
@pureRender
class SortedSetDetails extends React.Component {
static propTypes = {
item: ImmutablePropTypes.map
}
state = {
types: ['JSON', 'Raw'],
show: 'JSON',
hasJSON: false
}
renderValue () {
let values = this.props.item.get('value')
return values.map((value, i) => {
let result
try {
if (this.state.show === 'Raw') {
result = <pre><code>{value.value}</code></pre>
} else {
result = (
<Highlight className='json'>
{JSON.stringify(JSON.parse(value.value), null, 2)}
</Highlight>
)
}
this.state.hasJSON = true
} catch (e) {
result = <pre><code>{value.value}</code></pre>
}
return (
<div key={i} className='value-item'>
{result}
<div className='actions'>
<span className='index'>{value.score}</span>
<a href='#' onClick={(e) => clipboard.writeText(value.value)}>
<Icon type='content_paste'/>
</a>
</div>
</div>
)
})
}
renderButtons () {
let buttons = {}
// Create types buttons.
if (this.state.hasJSON) {
buttons.show = (
<div className='pill'>
{this.state.types.map((type) => {
return (
<a
key={type}
href='#'
className={(this.state.show === type) ? 'active' : null}
onClick={(e) => {
e.preventDefault()
this.setState({show: type})
}}
>
{type}
</a>
)
})}
</div>
)
}
return React.addons.createFragment(buttons)
}
render () {
let {_key, type} = this.props.item.toJS()
return (
<Details _key={_key} type={type} value={this.renderValue()} buttons={this.renderButtons()}/>
)
}
}
export default SortedSetDetails
================================================
FILE: src/components/details/StringDetails.js
================================================
import React from 'react'
import pureRender from 'pure-render-decorator'
import ImmutablePropTypes from 'react-immutable-proptypes'
import clipboard from 'clipboard'
import Details from '../../components/details/Details'
import Highlight from '../../components/Highlight'
@pureRender
class KeyDetails extends React.Component {
static propTypes = {
item: ImmutablePropTypes.map
}
state = {
types: ['JSON', 'Raw'],
show: 'JSON',
hasJSON: false
}
renderValue () {
let value = this.props.item.get('value')
try {
if (this.state.show === 'Raw') {
value = <pre><code>{value}</code></pre>
} else {
value = (
<Highlight className='json'>
{JSON.stringify(JSON.parse(value), null, 2)}
</Highlight>
)
}
this.state.hasJSON = true
} catch (e) {
value = <pre><code>{value}</code></pre>
}
return value
}
renderButtons () {
let buttons = {}
let value = this.props.item.get('value')
// Create types buttons.
if (this.state.hasJSON) {
buttons.show = (
<div className='pill'>
{this.state.types.map((type) => {
return (
<a
key={type}
href='#'
className={(this.state.show === type) ? 'active' : null}
onClick={(e) => {
e.preventDefault()
this.setState({show: type})
}}
>
{type}
</a>
)
})}
</div>
)
}
// Todo make this into a component maybe?
buttons.copy = (
<a href='#' onClick={(e) => clipboard.writeText(value)}>Copy</a>
)
return React.addons.createFragment(buttons)
}
render () {
return (
<Details {...this.props.item.toJS()}
value={this.renderValue()}
buttons={this.renderButtons()}
/>
)
}
}
export default KeyDetails
================================================
FILE: src/components/handlers/BrowseHandler.js
================================================
import React from 'react'
import autobind from 'autobind-decorator'
import connectToStores from 'alt/utils/connectToStores'
import pureRender from 'pure-render-decorator'
import throttle from '../../utils/throttle'
import hostsStore from '../../stores/hostsStore'
import browseStore from '../../stores/browseStore'
import browseActions from '../../actions/browseActions'
import {IconButton} from 'material-ui'
import ValuesTable from '../../components/ValuesTable'
import KeyDetails from '../../components/KeyDetails'
import SidePanel from '../../components/SidePanel'
import Icon from '../../components/Icon'
/**
* Wrap the Browse component so we can handle transitions.
*/
@pureRender
class BrowseHandler extends React.Component {
static willTransitionTo () {
let state = Object.assign({}, hostsStore.getState(), browseStore.getState())
let {loaded, connected, match} = state
if (!loaded && connected) {
browseActions.fetchKeys({match})
}
}
render () {
return <Browse/>
}
}
/**
* Browse component.
*/
@connectToStores
@pureRender
@autobind
class Browse extends React.Component {
static propTypes = {
loaded: React.PropTypes.bool,
connected: React.PropTypes.bool,
match: React.PropTypes.string,
selectedKey: React.PropTypes.object
}
static getStores () {
return [hostsStore, browseStore]
}
static getPropsFromStores () {
return Object.assign({}, hostsStore.getState(), browseStore.getState())
}
state = {
keyDetailsDocked: !!this.props.selectedKey
}
componentWillReceiveProps (nextProps) {
// Match text changed.
if (this.props.match !== nextProps.match) {
this.fetchKeys({match: nextProps.match})
}
// Just connected to a new host.
if (!this.props.connected && nextProps.connected) {
this.fetchKeys({match: this.props.match})
}
// A new key was selected.
if (nextProps.selectedKey && !this.state.keyDetailsDocked) {
this.toggleKeyDetails()
}
// A key was unselected.
if (this.props.selectedKey && !nextProps.selectedKey) {
this.toggleKeyDetails()
}
}
@throttle(250)
fetchKeys (options = {}) {
browseActions.fetchKeys.defer(options)
}
toggleKeyDetails () {
this.refs.keyDetailsPanel.toggle()
this.setState({
keyDetailsDocked: !this.state.keyDetailsDocked
})
}
onClickClose (e) {
browseActions.toggleSelected()
}
render () {
return (
<div className='browse'>
<ValuesTable {...this.props}/>
<SidePanel
ref='keyDetailsPanel'
className='key-details-panel'
openRight={true}
docked={this.state.keyDetailsDocked}
width={550}>
<IconButton className='close' onClick={this.onClickClose}>
<Icon type='cancel'/>
</IconButton>
{this.props.selectedKey ?
<KeyDetails ref='keyDetails' item={this.props.selectedKey}/>
:/*else*/
null
}
</SidePanel>
</div>
)
}
}
export default BrowseHandler
================================================
FILE: src/components/handlers/InfoHandler.js
================================================
import React from 'react'
import ImmutablePropTypes from 'react-immutable-proptypes'
import autobind from 'autobind-decorator'
import pureRender from 'pure-render-decorator'
import connectToStores from 'alt/utils/connectToStores'
import throttle from '../../utils/throttle'
import hostsStore from '../../stores/hostsStore'
import hostsActions from '../../actions/hostsActions'
import HostInfo from '../../components/HostInfo'
/**
* Wrap the Info component so we can handle transisions.
*/
@pureRender
class InfoHandler extends React.Component {
static willTransitionTo () {
let {hostInfo, connected} = hostsStore.getState()
if (!hostInfo && connected) {
hostsActions.fetchHostInfo()
}
}
render () {
return <Info />
}
}
/**
* Info component.
*/
@connectToStores
@pureRender
@autobind
class Info extends React.Component {
static propTypes = {
connected: React.PropTypes.bool,
hostInfoLoading: React.PropTypes.bool,
hostInfo: ImmutablePropTypes.map
}
static getStores () {
return [hostsStore]
}
static getPropsFromStores () {
return hostsStore.getState()
}
componentDidMount () {
this.refreshInterval = setInterval(() => this.fetchHostInfo(true), 1000)
}
componentWillUnmount () {
clearInterval(this.refreshInterval)
}
componentWillReceiveProps (nextProps) {
// Connected to a new server.
if (this.props.connected !== nextProps.connected) {
this.fetchHostInfo()
}
}
@throttle(250)
fetchHostInfo (isRefresh) {
hostsActions.fetchHostInfo.defer(isRefresh)
}
render () {
return (
<div className='info'>
{!this.props.hostInfo ?
(this.props.hostInfoLoading ?
<p>Loading Info</p>
: null)
:/*else*/
<HostInfo {...this.props}/>
}
</div>
)
}
}
export default InfoHandler
================================================
FILE: src/components/handlers/MainHandler.js
================================================
import React from 'react'
import autobind from 'autobind-decorator'
import connectToStores from 'alt/utils/connectToStores'
import hostsStore from '../../stores/hostsStore'
import hostsActions from '../../actions/hostsActions'
import {RouteHandler} from 'react-router'
import mui from 'material-ui'
import Header from '../../components/Header'
// Create an mui theme manager.
const themeManager = new mui.Styles.ThemeManager()
/**
* Wrap the Main component so we can handle transitions.
*/
class MainHandler extends React.Component {
static willTransitionTo () {
hostsActions.connectToHost(hostsStore.getState().activeHost)
}
render () {
return <Main />
}
}
/**
* Main component.
*/
@connectToStores
@autobind
class Main extends React.Component {
static propTypes = {
activeHost: React.PropTypes.object
}
static getStores () {
return [hostsStore]
}
static getPropsFromStores () {
return hostsStore.getState()
}
static childContextTypes = {
muiTheme: React.PropTypes.object
}
getChildContext () {
return {
muiTheme: themeManager.getCurrentTheme()
}
}
render () {
return (
<div className='main'>
<Header {...this.props}/>
<RouteHandler/>
</div>
)
}
}
export default MainHandler
export {themeManager}
================================================
FILE: src/components/handlers/NotFoundHandler.js
================================================
import React from 'react'
class NotFoundHandler extends React.Component {
render () {
return (
<div className='not-found'>
<h1>Sorry, Page Not Found</h1>
</div>
)
}
}
export default NotFoundHandler
================================================
FILE: src/conf.js
================================================
var conf = {}
conf.BASENAME = 'RedisExplorer'
conf.APPNAME = conf.BASENAME
conf.DEVELPER_ID = 'Brian Link'
conf.COMPANY = 'Terra Eclipse, Inc.'
conf.ICON = 'resources/redisexplorer'
conf.ICON_URL = 'https://raw.githubusercontent.com/cpsubrian/redisexplorer/master/' + conf.ICON + '.ico'
conf.BUNDLE_ID = 'com.terraeclipse.redisexplorer'
conf.OSX_OUT = './dist/' + conf.APPNAME + '-darwin-x64'
conf.OSX_FILENAME = conf.OSX_OUT + '/' + conf.APPNAME + '.app'
module.exports = conf
================================================
FILE: src/main.js
================================================
/**
* Entry point for babel.
*/
import 'babel/polyfill'
import './app'
================================================
FILE: src/router.js
================================================
import React from 'react'
import Router, {Route, NotFoundRoute} from 'react-router'
import MainHandler from './components/handlers/MainHandler'
import NotFoundHandler from './components/handlers/NotFoundHandler'
import BrowseHandler from './components/handlers/BrowseHandler'
import InfoHandler from './components/handlers/InfoHandler'
const routes = (
<Route handler={MainHandler}>
<Route name='browse' path='/' handler={BrowseHandler}/>
<Route name='info' path='/info' handler={InfoHandler}/>
<NotFoundRoute handler={NotFoundHandler}/>
</Route>
)
const router = Router.create({
routes: routes
})
export default router
export {routes, router}
================================================
FILE: src/stores/browseStore.js
================================================
import alt from '../alt'
import _ from 'underscore'
import Immutable from 'immutable'
import immutable from 'alt/utils/ImmutableUtil'
import regex from '../utils/regex'
import settings from '../utils/settings'
import browseActions from '../actions/browseActions'
@immutable
class BrowseStore {
constructor () {
// Bind actions.
this.bindActions(browseActions)
// Initialize state.
this.keys = Immutable.OrderedMap()
this.keysIndex = Immutable.List()
this.selectedKey = null
this.selectedIndex = null
this.loading = false
this.loaded = false
this.finished = false
this.error = null
this.offset = 0
this.match = settings.get('browse:match', null)
this.matchRegExp = null
}
/* General
****************************************************************************/
onResetKeys () {
this.keys = this.keys.clear()
this.keysIndex = this.keysIndex.clear()
this.selectedKey = null
this.selectedIndex = null
this.loading = false
this.loaded = false
this.finished = false
this.error = null
this.offset = 0
this.match = null
this.matchRegExp = null
settings.set('browse:match', null)
}
onSetOffset (offset) {
this.offset = offset
}
onSetMatch (match) {
this.matchRegExp = null
if (match && match.length) {
this.match = match
} else {
this.match = null
}
settings.set('browse:match', match)
}
onToggleSelectedKey (key) {
if (key) {
let index = this.keysIndex.indexOf(key)
this.onToggleSelected({key, index})
} else {
this.onToggleSelected()
}
}
onToggleSelectedIndex (index) {
let key = this.keysIndex.get(index)
this.onToggleSelected({key, index})
}
onToggleSelected (item = {}) {
let {key, index} = item
key = (typeof key !== 'undefined') ? key : this.selectedKey.get('key')
index = (typeof index !== 'undefined') ? index : this.selectedIndex
this.keys = this.keys.withMutations((keys) => {
if (keys.get(key).get('selected')) {
keys.update(key, (item) => item.set('selected', false))
this.selectedKey = null
this.selectedIndex = null
} else {
if (this.selectedKey) {
keys.update(this.selectedKey.get('key'), (item) => item.set('selected', false))
}
keys.update(key, (item) => item.set('selected', true))
this.selectedKey = keys.get(key)
this.selectedIndex = index
}
})
}
/* Fetch Keys Lifecycle
****************************************************************************/
onFetchKeys () {
this.keys = this.keys.clear()
this.keysIndex = this.keysIndex.clear()
this.selectedKey = null
this.selectedIndex = null
this.loading = true
this.loaded = false
this.finished = false
this.error = null
this.offset = 0
// Compute match regular expression.
if (this.match && !this.matchRegExp) {
this.matchRegExp = regex.fromGlob(this.match)
}
}
onFetchKeysAdd (newKeys) {
this.loading = false
this.loaded = true
this.keys = this.keys.withMutations((keys) => {
this.keysIndex = this.keysIndex.withMutations((index) => {
newKeys.forEach((key) => {
if (!keys.has(key.key)) {
index.push(key.key)
}
keys.set(key.key, Immutable.Map(key))
})
})
})
}
onFetchKeysFailed (err) {
this.loading = false
this.loaded = true
this.error = err
}
onFetchKeysFinished () {
this.loading = false
this.loaded = true
this.finished = true
}
/* Fetch Values Lifecycle
****************************************************************************/
onFetchValues (keys) {
// @todo Maybe set a loading flag on each key?
}
onFetchValuesAdd (values) {
this.keys = this.keys.withMutations((keys) => {
_.each(values, (value, key) => {
keys.update(key, (item) => item.set('value', value))
})
})
}
onFetchValuesFailed (err) {
this.error = err
}
}
export default alt.createStore(BrowseStore)
================================================
FILE: src/stores/hostsStore.js
================================================
import alt from '../alt'
import path from 'path'
import fs from 'fs'
import _ from 'underscore'
import Immutable from 'immutable'
import immutable from 'alt/utils/ImmutableUtil'
import sshConfig from 'ssh-config'
import hostsActions from '../actions/hostsActions'
import settings from '../utils/settings'
@immutable
class HostsStore {
constructor () {
// Bind actions.
this.bindActions(hostsActions)
// Initialize state.
this.error = null
this.connected = false
this.connecting = false
this.hostInfoLoading = false
this.hostInfoError = null
this.hostInfo = null
this.hosts = Immutable.List()
// Load hosts from .ssh.
let configPath = path.join(
process.env[(process.platform === 'win32') ? 'USERPROFILE' : 'HOME'],
'.ssh',
'config'
)
let hostsFile = fs.readFileSync(configPath, 'utf8')
if (hostsFile && hostsFile.length) {
let config = sshConfig.parse(hostsFile)
this.hosts = this.hosts.withMutations((hosts) => {
_.each(config, (host) => {
hosts.push(Immutable.Map(host))
})
})
}
// Alphabetize.
this.hosts = this.hosts.sortBy((host) => host.get('Host').toLowerCase())
// Add localhost and set active host.
this.hosts = this.hosts.unshift(Immutable.Map({
Host: 'localhost',
Hostname: 'localhost'
}))
// Set active host.
let name = settings.get('hosts:active', 'localhost')
this.activeHost = this.hosts.find((host) => host.get('Host') === name)
}
/* Connection Lifecycle
****************************************************************************/
onConnectToHost (host) {
if ((!this.connected && !this.connecting) || (this.activeHost !== host)) {
this.activeHost = host
this.connected = false
this.connecting = true
this.hostInfoLoading = false
this.hostInfoError = null
this.hostInfo = null
settings.set('hosts:active', host.get('Host'))
}
}
onConnectToHostFailed (err) {
this.error = err
this.connecting = false
}
onConnectedToHost () {
this.connected = true
this.connecting = false
}
/* Fetch Host Info Lifecycle
****************************************************************************/
onFetchHostInfo (isRefresh) {
if (!isRefresh) {
this.loadingHostInfo = true
this.hostInfo = null
}
this.hostInfoError = null
}
onFetchHostInfoFailed (err) {
this.hostInfoLoading = false
this.hostInfoError = err
}
onFetchHostInfoFinished (info) {
this.hostInfoLoading = false
this.hostInfoError = null
this.hostInfo = Immutable.Map(info)
}
}
export default alt.createStore(HostsStore)
================================================
FILE: src/utils/db.js
================================================
import redis from 'redis'
import redisInfo from 'redis-info'
import tunnel from 'tunnel-ssh'
import _ from 'underscore'
const DST_PORT = 6379
const LOCAL_PORT = 8379
const DEFAULT_COUNT = 250
// Abstraction around redis.
class DB {
// Clean up open connections, then initiate a new host connection.
connect (host, cb) {
if (this.client) {
this.client.end()
}
if (this.tunnel) {
this.tunnel.close((err) => {
if (err && err.message !== 'Not running') return cb(err)
this.connectToHost(host, cb)
})
} else {
this.connectToHost(host, cb)
}
}
// Connect to localhost or remote.
connectToHost (host, cb) {
if (host.Host === 'localhost') {
setImmediate(() => {
this.client = redis.createClient()
this.client.on('ready', () => {
cb()
})
})
} else {
this.connectToRemoteHost(host, cb)
}
}
// Connect to a remote host using privateKey auth via ssh-agent.
connectToRemoteHost (host, cb) {
let config = {
host: host.Hostname,
dstPort: DST_PORT,
localPort: LOCAL_PORT,
username: host.User,
agent: process.env.SSH_AUTH_SOCK
}
this.tunnel = tunnel(config, (err) => {
if (err) return cb(err)
this.client = redis.createClient(config.localPort)
this.client.on('ready', () => {
cb()
})
})
}
// An iterator-like api to scan keys.
scan (options = {}) {
let db = this
options.cmd = 'SCAN'
options.count = options.count || DEFAULT_COUNT
let _scan = {
options: options,
cursor: 0,
stopped: false,
results: [],
// Perform the next iteration of the scan.
next: (cb) => {
let args = []
if (_scan.stopped) return
if (_scan.cursor !== false) {
args.push(_scan.cursor)
if (options.key) {
args.push(options.key)
}
if (options.count) {
args.push('COUNT')
args.push(options.count)
}
if (options.match) {
args.push('MATCH')
args.push(options.match)
}
args.push(_scan.process.bind(db, cb))
db.client[options.cmd].apply(db.client, args)
} else {
if (cb) cb(null, false)
}
},
// Collect results.
process: (cb, err, results) => {
if (err) return cb(err)
if (_scan.stopped) return
let [cursor, keys] = results
_scan.cursor = (cursor === '0') ? false : cursor
_scan.results = _scan.results.concat(keys.map(key => {
return {key: key, _key: key}
}))
// Make sure we have at least options.count results.
if (!_scan.cursor || (_scan.results.length >= options.count)) {
((results) => {
_scan.results = []
_scan.postProcess(cb, results)
})(_scan.results)
} else {
_scan.next(cb)
}
},
// Lookup data types of the matching keys.
postProcess: (cb, results) => {
if (_scan.stopped) return
if (!results.length || !_scan.options.loadTypes) {
return cb(null, results)
}
db.client.multi(results.map((result) => {
return ['TYPE', result.key]
})).exec((err, types) => {
if (err) return cb(err)
types.forEach((type, i) => {
results[i].type = type
})
cb(null, results)
})
},
stop: () => {
_scan.stopped = true
}
}
return _scan
}
// Fetch and parse the redis server info.
fetchInfo (cb) {
this.client.INFO((err, result) => {
if (err) return cb(err)
try {
let info = redisInfo.parse(result)
return cb(null, info)
} catch (e) {
return cb(e)
}
})
}
// Load values for a set of keys ({key, type}).
fetchValues (keys, cb) {
// Collect keys by type.
let types = keys.reduce((memo, key) => {
memo[key.type] = memo[key.type] || []
memo[key.type].push(key.key)
return memo
}, {})
// Create tasks.
let tasks = _.map(types, (keys, type) => {
switch (type) {
case 'string':
return this.fetchStringValues(keys)
case 'list':
return this.fetchListValues(keys)
case 'set':
return this.fetchSetValues(keys)
case 'zset':
return this.fetchSortedSetValues(keys)
case 'hash':
return this.fetchHashValues(keys)
default:
return Promise.reject(new Error('Unknown type: ' + type))
}
})
Promise.all(tasks).then((values) => {
cb(null, Object.assign.apply(null, values))
}, (err) => {
cb(err)
})
}
// Fetch string values for an array of keys.
fetchStringValues (keys) {
return new Promise((resolve, reject) => {
this.client.multi(keys.map((key) => {
return ['GET', key]
})).exec((err, results) => {
if (err) return reject(err)
resolve(keys.reduce((memo, key, i) => {
memo[key] = results[i]
return memo
}, {}))
})
})
}
// Fetch list values for an array of keys.
fetchListValues (keys) {
return new Promise((resolve, reject) => {
this.client.multi(keys.map((key) => {
return ['LRANGE', key, 0, -1]
})).exec((err, results) => {
if (err) return reject(err)
resolve(keys.reduce((memo, key, i) => {
memo[key] = results[i]
return memo
}, {}))
})
})
}
// Fetch set values for an array of keys.
fetchSetValues (keys) {
return new Promise((resolve, reject) => {
this.client.multi(keys.map((key) => {
return ['SMEMBERS', key]
})).exec((err, results) => {
if (err) return reject(err)
resolve(keys.reduce((memo, key, i) => {
memo[key] = results[i]
return memo
}, {}))
})
})
}
// Fetch sorted-set values for an array of keys.
fetchSortedSetValues (keys) {
return new Promise((resolve, reject) => {
this.client.multi(keys.map((key) => {
return ['ZRANGEBYSCORE', key, '-inf', '+inf', 'WITHSCORES']
})).exec((err, results) => {
if (err) return reject(err)
resolve(keys.reduce((memo, key, i) => {
memo[key] = []
results[i].forEach((val, j) => {
if (j % 2 === 0 || j === 0) {
memo[key].push({
value: val,
score: parseFloat(results[i][j + 1])
})
}
})
return memo
}, {}))
})
})
}
// Fetch hash values for an array of keys.
fetchHashValues (keys) {
return Promise.resolve(keys.reduce((memo, key) => {
memo[key] = '[value]'
return memo
}, {}))
}
}
export default (new DB())
================================================
FILE: src/utils/keys.js
================================================
const keysUtils = {
getTypeName (type) {
switch (type) {
case 'string': return 'String'
case 'list': return 'List'
case 'set': return 'Set'
case 'zset': return 'Sorted Set'
case 'hash': return 'Hash'
}
}
}
export default keysUtils
================================================
FILE: src/utils/perf.js
================================================
import React from 'react/addons'
export default React.addons.Perf
================================================
FILE: src/utils/regex.js
================================================
const regex = {
escape (s) {
return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')
},
fromGlob (s) {
let converted = s
.split('*')
.map((part) => {
return regex.escape(part)
})
.map((part) => {
return '(' + part + ')'
})
.join('(.*)')
return new RegExp('^' + converted, 'g')
}
}
export default regex
================================================
FILE: src/utils/settings.js
================================================
import fs from 'fs'
import path from 'path'
import mkdirp from 'mkdirp'
import conf from '../conf'
import throttle from '../utils/throttle'
let basePath = path.join(
process.env[(process.platform === 'win32') ? 'USERPROFILE' : 'HOME'],
'Library',
'Application\ Support',
conf['APPNAME']
)
let settingsPath = path.join(basePath, 'settings.json')
// Create basePath if it doesn't exist.
mkdirp.sync(basePath)
// Load settings from the file.
let cache = {}
try {
cache = JSON.parse(fs.readFileSync(settingsPath))
} catch (e) {}
// Settings API.
const settings = {
get (key, fallback) {
return cache[key] || fallback
},
set (key, value) {
cache[key] = value
settings.write()
},
@throttle(1000)
write () {
fs.writeFileSync(settingsPath, JSON.stringify(cache))
}
}
export default settings
================================================
FILE: src/utils/spawn.js
================================================
/**
* ES7-like async via a wrapped generator function.
* Inside the function you can yield Promises.
*/
function spawn (genF) {
return new Promise((resolve, reject) => {
let gen = genF()
let step = (nextF) => {
let next
try {
next = nextF()
} catch(e) {
// Finished with failure, reject the promise.
reject(e)
return
}
if (next.done) {
// Finished with success, resolve the promise.
resolve(next.value)
return
}
// Not finished, chain off the yielded promise and `step` again.
Promise
.cast(next.value)
.then((v) => {
step(() => gen.next(v))
}, (e) => {
step(() => gen.throw(e))
})
}
step(() => gen.next(undefined))
})
}
export default spawn
================================================
FILE: src/utils/throttle.js
================================================
import _ from 'underscore'
/**
* Throttle decorator.
*
* Use like:
*
* @throttle(250)
* myFunction () {
* // Probably does something.
* }
*/
function throttle (delay, options = {}) {
return function throttleDecorator (target, name, descriptor) {
descriptor.value = _.throttle(descriptor.value, delay, options)
return descriptor
}
}
export default throttle
================================================
FILE: styles/.gitkeep
================================================
================================================
FILE: styles/components/header.less
================================================
.header {
.icon {
vertical-align: middle;
}
.toolbar {
padding: 0 !important;
}
.button {
display: inline-block;
padding: 0 @space;
color: @grey-600;
line-height: @toolbarHeight;
text-decoration: none;
&:hover {
color: @black;
text-decoration: none;
}
&.active {
color: @pink;
}
.icon {
vertical-align: middle;
margin-right: 4px;
}
}
.host-button {
&.disconnected i {
color: @grey-600;
}
&.connecting i {
color: @pink-100;
}
&.connected i {
color: @pink;
}
}
.host-option {
font-size: 14px;
.icon {
font-size: 16px;
color: @grey-400;
}
}
}
================================================
FILE: styles/components/key-details.less
================================================
.key-details-panel {
.side-panel {
position: relative;
.close {
position: absolute !important;
top: 0;
right: 0;
color: @cyan-600;
&:hover {
color: @cyan-300;
}
}
.key-details {
display: flex;
flex-direction: column;
height: 100%;
background-color: @grey-50;
color: @cyan-900;
font-size: 12px;
& > * {
box-sizing: border-box;
}
.key {
min-height: 48px;
padding: 15px 48px 12px 24px;
background: @cyan-700;
border-bottom: 1px solid @cyan-600;
color: @cyan-100;
white-space: pre-wrap;
word-wrap: break-word;
font-size: 16px;
}
.type {
padding: 12px 24px;
background: @cyan-800;
border-bottom: 1px solid @cyan-700;
color: @cyan-400;
position: relative;
.type-icon {
font-size: 16px;
margin-right: 6px;
vertical-align: middle;
}
.type-name {
vertical-align: middle;
}
.buttons {
position: absolute;
top: 11px;
right: 24px;
& > * {
margin-left: 8px;
float: left;
}
a {
font-size: 10px;
line-height: 1em;
display: inline-block;
padding: 4px 8px;
color: @cyan-900;
text-decoration: none;
background: @cyan-600;
border-radius: 4px;
transition: background 300ms;
}
a:hover {
background: @cyan-500;
}
a.active, a:active {
color: @cyan-50;
background: @cyan-400;
}
.pill {
a {
margin-left: 1px;
border-radius: 0;
}
a:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
a:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
}
}
}
.value {
flex: 1;
overflow: auto;
padding: 24px;
position: relative;
.value-item {
position: relative;
}
.value-item .actions {
display: inline-block;
position: absolute;
top: 1px;
right: 1px;
padding: 2px 6px;
font-size: 9px;
line-height: 12px;
background: @cyan-50;
color: @white;
border-bottom-left-radius: 5px;
}
.value-item:hover .actions {
background-color: @cyan-300;
}
.value-item .actions a {
display: inline-block;
margin-left: 6px;
color: @white;
font-size: 12px;
vertical-align: middle;
}
.value-item .actions a:first-child {
margin-left: 0;
}
.value-item .actions a i {
font-size: 12px;
}
.value-item .actions a:hover {
color: @cyan-800;
}
.value-item .actions a:active {
color: @cyan-900;
}
pre {
display: block;
padding: 0;
margin: 0 0 12px 0;
white-space: pre-wrap;
word-wrap: break-word;
}
pre:last-child {
margin-bottom: 0;
}
pre code {
display: block;
padding: 12px;
background: @white !important;
border: 1px solid @grey-100;
border-bottom-color: @grey-200;
}
}
}
}
}
================================================
FILE: styles/components/values-table.less
================================================
.values-table {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
table {
display: flex;
flex-direction: column;
height: 100%;
}
thead {
flex: 0 0 auto;
display: block;
.zDepth(1);
tr {
display: flex;
flex-direction: row;
}
th {
flex: 1;
padding: 0 @space;
text-align: left;
background: @grey-100;
border-bottom: none;
}
.search {
margin-top: -12px;
margin-bottom: -9px;
}
}
tbody {
flex: 1 1 auto;
display: block;
tr {
display: flex;
flex-direction: row;
td {
border-bottom: 1px solid @grey-100;
padding: @space/2 @space;
height: (30 - @space);
line-height: (30 - @space);
font-size: 12px;
}
td.key {
color: @grey-800;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
strong {
color: @cyan-600;
}
}
td.value {
flex: 1;
color: @grey-300;
padding-left: 0;
padding-right: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
td.type i {
font-size: 16px;
vertical-align: middle;
color: @blue-grey-200;
}
}
tr:hover {
td {
cursor: pointer;
background: @grey-50;
}
td.key {
color: @grey-900;
}
td.value {
color: @grey-600;
}
}
tr.selected {
td {
background: @cyan-50;
}
td.key {
color: @cyan-900;
}
td.value {
color: @cyan-700;
}
}
}
}
================================================
FILE: styles/handlers/browse.less
================================================
.main {
.browse {
flex: 1;
position: relative;
}
}
================================================
FILE: styles/handlers/info.less
================================================
.main {
.info {
flex: 1;
position: relative;
overflow-y: auto;
background: @grey-100;
}
.host-info {
padding: 24px;
-webkit-column-count: 3;
-webkit-column-gap: 24px;
.host-info-group {
box-sizing: border-box;
display: inline-block;
padding: 12px;
margin-bottom: 24px;
width: 100%;
h3 {
margin: 0 0 4px 0;
padding: 0;
font-size: 12px;
color: @cyan;
}
table {
width: 100%;
font-size: 11px;
tr {
td {
padding: 2px 0;
white-space: pre-wrap;
word-wrap: break-word;
strong {
color: @cyan-200;
margin-top: 5px;
}
}
td.prop {
padding-right: 12px;
color: @grey-500;
}
td.value {
}
}
tr:nth-child(2n) {
td {
background: #fbfbfb;
}
}
}
}
}
}
================================================
FILE: styles/handlers/main.less
================================================
.main {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
.header {
flex: 0 0 @toolbarHeight;
.zDepth(2);
}
}
================================================
FILE: styles/index.less
================================================
// Fonts
@import url(fonts/Roboto/Roboto.css);
@import url(fonts/MaterialIcons/MaterialIcons.css);
// Utils
@import "utils/variables.less";
@import "utils/material-colors.less";
@import "utils/mixins.less";
@import "utils/highlight.less";
// Handlers
@import "handlers/main.less";
@import "handlers/browse.less";
@import "handlers/info.less";
// Components
@import "components/header.less";
@import "components/key-details.less";
@import "components/values-table.less";
// Reset html/body
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background: none;
//-webkit-user-select: none;
//-webkit-user-drag: none;
font-family: @font-regular;
cursor: default;
-webkit-font-smoothing: subpixel-antialiased;
text-rendering: optimizelegibility;
//-webkit-font-smoothing: antialiased;
img {
pointer-events: none;
}
}
================================================
FILE: styles/utils/highlight.less
================================================
/*
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
color: #333;
background: #f8f8f8;
-webkit-text-size-adjust: none;
}
.hljs-comment,
.diff .hljs-header {
color: #998;
font-style: italic;
}
.hljs-keyword,
.css .rule .hljs-keyword,
.hljs-winutils,
.nginx .hljs-title,
.hljs-subst,
.hljs-request,
.hljs-status {
color: #333;
font-weight: bold;
}
.hljs-number,
.hljs-hexcolor,
.ruby .hljs-constant {
color: #008080;
}
.hljs-string,
.hljs-tag .hljs-value,
.hljs-doctag,
.tex .hljs-formula {
color: #d14;
}
.hljs-title,
.hljs-id,
.scss .hljs-preprocessor {
color: #900;
font-weight: bold;
}
.hljs-list .hljs-keyword,
.hljs-subst {
font-weight: normal;
}
.hljs-class .hljs-title,
.hljs-type,
.vhdl .hljs-literal,
.tex .hljs-command {
color: #458;
font-weight: bold;
}
.hljs-tag,
.hljs-tag .hljs-title,
.hljs-rule .hljs-property,
.django .hljs-tag .hljs-keyword {
color: #000080;
font-weight: normal;
}
.hljs-attribute,
.hljs-variable,
.lisp .hljs-body,
.hljs-name {
color: #008080;
}
.hljs-regexp {
color: #009926;
}
.hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.lisp .hljs-keyword,
.clojure .hljs-keyword,
.scheme .hljs-keyword,
.tex .hljs-special,
.hljs-prompt {
color: #990073;
}
.hljs-built_in {
color: #0086b3;
}
.hljs-preprocessor,
.hljs-pragma,
.hljs-pi,
.hljs-doctype,
.hljs-shebang,
.hljs-cdata {
color: #999;
font-weight: bold;
}
.hljs-deletion {
background: #fdd;
}
.hljs-addition {
background: #dfd;
}
.diff .hljs-change {
background: #0086b3;
}
.hljs-chunk {
color: #aaa;
}
================================================
FILE: styles/utils/material-colors.less
================================================
// ==========================================================================
//
// Name: UI Color Palette
// Description: The color palette of material design.
// Version: 2.1.0
//
// Author: Denis Malinochkin
// Git: https://github.com/mrmlnc/material-color
//
// twitter: @mrmlnc
//
// ==========================================================================
// Palettes
// --------------------------------------------------------------------------
// Red
@list-red: #ffebee, #ffcdd2, #ef9a9a, #e57373, #ef5350,
#f44336, #e53935, #d32f2f, #c62828, #b71c1c,
#ff8a80, #ff5252, #ff1744, #d50000;
// Pink
@list-pink: #fce4ec, #f8bbd0, #f48fb1, #f06292, #ec407a,
#e91e63, #d81b60, #c2185b, #ad1457, #880e4f,
#ff80ab, #ff4081, #f50057, #c51162;
// Purple
@list-purple: #f3e5f5, #e1bee7, #ce93d8, #ba68c8, #ab47bc,
#9c27b0, #8e24aa, #7b1fa2, #6a1b9a, #4a148c,
#ea80fc, #e040fb, #d500f9, #aa00ff;
// Deep Purple
@list-deep-purple: #ede7f6, #d1c4e9, #b39ddb, #9575cd, #7e57c2,
#673ab7, #5e35b1, #512da8, #4527a0, #311b92,
#b388ff, #7c4dff, #651fff, #6200ea;
// Indigo
@list-indigo: #e8eaf6, #c5cae9, #9fa8da, #7986cb, #5c6bc0,
#3f51b5, #3949ab, #303f9f, #283593, #1a237e,
#8c9eff, #536dfe, #3d5afe, #304ffe;
// Blue
@list-blue: #e3f2fd, #bbdefb, #90caf9, #64b5f6, #42a5f5,
#2196f3, #1e88e5, #1976d2, #1565c0, #0d47a1,
#82b1ff, #448aff, #2979ff, #2962ff;
// Light Blue
@list-light-blue: #e1f5fe, #b3e5fc, #81d4fa, #4fc3f7, #29b6f6,
#03a9f4, #039be5, #0288d1, #0277bd, #01579b,
#80d8ff, #40c4ff, #00b0ff, #0091ea;
// Cyan
@list-cyan: #e0f7fa, #b2ebf2, #80deea, #4dd0e1, #26c6da,
#00bcd4, #00acc1, #0097a7, #00838f, #006064,
#84ffff, #18ffff, #00e5ff, #00b8d4;
// Teal
@list-teal: #e0f2f1, #b2dfdb, #80cbc4, #4db6ac, #26a69a,
#009688, #00897b, #00796b, #00695c, #004d40,
#a7ffeb, #64ffda, #1de9b6, #00bfa5;
// Green
@list-green: #e8f5e9, #c8e6c9, #a5d6a7, #81c784, #66bb6a,
#4caf50, #43a047, #388e3c, #2e7d32, #1b5e20,
#b9f6ca, #69f0ae, #00e676, #00c853;
// Light Green
@list-light-green: #f1f8e9, #dcedc8, #c5e1a5, #aed581, #9ccc65,
#8bc34a, #7cb342, #689f38, #558b2f, #33691e,
#ccff90, #b2ff59, #76ff03, #64dd17;
// Lime
@list-lime: #f9fbe7, #f0f4c3, #e6ee9c, #dce775, #d4e157,
#cddc39, #c0ca33, #afb42b, #9e9d24, #827717,
#f4ff81, #eeff41, #c6ff00, #aeea00;
// Yellow
@list-yellow: #fffde7, #fff9c4, #fff59d, #fff176, #ffee58,
#ffeb3b, #fdd835, #fbc02d, #f9a825, #f57f17,
#ffff8d, #ffff00, #ffea00, #ffd600;
// Amber
@list-amber: #fff8e1, #ffecb3, #ffe082, #ffd54f, #ffca28,
#ffc107, #ffb300, #ffa000, #ff8f00, #ff6f00,
#ffe57f, #ffd740, #ffc400, #ffab00;
// Orange
@list-orange: #fff3e0, #ffe0b2, #ffcc80, #ffb74d, #ffa726,
#ff9800, #fb8c00, #f57c00, #ef6c00, #e65100,
#ffd180, #ffab40, #ff9100, #ff6d00;
// Deep Orange
@list-deep-orange: #fbe9e7, #ffccbc, #ffab91, #ff8a65, #ff7043,
#ff5722, #f4511e, #e64a19, #d84315, #bf360c,
#ff9e80, #ff6e40, #ff3d00, #dd2c00;
// Brown
@list-brown: #efebe9, #d7ccc8, #bcaaa4, #a1887f, #8d6e63,
#795548, #6d4c41, #5d4037, #4e342e, #3e2723;
// Grey
@list-grey: #fafafa, #f5f5f5, #eeeeee, #e0e0e0, #bdbdbd,
#9e9e9e, #757575, #616161, #424242, #212121;
// Blue Grey
@list-blue-grey: #eceff1, #cfd8dc, #b0bec5, #90a4ae, #78909c,
#607d8b, #546e7a, #455a64, #37474f, #263238;
// Definitions
// --------------------------------------------------------------------------
// Red
@red: extract(@list-red, 6);
@red-50: extract(@list-red, 1);
@red-100: extract(@list-red, 2);
@red-200: extract(@list-red, 3);
@red-300: extract(@list-red, 4);
@red-400: extract(@list-red, 5);
@red-500: extract(@list-red, 6);
@red-600: extract(@list-red, 7);
@red-700: extract(@list-red, 8);
@red-800: extract(@list-red, 9);
@red-900: extract(@list-red, 10);
@red-A100: extract(@list-red, 11);
@red-A200: extract(@list-red, 12);
@red-A400: extract(@list-red, 13);
@red-A700: extract(@list-red, 14);
// Pink
@pink: extract(@list-pink, 6);
@pink-50: extract(@list-pink, 1);
@pink-100: extract(@list-pink, 2);
@pink-200: extract(@list-pink, 3);
@pink-300: extract(@list-pink, 4);
@pink-400: extract(@list-pink, 5);
@pink-500: extract(@list-pink, 6);
@pink-600: extract(@list-pink, 7);
@pink-700: extract(@list-pink, 8);
@pink-800: extract(@list-pink, 9);
@pink-900: extract(@list-pink, 10);
@pink-A100: extract(@list-pink, 11);
@pink-A200: extract(@list-pink, 12);
@pink-A400: extract(@list-pink, 13);
@pink-A700: extract(@list-pink, 14);
// Purple
@purple: extract(@list-purple, 6);
@purple-50: extract(@list-purple, 1);
@purple-100: extract(@list-purple, 2);
@purple-200: extract(@list-purple, 3);
@purple-300: extract(@list-purple, 4);
@purple-400: extract(@list-purple, 5);
@purple-500: extract(@list-purple, 6);
@purple-600: extract(@list-purple, 7);
@purple-700: extract(@list-purple, 8);
@purple-800: extract(@list-purple, 9);
@purple-900: extract(@list-purple, 10);
@purple-A100: extract(@list-purple, 11);
@purple-A200: extract(@list-purple, 12);
@purple-A400: extract(@list-purple, 13);
@purple-A700: extract(@list-purple, 14);
// Deep Purple
@deep-purple: extract(@list-deep-purple, 6);
@deep-purple-50: extract(@list-deep-purple, 1);
@deep-purple-100: extract(@list-deep-purple, 2);
@deep-purple-200: extract(@list-deep-purple, 3);
@deep-purple-300: extract(@list-deep-purple, 4);
@deep-purple-400: extract(@list-deep-purple, 5);
@deep-purple-500: extract(@list-deep-purple, 6);
@deep-purple-600: extract(@list-deep-purple, 7);
@deep-purple-700: extract(@list-deep-purple, 8);
@deep-purple-800: extract(@list-deep-purple, 9);
@deep-purple-900: extract(@list-deep-purple, 10);
@deep-purple-A100: extract(@list-deep-purple, 11);
@deep-purple-A200: extract(@list-deep-purple, 12);
@deep-purple-A400: extract(@list-deep-purple, 13);
@deep-purple-A700: extract(@list-deep-purple, 14);
// Indigo
@indigo: extract(@list-indigo, 6);
@indigo-50: extract(@list-indigo, 1);
@indigo-100: extract(@list-indigo, 2);
@indigo-200: extract(@list-indigo, 3);
@indigo-300: extract(@list-indigo, 4);
@indigo-400: extract(@list-indigo, 5);
@indigo-500: extract(@list-indigo, 6);
@indigo-600: extract(@list-indigo, 7);
@indigo-700: extract(@list-indigo, 8);
@indigo-800: extract(@list-indigo, 9);
@indigo-900: extract(@list-indigo, 10);
@indigo-A100: extract(@list-indigo, 11);
@indigo-A200: extract(@list-indigo, 12);
@indigo-A400: extract(@list-indigo, 13);
@indigo-A700: extract(@list-indigo, 14);
// Blue
@blue: extract(@list-blue, 6);
@blue-50: extract(@list-blue, 1);
@blue-100: extract(@list-blue, 2);
@blue-200: extract(@list-blue, 3);
@blue-300: extract(@list-blue, 4);
@blue-400: extract(@list-blue, 5);
@blue-500: extract(@list-blue, 6);
@blue-600: extract(@list-blue, 7);
@blue-700: extract(@list-blue, 8);
@blue-800: extract(@list-blue, 9);
@blue-900: extract(@list-blue, 10);
@blue-A100: extract(@list-blue, 11);
@blue-A200: extract(@list-blue, 12);
@blue-A400: extract(@list-blue, 13);
@blue-A700: extract(@list-blue, 14);
// Light Blue
@light-blue: extract(@list-light-blue, 6);
@light-blue-50: extract(@list-light-blue, 1);
@light-blue-100: extract(@list-light-blue, 2);
@light-blue-200: extract(@list-light-blue, 3);
@light-blue-300: extract(@list-light-blue, 4);
@light-blue-400: extract(@list-light-blue, 5);
@light-blue-500: extract(@list-light-blue, 6);
@light-blue-600: extract(@list-light-blue, 7);
@light-blue-700: extract(@list-light-blue, 8);
@light-blue-800: extract(@list-light-blue, 9);
@light-blue-900: extract(@list-light-blue, 10);
@light-blue-A100: extract(@list-light-blue, 11);
@light-blue-A200: extract(@list-light-blue, 12);
@light-blue-A400: extract(@list-light-blue, 13);
@light-blue-A700: extract(@list-light-blue, 14);
// Cyan
@cyan: extract(@list-cyan, 6);
@cyan-50: extract(@list-cyan, 1);
@cyan-100: extract(@list-cyan, 2);
@cyan-200: extract(@list-cyan, 3);
@cyan-300: extract(@list-cyan, 4);
@cyan-400: extract(@list-cyan, 5);
@cyan-500: extract(@list-cyan, 6);
@cyan-600: extract(@list-cyan, 7);
@cyan-700: extract(@list-cyan, 8);
@cyan-800: extract(@list-cyan, 9);
@cyan-900: extract(@list-cyan, 10);
@cyan-A100: extract(@list-cyan, 11);
@cyan-A200: extract(@list-cyan, 12);
@cyan-A400: extract(@list-cyan, 13);
@cyan-A700: extract(@list-cyan, 14);
// Teal
@teal: extract(@list-teal, 6);
@teal-50: extract(@list-teal, 1);
@teal-100: extract(@list-teal, 2);
@teal-200: extract(@list-teal, 3);
@teal-300: extract(@list-teal, 4);
@teal-400: extract(@list-teal, 5);
@teal-500: extract(@list-teal, 6);
@teal-600: extract(@list-teal, 7);
@teal-700: extract(@list-teal, 8);
@teal-800: extract(@list-teal, 9);
@teal-900: extract(@list-teal, 10);
@teal-A100: extract(@list-teal, 11);
@teal-A200: extract(@list-teal, 12);
@teal-A400: extract(@list-teal, 13);
@teal-A700: extract(@list-teal, 14);
// Green
@green: extract(@list-green, 6);
@green-50: extract(@list-green, 1);
@green-100: extract(@list-green, 2);
@green-200: extract(@list-green, 3);
@green-300: extract(@list-green, 4);
@green-400: extract(@list-green, 5);
@green-500: extract(@list-green, 6);
@green-600: extract(@list-green, 7);
@green-700: extract(@list-green, 8);
@green-800: extract(@list-green, 9);
@green-900: extract(@list-green, 10);
@green-A100: extract(@list-green, 11);
@green-A200: extract(@list-green, 12);
@green-A400: extract(@list-green, 13);
@green-A700: extract(@list-green, 14);
// Light Green
@light-green: extract(@list-light-green, 6);
@light-green-50: extract(@list-light-green, 1);
@light-green-100: extract(@list-light-green, 2);
@light-green-200: extract(@list-light-green, 3);
@light-green-300: extract(@list-light-green, 4);
@light-green-400: extract(@list-light-green, 5);
@light-green-500: extract(@list-light-green, 6);
@light-green-600: extract(@list-light-green, 7);
@light-green-700: extract(@list-light-green, 8);
@light-green-800: extract(@list-light-green, 9);
@light-green-900: extract(@list-light-green, 10);
@light-green-A100: extract(@list-light-green, 11);
@light-green-A200: extract(@list-light-green, 12);
@light-green-A400: extract(@list-light-green, 13);
@light-green-A700: extract(@list-light-green, 14);
// Lime
@lime: extract(@list-lime, 6);
@lime-50: extract(@list-lime, 1);
@lime-100: extract(@list-lime, 2);
@lime-200: extract(@list-lime, 3);
@lime-300: extract(@list-lime, 4);
@lime-400: extract(@list-lime, 5);
@lime-500: extract(@list-lime, 6);
@lime-600: extract(@list-lime, 7);
@lime-700: extract(@list-lime, 8);
@lime-800: extract(@list-lime, 9);
@lime-900: extract(@list-lime, 10);
@lime-A100: extract(@list-lime, 11);
@lime-A200: extract(@list-lime, 12);
@lime-A400: extract(@list-lime, 13);
@lime-A700: extract(@list-lime, 14);
//Yellow
@yellow: extract(@list-yellow, 6);
@yellow-50: extract(@list-yellow, 1);
@yellow-100: extract(@list-yellow, 2);
@yellow-200: extract(@list-yellow, 3);
@yellow-300: extract(@list-yellow, 4);
@yellow-400: extract(@list-yellow, 5);
@yellow-500: extract(@list-yellow, 6);
@yellow-600: extract(@list-yellow, 7);
@yellow-700: extract(@list-yellow, 8);
@yellow-800: extract(@list-yellow, 9);
@yellow-900: extract(@list-yellow, 10);
@yellow-A100: extract(@list-yellow, 11);
@yellow-A200: extract(@list-yellow, 12);
@yellow-A400: extract(@list-yellow, 13);
@yellow-A700: extract(@list-yellow, 14);
// Amber
@amber: extract(@list-amber, 6);
@amber-50: extract(@list-amber, 1);
@amber-100: extract(@list-amber, 2);
@amber-200: extract(@list-amber, 3);
@amber-300: extract(@list-amber, 4);
@amber-400: extract(@list-amber, 5);
@amber-500: extract(@list-amber, 6);
@amber-600: extract(@list-amber, 7);
@amber-700: extract(@list-amber, 8);
@amber-800: extract(@list-amber, 9);
@amber-900: extract(@list-amber, 10);
@amber-A100: extract(@list-amber, 11);
@amber-A200: extract(@list-amber, 12);
@amber-A400: extract(@list-amber, 13);
@amber-A700: extract(@list-amber, 14);
// Orange
@orange: extract(@list-orange, 6);
@orange-50: extract(@list-orange, 1);
@orange-100: extract(@list-orange, 2);
@orange-200: extract(@list-orange, 3);
@orange-300: extract(@list-orange, 4);
@orange-400: extract(@list-orange, 5);
@orange-500: extract(@list-orange, 6);
@orange-600: extract(@list-orange, 7);
@orange-700: extract(@list-orange, 8);
@orange-800: extract(@list-orange, 9);
@orange-900: extract(@list-orange, 10);
@orange-A100: extract(@list-orange, 11);
@orange-A200: extract(@list-orange, 12);
@orange-A400: extract(@list-orange, 13);
@orange-A700: extract(@list-orange, 14);
// Deep Orange
@deep-orange: extract(@list-deep-orange, 6);
@deep-orange-50: extract(@list-deep-orange, 1);
@deep-orange-100: extract(@list-deep-orange, 2);
@deep-orange-200: extract(@list-deep-orange, 3);
@deep-orange-300: extract(@list-deep-orange, 4);
@deep-orange-400: extract(@list-deep-orange, 5);
@deep-orange-500: extract(@list-deep-orange, 6);
@deep-orange-600: extract(@list-deep-orange, 7);
@deep-orange-700: extract(@list-deep-orange, 8);
@deep-orange-800: extract(@list-deep-orange, 9);
@deep-orange-900: extract(@list-deep-orange, 10);
@deep-orange-A100: extract(@list-deep-orange, 11);
@deep-orange-A200: extract(@list-deep-orange, 12);
@deep-orange-A400: extract(@list-deep-orange, 13);
@deep-orange-A700: extract(@list-deep-orange, 14);
// Brown
@brown: extract(@list-brown, 6);
@brown-50: extract(@list-brown, 1);
@brown-100: extract(@list-brown, 2);
@brown-200: extract(@list-brown, 3);
@brown-300: extract(@list-brown, 4);
@brown-400: extract(@list-brown, 5);
@brown-500: extract(@list-brown, 6);
@brown-600: extract(@list-brown, 7);
@brown-700: extract(@list-brown, 8);
@brown-800: extract(@list-brown, 9);
@brown-900: extract(@list-brown, 10);
// Grey
@grey: extract(@list-grey, 6);
@grey-50: extract(@list-grey, 1);
@grey-100: extract(@list-grey, 2);
@grey-200: extract(@list-grey, 3);
@grey-300: extract(@list-grey, 4);
@grey-400: extract(@list-grey, 5);
@grey-500: extract(@list-grey, 6);
@grey-600: extract(@list-grey, 7);
@grey-700: extract(@list-grey, 8);
@grey-800: extract(@list-grey, 9);
@grey-900: extract(@list-grey, 10);
// Blue Grey
@blue-grey: extract(@list-blue-grey, 6);
@blue-grey-50: extract(@list-blue-grey, 1);
@blue-grey-100: extract(@list-blue-grey, 2);
@blue-grey-200: extract(@list-blue-grey, 3);
@blue-grey-300: extract(@list-blue-grey, 4);
@blue-grey-400: extract(@list-blue-grey, 5);
@blue-grey-500: extract(@list-blue-grey, 6);
@blue-grey-600: extract(@list-blue-grey, 7);
@blue-grey-700: extract(@list-blue-grey, 8);
@blue-grey-800: extract(@list-blue-grey, 9);
@blue-grey-900: extract(@list-blue-grey, 10);
// UI Color Application
// --------------------------------------------------------------------------
// Typography
@ui-display-4: @grey-600;
@ui-display-3: @grey-600;
@ui-display-2: @grey-600;
@ui-display-1: @grey-600;
@ui-headline: @grey-900;
@ui-title: @grey-900;
@ui-subhead-1: @grey-900;
@ui-body-2: @grey-900;
@ui-body-1: @grey-900;
@ui-caption: @grey-600;
@ui-menu: @grey-900;
@ui-button: @grey-900;
================================================
FILE: styles/utils/mixins.less
================================================
// Paper-like shadows based on 'zDepth'.
.zDepth(0) {
box-shadow: none;
z-index: 0;
}
.zDepth(1) {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.12);
z-index: 1;
}
.zDepth(2) {
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10), 0 3px 10px rgba(0, 0, 0, 0.18);
z-index: 2;
}
.zDepth(3) {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 6px 10px rgba(0, 0, 0, 0.23);
z-index: 3;
}
.zDepth(4) {
box-shadow: 0 14px 45px rgba(0, 0, 0, 0.20), 0 10px 18px rgba(0, 0, 0, 0.22);
z-index: 4;
}
.zDepth(5) {
box-shadow: 0 19px 60px rgba(0, 0, 0, 0.25), 0 15px 20px rgba(0, 0, 0, 0.22);
z-index: 5;
}
================================================
FILE: styles/utils/variables.less
================================================
// Fonts
@font-regular: 'Roboto';
@font-code: Menlo, Consolas;
// Sizes
@toolbarHeight: 56px;
@space: 16px;
// Extra Colors
@black: #000;
@white: #fff;
gitextract_o7xj8uxf/
├── .gitignore
├── Gruntfile.js
├── LICENSE
├── Makefile
├── README.md
├── fonts/
│ ├── .gitkeep
│ ├── MaterialIcons/
│ │ └── MaterialIcons.css
│ └── Roboto/
│ ├── LICENSE.txt
│ └── Roboto.css
├── images/
│ └── .gitkeep
├── index.html
├── package.json
├── resources/
│ ├── .gitkeep
│ ├── redisexplorer.icns
│ └── redisexplorer.psd
├── src/
│ ├── actions/
│ │ ├── browseActions.js
│ │ └── hostsActions.js
│ ├── alt.js
│ ├── app.js
│ ├── browser.js
│ ├── components/
│ │ ├── Header.js
│ │ ├── Highlight.js
│ │ ├── HostInfo.js
│ │ ├── HostsNav.js
│ │ ├── Icon.js
│ │ ├── KeyDetails.js
│ │ ├── LoadingRow.js
│ │ ├── ScrollList.js
│ │ ├── SidePanel.js
│ │ ├── TypeIcon.js
│ │ ├── ValuesRow.js
│ │ ├── ValuesTable.js
│ │ ├── details/
│ │ │ ├── Details.js
│ │ │ ├── HashDetails.js
│ │ │ ├── ListDetails.js
│ │ │ ├── SetDetails.js
│ │ │ ├── SortedSetDetails.js
│ │ │ └── StringDetails.js
│ │ └── handlers/
│ │ ├── BrowseHandler.js
│ │ ├── InfoHandler.js
│ │ ├── MainHandler.js
│ │ └── NotFoundHandler.js
│ ├── conf.js
│ ├── main.js
│ ├── router.js
│ ├── stores/
│ │ ├── browseStore.js
│ │ └── hostsStore.js
│ └── utils/
│ ├── db.js
│ ├── keys.js
│ ├── perf.js
│ ├── regex.js
│ ├── settings.js
│ ├── spawn.js
│ └── throttle.js
└── styles/
├── .gitkeep
├── components/
│ ├── header.less
│ ├── key-details.less
│ └── values-table.less
├── handlers/
│ ├── browse.less
│ ├── info.less
│ └── main.less
├── index.less
└── utils/
├── highlight.less
├── material-colors.less
├── mixins.less
└── variables.less
SYMBOL INDEX (190 symbols across 33 files)
FILE: src/actions/browseActions.js
class BrowseActions (line 8) | class BrowseActions {
method resetKeys (line 12) | resetKeys () {
method setOffset (line 16) | setOffset (offset) {
method setMatch (line 20) | setMatch (match) {
method toggleSelectedKey (line 24) | toggleSelectedKey (key) {
method toggleSelectedIndex (line 28) | toggleSelectedIndex (index) {
method toggleSelected (line 33) | toggleSelected (item) {
method fetchKeys (line 39) | fetchKeys (options = {}) {
method fetchKeysNext (line 54) | fetchKeysNext () {
method fetchKeysAdd (line 68) | fetchKeysAdd (keys) {
method fetchKeysFailed (line 73) | fetchKeysFailed (err) {
method fetchKeysFinished (line 77) | fetchKeysFinished () {
method fetchValues (line 83) | fetchValues (keys) {
method fetchValuesAdd (line 96) | fetchValuesAdd (values) {
method fetchValuesFailed (line 100) | fetchValuesFailed (err) {
FILE: src/actions/hostsActions.js
class HostsActions (line 4) | class HostsActions {
method connectToHost (line 8) | connectToHost (host) {
method connectToHostFailed (line 20) | connectToHostFailed (err) {
method connectedToHost (line 24) | connectedToHost () {
method fetchHostInfo (line 30) | fetchHostInfo (isRefresh) {
method fetchHostInfoFinished (line 42) | fetchHostInfoFinished (info) {
method fetchHostInfoFailed (line 46) | fetchHostInfoFailed (err) {
FILE: src/app.js
constant CMDORCTRL (line 11) | const CMDORCTRL = (process.platform === 'win32') ? 'Ctrl' : 'Command'
FILE: src/components/Header.js
class Header (line 11) | @autobind
method onClickHostButton (line 21) | onClickHostButton (e) {
method getHostButtonClass (line 26) | getHostButtonClass () {
method render (line 36) | render () {
FILE: src/components/Highlight.js
class Highlight (line 5) | @autobind
method componentDidMount (line 19) | componentDidMount () {
method componentDidUpdate (line 23) | componentDidUpdate () {
method highlightCode (line 27) | highlightCode () {
method render (line 36) | render () {
FILE: src/components/HostInfo.js
class HostInfo (line 6) | @pureRender
method getInfo (line 116) | getInfo () {
method renderGroup (line 160) | renderGroup (group) {
method render (line 182) | render () {
FILE: src/components/HostsNav.js
class HostsNav (line 9) | @autobind
method shouldComponentUpdate (line 17) | shouldComponentUpdate (nextProps, nextState) {
method toggle (line 24) | toggle () {
method onChangeHost (line 28) | onChangeHost (e, i, menuItem) {
method render (line 35) | render () {
FILE: src/components/Icon.js
class Icon (line 3) | class Icon extends React.Component {
method render (line 16) | render () {
FILE: src/components/KeyDetails.js
class KeyDetails (line 10) | @pureRender
method render (line 17) | render () {
FILE: src/components/LoadingRow.js
class LoadingRow (line 3) | class LoadingRow extends React.Component {
method render (line 13) | render () {
FILE: src/components/ScrollList.js
class ScrollList (line 6) | @pureRender
method componentDidMount (line 45) | componentDidMount () {
method onScroll (line 49) | onScroll (e) {
method getDisplayOffset (line 63) | getDisplayOffset () {
method ensureVisible (line 68) | ensureVisible (index) {
method renderItems (line 83) | renderItems () {
method render (line 121) | render () {
FILE: src/components/SidePanel.js
method getDefaultProps (line 36) | getDefaultProps () {
method getInitialState (line 42) | getInitialState () {
method componentDidMount (line 50) | componentDidMount () {
method componentDidUpdate (line 54) | componentDidUpdate (prevProps, prevState) {
method componentWillUnmount (line 58) | componentWillUnmount () {
method toggle (line 62) | toggle () {
method close (line 67) | close () {
method open (line 73) | open () {
method getThemePalette (line 79) | getThemePalette () {
method getTheme (line 83) | getTheme () {
method getWidth (line 87) | getWidth () {
method getStyles (line 91) | getStyles () {
method render (line 114) | render () {
method _onOverlayTouchTap (line 147) | _onOverlayTouchTap () {
method _onWindowKeyUp (line 151) | _onWindowKeyUp (e) {
method _getMaxTranslateX (line 159) | _getMaxTranslateX () {
method _getTranslateMultiplier (line 163) | _getTranslateMultiplier () {
method _enableSwipeHandling (line 167) | _enableSwipeHandling () {
method _disableSwipeHandling (line 175) | _disableSwipeHandling () {
method _onBodyTouchStart (line 179) | _onBodyTouchStart (e) {
method _onBodyTouchMove (line 193) | _onBodyTouchMove (e) {
method _onBodyTouchEnd (line 230) | _onBodyTouchEnd () {
FILE: src/components/TypeIcon.js
class TypeIcon (line 5) | class TypeIcon extends React.Component {
method render (line 12) | render () {
FILE: src/components/ValuesRow.js
class ValuesRow (line 8) | @pureRender
method onClick (line 19) | onClick (e) {
method renderKey (line 26) | renderKey () {
method renderValue (line 46) | renderValue () {
method render (line 81) | render () {
FILE: src/components/ValuesTable.js
class ValuesTable (line 14) | @pureRender
method componentDidUpdate (line 35) | componentDidUpdate (prevProps) {
method getHotKeys (line 43) | getHotKeys () {
method onSearchChange (line 69) | onSearchChange (e) {
method onScroll (line 73) | onScroll (e, newOffset) {
method renderRoot (line 90) | renderRoot (props, children) {
method renderItem (line 94) | renderItem (props, item, index) {
method renderPlaceholder (line 98) | renderPlaceholder (props) {
method render (line 102) | render () {
FILE: src/components/details/Details.js
class Details (line 5) | class Details extends React.Component {
method render (line 14) | render () {
FILE: src/components/details/HashDetails.js
class HashDetails (line 6) | @pureRender
method render (line 13) | render () {
FILE: src/components/details/ListDetails.js
class ListDetails (line 9) | @pureRender
method renderValue (line 22) | renderValue () {
method renderButtons (line 54) | renderButtons () {
method render (line 83) | render () {
FILE: src/components/details/SetDetails.js
class SetDetails (line 9) | @pureRender
method renderValue (line 22) | renderValue () {
method renderButtons (line 53) | renderButtons () {
method render (line 82) | render () {
FILE: src/components/details/SortedSetDetails.js
class SortedSetDetails (line 9) | @pureRender
method renderValue (line 22) | renderValue () {
method renderButtons (line 54) | renderButtons () {
method render (line 83) | render () {
FILE: src/components/details/StringDetails.js
class KeyDetails (line 8) | @pureRender
method renderValue (line 21) | renderValue () {
method renderButtons (line 40) | renderButtons () {
method render (line 75) | render () {
FILE: src/components/handlers/BrowseHandler.js
class BrowseHandler (line 18) | @pureRender
method willTransitionTo (line 21) | static willTransitionTo () {
method render (line 29) | render () {
class Browse (line 37) | @connectToStores
method getStores (line 49) | static getStores () {
method getPropsFromStores (line 53) | static getPropsFromStores () {
method componentWillReceiveProps (line 61) | componentWillReceiveProps (nextProps) {
method fetchKeys (line 80) | @throttle(250)
method toggleKeyDetails (line 85) | toggleKeyDetails () {
method onClickClose (line 92) | onClickClose (e) {
method render (line 96) | render () {
FILE: src/components/handlers/InfoHandler.js
class InfoHandler (line 14) | @pureRender
method willTransitionTo (line 17) | static willTransitionTo () {
method render (line 24) | render () {
class Info (line 32) | @connectToStores
method getStores (line 43) | static getStores () {
method getPropsFromStores (line 47) | static getPropsFromStores () {
method componentDidMount (line 51) | componentDidMount () {
method componentWillUnmount (line 55) | componentWillUnmount () {
method componentWillReceiveProps (line 59) | componentWillReceiveProps (nextProps) {
method fetchHostInfo (line 66) | @throttle(250)
method render (line 71) | render () {
FILE: src/components/handlers/MainHandler.js
class MainHandler (line 16) | class MainHandler extends React.Component {
method willTransitionTo (line 18) | static willTransitionTo () {
method render (line 22) | render () {
class Main (line 30) | @connectToStores
method getStores (line 38) | static getStores () {
method getPropsFromStores (line 42) | static getPropsFromStores () {
method getChildContext (line 50) | getChildContext () {
method render (line 56) | render () {
FILE: src/components/handlers/NotFoundHandler.js
class NotFoundHandler (line 3) | class NotFoundHandler extends React.Component {
method render (line 5) | render () {
FILE: src/stores/browseStore.js
class BrowseStore (line 9) | @immutable
method constructor (line 12) | constructor () {
method onResetKeys (line 32) | onResetKeys () {
method onSetOffset (line 47) | onSetOffset (offset) {
method onSetMatch (line 51) | onSetMatch (match) {
method onToggleSelectedKey (line 61) | onToggleSelectedKey (key) {
method onToggleSelectedIndex (line 70) | onToggleSelectedIndex (index) {
method onToggleSelected (line 75) | onToggleSelected (item = {}) {
method onFetchKeys (line 97) | onFetchKeys () {
method onFetchKeysAdd (line 114) | onFetchKeysAdd (newKeys) {
method onFetchKeysFailed (line 129) | onFetchKeysFailed (err) {
method onFetchKeysFinished (line 135) | onFetchKeysFinished () {
method onFetchValues (line 143) | onFetchValues (keys) {
method onFetchValuesAdd (line 147) | onFetchValuesAdd (values) {
method onFetchValuesFailed (line 155) | onFetchValuesFailed (err) {
FILE: src/stores/hostsStore.js
class HostsStore (line 11) | @immutable
method constructor (line 14) | constructor () {
method onConnectToHost (line 60) | onConnectToHost (host) {
method onConnectToHostFailed (line 72) | onConnectToHostFailed (err) {
method onConnectedToHost (line 77) | onConnectedToHost () {
method onFetchHostInfo (line 84) | onFetchHostInfo (isRefresh) {
method onFetchHostInfoFailed (line 92) | onFetchHostInfoFailed (err) {
method onFetchHostInfoFinished (line 97) | onFetchHostInfoFinished (info) {
FILE: src/utils/db.js
constant DST_PORT (line 6) | const DST_PORT = 6379
constant LOCAL_PORT (line 7) | const LOCAL_PORT = 8379
constant DEFAULT_COUNT (line 8) | const DEFAULT_COUNT = 250
class DB (line 11) | class DB {
method connect (line 14) | connect (host, cb) {
method connectToHost (line 29) | connectToHost (host, cb) {
method connectToRemoteHost (line 43) | connectToRemoteHost (host, cb) {
method scan (line 61) | scan (options = {}) {
method fetchInfo (line 138) | fetchInfo (cb) {
method fetchValues (line 151) | fetchValues (keys, cb) {
method fetchStringValues (line 185) | fetchStringValues (keys) {
method fetchListValues (line 200) | fetchListValues (keys) {
method fetchSetValues (line 215) | fetchSetValues (keys) {
method fetchSortedSetValues (line 230) | fetchSortedSetValues (keys) {
method fetchHashValues (line 253) | fetchHashValues (keys) {
FILE: src/utils/keys.js
method getTypeName (line 3) | getTypeName (type) {
FILE: src/utils/regex.js
method escape (line 3) | escape (s) {
method fromGlob (line 7) | fromGlob (s) {
FILE: src/utils/settings.js
method get (line 27) | get (key, fallback) {
method set (line 31) | set (key, value) {
method write (line 36) | @throttle(1000)
FILE: src/utils/spawn.js
function spawn (line 5) | function spawn (genF) {
FILE: src/utils/throttle.js
function throttle (line 13) | function throttle (delay, options = {}) {
Condensed preview — 66 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (151K chars).
[
{
"path": ".gitignore",
"chars": 71,
"preview": ".DS_Store\n.swp\nbuild\ndist\ninstaller\nnode_modules\ncoverage\nnpm-debug.log"
},
{
"path": "Gruntfile.js",
"chars": 7277,
"preview": "var electron = require('electron-prebuilt')\nvar packagejson = require('./package.json')\nvar conf = require('./src/conf.j"
},
{
"path": "LICENSE",
"chars": 10411,
"preview": "Copyright 2015 Terra Eclipse, Inc.\nhttp://www.terraeclipse.com/\n\nCopyright 2015 Brian Link\n\nLicensed under the Apache Li"
},
{
"path": "Makefile",
"chars": 525,
"preview": "all: install dev\n\ninstall:\n\t@echo \"\"\n\t@test -d ./node_modules || npm install\n\ndev:\n\t@echo \"\"\n\t@./node_modules/.bin/stand"
},
{
"path": "README.md",
"chars": 2989,
"preview": "RedisExplorer\n==============\n\nAn [electron](http://electron.atom.io/)-powered GUI for [redis](http://redis.io/).\n\n![scre"
},
{
"path": "fonts/.gitkeep",
"chars": 0,
"preview": ""
},
{
"path": "fonts/MaterialIcons/MaterialIcons.css",
"chars": 789,
"preview": "@font-face {\n font-family: 'Material Icons';\n font-style: normal;\n font-weight: 400;\n src: local('Material Icons'),\n"
},
{
"path": "fonts/Roboto/LICENSE.txt",
"chars": 11560,
"preview": "\r\n Apache License\r\n Version 2.0, January 2004\r\n "
},
{
"path": "fonts/Roboto/Roboto.css",
"chars": 1362,
"preview": "@font-face {\n font-family: 'Roboto';\n src: url('Roboto-Regular.ttf') format('truetype');\n font-weight: normal;\n font"
},
{
"path": "images/.gitkeep",
"chars": 0,
"preview": ""
},
{
"path": "index.html",
"chars": 182,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <title>RedisExplorer</title>\n <link rel=\"stylesheet\" href=\"main.css\"/>\n </head>\n"
},
{
"path": "package.json",
"chars": 2040,
"preview": "{\n \"name\": \"redis-explorer\",\n \"version\": \"0.0.6\",\n \"description\": \"A GUI for Redis\",\n \"main\": \"browser.js\",\n \"repos"
},
{
"path": "resources/.gitkeep",
"chars": 0,
"preview": ""
},
{
"path": "src/actions/browseActions.js",
"chars": 2008,
"preview": "import alt from '../alt'\nimport db from '../utils/db'\n\n// 'Global' scan object.\nlet _scan\n\n// Browse Actions.\nclass Brow"
},
{
"path": "src/actions/hostsActions.js",
"chars": 1034,
"preview": "import alt from '../alt'\nimport db from '../utils/db'\n\nclass HostsActions {\n\n /* Connection Lifecycle\n **************"
},
{
"path": "src/alt.js",
"chars": 254,
"preview": "import Alt from 'alt'\n\n// Create alt instance.\nconst alt = new Alt()\n\n// Debug dispatcher.\nif (process.env.NODE_ENV === "
},
{
"path": "src/app.js",
"chars": 3542,
"preview": "import remote from 'remote'\nimport React from 'react'\nimport router from './router'\nimport injectTapEventPlugin from 're"
},
{
"path": "src/browser.js",
"chars": 2034,
"preview": "import app from 'app'\nimport conf from './conf'\nimport settings from './utils/settings'\nimport BrowserWindow from 'brows"
},
{
"path": "src/components/Header.js",
"chars": 1846,
"preview": "import React from 'react'\nimport ImmutablePropTypes from 'react-immutable-proptypes'\nimport autobind from 'autobind-deco"
},
{
"path": "src/components/Highlight.js",
"chars": 1014,
"preview": "import React from 'react'\nimport autobind from 'autobind-decorator'\nimport hljs from 'highlight.js'\n\n@autobind\nclass Hig"
},
{
"path": "src/components/HostInfo.js",
"chars": 4759,
"preview": "import React from 'react'\nimport pureRender from 'pure-render-decorator'\nimport ImmutablePropTypes from 'react-immutable"
},
{
"path": "src/components/HostsNav.js",
"chars": 1798,
"preview": "import React from 'react'\nimport autobind from 'autobind-decorator'\nimport ImmutablePropTypes from 'react-immutable-prop"
},
{
"path": "src/components/Icon.js",
"chars": 523,
"preview": "import React from 'react'\n\nclass Icon extends React.Component {\n\n static propTypes = {\n type: React.PropTypes.string"
},
{
"path": "src/components/KeyDetails.js",
"chars": 990,
"preview": "import React from 'react'\nimport pureRender from 'pure-render-decorator'\nimport ImmutablePropTypes from 'react-immutable"
},
{
"path": "src/components/LoadingRow.js",
"chars": 367,
"preview": "import React from 'react'\n\nclass LoadingRow extends React.Component {\n\n static propTypes = {\n cols: React.PropTypes."
},
{
"path": "src/components/ScrollList.js",
"chars": 3341,
"preview": "import React from 'react'\nimport pureRender from 'pure-render-decorator'\nimport autobind from 'autobind-decorator'\nimpor"
},
{
"path": "src/components/SidePanel.js",
"chars": 6251,
"preview": "import React from'react'\nimport KeyCode from'material-ui/lib/utils/key-code'\nimport StylePropable from'material-ui/lib/m"
},
{
"path": "src/components/TypeIcon.js",
"chars": 792,
"preview": "import React from 'react'\nimport Icon from '../components/Icon'\nimport keys from '../utils/keys'\n\nclass TypeIcon extends"
},
{
"path": "src/components/ValuesRow.js",
"chars": 2428,
"preview": "import React from 'react'\nimport pureRender from 'pure-render-decorator'\nimport autobind from 'autobind-decorator'\nimpor"
},
{
"path": "src/components/ValuesTable.js",
"chars": 3983,
"preview": "import React from 'react'\nimport ImmutablePropTypes from 'react-immutable-proptypes'\nimport pureRender from 'pure-render"
},
{
"path": "src/components/details/Details.js",
"chars": 924,
"preview": "import React from 'react'\nimport keys from '../../utils/keys'\nimport TypeIcon from '../../components/TypeIcon'\n\nclass De"
},
{
"path": "src/components/details/HashDetails.js",
"chars": 418,
"preview": "import React from 'react'\nimport pureRender from 'pure-render-decorator'\nimport ImmutablePropTypes from 'react-immutable"
},
{
"path": "src/components/details/ListDetails.js",
"chars": 2257,
"preview": "import React from 'react'\nimport pureRender from 'pure-render-decorator'\nimport ImmutablePropTypes from 'react-immutable"
},
{
"path": "src/components/details/SetDetails.js",
"chars": 2208,
"preview": "import React from 'react'\nimport pureRender from 'pure-render-decorator'\nimport ImmutablePropTypes from 'react-immutable"
},
{
"path": "src/components/details/SortedSetDetails.js",
"chars": 2301,
"preview": "import React from 'react'\nimport pureRender from 'pure-render-decorator'\nimport ImmutablePropTypes from 'react-immutable"
},
{
"path": "src/components/details/StringDetails.js",
"chars": 1977,
"preview": "import React from 'react'\nimport pureRender from 'pure-render-decorator'\nimport ImmutablePropTypes from 'react-immutable"
},
{
"path": "src/components/handlers/BrowseHandler.js",
"chars": 3070,
"preview": "import React from 'react'\nimport autobind from 'autobind-decorator'\nimport connectToStores from 'alt/utils/connectToStor"
},
{
"path": "src/components/handlers/InfoHandler.js",
"chars": 1875,
"preview": "import React from 'react'\nimport ImmutablePropTypes from 'react-immutable-proptypes'\nimport autobind from 'autobind-deco"
},
{
"path": "src/components/handlers/MainHandler.js",
"chars": 1320,
"preview": "import React from 'react'\nimport autobind from 'autobind-decorator'\nimport connectToStores from 'alt/utils/connectToStor"
},
{
"path": "src/components/handlers/NotFoundHandler.js",
"chars": 233,
"preview": "import React from 'react'\n\nclass NotFoundHandler extends React.Component {\n\n render () {\n return (\n <div classN"
},
{
"path": "src/conf.js",
"chars": 480,
"preview": "var conf = {}\n\nconf.BASENAME = 'RedisExplorer'\nconf.APPNAME = conf.BASENAME\nconf.DEVELPER_ID = 'Brian Link'\nconf.COMPANY"
},
{
"path": "src/main.js",
"chars": 74,
"preview": "/**\n * Entry point for babel.\n */\n\nimport 'babel/polyfill'\nimport './app'\n"
},
{
"path": "src/router.js",
"chars": 666,
"preview": "import React from 'react'\nimport Router, {Route, NotFoundRoute} from 'react-router'\n\nimport MainHandler from './componen"
},
{
"path": "src/stores/browseStore.js",
"chars": 4109,
"preview": "import alt from '../alt'\nimport _ from 'underscore'\nimport Immutable from 'immutable'\nimport immutable from 'alt/utils/I"
},
{
"path": "src/stores/hostsStore.js",
"chars": 2713,
"preview": "import alt from '../alt'\nimport path from 'path'\nimport fs from 'fs'\nimport _ from 'underscore'\nimport Immutable from 'i"
},
{
"path": "src/utils/db.js",
"chars": 6914,
"preview": "import redis from 'redis'\nimport redisInfo from 'redis-info'\nimport tunnel from 'tunnel-ssh'\nimport _ from 'underscore'\n"
},
{
"path": "src/utils/keys.js",
"chars": 275,
"preview": "const keysUtils = {\n\n getTypeName (type) {\n switch (type) {\n case 'string': return 'String'\n case 'list': "
},
{
"path": "src/utils/perf.js",
"chars": 66,
"preview": "import React from 'react/addons'\nexport default React.addons.Perf\n"
},
{
"path": "src/utils/regex.js",
"chars": 373,
"preview": "const regex = {\n\n escape (s) {\n return s.replace(/[-\\/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&')\n },\n\n fromGlob (s) {\n let co"
},
{
"path": "src/utils/settings.js",
"chars": 851,
"preview": "import fs from 'fs'\nimport path from 'path'\nimport mkdirp from 'mkdirp'\nimport conf from '../conf'\nimport throttle from "
},
{
"path": "src/utils/spawn.js",
"chars": 822,
"preview": "/**\n * ES7-like async via a wrapped generator function.\n * Inside the function you can yield Promises.\n */\nfunction spaw"
},
{
"path": "src/utils/throttle.js",
"chars": 389,
"preview": "import _ from 'underscore'\n\n/**\n * Throttle decorator.\n *\n * Use like:\n *\n * @throttle(250)\n * myFunction () {\n * "
},
{
"path": "styles/.gitkeep",
"chars": 0,
"preview": ""
},
{
"path": "styles/components/header.less",
"chars": 709,
"preview": ".header {\n .icon {\n vertical-align: middle;\n }\n .toolbar {\n padding: 0 !important;\n }\n .button {\n display:"
},
{
"path": "styles/components/key-details.less",
"chars": 3699,
"preview": ".key-details-panel {\n .side-panel {\n position: relative;\n\n .close {\n position: absolute !important;\n to"
},
{
"path": "styles/components/values-table.less",
"chars": 1702,
"preview": ".values-table {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n table {\n display: flex;\n"
},
{
"path": "styles/handlers/browse.less",
"chars": 62,
"preview": ".main {\n .browse {\n flex: 1;\n position: relative;\n }\n}"
},
{
"path": "styles/handlers/info.less",
"chars": 1018,
"preview": ".main {\n .info {\n flex: 1;\n position: relative;\n overflow-y: auto;\n background: @grey-100;\n }\n .host-info"
},
{
"path": "styles/handlers/main.less",
"chars": 153,
"preview": ".main {\n display: flex;\n flex-direction: column;\n height: 100%;\n position: relative;\n\n .header {\n flex: 0 0 @too"
},
{
"path": "styles/index.less",
"chars": 879,
"preview": "// Fonts\n@import url(fonts/Roboto/Roboto.css);\n@import url(fonts/MaterialIcons/MaterialIcons.css);\n\n// Utils\n@import \"ut"
},
{
"path": "styles/utils/highlight.less",
"chars": 1632,
"preview": "/*\n\ngithub.com style (c) Vasily Polovnyov <vast@whiteants.net>\n\n*/\n\n.hljs {\n display: block;\n overflow-x: auto;\n padd"
},
{
"path": "styles/utils/material-colors.less",
"chars": 22918,
"preview": "// ==========================================================================\n//\n// Name: UI Color Palette\n// "
},
{
"path": "styles/utils/mixins.less",
"chars": 627,
"preview": "// Paper-like shadows based on 'zDepth'.\n.zDepth(0) {\n box-shadow: none;\n z-index: 0;\n}\n.zDepth(1) {\n box-shadow: 0 1"
},
{
"path": "styles/utils/variables.less",
"chars": 153,
"preview": "// Fonts\n@font-regular: 'Roboto';\n@font-code: Menlo, Consolas;\n\n// Sizes\n@toolbarHeight: 56px;\n@space: 16px;\n\n// Extra C"
}
]
// ... and 2 more files (download for full content)
About this extraction
This page contains the full source code of the cpsubrian/redis-explorer GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 66 files (138.7 KB), approximately 36.4k tokens, and a symbol index with 190 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.