Git Product home page Git Product logo

unikubehq / frontend Goto Github PK

View Code? Open in Web Editor NEW
13.0 2.0 2.0 49.9 MB

Frontend for the Unikube platform. Run k8s 🐳 🚒 dev setups πŸ€“ with ease! 🀩

Home Page: https://unikube.io

License: Apache License 2.0

JavaScript 7.23% Dockerfile 0.26% HTML 0.66% Vue 71.13% TypeScript 17.87% SCSS 2.85%
vue frontend graphql casl kubernetes helm vuetify cypress docker cloud-native

frontend's People

Contributors

dependabot[bot] avatar movileanuv avatar schille avatar steinrobert avatar tobifroe avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

frontend's Issues

"Finish/Create" button during/after project creation.

When creating a new project in the frontend you will see the following page (after the initial data has been entered):

Screenshot from 2021-06-12 09-53-43

At this point, especially when you don't want to add a member, its not clear that the project has already been created. Maybe an additional button could clarify it, e.g. a button like:

  • "Create Project" -> but this is not 100% correct, since the project has already been created.
  • "Finish"
  • "Back to Project Overview"
  • "Skip"

Cypress E2E Tests

  • add Cypress Setup
  • remove auth flow for testing
  • add Github Action to run tests
  • add codecov

Update a project is not working

Currently, there is no option to update a project after it's created. This is required to fetch new decks (or remove deck that don't exist anymore) and configure them accordingly.
I tried to save the project again (which triggers an update I think). However, that cause the project's Access Token to be set to the Access Username's value. In turn, a project is rendered completely unusable because of RepositoryAuthenticationFailed errors.

Sentry Build Integration

Sentry DSN is currently hard-coded.

  • substitute hard-coded DSN for env variable
  • remove project from Sentry
  • add variable to build process

Improve E2E test coverage

Goals:

  • Tests all components
    • AppBar
    • ErrorHandler
    • Layout
    • Navigation
    • general/Avatar
    • Organization/CreateOrJoin
    • Organization/OrgaDone
    • OrganizationLogo
    • Organization/OrganizationMembers
    • Organization/OrganizationTitle
    • Projects/DeleteProject
    • Projects/DeleteSops
    • Projects/EditDeck
    • Projects/ProjectBar
    • Projects/ProjectList
    • Projects/ProjectMemberAvatars
    • Projects/RemoveMember
    • Settings/DeleteOrganizationMember
    • views/Projects
    • views/Settings
    • views/Organizations/CreateOrganization
    • views/Projects/ProjectForm
    • views/Projects/ProjectDetail
    • views/Projects/CreateProjects
    • views/Projects/AddTeamMembers
    • views/Projects/ProjectDetail/ClusterSettings
    • views/Projects/ProjectDetail/ProjectDecks
    • views/Projects/ProjectDetail/ProjectMembers
    • views/Projects/ProjectDetail/Sops
    • views/Settings/AccountSettings
    • views/Settings/NotificationSettings
    • views/Settings/OrganizationRoles
    • views/Settings/OrganizationSettings
  • bring coverage to 90%

Project Cluster Settings

Add Project Cluster Settings to frontend.

Currently planned settings:
Cluster Port

Render Variables for helm rendering process.

Add +X for member preview

Currently all members are shown. This can lead to problems with the layout.

Should look something like this:
Bildschirmfoto 2021-07-15 um 20 43 58

Deck appears in other projects

I have decks appearing in projects they don't belong to. This might be a backend service problem fulfilling a GrapQL query not honoring the project filter.
image

Release Workflow

Add Github Action - when new release is drafted - create a new tag / docker image and push it to registry.

  • For local dev
  • For production env

SOPS save does not work

SOPS save is broken. Probably happened during refactor.

€dit: Seems like project just needs to be updated.

Add status color to snackbar

Snackbars are currently always displayed with the primary color which indicated "success".
However, there are already some cases where it makes sense to color the snackbar red to indicate an error.

Intro process cannot be left upon new registration

After new registration the intro process pops up. However, when creating a new (or perhaps joining an existing organization, too) organization the process continues. The user is not able to go to the dashboard overview.
This might be caused by a missing token refresh.

A 'full refresh' solves this.

Current view name

The name of of the current view is currently represented by the dotted name path used by vue-router.

We should consider using more human friendly names for this.

image

Store recently selected organization

After a refresh of the application the selected application is reset.
In addition, there are situations in which I am editing a project from another organization:

  1. switch organization
  2. edit project
  3. refresh
  4. organization is reset, project can be edited, but selections and query results don't make sense.

Store some application state in localstorage

When reloading the page there is some unintuitive behaviour - e.g.:

  • the currently set organization changes to the first available
  • the sidebar expands when it was collapsed before

Helm Overrides

We're planning a new feature which allows to override values for the helm chart rendering process.
These values should be displayed and editable by the frontend.

Show project status

Currently the user is not informed about the project status (whether cloning succeeded, was parsed successful etc...)
We should probably find a way to visualise that state, maybe including information on how to fix a "bad" status.

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.