Giter VIP home page Giter VIP logo

carbonldp-workbench's Introduction

Build Status

Workbench to administer an on premise installation of Carbon LDP

Development

Setup

  1. Install dependencies

  2. Install project dependencies:
    npm install

  3. Start the application by executing:
    npm start

    Note: You may need to change the Carbon LDP's instance configuration inside src/environments

NPM Scripts

package.json defines six tasks:

  • build: Builds the source code outputting it in dist/app
  • build:docs: Builds the architecture's documentation files
  • e2e: Runs end-to-end tests
  • lint: Scans the source code for bad practices, infractions to code conventions, etc.
  • start: Runs a development server serving the current source code
  • test: Runs unit tests

File Structure

.
├── .idea                               # WebStorm shared configuration files (like code style)
├── dist                                # Distribution files
├── docs                                # Developer documentation
├── e2e                                 # end-to-end tests
├── node_modules                        # npm dependencies (don't touch them)
├── scripts                             # Scripts run by the application
│   └── write-global-variables.sh       # SHELL script that replaces makes environment variables accessible to the application
├── server                              # HTTP server related files
│   └── nginx.conf                      # Configuration file for nginx server inside the docker image    
├── src                                 # Source code
│   ├── app                             # Source files for the Angular application
│   ├── assets                          # Any asset (image, json, etc.)
│   │   ├── images                      # Images
|   │   ├── android-chrome-192x192.html # SD icon to display in Android/Chrome (PWA)
|   │   ├── android-chrome-512x512.html # HD icon to display in Android/Chrome (PWA)
|   │   ├── apple-touch-icon.html       # Icon to display in iOS devices
|   │   ├── browserconfig.xml           # File used by IE11 to create a tile for the site
|   │   ├── favicon.ico                 # .ico favicon
|   │   ├── favicon-16x16.png           # SD .png favicon
|   │   ├── favicon-32x32.png           # HD .png favicon
|   │   ├── mstile-70x70.png            # Icon for Microsoft products
|   │   ├── safari-pinned-tab.svg       # SVG to show on Safari pinned tabs
|   │   └── site.webmanifest            # PWA manifest
│   ├── index.html                      # Entry point for the app
│   ├── main.ts                         # Entry file of angular. Bootstrap the main angular module
│   ├── polyfills.ts                    # Imports all the required polyfills
│   └── styles.scss                     # Main style file for the application
├── typings                             # Custom TypeScript description files
│   ├── custom.codemirror
│   │   └── index.d.ts                  # Codemirror's description file
│   ├── custom.highlightjs
│   │   └── index.d.ts                  # HighlightJS's description file
│   ├── custom.jstree
│   │   └── index.d.ts                  # JSTree's description file
│   └── custom.semantic-ui
│       └── index.d.ts                  # Semantic-UI's description file
├── .dockerignore                       # Tells Docker which files to ignore when building the Docker image
├── .editorconfig                       # Multiple IDE-compatible configuration file to standarize major code style rules (tabs vs spaces, etc.)
├── .gitignore                          # Ignore file for git    
├── .nvm                                # Specifies the supported Node.js version (used by nvm, see: `nvm use`)
├── angular.json                        # Angular CLI configuration file
├── CHANGELOG                           # File to track package changes
├── Dockerfile                          # File to build the docker image for deployment
├── LICENSE
├── ngsw-config.json                    # Angular CLI PWA configuration file
├── package.json                        # npm configuration file
├── package-lock.json                   # npm configuration file
├── README.md                           # this
├── tsconfig.json                       # TypeScript compiler configuration file
└── tslint.json                         # TSLint configuration file that specifies rules to lint TypeScript files

Building the Docker image

To generate the Docker image of the Workbench, do the following:

  1. The workbench's Docker image can be built with a command like:

    docker build --tag carbonldp/carbonldp-workbench:{TAG} .
    

    See Docker's documentation for more information.

LICENSE

Copyright (c) 2015-present, Base22 Technology Group, LLC.
All rights reserved.

This source code is licensed under the BSD-style license found in the
LICENSE file in the root directory of this source tree.

carbonldp-workbench's People

Contributors

