Code Monkey home page Code Monkey logo

kubevirt-plugin's Introduction

OpenShift Console Kubevirt Plugin

DeepSource codecov

alt kubevirt ui logos

This project is a standalone repository hosting the Kubevirt plugin for OpenShift Console.

Local development

Option 1 (recommended):

Open two terminals and navigate to the kubevirt-plugin directory in both of them. The first terminal will run a containerized instance of console and the second will run the kubevirt-plugin.

In the first terminal:

  1. Log into the OpenShift cluster you are using.
  2. Run yarn start-console OR ./start-console.sh OR ./start-console-auth-mode.sh.

In the second terminal:

  1. Run yarn && yarn dev

NOTE: ./start-console-auth-mode.sh is when authentication is needed, start-console.sh, ignores authentication.

Option 2: Docker + VSCode Remote Container

Make sure the Remote Containers extension is installed. This method uses Docker Compose where one container is the OpenShift console and the second container is the plugin. It requires that you have access to an existing OpenShift cluster. After the initial build, the cached containers will help you start developing in seconds.

  1. Create a dev.env file inside the .devcontainer folder with the correct values for your cluster:
OC_PLUGIN_NAME=kubevirt-plugin
OC_URL=https://api.example.com:6443
OC_USER=kubeadmin
OC_PASS=<password>
  1. (Ctrl+Shift+P) => Remote Containers: Open Folder in Container...
  2. yarn dev
  3. Navigate to http://localhost:9000

Cypress Testing inside the container

  1. yarn test-cypress-docker
  2. Navigate to http://localhost:10000
  3. login with password kubevirt (no need for username)

Option 3:

  1. Set up Console and See the plugin development section in Console Dynamic Plugins README for details on how to run OpenShift console using local plugins.
  2. Run bridge with -plugins kubevirt-plugin=http://localhost:9001
  3. Run yarn dev inside the plugin.

i18n

You should use the useKubevirtTranslation hook as follows:

conster Header: React.FC = () => {
  const { t } = useKubevirtTranslation();
  return <h1>{t('Hello, World!')}</h1>;
};

For labels in console-extensions.json, you should use the format %plugin__kubevirt-plugin~My Label%. Console will replace the value with the message for the current language from the plugin__kubevirt-plugin namespace. For example:

{
  "type": "console.navigation/section",
  "properties": {
    "id": "admin-demo-section",
    "perspective": "admin",
    "name": "%plugin__kubevirt-plugin~VirtualMachines%"
  }
}

Note that you will need to include a comment in utils/i18n.ts like the following for i18next-parser to add the message from console-extensions.json to your message catalog as follows:

// t('plugin__kubevirt-plugin~VirtualMachines')

Run yarn i18n to update the JSON files in the locales folder of the dynamic plugin when adding or changing messages.

Docker image

  1. Build the image:
    docker build -t quay.io/kubevirt-ui/kubevirt-plugin:latest .
  2. Run the image:
    docker run -it --rm -d -p 9001:80 quay.io/kubevirt-ui/kubevirt-plugin:latest
  3. Push the image to the image registry:
    docker push quay.io/kubevirt-ui/kubevirt-plugin:latest

Deployment on cluster

After pushing an image with your changes to an image registry, you can deploy the plugin to a cluster by instantiating the template:

oc process -f oc-manifest.yaml \
  -p PLUGIN_NAME=kubevirt-plugin \
  -p NAMESPACE=kubevirt-ui \
  -p IMAGE=quay.io/kubevirt-ui/kubevirt-plugin:latest \
  | oc create -f -

Once deployed, patch the Console operator config to enable the plugin.

oc patch consoles.operator.openshift.io cluster \
  --patch '{ "spec": { "plugins": ["kubevirt-plugin"] } }' --type=merge

kubevirt-plugin's People

Contributors

avivtur avatar codacy-badger avatar danaorr avatar deepsource-autofix[bot] avatar github-actions[bot] avatar glekner avatar gouyang avatar lkladnit avatar metalice avatar openshift-ci[bot] avatar openshift-merge-robot avatar pcbailey avatar tnisan avatar upalatucci avatar yaacov avatar

Watchers

 avatar

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.