canonical/charmhub.io

charmhub.io codebase

Python Coverage | JavaScript Coverage

A charm is a software package that bundles an operator together with metadata that supports the integration of many operators in a coherent aggregated system.

An operator packaged as a charm means that it is configured, operated and integrated in a standard way regardless of the vendor or the application. Charms enable multi-vendor operator collections with standardised behaviours, reducing the learning curve associated with each operator and creating richer application ecosystems.

This repo is the application for the charmhub.io website.

The site is largely maintained by the Web and Design team at Canonical. It is a stateless website project based on Flask and hosted on a Charmed Kubernetes cluster.

Bugs and issues

If you have found a bug on the site or have an idea for a new feature, feel free to create a new issue, or suggest a fix by creating a pull request. You can also find a link to create issues in the footer of every page of the site itself.

Local development

The simplest way to run the site locally is using dotrun:

dotrun

Once the server has started, you can visit http://127.0.0.1:8045 in your browser. You can stop the server using <ctrl>+c.

For more detailed local development instructions, see HACKING.md.

License

The content of this project is licensed under the Creative Commons Attribution-ShareAlike 4.0 International license, and the underlying code used to format and display that content is licensed under the LGPLv3 by Canonical Ltd.

With ♥ from Canonical

charmhub.io's Issues

Use button or button classes to make the whole card clickable

Following Ant's comment #63 (comment)

Add 500 & 404 pages

The main sidebar filters should be generated from the context

We should pass through the items in the sidebar in the context of the page as it will be generated from the API eventually.

Certified exploration charms/bundles

Consider how we will showcase all the types below within the details page:

• Featured category: These are hand picked "things" that we want to promote
• Featured flag: these are hand picked "things" that we want to promote in categories other than "featured category"
• Verified publishers: currently in snapcraft - we say "we trust this publisher"
• Certified charms: what I think people want in charmhub - we say "this charm is of good quality"

Removing filter redirects to homepage

Details: Related bundles

Wire up the data from the API into the related bundles of the details page.

Sidenav update: Build

Implement suru on home page

Mobile designs: Header

Including channel map

Add dummy data to python and pass through to the template

Replace sass-lint with stylelint

In a previous dev catchup it was decided that our projects should be updated to use stylelint instead of sass-lint which we are currently using.

Details: Channel map

Wire up the data from the API into the channel map of the details page.

Store page: API Integration

Update store-api module to handle the updated API’s. Searching, filtering, categories etc. Tidy up faker module.

Implement 404 & 500 pages

With JS turned off the sections on the details pages should be more clearly defined

Currently the sections run on without any delimitation, make the page feel cluttered and looong. We should add a header for each section + some space between them when no JS is on.

Global nav doesn't look right in FF

Update grey ubuntu k8s icons on the homepage cards

@spencerbygraves can you please add here the links to those grey icons. Thanks

Store page: Search & Filters

Update the cards displayed on the store page based on user selected search and filter criteria. Backend endpoint and frontend.

Update side navigation on the #docs and #configuration tabs

Details: Docs

Wire up the data from the API into the docs panel of the details page.

Start with a few: store with 10~40 charms

We started designing the homepage for abount many charms in different categories. Realistically we need to start with a few: explore the home page with only 10~40 charms.

Sidenav update: Design

Store - replace side navigation with checkboxes filter

Build home page

Store page: Mobile updates

Mobile designs have already been worked on for the search and filtering. Implement them.

Add global nav

Details: Overview

Wire up the data from the API into the overview panel of the details page.

Details: Mock Actions

Wire up the data from the API into the actions panel of the details page.

Add side navigation functionality

Details: Mock Integrations

Wire up the data from the API into the integrations panel of the details page.

Details page add a dummy bundle entity type

Currently the only entity is a charm so we can't check the bundle pages.

Implement basic JS functionality on store

• Update url with filters, without reloading the page
• Update url with search term, without reloading the page

This does not include updating the page from filtering/ searching

Upgrade vanilla version & update side navigation on the home page

It is really hard to find private charms owned by a team.

Describe the bug
I have a team "jaas-charmers" that owns a number of non-public charms. These charms can theoretically be found at https://jujucharms.com/u/jaas-charmers. If one is not logged in then this page redirects to https://jaas.ai/u/jaas-charmers which is a 404 and gives no clues that one needs to log in to see any charms. If one knows that one has to log in, and to log in one should click on "Your Models" (That is hardly obvious), and the "Login". One ends up on the https://jujucharms.com/new page. It is only after re-entering the URL you first thought of that you can actually see a list of charms owned by the team.

To Reproduce
You will need to be a member of yellow for this to complete for you.

Steps to reproduce the behavior:

1. Go to https://jujucharms.com/u/jaas-charmers
2. Get redirected to https://jaas.ai/u/jaas-charmers
3. Click on "Your Models"
4. Click Login and authenticate.
5. Edit the address to be https://jujucharms.com/u/jaas-charmers
6. Observe the list of charms you were looking for.

Expected behavior
Going to the https://jujucharms.com/u/jaas-charmers URL should provide me with a simple mechanism to login and see the page contents.

Desktop (please complete the following information):

• OS: Ubuntu
• Browser firefox
• Version 70.0.1 (64-bit)

Details: Configuration

Wire up the data from the API into the configuration panel of the details page.

Update navigation & move store page to /collections

If it's a bundle, repeat the icon (for now)

Details: Contribute

Wire up the data from the API into the contribute panel of the details page.

Cards are odd sizes

They should be a consistent size

Setup webpack

With JS turned off the contribute tab isn't in the order of the tabs

Contribute isn't the last section, it seems to be after configuration.

Build about page

Replace snapcraft logo with charmhub logo

Implement basic JS functionality on details page

• Tabs
• Accordion
• Show more
• Channel map
• Table of contents

Details page header - Bundles

Details: Mock History

Wire up the data from the API into the history panel of the details page.

Replace details data with context

Currently the tabs (and their structure - side nav etc) are hardcoded content, this should be mocked out and generated from the context that's passed through.

Replace bundle icons with the new design

Charm pages should be able to link to external web pages, such as blog posts

Is your feature request related to a problem? Please describe.

The charm web pages are quite static. It would be nice to be able to demonstrate that they have users.

Describe the solution you'd like

The ceph-osd charm has quite a large community. It includes external contributors who write howto guides, for example. It would be great if posts like these could be added to the charm/bundle's page.

Describe alternatives you've considered

Status quo.

Additional context

Should the whole card be clickable?

On the homepage and related charms - should the whole card be the link? At the very least the title should be.

Perhaps the publisher could apply the publisher filter?