alexserrano22 avatar alvaro9210 avatar jgf20 avatar mhernandeza avatar miguelaraco avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

carbonldp-workbench's Issues

Migrate to Webpack

Due to some issues being found with the current bundler (JSPM), such as ignoring versions and upgrading them whenever it wants, we need to migrate the project to a more robust and more used module bundler such as Webpack.

Provide immediate feedback when deleting a document

In the Workbench, I had a container, "quotes/" with many children (probably like 126 direct member children). To clean up, I went to delete the parent container. I got the confirmation dialog as shown below (except the one I am showing below is just for example)...

confirm_dialog

I clicked the red Yes button to confirm my desire to delete. Nothing appeared to happen, but I waited just in case. Sure enough, after a few seconds, the confirmation dialog disappeared and I could see that my "quote/" container was gone.

We need to have immediate feedback when the user clicks "Yes". I would expect to see an animated spinner, for example, showing me that the system has accepted my request and is working.

I think this should be required for Release 1.

I noticed when deleting an empty container, the dialog disappears and I see a spinner icon very briefly. So it seems the functionality is intended to be there. But, in the case of a container with many children, I did not see it. I think, perhaps, it's trying to show the spinner after the work, rather than before it?

Update document explorer taking advantage of real-time functionalities

It seems like it would be a nice-to-have feature to not have to refresh the browser when verifying documents, newly created, go into a container. It could be cool if the expanded parent container updated its contents automatically when I made updates in another process.

Another vote:

AlexSerrano22 @AlexSerrano22 09:37
Hi guys, I have a recommendation maybe it is not a big deal, but if the workbench is an SPA it will be cool that you could refresh your documents tree on the explorer without refresh the page or change to another and go back. I saw that you can refresh a document but you haven't a button to refresh the tree.

Add security features

The list of features that need to be implemented are the following:

  • CRUD of Users
  • CRUD of Roles
  • Access control list (ACL) by document

Add Messaging/real-time capabilities

Design and build the new features the Workbench will have with the possibility of real-time capabilities.
One of such features could be real-time notifications, so we need to design and implement an area to display such notifications.
Another feature could be to refresh documents properties immediately after a change is made to it.

Workbench seems to have issues in Safari

We should be shooting to support evergreen browsers, I think (e.g. latest versions of Chrome, Firefox, Internet Explorer, and Safari). Recently I worked with a BETA user who was using Safari and witnessed several issues in the workbench, which the user did not experience when using Chrome. When executing my own test in Safari, I note that not all of my applications show in the list of applications on the dashboard (empty rows show, however). There are other issues too, which I think you'll find if you check in Safari.

issuesinsafari

If, for the BETA, there is very good reason for us to exclude Safari (from a cost/benefit perspective), we need to make an issue to be sure to clearly denote browser support for the Workbench in public documentation. In that case, we should probably also test for browser and present some kind of message to the user that it is an unsupported browser.

Consider customizable cards for the dashboard (at least a card for counting resources of a given type) type: suggestion

AlexSerrano22 @AlexSerrano22 09:48
thanks Cody and another thing I see that on the dashboard page you have a couple of cards with information of your platform, like documents and triples, are you thinking on provide some mechanism to customise this cards? thinking that I'm interested to know how many documents of user type I have on the platform, I know that I could save my query in the SPARQL section but maybe could have a custom card with this query to have a card on the dashboard

Rodolfo Aguirre @roddolf 10:09

One can actually refresh the tree manualy without refreshing the entire page.
You just need to close and open the tree.

35076778-addf6ef0-fbbf-11e7-949c-d992fc68b056

(not closing; as I am not confident that is sufficient or intuitive)

Workbench should not require attributes not required by REST API (app description)

Currently, we have not indicated anywhere that an App description is required by the REST API. Indeed, it is possible to create a new app without a description when using the REST API. But, within the Workbench, this field (in the New App form) is required. I think it will be best to keep the Workbench as closely aligned to the REST API as possible in that regard. It's arguable, perhaps, but it did cause some minor confusion for me when attempting to edit an app AFTER creating the app through the REST API.

Fix third party styles import

