story.tsx 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. /*
  2. Copyright (C) 2017 Cloudbase Solutions SRL
  3. This program is free software: you can redistribute it and/or modify
  4. it under the terms of the GNU Affero General Public License as
  5. published by the Free Software Foundation, either version 3 of the
  6. License, or (at your option) any later version.
  7. This program is distributed in the hope that it will be useful,
  8. but WITHOUT ANY WARRANTY; without even the implied warranty of
  9. MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  10. GNU Affero General Public License for more details.
  11. You should have received a copy of the GNU Affero General Public License
  12. along with this program. If not, see <http://www.gnu.org/licenses/>.
  13. */
  14. import React from "react";
  15. import { storiesOf } from "@storybook/react";
  16. import MainDetails from ".";
  17. const endpoints: any = [
  18. { id: "endpoint-1", name: "Endpoint OPS", type: "openstack" },
  19. { id: "endpoint-2", name: "Endpoint AZURE", type: "azure" },
  20. ];
  21. const item: any = {
  22. origin_endpoint_id: "endpoint-1",
  23. destination_endpoint_id: "endpoint-2",
  24. id: "item-id",
  25. created_at: new Date(2017, 10, 24, 16, 15),
  26. info: {
  27. instance: {
  28. export_info: { devices: { nics: [{ network_name: "map_1" }] } },
  29. },
  30. },
  31. destination_environment: {
  32. description: "A description",
  33. network_map: {
  34. map_1: "Mapping 1",
  35. },
  36. },
  37. type: "Replica",
  38. };
  39. const props: any = {};
  40. storiesOf("MainDetails", module)
  41. .add("default", () => (
  42. <div style={{ width: "800px" }}>
  43. <MainDetails endpoints={[]} item={{}} {...props} />
  44. </div>
  45. ))
  46. .add("loading", () => (
  47. <div style={{ width: "800px" }}>
  48. <MainDetails loading endpoints={[]} item={{}} {...props} />
  49. </div>
  50. ))
  51. .add("openstack -> azure", () => (
  52. <div style={{ width: "800px" }}>
  53. <MainDetails endpoints={endpoints} item={item} {...props} />
  54. </div>
  55. ));