diff --git a/.gitignore b/.gitignore
index 74cf3df08..89b202277 100644
--- a/.gitignore
+++ b/.gitignore
@@ -97,7 +97,6 @@ rkt-*
# misc
/ui/.sass-cache
/ui/.eslintcache
-/ui/.storybook/preview-head.html
/ui/connect.lock
/ui/coverage/*
/ui/libpeerconnection.log
diff --git a/ui/.eslintrc.js b/ui/.eslintrc.js
index 4a039269f..4478e9079 100644
--- a/ui/.eslintrc.js
+++ b/ui/.eslintrc.js
@@ -69,17 +69,6 @@ module.exports = {
'node/no-unpublished-require': 'off',
},
},
- {
- files: ['stories/**/*.js'],
- parserOptions: {
- sourceType: 'module',
- },
- env: {
- browser: false,
- node: true,
- },
- plugins: ['node'],
- },
{
// Test files:
files: ['tests/**/*-test.{js,ts}'],
diff --git a/ui/.storybook/main.js b/ui/.storybook/main.js
deleted file mode 100644
index 3383fc71b..000000000
--- a/ui/.storybook/main.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-/* eslint-env node */
-module.exports = {
- framework: '@storybook/ember',
- addons: [
- '@storybook/addon-docs',
- '@storybook/addon-storysource',
- '@storybook/addon-knobs',
- '@storybook/addon-viewport',
- ],
- stories: [
- '../stories/theme/*.stories.js',
- '../stories/components/*.stories.js',
- '../stories/charts/*.stories.js',
- ],
- core: {
- builder: '@storybook/builder-webpack4',
- },
-};
diff --git a/ui/.storybook/preview.js b/ui/.storybook/preview.js
deleted file mode 100644
index b1302bcd2..000000000
--- a/ui/.storybook/preview.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import { addDecorator, addParameters } from '@storybook/ember';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-import theme from './theme.js';
-
-addParameters({
- viewport: { viewports: INITIAL_VIEWPORTS },
- options: {
- showPanel: true,
- theme,
- },
-});
-
-addDecorator((storyFn) => {
- let { template, context } = storyFn();
-
- let wrapperElementStyle = {
- margin: '20px',
- };
-
- let applicationWrapperElement = document.createElement('div');
- Object.assign(applicationWrapperElement.style, wrapperElementStyle);
-
- let storybookElement = document.createElement('div');
- storybookElement.setAttribute('id', 'storybook');
-
- let wormhole = document.createElement('div');
- wormhole.setAttribute('id', 'ember-basic-dropdown-wormhole');
-
- storybookElement.appendChild(wormhole);
-
- applicationWrapperElement.appendChild(storybookElement);
- storybookElement.appendTo = function appendTo(el) {
- el.appendChild(applicationWrapperElement);
- };
-
- return {
- template,
- context,
- element: storybookElement,
- };
-});
diff --git a/ui/.storybook/theme.js b/ui/.storybook/theme.js
deleted file mode 100644
index 174b2e775..000000000
--- a/ui/.storybook/theme.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import { create } from '@storybook/theming';
-
-// From Bulma
-let blackBis = 'hsl(0, 0%, 7%)';
-let greyLight = 'hsl(0, 0%, 71%)';
-
-// From product-colors.scss
-let vagrantBlue = '#1563ff';
-
-export default create({
- base: 'light',
-
- colorPrimary: blackBis,
- colorSecondary: vagrantBlue,
-
- // UI
- appBorderColor: greyLight,
-
- // Typography
- // From variables.scss
- fontBase:
- "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
- // From Bulma
- fontCode: 'monospace',
-
- // Text colors
- textColor: blackBis,
-
- // Toolbar default and active colors
- barTextColor: greyLight,
- barSelectedColor: 'white',
- barBg: blackBis,
-
- brandTitle: 'Nomad Storybook',
- brandUrl: 'https://developer.hashicorp.com/nomad/',
-});
diff --git a/ui/.vercel/build.sh b/ui/.vercel/build.sh
index ab516ea7e..87890944f 100755
--- a/ui/.vercel/build.sh
+++ b/ui/.vercel/build.sh
@@ -1,9 +1,6 @@
# Copyright (c) HashiCorp, Inc.
# SPDX-License-Identifier: BUSL-1.1
-STORYBOOK_LINK=true ember build
+ember build
mkdir -p ui-dist/ui
mv dist/* ui-dist/ui/
-
-yarn build-storybook
-mv storybook-static ui-dist/storybook/
diff --git a/ui/README.md b/ui/README.md
index d3af4ab17..f44140f90 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -78,12 +78,6 @@ Nomad UI releases are in lockstep with Nomad releases and are integrated into th
- UI branches should be prefix with `f-ui-` for feature work and `b-ui-` for bug fixes. This instructs CI to skip running nomad backend tests.
-### Storybook UI Library
-
-The Storybook project provides a browser to see what components and patterns are present in the application and how to use them. You can run it locally with `yarn storybook` after you have `ember serve` running. The latest version from the `main` branch is at [`nomad-storybook-and-ui.vercel.app/storybook/`](https://nomad-storybook-and-ui.vercel.app/storybook/).
-
-To generate a new story for a component, run `ember generate story component-name`. You can use the existing stories as a guide.
-
### Troubleshooting
#### The UI is running, but none of the API requests are working
diff --git a/ui/app/helpers/all-icons.js b/ui/app/helpers/all-icons.js
deleted file mode 100644
index 4290ba8a7..000000000
--- a/ui/app/helpers/all-icons.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import { helper } from '@ember/component/helper';
-
-// Generated at compile-time by ember-inline-svg
-import SVGs from '../svgs';
-
-/**
- * Icons array
- *
- * Usage: {{#each (all-icons) as |icon|}}
- *
- * Returns the array of all icon strings available to {{x-icon}}. This is a bit of a hack
- * since the above SVGs import isn't available in the Storybook context.
- */
-export function allIcons() {
- return Object.keys(SVGs);
-}
-
-export default helper(allIcons);
diff --git a/ui/app/styles/app.scss b/ui/app/styles/app.scss
index 5b3b42bb2..1cfc76153 100644
--- a/ui/app/styles/app.scss
+++ b/ui/app/styles/app.scss
@@ -10,6 +10,3 @@
@import './components';
@import '@hashicorp/design-system-components';
@import './charts';
-
-// Only necessary in dev
-@import './storybook.scss';
diff --git a/ui/app/styles/storybook.scss b/ui/app/styles/storybook.scss
deleted file mode 100644
index 99548e0a1..000000000
--- a/ui/app/styles/storybook.scss
+++ /dev/null
@@ -1,199 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-#storybook {
- .mock-content {
- display: flex;
- min-height: 250px;
- height: 100%;
-
- .mock-image,
- .mock-copy {
- min-height: 100%;
- width: 100%;
- margin: 1em;
- }
-
- .mock-image {
- background: linear-gradient(
- to top right,
- transparent 0%,
- transparent 49%,
- $grey-blue 49%,
- $grey-blue 51%,
- transparent 51%,
- transparent 100%
- ),
- linear-gradient(
- to bottom right,
- transparent 0%,
- transparent 49%,
- $grey-blue 49%,
- $grey-blue 51%,
- transparent 51%,
- transparent 100%
- );
- }
-
- .mock-copy {
- background: repeating-linear-gradient(
- to bottom,
- $grey-blue,
- $grey-blue 5px,
- transparent 5px,
- transparent 14px
- );
- }
-
- .mock-vague {
- background: lighten($grey-blue, 15%);
- width: 100%;
- height: 100%;
- }
- }
-
- .mock-spacing {
- padding: 2em;
- }
-
- .annotation {
- padding: 1rem 0;
- font-size: 0.9rem;
- }
-
- .palette {
- .title {
- font-size: 1.4rem;
- font-weight: $weight-bold;
- padding-bottom: 2px;
- padding-top: 10px;
- }
-
- .description {
- font-size: 0.8rem;
- padding-bottom: 5px;
- }
-
- .item {
- border: solid 1px $grey-blue;
- display: inline-block;
- margin: 0 5px 5px 0;
-
- .color {
- height: 90px;
- width: 160px;
- }
-
- .info {
- background-color: white;
- border-top: solid 1px $grey-blue;
- padding: 5px;
- }
-
- .hex {
- font-size: 12px;
- font-weight: $weight-bold;
- margin-bottom: 0;
- }
-
- .name {
- color: $ui-gray-500;
- font-size: 11px;
- margin-top: 0;
- }
- }
- }
-
- .typeface {
- .hero,
- .sample {
- font-family: inherit;
- }
-
- .hero {
- font-size: 140px;
- line-height: 1.05;
- }
-
- .sample {
- font-size: 15px;
- margin: 0;
- }
- }
-
- .multiples {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- justify-content: center;
-
- &.with-spacing {
- > * {
- margin-right: 1em;
- margin-bottom: 1em;
- }
- }
-
- &.is-left-aligned {
- justify-content: flex-start;
- }
- }
-
- .chart-container {
- width: 200px;
- padding: 15px;
- border: 1px solid $ui-gray-200;
- display: inline-block;
-
- &.is-small {
- width: 150px;
- }
-
- &.is-large {
- width: 250px;
- }
-
- &.is-xlarge {
- width: 300px;
- }
- }
-
- .tile-list {
- display: flex;
- flex-wrap: wrap;
-
- .icon-tile {
- width: 240px;
- padding: 10px;
- margin: 10px;
- border: 1px solid $grey-lighter;
- border-radius: $radius;
- svg {
- margin: auto;
- width: 30px;
- height: 30;
- fill: $grey;
- color: $grey;
- }
- }
- }
-
- .mock-hover-region {
- width: 200px;
- height: 100px;
- position: relative;
- border-radius: $radius;
- margin: 1em 0;
- padding: 1em;
- border: 1px solid $grey-blue;
- background: $white-ter;
- color: $grey;
- font-weight: $weight-bold;
- }
-
- .title:not(:first-child) {
- margin-top: 2em;
- }
-}
diff --git a/ui/app/templates/components/global-header.hbs b/ui/app/templates/components/global-header.hbs
index 8beca5f58..2f48a1a63 100644
--- a/ui/app/templates/components/global-header.hbs
+++ b/ui/app/templates/components/global-header.hbs
@@ -30,16 +30,6 @@
{{/unless}}
{{/if}}
- {{#if this.config.APP.showStorybookLink}}
-
- Storybook
-
- {{/if}}
{{#if this.system.agent.config.UI.Consul.BaseUIURL}}
- <%= header %>
- <<%= classifiedModuleName %>/>
- `,
- context: {},
- }
-};
diff --git a/ui/blueprints/story/index.js b/ui/blueprints/story/index.js
deleted file mode 100644
index 267e537a0..000000000
--- a/ui/blueprints/story/index.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-/* eslint-disable ember/no-string-prototype-extensions */
-const getPathOption = require('ember-cli-get-component-path-option');
-const stringUtil = require('ember-cli-string-utils');
-const path = require('path');
-
-module.exports = {
- description: 'generates a story for storybook',
-
- fileMapTokens: function () {
- let { project } = this;
- return {
- __path__: function () {
- return path.relative(project.root, project.root);
- },
- __markdownname__: function (options) {
- return options.dasherizedModuleName;
- },
- __name__: function (options) {
- return options.dasherizedModuleName;
- },
- };
- },
-
- locals: function (options) {
- let contents = '';
-
- return {
- contents: contents,
- path: getPathOption(options),
- header: stringUtil
- .dasherize(options.entity.name)
- .split('-')
- .map((word) => stringUtil.capitalize(word))
- .join(' '),
- };
- },
-};
diff --git a/ui/config/environment.js b/ui/config/environment.js
index 2be2e58ac..4e7053986 100644
--- a/ui/config/environment.js
+++ b/ui/config/environment.js
@@ -40,7 +40,6 @@ module.exports = function (environment) {
mirageWithNamespaces: true,
mirageWithTokens: true,
mirageWithRegions: true,
- showStorybookLink: process.env.STORYBOOK_LINK === 'true',
},
percy: {
@@ -59,11 +58,6 @@ module.exports = function (environment) {
enabled: USE_MIRAGE,
excludeFilesFromBuild: !USE_MIRAGE,
};
-
- if (process.env.STORYBOOK === 'true') {
- ENV.APP.autoboot = false;
- ENV.rootURL = '/';
- }
}
if (environment === 'test') {
diff --git a/ui/package.json b/ui/package.json
index 3521aafee..bb89c0e0f 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -17,8 +17,6 @@
"lint:js": "eslint . --cache",
"lint:js:fix": "eslint . --fix",
"start": "ember server",
- "build-storybook": "STORYBOOK=true ember build && NODE_OPTIONS=--openssl-legacy-provider build-storybook -s dist",
- "storybook": "NODE_OPTIONS=--openssl-legacy-provider STORYBOOK=true start-storybook -p 6006 -s dist",
"test": "npm-run-all lint test:*",
"exam": "percy exec -- ember exam --split=4 --parallel",
"exam:parallel": "percy exec --parallel -- ember exam",
@@ -34,7 +32,7 @@
}
},
"lint-staged": {
- "{app,tests,config,lib,mirage,stories}/**/*.js": [
+ "{app,tests,config,lib,mirage}/**/*.js": [
"prettier --write"
],
"app/styles/**/*.*": [
@@ -50,7 +48,6 @@
"@glimmer/component": "^1.0.4",
"@glimmer/tracking": "^1.0.4",
"@hashicorp/structure-icons": "^1.3.0",
- "@storybook/ember-cli-storybook": "^0.6.1",
"anser": "^2.1.1",
"babel-eslint": "^10.1.0",
"base64-js": "^1.3.1",
@@ -153,12 +150,6 @@
},
"optionalDependencies": {
"@babel/plugin-transform-member-expression-literals": "^7.16.7",
- "@storybook/addon-docs": "^6.3.20",
- "@storybook/addon-knobs": "^6.3.1",
- "@storybook/addon-storysource": "^6.3.10",
- "@storybook/addon-viewport": "^6.3.10",
- "@storybook/addons": "^6.3.10",
- "@storybook/ember": "6.5.14",
"babel-loader": "^8.0.6",
"ember-cli-get-component-path-option": "^1.0.0",
"ember-cli-string-utils": "^1.1.0"
diff --git a/ui/stories/charts/distribution-bar.stories.js b/ui/stories/charts/distribution-bar.stories.js
deleted file mode 100644
index f55be9e3f..000000000
--- a/ui/stories/charts/distribution-bar.stories.js
+++ /dev/null
@@ -1,179 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-
-import EmberObject, { computed } from '@ember/object';
-import { on } from '@ember/object/evented';
-
-import DelayedTruth from '../utils/delayed-truth';
-
-export default {
- title: 'Charts/Distribution Bar',
-};
-
-export let Standard = () => {
- return {
- template: hbs`
- Distribution Bar
-
- {{#if delayedTruth.complete}}
-
- The distribution bar chart proportionally show data in a single bar. It includes a tooltip out of the box, assumes the size of the container element, and is designed to be styled with CSS.
- `,
- context: {
- delayedTruth: DelayedTruth.create(),
- distributionBarData: [
- { label: 'one', value: 10 },
- { label: 'two', value: 20 },
- { label: 'three', value: 30 },
- ],
- },
- };
-};
-
-export let WithClasses = () => {
- return {
- template: hbs`
- Distribution Bar with classes
-
- {{#if delayedTruth.complete}}
-
- If a datum provides a className property, it will be assigned to the corresponding rect element, allowing for custom colorization.
- `,
- context: {
- delayedTruth: DelayedTruth.create(),
- distributionBarDataWithClasses: [
- { label: 'Queued', value: 10, className: 'queued' },
- { label: 'Complete', value: 20, className: 'complete' },
- { label: 'Failed', value: 30, className: 'failed' },
- ],
- },
- };
-};
-
-export let Flexibility = () => {
- return {
- template: hbs`
- Distribution Bar flexibility
-
- {{#if delayedTruth.complete}}
-
-
- {{#if delayedTruth.complete}}
-
- Distribution bar assumes the dimensions of the container.
- `,
- context: {
- delayedTruth: DelayedTruth.create(),
- distributionBarData: [
- { label: 'one', value: 10 },
- { label: 'two', value: 20 },
- { label: 'three', value: 30 },
- ],
- },
- };
-};
-
-export let LiveUpdating = () => {
- return {
- template: hbs`
- Live-updating Distribution Bar
-
-
- Distribution bar animates with data changes.
-
- `,
- context: {
- controller: EmberObject.extend({
- timerTicks: 0,
-
- startTimer: on('init', function () {
- this.set(
- 'timer',
- setInterval(() => {
- this.incrementProperty('timerTicks');
- }, 500)
- );
- }),
-
- willDestroy() {
- clearInterval(this.timer);
- },
-
- distributionBarDataRotating: computed('timerTicks', function () {
- return [
- { label: 'one', value: Math.round(Math.random() * 50) },
- { label: 'two', value: Math.round(Math.random() * 50) },
- { label: 'three', value: Math.round(Math.random() * 50) },
- ];
- }),
- }).create(),
- },
- };
-};
-
-export let SingleBar = () => {
- return {
- template: hbs`
- Distribution Bar with single bar
-
- {{#if delayedTruth.complete}}
-
- `,
- context: {
- delayedTruth: DelayedTruth.create(),
- distributionBarDatum: [{ label: 'one', value: 10 }],
- },
- };
-};
-
-export let Jumbo = () => {
- return {
- template: hbs`
- Jumbo Distribution Bar
- {{#if delayedTruth.complete}}
-
-
- {{#each chart.data as |datum index|}}
-
- {{datum.value}}
-
- {{datum.label}}
-
-
- {{/each}}
-
-
- {{/if}}
- A variation of the Distribution Bar component for when the distribution bar is the central component of the page. It's a larger format that requires no interaction to see the data labels and values.
- `,
- context: {
- delayedTruth: DelayedTruth.create(),
- distributionBarData: [
- { label: 'one', value: 10 },
- { label: 'two', value: 20 },
- { label: 'three', value: 0 },
- { label: 'four', value: 35 },
- ],
- },
- };
-};
diff --git a/ui/stories/charts/gauge-chart.stories.js b/ui/stories/charts/gauge-chart.stories.js
deleted file mode 100644
index cac786c94..000000000
--- a/ui/stories/charts/gauge-chart.stories.js
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-import DelayedArray from '../utils/delayed-array';
-import DelayedTruth from '../utils/delayed-truth';
-
-export default {
- title: 'Charts/Gauge Chart',
-};
-
-let totalVariations = [
- { value: 0, total: 10 },
- { value: 1, total: 10 },
- { value: 2, total: 10 },
- { value: 3, total: 10 },
- { value: 4, total: 10 },
- { value: 5, total: 10 },
- { value: 6, total: 10 },
- { value: 7, total: 10 },
- { value: 8, total: 10 },
- { value: 9, total: 10 },
- { value: 10, total: 10 },
-];
-
-let complementVariations = [
- { value: 0, complement: 10 },
- { value: 1, complement: 9 },
- { value: 2, complement: 8 },
- { value: 3, complement: 7 },
- { value: 4, complement: 6 },
- { value: 5, complement: 5 },
- { value: 6, complement: 4 },
- { value: 7, complement: 3 },
- { value: 8, complement: 2 },
- { value: 9, complement: 1 },
- { value: 10, complement: 0 },
-];
-
-let colorVariations = ['is-info', 'is-warning', 'is-success', 'is-danger'];
-
-export let Total = () => {
- return {
- template: hbs`
-
- {{#each variations as |v|}}
-
-
- {{/each}}
-
- {{#each variations as |v|}}
-
-
- {{/each}}
-
- {{#each variations as |color|}}
-
-
- {{/each}}
-
-
-
-
-
-
-
-
-
-
GaugeCharts fill the width of their container and have a dynamic height according to the height of the arc. However, the text within a gauge chart is fixed. This can create unsightly overlap or whitespace, so be careful about responsiveness when using this chart type.
- `,
- context: {
- delayedTruth: DelayedTruth.create(),
- },
- };
-};
diff --git a/ui/stories/charts/line-chart.stories.js b/ui/stories/charts/line-chart.stories.js
deleted file mode 100644
index 4bdfada63..000000000
--- a/ui/stories/charts/line-chart.stories.js
+++ /dev/null
@@ -1,463 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-
-import EmberObject from '@ember/object';
-import { on } from '@ember/object/evented';
-import moment from 'moment';
-
-import DelayedArray from '../utils/delayed-array';
-
-export default {
- title: 'Charts/Line Chart',
-};
-
-let data1 = [
- { year: 2010, value: 10 },
- { year: 2011, value: 10 },
- { year: 2012, value: 20 },
- { year: 2013, value: 30 },
- { year: 2014, value: 50 },
- { year: 2015, value: 80 },
- { year: 2016, value: 130 },
- { year: 2017, value: 210 },
- { year: 2018, value: 340 },
-];
-
-let data2 = [
- { year: 2010, value: 100 },
- { year: 2011, value: 90 },
- { year: 2012, value: 120 },
- { year: 2013, value: 130 },
- { year: 2014, value: 115 },
- { year: 2015, value: 105 },
- { year: 2016, value: 90 },
- { year: 2017, value: 85 },
- { year: 2018, value: 90 },
-];
-
-export let Standard = () => {
- return {
- template: hbs`
- Line Chart
-
- {{#if this.lineChartData}}
-
- <:svg as |c|>
-
-
- {{datum.formattedY}}
-
-
-
-
- {{/if}}
-
-
- {{#if this.lineChartMild}}
-
- <:svg as |c|>
-
-
- {{datum.formattedY}}
-
-
-
-
- {{/if}}
-
- `,
- context: {
- lineChartData: DelayedArray.create(data1),
- lineChartMild: DelayedArray.create(data2),
- },
- };
-};
-
-export let FluidWidth = () => {
- return {
- template: hbs`
- Fluid-width Line Chart
-
- {{#if this.lineChartData}}
-
- <:svg as |c|>
-
-
- {{datum.formattedY}}
-
-
-
-
- {{/if}}
-
-
- {{#if this.lineChartMild}}
-
- <:svg as |c|>
-
-
- {{datum.formattedY}}
-
-
-
-
- {{/if}}
-
- A line chart will assume the width of its container. This includes the dimensions of the axes, which are calculated based on real DOM measurements. This requires a two-pass render: first the axes are placed with their real domains (in order to capture width and height of tick labels), second the axes are adjusted to make sure both the x and y axes are within the height and width bounds of the container.
- `,
- context: {
- lineChartData: DelayedArray.create(data1),
- lineChartMild: DelayedArray.create(data2),
- },
- };
-};
-
-export let LiveData = () => {
- return {
- template: hbs`
- Live data Line Chart
-
- {{#if this.controller.lineChartLive}}
-
- <:svg as |c|>
-
- {{/if}}
-
- `,
- context: {
- controller: EmberObject.extend({
- startTimer: on('init', function () {
- this.lineChartLive = [];
-
- this.set(
- 'timer',
- setInterval(() => {
- this.incrementProperty('timerTicks');
-
- let ref = this.lineChartLive;
- ref.addObject({ ts: Date.now(), val: Math.random() * 30 + 20 });
- if (ref.length > 60) {
- ref.splice(0, ref.length - 60);
- }
- }, 500)
- );
- }),
-
- willDestroy() {
- clearInterval(this.timer);
- },
-
- get secondsFormat() {
- return (date) => moment(date).format('HH:mm:ss');
- },
- }).create(),
- },
- };
-};
-
-export let Gaps = () => {
- return {
- template: hbs`
- Line Chart data with gaps
-
- {{#if this.lineChartGapData}}
-
- <:svg as |c|>
-
-
- {{datum.formattedY}}
-
-
-
-
- {{/if}}
-
- `,
- context: {
- lineChartGapData: DelayedArray.create([
- { year: 2010, value: 10 },
- { year: 2011, value: 10 },
- { year: 2012, value: null },
- { year: 2013, value: 30 },
- { year: 2014, value: 50 },
- { year: 2015, value: 80 },
- { year: 2016, value: null },
- { year: 2017, value: 210 },
- { year: 2018, value: 340 },
- ]),
- },
- };
-};
-
-export let VerticalAnnotations = () => {
- return {
- template: hbs`
- Line Chart data with annotations
-
- {{#if (and this.data this.annotations)}}
-
- <:svg as |c|>
-
- {{/if}}
-
- {{this.activeAnnotation.info}}
- Line Chart data with staggered annotations
-
- {{#if (and this.data this.annotations)}}
-
- <:svg as |c|>
-
-
- {{datum.formattedY}}
-
-
-
-
- {{/if}}
-
- `,
- context: {
- data: DelayedArray.create(
- new Array(180).fill(null).map((_, idx) => ({
- y: Math.sin((idx * 4 * Math.PI) / 180) * 100 + 200,
- x: moment().add(idx, 'd').toDate(),
- }))
- ),
- annotations: [
- {
- x: moment().toDate(),
- type: 'info',
- info: 'Far left',
- },
- {
- x: moment()
- .add(90 / 4, 'd')
- .toDate(),
- type: 'error',
- info: 'This is the max of the sine curve',
- },
- {
- x: moment().add(89, 'd').toDate(),
- type: 'info',
- info: 'This is the end of the first period',
- },
- {
- x: moment().add(96, 'd').toDate(),
- type: 'info',
- info: 'A close annotation for staggering purposes',
- },
- {
- x: moment()
- .add((90 / 4) * 3, 'd')
- .toDate(),
- type: 'error',
- info: 'This is the min of the sine curve',
- },
- {
- x: moment().add(179, 'd').toDate(),
- type: 'info',
- info: 'Far right',
- },
- ],
- },
- };
-};
-
-export let HorizontalAnnotations = () => {
- return {
- template: hbs`
-
- {{#if (and this.data this.annotations)}}
-
- <:svg as |c|>
-
- {{/if}}
-
- `,
- context: {
- data: DelayedArray.create(
- new Array(180).fill(null).map((_, idx) => ({
- y: Math.sin((idx * 4 * Math.PI) / 180) * 100 + 200,
- x: moment().add(idx, 'd').toDate(),
- }))
- ),
- annotations: [
- {
- y: 300,
- info: 'High',
- },
- {
- y: 100,
- info: 'Low',
- },
- ],
- },
- };
-};
-
-export let StepLine = () => {
- return {
- template: hbs`
- Line Chart with a Step Line
-
- {{#if this.data}}
-
- <:svg as |c|>
-
-
- {{datum.formattedY}}
-
-
-
-
-
{{this.activeAnnotation.info}}
- {{/if}}
-
Multiple Lines on One Chart
-
- {{#if this.data}}
-
- <:svg as |c|>
- {{#each this.data as |series idx|}}
-
-
- {{datum.formattedY}}
-
-
-
-
-
{{this.activeAnnotation.info}}
- {{/if}}
-
Single Entry
-
-
-
- {{series.value}}
-
-
-
-
- Multiple Entries
-
-
-
- {{datum.value}}
-
-
-
-
- Active Entry
-
-
-
- {{datum.value}}
-
-
-
-
- Color Scales
-
- {{#each this.scales as |scale|}}
-
- {{scale}}
-
-
- {{datum.value}}
-
-
-
- {{/each}}
-
Progress Bar
-
- `,
- };
-};
-
-export let Colors = () => {
- return {
- template: hbs`
- Progress Bar colors
-
- `,
- };
-};
-
-export let LiveUpdates = () => {
- return {
- template: hbs`
- Progress Bar with live updates
-
-
-
-
- `,
- context: {
- data: EmberObject.extend({
- timerTicks: 0,
-
- startTimer: on('init', function () {
- this.set(
- 'timer',
- setInterval(() => {
- this.incrementProperty('timerTicks');
- }, 1000)
- );
- }),
-
- willDestroy() {
- clearInterval(this.timer);
- },
-
- denominator: computed('timerTicks', function () {
- return Math.round(Math.random() * 1000);
- }),
-
- percentage: computed('timerTicks', function () {
- return Math.round(Math.random() * 100) / 100;
- }),
-
- numerator: computed('denominator', 'percentage', function () {
- return Math.round(this.denominator * this.percentage * 100) / 100;
- }),
-
- liveDetails: computed(
- 'denominator',
- 'numerator',
- 'percentage',
- function () {
- return this.getProperties('denominator', 'numerator', 'percentage');
- }
- ),
- }).create(),
- },
- };
-};
diff --git a/ui/stories/charts/recommendation-chart.stories.js b/ui/stories/charts/recommendation-chart.stories.js
deleted file mode 100644
index 68aa63d6e..000000000
--- a/ui/stories/charts/recommendation-chart.stories.js
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-import DelayedTruth from '../utils/delayed-truth';
-import {
- withKnobs,
- optionsKnob,
- number,
- boolean,
-} from '@storybook/addon-knobs';
-
-export default {
- title: 'Charts/Recomendation Chart',
- decorators: [withKnobs],
-};
-
-export let Configurable = () => {
- return {
- template: hbs`
-
- {{#if delayedTruth.complete}}
-
Stats Time Series
-
- {{#if staticMetrics}}
-
- `,
- context: {
- staticMetrics: DelayedArray.create([
- { timestamp: ts(20), percent: 0.5 },
- { timestamp: ts(18), percent: 0.5 },
- { timestamp: ts(16), percent: 0.4 },
- { timestamp: ts(14), percent: 0.3 },
- { timestamp: ts(12), percent: 0.9 },
- { timestamp: ts(10), percent: 0.3 },
- { timestamp: ts(8), percent: 0.3 },
- { timestamp: ts(6), percent: 0.4 },
- { timestamp: ts(4), percent: 0.5 },
- { timestamp: ts(2), percent: 0.6 },
- { timestamp: ts(0), percent: 0.6 },
- ]),
- },
- };
-};
-
-export let HighLowComparison = () => {
- return {
- template: hbs`
- Stats Time Series high/low comparison
-
-
- {{#if data.metricsHigh}}
-
-
- {{#if data.metricsLow}}
-
-
Line charts, and therefore stats time series charts, use a letant linear gradient with a height equal to the canvas. This makes the color intensity of the gradient at values consistent across charts as long as those charts have the same y-axis domain.
- This is used to great effect with stats charts since they all have a y-axis domain of 0-100%.
- `,
- context: {
- data: EmberObject.extend({
- timerTicks: 0,
-
- startTimer: on('init', function () {
- this.set(
- 'timer',
- setInterval(() => {
- let metricsHigh = this.metricsHigh;
- let prev = metricsHigh.length
- ? metricsHigh[metricsHigh.length - 1].percent
- : 0.9;
- this.appendTSValue(
- metricsHigh,
- Math.min(Math.max(prev + Math.random() * 0.05 - 0.025, 0.5), 1)
- );
-
- let metricsLow = this.metricsLow;
- let prev2 = metricsLow.length
- ? metricsLow[metricsLow.length - 1].percent
- : 0.1;
- this.appendTSValue(
- metricsLow,
- Math.min(Math.max(prev2 + Math.random() * 0.05 - 0.025, 0), 0.5)
- );
- }, 1000)
- );
- }),
-
- appendTSValue(array, percent, maxLength = 300) {
- array.addObject({
- timestamp: Date.now(),
- percent,
- });
-
- if (array.length > maxLength) {
- array.splice(0, array.length - maxLength);
- }
- },
-
- willDestroy() {
- clearInterval(this.timer);
- },
-
- metricsHigh: computed(function () {
- return [];
- }),
-
- metricsLow: computed(function () {
- return [];
- }),
-
- secondsFormat() {
- return (date) => moment(date).format('HH:mm:ss');
- },
- }).create(),
- },
- };
-};
diff --git a/ui/stories/charts/topo-viz.stories.js b/ui/stories/charts/topo-viz.stories.js
deleted file mode 100644
index 28480a58e..000000000
--- a/ui/stories/charts/topo-viz.stories.js
+++ /dev/null
@@ -1,195 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-import DelayedTruth from '../utils/delayed-truth';
-import { withKnobs, boolean } from '@storybook/addon-knobs';
-import { getOwner } from '@ember/application';
-import { tracked } from '@glimmer/tracking';
-import { scaleLinear } from 'd3-scale';
-import faker from 'faker';
-
-export default {
- title: 'Charts/Topo Viz',
- decorators: [withKnobs],
-};
-
-const nodeGen = (name, datacenter, memory, cpu, allocations = []) => ({
- datacenter,
- memory,
- cpu,
- node: { name, isEligible: true, isDraining: false },
- allocations: allocations.map((alloc) => ({
- memory: alloc.memory,
- cpu: alloc.cpu,
- memoryPercent: alloc.memory / memory,
- cpuPercent: alloc.cpu / cpu,
- allocation: {
- id: faker.random.uuid(),
- isScheduled: true,
- clientStatus: alloc.clientStatus,
- },
- })),
-});
-
-const nodeModelGen = (datacenter, id, name, resources = '2000/1000') => {
- const [cpu, memory] = resources.split('/');
- return {
- datacenter,
- id,
- name,
- isEligible: true,
- isDraining: false,
- resources: { cpu, memory },
- };
-};
-
-const allocModelGen = (
- id,
- taskGroupName,
- clientStatus,
- nodeId,
- jobId,
- resources = '100/100'
-) => {
- const [cpu, memory] = resources.split('/');
- return {
- id,
- taskGroupName,
- clientStatus,
- isScheduled: true,
- allocatedResources: { cpu, memory },
- belongsTo(t) {
- return {
- id() {
- return t === 'node' ? nodeId : jobId;
- },
- };
- },
- };
-};
-
-export let Node = () => ({
- template: hbs`
-
-
This visualization uses data from mirage.
-
Change the mirage scenario to see different cluster states visualized.
-
Accordion
-
-
-
-
{{ac.item.name}}
-
- {{ac.item.lang}}
-
-
-
- {{ac.item.name}}
- {{ac.item.desc}}
- Learn more...
-
-
- `,
- context: {
- products: productMetadata,
- },
- };
-};
-
-export let OneItem = () => {
- return {
- template: hbs`
- Accordion, one item
-
-
-
-
{{a.item.name}}
-
- {{a.item.lang}}
-
-
-
- {{a.item.name}}
- {{a.item.desc}}
- Learn more...
-
-
- `,
- context: {
- products: productMetadata,
- },
- };
-};
-
-export let NotExpandable = () => {
- return {
- template: hbs`
- Accordion, not expandable
-
-
-
-
{{a.item.name}}
-
- {{a.item.lang}}
-
-
-
- {{a.item.name}}
- {{a.item.desc}}
- Learn more...
-
-
- `,
- context: {
- products: productMetadata,
- },
- };
-};
diff --git a/ui/stories/components/alerts.stories.js b/ui/stories/components/alerts.stories.js
deleted file mode 100644
index 057790d7e..000000000
--- a/ui/stories/components/alerts.stories.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-
-export default {
- title: 'Components/Alerts',
-};
-
-export let Standard = () => {
- return {
- template: hbs`
- Alert
-
-
This is an alert
-
Alerts are used for both situational and reactionary information.
-
Alerts use Bulma's notification component.
- `,
- };
-};
-
-export let Colors = () => {
- return {
- template: hbs`
- Alert colors
-
-
This is an alert
-
Alerts are used for both situational and reactionary information.
-
-
This is an alert
-
Alerts are used for both situational and reactionary information.
-
-
This is an alert
-
Alerts are used for both situational and reactionary information.
-
-
This is an alert
-
Alerts are used for both situational and reactionary information.
-
Alerts are always paired with an emotive color. If there is no emotive association with the content of the alert, then an alert is the wrong component to use.
- `,
- };
-};
-
-export let Dismissal = () => {
- return {
- template: hbs`
- Alert dismissal
-
-
-
-
This is an alert
-
Alerts are used for both situational and reactionary information.
-
-
- Okay
-
-
-
-
-
-
This is an alert
-
Alerts are used for both situational and reactionary information.
-
-
- Okay
-
-
-
-
-
-
This is an alert
-
Alerts are used for both situational and reactionary information.
-
-
- Okay
-
-
-
-
-
-
This is an alert
-
Alerts are used for both situational and reactionary information.
-
-
- Okay
-
-
-
Boxed section
-
- `,
- context: contextFactory(),
- };
-};
-
-export let RightHandDetails = () => {
- return {
- template: hbs`
- Boxed section with right hand details
-
-
- Boxed Section With Right Hand Details
- {{now interval=1000}}
-
-
-
Boxed section with title decoration
-
-
- Boxed Section With Title Decoration
- 7
-
-
-
Boxed section with foot
-
-
- Boxed Section With Large Header
-
-
-
-
Boxed section with large header
-
-
-
- Boxed Section With Large Header
- Status
-
-
- A tag that goes on a second line because it's rather long
-
-
-
-
Boxed section with dark body
-
-
- Boxed Section With Dark Body
-
-
-
Breadcrumbs
-
- Breadcrumbs are only ever used in the secondary nav of the primary header.
- `,
- };
-};
-
-export let Single = () => {
- return {
- template: hbs`
- Single breadcrumb
-
- Breadcrumbs are given a lot of emphasis and often double as a page title. Since they are also global state, they are important for helping a user keep their bearings.
- `,
- };
-};
diff --git a/ui/stories/components/buttons.stories.js b/ui/stories/components/buttons.stories.js
deleted file mode 100644
index cc9144dee..000000000
--- a/ui/stories/components/buttons.stories.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-
-export default {
- title: 'Components/Buttons',
-};
-
-export let Standard = () => {
- return {
- template: hbs`
- Buttons
-
-
- `,
- };
-};
-
-export let Outline = () => {
- return {
- template: hbs`
- Outline buttons
-
- `,
- };
-};
-
-export let Hollow = () => {
- return {
- template: hbs`
- Hollow buttons
-
- `,
- };
-};
-
-export let Sizes = () => {
- return {
- template: hbs`
- Button sizes
-
- `,
- };
-};
-
-export let Disabled = () => {
- return {
- template: hbs`
- Anchor elements as buttons
-
-
-
- Button elements with disabled attribute
-
- Button
- White
- Light
- Dark
- Black
- Link
-
-
- Primary
- Info
- Success
- Warning
- Danger
-
-
- Button elements with aria-disabled="true"
-
- Button
- White
- Light
- Dark
- Black
- Link
-
-
- Primary
- Info
- Success
- Warning
- Danger
-
- `,
- };
-};
diff --git a/ui/stories/components/copy-button.stories.js b/ui/stories/components/copy-button.stories.js
deleted file mode 100644
index de54c19be..000000000
--- a/ui/stories/components/copy-button.stories.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-import { withKnobs, text } from '@storybook/addon-knobs';
-
-export default {
- title: 'Components/Copy Button',
- decorators: [withKnobs],
-};
-
-export let CopyButton = () => {
- return {
- template: hbs`
- Copy Button
-
- {{clipboardText}}
-
- Copy Button with content
-
- {{clipboardText}}
-
- `,
- context: {
- clipboardText: text(
- 'Clipboard Text',
- 'e8c898a0-794b-9063-7a7f-bf0c4a405f83'
- ),
- },
- };
-};
diff --git a/ui/stories/components/diff-viewer.stories.js b/ui/stories/components/diff-viewer.stories.js
deleted file mode 100644
index d7c824e57..000000000
--- a/ui/stories/components/diff-viewer.stories.js
+++ /dev/null
@@ -1,736 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-
-export default {
- title: 'Components/Diff Viewer',
-};
-
-export let DiffViewerWithInsertions = () => {
- return {
- template: hbs`
- Diff Viewer with insertions
-
- `,
- context: {
- insertionsOnly: generateDiff([
- {
- Annotations: null,
- Name: 'Attempts',
- New: '15',
- Old: '15',
- Type: 'None',
- },
- {
- Annotations: null,
- Name: 'Delay',
- New: '25000000000',
- Old: '',
- Type: 'Added',
- },
- {
- Annotations: null,
- Name: 'Interval',
- New: '900000000000',
- Old: '',
- Type: 'Added',
- },
- {
- Annotations: null,
- Name: 'Mode',
- New: 'delay',
- Old: 'delay',
- Type: 'None',
- },
- ]),
- },
- };
-};
-
-export let DiffViewerWithDeletions = () => {
- return {
- template: hbs`
- Diff Viewer with deletions
-
- `,
- context: {
- deletionsOnly: generateDiff([
- {
- Annotations: null,
- Name: 'Attempts',
- New: '15',
- Old: '15',
- Type: 'None',
- },
- {
- Annotations: null,
- Name: 'Delay',
- New: '25000000000',
- Old: '25000000000',
- Type: 'None',
- },
- {
- Annotations: null,
- Name: 'Interval',
- New: '900000000000',
- Old: '900000000000',
- Type: 'None',
- },
- {
- Annotations: null,
- Name: 'Mode',
- New: '',
- Old: 'delay',
- Type: 'Deleted',
- },
- ]),
- },
- };
-};
-
-export let DiffViewerWithEdits = () => {
- return {
- template: hbs`
- Diff Viewer with edits
-
-
-
-
Often times a diff will only have a couple lines. Minor tweaks to a job spec result in small diffs.
-
Diff Viewer with many changes
-
- `,
- context: {
- largeDiff: {
- Fields: null,
- ID: 'example',
- Objects: null,
- TaskGroups: [
- {
- Fields: null,
- Name: 'cache',
- Objects: null,
- Tasks: [
- {
- Annotations: null,
- Fields: [
- {
- Annotations: null,
- Name: 'Meta[one]',
- New: "flew over the cuckoo's nest",
- Old: '',
- Type: 'Added',
- },
- {
- Annotations: null,
- Name: 'Meta[two]',
- New: 'birds on a wire',
- Old: '',
- Type: 'Added',
- },
- ],
- Name: 'redis',
- Objects: [
- {
- Fields: [
- {
- Annotations: null,
- Name: 'image',
- New: 'redis:3.4',
- Old: 'redis:7',
- Type: 'Edited',
- },
- {
- Annotations: null,
- Name: 'port_map[0][db]',
- New: '6380',
- Old: '6379',
- Type: 'Edited',
- },
- ],
- Name: 'Config',
- Objects: null,
- Type: 'Edited',
- },
- {
- Fields: [
- {
- Annotations: null,
- Name: 'CPU',
- New: '1000',
- Old: '500',
- Type: 'Edited',
- },
- {
- Annotations: null,
- Name: 'DiskMB',
- New: '0',
- Old: '0',
- Type: 'None',
- },
- {
- Annotations: null,
- Name: 'IOPS',
- New: '0',
- Old: '0',
- Type: 'None',
- },
- {
- Annotations: null,
- Name: 'MemoryMB',
- New: '512',
- Old: '256',
- Type: 'Edited',
- },
- ],
- Name: 'Resources',
- Objects: [
- {
- Fields: [
- {
- Annotations: null,
- Name: 'MBits',
- New: '100',
- Old: '',
- Type: 'Added',
- },
- ],
- Name: 'Network',
- Objects: [
- {
- Fields: [
- {
- Annotations: null,
- Name: 'Label',
- New: 'db',
- Old: '',
- Type: 'Added',
- },
- ],
- Name: 'Dynamic Port',
- Objects: null,
- Type: 'Added',
- },
- ],
- Type: 'Added',
- },
- {
- Fields: [
- {
- Annotations: null,
- Name: 'MBits',
- New: '',
- Old: '10',
- Type: 'Deleted',
- },
- ],
- Name: 'Network',
- Objects: [
- {
- Fields: [
- {
- Annotations: null,
- Name: 'Label',
- New: '',
- Old: 'db',
- Type: 'Deleted',
- },
- ],
- Name: 'Dynamic Port',
- Objects: null,
- Type: 'Deleted',
- },
- ],
- Type: 'Deleted',
- },
- ],
- Type: 'Edited',
- },
- {
- Fields: [
- {
- Annotations: null,
- Name: 'AddressMode',
- New: 'auto',
- Old: 'auto',
- Type: 'None',
- },
- {
- Annotations: null,
- Name: 'Name',
- New: 'redis-cache',
- Old: 'redis-cache',
- Type: 'None',
- },
- {
- Annotations: null,
- Name: 'PortLabel',
- New: 'db',
- Old: 'db',
- Type: 'None',
- },
- ],
- Name: 'Service',
- Objects: [
- {
- Fields: [
- {
- Annotations: null,
- Name: 'Tags',
- New: 'redis',
- Old: '',
- Type: 'Added',
- },
- {
- Annotations: null,
- Name: 'Tags',
- New: 'cache',
- Old: 'cache',
- Type: 'None',
- },
- {
- Annotations: null,
- Name: 'Tags',
- New: 'global',
- Old: 'global',
- Type: 'None',
- },
- ],
- Name: 'Tags',
- Objects: null,
- Type: 'Added',
- },
- {
- Fields: [
- {
- Annotations: null,
- Name: 'AddressMode',
- New: '',
- Old: '',
- Type: 'None',
- },
- {
- Annotations: null,
- Name: 'Command',
- New: '',
- Old: '',
- Type: 'None',
- },
- {
- Annotations: null,
- Name: 'GRPCService',
- New: '',
- Old: '',
- Type: 'None',
- },
- {
- Annotations: null,
- Name: 'GRPCUseTLS',
- New: 'false',
- Old: 'false',
- Type: 'None',
- },
- {
- Annotations: null,
- Name: 'InitialStatus',
- New: '',
- Old: '',
- Type: 'None',
- },
- {
- Annotations: null,
- Name: 'Interval',
- New: '15000000000',
- Old: '10000000000',
- Type: 'Edited',
- },
- {
- Annotations: null,
- Name: 'Method',
- New: '',
- Old: '',
- Type: 'None',
- },
- {
- Annotations: null,
- Name: 'Name',
- New: 'alive',
- Old: 'alive',
- Type: 'None',
- },
- {
- Annotations: null,
- Name: 'Path',
- New: '',
- Old: '',
- Type: 'None',
- },
- {
- Annotations: null,
- Name: 'PortLabel',
- New: '',
- Old: '',
- Type: 'None',
- },
- {
- Annotations: null,
- Name: 'Protocol',
- New: '',
- Old: '',
- Type: 'None',
- },
- {
- Annotations: null,
- Name: 'TLSServerName',
- New: '',
- Old: '',
- Type: 'None',
- },
- {
- Annotations: null,
- Name: 'TLSSkipVerify',
- New: 'false',
- Old: 'false',
- Type: 'None',
- },
- {
- Annotations: null,
- Name: 'Timeout',
- New: '7000000000',
- Old: '2000000000',
- Type: 'Edited',
- },
- {
- Annotations: null,
- Name: 'Type',
- New: 'tcp',
- Old: 'tcp',
- Type: 'None',
- },
- ],
- Name: 'Check',
- Objects: null,
- Type: 'Edited',
- },
- ],
- Type: 'Edited',
- },
- ],
- Type: 'Edited',
- },
- ],
- Type: 'Edited',
- Updates: null,
- },
- {
- Fields: [
- {
- Annotations: null,
- Name: 'Count',
- New: '1',
- Old: '',
- Type: 'Added',
- },
- {
- Annotations: null,
- Name: 'Meta[key]',
- New: 'value',
- Old: '',
- Type: 'Added',
- },
- {
- Annotations: null,
- Name: 'Meta[red]',
- New: 'fish',
- Old: '',
- Type: 'Added',
- },
- ],
- Name: 'cache2',
- Objects: [
- {
- Fields: [
- {
- Annotations: null,
- Name: 'Attempts',
- New: '2',
- Old: '',
- Type: 'Added',
- },
- {
- Annotations: null,
- Name: 'Delay',
- New: '15000000000',
- Old: '',
- Type: 'Added',
- },
- {
- Annotations: null,
- Name: 'Interval',
- New: '1800000000000',
- Old: '',
- Type: 'Added',
- },
- {
- Annotations: null,
- Name: 'Mode',
- New: 'fail',
- Old: '',
- Type: 'Added',
- },
- ],
- Name: 'RestartPolicy',
- Objects: null,
- Type: 'Added',
- },
- {
- Fields: [
- {
- Annotations: null,
- Name: 'Migrate',
- New: 'false',
- Old: '',
- Type: 'Added',
- },
- {
- Annotations: null,
- Name: 'SizeMB',
- New: '300',
- Old: '',
- Type: 'Added',
- },
- {
- Annotations: null,
- Name: 'Sticky',
- New: 'false',
- Old: '',
- Type: 'Added',
- },
- ],
- Name: 'EphemeralDisk',
- Objects: null,
- Type: 'Added',
- },
- ],
- Tasks: [
- {
- Annotations: null,
- Fields: [
- {
- Annotations: null,
- Name: 'Driver',
- New: 'docker',
- Old: '',
- Type: 'Added',
- },
- {
- Annotations: null,
- Name: 'KillTimeout',
- New: '5000000000',
- Old: '',
- Type: 'Added',
- },
- {
- Annotations: null,
- Name: 'Leader',
- New: 'false',
- Old: '',
- Type: 'Added',
- },
- {
- Annotations: null,
- Name: 'ShutdownDelay',
- New: '0',
- Old: '',
- Type: 'Added',
- },
- ],
- Name: 'redis',
- Objects: [
- {
- Fields: [
- {
- Annotations: null,
- Name: 'image',
- New: 'redis:7',
- Old: '',
- Type: 'Added',
- },
- {
- Annotations: null,
- Name: 'port_map[0][db]',
- New: '6379',
- Old: '',
- Type: 'Added',
- },
- ],
- Name: 'Config',
- Objects: null,
- Type: 'Added',
- },
- {
- Fields: [
- {
- Annotations: null,
- Name: 'CPU',
- New: '500',
- Old: '',
- Type: 'Added',
- },
- {
- Annotations: null,
- Name: 'DiskMB',
- New: '0',
- Old: '',
- Type: 'Added',
- },
- {
- Annotations: null,
- Name: 'IOPS',
- New: '0',
- Old: '',
- Type: 'Added',
- },
- {
- Annotations: null,
- Name: 'MemoryMB',
- New: '256',
- Old: '',
- Type: 'Added',
- },
- ],
- Name: 'Resources',
- Objects: [
- {
- Fields: [
- {
- Annotations: null,
- Name: 'MBits',
- New: '10',
- Old: '',
- Type: 'Added',
- },
- ],
- Name: 'Network',
- Objects: [
- {
- Fields: [
- {
- Annotations: null,
- Name: 'Label',
- New: 'db',
- Old: '',
- Type: 'Added',
- },
- ],
- Name: 'Dynamic Port',
- Objects: null,
- Type: 'Added',
- },
- ],
- Type: 'Added',
- },
- ],
- Type: 'Added',
- },
- ],
- Type: 'Added',
- },
- ],
- Type: 'Added',
- Updates: null,
- },
- ],
- Type: 'Edited',
- },
- },
- };
-};
-
-function generateDiff(changeset) {
- return {
- Fields: null,
- ID: 'insertions-only',
- Objects: null,
- TaskGroups: [
- {
- Fields: [
- {
- Annotations: null,
- Name: 'Count',
- New: '2',
- Old: '2',
- Type: 'None',
- },
- ],
- Name: 'cache',
- Objects: [
- {
- Fields: changeset,
- Name: 'RestartPolicy',
- Objects: null,
- Type: 'Edited',
- },
- ],
- Type: 'Edited',
- Updates: null,
- },
- ],
- Type: 'Edited',
- };
-}
diff --git a/ui/stories/components/dropdown.stories.js b/ui/stories/components/dropdown.stories.js
deleted file mode 100644
index 979454ba8..000000000
--- a/ui/stories/components/dropdown.stories.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-
-export default {
- title: 'Components/Dropdown',
-};
-
-let options = [
- { name: 'Consul' },
- { name: 'Nomad' },
- { name: 'Packer' },
- { name: 'Terraform' },
- { name: 'Vagrant' },
- { name: 'Vault' },
-];
-
-export let Standard = () => {
- return {
- template: hbs`
- Dropdown
-
- {{option.name}}
-
- Power Select currently fulfills all of Nomad's dropdown needs out of the box.
- `,
- context: {
- options,
- },
- };
-};
-
-export let Resized = () => {
- return {
- template: hbs`
- Dropdown resized
-
- Dropdowns are always 100% wide. To control the width of a dropdown, adjust the dimensions of its container. One way to achieve this is using columns.
- `,
- context: {
- options,
- },
- };
-};
-
-export let Search = () => {
- return {
- template: hbs`
- Dropdown with search
-
- Whether or not the dropdown has a search box is configurable. Typically the default is to show a search once a dropdown has more than 10 options.
- `,
- context: {
- manyOptions: [
- 'One',
- 'Two',
- 'Three',
- 'Four',
- 'Five',
- 'Six',
- 'Seven',
- 'Eight',
- 'Nine',
- 'Ten',
- 'Eleven',
- 'Twelve',
- 'Thirteen',
- 'Fourteen',
- 'Fifteen',
- ].map((name) => ({ name })),
- },
- };
-};
diff --git a/ui/stories/components/filter-facets.stories.js b/ui/stories/components/filter-facets.stories.js
deleted file mode 100644
index 68027878c..000000000
--- a/ui/stories/components/filter-facets.stories.js
+++ /dev/null
@@ -1,212 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-
-export default {
- title: 'Components/Filter Facets',
-};
-
-let options1 = [
- { key: 'option-1', label: 'Option One' },
- { key: 'option-2', label: 'Option Two' },
- { key: 'option-3', label: 'Option Three' },
- { key: 'option-4', label: 'Option Four' },
- { key: 'option-5', label: 'Option Five' },
-];
-
-let selection1 = ['option-2', 'option-4', 'option-5'];
-
-export let MultiSelect = () => {
- return {
- template: hbs`
- Multi-Select Dropdown
- A wrapper around basic-dropdown for creating a list of checkboxes and tracking the state thereof.
- `,
- context: {
- options1,
- selection1,
- },
- };
-};
-
-export let SingleSelect = () => ({
- template: hbs`
- Single-Select Dropdown
- Multi-Select Dropdown right-aligned
-
-
- `,
- context: {
- options1,
- selection1,
- },
- };
-};
-
-export let ManyOptionsMulti = () => {
- return {
- template: hbs`
- Multi-Select Dropdown with many options
-
- A strength of the multi-select-dropdown is its simple presentation. It is quick to select options and it is quick to remove options.
- However, this strength becomes a weakness when there are too many options. Since the selection isn't pinned in any way, removing a selection
- can become an adventure of scrolling up and down. Also since the selection isn't pinned, this component can't support search, since search would
- entirely mask the selection.
-
- `,
- context: {
- optionsMany: Array(100)
- .fill(null)
- .map((_, i) => ({ label: `Option ${i}`, key: `option-${i}` })),
- selectionMany: [],
- },
- };
-};
-
-export let ManyOptionsSingle = () => {
- return {
- template: hbs`
- Single-Select Dropdown with many options
-
- Single select supports search at a certain option threshold via Ember Power Select.
-
- `,
- context: {
- optionsMany: Array(100)
- .fill(null)
- .map((_, i) => ({ label: `Option ${i}`, key: `option-${i}` })),
- selection: 'option-1',
- },
- };
-};
-
-export let Bar = () => {
- return {
- template: hbs`
- Multi-Select Dropdown bar
-
-
- Single-Select Dropdown bar
-
-
- Mixed Dropdown bar
-
-
-
- Since this is a core component for faceted search, it makes sense to letruct an arrangement of multi-select dropdowns.
- Do this by wrapping all the options in a .button-bar container.
-
- `,
- context: {
- optionsDatacenter: [
- { key: 'pdx-1', label: 'pdx-1' },
- { key: 'jfk-1', label: 'jfk-1' },
- { key: 'jfk-2', label: 'jfk-2' },
- { key: 'muc-1', label: 'muc-1' },
- ],
- selectionDatacenter: ['jfk-1'],
- selectionDatacenterSingle: 'jfk-1',
-
- optionsType: [
- { key: 'batch', label: 'Batch' },
- { key: 'service', label: 'Service' },
- { key: 'system', label: 'System' },
- { key: 'periodic', label: 'Periodic' },
- { key: 'parameterized', label: 'Parameterized' },
- ],
- selectionType: ['system', 'service'],
- selectionTypeSingle: 'system',
-
- optionsStatus: [
- { key: 'pending', label: 'Pending' },
- { key: 'running', label: 'Running' },
- { key: 'dead', label: 'Dead' },
- ],
- selectionStatus: [],
- selectionStatusSingle: 'dead',
- },
- };
-};
diff --git a/ui/stories/components/gutter-menu.stories.js b/ui/stories/components/gutter-menu.stories.js
deleted file mode 100644
index d2e85a771..000000000
--- a/ui/stories/components/gutter-menu.stories.js
+++ /dev/null
@@ -1,212 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-
-export default {
- title: 'Components/Gutter Menu',
-};
-
-export let Standard = () => {
- return {
- template: hbs`
- Gutter menu
-
- `,
- };
-};
-
-export let RichComponents = () => {
- return {
- template: hbs`
- Gutter navigation with rich components
-
- In order to keep the gutter navigation streamlined and easy to navigation, rich components should be avoided when possible. When not possible, they should be kept near the top.
- `,
- };
-};
-
-export let ManyItems = () => {
- return {
- template: hbs`
- Hypothetical gutter navigation with many items
-
- There will only ever be one gutter menu in the Nomad UI, but it helps to imagine a situation where there are many navigation items in the gutter.
- `,
- };
-};
-
-export let IconItems = () => {
- return {
- template: hbs`
- Hypothetical gutter navigation with icon items
-
- In the future, the gutter menu may have icons.
- `,
- };
-};
-
-export let TaggedItems = () => {
- return {
- template: hbs`
- Hypothetical gutter navigation with icon items
-
- Tags can be used to denote beta features or low-priority notifications.
- `,
- };
-};
-
-export let Global = () => {
- return {
- template: hbs`
- Global gutter navigation
-
-
-
- {{!-- Page content here --}}
-
-
-
Since there will only ever be one gutter menu in the UI, it makes sense to express the menu as a singleton component. This is what that singleton component looks like.
- Note: Normally the gutter menu is rendered within a page layout and is fixed position. The columns shown in this example are only to imitate the actual width without applying fixed positioning.
- `,
- };
-};
diff --git a/ui/stories/components/header.stories.js b/ui/stories/components/header.stories.js
deleted file mode 100644
index c83674a10..000000000
--- a/ui/stories/components/header.stories.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-
-export default {
- title: 'Components/Header',
-};
-
-export let Header = () => {
- return {
- template: hbs`
- Global header
-
-
-
-
-
-
-
-
-
- `,
- };
-};
diff --git a/ui/stories/components/inline-definitions.stories.js b/ui/stories/components/inline-definitions.stories.js
deleted file mode 100644
index e2754f75d..000000000
--- a/ui/stories/components/inline-definitions.stories.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-
-export default {
- title: 'Components/Inline Definitions',
-};
-
-export let Standard = () => {
- return {
- template: hbs`
- Inline definitions
-
-
- Some Label
-
- Term Name
- Term Value
-
-
- Running?
- Yes
-
-
- Last Updated
- {{format-ts (now)}}
-
-
-
A way to tightly display key/value information. Typically seen at the top of pages.
- `,
- };
-};
-
-export let Variants = () => {
- return {
- template: hbs`
- Inline definitions variants
-
-
- Success Label
-
- Term Name
- Term Value
-
-
- Last Updated
- {{format-ts (now)}}
-
-
-
-
- Warning Label
-
- Term Name
- Term Value
-
-
- Last Updated
- {{format-ts (now)}}
-
-
-
-
- Danger Label
-
- Term Name
- Term Value
-
-
- Last Updated
- {{format-ts (now)}}
-
-
-
-
- Info Label
-
- Term Name
- Term Value
-
-
- Last Updated
- {{format-ts (now)}}
-
-
-
Inline definitions are meant to pair well with emotive color variations.
- `,
- };
-};
diff --git a/ui/stories/components/json-viewer.stories.js b/ui/stories/components/json-viewer.stories.js
deleted file mode 100644
index e938f9617..000000000
--- a/ui/stories/components/json-viewer.stories.js
+++ /dev/null
@@ -1,195 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-
-import DelayedTruth from '../utils/delayed-truth';
-
-export default {
- title: 'Components/JSON Viewer',
-};
-
-export let Standard = () => {
- return {
- template: hbs`
- JSON Viewer
- {{#if delayedTruth.complete}}
- JSON Viewer for full document
- {{#if delayedTruth.complete}}
- Log stream
-
-
-
- stdout
- stderr
-
-
- Head
- Tail
-
- {{x-icon (if isPlaying1 "media-play" "media-pause") class="is-text"}}
-
-
-
-
-
{{if (eq mode1 "stdout") sampleOutput sampleError}}
-
-
Metrics
-
- Metrics are a way to show simple values (generally numbers). Labels are smaller than numbers to put emphasis on the data.
- `,
- };
-};
-
-export let Groups = () => {
- return {
- template: hbs`
- Metric groups
-
-
-
- Related metrics should be lumped together in metric groups. All metrics have to be in a metric group. By putting multiple metrics in a single group, they will be visually lumped together.
- `,
- };
-};
-
-export let Colors = () => {
- return {
- template: hbs`
- Metric colors
-
-
-
- All color-modifiers work for metrics, but some work better than others.
- Emotive colors work well and are put to use when applicable. Other colors have worse support and less utility.
- `,
- };
-};
-
-export let States = () => {
- return {
- template: hbs`
- Metric states
-
-
-
- Metrics have a disabled state. This is used when a metric is non-existent or irrelevant. It's just as important to show the lack of value as it is to show a value, so simply not rendering non-existent or irrelevant metrics would be worse.
- `,
- };
-};
diff --git a/ui/stories/components/page-tabs.stories.js b/ui/stories/components/page-tabs.stories.js
deleted file mode 100644
index 43fdf3ca5..000000000
--- a/ui/stories/components/page-tabs.stories.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-
-export default {
- title: 'Components/Page Tabs',
-};
-
-export let Standard = () => {
- return {
- template: hbs`
- Page tabs
-
- `,
- };
-};
-
-export let Single = () => {
- return {
- template: hbs`
- Single page tab
-
- `,
- };
-};
diff --git a/ui/stories/components/page-title.stories.js b/ui/stories/components/page-title.stories.js
deleted file mode 100644
index 64b4c6a14..000000000
--- a/ui/stories/components/page-title.stories.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-
-export default {
- title: 'Components/Page Title',
-};
-
-export let Standard = () => {
- return {
- template: hbs`
- Page title
-
-
This is the Page Title
-
- In its simplest form, a page title is just an H1.
- `,
- };
-};
-
-export let AfterElements = () => {
- return {
- template: hbs`
- Page title with after elements
-
-
- This is the Page Title
- Running
- 237aedcb8982fe09bcee0877acedd
-
-
- It is common to put high-impact tags and badges to the right of titles. These tags should only ever appear on the right-hand side of the title, and they should be listed in descending weights. Tags with a background are heavier than tags that are hollow. Longer values are heavier than shorter values.
- `,
- };
-};
-
-export let StatusLight = () => {
- return {
- template: hbs`
- Page title with status light
-
-
- Running
- 237aedcb8982fe09bcee0877acedd
-
-
- A simple color or pattern is faster to scan than a title and can often say more than words can. For pages that have an important status component to them (e.g., client detail page), a status light can be shown to the left of the title where typically eyes will begin to scan a page.
- `,
- };
-};
-
-export let Actions = () => {
- return {
- template: hbs`
- Page title with actions
-
-
- Running
- 237aedcb8982fe09bcee0877acedd
- If you wish
- No Regrets
-
-
- When actions apply to the entire context of a page, (e.g., job actions on the job detail page), buttons for these actions go in the page title. Buttons are always placed on the far right end of a page title. No elements can go to the right of these buttons.
- `,
- };
-};
diff --git a/ui/stories/components/proxy-tag.stories.js b/ui/stories/components/proxy-tag.stories.js
deleted file mode 100644
index 80d82a4ad..000000000
--- a/ui/stories/components/proxy-tag.stories.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-
-export default {
- title: 'Components/Proxy Tag',
-};
-
-export let ProxyTag = () => {
- return {
- template: hbs`
- Proxy Tag
- Some kind of title
- `,
- };
-};
diff --git a/ui/stories/components/search-box.stories.js b/ui/stories/components/search-box.stories.js
deleted file mode 100644
index 4579e9eaf..000000000
--- a/ui/stories/components/search-box.stories.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-
-export default {
- title: 'Components/Search Box',
-};
-
-export let Standard = () => {
- return {
- template: hbs`
- Search Box
- The search box component is a thin wrapper around a simple input. Although the searchTerm passed to it is a mutable reference, internally search term is debounced. This is to prevent potentially expensive code that depends on searchTerm from recomputing many times as a user types.
- There is no form of the search box component that defers updating the searchTerm reference until the user manually clicks a "Search" button. This can be achieved by placing a button next to the search bar component and using it to perform search, but search should be automatic whenever possible.
- `,
- };
-};
-
-export let Compact = () => {
- return {
- template: hbs`
- Compact Search Box
- Search box provides an inputClass property to control the inner input. This is nice for fitting the search box into smaller spaces, such as boxed-section heads.
- `,
- };
-};
diff --git a/ui/stories/components/stepper-input.stories.js b/ui/stories/components/stepper-input.stories.js
deleted file mode 100644
index fa4739154..000000000
--- a/ui/stories/components/stepper-input.stories.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-import { withKnobs, optionsKnob } from '@storybook/addon-knobs';
-
-export default {
- title: 'Components/Stepper Input',
- decorators: [withKnobs],
-};
-
-const variantKnob = () =>
- optionsKnob(
- 'Variant',
- {
- Primary: 'is-primary',
- Info: 'is-info',
- Warning: 'is-warning',
- Danger: 'is-danger',
- },
- 'is-primary',
- {
- display: 'inline-radio',
- },
- 'variant-id'
- );
-
-export let Standard = () => {
- return {
- template: hbs`
-
-
- Stepper
-
- Button for Context
-
- External Value: {{value}}
- `,
- context: {
- min: 0,
- max: 10,
- value: 5,
- variant: variantKnob(),
- },
- };
-};
diff --git a/ui/stories/components/table-configuration.stories.js b/ui/stories/components/table-configuration.stories.js
deleted file mode 100644
index c99b74b3d..000000000
--- a/ui/stories/components/table-configuration.stories.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-
-export default {
- title: 'Components/Table, Configuration',
-};
-
-export let TableConfiguration = () => {
- return {
- template: hbs`
- Table, configuration
- Table
-
-
- Name
- Language
- Description
-
-
-
- {{row.model.name}}
- {{row.model.lang}}
- {{row.model.desc}}
-
-
-
- Tables have airy designs with a minimal amount of borders. This maximizes their utility.
- `,
- context: {
- shortList: productMetadata,
- },
- };
-};
-
-export let Search = () => {
- return {
- template: hbs`
- Table search
-
-
- Table Name
-
-
- {{#if controller.filteredShortList.length}}
-
-
- Name
- Language
- Description
-
-
-
- {{row.model.name}}
- {{row.model.lang}}
- {{row.model.desc}}
-
-
-
- {{else}}
-
-
No Matches
-
No products match your query.
-
- {{/if}}
-
-
Tables compose with boxed-section and boxed-section composes with search box.
- `,
- context: {
- controller: EmberObject.extend({
- searchTerm: '',
-
- filteredShortList: computed('searchTerm', function () {
- let term = this.searchTerm.toLowerCase();
- return productMetadata.filter((product) =>
- product.name.toLowerCase().includes(term)
- );
- }),
- }).create(),
- },
- };
-};
-
-export let SortableColumns = () => {
- return {
- template: hbs`
- Table with sortable columns
-
-
- Name
- Language
- Description
-
-
-
- {{row.model.name}}
- {{row.model.lang}}
- {{row.model.desc}}
-
-
-
- The list-table component provides a sort-by contextual component for building link-to components with the appropriate query params.
- This leaves the component stateless, relying on data to be passed down and sending actions back up via the router (via link-to).
- `,
- context: {
- injectRoutedController: injectRoutedController(
- Controller.extend({
- queryParams: ['sortProperty', 'sortDescending'],
- sortProperty: 'name',
- sortDescending: false,
- })
- ),
-
- sortedShortList: computed(
- 'controller.{sortProperty,sortDescending}',
- function () {
- let sorted = productMetadata.sortBy(
- this.get('controller.sortProperty') || 'name'
- );
- return this.get('controller.sortDescending')
- ? sorted.reverse()
- : sorted;
- }
- ),
- },
- };
-};
-
-export let MultiRow = () => {
- return {
- template: hbs`
- Multi-row Table
-
-
- Name
- Language
-
-
-
- {{row.model.name}}
- {{row.model.lang}}
-
-
- {{row.model.desc}}
-
-
-
- The list-table component attempts to be as flexible as possible. For this reason, t.body does not provide the typical tr element. It's sometimes desired to have multiple elements per record.
- `,
- context: {
- injectRoutedController: injectRoutedController(
- Controller.extend({
- queryParams: ['sortProperty', 'sortDescending'],
- sortProperty: 'name',
- sortDescending: false,
- })
- ),
-
- sortedShortList: computed(
- 'controller.{sortProperty,sortDescending}',
- function () {
- let sorted = productMetadata.sortBy(
- this.get('controller.sortProperty') || 'name'
- );
- return this.get('controller.sortDescending')
- ? sorted.reverse()
- : sorted;
- }
- ),
- },
- };
-};
-
-export let Pagination = () => {
- return {
- template: hbs`
- Table pagination
-
-
-
- Rank
- City
- State
- Population
- Growth
-
-
-
- {{row.model.rank}}
- {{row.model.city}}
- {{row.model.state}}
- {{row.model.population}}
- {{format-percentage row.model.growth total=1}}
-
-
-
-
-
- Pagination works like sorting: using link-tos to set a query param.
- Pagination, like Table, is a minimal design. Only a next and previous button are available. The current place in the set of pages is tracked by showing which slice of items is currently shown.
- The pagination component exposes first and last components (for jumping to the beginning and end of a list) as well as pageLinks for generating links around the current page.
- `,
- context: {
- injectRoutedController: injectRoutedController(
- Controller.extend({
- queryParams: ['currentPage'],
- currentPage: 1,
- })
- ),
- longList,
- },
- };
-};
-
-export let RowLinks = () => {
- return {
- template: hbs`
- Table row links
-
-
- Name
- Language
- Description
-
-
-
- {{row.model.name}} {{row.model.lang}}
- {{row.model.desc}}
-
-
-
- It is common for tables to act as lists of links, (e.g., clients list all allocations, each row links to the allocation detail). The helper class is-interactive on the tr makes table rows have a pointer cursor. The helper class is-primary on the a element in a table row makes the link bold and black instead of blue. This makes the link stand out less, since the entire row is a link.
-
- A few rules for using table row links:
-
- The is-primary cell should always be the first cell
- The is-primary cell should always contain a link to the destination in the form of an a element. This is to support opening a link in a new tab.
- The full row should transition to the destination on click. This is to improve the usability of a table by creating a larger click area.
-
-
- `,
- context: {
- shortList: productMetadata,
- },
- };
-};
-
-export let CellLinks = () => {
- return {
- template: hbs`
- Table cell links
-
-
- Name
- Language
- Description
-
-
-
- {{row.model.name}} {{row.model.lang}}
- {{row.model.desc}}
-
-
-
- Links in table cells are just links.
- `,
- context: {
- shortList: productMetadata,
- },
- };
-};
-
-export let CellDecorations = () => {
- return {
- template: hbs`
- Table cell decorations
-
-
- Name
- Language
- Description
-
-
-
- {{row.model.name}}
-
- {{row.model.desc}}
-
-
-
- Small icons and accents of color make tables easier to scan.
- `,
- context: {
- shortList: productMetadata,
- },
- };
-};
-
-export let CellIcons = () => {
- return {
- template: hbs`
- Table cell icons
-
-
-
- Rank
- City
- State
- Population
- Growth
-
-
-
-
- {{#if (lt row.model.growth 0)}}
- {{x-icon "alert-triangle" class="is-warning"}}
- {{/if}}
-
- {{row.model.rank}}
- {{row.model.city}}
- {{row.model.state}}
- {{row.model.population}}
- {{format-percentage row.model.growth total=1}}
-
-
-
-
-
- `,
- context: {
- injectRoutedController: injectRoutedController(
- Controller.extend({
- queryParams: ['currentPage'],
- currentPage: 1,
- })
- ),
- longList,
- },
- };
-};
diff --git a/ui/stories/components/timeline.stories.js b/ui/stories/components/timeline.stories.js
deleted file mode 100644
index 5a5e79e61..000000000
--- a/ui/stories/components/timeline.stories.js
+++ /dev/null
@@ -1,248 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-import moment from 'moment';
-
-export default {
- title: 'Components/Timeline',
-};
-
-export let Standard = () => {
- return {
- template: hbs`
- Timeline
-
-
- {{format-date yesterday}}
-
-
-
-
- Object number one
-
-
-
-
-
- Object number two
-
-
-
- {{format-date today}}
-
-
-
-
- Object number three
-
-
-
- Timelines are a combination of objects and notes. Objects compose with boxed sections to create structure.
- Timeline notes should be used sparingly when possible. In this example there is a note per day rather than a note per object.
- `,
- context: {
- yesterday: moment().subtract(1, 'd'),
- today: moment(),
- },
- };
-};
-
-export let Detailed = () => {
- return {
- template: hbs`
- Detailed timeline
-
-
- {{format-date today}}
-
-
-
-
- Running
-
- Stable
- a387e243
-
- Submitted
- {{moment-from-now (now)}}
-
-
-
-
-
-
- Complete
-
- Expired
- b3220efb
-
- Submitted
- {{format-month-ts yesterday}}
-
-
-
-
- {{format-date yesterday}}
-
-
-
-
- Failed
-
- Reverted
- fec9218e
-
- Submitted
- {{format-month-ts yesterday}}
-
-
-
-
- `,
- context: {
- yesterday: moment().subtract(1, 'd'),
- today: moment(),
- },
- };
-};
-
-export let Toggling = () => {
- return {
- template: hbs`
- Toggling timeline objects
-
-
- {{format-date today}}
-
-
-
-
- Running
-
- Stable
- a387e243
-
- {{if toggle1 "Close" "Open"}}
-
-
- {{#if toggle1}}
-
-
Some details for the timeline object.
-
- {{/if}}
-
-
- {{format-date yesterday}}
-
-
-
-
- Complete
-
- Expired
- b3220efb
-
- {{if toggle2 "Close" "Open"}}
-
-
- {{#if toggle2}}
-
-
Some details for the timeline object.
-
- {{/if}}
-
-
-
- `,
- context: {
- yesterday: moment().subtract(1, 'd'),
- today: moment(),
- },
- };
-};
-
-export let Emphasizing = () => {
- return {
- template: hbs`
- Emphasizing timeline objects
-
-
- {{format-date today}}
-
-
-
-
-
- Stable
- a387e243
-
- Submitted
- {{moment-from-now (now)}}
-
-
-
-
-
-
- Pay attention here
-
-
-
- Expired
- b3220efb
-
- Submitted
- {{format-ts yesterday}}
-
-
-
-
- {{format-date yesterday}}
-
-
-
-
-
- Reverted
- fec9218e
-
- Submitted
- {{format-ts yesterday}}
-
-
-
-
- By using a full boxed-section for an emphasized timeline object, the object takes up more space and gets more visual weight. It also adheres to existing patterns.
- `,
- context: {
- yesterday: moment().subtract(1, 'd'),
- today: moment(),
- },
- };
-};
diff --git a/ui/stories/components/two-step-button.stories.js b/ui/stories/components/two-step-button.stories.js
deleted file mode 100644
index e83da4e72..000000000
--- a/ui/stories/components/two-step-button.stories.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-
-export default {
- title: 'Components/Two-Step Button',
-};
-
-export let Standard = () => {
- return {
- template: hbs`
- Two-Step Button
- Two-Step Button with class overrides
- Two-Step Button in title
-
- This is a page title
-
- `,
- };
-};
-
-export let InlineText = () => {
- return {
- template: hbs`
- Two-Step Button with inline confirmation message
- Two-Step Button loading state
-
- This is a page title
-
- Note: the state property is internal state and only used here to bypass the idle state for demonstration purposes.
- `,
- };
-};
diff --git a/ui/stories/theme/colors.stories.js b/ui/stories/theme/colors.stories.js
deleted file mode 100644
index f2af23b86..000000000
--- a/ui/stories/theme/colors.stories.js
+++ /dev/null
@@ -1,145 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-import { htmlSafe } from '@ember/string';
-
-export default {
- title: 'Theme/Colors',
-};
-
-export let Colors = () => {
- return {
- template: hbs`
- {{#each palettes as |palette|}}
-
-
{{palette.title}}
-
{{palette.description}}
- {{#each palette.colors as |color|}}
-
-
-
-
{{color.base}}
-
{{color.name}}
-
-
- {{/each}}
-
Font Stacks
-
- {{#each fontFamilies as |fontFamily|}}
- {{fontFamily.name}}
-
-
Aa
-
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
-
a b c d e f g h i j k l m n o p q r s t u v w x y z
-
0 1 2 3 4 5 6 7 8 9
-
- {{#each (all-icons) as |icon|}}
-
- {{x-icon icon}}
- {{icon}}
-
- {{/each}}
-
- `,
-});
diff --git a/ui/stories/theme/text-sizes.stories.js b/ui/stories/theme/text-sizes.stories.js
deleted file mode 100644
index adf65fb95..000000000
--- a/ui/stories/theme/text-sizes.stories.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import hbs from 'htmlbars-inline-precompile';
-
-export default {
- title: 'Theme/Text Sizing',
-};
-
-export let TextSizing = () => {
- return {
- template: hbs`
- Text sizing
-
-
Large Title
-
Some prose to follow the large title. Not necessarily meant for reading.
-
-
Medium Title
-
Some prose to follow the large title. Not necessarily meant for reading.
-
-
Small Title
-
Some prose to follow the large title. Not necessarily meant for reading.
-