open-nomad/ui/stories/components/json-viewer.stories.js

191 lines
5 KiB
JavaScript
Raw Normal View History

UI: Migrate to Storybook (#6507) I originally planned to add component documentation, but as this dragged on and I found that JSDoc-to-Markdown sometimes needed hand-tuning, I decided to skip it and focus on replicating what was already present in Freestyle. Adding documentation is a finite task that can be revisited in the future. My goal was to migrate everything from Freestyle with as few changes as possible. Some adaptations that I found necessary: • the DelayedArray and DelayedTruth utilities that delay component rendering until slightly after initial render because without them: ◦ charts were rendering with zero width ◦ the JSON viewer was rendering with empty content • Storybook in Ember renders components in a routerless/controllerless context by default, so some component stories needed changes: ◦ table pagination/sorting stories access to query params, which necessitates some reaching into Ember internals to start routing and dynamically generate a Storybook route/controller to render components into ◦ some stories have a faux controller as part of their Storybook context that hosts setInterval-linked dynamic computed properties • some jiggery-pokery with anchor tags ◦ inert href='#' had to become href='javascript:; ◦ links that are actually meant to navigate need target='_parent' so they don’t navigate inside the Storybook iframe Maybe some of these could be addressed by fixes in ember-cli-storybook but I’m wary of digging around in there any more than I already have, as I’ve lost a lot of time to Storybook confusion and frustrations already 😞 The STORYBOOK=true environment variable tweaks some environment settings to get things working as expected in the Storybook context. I chose to: • use angle bracket invocation within stories rather than have to migrate them soon after having moved to Storybook • keep Freestyle around for now for its palette and typeface components
2020-01-21 21:46:32 +00:00
import hbs from 'htmlbars-inline-precompile';
import DelayedTruth from '../utils/delayed-truth';
export default {
2021-10-06 20:58:01 +00:00
title: 'Components/JSON Viewer',
UI: Migrate to Storybook (#6507) I originally planned to add component documentation, but as this dragged on and I found that JSDoc-to-Markdown sometimes needed hand-tuning, I decided to skip it and focus on replicating what was already present in Freestyle. Adding documentation is a finite task that can be revisited in the future. My goal was to migrate everything from Freestyle with as few changes as possible. Some adaptations that I found necessary: • the DelayedArray and DelayedTruth utilities that delay component rendering until slightly after initial render because without them: ◦ charts were rendering with zero width ◦ the JSON viewer was rendering with empty content • Storybook in Ember renders components in a routerless/controllerless context by default, so some component stories needed changes: ◦ table pagination/sorting stories access to query params, which necessitates some reaching into Ember internals to start routing and dynamically generate a Storybook route/controller to render components into ◦ some stories have a faux controller as part of their Storybook context that hosts setInterval-linked dynamic computed properties • some jiggery-pokery with anchor tags ◦ inert href='#' had to become href='javascript:; ◦ links that are actually meant to navigate need target='_parent' so they don’t navigate inside the Storybook iframe Maybe some of these could be addressed by fixes in ember-cli-storybook but I’m wary of digging around in there any more than I already have, as I’ve lost a lot of time to Storybook confusion and frustrations already 😞 The STORYBOOK=true environment variable tweaks some environment settings to get things working as expected in the Storybook context. I chose to: • use angle bracket invocation within stories rather than have to migrate them soon after having moved to Storybook • keep Freestyle around for now for its palette and typeface components
2020-01-21 21:46:32 +00:00
};
export let Standard = () => {
return {
template: hbs`
<h5 class="title is-5">JSON Viewer</h5>
{{#if delayedTruth.complete}}
<JsonViewer @json={{jsonSmall}} />
{{/if}}
`,
context: {
delayedTruth: DelayedTruth.create(),
jsonSmall: {
delayedData: {},
data: {
foo: 'bar',
number: 123456789,
2021-12-28 16:08:12 +00:00
products: [
'Consul',
'Nomad',
'Packer',
'Terraform',
'Vagrant',
'Vault',
],
UI: Migrate to Storybook (#6507) I originally planned to add component documentation, but as this dragged on and I found that JSDoc-to-Markdown sometimes needed hand-tuning, I decided to skip it and focus on replicating what was already present in Freestyle. Adding documentation is a finite task that can be revisited in the future. My goal was to migrate everything from Freestyle with as few changes as possible. Some adaptations that I found necessary: • the DelayedArray and DelayedTruth utilities that delay component rendering until slightly after initial render because without them: ◦ charts were rendering with zero width ◦ the JSON viewer was rendering with empty content • Storybook in Ember renders components in a routerless/controllerless context by default, so some component stories needed changes: ◦ table pagination/sorting stories access to query params, which necessitates some reaching into Ember internals to start routing and dynamically generate a Storybook route/controller to render components into ◦ some stories have a faux controller as part of their Storybook context that hosts setInterval-linked dynamic computed properties • some jiggery-pokery with anchor tags ◦ inert href='#' had to become href='javascript:; ◦ links that are actually meant to navigate need target='_parent' so they don’t navigate inside the Storybook iframe Maybe some of these could be addressed by fixes in ember-cli-storybook but I’m wary of digging around in there any more than I already have, as I’ve lost a lot of time to Storybook confusion and frustrations already 😞 The STORYBOOK=true environment variable tweaks some environment settings to get things working as expected in the Storybook context. I chose to: • use angle bracket invocation within stories rather than have to migrate them soon after having moved to Storybook • keep Freestyle around for now for its palette and typeface components
2020-01-21 21:46:32 +00:00
currentTime: '2019-10-16T14:24:12.378Z',
nested: {
obj: 'ject',
},
nonexistent: null,
isTrue: false,
},
},
},
};
};
export let FullDocument = () => {
return {
template: hbs`
<h5 class="title is-5">JSON Viewer for full document</h5>
{{#if delayedTruth.complete}}
<JsonViewer @json={{jsonLarge}} />
{{/if}}
`,
context: {
delayedTruth: DelayedTruth.create(),
jsonLarge: {
delayedData: {},
data: {
Stop: false,
Region: 'global',
Namespace: 'default',
ID: 'syslog',
ParentID: '',
Name: 'syslog',
Type: 'system',
Priority: 50,
AllAtOnce: false,
Datacenters: ['dc1', 'dc2'],
letraints: null,
TaskGroups: [
{
Name: 'syslog',
Count: 1,
Update: {
Stagger: 10000000000,
MaxParallel: 1,
HealthCheck: 'checks',
MinHealthyTime: 10000000000,
HealthyDeadline: 300000000000,
ProgressDeadline: 600000000000,
AutoRevert: false,
Canary: 0,
},
Migrate: null,
letraints: [
{
LTarget: '',
RTarget: '',
Operand: 'distinct_hosts',
},
],
RestartPolicy: {
Attempts: 10,
Interval: 300000000000,
Delay: 25000000000,
Mode: 'delay',
},
Tasks: [
{
Name: 'syslog',
Driver: 'docker',
User: '',
Config: {
port_map: [
{
tcp: 601,
udp: 514,
},
],
image: 'balabit/syslog-ng:latest',
},
Env: null,
Services: null,
Vault: null,
Templates: null,
letraints: null,
Resources: {
CPU: 500,
MemoryMB: 256,
DiskMB: 0,
IOPS: 0,
Networks: [
{
Device: '',
CIDR: '',
IP: '',
MBits: 10,
ReservedPorts: [
{
Label: 'udp',
Value: 514,
},
{
Label: 'tcp',
Value: 601,
},
],
DynamicPorts: null,
},
],
},
DispatchPayload: null,
Meta: null,
KillTimeout: 5000000000,
LogConfig: {
MaxFiles: 10,
MaxFileSizeMB: 10,
},
Artifacts: null,
Leader: false,
ShutdownDelay: 0,
KillSignal: '',
},
],
EphemeralDisk: {
Sticky: false,
SizeMB: 300,
Migrate: false,
},
Meta: null,
ReschedulePolicy: null,
},
],
Update: {
Stagger: 10000000000,
MaxParallel: 1,
HealthCheck: '',
MinHealthyTime: 0,
HealthyDeadline: 0,
ProgressDeadline: 0,
AutoRevert: false,
Canary: 0,
},
Periodic: null,
ParameterizedJob: null,
Dispatched: false,
Payload: null,
Meta: null,
VaultToken: '',
Status: 'running',
StatusDescription: '',
Stable: false,
Version: 0,
SubmitTime: 1530052201331477800,
CreateIndex: 27,
ModifyIndex: 27,
JobModifyIndex: 27,
},
},
},
};
};