Currently when using third party libraries that require their own styles, the Workbench uses some 'hacking' by querying the <head> tags and importing the styles by adding the respective <link> tag to the <head> if not present.
This of course goes against the recommended approach of using Webpack to optimize those styles files.
We should a set up to tackle this case, one way of doing it is by using the recommended approach by AngularClass starter project: https://github.com/AngularClass/angular-starter#external-stylesheets

Users should not be able to delete App admin role

In the latest version 0.7.1 of the Workbench, the Delete icon is enabled when the App admin role is selected. Also, if I click the delete icon, while on the App admin role, it takes me to the next screen asking me if I'm sure I want to go ahead. The delete icon should not be enabled when that role is selected and the user should not be presented with the option to delete the root Admin role for an app.

Compatibility issues with platform v6

The Workbench breaks when trying to display the version and the information of the platform.
This only occurs on v1.0.0-alpha.6 of the platform.
The issue was reported by @alex-arriaga through the Carbon LDP Gitter channel.

Label "Schedule a Backup" is misleading

It appears to me that you can only run a backup on-demand. The label, therefore, "Schedule a backup", is currently misleading. Maybe we put this with the intent of providing schedule capability, but unless and until we have it, I would suggest we state the function more explicitly.

Refactor Workbench's BNode syncing

Because the bNodeIdentifier will no longer exist and the Workbench heavily use this property, we need to refactor the Document Explorer to correctly implement the new BNodes syncing.

Error when try to delete an element on the tree

This issue is related to #56 , if you reproduce this error and after that, you try to delete a document with the trash icon on the top you getting an error.

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'state' of undefined
TypeError: Cannot read property 'state' of undefined
    at e.jstree.plugins.wholerow.redraw_node (0.63dc1e304e246417972e.chunk.js:1)
    at e.jstree.plugins.wholerow.redraw_node (0.63dc1e304e246417972e.chunk.js:1)
    at e.jstree.plugins.wholerow.redraw_node (0.63dc1e304e246417972e.chunk.js:1)
    at e.jstree.plugins.wholerow.redraw_node (0.63dc1e304e246417972e.chunk.js:1)
    at e.jstree.plugins.wholerow.delete_node (0.63dc1e304e246417972e.chunk.js:1)
    at DocumentTreeViewComponent.emptyNode (0.63dc1e304e246417972e.chunk.js:1)
    at 0.63dc1e304e246417972e.chunk.js:1
    at ZoneDelegate.invoke (polyfills.ca4447d0991a01fbd3bd.js:1)
    at Object.onInvoke (app.43679dca33355c574d85.js:1)
    at ZoneDelegate.invoke (polyfills.ca4447d0991a01fbd3bd.js:1)
    at e.jstree.plugins.wholerow.redraw_node (0.63dc1e304e246417972e.chunk.js:1)
    at e.jstree.plugins.wholerow.redraw_node (0.63dc1e304e246417972e.chunk.js:1)
    at e.jstree.plugins.wholerow.redraw_node (0.63dc1e304e246417972e.chunk.js:1)
    at e.jstree.plugins.wholerow.redraw_node (0.63dc1e304e246417972e.chunk.js:1)
    at e.jstree.plugins.wholerow.delete_node (0.63dc1e304e246417972e.chunk.js:1)
    at DocumentTreeViewComponent.emptyNode (0.63dc1e304e246417972e.chunk.js:1)
    at 0.63dc1e304e246417972e.chunk.js:1
    at ZoneDelegate.invoke (polyfills.ca4447d0991a01fbd3bd.js:1)
    at Object.onInvoke (app.43679dca33355c574d85.js:1)
    at ZoneDelegate.invoke (polyfills.ca4447d0991a01fbd3bd.js:1)
    at resolvePromise (polyfills.ca4447d0991a01fbd3bd.js:1)
    at resolvePromise (polyfills.ca4447d0991a01fbd3bd.js:1)
    at polyfills.ca4447d0991a01fbd3bd.js:1
    at ZoneDelegate.invokeTask (polyfills.ca4447d0991a01fbd3bd.js:1)
    at Object.onInvokeTask (app.43679dca33355c574d85.js:1)
    at ZoneDelegate.invokeTask (polyfills.ca4447d0991a01fbd3bd.js:1)
    at Zone.runTask (polyfills.ca4447d0991a01fbd3bd.js:1)
    at drainMicroTaskQueue (polyfills.ca4447d0991a01fbd3bd.js:1)
    at ZoneTask.invokeTask [as invoke] (polyfills.ca4447d0991a01fbd3bd.js:1)
    at p (polyfills.ca4447d0991a01fbd3bd.js:1)
