add CloudForecast plugin

plugins/cloudforecast/.eslintignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

plugins/cloudforecast/.eslintrc.js

@@ -0,0 +1,30 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
+    "standard-with-typescript",
+    "prettier",
+  ],
+  overrides: [],
+  parserOptions: {
+    ecmaVersion: "latest",
+    project: "tsconfig.json",
+    sourceType: "module",
+    tsconfigRootDir: __dirname,
+  },
+  plugins: ["react"],
+  rules: {
+    // conflicts with no-extra-boolean-cast
+    "@typescript-eslint/strict-boolean-expressions": "off",
+    "no-console": ["error", { allow: ["warn", "error"] }],
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+};

plugins/cloudforecast/.gitignore

@@ -0,0 +1,12 @@
+# OSX
+*.DS_Store
+
+# IDEs
+.idea
+*.iml
+.vscode
+
+# This project
+node_modules/
+dist/
+yarn-error.log

plugins/cloudforecast/.prettierignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

plugins/cloudforecast/README.md

@@ -0,0 +1,93 @@
+# CloudForecast Cortex Plugin
+
+View CloudForecast data for your Cortex entities!
+
+<div align="center"><img src="img/cf_ss1.png" /></div>
+
+The CloudForecast Plugin for Cortex shows current highlights from CloudForecast reports related to your Cortex entities, and deeplinks back to the full report in CloudForecast. The data is ingested from CloudForecast webhooks using a Cortex Custom Integration.
+
+## Setup
+
+This plugin is available from the Cortex Plugin Marketplace. If you want to build the plugin yourself, follow the steps under **Build the Plugin** at the end of this document.
+
+### Cortex Setup
+
+This plugin uses a Custom Integration to take in webhooks from CloudForecast. To set up the Custom Integration in Cortex, follow these steps:
+
+- Click on your user icon on the bottom left, then click Settings
+- Click on Custom Integrations under the Integrations heading
+- Under the New Custom Integration heading, fill in the three fields as below:
+  - Name: `CloudForecast`
+  - Entity Tag JQ: `.entityTag`
+  - Key: `cloudforecast`
+- Click Save.
+
+Once you are done, your Custom Integration should look like this:
+
+<div align="center"><img src="img/cf_ss2.png" /></div>
+
+Copy the URL that's shown under the key. This will be the integration URL that you add to CloudForecast.
+
+### CloudForecast Basic Setup
+
+- In CloudForecast, click on Settings > Cortex
+- Paste in the Custom Integration URL that you copied from the **Cortex Setup** above
+- Click on Save Changes
+
+<div align="center"><img src="img/cf_ss3.jpg" /></div>
+
+### CloudForecast Report Setup
+
+- Click on Reports > Cost Groups
+- Click the Configure button on a Cost Group that you want to send to a Cortex entity
+- Under "How would you like to receive your reports?" click on Cortex
+- Type in the tag of the entity where you want this report to appear, and click on Save Changes
+- Repeat these steps for all the Cost Groups you want to link to Cortex
+
+<div align="center"><img src="img/cf_ss4.jpg" /></div>
+
+_If you don't see the Cortex button in CloudForecast, reach out to your CloudForecast support team to enable it._
+
+After the webhooks are delivered from Cortex, you will be able to see your CloudForecast data in your Entity Details page in Cortex, under the Plugins section!
+
+### Build the Plugin (optional)
+
+- Build the plugin:
+- Make sure you have npm or yarn.
+- In your terminal, in the `cloudforecast` directory, type `yarn` or `npm install` to install the dependencies; then type `npm run build` or `yarn build` to build the plugin.
+- The compiled plugin will be created in `dist/ui.html`.
+- In Plugins > All, click **Register Plugin**.
+- Give the plugin a name, like CloudForecast. This is the name users will see in the plugin listing.
+- Under **Plugin Context**, click on Add another context; choose Selection type: Include, and Entity types: service.
+- This plugin does not work in the Global context. Turn off the switch labeled **Include in global context**.
+- In The **Plugin code** section, upload the `dist/ui.html` file you just built.
+- Click on **Save plugin**.
+
+# Setting up your dev environment
+
+SonarQube Issues Cortex Plugin is a [Cortex](https://www.cortex.io/) plugin. To see how to run the plugin inside of Cortex, see [our docs](https://docs.cortex.io/docs/plugins).
+
+### Prerequisites
+
+Developing and building this plugin requires either [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) or [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
+
+## Getting started
+
+1. Run `yarn` or `npm install` to download all dependencies
+2. Run `yarn build` or `npm run build` to compile the plugin code into `./dist/ui.html`
+3. Upload `ui.html` into Cortex on a create or edit plugin page
+4. Add or update the code and repeat steps 2-3 as necessary
+
+### Notable scripts
+
+The following commands come pre-configured in this repository. You can see all available commands in the `scripts` section of [package.json](./package.json). They can be run with npm via `npm run {script_name}` or with yarn via `yarn {script_name}`, depending on your package manager preference. For instance, the `build` command can be run with `npm run build` or `yarn build`.
+
+- `build` - compiles the plugin. The compiled code root is `./src/index.tsx` (or as defined by [webpack.config.js](webpack.config.js)) and the output is generated into `dist/ui.html`.
+- `test` - runs all tests defined in the repository using [jest](https://jestjs.io/)
+- `lint` - runs lint and format checking on the repository using [prettier](https://prettier.io/) and [eslint](https://eslint.org/)
+- `lintfix` - runs eslint in fix mode to fix any linting errors that can be fixed automatically
+- `formatfix` - runs Prettier in fix mode to fix any formatting errors that can be fixed automatically
+
+### Available React components
+
+See available UI components via our [Storybook](https://cortexapps.github.io/plugin-core/).

plugins/cloudforecast/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = "test-file-stub";

plugins/cloudforecast/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

plugins/cloudforecast/babel.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: ["@babel/plugin-syntax-jsx"],
+  presets: [
+    ["@babel/preset-env", { targets: { node: "current" } }],
+    "@babel/preset-typescript",
+    ["@babel/preset-react", { runtime: "automatic" }],
+  ],
+};

plugins/cloudforecast/jest.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  moduleNameMapper: {
+    // map static asset imports to a stub file under the assumption they are not important to our tests
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+      "<rootDir>/__mocks__/fileMock.js",
+    // map style asset imports to a stub file under the assumption they are not important to our tests
+    "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
+    "@cortexapps/plugin-core/components":
+      "<rootDir>/../../node_modules/@cortexapps/plugin-core/dist/components.cjs.js",
+    "@cortexapps/plugin-core":
+      "<rootDir>/../../node_modules/@cortexapps/plugin-core/dist/index.cjs.js",
+  },
+  setupFilesAfterEnv: ["<rootDir>/setupTests.ts"],
+  testEnvironment: "jsdom",
+  transform: {
+    "^.+\\.tsx?$": "babel-jest",
+  },
+};

plugins/cloudforecast/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "cloudforecast-plugin",
+  "version": "0.1.0",
+  "license": "MIT",
+  "dependencies": {
+    "@chakra-ui/icons": "^2.2.4",
+    "@chakra-ui/react": "2",
+    "@cortexapps/plugin-core": "^2.0.0",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "framer-motion": "^11.11.17",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.3",
+    "@babel/plugin-syntax-jsx": "^7.18.6",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.0",
+    "@popperjs/core": "^2.11.8",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.0.0",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.55.0",
+    "babel-jest": "^29.5.0",
+    "css-loader": "^6.7.3",
+    "eslint": "^8.0.1",
+    "eslint-config-prettier": "^8.7.0",
+    "eslint-config-standard-with-typescript": "^34.0.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-n": "^15.6.1",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "html-webpack-plugin": "^5.5.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-fetch-mock": "^3.0.3",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.8.4",
+    "prop-types": "^15.8.1",
+    "react-dev-utils": "^12.0.1",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.7",
+    "ts-loader": "^9.4.2",
+    "typescript": "^4.9.5",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.76.1",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.15.0"
+  },
+  "scripts": {
+    "build": "webpack --mode=production",
+    "clean": "rm -r ./dist",
+    "dev": "webpack serve --mode=development",
+    "fix": "run-p formatfix lintfix",
+    "formatfix": "yarn prettier . --write",
+    "formatcheck": "yarn prettier . --check",
+    "lint": "run-p formatcheck lintcheck",
+    "lintcheck": "yarn eslint src",
+    "lintfix": "yarn lintcheck --fix",
+    "test": "jest"
+  }
+}

plugins/cloudforecast/setupTests.ts

@@ -0,0 +1,60 @@
+import "@testing-library/jest-dom/extend-expect";
+import fetchMock from "jest-fetch-mock";
+
+fetchMock.enableMocks();
+
+const mockContext = {
+  apiBaseUrl: "https://api.cortex.dev",
+  entity: {
+    definition: null,
+    description: null,
+    groups: null,
+    name: "Inventory planner",
+    ownership: {
+      emails: [
+        {
+          description: null,
+          email: "[email protected]",
+          inheritance: null,
+          id: 1,
+        },
+      ],
+    },
+    tag: "inventory-planner",
+    type: "service",
+  },
+  location: "ENTITY",
+  user: {
+    email: "[email protected]",
+    name: "Ganesh Datta",
+    role: "ADMIN",
+  },
+};
+
+jest.mock("@cortexapps/plugin-core/components", () => {
+  const originalModule = jest.requireActual(
+    "@cortexapps/plugin-core/components"
+  );
+  return {
+    ...originalModule,
+    usePluginContext: () => {
+      return mockContext;
+    },
+    PluginProvider: ({ children }) => {
+      return children;
+    },
+  };
+});
+
+jest.mock("@cortexapps/plugin-core", () => {
+  const originalModule = jest.requireActual("@cortexapps/plugin-core");
+  return {
+    ...originalModule,
+    CortexApi: {
+      ...originalModule.CortexApi,
+      getContext: () => {
+        return mockContext;
+      },
+    },
+  };
+});

plugins/cloudforecast/src/api/Cortex.ts

@@ -0,0 +1,8 @@
+export const getEntityYaml = async (
+  baseUrl: string,
+  entityTag: string
+): Promise<any> => {
+  const res = await fetch(`${baseUrl}/catalog/${entityTag}/openapi`);
+
+  return await res.json();
+};

plugins/cloudforecast/src/baseStyles.css

@@ -0,0 +1,3 @@
+body {
+  font: 14px sans-serif;
+}