From 0eac8f037d41ef83f4c5cccdc38101e718832d35 Mon Sep 17 00:00:00 2001 From: Ryan Vazquez Date: Mon, 26 Oct 2020 15:00:46 -0400 Subject: [PATCH 1/5] move cost insights example client to plugin --- packages/app/package.json | 3 --- packages/app/src/apis.ts | 3 +-- .../app/src/plugins/cost-insights/index.ts | 17 ----------------- plugins/cost-insights/dev/index.tsx | 19 ++++++++++++++++--- plugins/cost-insights/package.json | 9 ++++++--- .../src/api}/ExampleCostInsightsClient.ts | 4 ++-- plugins/cost-insights/src/api/index.ts | 1 + plugins/cost-insights/src/plugin.ts | 8 +++++--- yarn.lock | 8 ++++---- 9 files changed, 35 insertions(+), 37 deletions(-) delete mode 100644 packages/app/src/plugins/cost-insights/index.ts rename {packages/app/src/plugins/cost-insights => plugins/cost-insights/src/api}/ExampleCostInsightsClient.ts (99%) diff --git a/packages/app/package.json b/packages/app/package.json index dc452e0803..7ac3c8e5fc 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -37,7 +37,6 @@ "@roadiehq/backstage-plugin-github-insights": "^0.2.7", "@roadiehq/backstage-plugin-github-pull-requests": "^0.5.2", "@roadiehq/backstage-plugin-travis-ci": "^0.2.3", - "dayjs": "^1.9.1", "history": "^5.0.0", "prop-types": "^15.7.2", "react": "^16.12.0", @@ -46,7 +45,6 @@ "react-router": "6.0.0-beta.0", "react-router-dom": "6.0.0-beta.0", "react-use": "^15.3.3", - "regression": "^2.0.1", "zen-observable": "^0.8.15" }, "devDependencies": { @@ -58,7 +56,6 @@ "@types/jquery": "^3.3.34", "@types/node": "^12.0.0", "@types/react-dom": "^16.9.8", - "@types/regression": "^2.0.0", "@types/zen-observable": "^0.8.0", "cross-env": "^7.0.0", "cypress": "^4.2.0", diff --git a/packages/app/src/apis.ts b/packages/app/src/apis.ts index c129bebfa2..9fdc6ce804 100644 --- a/packages/app/src/apis.ts +++ b/packages/app/src/apis.ts @@ -35,8 +35,7 @@ import { githubPullRequestsApiRef, } from '@roadiehq/backstage-plugin-github-pull-requests'; -import { costInsightsApiRef } from '@backstage/plugin-cost-insights'; -import { ExampleCostInsightsClient } from './plugins/cost-insights'; +import { costInsightsApiRef, ExampleCostInsightsClient } from '@backstage/plugin-cost-insights'; export const apis = [ createApiFactory({ diff --git a/packages/app/src/plugins/cost-insights/index.ts b/packages/app/src/plugins/cost-insights/index.ts deleted file mode 100644 index 47d540049f..0000000000 --- a/packages/app/src/plugins/cost-insights/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export { ExampleCostInsightsClient } from './ExampleCostInsightsClient'; diff --git a/plugins/cost-insights/dev/index.tsx b/plugins/cost-insights/dev/index.tsx index 812a5585d4..515a9b6d80 100644 --- a/plugins/cost-insights/dev/index.tsx +++ b/plugins/cost-insights/dev/index.tsx @@ -13,8 +13,21 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - import { createDevApp } from '@backstage/dev-utils'; -import { plugin } from '../src/plugin'; +import { createPlugin, createApiFactory } from '@backstage/core'; +import { ExampleCostInsightsClient } from '../src/api'; +import { costInsightsApiRef } from '../src'; +import { pluginConfig } from '../src/plugin'; -createDevApp().registerPlugin(plugin).render(); +const devPlugin = createPlugin({ + ...pluginConfig, + apis: [ + createApiFactory({ + api: costInsightsApiRef, + deps: {}, + factory: () => new ExampleCostInsightsClient() + }) + ] +}); + +createDevApp().registerPlugin(devPlugin).render(); diff --git a/plugins/cost-insights/package.json b/plugins/cost-insights/package.json index e79c4ab962..0a258299b3 100644 --- a/plugins/cost-insights/package.json +++ b/plugins/cost-insights/package.json @@ -33,6 +33,7 @@ "@types/recharts": "^1.8.14", "canvas": "^2.6.1", "classnames": "^2.2.6", + "dayjs": "^1.9.4", "history": "^5.0.0", "moment": "^2.27.0", "qs": "^6.9.4", @@ -41,21 +42,23 @@ "react-router-dom": "6.0.0-beta.0", "react-use": "^15.3.3", "recharts": "^1.8.5", + "regression": "^2.0.1", "yup": "^0.29.3" }, "devDependencies": { "@backstage/cli": "^0.1.1-alpha.25", "@backstage/dev-utils": "^0.1.1-alpha.25", + "@backstage/test-utils": "^0.1.1-alpha.25", "@testing-library/jest-dom": "^5.10.1", "@testing-library/react": "^10.4.1", "@testing-library/user-event": "^12.0.7", "@types/jest": "^26.0.7", "@types/node": "^12.0.0", - "@types/yup": "^0.29.8", "@types/recharts": "^1.8.14", - "msw": "^0.21.2", + "@types/regression": "^2.0.0", + "@types/yup": "^0.29.8", "cross-fetch": "^3.0.6", - "@backstage/test-utils": "^0.1.1-alpha.25" + "msw": "^0.21.2" }, "files": [ "dist" diff --git a/packages/app/src/plugins/cost-insights/ExampleCostInsightsClient.ts b/plugins/cost-insights/src/api/ExampleCostInsightsClient.ts similarity index 99% rename from packages/app/src/plugins/cost-insights/ExampleCostInsightsClient.ts rename to plugins/cost-insights/src/api/ExampleCostInsightsClient.ts index 799b9e1975..35bff86f7f 100644 --- a/packages/app/src/plugins/cost-insights/ExampleCostInsightsClient.ts +++ b/plugins/cost-insights/src/api/ExampleCostInsightsClient.ts @@ -17,11 +17,11 @@ import dayjs from 'dayjs'; import regression, { DataPoint } from 'regression'; +import { CostInsightsApi } from './CostInsightsApi'; import { Alert, ChangeStatistic, Cost, - CostInsightsApi, DateAggregation, DEFAULT_DATE_FORMAT, Duration, @@ -37,7 +37,7 @@ import { Trendline, UnlabeledDataflowAlert, UnlabeledDataflowData, -} from '@backstage/plugin-cost-insights'; +} from '../types'; type IntervalFields = { duration: Duration; diff --git a/plugins/cost-insights/src/api/index.ts b/plugins/cost-insights/src/api/index.ts index d231570e9b..a367df9487 100644 --- a/plugins/cost-insights/src/api/index.ts +++ b/plugins/cost-insights/src/api/index.ts @@ -15,3 +15,4 @@ */ export * from './CostInsightsApi'; +export * from './ExampleCostInsightsClient'; diff --git a/plugins/cost-insights/src/plugin.ts b/plugins/cost-insights/src/plugin.ts index d8d54ae71b..3c50707374 100644 --- a/plugins/cost-insights/src/plugin.ts +++ b/plugins/cost-insights/src/plugin.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { createPlugin, createRouteRef } from '@backstage/core'; +import { createPlugin, createRouteRef, PluginConfig } from '@backstage/core'; import CostInsightsPage from './components/CostInsightsPage'; import ProjectGrowthInstructionsPage from './components/ProjectGrowthInstructionsPage'; import LabelDataflowInstructionsPage from './components/LabelDataflowInstructionsPage'; @@ -34,7 +34,7 @@ export const unlabeledDataflowAlertRef = createRouteRef({ title: 'Labeling Dataflow Jobs', }); -export const plugin = createPlugin({ +export const pluginConfig: PluginConfig = { id: 'cost-insights', register({ router, featureFlags }) { router.addRoute(rootRouteRef, CostInsightsPage); @@ -42,4 +42,6 @@ export const plugin = createPlugin({ router.addRoute(unlabeledDataflowAlertRef, LabelDataflowInstructionsPage); featureFlags.register('cost-insights-currencies'); }, -}); +} + +export const plugin = createPlugin(pluginConfig); diff --git a/yarn.lock b/yarn.lock index 3d3300493a..92bac86b17 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9797,10 +9797,10 @@ dateformat@^3.0.0: resolved "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae" integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q== -dayjs@^1.9.1: - version "1.9.3" - resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.9.3.tgz#b7f94b22ad2a136a4ca02a01ab68ae893fe1a268" - integrity sha512-V+1SyIvkS+HmNbN1G7A9+ERbFTV9KTXu6Oor98v2xHmzzpp52OIJhQuJSTywWuBY5pyAEmlwbCi1Me87n/SLOw== +dayjs@^1.9.4: + version "1.9.4" + resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.9.4.tgz#fcde984e227f4296f04e7b05720adad2e1071f1b" + integrity sha512-ABSF3alrldf7nM9sQ2U+Ln67NRwmzlLOqG7kK03kck0mw3wlSSEKv/XhKGGxUjQcS57QeiCyNdrFgtj9nWlrng== de-indent@^1.0.2: version "1.0.2" From fe741950a0901de5baa42931f76d1571ea4fbefd Mon Sep 17 00:00:00 2001 From: Ryan Vazquez Date: Mon, 26 Oct 2020 15:02:19 -0400 Subject: [PATCH 2/5] make PluginConfig and dependent types public --- packages/core-api/src/plugin/Plugin.tsx | 40 ++----------------------- packages/core-api/src/plugin/types.ts | 32 ++++++++++++++++++++ 2 files changed, 34 insertions(+), 38 deletions(-) diff --git a/packages/core-api/src/plugin/Plugin.tsx b/packages/core-api/src/plugin/Plugin.tsx index 1835ec03ad..dd6d2b8247 100644 --- a/packages/core-api/src/plugin/Plugin.tsx +++ b/packages/core-api/src/plugin/Plugin.tsx @@ -14,54 +14,18 @@ * limitations under the License. */ -import { ComponentType } from 'react'; import { + PluginConfig, PluginOutput, - RoutePath, - RouteOptions, - FeatureFlagName, BackstagePlugin, } from './types'; import { validateBrowserCompat, validateFlagName } from '../app/FeatureFlags'; -import { RouteRef } from '../routing'; import { AnyApiFactory } from '../apis'; -export type PluginConfig = { - id: string; - apis?: Iterable; - register?(hooks: PluginHooks): void; -}; - -export type PluginHooks = { - router: RouterHooks; - featureFlags: FeatureFlagsHooks; -}; - -export type RouterHooks = { - addRoute( - target: RouteRef, - Component: ComponentType, - options?: RouteOptions, - ): void; - - /** - * @deprecated See the `addRoute` method - */ - registerRoute( - path: RoutePath, - Component: ComponentType, - options?: RouteOptions, - ): void; -}; - -export type FeatureFlagsHooks = { - register(name: FeatureFlagName): void; -}; - export class PluginImpl { private storedOutput?: PluginOutput[]; - constructor(private readonly config: PluginConfig) {} + constructor(private readonly config: PluginConfig) { } getId(): string { return this.config.id; diff --git a/packages/core-api/src/plugin/types.ts b/packages/core-api/src/plugin/types.ts index dacb3668bc..76c05f7b04 100644 --- a/packages/core-api/src/plugin/types.ts +++ b/packages/core-api/src/plugin/types.ts @@ -73,3 +73,35 @@ export type BackstagePlugin = { output(): PluginOutput[]; getApis(): Iterable; }; + +export type PluginConfig = { + id: string; + apis?: Iterable; + register?(hooks: PluginHooks): void; +}; + +export type PluginHooks = { + router: RouterHooks; + featureFlags: FeatureFlagsHooks; +}; + +export type RouterHooks = { + addRoute( + target: RouteRef, + Component: ComponentType, + options?: RouteOptions, + ): void; + + /** + * @deprecated See the `addRoute` method + */ + registerRoute( + path: RoutePath, + Component: ComponentType, + options?: RouteOptions, + ): void; +}; + +export type FeatureFlagsHooks = { + register(name: FeatureFlagName): void; +}; From 26e69ab1a244ebb9de98cf642310fe015f6474ca Mon Sep 17 00:00:00 2001 From: Ryan Vazquez Date: Mon, 26 Oct 2020 15:29:13 -0400 Subject: [PATCH 3/5] changeset --- .changeset/seven-humans-check.md | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 .changeset/seven-humans-check.md diff --git a/.changeset/seven-humans-check.md b/.changeset/seven-humans-check.md new file mode 100644 index 0000000000..f2fb784cc0 --- /dev/null +++ b/.changeset/seven-humans-check.md @@ -0,0 +1,9 @@ +--- +'example-app': patch +'@backstage/core-api': patch +'@backstage/plugin-cost-insights': patch +--- + +Remove cost insights example client from demo app and export from plugin +Create cost insights dev plugin using example client +Make PluginConfig and dependent types public From 75336fbbd71622130ba783bd94016440b5ccf524 Mon Sep 17 00:00:00 2001 From: Ryan Vazquez Date: Mon, 26 Oct 2020 15:41:13 -0400 Subject: [PATCH 4/5] formatting --- packages/app/src/apis.ts | 5 ++++- packages/core-api/src/plugin/Plugin.tsx | 8 ++------ plugins/cost-insights/dev/index.tsx | 6 +++--- plugins/cost-insights/src/plugin.ts | 2 +- 4 files changed, 10 insertions(+), 11 deletions(-) diff --git a/packages/app/src/apis.ts b/packages/app/src/apis.ts index 9fdc6ce804..fe24ac228d 100644 --- a/packages/app/src/apis.ts +++ b/packages/app/src/apis.ts @@ -35,7 +35,10 @@ import { githubPullRequestsApiRef, } from '@roadiehq/backstage-plugin-github-pull-requests'; -import { costInsightsApiRef, ExampleCostInsightsClient } from '@backstage/plugin-cost-insights'; +import { + costInsightsApiRef, + ExampleCostInsightsClient, +} from '@backstage/plugin-cost-insights'; export const apis = [ createApiFactory({ diff --git a/packages/core-api/src/plugin/Plugin.tsx b/packages/core-api/src/plugin/Plugin.tsx index dd6d2b8247..866d430070 100644 --- a/packages/core-api/src/plugin/Plugin.tsx +++ b/packages/core-api/src/plugin/Plugin.tsx @@ -14,18 +14,14 @@ * limitations under the License. */ -import { - PluginConfig, - PluginOutput, - BackstagePlugin, -} from './types'; +import { PluginConfig, PluginOutput, BackstagePlugin } from './types'; import { validateBrowserCompat, validateFlagName } from '../app/FeatureFlags'; import { AnyApiFactory } from '../apis'; export class PluginImpl { private storedOutput?: PluginOutput[]; - constructor(private readonly config: PluginConfig) { } + constructor(private readonly config: PluginConfig) {} getId(): string { return this.config.id; diff --git a/plugins/cost-insights/dev/index.tsx b/plugins/cost-insights/dev/index.tsx index 515a9b6d80..836aea0edb 100644 --- a/plugins/cost-insights/dev/index.tsx +++ b/plugins/cost-insights/dev/index.tsx @@ -25,9 +25,9 @@ const devPlugin = createPlugin({ createApiFactory({ api: costInsightsApiRef, deps: {}, - factory: () => new ExampleCostInsightsClient() - }) - ] + factory: () => new ExampleCostInsightsClient(), + }), + ], }); createDevApp().registerPlugin(devPlugin).render(); diff --git a/plugins/cost-insights/src/plugin.ts b/plugins/cost-insights/src/plugin.ts index 3c50707374..0fc9cc623e 100644 --- a/plugins/cost-insights/src/plugin.ts +++ b/plugins/cost-insights/src/plugin.ts @@ -42,6 +42,6 @@ export const pluginConfig: PluginConfig = { router.addRoute(unlabeledDataflowAlertRef, LabelDataflowInstructionsPage); featureFlags.register('cost-insights-currencies'); }, -} +}; export const plugin = createPlugin(pluginConfig); From e724a659232817a6166f4c1361756d1ec4ba76e6 Mon Sep 17 00:00:00 2001 From: Navaneeth Suresh Date: Tue, 27 Oct 2020 20:41:14 +0530 Subject: [PATCH 5/5] Disable yarn update check --- .yarnrc | 1 + 1 file changed, 1 insertion(+) diff --git a/.yarnrc b/.yarnrc index f465c5c5e6..6b56b971d7 100644 --- a/.yarnrc +++ b/.yarnrc @@ -3,6 +3,7 @@ registry "https://registry.npmjs.org/" +disable-self-update-check true lastUpdateCheck 1580389148099 yarn-path ".yarn/releases/yarn-1.22.1.js" network-timeout 600000