Adds pages for creating VolumeGroupSnapshot

Signed-off-by: vbadrina <[email protected]>

Author: vbnrh

frontend/packages/console-app/locales/en/console-app.json

@@ -622,22 +622,30 @@
   "Select an option": "Select an option",
   "User Preferences {{activeTab}}": "User Preferences {{activeTab}}",
   "Set your individual preferences for the console experience. Any changes will be autosaved.": "Set your individual preferences for the console experience. Any changes will be autosaved.",
-  "VolumeSnapshotClass with same provisioner as claim": "VolumeSnapshotClass with same provisioner as claim",
-  "Select volume snapshot class": "Select volume snapshot class",
-  "PersistentVolumeClaim details": "PersistentVolumeClaim details",
+  "VolumeGroupSnapshotClass": "VolumeGroupSnapshotClass",
+  "Select volumegroup snapshot class": "Select volumegroup snapshot class",
   "Create VolumeGroupSnapshot": "Create VolumeGroupSnapshot",
+  "Selected PVCs have different storage provisioners. All PVCs must have StorageClasses with the same provisioner.": "Selected PVCs have different storage provisioners. All PVCs must have StorageClasses with the same provisioner.",
   "Edit YAML": "Edit YAML",
-  "Creating snapshot for claim <1>{{pvcName}}</1>": "Creating snapshot for claim <1>{{pvcName}}</1>",
-  "PersistentVolumeClaim": "PersistentVolumeClaim",
-  "PersistentVolumeClaim in {{namespace}} namespace": "PersistentVolumeClaim in {{namespace}} namespace",
-  "Snapshot Class": "Snapshot Class",
+  "GroupSnapshot Class": "GroupSnapshot Class",
+  "Persistent Volume Claim": "Persistent Volume Claim",
+  "Select PVCs in the {{namespace}} namespace using label selectors to form a volume group to take VolumeGroupSnapshots.": "Select PVCs in the {{namespace}} namespace using label selectors to form a volume group to take VolumeGroupSnapshots.",
+  "PVC Name": "PVC Name",
+  "Storage class": "Storage class",
+  "Applied filters:": "Applied filters:",
+  "Error loading PVCs": "Error loading PVCs",
+  "There was an error loading the PersistentVolumeClaims. Please try again.": "There was an error loading the PersistentVolumeClaims. Please try again.",
+  "Filter PVCs with label selector expressions": "Filter PVCs with label selector expressions",
+  "No PVCs have been identified for the volume group yet.": "No PVCs have been identified for the volume group yet.",
+  "Use the label selector to filter and display PVCs that match your criteria. These PVCs will be used to form the volume group.": "Use the label selector to filter and display PVCs that match your criteria. These PVCs will be used to form the volume group.",
+  "PVCs": "PVCs",
+  "are selected to form volume group for VolumeGroupSnapshots.": "are selected to form volume group for VolumeGroupSnapshots.",
   "VolumeGroupSnapshotClass details": "VolumeGroupSnapshotClass details",
   "Driver": "Driver",
   "Deletion policy": "Deletion policy",
   "Create VolumeGroupSnapshotClass": "Create VolumeGroupSnapshotClass",
   "VolumeGroupSnapshotContent details": "VolumeGroupSnapshotContent details",
   "VolumeGroupSnapshot": "VolumeGroupSnapshot",
-  "VolumeGroupSnapshotClass": "VolumeGroupSnapshotClass",
   "Volume handle": "Volume handle",
   "GroupSnapshot handle": "GroupSnapshot handle",
   "SnapshotClass": "SnapshotClass",
@@ -647,7 +655,14 @@
   "VolumeGroupSnapshotContent": "VolumeGroupSnapshotContent",
   "GroupSnapshot content": "GroupSnapshot content",
   "Only {{volumeMode}} volume mode is available for {{storageClass}} with {{accessMode}} access mode": "Only {{volumeMode}} volume mode is available for {{storageClass}} with {{accessMode}} access mode",
+  "VolumeSnapshotClass with same provisioner as claim": "VolumeSnapshotClass with same provisioner as claim",
+  "Select volume snapshot class": "Select volume snapshot class",
+  "PersistentVolumeClaim details": "PersistentVolumeClaim details",
   "Create VolumeSnapshot": "Create VolumeSnapshot",
+  "Creating snapshot for claim <1>{{pvcName}}</1>": "Creating snapshot for claim <1>{{pvcName}}</1>",
+  "PersistentVolumeClaim": "PersistentVolumeClaim",
+  "PersistentVolumeClaim in {{namespace}} namespace": "PersistentVolumeClaim in {{namespace}} namespace",
+  "Snapshot Class": "Snapshot Class",
   "VolumeSnapshotClass details": "VolumeSnapshotClass details",
   "Create VolumeSnapshotClass": "Create VolumeSnapshotClass",
   "VolumeSnapshotContent details": "VolumeSnapshotContent details",

frontend/packages/console-app/src/components/volume-group-snapshot/_create-volume-group-snapshot.scss

@@ -0,0 +1,44 @@
+@import '../../../../../public/style/vars';
+@import '../../../../console-shared/src/styles/skeleton-screen.scss';
+
+.co-volume-snapshot__body {
+  display: inline-flex;
+}
+
+.co-volume-snapshot__form {
+  margin: var(--pf-t--global--spacer--md) 0;
+}
+
+.co-volume-snapshot__details-body {
+  margin-bottom: var(--pf-t--global--spacer--md);
+}
+
+.co-volume-snapshot__alert-body {
+  margin-top: var(--pf-t--global--spacer--md);
+}
+
+.co-volume-snapshot__info {
+  max-width: 50%;
+  margin-right: 0;
+
+  @media (max-width: $screen-sm-max) {
+    display: none;
+  }
+}
+
+.skeleton-activity {
+  animation: $skeleton-animation;
+  background: $skeleton-color;
+  opacity: 0;
+  border-radius: 6px;
+  margin: 0.5rem 0.7em 0.5rem 0.7em;
+  height: 30px;
+
+  &::after {
+    background-repeat: no-repeat;
+    content: '';
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
+}