defaultErrorLogger @ app.43679dca33355c574d85.js:1

screen shot 2018-01-17 at 10 20 51 pm

Relocate "Save changes" button to a more noticeable place

I was modifying a property in one of my documents, this property was at the very bottom of the document explorer, so I was using the scrolling bar.

I changed the property's value, and clicked on the "green checkmark icon". I thought that saved my document, but was not the case. There was a non-visible (because of the scrolling) blue button that needed to be clicked in order to really save the document.

Refactor to match the new structure of the platform

We need to refactor the platform to address the implications of the new version of the platform.
What needs to be addresed is the following:

  1. Move Panel components to Workbench
  2. Delete unnecessary components
    • My Apps
    • Create App
    • Edit App
  3. Find and delete more unnecessarry components
  4. Add instance & platform configuration screen
  5. Rename Agents to User
  6. Remove app contexts and use the carbon context instead
  7. Show hidden documents in document explorer
  8. Change angular-carbonldp to work with single contexts

The SPARQL client set disabled execute button on empty endpoint

The SPARQL client seems to accept relative URIs, but if one does not provide anything in the Endpoint URI input the Execute button remains disabled.

One can actually write something in the input to enable the button and then erase it and it will remain enabled.

An indication of relatives URIs must be set, and/or some default value like / or the host of the connected platform.

App cache is not refreshed after changing Allow all orgins on app created by REST API.

If you use the REST API to create a new application and then use the Workbench to verify it visually, you run into problems. Suppose the example, for example, from the Getting Started with the REST API:

POST /platform/apps/ HTTP/1.1
Host: localhost:8083
Content-Type: application/trig
Prefer: http://www.w3.org/ns/ldp#Container; rel=interaction-model
Slug: taxonomy-hub
Authorization: Basic amFuZS5kb2VAZXhhbXBsZS5vcmc6amFuZTEyMw==
Cache-Control: no-cache
Postman-Token: 6ef4a0c0-7c6b-50bf-3463-ea52e6e9e209

@prefix c:			<https://carbonldp.com/ns/v1/platform#>.
@prefix cs:			<https://carbonldp.com/ns/v1/security#>.

<>{
    <>
        a cs:Application;
        cs:name "Taxonomy Hub".
}

Issue the POST to create the app. Then you will see the app in the list of apps within the Workbench. At that point, if you go to the Document Explorer, you'll get an error because you need to turn on Allow all origins. So click over, turn on Allow all origins (and add an app description as required) then save. Now, navigate back into the Document Explorer and the error is still there.

I believe that a full page refresh will remedy the issue, but I don't think we should expect users to figure that out.

Upgrade SDK to 0.40.0

With version 0.40.0 of the SDK, some breaking changes were introduced, we need to update the project to the latest version and address these changes.

Disable delete option for system managed documents

In Workbench: v1.0.0-alpha.2, I am able to select ".system/" and "vocabularies/", click the delete button, and get to the delete confirmation view...

are_you_sure

I did not attempt to click Yes to delete one of these containers. However, since these are system containers, should we be able to even get this far? I would expect that maybe we want to either disable the delete button for those two containers or provide a special message when you attempt to delete them.

the elements disappear in document explorer

When you expand an element without opening it, and after you double-click it, the elements disappear. This occurs only in the UI because after refreshing the browser, the elements are still there.

The console display these errors:

EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'state' of undefined
TypeError: Cannot read property 'state' of undefined

Unhandled Promise rejection: Cannot read property 'state' of undefined ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'state' of undefined

Update workbench screenshots

Please let me know when the refactor of the workbench is done, so we can update the screenshots in the documentation to reflect the new workbench

create info widgets

Design and implement two information widgets in the dashboard.

  1. For total number of documents in your application
  2. For total number of triples in your application

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.