couchdb-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Dulanga Sashika <wadsash...@gmail.com>
Subject Re: [COUCHDB-2214] Dashboard as main page
Date Thu, 19 Mar 2015 16:22:37 GMT
Hi Robert,

Now I am trying to create a new menu item for dashboard and implement a
react component as you said. But now I am stuck in some place and couldn't
figure out the problem yet. Here is the problem I had in process. I added
dashboard menu item and added route and view for that. And i change the
code to render dashboard when we enter http://localhost:8000 . As in img1
and img2, it doesn't show the view I created. But when I click on another
menu item and come back to the dashboard, it shows the breadcrumb of
previous pages as img 3 and 4. As in
https://github.com/apache/couchdb-fauxton/blob/master/app/addons/databases/routes.js#L46
, I called the new Dashboard.view() which is a component in my view.js. But
in the console, it shows Uncaught Type error. Did I miss any configuration
thing or did I do it wrong?

On Thu, Mar 19, 2015 at 10:06 AM, Dulanga Sashika <wadsashika@gmail.com>
wrote:

> Hi Robert,
>
> Thank you very much for the reference. I started to write the proposal
> today. I hope you will help to write this proposal by reviewing  it. I will
> share it with you after complete the draft of the proposal.
>
> Thank you
>
> On Thu, Mar 19, 2015 at 3:21 AM, Robert Kowalski <rok@kowalski.gd> wrote:
>
>> Some of you asked for a template for their proposals, here is what I've
>> found:
>>
>> http://community.staging.apache.org/gsoc#application-template
>>
>> Best,
>> Robert
>>
>> On Tue, Mar 17, 2015 at 10:39 PM, Robert Kowalski <rok@kowalski.gd>
>> wrote:
>> > Wow you are making very good progress!
>> >
>> > We have our weekly status meetup tomorrow (see [1] for the time in
>> > your timezone), feel free to join, meet other project members and
>> > learn what the project is currently doing next to the Summer of Code.
>> >
>> > I will also be around 1hr earlier to answer all your questions and
>> > discuss our next steps.
>> >
>> >
>> > [1]
>> http://mail-archives.apache.org/mod_mbox/couchdb-dev/201503.mbox/%3CCAJ1bcfEKOh4nvoxUqvcAcUFgg96w-JqHEefpi%2BWzazKFUPXNCg%40mail.gmail.com%3E
>> >
>> > On Tue, Mar 17, 2015 at 1:52 PM, Dulanga Sashika <wadsashika@gmail.com>
>> wrote:
>> >> Hi Robert,
>> >>
>> >> Here is the current status of the checklist :)
>> >>
>> >>  - check out the active tasks api (linked on top of this mail) -
>> (finished)
>> >>  - a mockup showing some widgets and how they could look like -
>> (started
>> >> but not finished yet)
>> >>  - code React tutorial & read about Flux - (finished)
>> >>  - take a look how we are using React - (finished)
>> >>  - create another menu item, called "Dashboard", try to answer the
>> >> questions to route.js et al - (started but not finished yet)
>> >>  - get familiar how we test our code - (finished)
>> >>  - write an hello world / hello from dulanga component that is
>> >> rendered into a screen when opening http://localhost:8000/dash or by
>> >> clicking on "dashboard" in the sidebar - (started but not finished yet)
>> >>
>> >> I will do my best to complete all these by tomorrow. If I have any
>> problem,
>> >> I will trouble you as you wished yesterday :)
>> >>
>> >> Thank You
>> >>
>> >> On Mon, Mar 16, 2015 at 3:15 AM, Robert Kowalski <rok@kowalski.gd>
>> wrote:
>> >>
>> >>> Hi Dulanga,
>> >>>
>> >>> we already talked on irc and you already talked to Alex regarding
>> >>> features for our dashboard. That's great!
>> >>>
>> >>> Some topics will repeat in this mail, but I also would like the ML to
>> >>> follow our project and additionally add some more in-depth
>> >>> informations.
>> >>>
>> >>> Recap & additons
>> >>> =====
>> >>>
>> >>> As discussed we will work in an iterative approach and add widget
>> >>> after widget so if we run out of time, we will have something to
>> >>> deliver and don't have to throw everything away.
>> >>>
>> >>> Have you seen the "database" tab or the "config" tab in the sidebar
>> on the
>> >>> left?
>> >>>
>> >>> Those are modules that we can hook into the Fauxton build, by
>> >>> configuration. I think the idea is to create a tab "dashboard" which
>> >>> is the default one after opening Fauxton in the browser. So you would
>> >>> build the dashboard for Fauxton as part of Fauxton.
>> >>>
>> >>> Alex ideas so far:
>> >>>
>> >>> ```
>> >>> 17:34:13 <+Kxepal> about from what to start...in issue there are
some
>> >>> points about showing stats and log - forget these (: _stats isn't
>> >>> available for
>> >>>                    cluster iface and _log is removed. but recently
>> >>> visited databases, active tasks and _users/_replicator quick
>> >>> management is what could
>> >>>                    be really handy.
>> >>> 17:34:56 <+Kxepal> link to the user profile is also not relevant
>> >>> anymore after backporting some cloudant features
>> >>> 17:35:11 <+Kxepal> but still may be handy if you find a way how
(:
>> >>> 17:36:54 <+Kxepal> if the implementation is a set of widgets,
I
>> >>> believe you could make some builtin and leave a template one to let
>> >>> the end users create
>> >>>                    their own if they're able/would like to. in future
>> >>> these are could be fauxton plugins or something.
>> >>> 17:39:15 <+Kxepal> cluster quick-management is also nice idea
for a
>> hot
>> >>> widget.
>> >>> 17:39:56 <+robertkowalski> good idea - i can definitely help with
that
>> >>> (add custom widgets on build time) - the build is complicated, but
>> >>> once explained
>> >>>                            it should be easy
>> >>> ```
>> >>>
>> >>> So we have "custom widgets", "cluster quick-management", " recently
>> >>> visited databases",  "active tasks" and "_users/_replicator quick
>> >>> management"
>> >>>
>> >>> I think two good widgets for starting are active tasks and recently
>> >>> visited databases.
>> >>>
>> >>> For active tasks we have some nice docs:
>> >>>
>> >>>
>> https://couchdb.readthedocs.org/en/1.6.1/api/server/common.html#get--_active_tasks
>> >>>
>> >>> They have an own dedicated page in Fauxton (see
>> >>> http://localhost:8000/#/activetasks) but a short quick condensed list
>> >>> is probably very interesting to users.
>> >>>
>> >>> For the recently visited databases we would have to store that
>> somewhere.
>> >>>
>> >>> If you want, you can take an existing page in Fauxton and just modify
>> >>> the markup for a design mockup how the widget view may look like. But
>> >>> feel also free to use pen/paper or other tools if you like that the
>> >>> most.
>> >>>
>> >>> For the mango feature I am currently working on, I took the "edit
>> >>> view" template on modified the markup using the Chrome inspector of
my
>> >>> browser to collect some first feedback from the project members and
my
>> >>> team (https://cloudup.com/c26xgbWb6Ur). It does not have any
>> >>> functionality, but gives other folks a rough idea what my idea for the
>> >>> feature is.
>> >>>
>> >>> the framework and react
>> >>>
>> >>> As I already mentioned we are using React.js.
>> >>>
>> >>> It would be nice if you can finish the tutorial at
>> >>> https://github.com/ryanflorence/react-training/tree/gh-pages/lessons
>> >>> until next friday by following the steps and writing that code. After
>> >>> that, read
>> >>>
>> https://medium.com/brigade-engineering/what-is-the-flux-application-architecture-b57ebca85b9e
>> >>> to get a first impression how the Flux pattern works that we are
>> >>> using.
>> >>>
>> >>> After that (if you still have time left) take a look on a component
>> >>> that Garren, my coworker refactored from Backbone.js to React:
>> >>>
>> >>>
>> >>>
>> https://github.com/apache/couchdb-fauxton/commit/8cbf95d34a191770cfaadf7df98e07b5652e7602
>> >>>
>> >>> Please take a look how the data flows from the Components, using the
>> >>> Actions, to the dispatcher at the Store. Feel free to litter
>> >>> everything in the code with console.log to see how state changes and
>> >>> how the data flows.
>> >>>
>> >>> Hint: it is that element: https://cldup.com/4eCHVt9HHt.png
>> >>>
>> >>>
>> >>> If you still have time, just try to create another menu item, called
>> >>> "Dashboard". Take a look at:
>> >>>
>> >>>
>> >>>
>> https://github.com/apache/couchdb-fauxton/blob/master/settings.json.default#L8
>> >>>
>> https://github.com/apache/couchdb-fauxton/tree/master/app/addons/config
>> >>>
>> >>> to get a first idea how to do that. Some background information:
>> >>>
>> >>> base.js - the starting point of our module. basic configuration is
>> done
>> >>> here
>> >>> Question: what is `base.js` used for in the case of the config module?
>> >>>
>> >>> routes.js - takes care that functions injecting the view into the
>> >>> layout are called depending on the url given
>> >>> Question: What happens if I call `http:localhost:8000/_config` and
>> >>> what happens if you remove the function `apiUrl`?
>> >>>
>> >>> views.js - contains our views - this file contains still a lot
>> >>> backbone views, which we are currently migrating to react. maybe it
>> >>> makes more sense to take a look at one of our react components:
>> >>>
>> >>>
>> >>>
>> https://github.com/apache/couchdb-fauxton/tree/master/app/addons/documents/changes
>> >>>
>> >>> and how they are used currently (as we are migrating to react
>> currently):
>> >>>
>> >>>
>> >>>
>> https://github.com/apache/couchdb-fauxton/blob/master/app/addons/documents/routes-documents.js#L195
>> >>>
>> >>>
>> https://github.com/apache/couchdb-fauxton/blob/master/app/addons/documents/views-changes.js#L31
>> >>>
>> >>> The Objects are injected into the closures using AMD:
>> >>>
>> >>>
>> >>>
>> https://github.com/apache/couchdb-fauxton/blob/master/app/addons/documents/views-changes.js#L13-24
>> >>>
>> >>> assets folder:
>> >>> contains our less which is compiled to css
>> >>>
>> >>> templates folder:
>> >>> contains old backbone.js templates, you will not need them
>> >>>
>> >>> tests folder:
>> >>> contains unit and integration tests, every PR must have unit tests and
>> >>> integration tests. If you never wrote tests, we will explain it to you
>> >>> - it is easy once you wrote your first few ones. Basically you are
>> >>> testing each time that if you put something into a function, the
>> >>> expected result happens. Or that if you take an action, a state has
>> >>> changed.
>> >>>
>> >>> You can run the unit tests using `grunt test`
>> >>>
>> >>> Single tests are run by:
>> >>>
>> >>> ```
>> >>> grunt test --file="./app/addons/documents/tests/headerSpec.react.js"
>> >>> ```
>> >>>
>> >>> or in the browser by test group:
>> >>>
>> >>> ```
>> >>>
>> >>>
>> file:///Users/robert/apache/couchdb-fauxton/test/runner.html?grep=Header%20Controller
>> >>> ```
>> >>>
>> >>> (change path to your fauxton directory)
>> >>>
>> >>> The corresponding code is:
>> >>>
>> >>>
>> https://github.com/apache/couchdb-fauxton/blob/master/app/addons/documents/tests/headerSpec.react.jsx
>> >>>
>> >>> and these tests are a good example how to write a simple test for the
>> >>> hello world/hello from dulanga-component:
>> >>>
>> >>>
>> >>>
>> https://github.com/apache/couchdb-fauxton/blob/master/app/addons/documents/tests/headerSpec.react.jsx#L43-61
>> >>>
>> >>>
>> >>> First steps:
>> >>>
>> >>> Create a module `dashboard` that gets displayed in the sidebar. The
>> >>> route http://localhost:8000/dash will render a small React component
>> >>> that display "Hello World".
>> >>>
>> >>> If you click on the "Hello World" it ill change the content to: "Hello
>> >>> from Dulanga"
>> >>>
>> >>> While we will throw the small component away afterwards we will build
>> >>> upon the other code you created. If you have time left, add a test
>> >>> that the component changes the content.
>> >>>
>> >>>
>> >>> Meeting Wednesday:
>> >>> Feel free to join us on our weekly couchdb meeting:
>> >>>
>> >>>
>> http://mail-archives.apache.org/mod_mbox/couchdb-dev/201503.mbox/%3CCAJ1bcfEKOh4nvoxUqvcAcUFgg96w-JqHEefpi%2BWzazKFUPXNCg%40mail.gmail.com%3E
>> >>>
>> >>> I will be around at least one hour before so we can chat. Contact me
>> >>> if you would like to chat earlier/later. I am also around the other
>> >>> days on IRC / the mailinglist and feel free to contact me in
>> >>> #couchdb-dev at any time. If I am not around I will answer you once
I
>> >>> got online again, as I read the backlog.
>> >>>
>> >>>
>> >>> Our checklist at Wednesday (lets see how far we'll get)
>> >>>
>> >>>  - check out the active tasks api (linked on top of this mail)
>> >>>  - a mockup showing some widgets and how they could look like
>> >>>  - code React tutorial & read about Flux
>> >>>  - take a look how we are using React
>> >>>  - create another menu item, called "Dashboard", try to answer the
>> >>> questions to route.js et al
>> >>>  - get familiar how we test our code
>> >>>  - write an hello world / hello from dulanga component that is
>> >>> rendered into a screen when opening http://localhost:8000/dash or by
>> >>> clicking on "dashboard" in the sidebar
>> >>>
>> >>> That was a lot of content and please don't feel discouraged if you
>> >>> don't get that far until Wednesday. We will have to find a speed which
>> >>> is perfect for you and this time I tried to give enough informations
>> >>> that you are not blocked until Wednesday by waiting for next steps.
If
>> >>> you are at the last step before Wednesday, drop me a line and I will
>> >>> prepare the next steps :)
>> >>>
>> >>> I know that you all have important exams, these are definitely more
>> >>> important! Don't feel pressured by the amount of work / the amount of
>> >>> informations, getting good results in the exams should be your first
>> >>> priority.
>> >>>
>> >>> Best,
>> >>> Robert
>> >>>
>> >>> On Sat, Mar 14, 2015 at 9:14 PM, Dulanga Sashika <
>> wadsashika@gmail.com>
>> >>> wrote:
>> >>> > Hi Robert,
>> >>> >
>> >>> > I went through the guidelines you provided and successfully
>> installed and
>> >>> > configured as you said. Everything works find and I played around
>> it by
>> >>> > creating a database and documents. I think I am ready for the next
>> step
>> >>> and
>> >>> > we can start it if you are ok :)
>> >>> >
>> >>> > Thank You
>> >>> >
>> >>> > On Sun, Mar 15, 2015 at 12:03 AM, Robert Kowalski <rok@kowalski.gd>
>> >>> wrote:
>> >>> >
>> >>> >> You're welcome.
>> >>> >>
>> >>> >> I also hang out in the couchdb-dev channel for around 1-3hrs
if
>> you get
>> >>> >> stuck!
>> >>> >>
>> >>> >> On Sat, Mar 14, 2015 at 7:29 PM, Dulanga Sashika <
>> wadsashika@gmail.com>
>> >>> >> wrote:
>> >>> >> > Hi Robert,
>> >>> >> >
>> >>> >> > Thank you very much for the quick reply. I will go through
the
>> >>> guidelines
>> >>> >> > and contact you if I have any issue with them.
>> >>> >> >
>> >>> >> > Thank you
>> >>> >> >
>> >>> >> > On Sat, Mar 14, 2015 at 11:46 PM, Robert Kowalski <
>> rok@kowalski.gd>
>> >>> >> wrote:
>> >>> >> >
>> >>> >> >> Hi Dulanga,
>> >>> >> >>
>> >>> >> >> glad you found your way to the CouchDB mailing list.
Welcome :)
>> >>> >> >>
>> >>> >> >> CouchDB is a database written in Erlang with an HTTP
API - that
>> makes
>> >>> >> >> it a great fit for web applications that don't need
a server
>> side
>> >>> >> >> layer with a database driver in between. Our Project
Fauxton
>> (like a
>> >>> >> >> modern PHP MyAdmin) makes use of that fact.
>> >>> >> >>
>> >>> >> >> Many of us hang out in freenode in #couchdb-dev including
>> myself.
>> >>> >> >> Whenever you get stuck, feel free to ask - if no one
is online
>> (e.g.
>> >>> I
>> >>> >> >> was travelling this week) feel free to ask on the
dev ML.
>> >>> >> >>
>> >>> >> >> We are all happy to help each other in the project
:)
>> >>> >> >>
>> >>> >> >> If you are using windows: I am not a Windows expert
- you will
>> >>> >> >> probably have to use a bash emulator like "git bash"
to boot
>> the dev
>> >>> >> >> environment.
>> >>> >> >>
>> >>> >> >> Getting started:
>> >>> >> >>
>> >>> >> >> For this project you will need to install at least
CouchDB 1.x,
>> an
>> >>> >> >> Ubuntu package (with installation instructions) is
at
>> >>> >> >> https://launchpad.net/~couchdb/+archive/ubuntu/stable
>> >>> >> >>
>> >>> >> >> Additionally you need to install Node.js 0.10 or 0.12
(install
>> from
>> >>> >> >> https://nodejs.org)
>> >>> >> >>
>> >>> >> >> Booting Fauxton and first steps (type without the
$):
>> >>> >> >>
>> >>> >> >> booting CouchDB:
>> >>> >> >> $ sudo couchdb
>> >>> >> >>
>> >>> >> >> in another terminal, clone the admin interface:
>> >>> >> >> $ git clone https://github.com/apache/couchdb-fauxton
>> >>> >> >>
>> >>> >> >> go to Fauxton:
>> >>> >> >> $ cd couchdb-fauxton
>> >>> >> >>
>> >>> >> >> install dependencies:
>> >>> >> >> $ npm install
>> >>> >> >> $ npm install -g grunt grunt-cli
>> >>> >> >>
>> >>> >> >> boot the app:
>> >>> >> >> $ grunt dev
>> >>> >> >>
>> >>> >> >> Then open your browser and go to http://localhost:8000
- you
>> should
>> >>> >> >> see a red/gray/black interface
>> >>> >> >>
>> >>> >> >>
>> >>> >> >> That was a lot of input and especially if you are
using Linux
>> the
>> >>> >> >> first time and followed the instructions you have
archived a
>> lot!
>> >>> >> >>
>> >>> >> >> As first step, try to create a database and a document
now
>> using the
>> >>> >> >> web interface (PS we are happy about any usability
feedback). :)
>> >>> >> >>
>> >>> >> >> I think you have your dev environment for CouchDB
ready now.
>> >>> >> >>
>> >>> >> >> What's next:
>> >>> >> >> If everything works we will take a look at Fauxtons
code
>> structure
>> >>> and
>> >>> >> >> how it works. We will also talk about the features
of the
>> dashboard.
>> >>> >> >> Let's find a date for a chat after you took a first
look how
>> Fauxton
>> >>> >> >> looks like.
>> >>> >> >>
>> >>> >> >> We are having our weekly meeting this Wednesday, 20:00GMT
>> >>> >> >> (http://arewemeetingyet.com/UTC/2015-03-14/20:00)
in IRC on
>> freenode
>> >>> >> >> (see
>> >>> >> >>
>> >>> >>
>> >>>
>> http://mail-archives.apache.org/mod_mbox/couchdb-dev/201503.mbox/%3CCAJ1bcfEKOh4nvoxUqvcAcUFgg96w-JqHEefpi%2BWzazKFUPXNCg%40mail.gmail.com%3E
>> >>> >> >> )
>> >>> >> >> . Feel free to join us! I will be around 1hr before
if you want
>> to
>> >>> >> >> chat with me before.
>> >>> >> >>
>> >>> >> >>
>> >>> >> >> Looking forward to work with you,
>> >>> >> >> Robert
>> >>> >> >>
>> >>> >> >> On Sat, Mar 14, 2015 at 7:55 AM, Dulanga Sashika <
>> >>> wadsashika@gmail.com>
>> >>> >> >> wrote:
>> >>> >> >> > Hi all,
>> >>> >> >> >
>> >>> >> >> > I am Dulanga Sashika and I am a final year undergraduate
>> student at
>> >>> >> >> > Computer Science and Engineering department at
University of
>> >>> Moratuwa,
>> >>> >> >> Sri
>> >>> >> >> > Lanka. I am really interested in java, java script,
web
>> >>> applications,
>> >>> >> >> > algorithms, data mining and machine learning.
I have 6 months
>> of
>> >>> >> training
>> >>> >> >> > experience at Proavos (pvt) Ltd. and in there
I worked on a
>> web
>> >>> >> >> application
>> >>> >> >> > that used java, JEE and Spring Framework. My
final year
>> project
>> >>> also a
>> >>> >> >> web
>> >>> >> >> > related application and I used same technologies
I mentioned
>> above
>> >>> for
>> >>> >> >> > that. I am really interested in this project
because I have a
>> good
>> >>> >> >> > experience with web applications and I love work
with
>> javascript.
>> >>> I am
>> >>> >> >> > looking forward to contribute to this project
in this summer.
>> I
>> >>> like
>> >>> >> to
>> >>> >> >> > know more detail about this project and if you
can, please
>> guide
>> >>> me to
>> >>> >> >> > start working on this project.
>> >>> >> >> >
>> >>> >> >> > Thank you.
>> >>> >> >> >
>> >>> >> >> > W. A. Dulanga Sashika,
>> >>> >> >> > Undergraduate Student,
>> >>> >> >> > Department of Computer Science and Engineering,
>> >>> >> >> > University of Moratuwa.
>> >>> >> >>
>> >>> >> >
>> >>> >> >
>> >>> >> >
>> >>> >> > --
>> >>> >> > W. A. Dulanga Sashika,
>> >>> >> > Undergraduate Student,
>> >>> >> > Department of Computer Science and Engineering,
>> >>> >> > University of Moratuwa.
>> >>> >>
>> >>> >
>> >>> >
>> >>> >
>> >>> > --
>> >>> > W. A. Dulanga Sashika,
>> >>> > Undergraduate Student,
>> >>> > Department of Computer Science and Engineering,
>> >>> > University of Moratuwa.
>> >>>
>> >>
>> >>
>> >>
>> >> --
>> >> W. A. Dulanga Sashika,
>> >> Undergraduate Student,
>> >> Department of Computer Science and Engineering,
>> >> University of Moratuwa.
>>
>
>
>
> --
> W. A. Dulanga Sashika,
> Undergraduate Student,
> Department of Computer Science and Engineering,
> University of Moratuwa.
>



-- 
W. A. Dulanga Sashika,
Undergraduate Student,
Department of Computer Science and Engineering,
University of Moratuwa.

Mime
  • Unnamed multipart/mixed (inline, None, 0 bytes)
View raw message